From c5f40976d5535d2e7579beeb2510c43cf0b4408a Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Fri, 27 Mar 2020 14:49:29 +0800
Subject: [PATCH] =?UTF-8?q?perf:=E5=AE=8C=E5=96=84mib=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/language/en.js      |  2 +
 .../src/components/common/rightBox/mibBox.vue | 84 ++++++++++++++-----
 .../src/components/page/config/mib.vue        | 40 +++++++--
 3 files changed, 98 insertions(+), 28 deletions(-)

diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 0f7e8c6d5..8d4ca261f 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -501,6 +501,8 @@ const en = {
       mibFile:'Mib File',
       uploadTip:'please upload mib file',
       requiredMibFile:'mib file is required',
+      vendor:'Vendor',
+      type:'Type',
     }
   },
   alert: {
diff --git a/nezha-fronted/src/components/common/rightBox/mibBox.vue b/nezha-fronted/src/components/common/rightBox/mibBox.vue
index 9dbd3c475..7d64e9899 100644
--- a/nezha-fronted/src/components/common/rightBox/mibBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/mibBox.vue
@@ -27,7 +27,7 @@
             <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">
+          <el-form-item :label='$t("config.mib.models")' prop="models" :rules="[{validator:checkModels,trigger:'change'}]" class="add-required">
             <el-cascader
               v-if="rightBox.isEdit"
               :options="modelOptions"
@@ -54,8 +54,8 @@
             <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.mibFile')" prop="file" :rules="!currentMib.id?[{validator:checkMibFile,trigger:'change'},{required: true,message:' ',trigger: 'blur'}]:[{validator:checkMibFile,trigger:'change'}]">
-            <el-upload v-if="rightBox.isEdit" :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange"  :auto-upload="false" accept="">
+          <el-form-item :label="$t('config.mib.mibFile')" prop="file" :rules="[{validator:checkMibFile,trigger:'change'}]" :class="{'add-required':!currentMib.id}">
+            <el-upload v-if="rightBox.isEdit" :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange"  :auto-upload="false" accept="" :on-remove="afterClearFile" ref="mibFileUpload">
               <div slot="tip" class="el-upload__tip" >
                 <span v-if="!currentMib.fileName">{{$t('config.mib.uploadTip')}}</span>
                 <span v-else>{{currentMib.fileName}}</span>
@@ -95,7 +95,7 @@
       let $temp=this;
       return {
         currentMib: {
-          id: '',
+          id: null,
           name: '',
           remark:'',
           models:'',
@@ -109,10 +109,7 @@
         rules: {
           name: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          models:[
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
+          ]
         },
         checkMibFile : (rule, value, callback) => {
           setTimeout(() => {
@@ -128,7 +125,16 @@
               $temp.uploadErrorMsg=null;
               return callback();
             }
-          }, 500);
+          }, 200);
+        },
+        checkModels:(rule, value, callback)=>{
+          setTimeout(() => {
+            if(!$temp.currentMib.models||$temp.currentMib.models == ''){
+              return callback(new Error($temp.$t('validate.required')))
+            }else{
+              return callback();
+            }
+          }, 200);
         },
         selectedModels:[],
         modelOptions:[],
@@ -202,14 +208,20 @@
         this.$refs.mibForm.validateField('models')
       },
       uploadChange:function(file,fileList){
+        console.log('fileChange')
         if (fileList.length > 0) {
           this.uploadFileList = [fileList[fileList.length - 1]]
+          this.uploadFile = this.uploadFileList[0];
         }
-        this.uploadFile = this.uploadFileList[0];
+        this.validateFile();
+      },
+      afterClearFile:function(file, fileList){
+        this.uploadFileList = [];
+        this.uploadFile = null;
         this.validateFile();
       },
       validateFile:function(){
-
+        this.$refs.mibForm.validateField('file')
       },
       /*保存*/
       save() {
@@ -220,15 +232,28 @@
             form.append('remark',this.currentMib.remark);
             form.append('models',this.currentMib.models);
             form.append('file',this.uploadFile&&this.uploadFile.raw?this.uploadFile.raw:null);
-            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');
-              }else{
-                this.$message.error(response.msg);
-              }
-            })
+            if(!this.currentMib.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');
+                }else{
+                  this.$message.error(response.msg);
+                }
+              })
+            }else{
+              form.append('id',this.currentMib.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');
+                }else{
+                  this.$message.error(response.msg);
+                }
+              })
+            }
           }
         })
       },
@@ -240,6 +265,19 @@
           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"), {
@@ -292,8 +330,14 @@
 
 <style>
   .right-box-mib .right-box-form-row{
+    margin-top:0;
     width: 100%;
   }
+  .add-required .el-form-item__label:before{
+    content: '*';
+    color: #F56C6C;
+    margin-right: 4px;
+  }
 </style>
 <style scoped>
   /*去除上传文件动画start*/
diff --git a/nezha-fronted/src/components/page/config/mib.vue b/nezha-fronted/src/components/page/config/mib.vue
index 126bc632e..37d1a7fc8 100644
--- a/nezha-fronted/src/components/page/config/mib.vue
+++ b/nezha-fronted/src/components/page/config/mib.vue
@@ -44,12 +44,35 @@
               <span class="clickable" @click="downloadMib(scope.row.id)">{{scope.row[item.prop]}}</span>
             </template>
             <template v-else-if="item.prop == 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0">
-              <span v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" >
-                <template v-if="i < scope.row['modelsDetail'].length-1">
-                  {{n.name}}，
-                </template>
-                <template v-else>{{n.name}}</template>
-              </span>
+              <div style="max-height: 100px">
+                <el-scrollbar style="height: 100%">
+                  <span v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" >
+                  <el-popover trigger="hover" placement="right" >
+                    <div>
+                      <div>
+                        <span>{{$t('overall.name')}}:</span>
+                        <span>{{n.name}}</span>
+                      </div>
+                      <div>
+                        <span>{{$t('config.mib.vendor')}}:</span>
+                        <span>{{n.vendor}}</span>
+                      </div>
+                      <div>
+                        <span>{{$t('config.mib.type')}}:</span>
+                        <span>{{n.type}}</span>
+                      </div>
+                    </div>
+                    <template slot="reference">
+                      <template v-if="i < scope.row['modelsDetail'].length-1">
+                        {{n.name}}
+                        <el-divider></el-divider>
+                      </template>
+                      <template v-else>{{n.name}}</template>
+                    </template>
+                  </el-popover>
+                </span>
+              </el-scrollbar>
+              </div>
             </template>
             <div v-else-if="item.prop == 'option'" class="content-right-options">
               <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'mib-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
@@ -94,7 +117,7 @@
         tableId: 'mibTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         mib: {
-          id: '',
+          id: null,
           name: '',
           remark:'',
           models:'',
@@ -294,13 +317,14 @@
       },
       cleanMib() {
         this.mib = {
-          id: '',
+          id: null,
           name: '',
           remark:'',
           file:'',
           models:'',
           file:null,
         };
+        this.$refs.mibBox.clearData();
       }
     },
     mounted: function () {