耗材字典维护编辑添加院内分类

src/views/basic/product/productEdit.vue

@@ -230,12 +230,24 @@
             </el-col>
           </el-row>
 
-          <el-row type="flex" class="edit-row" >
+          <el-row>
             <el-col :span="12">
               <el-form-item label="使用周期(天):" label-width="150px">
                 <el-input style="width: 80%" size="small" type="number" splaceholder="请输入内容" v-model="editQuery.useExpireTime"></el-input>
               </el-form-item>
             </el-col>
+            <el-col :span="12" class="el-col">
+              <el-form-item label="上级菜单:" label-width="150px">
+                <treeselect
+                  v-model="editQuery.relCode"
+                  :options="fromDeptOptions"
+                  :normalizer="normalizer"
+                  :show-count="true"
+                  style="width: 80%"
+                  placeholder="选择上级菜单"
+                />
+              </el-form-item>
+            </el-col>
           </el-row>
 
           <el-row type="flex">
@@ -415,6 +427,9 @@ import {isBlank} from "@/utils/strUtil";
 import {filterByUuid} from "@/api/basic/product/udiInfo";
 import ProductSingleEdit from "@/views/basic/product/productSingleEdit";
 import selectErp from "./udiInfoselectErpUdi";
+import {getListMenu} from "@/api/basic/basicHospType";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import Treeselect from "@riophae/vue-treeselect";
 
 
 export default {
@@ -462,6 +477,7 @@ export default {
       detailList: [],
       defaultSys: null,
       isImport: false,
+      fromDeptOptions: [],
       selectErpDialogVisible: false,  //选入ERP产品
       editSingleDiDialogVisible: false,
       editSingleFormat: {
@@ -476,13 +492,15 @@ export default {
   },
   components: {
     selectErp,
-    ProductSingleEdit
+    ProductSingleEdit,
+    Treeselect
   },
   created() {
     if(this.editQuery.isDateBy==1){
       this.editQuery.recentDateTime=this.editQuery.recentDateTime/24;
     }
     console.log(this.editQuery)
+    this.getTreeselect();
     this.useMutiChange(true)
     this.getThirdSysDetail();
     let ttquery = {
@@ -599,6 +617,25 @@ export default {
         .catch(() => {
         });
     },
+    getTreeselect() {
+      getListMenu().then(response => {
+        this.fromDeptOptions = [];
+        const menu = {id: 0, name: '主类目', children: []};
+        menu.children = this.handleTree(response.data,"code", "parentCode");
+        this.fromDeptOptions.push(menu);
+      });
+    },
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.code,
+        label: node.name,
+        children: node.children
+      };
+    },
     useDyCheckChange(val) {
       this.editQuery.useNum = 0;
     },
@@ -668,5 +705,16 @@ export default {
 </script>
 
 <style scoped>
+.vue-treeselect >>> .vue-treeselect__placeholder {
+  font-size: 12px;
+}
 
+.vue-treeselect >>> .vue-treeselect__value-container {
+  font-size: 12px;
+  height: 30px;
+}
+
+.vue-treeselect >>> .vue-treeselect__control {
+  height: 20px;
+}
 </style>