jsk 出库台账添加 分公司-领用单位-工程名称 筛选

src/views/material/report/leaseOutReport.vue

@@ -31,6 +31,35 @@
                     maxlength="20"
                 />
             </el-form-item>
+            <el-form-item prop="leaseUnitId">
+                <treeselect
+                    v-model="queryParams.leaseUnitId"
+                    :options="unitList" :normalizer="normalizer"
+                    :show-count="true" style="width: 240px" :disable-branch-nodes="true"
+                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
+                    placeholder="请选择领取单位" @select="unitChange"
+                />
+            </el-form-item>
+            <el-form-item prop="leaseProjectId">
+                <treeselect
+                    v-model="queryParams.leaseProjectId"
+                    :options="proList" :normalizer="normalizer"
+                    :show-count="true" style="width: 240px" :disable-branch-nodes="true"
+                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
+                    placeholder="请选择工程名称" @select="proChange"
+                />
+            </el-form-item>
+             <el-form-item prop="impUnitName">
+                <el-select v-model="queryParams.impUnitName" placeholder="请选择分公司" clearable style="width: 240px">
+                    <el-option
+                        v-for="item in impUnitNameList"
+                        :key="item.impUnit"
+                        :label="item.impUnitName"
+                        :value="item.impUnit"
+                    ></el-option>
+                </el-select>
+             </el-form-item>
+
             <el-form-item>
                 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                 <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -135,8 +164,17 @@
 
 <script>
     import { getLeaseOutListApi, getLeaseOutListNoPageApi, getLeaseOutDetailsListApi } from "@/api/report/report";
+    import {
+        getProjectList,
+        getUnitList,
+        getImpUnitNameListApi
+    } from '@/api/back/index.js'
+    import vueEasyPrint from 'vue-easy-print'
+    import Treeselect from "@riophae/vue-treeselect"
+    import "@riophae/vue-treeselect/dist/vue-treeselect.css"
     export default {
     name: "LeaseOutReport",
+    components: { vueEasyPrint, Treeselect },
     data() {
         return {
         // 遮罩层
@@ -150,13 +188,21 @@
         showHouse: false,
         dateRange:[],
         ids:[],
+
+        unitList: [],
+        proList: [],
+        impUnitNameList: [],
+
         // 查询参数
         queryParams: {
             pageNum: 1,
             pageSize: 10,
             keyWord:undefined,
             startTime: undefined,
-            endTime: undefined
+            endTime: undefined,
+            leaseUnitId:undefined,
+            leaseProjectId:undefined,
+            impUnitName:undefined
         },
         // 总条数
         total: 0,
@@ -182,9 +228,56 @@
         this.dateRange = [this.format(start), this.format(end)]
         this.queryParams.startTime = this.format(start)
         this.queryParams.endTime = this.format(end)
+        this.GetUnitData()
+        this.GetProData()
+        this.getImpUnitNameList()
         this.getList()
     },
     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 res = await getUnitList({})
+            this.unitList = res.data
+            console.log('🚀 ~ this.unitList:', this.unitList)
+        },
+        unitChange(val){
+            setTimeout(()=>{
+                // this.GetProData()
+            },500)
+        },
+        // 获取 工程名称 列表数据
+        async GetProData() {
+            const params = { unitId: this.queryParams.leaseUnitId}
+            const res = await getProjectList({})
+            this.proList = res.data
+            this.queryParams.leaseProjectId=null
+        },
+        proChange(val){
+            setTimeout(()=>{
+                // this.GetUnitData()
+            },500)
+        },
+        // 分公司下拉
+        async getImpUnitNameList () {
+            try {
+                const res = await getImpUnitNameListApi()
+                this.impUnitNameList = res.data
+                console.log("this.impUnitNameList",this.impUnitNameList)
+            } catch (error) {
+                console.log('🚀 ~ error:', error)
+            }
+        },
         format(date) {
             const y = date.getFullYear()
             const m = String(date.getMonth() + 1).padStart(2, '0')
@@ -218,8 +311,12 @@
                 startTime: this.queryParams.startTime,
                 endTime: this.queryParams.endTime,
                 pageSize: this.queryParams.pageSize,
-                pageNum: this.queryParams.pageNum
+                pageNum: this.queryParams.pageNum,
+                leaseUnitId:this.queryParams.leaseUnitId,
+                leaseProjectId:this.queryParams.leaseProjectId,
+                impUnitName:this.queryParams.impUnitName
             }
+            console.log("pageparams",params);
             const res = await getLeaseOutListApi(params)
             if(res.data.rows.length>0){
                 this.tableList = res.data.rows;
@@ -231,7 +328,11 @@
                 keyWord: this.queryParams.keyWord,
                 startTime: this.queryParams.startTime,
                 endTime: this.queryParams.endTime,
+                leaseUnitId:this.queryParams.leaseUnitId,
+                leaseProjectId:this.queryParams.leaseProjectId,
+                impUnitName:this.queryParams.impUnitName
             }
+            console.log("nopageparams",params);
             const response = await getLeaseOutListNoPageApi(param)
                 let obj = {
                     leaseNum: response.data.leaseNum||0,//领料数量