结算管理单位工程树状修改

src/views/material/cost/component/applyHome.vue

@@ -2,7 +2,14 @@
     <div class="app-container" id="costApplyList">
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
             <el-form-item label="结算单位" prop="unitIds">
-                <el-cascader v-model="unitIds"
+                <treeselect
+                    v-model="queryParams.unitId"
+                    :options="unitList" :normalizer="normalizer"
+                    :show-count="true" style="width: 240px" :disable-branch-nodes="true"
+                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
+                    placeholder="请选择结算单位" @select="unitChange"
+                /> 
+                <!-- <el-cascader v-model="unitIds"
                     :show-all-levels="false"
                     :options="unitList"
                     :props="selectTreeProps"
@@ -11,10 +18,17 @@
                     collapse-tags 
                     @change="unitChange" 
                     placeholder="请选择单位"
-                ></el-cascader> 
+                ></el-cascader>  -->
             </el-form-item>
             <el-form-item label="结算工程" prop="projectIds">
-                <el-cascader v-model="projectIds"
+                <treeselect
+                    v-model="queryParams.projectId"
+                    :options="proList" :normalizer="normalizer"
+                    :show-count="true" style="width: 240px" :disable-branch-nodes="true"
+                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
+                    placeholder="请选择结算工程" @select="proChange"
+                />
+                <!-- <el-cascader v-model="projectIds"
                         :show-all-levels="false"
                         :options="proList"
                         :props="selectTreeProps"
@@ -22,7 +36,7 @@
                         collapse-tags 
                         @change="proChange"
                         placeholder="请选择工程"  
-                    ></el-cascader> 
+                    ></el-cascader>  -->
             </el-form-item>
             <el-form-item label="协议号" prop="agreementCode">
                 <el-input v-model="queryParams.agreementCode" placeholder="协议号" clearable disabled/>
@@ -216,9 +230,12 @@ import {
 } from '@/api/back/index.js'  
 import { getSltAgreementInfo } from '@/api/cost/cost'
 import vueEasyPrint from "vue-easy-print";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
     name: 'CostApplyList',
     dicts: [],
+    components: { Treeselect },
     data() {
         return {
             // 遮罩层
@@ -257,8 +274,8 @@ export default {
                 pageSize: 10, 
                 sltStatus: '',
                 isCommit:'',
-                unitId: '',
+                unitId: null,
-                projectId: '',
+                projectId: null,
                 agreementId: '',
                 agreementCode: '',
             },
@@ -270,22 +287,40 @@ export default {
         this.GetProData()
     },
     methods: {
+        /** 转换菜单数据结构 */
+        normalizer(node) {
+            if (node.children && !node.children.length) {
+                delete node.children;
+            }
+            return {
+                id: node.id,
+                label: node.name,
+                children: node.children,
+            };
+        }, 
         // 获取 来往单位 列表数据
         async GetUnitData() {
                 const params = {
-                    projectId: this.queryParams.projectId /*  */,
+                    // projectId: this.queryParams.projectId /*  */,
                 }
                 const res = await getUnitList(params)
                 this.unitList = res.data;
+
                 this.getAgreementInfo() 
         },
         unitChange(val){
-            if(val&&val.length>0){
+            // if(val&&val.length>0){
-                this.queryParams.unitId=this.unitIds[this.unitIds.length - 1]
+            //     this.queryParams.unitId=this.unitIds[this.unitIds.length - 1]
-            }else if(val&&val.length==0){
+            // }else if(val&&val.length==0){
-                this.queryParams.unitId=""
+            //     this.queryParams.unitId=""
-            }
+            // }
-            this.GetProData()
+            // this.GetProData()
+            setTimeout(()=>{
+                this.queryParams.projectId=null
+                this.queryParams.agreementId = null
+                this.queryParams.agreementCode = null
+                this.GetProData()
+            },500)  
         }, 
         // 获取 工程名称 列表数据
         async GetProData() {
@@ -294,15 +329,19 @@ export default {
                 }
                 const res = await getProjectList(params)
                 this.proList = res.data;
+               
                 this.getAgreementInfo() 
         },
         proChange(val){
-            if(val&&val.length>0){
+            // if(val&&val.length>0){
-                this.queryParams.projectId=this.projectIds[this.projectIds.length - 1]
+            //     this.queryParams.projectId=this.projectIds[this.projectIds.length - 1]
-            }else if(val&&val.length==0){
+            // }else if(val&&val.length==0){
-                this.queryParams.projectId=""
+            //     this.queryParams.projectId=""
-            }
+            // }
-            this.GetUnitData()
+            // this.GetUnitData()
+            setTimeout(()=>{
+                this.GetUnitData()
+            },500) 
         },
         // 获取 协议id
         async getAgreementInfo() {
@@ -348,8 +387,8 @@ export default {
                 pageSize: 10, 
                 sltStatus: '',
                 isCommit:'',
-                unitId: '',
+                unitId: null,
-                projectId: '',
+                projectId: null,
                 agreementId: '',
                 agreementCode: '',
             }

src/views/material/cost/component/examHome.vue

@@ -2,7 +2,14 @@
     <div class="app-container" id="costApplyList">
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
             <el-form-item label="结算单位" prop="unitIds">
-                <el-cascader v-model="unitIds"
+                <treeselect
+                    v-model="queryParams.unitId"
+                    :options="unitList" :normalizer="normalizer"
+                    :show-count="true" style="width: 240px" :disable-branch-nodes="true"
+                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
+                    placeholder="请选择结算单位" @select="unitChange"
+                /> 
+                <!-- <el-cascader v-model="unitIds"
                     :show-all-levels="false"
                     :options="unitList"
                     :props="selectTreeProps"
@@ -11,10 +18,17 @@
                     collapse-tags 
                     @change="unitChange" 
                     placeholder="请选择单位"
-                ></el-cascader> 
+                ></el-cascader>  -->
             </el-form-item>
             <el-form-item label="结算工程" prop="projectIds">
-                <el-cascader v-model="projectIds"
+                <treeselect
+                    v-model="queryParams.projectId"
+                    :options="proList" :normalizer="normalizer"
+                    :show-count="true" style="width: 240px" :disable-branch-nodes="true"
+                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
+                    placeholder="请选择结算工程" @select="proChange"
+                />
+                <!-- <el-cascader v-model="projectIds"
                         :show-all-levels="false"
                         :options="proList"
                         :props="selectTreeProps"
@@ -22,7 +36,7 @@
                         collapse-tags 
                         @change="proChange"
                         placeholder="请选择工程"  
-                    ></el-cascader> 
+                    ></el-cascader>  -->
             </el-form-item>
             <el-form-item label="协议号" prop="agreementCode">
                 <el-input v-model="queryParams.agreementCode" placeholder="协议号" clearable disabled/>
@@ -186,9 +200,12 @@ import {
 } from '@/api/back/index.js'  
 import { getSltExam } from '@/api/cost/cost'
 import vueEasyPrint from "vue-easy-print";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
     name: 'CostApplyList',
     dicts: [],
+    components: { Treeselect },
     data() {
         return {
             // 遮罩层
@@ -229,10 +246,10 @@ export default {
                 keyWord: undefined,
                 sltStatus: '',
                 isCommit: '',
-                unitId: '',
+                unitId: null,
-                projectId: '',
+                projectId: null,
-                agreementId: '',
+                agreementId: null,
-                agreementCode: '',
+                agreementCode: null,
             },
             openPrint:false
         }
@@ -243,22 +260,40 @@ export default {
         this.GetProData()
     },
     methods: {
+        /** 转换菜单数据结构 */
+        normalizer(node) {
+            if (node.children && !node.children.length) {
+                delete node.children;
+            }
+            return {
+                id: node.id,
+                label: node.name,
+                children: node.children,
+            };
+        }, 
         // 获取 来往单位 列表数据
         async GetUnitData() {
                 const params = {
-                    projectId: this.queryParams.projectId /*  */,
+                    // projectId: this.queryParams.projectId /*  */,
                 }
                 const res = await getUnitList(params)
                 this.unitList = res.data;
+
                 this.getAgreementInfo() 
         },
         unitChange(val){
-            if(val&&val.length>0){
+            // if(val&&val.length>0){
-                this.queryParams.unitId=this.unitIds[this.unitIds.length - 1]
+            //     this.queryParams.unitId=this.unitIds[this.unitIds.length - 1]
-            }else if(val&&val.length==0){
+            // }else if(val&&val.length==0){
-                this.queryParams.unitId=""
+            //     this.queryParams.unitId=""
-            }
+            // }
-            this.GetProData()
+            // this.GetProData()
+            setTimeout(()=>{
+                this.queryParams.projectId=null
+                this.queryParams.agreementId = null
+                this.queryParams.agreementCode = null
+                this.GetProData()
+            },500)  
         }, 
         // 获取 工程名称 列表数据
         async GetProData() {
@@ -267,15 +302,19 @@ export default {
                 }
                 const res = await getProjectList(params)
                 this.proList = res.data;
+               
                 this.getAgreementInfo() 
         },
         proChange(val){
-            if(val&&val.length>0){
+            // if(val&&val.length>0){
-                this.queryParams.projectId=this.projectIds[this.projectIds.length - 1]
+            //     this.queryParams.projectId=this.projectIds[this.projectIds.length - 1]
-            }else if(val&&val.length==0){
+            // }else if(val&&val.length==0){
-                this.queryParams.projectId=""
+            //     this.queryParams.projectId=""
-            }
+            // }
-            this.GetUnitData()
+            // this.GetUnitData()
+            setTimeout(()=>{
+                this.GetUnitData()
+            },500) 
         },
         // 获取 协议id
         async getAgreementInfo() {
@@ -316,6 +355,16 @@ export default {
         },
         /** 重置按钮操作 */
         resetQuery() { 
+            this.queryParams={
+                pageNum: 1,
+                pageSize: 10, 
+                sltStatus: '',
+                isCommit:'',
+                unitId: null,
+                projectId: null,
+                agreementId: '',
+                agreementCode: '',
+            }
             this.resetForm('queryForm')
             this.handleQuery()
         },