feat: config-model

nezha-fronted/src/assets/stylus/main.scss

@@ -829,6 +829,9 @@ li{
 .el-scrollbar__thumb {
   background-color: #aaa;
 }
+.el-autocomplete-suggestion__wrap.el-scrollbar__wrap {
+  margin-bottom: 0 !important;
+}
 .el-scrollbar__thumb:hover {
   background-color: #999;
 }

nezha-fronted/src/components/common/header.vue

@@ -90,7 +90,7 @@
       </el-submenu>
       <el-submenu index="5" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('account')" :class ="activeIndex == 'account' || activeIndex == 'promServer' || activeIndex == 'dc' ? 'menu-active' :''">{{$t('overall.config')}}</div>
+          <div @click="jumpTo('account')" :class ="activeIndex == 'account' || activeIndex == 'promServer' || activeIndex == 'dc' || activeIndex == 'model' ? 'menu-active' :''">{{$t('overall.config')}}</div>
         </template>
         <el-menu-item index="5-0">
           <div @click="jumpTo('account')" :class="{'menu-item-active' :(activeIndex == 'account' )}">{{$t('config.account.account')}}</div>
@@ -101,6 +101,9 @@
         <el-menu-item index="5-2">
           <div @click="jumpTo('dc')" :class="{'menu-item-active' :(activeIndex == 'dc' )}">{{$t('config.dc.dc')}}</div>
         </el-menu-item>
+        <el-menu-item index="5-3">
+          <div @click="jumpTo('model')" :class="{'menu-item-active' :(activeIndex == 'model' )}">{{$t('config.model.model')}}</div>
+        </el-menu-item>
       </el-submenu>
       <el-submenu index="6" popper-class="nz-submenu">
         <template slot="title">

nezha-fronted/src/components/common/language/en.js

@@ -214,7 +214,7 @@ const en = {
         addAssetType:'New asset type',//'新增资产类型'
         existAssetType:'Existed asset type'//'已存在的资产类型'
       },
-      vendor:'Vendor',//'厂商/型号'
+      vendorModel:'Vendor/Model',//'厂商/型号'
       vendorTab:{
         vendor:'Vendor/Model',//'厂商/型号'
         vendorName:'New vendor',//'新厂商'
@@ -420,7 +420,8 @@ const en = {
       assets: "Assets",
       editModel: 'Edit model',
       createModel: 'Create model',
-      remark: 'Remark'
+      remark: 'Remark',
+      type: 'Type'
     }
   },
   alert: {

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

@@ -66,7 +66,7 @@
           <!------------------------------------------资产类型---------------------------------------------->
           <el-form-item :label="$t('asset.createAssetTab.assetType')" class="right-box-form-content" prop="assetType">
             <el-select popper-class="asset-dropdown" size="small" v-if="!tabView" v-model="assetType" clearable @visible-change="cancelEdit"
-                       @change="getAllModelOptionData()" class="right-box-row-with-btn">
+                       @change="getAllModelOptionData()">
               <el-option
                 :id="'asset-edit-type-op-'+item.id"
                 v-for="item in assetTypeOptionData"
@@ -90,7 +90,7 @@
                 </div>
               </el-option>
             </el-select>
-            <div class="right-box-row-btn " v-if="!tabView">
+            <!--<div class="right-box-row-btn " v-if="!tabView">
               <el-popover
                 placement="left"
                 trigger="click"
@@ -101,16 +101,16 @@
               >
                 <div class="pop-window-assetType" @click="editQuit()" id="asset-edit-sub-type-quit">
                   <div class="pop-window-assetType-content">
-                    <!--右上角按钮-->
+                    &lt;!&ndash;右上角按钮&ndash;&gt;
                     <div class="pop-top-btns">
                       <button type="button" @click="editPopoverClose('type')" id="asset-edit-sub-type-esc"  class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35">
                         <span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
                         <span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
                       </button>
                     </div>
-                    <!--标题-->
+                    &lt;!&ndash;标题&ndash;&gt;
                     <div class="pop-title">{{$t('asset.createAssetTab.assetTypeTab.assetType')}}</div>
-                    <!--表单内容-->
+                    &lt;!&ndash;表单内容&ndash;&gt;
                     <div class="pop-item">
                       <div class="pop-label">{{$t('asset.createAssetTab.assetTypeTab.addAssetType')}}</div>
                       <el-input class="input-x-mini-26" v-model="assetTypeData.value"/>
@@ -155,11 +155,11 @@
                 </div>
                 <div slot="reference"><i class="el-icon-plus"></i></div>
               </el-popover>
-            </div>
+            </div>-->
             <span v-if="tabView">{{assetViewData.assetType}}</span>
           </el-form-item>
           <!------------------------------------------厂商/型号---------------------------------------------->
-          <el-form-item :label="this.$t('asset.createAssetTab.vendor')" class="right-box-form-content" prop="modelId">
+          <el-form-item :label="this.$t('asset.createAssetTab.vendorModel')" class="right-box-form-content" prop="modelId">
             <template v-if="!tabView">
               <el-cascader
                 :options="vendorTypeOptionData"

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

@@ -21,14 +21,27 @@
       <!-- begin--表单-->
       <el-scrollbar class="right-box-form-box">
         <el-form class="right-box-form" :model="currentModel" label-position="top" :rules="rules" ref="modelForm">
+          <!--model名称-->
           <el-form-item :label='$t("overall.name")' prop="name">
-            <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="currentModel.name" size="small"></el-input>
+            <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model.trim="currentModel.name" size="small"></el-input>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModel.name}}</div>
           </el-form-item>
+          <!--厂商-->
           <el-form-item :label="$t('config.model.vendor')" prop="vendor">
             <el-autocomplete
               :fetch-suggestions="vendorSuggestion"
-              v-model="currentModel.vendor.name"
+              v-model.trim="currentModel.vendor.value"
+              placeholder=""
+              size="small"
+              popper-class="no-style-class"
+              >
+            </el-autocomplete>
+          </el-form-item>
+          <!--设备类型-->
+          <el-form-item :label="$t('config.model.type')" prop="vendor">
+            <el-autocomplete
+              :fetch-suggestions="typeSuggestion"
+              v-model.trim="currentModel.type.value"
               placeholder=""
               size="small"
               popper-class="no-style-class"
@@ -36,7 +49,7 @@
             </el-autocomplete>
           </el-form-item>
           <el-form-item :label="$t('config.model.remark')" prop="remark">
-            <el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model="currentModel.remark" size="small"></el-input>
+            <el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model.trim="currentModel.remark" size="small"></el-input>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModel.remark}}</div>
           </el-form-item>
         </el-form>
@@ -109,27 +122,89 @@
       save() {
         this.$refs.modelForm.validate((valid) => {
           if (valid) {
-            if (this.currentModel.id) {
-              this.$put('model', this.currentModel).then(response => {
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.rightBox.show = false;
-                  this.$emit('reload');
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
+            let errMsg = [];
+            //vendor和type如果是新记录，需要先请求后台新增，再获取code
+            let vendorReady = false;
+            let vendorCode = this.autocompleteExist('vendor', this.currentModel.vendor.value);
+            if (vendorCode) {
+              this.currentModel.vendorCode = vendorCode;
+              vendorReady = true;
             } else {
-              this.$post('model', this.currentModel).then(response => {
+              let vendor = {type: 'vendor', value: this.currentModel.vendor.value};
+              this.$post("sys/dict/save", vendor).then(response => {
                 if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.rightBox.show = false;
-                  this.$emit("reload");
+                  //保存成功后，重新获取
+                  this.$get('sys/dict/all?type=vendor').then(response => {
+                    if (response.code === 200) {
+                      this.vendorData = response.data;
+                      this.currentModel.vendorCode = this.autocompleteExist('vendor', this.currentModel.vendor.value);
+                      vendorReady = true;
+                    }
+                  });
                 } else {
-                  this.$message.error(response.msg);
+                  errMsg.push("vendor");
                 }
               });
             }
+
+            let typeReady = false;
+            let typeCode = this.autocompleteExist('type', this.currentModel.type.value);
+            if (typeCode) {
+              this.currentModel.typeCode = typeCode;
+              typeReady = true;
+            } else {
+              let type = {type: 'assetType', value: this.currentModel.type.value};
+              this.$post("sys/dict/save", type).then(response => {
+                if (response.code === 200) {
+                  this.$get('sys/dict/all?type=assetType').then(response => {
+                    if (response.code === 200) {
+                      this.typeData = response.data;
+                      this.currentModel.typeCode = this.autocompleteExist('type', this.currentModel.type.value);
+                      typeReady = true;
+                    }
+                  });
+                } else {
+                  errMsg.push("type");
+                }
+              });
+            }
+
+            let intervalTime = 1; //设置3秒超时
+            let interval = setInterval(() => {
+              if (vendorReady && typeReady) {
+                if (this.currentModel.id) {
+                  this.$put('model', this.currentModel).then(response => {
+                    if (response.code === 200) {
+                      this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                      this.rightBox.show = false;
+                      this.$emit('reload');
+                    } else {
+                      this.$message.error(response.msg);
+                    }
+                  });
+                } else {
+                  this.$post('model', this.currentModel).then(response => {
+                    if (response.code === 200) {
+                      this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                      this.rightBox.show = false;
+                      this.$emit("reload");
+                    } else {
+                      this.$message.error(response.msg);
+                    }
+                  });
+                }
+                clearInterval(interval);
+              } else if (intervalTime > 15) {
+                if (errMsg.length > 0) {
+                  this.$message.error(errMsg.join() + " error");
+                } else {
+                  this.$message.error("Time out");
+                }
+                clearInterval(interval);
+              } else {
+                intervalTime++;
+              }
+            }, 200);
           } else {
             return false;
           }
@@ -164,16 +239,16 @@
       getVendorData() {
         this.$get('sys/dict/all?type=vendor').then(response => {
           if (response.code === 200) {
-            this.vendorData = response.data
+            this.vendorData = response.data;
           }
-        })
+        });
       },
       getTypeData() {
         this.$get('sys/dict/all?type=assetType').then(response => {
           if (response.code === 200) {
-            this.typeData = response.data
+            this.typeData = response.data;
           }
-        })
+        });
       },
       //vendor的输入建议
       vendorSuggestion(queryString, callback) {
@@ -184,11 +259,45 @@
         callback(this.suggestionFilter('type', queryString));
       },
       suggestionFilter(type, queryString) {
+        let data = [];
         if (type == 'vendor') {
-
+          if (!queryString) {
+            data = this.vendorData;
+          } else {
+            for (let i = 0; i < this.vendorData.length; i++) {
+              if (this.vendorData[i].value.toLowerCase().indexOf(queryString.toLowerCase()) != -1) {
+                data.push(this.vendorData[i]);
+              }
+            }
+          }
         } else if (type == 'type') {
-
+          if (!queryString) {
+            data = this.typeData;
+          } else {
+            for (let i = 0; i < this.typeData.length; i++) {
+              if (this.typeData[i].value.toLowerCase().indexOf(queryString.toLowerCase()) != -1) {
+                data.push(this.typeData[i]);
+              }
+            }
+          }
         }
+        return data;
+      },
+      autocompleteExist(type, string) {
+        let result = false;
+        let data = [];
+        if (type == 'vendor') {
+          data = this.vendorData;
+        } else if (type == 'type') {
+          data = this.typeData;
+        }
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].value.toLowerCase() == string.toLowerCase()) {
+            result = data[i].code;
+            break;
+          }
+        }
+        return result;
       }
     },
     mounted() {