领料单位工程树状

src/views/material/lease/apply/component/addToolsApply.vue

@@ -27,7 +27,14 @@
         </el-select>
       </el-form-item> -->
       <el-form-item label="租赁单位" prop="unitId">
-        <el-cascader
+        <treeselect
+            v-model="maForm.unitId" :disabled="isEdit"
+            :options="uniteList" :normalizer="normalizer"
+            :show-count="true" style="width: 240px" :disable-branch-nodes="true"
+            noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
+            placeholder="请选择租赁单位" @select="uniteChange"
+        /> 
+        <!-- <el-cascader
           v-model="unitId"
           :show-all-levels="false"
           :options="uniteList"
@@ -38,10 +45,17 @@
           @change="uniteChange"
           :disabled="isEdit"
           placeholder="请选择租赁单位"
-        ></el-cascader>
+        ></el-cascader> -->
       </el-form-item>
       <el-form-item label="租赁工程" prop="projectId">
-        <el-cascader
+        <treeselect
+            v-model="maForm.projectId" :disabled="isEdit"
+            :options="projectList" :normalizer="normalizer"
+            :show-count="true" style="width: 240px" :disable-branch-nodes="true"
+            noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
+            placeholder="请选择租赁工程" @select="projectChange"
+        />
+        <!-- <el-cascader
           v-model="projectId"
           :show-all-levels="false"
           :options="projectList"
@@ -52,7 +66,7 @@
           @change="projectChange"
           :disabled="isEdit"
           placeholder="请选择租赁工程"
-        ></el-cascader>
+        ></el-cascader> -->
       </el-form-item>
       <el-form-item label="领料人" prop="leasePerson">
         <el-input
@@ -192,14 +206,13 @@ import {
   getPurchaseFileList,
 } from "@/api/purchase/goodsAccept";
 
-// import Treeselect from '@riophae/vue-treeselect'
+import Treeselect from '@riophae/vue-treeselect'
-// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css' 
-// import HoldingpoleDialog from '@/components/HoldingpoleDialog/index.vue'
 
 export default {
   name: "AddTools",
   dicts: ["purchase_task_status"],
-  // components: { Treeselect, HoldingpoleDialog },
+  components: { Treeselect },
   props: {
     isEdit: {
       type: Boolean,
@@ -354,28 +367,43 @@ export default {
     // this.equipmentType();
   },
   methods: {
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+        if (node.children && !node.children.length) {
+            delete node.children;
+        }
+        return {
+            id: node.id,
+            label: node.name,
+            children: node.children,
+        };
+    }, 
     uniteChange(val) {
       // this.projectList = [];
-      if (val && val.length > 0) {
+      // if (val && val.length > 0) {
-        this.maForm.unitId = this.unitId[this.unitId.length - 1];
+      //   this.maForm.unitId = this.unitId[this.unitId.length - 1];
-      } else if (val && val.length == 0) {
+      // } else if (val && val.length == 0) {
-        this.maForm.unitId = "";
+      //   this.maForm.unitId = "";
-      }
+      // }
+      setTimeout(()=>{
         getListProject({ unitId: this.maForm.unitId }).then((response) => {
           this.projectList = response.data;
+          this.maForm.projectId=null
         });
-      // this.unitTemp = this.unitid;
+      },500) 
     },
     projectChange(val) {
-      if (val && val.length > 0) {
+      // if (val && val.length > 0) {
-        this.maForm.projectId = this.projectId[this.projectId.length - 1];
+      //   this.maForm.projectId = this.projectId[this.projectId.length - 1];
-      } else if (val && val.length == 0) {
+      // } else if (val && val.length == 0) {
-        this.maForm.projectId = "";
+      //   this.maForm.projectId = "";
-      }
+      // }
-      getListUnite({ projectId: this.maForm.projectId }).then((response) => {
+      setTimeout(()=>{
+        // projectId: this.maForm.projectId
+        getListUnite({  }).then((response) => {
           this.uniteList = response.data;
         }); 
-      // this.projectTemp = this.projectId;
+      },500) 
     },
     /** 租赁单位和工程-下拉选 */
     projectInfoList() {
@@ -394,9 +422,6 @@ export default {
           this.projectList = response.data;
         });
       }
-      // getListProject({ id: null }).then((response) => {
-      //   this.projectList = response.data;
-      // });
     },
     // filterTree(nodes) {
     //   return nodes.map((node) => {