feat: model/asset中vendor和type的处理

1.model中vendor和type的修改 2.asset新增model后model列表刷新
2020-03-12 12:13:45 +08:00
parent 2cfe1947ae
commit e270361186
6 changed files with 240 additions and 36 deletions
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -829,7 +829,7 @@ li{
 .el-scrollbar__thumb {
  background-color: #aaa;
 }
-.el-autocomplete-suggestion__wrap.el-scrollbar__wrap {
+.el-autocomplete-suggestion__wrap.el-scrollbar__wrap, .el-cascader-menu__wrap.el-scrollbar__wrap {
  margin-bottom: 0 !important;
 }
 .el-scrollbar__thumb:hover {
@@ -1241,3 +1241,17 @@ li{
 .el-table__fixed-body-wrapper {
  height: calc(100% - 42px) !important;
 }
+
+/*model侧滑中下拉框*/
+.autocomplete-dropdown {
+  display: flex;
+  align-items : center;
+  justify-content: space-between;
+}
+.autocomplete-dropdown .dropdown-btn-edit>i {
+  font-size: 14px;
+}
+.autocomplete-dropdown .dropdown-btn-delete>i {
+  color: #ee6723;
+  margin-right: 4px;
+}
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -262,7 +262,6 @@
          }
        });
        this.activeIndex = data
-
      },

      createBox(item) {
@@ -290,6 +289,7 @@
          this.$refs.alertConfigBox.show(true, true);
        } else if (item.type == 4) {
          this.addUnitShow = true;
+          this.$refs.assetAddUnit.show();
          this.$refs.assetAddUnit.resetAsset();
        }
      },
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -172,8 +172,8 @@
                class="right-box-row-with-btn"
              >
              </el-cascader>
-              <div class="right-box-row-btn " v-if="!tabView">
-                <el-popover
+              <div class="right-box-row-btn" v-if="!tabView" @click="addVendor"><i class="el-icon-plus"></i>
+                <!--<el-popover
                  placement="left"
                  trigger="click"
                  width="370"
@@ -190,9 +190,9 @@
                          <span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
                        </button>
                      </div>
-                      <!--标题-->
+                      &lt;!&ndash;标题&ndash;&gt;
                      <div class="pop-title">{{$t('asset.createAssetTab.vendorTab.vendor')}}</div>
-                      <!--表单内容-->
+                      &lt;!&ndash;表单内容&ndash;&gt;
                      <div class="pop-item">
                        <div class="pop-label">{{$t('asset.createAssetTab.vendorTab.vendorName')}}</div>
                        <el-input class="input-x-mini-26" v-model="addVendorData.value"/>
@@ -278,7 +278,7 @@
                    </div>
                  </div>
                  <div slot="reference"><i class="el-icon-plus"></i></div>
-                </el-popover>
+                </el-popover>-->
              </div>
            </template>
            <span v-if="tabView">{{assetViewData.vendor}}   {{assetViewData.model}}</span>
@@ -408,6 +408,7 @@
        </button>
      </div>
      <module-box :module="module" @reload="refreshTabData" ref="moduleBox"></module-box>
+      <model-box ref="modelBox" :model="model" @reload="getAllModelOptionData"></model-box>
    </div>
  </transition>
 </template>
@@ -512,6 +513,16 @@
          principal: '',
          tel: ''
        },
+        model: {
+          id: '',
+          name: '',
+          vendor: {id: '', value: '', code: '', type: ''},
+          type: {id: '', value: '', code: '', type: ''},
+          assetStat: {total: '', inStock: '', outStock: ''},
+          remark: '',
+          vendorCode: '',
+          typeCode: ''
+        },
        addIdcData: {
          id: '',
          name: '',
@@ -614,13 +625,17 @@
      }
    },*/
    watch: {
-      allModelUlData(newVal) {
+      allModelUlData: {
+        deep: true,
+        immediate: true,
+        handler(newVal) {
          if (newVal) {
            this.getConnectData();
            if (this.pageObj.id != '') {
              this.assetData.modelId = [this.obj.model.vendor.code, this.obj.model.id]
            }
          }
+        }
      },
      assetType(newVal) {
        this.assetData.assetType = newVal;
@@ -678,6 +693,11 @@
          this.modelCount = '';
        }
      },
+      show() {
+        this.getIDCOptionData();
+        this.getVendorOptionData();
+        this.getAssetTypeOptionData();
+      },
      editQuit() {
        for (let i of this.assetTypeOptionData) {
          if (i.isEdit === true) {
@@ -796,8 +816,8 @@
      getVendorOptionData() {
        this.$get('sys/dict/all?type=vendor').then(response => {
          if (response.code === 200) {
-            this.vendorUlData = response.data
-            this.markOptionData(this.vendorUlData)
+            this.vendorUlData = response.data;
+            this.markOptionData(this.vendorUlData);
          }
        })
      },
@@ -805,7 +825,7 @@
        this.$get('model?typeCode=' + assetType + '&vendorCode=' + vendorCode).then(response => {
          if (response.code === 200) {
            this.modelUlData = response.data.list;
-            this.markOptionData(this.modelUlData)
+            this.markOptionData(this.modelUlData);
          }
        })
      },
@@ -817,6 +837,29 @@
          }
        })
      },
+      addVendor() {
+        this.model = {
+          id: '',
+          name: '',
+          vendor: {id: '', value: '', code: '', type: ''},
+          type: {id: '', value: '', code: '', type: ''},
+          assetStat: {total: '', inStock: '', outStock: ''},
+          remark: '',
+          vendorCode: '',
+          typeCode: ''
+        };
+        if (this.assetType) {
+          //model侧滑弹出时，自动选好assetType
+          for (let i = 0; i < this.assetTypeOptionData.length; i++) {
+            if (this.assetTypeOptionData[i].code == this.assetType) {
+              this.model.type.code = this.assetType;
+              this.model.type.value = this.assetTypeOptionData[i].value;
+              break;
+            }
+          }
+        }
+        this.$refs.modelBox.show(true, true);
+      },
      resetAsset() {
        this.pageObj.id = '';
        this.assetData = {
@@ -1063,7 +1106,7 @@
          this.$post('sys/dict/save', this.assetTypeData).then(res => {
            const h = this.$createElement;
            if (res.code === 200) {
-              this.getAssetTypeOptionData()
+              this.getAssetTypeOptionData();
              this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
            } else {
              this.$message.error(res.msg);
--- a/nezha-fronted/src/components/common/rightBox/modelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/modelBox.vue
@@ -1,6 +1,6 @@
 <template>
  <transition name="right-box">
-    <div class="right-box right-box-model" v-if="rightBox.show" v-clickoutside="clickos">
+    <div class="right-box right-box-model" v-if="rightBox.show" v-clickoutside="clickos" @click="inputHandler">
      <!-- begin--顶部按钮-->
      <div class="right-box-top-btns">
        <button id="model-del" type="button" v-if="currentModel.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">
@@ -26,6 +26,28 @@
            <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.type')" prop="type">
+            <el-autocomplete
+              :fetch-suggestions="typeSuggestion"
+              v-model.trim="currentModel.type.value"
+              placeholder=""
+              size="small"
+              popper-class="no-style-class"
+              >
+              <template slot-scope="{ item }">
+                <div class="autocomplete-dropdown">
+                  <span v-if="!item.isEdit">{{item.value}}</span>
+                  <span v-else @click.stop="inputHandler(item)"><el-input size="mini" v-model="editingType" @click.stop></el-input></span>
+                  <div class="dropdown-btns">
+                    <span class="dropdown-btn dropdown-btn-delete" :id="'model-type-op-del-' + item.id" @click.stop="delType(item.id)"><i class="el-icon-delete"></i></span>
+                    <span v-if="!item.isEdit" class="dropdown-btn dropdown-btn-edit" :id="'model-type-op-edit-' + item.id" @click.stop="editType(item)"><i class="nz-icon nz-icon-edit"></i></span>
+                    <span v-else class="dropdown-btn dropdown-btn-edit" :id="'model-type-op-edit-' + item.id" @click.stop="saveType(item)"><i class="el-icon-check"></i></span>
+                  </div>
+                </div>
+              </template>
+            </el-autocomplete>
+          </el-form-item>
          <!--厂商-->
          <el-form-item :label="$t('config.model.vendor')" prop="vendor">
            <el-autocomplete
@@ -35,17 +57,17 @@
              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"
-              >
+              <template slot-scope="{ item }">
+                <div class="autocomplete-dropdown">
+                  <span v-if="!item.isEdit">{{item.value}}</span>
+                  <span v-else @click.stop="inputHandler(item)"><el-input size="mini" v-model="editingVendor"></el-input></span>
+                  <div class="dropdown-btns">
+                    <span class="dropdown-btn dropdown-btn-delete" :id="'model-vendor-op-del-' + item.id" @click.stop="delVendor(item.id)"><i class="el-icon-delete"></i></span>
+                    <span v-if="!item.isEdit" class="dropdown-btn dropdown-btn-edit" :id="'model-vendor-op-edit-' + item.id" @click.stop="editVendor(item)"><i class="nz-icon nz-icon-edit"></i></span>
+                    <span v-else class="dropdown-btn dropdown-btn-edit" :id="'model-type-op-edit-' + item.id" @click.stop="saveVendor(item)"><i class="el-icon-check"></i></span>
+                  </div>
+                </div>
+              </template>
            </el-autocomplete>
          </el-form-item>
          <el-form-item :label="$t('config.model.remark')" prop="remark">
@@ -99,9 +121,17 @@
          name: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
+          type: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          vendor: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ]
        },
-        vendorData: [],
-        typeData: []
+        vendorData: [], //vendor下拉列表的数据
+        typeData: [],  //type下拉列表的数据
+        editingVendor: '', //修改状态的vendor值
+        editingType: '', //修改状态的assetType值
      }
    },
    methods: {
@@ -112,6 +142,29 @@
      clickos() {
        this.rightBox.show = false;
      },
+
+      //控制下拉框里input的状态
+      inputHandler(obj) {
+        if (obj) {
+          this.typeData.forEach((item, index) => {
+            if (obj.id != item.id) {
+              item.isEdit = false;
+            }
+          });
+          this.vendorData.forEach((item, index) => {
+            if (obj.id != item.id) {
+              item.isEdit = false;
+            }
+          });
+        } else {
+          this.typeData.forEach((item, index) => {
+            item.isEdit = false;
+          });
+          this.vendorData.forEach((item, index) => {
+            item.isEdit = false;
+          });
+        }
+      },
      /*关闭弹框*/
      esc() {
        this.rightBox.show = false;
@@ -136,7 +189,10 @@
                  //保存成功后，重新获取
                  this.$get('sys/dict/all?type=vendor').then(response => {
                    if (response.code === 200) {
-                      this.vendorData = response.data;
+                      this.vendorData = response.data.map((item) => {
+                        item.isEdit = false;
+                        return item;
+                      });
                      this.currentModel.vendorCode = this.autocompleteExist('vendor', this.currentModel.vendor.value);
                      vendorReady = true;
                    }
@@ -158,7 +214,10 @@
                if (response.code === 200) {
                  this.$get('sys/dict/all?type=assetType').then(response => {
                    if (response.code === 200) {
-                      this.typeData = response.data;
+                      this.typeData = response.data.map((item) => {
+                        item.isEdit = false;
+                        return item;
+                      });
                      this.currentModel.typeCode = this.autocompleteExist('type', this.currentModel.type.value);
                      typeReady = true;
                    }
@@ -236,17 +295,103 @@
          });
        });
      },
+      delType(id) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("sys/dict/delete?ids=" + id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getTypeData();
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        });
+      },
+      editType(item) {
+        this.editingType = item.value;
+        this.inputHandler(item);
+        item.isEdit = true;
+      },
+      saveType(item) {
+        if (this.editingType) {
+          let temp = Object.assign({}, item);
+          temp.value = this.editingType;
+          this.$post('sys/dict/update', temp).then(response => {
+            if (response.code === 200) {
+              item.value = this.editingType;
+              item.isEdit = false;
+              if (this.currentModel.type.id == item.id) {
+                this.currentModel.type.value = item.value;
+              }
+              this.$emit("reload");
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        }
+      },
+      editVendor(item) {
+        this.editingVendor = item.value;
+        this.inputHandler(item);
+        item.isEdit = true;
+      },
+      saveVendor(item) {
+        if (this.editingVendor) {
+          let temp = Object.assign({}, item);
+          temp.value = this.editingVendor;
+          this.$post('sys/dict/update', temp).then(response => {
+            if (response.code === 200) {
+              item.value = this.editingVendor;
+              item.isEdit = false;
+              if (this.currentModel.vendor.id == item.id) {
+                this.currentModel.vendor.value = item.value;
+              }
+              this.$emit("reload");
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        }
+      },
+      delVendor(id) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("sys/dict/delete?ids=" + id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getVendorData();
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        });
+      },
      getVendorData() {
        this.$get('sys/dict/all?type=vendor').then(response => {
          if (response.code === 200) {
-            this.vendorData = response.data;
+            this.vendorData = response.data.map((item) => {
+              item.isEdit = false;
+              return item;
+            });
          }
        });
      },
      getTypeData() {
        this.$get('sys/dict/all?type=assetType').then(response => {
          if (response.code === 200) {
-            this.typeData = response.data;
+            this.typeData = response.data.map((item) => {
+              item.isEdit = false;
+              return item;
+            });
          }
        });
      },
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -649,12 +649,14 @@
        if (data === 'showAdd') {
          //this.addUnitShow = true;
          this.editUnitShow = true;
+          this.$refs['assetEditUnit'].show();
          this.$refs['assetEditUnit'].accountSwitch=false;
          this.$refs['assetEditUnit'].getAssetData('');
          this.$refs['assetEditUnit'].resetAsset();
        }
        if (data === 'showEdit') {
          this.editUnitShow = true;
+          this.$refs['assetEditUnit'].show();
          this.$refs['assetEditUnit'].getAssetData(id)
        }
        if (data === 'showView') {
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -171,7 +171,7 @@ Vue.directive("scrollBar", {
  },
 });

-const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown', "asset-dropdown","no-style-class"]; //clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
+const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown', "asset-dropdown", "no-style-class", 'el-message-box']; //clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
 const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {