退料单位工程树状修改

src/views/material/back/component/addReturn.vue

@@ -11,7 +11,14 @@
         >
             <el-row>
                 <el-form-item label="退料单位" prop="unitId">
-                    <el-cascader v-model="unitId"
+                    <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="unitId"
                         :show-all-levels="false"
                         :options="unitList"
                         :props="selectTreeProps"
@@ -20,26 +27,17 @@
                         collapse-tags 
                         @change="unitChange" 
                         placeholder="请选择退料单位"
-                    ></el-cascader> 
+                    ></el-cascader> -->
-                    <!-- <el-select
-                        v-model="queryParams.unitId"
-                        clearable
-                        filterable
-                        @change="GetProData"
-                        style="width: 240px"
-                        placeholder="请选择" 
-                    >
-                        <el-option
-                            v-for="item in unitList"
-                            :key="item.unitId"
-                            :label="item.unitName"
-                            :value="item.unitId"
-                        >
-                        </el-option>
-                    </el-select> -->
                 </el-form-item>
                 <el-form-item label="退料工程" prop="proId">
-                    <el-cascader v-model="projectId"
+                    <treeselect
+                        v-model="queryParams.proId"
+                        :options="proList" :normalizer="normalizer"
+                        :show-count="true" style="width: 240px" :disable-branch-nodes="true"
+                        noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
+                        placeholder="请选择退料工程" @select="proChange"
+                    />
+                    <!-- <el-cascader v-model="projectId"
                         :show-all-levels="false"
                         :options="proList"
                         :props="selectTreeProps"
@@ -47,23 +45,7 @@
                         collapse-tags 
                         @change="proChange"
                         placeholder="请选择退料工程"  
-                    ></el-cascader> 
+                    ></el-cascader>   -->
-                    <!-- <el-select
-                        v-model="queryParams.proId"
-                        clearable
-                        filterable
-                        @change="GetUnitData"
-                        style="width: 240px"
-                        placeholder="请选择" 
-                    >
-                        <el-option
-                            v-for="item in proList"
-                            :key="item.proId"
-                            :label="item.proName"
-                            :value="item.proId"
-                        >
-                        </el-option>
-                    </el-select> -->
                 </el-form-item>
                 <!-- <el-form-item label="协议号" prop="agreementCode">
                     <el-input
@@ -379,7 +361,10 @@ import {
 import { mapState } from 'vuex'
 import { getInfo, h } from '@/api/login'
 import { getToken } from '@/utils/auth'
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
+    components: { Treeselect },
     name: 'ReturnApplyAdd',
     dicts: ['ma_machine_status'],
     props: {
@@ -551,47 +536,36 @@ export default {
         ...mapState(['user']),
     },
     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.proId /*  */,
+                    // projectId: this.queryParams.proId /*  */,
                 }
                 const res = await getUnitList(params)
                 this.unitList = res.data
                 this.GetAgreementInfoById() 
         },
         unitChange(val){ 
-            // if(this.equipmentList.length>0){
-                // this.$modal.confirm('是否确认更改退料单位，此操作将清空当前列表？').then(() => {
-                    // this.unitId=val
-                    // this.lastUnitId=val
             // if(val&&val.length>0){  
             //     this.queryParams.unitId=this.unitId[this.unitId.length - 1]
             // }else if(val&&val.length==0){
             //     this.queryParams.unitId=""
             // }
             // this.GetProData() 
-                    // this.deviceType=[]
+            setTimeout(()=>{
-                    // this.equipmentList=[]
-                    // this.$message.success('操作成功!')
-                // }).catch(() => {
-
-                //     console.log(val)
-                //     console.log(this.unitId)
-                //     console.log(this.lastUnitId)
-                //     // this.unitId=this.lastUnitId
-                //     // this.$message.success('操作成功!')
-                // })
-            // }else{
-                // this.unitId=val
-                // this.lastUnitId=val
-                if(val&&val.length>0){  
-                    this.queryParams.unitId=this.unitId[this.unitId.length - 1]
-                }else if(val&&val.length==0){
-                    this.queryParams.unitId=""
-                }
                 this.GetProData()
-            // }
+            },500)  
         },
         // 获取 工程名称 列表数据
         async GetProData() {
@@ -600,54 +574,20 @@ export default {
                 }
                 const res = await getProjectList(params)
                 this.proList = res.data
+                this.queryParams.proId=null
                 this.GetAgreementInfoById() 
+                
         },
         proChange(val){ 
-            console.log(this.projectId)
-            console.log(val)
-            // if(this.equipmentList.length>0){
-                // this.$modal.confirm('是否确认更改退料单位，此操作将清空当前列表？').then(() => {
-                    // console.log(val)
-                    // console.log(this.projectId)
-                    // console.log(this.lastProjectId)
-                    // this.projectId=val
-                    // this.lastProjectId=val
             // if(val&&val.length>0){
             //     this.queryParams.proId=this.projectId[this.projectId.length - 1]
             // }else if(val&&val.length==0){
             //     this.queryParams.proId=""
             // }
             // this.GetUnitData()
-                    // this.deviceType=[]
+            setTimeout(()=>{
-                    // this.equipmentList=[]
-                    // this.$message.success('操作成功!')
-                // }).catch(() => { 
-                //     console.log(val)
-                //     console.log(this.projectId)
-                //     console.log(this.lastProjectId)
-                //     // this.$nextTick(()=>{
-                //         // setTimeout(()=>{
-                //         //     val = this.lastProjectId
-                //         //     this.projectId = this.lastProjectId
-                //         //     this.$forceUpdate()
-                //         // },1000)
-                //     // })
-                    
-                //     // this.projectId=this.lastProjectId
-                // })
-            // }else{
-                // console.log(val)
-                // console.log(this.projectId)
-                // console.log(this.lastProjectId)
-                // this.projectId=val
-                // this.lastProjectId=val
-                if(val&&val.length>0){
-                    this.queryParams.proId=this.projectId[this.projectId.length - 1]
-                }else if(val&&val.length==0){
-                    this.queryParams.proId=""
-                }
                 this.GetUnitData()
-            // } 
+            },500) 
         },
         // 获取 设备树结构数据
         async GetDeviceTypeTreeFn(agreementId) {
@@ -657,6 +597,7 @@ export default {
             const res = await getDeviceTreeByAgreementId(params)
             console.log('resgetUseTypeTreee==========', res)
             this.deviceTypeTree = res.data;
+            
             //反显
             let selectList = []
             this.equipmentList.forEach((e) => {
@@ -666,7 +607,6 @@ export default {
             })
             this.deviceType = selectList
             this.$forceUpdate() 
-            
         },
         //树结构数据获取父
         getParentsById(list, id) {
@@ -698,11 +638,13 @@ export default {
                     this.$message.error('当前单位和工程无协议！')
                     this.queryParams.unitId = null
                     this.queryParams.proId = null
+                    this.equipmentList = []
                     this.GetUnitData()
                     this.GetProData()
                 } else {
                     this.queryParams.agreementId = res.data.agreementId
                     this.queryParams.agreementCode = res.data.agreementCode
+                    this.equipmentList = []
                     this.GetDeviceTypeTreeFn(res.data.agreementId)
                 }
             }
@@ -713,16 +655,21 @@ export default {
             const res = await getBackApplyInfo(this.rowId)
             console.log(res) 
             const data = res.data
-            this.queryParams.unitId = data.backApplyInfo.unitId 
+            this.queryParams.unitId = data.backApplyInfo.unitId; 
-            this.unitId = this.treeParentsById(this.unitList, this.queryParams.unitId) 
+            // this.unitId = this.treeParentsById(this.unitList, this.queryParams.unitId) 
+            this.GetProData()
+            setTimeout(() => {
                 this.queryParams.proId = data.backApplyInfo.proId
-            this.projectId = this.treeParentsById(this.proList, this.queryParams.proId)  
+            }, 500);
+            // this.projectId = this.treeParentsById(this.proList, this.queryParams.proId)  
+           
             this.queryParams.phone = data.backApplyInfo.phone
             this.queryParams.backPerson = data.backApplyInfo.backPerson
             this.queryParams.agreementId = data.backApplyInfo.agreementId
             this.queryParams.remark = data.backApplyInfo.remark 
             this.equipmentList = data.backApplyDetailsList
             this.GetDeviceTypeTreeFn(data.backApplyInfo.agreementId)
+            
         }, 
         //单位，工程树结构数据获取父
         treeParentsById(list, id) {

src/views/material/back/component/home.vue

@@ -52,56 +52,22 @@
             </el-form-item>
             <br>
            <el-form-item label="退料单位" prop="unitId">
-                    <el-cascader v-model="unitId"
+                <treeselect
-                        :show-all-levels="false"
-                        :options="unitList"
-                        :props="selectTreeProps"
-                        filterable
-                        clearable
-                        collapse-tags
-                        @change="unitChange"
-                        placeholder="请选择退料单位"
-                    ></el-cascader>
-                <!-- <el-select
                     v-model="queryParams.unitId"
-                    clearable
+                    :options="unitList" :normalizer="normalizer"
-                    filterable
+                    :show-count="true" style="width: 240px" :disable-branch-nodes="true"
-                    @change="GetProData"
+                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
-                    style="width: 240px"
+                    placeholder="请选择退料单位" @select="unitChange"
-                    placeholder="请选择"
+                /> 
-                >
-                    <el-option
-                        v-for="item in unitList"
-                        :key="item.unitId"
-                        :label="item.unitName"
-                        :value="item.unitId"
-                    ></el-option>
-                </el-select> -->
             </el-form-item>
             <el-form-item label="退料工程" prop="proId">
-                <el-cascader v-model="projectId"
+                <treeselect
-                        :show-all-levels="false"
-                        :options="proList"
-                        :props="selectTreeProps"
-                        filterable clearable
-                        collapse-tags
-                        @change="proChange"
-                        placeholder="请选择退料工程"
-                    ></el-cascader>
-                <!-- <el-select
                     v-model="queryParams.proId"
-                    clearable
+                    :options="proList" :normalizer="normalizer"
-                    filterable
+                    :show-count="true" style="width: 240px" :disable-branch-nodes="true"
-                    style="width: 240px"
+                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
-                    placeholder="请选择"
+                    placeholder="请选择退料工程" @select="proChange"
-                >
+                />
-                    <el-option
-                        v-for="item in proList"
-                        :key="item.proId"
-                        :label="item.proName"
-                        :value="item.proId"
-                    ></el-option>
-                </el-select> -->
             </el-form-item>
             <el-form-item>
                 <el-button
@@ -386,11 +352,12 @@ import {
 //     // getUseNumByTypeId
 // } from '@/api/claimAndRefund/receive.js'
 import dialogFormByCq from '@/views/material/back/component/dialogFormByCq.vue'
-
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
     name: '',
     dicts: ['back_task_status'],
-    components: { dialogFormByCq },
+    components: { dialogFormByCq,Treeselect },
     data() {
         return {
             fullscreenLoading: false,
@@ -422,7 +389,7 @@ export default {
                 pageNum: 1,
                 pageSize: 10,
                 keyWord: '', //关键字
-                unitId: '', //单位id
+                unitId: null, //单位id
                 lotId: '', //工程id
                 status: '', //状态
                 typeId: '', //工机具类型
@@ -430,7 +397,7 @@ export default {
                 agreementCode: '', //协议
                 startTime: '',
                 endTime: '',
-                proId: '',
+                proId: null,
             },
             selectTreeProps: {
                 children: 'children',
@@ -470,7 +437,6 @@ export default {
             openTextTwo: '',
             openTextThree: '',
             companyId: '', 
-            deptOptions: [],
             unitList: [],
             proList: [],
             taskStatusList: [
@@ -492,14 +458,18 @@ export default {
     created() {
         this.getList();
         this.initSelectData() 
-        // this.InitIGetInfo()
     },
     methods: {
-        InitIGetInfo() {
+        /** 转换菜单数据结构 */
-            // getInfo().then((res) => {
+        normalizer(node) {
-            //     this.companyId = res.user.companyId
+            if (node.children && !node.children.length) {
-            //     this.getList()
+                delete node.children;
-            // })
+            }
+            return {
+                id: node.id,
+                label: node.name,
+                children: node.children,
+            };
         }, 
         initSelectData() {
             this.GetUnitData()
@@ -508,37 +478,30 @@ export default {
         // 获取 来往单位 列表数据
         async GetUnitData() {
                 const params = {
-                    projectId: this.queryParams.proId /*  */,
+                    // projectId: this.queryParams.proId /*  */,
                 }
                 const res = await getUnitList(params)
                 this.unitList = res.data 
         },
         unitChange(val){ 
-            if(val&&val.length>0){
+            setTimeout(()=>{
-                this.queryParams.unitId=this.unitId[this.unitId.length - 1]
-            }else if(val&&val.length==0){
-                this.queryParams.unitId=""
-            }
                 this.GetProData()
+            },500)  
         }, 
-
         // 获取 工程名称 列表数据
         async GetProData() {
                 const params = {
                     unitId: this.queryParams.unitId,
                 }
                 const res = await getProjectList(params)
-                this.proList = res.data
+                this.proList = res.data;
+                this.queryParams.proId=null
         },
         proChange(val){ 
-            if(val&&val.length>0){
+            setTimeout(()=>{
-                this.queryParams.proId=this.projectId[this.projectId.length - 1]
-            }else if(val&&val.length==0){
-                this.queryParams.proId=""
-            }
                 this.GetUnitData()
+            },500) 
         }, 
-
         /** 查询列表 startTime,结束日期endTime  */
         async getList() {
             this.loading = true