diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index e87ddacc6..33a79bc36 100644
--- 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;
+}
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index cfe8130ac..cac39708a 100644
--- 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();
         }
       },
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index b6b2e80f0..c1ac2d08d 100644
--- 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,11 +625,15 @@
       }
     },*/
     watch: {
-      allModelUlData(newVal) {
-        if (newVal) {
-          this.getConnectData();
-          if (this.pageObj.id != '') {
-            this.assetData.modelId = [this.obj.model.vendor.code, this.obj.model.id]
+      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]
+            }
           }
         }
       },
@@ -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);
diff --git a/nezha-fronted/src/components/common/rightBox/modelBox.vue b/nezha-fronted/src/components/common/rightBox/modelBox.vue
index d08768da3..d4012eae3 100644
--- 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
@@ -34,18 +56,18 @@
               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"
-              >
+            >
+              <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;
+            });
           }
         });
       },
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 999f2c44f..0c3eb6892 100644
--- 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') {
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 2dad71a93..c102e6445 100644
--- 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) {