NEZ-351 perf: 底部滑框、侧滑框重构、动画优化

nezha-fronted/src/components/common/rightBox/mibBox.vue

@@ -1,91 +1,62 @@
 <template>
-  <transition name="right-box">
-    <div class="right-box right-box-mib" v-if="rightBox.show" v-clickoutside="clickos" >
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns">
-        <button id="mib-del" type="button" v-if="currentMib.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
-          <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-        </button>
-        <button v-if="!rightBox.isEdit" id="mib-save" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
-          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
-        </button>
-      </div>
-      <!-- end--顶部按钮-->
-
-      <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
-      <!-- end--标题-->
-
-      <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box">
-        <el-form class="right-box-form  right-box-form-left" :model="currentMib" label-position="right" label-width="120px" :rules="rules" ref="mibForm">
-          <!--mib名称-->
-          <!--<el-form-item :label='$t("overall.name")' prop="name">
-            <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model.trim="currentMib.name" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.name}}</div>
-          </el-form-item>-->
-
-          <el-form-item :label='$t("config.mib.models")' prop="models" :rules="[{validator:checkModels,trigger:'change'}]" >
-            <el-cascader
-              v-if="rightBox.isEdit"
-              :options="modelOptions"
-              :props="modelProps"
-              :show-all-levels="false"
-              v-model="selectedModels"
-              @change="selectedModelChange"
-              ref="modelSelector"
-              collapse-tags
-              :placeholder="$t('config.mib.modelTip')"
-              size="small"
-              class="right-box-form-row"
-              clearable></el-cascader>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">
-              <span v-for="(n,i) in selectedModels" :key="n.name+'-'+n.id+'-'+i" >
-                <template v-if="i < selectedModels.length-1">
-                  {{n.name}}，
-                </template>
-                <template v-else>{{n.name}}</template>
-              </span>
-            </div>
-          </el-form-item>
-          <el-form-item :label="$t('config.mib.remark')" prop="remark">
-            <el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model.trim="currentMib.remark" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.remark}}</div>
-          </el-form-item>
-          <el-form-item :label="$t('config.mib.mibFiles')" prop="file" :rules="[{validator:checkMibFile,trigger:'change'}]" :class="{'add-required':!currentMib.id}">
-            <el-upload drag v-if="rightBox.isEdit" :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange"  :auto-upload="false" accept="" :on-remove="afterClearFile" ref="mibFileUpload" class="mib-upload right-box-form-row">
-              <div slot="tip" class="el-upload__tip" >
-               <!-- <span v-if="!currentMib.fileName">{{$t('config.mib.uploadTip')}}</span>
-                <span v-else>{{currentMib.fileName}}</span>-->
-                <span v-if="currentMib.fileName">{{currentMib.fileName}}</span>
-                <span v-if="uploadErrorMsg" style="color: #F56C6C"><br>{{uploadErrorMsg}}</span>
-              </div>
-              <i class="el-icon-upload"></i>
-              <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-             <!-- <button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
-                <span class="top-tool-btn-txt" >{{$t('overall.upload')}}</span>
-              </button>-->
-            </el-upload>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.fileName}}</div>
-          </el-form-item>
-
-        </el-form>
-      </el-scrollbar>
-
-      <!--底部按钮-->
-      <div class="right-box-bottom-btns">
-        <button @click="esc" id="model-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
-          <span>{{$t('overall.cancel')}}</span>
-        </button>
-        <button v-if="rightBox.isEdit" @click="saveOrToEdit" id="model-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
-          <span>{{$t('overall.save')}}</span>
-        </button>
-      </div>
-
+  <div class="right-box right-box-mib" v-clickoutside="clickOutside" >
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns">
+      <button id="mib-del" type="button" v-if="editMib.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
+        <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
     </div>
-  </transition>
+    <!-- end--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{editMib.id ? ($t("config.mib.editMib") + "  ID：" + editMib.id) : $t("config.mib.createMib")}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <el-scrollbar class="right-box-form-box">
+      <el-form class="right-box-form  right-box-form-left" :model="editMib" label-position="right" label-width="120px" :rules="rules" ref="mibForm">
+        <el-form-item :label='$t("config.mib.models")' prop="models" :rules="[{validator:checkModels,trigger:'change'}]" >
+          <el-cascader
+            :options="modelOptions"
+            :props="modelProps"
+            :show-all-levels="false"
+            v-model="selectedModels"
+            @change="selectedModelChange"
+            ref="modelSelector"
+            collapse-tags
+            :placeholder="$t('config.mib.modelTip')"
+            size="small"
+            class="right-box-form-row"
+            clearable></el-cascader>
+        </el-form-item>
+        <el-form-item :label="$t('config.mib.remark')" prop="remark">
+          <el-input maxlength="512" rows="4" show-word-limit type="textarea" placeholder="" v-model.trim="editMib.remark" size="small"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.mib.mibFiles')" prop="file" :rules="[{validator:checkMibFile,trigger:'change'}]" :class="{'add-required':!editMib.id}">
+          <el-upload drag :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange" :auto-upload="false" accept="" :on-remove="afterClearFile" ref="mibFileUpload" class="mib-upload right-box-form-row">
+            <div slot="tip" class="el-upload__tip" >
+              <span v-if="editMib.fileName">{{editMib.fileName}}</span>
+              <span v-if="uploadErrorMsg" style="color: #F56C6C"><br>{{uploadErrorMsg}}</span>
+            </div>
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button @click="esc(false)" id="model-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="save" id="model-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+
+  </div>
 </template>
 
 <script>
@@ -97,18 +68,7 @@
     data() {
       let $temp=this;
       return {
-        currentMib: {
-          id: null,
-          name: '',
-          remark:'',
-          models:'',
-          file:null,
-        },
-        rightBox: {
-          show: false,
-          title: '',
-          isEdit: false
-        },
+        editMib: {},
         rules: {
           name: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
@@ -116,7 +76,7 @@
         },
         checkMibFile : (rule, value, callback) => {
           setTimeout(() => {
-            if(!$temp.currentMib.id){
+            if(!$temp.editMib.id){
               if(!$temp.uploadFile || !$temp.uploadFile.raw){
                 $temp.uploadErrorMsg=$temp.$t('config.mib.requiredMibFile');
                 return callback(new Error(' '));
@@ -132,7 +92,7 @@
         },
         checkModels:(rule, value, callback)=>{
           setTimeout(() => {
-            if(!$temp.currentMib.models||$temp.currentMib.models == ''){
+            if(!$temp.editMib.models||$temp.editMib.models == ''){
               // return callback(new Error($temp.$t('validate.required')))
               return callback();
             }else{
@@ -147,21 +107,14 @@
         uploadFile:null,
         uploadErrorMsg:null,
       }
-    },
-    created:function(){
-
     },
     methods: {
-      show(show, isEdit) {
-        this.rightBox.show = show;
-        this.rightBox.isEdit = isEdit;
-      },
-      clickos() {
-        this.rightBox.show = false;
+      clickOutside() {
+        this.esc(false);
       },
       /*关闭弹框*/
-      esc() {
-        this.rightBox.show = false;
+      esc(refresh) {
+        this.$emit("close", refresh);
       },
       queryModelInfos:function(){
         this.$get('model?pageSize=-1').then(response=>{
@@ -205,21 +158,20 @@
           for(let node of selectedNodes){
             models+=node+',';
           }
-          this.currentMib.models=models.substr(0,models.length-1);
+          this.editMib.models=models.substr(0,models.length-1);
         }else{
-          this.currentMib.models='';
+          this.editMib.models='';
         }
         this.$refs.mibForm.validateField('models')
       },
-      uploadChange:function(file,fileList){
-        console.log('fileChange')
+      uploadChange(file,fileList) {
         if (fileList.length > 0) {
-          this.uploadFileList = [fileList[fileList.length - 1]]
+          this.uploadFileList = [fileList[fileList.length - 1]];
           this.uploadFile = this.uploadFileList[0];
         }
         this.validateFile();
       },
-      afterClearFile:function(file, fileList){
+      afterClearFile(file, fileList) {
         this.uploadFileList = [];
         this.uploadFile = null;
         this.validateFile();
@@ -232,27 +184,25 @@
         this.$refs.mibForm.validate((valid) => {
           if (valid) {
             let form = new FormData();
-            form.append('name',this.currentMib.name);
-            form.append('remark',this.currentMib.remark);
-            form.append('models',this.currentMib.models);
-            form.append('file',this.uploadFile&&this.uploadFile.raw?this.uploadFile.raw:null);
-            if(!this.currentMib.id){
-              this.$post('/mib',form,{'Content-Type': 'multipart/form-data'}).then(response=>{
-                if(response.code==200 && response.msg=='success'){
+            form.append('name',this.editMib.name);
+            form.append('remark',this.editMib.remark);
+            form.append('models',this.editMib.models);
+            form.append('file', this.uploadFile && this.uploadFile.raw ? this.uploadFile.raw : null);
+            if(!this.editMib.id){
+              this.$post('/mib', form, {'Content-Type': 'multipart/form-data'}).then(response=>{
+                if(response.code==200 && response.msg == 'success'){
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc();
-                  this.$emit('after');
+                  this.esc(true);
                 }else{
                   this.$message.error(response.msg);
                 }
               })
             }else{
-              form.append('id',this.currentMib.id);
+              form.append('id',this.editMib.id);
               this.$put('/mib',form,{'Content-Type': 'multipart/form-data'}).then(response=>{
                 if(response.code==200 && response.msg=='success'){
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc();
-                  this.$emit('after');
+                  this.esc(true);
                 }else{
                   this.$message.error(response.msg);
                 }
@@ -261,27 +211,6 @@
           }
         })
       },
-      saveOrToEdit: function() {
-        if (!this.rightBox.isEdit) {
-          this.rightBox.isEdit = true;
-          this.rightBox.title = this.$t("config.mib.editMib") + "  ID：" + this.currentMib.id;
-        } else {
-          this.save();
-        }
-      },
-      clearData:function(){
-        this.currentMib={
-          id: null,
-          name: '',
-          remark:'',
-          file:'',
-          models:'',
-        }
-        this.uploadFile=null;
-        this.uploadFileList=[];
-        this.selectedModels=[];
-        this.uploadErrorMsg=null;
-      },
       /*删除*/
       del() {
         this.$confirm(this.$t("tip.confirmDelete"), {
@@ -289,11 +218,10 @@
           cancelButtonText: this.$t("tip.no"),
           type: 'warning'
         }).then(() => {
-          this.$delete("mib?ids=" + this.currentMib.id).then(response => {
+          this.$delete("mib?ids=" + this.editMib.id).then(response => {
             if (response.code === 200) {
               this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.rightBox.show = false;
-              this.$emit("reload");
+              this.esc(true);
             } else {
               this.$message.error(response.msg);
             }
@@ -309,18 +237,13 @@
     watch: {
       mib: {
         immediate: true,
-        deep:true,
+        deep: true,
         handler(n, o) {
-          this.currentMib = Object.assign({},n);
-          if(this.currentMib.models){
-            this.selectedModels=this.currentMib.models.split(',');
+          this.editMib = JSON.parse(JSON.stringify(n));
+          if(this.editMib.models){
+            this.selectedModels = this.editMib.models.split(',');
           }else{
-            this.selectedModels=[];
-          }
-          if (n && n.id) {
-            this.rightBox.title =this.rightBox.isEdit? this.$t("config.mib.editMib") + "  ID：" + n.id : this.$t("config.mib.mib") + "  ID：" + n.id ;
-          } else {
-            this.rightBox.title = this.$t("config.mib.createMib");
+            this.selectedModels = [];
           }
         }
       },