机具供应展示增加查询条件

src/api/home/equipment-supply.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 获取卡片列表信息
+export const getCardListApi = data => {
+    return request({
+        url: '/***',
+        method: 'get',
+        params: data
+    })
+}

src/views/home/equipment-supply/index.vue

@@ -18,29 +18,35 @@
                         </el-form-item>
                     </el-col>
                     <el-col :span="6">
-                        <el-form-item prop="company">
-                            <el-select
-                                clearable
-                                filterable
+                        <el-form-item prop="unitId">
+                            <treeselect
+                                :options="unitList"
+                                :show-count="true"
                                 style="width: 95%"
-                                placeholder="选择公司"
-                                v-model="queryParams.company"
-                            >
-                                <el-option label="全部" value="1" />
-                            </el-select>
+                                :normalizer="normalizer"
+                                v-model="queryParams.unitId"
+                                :disable-branch-nodes="true"
+                                noChildrenText="没有数据了"
+                                noOptionsText="没有数据"
+                                noResultsText="没有搜索结果"
+                                placeholder="请选择公司"
+                            />
                         </el-form-item>
                     </el-col>
                     <el-col :span="6">
-                        <el-form-item prop="project">
-                            <el-select
-                                clearable
-                                filterable
+                        <el-form-item prop="projectId">
+                            <treeselect
+                                v-model="queryParams.projectId"
+                                :options="projectList"
+                                :normalizer="normalizer"
+                                :show-count="true"
                                 style="width: 95%"
-                                placeholder="选择工程"
-                                v-model="queryParams.project"
-                            >
-                                <el-option label="全部" value="1" />
-                            </el-select>
+                                :disable-branch-nodes="true"
+                                noChildrenText="没有数据了"
+                                noOptionsText="没有数据"
+                                noResultsText="没有搜索结果"
+                                placeholder="请选择领工程"
+                            />
                         </el-form-item>
                     </el-col>
                     <el-col :span="6">
@@ -111,12 +117,18 @@ import CardModel from './components/card-model' // 卡片组件
 import CardModelSpace from './components/card-model-space' // 第一行右侧小卡片组件
 import ChartModelBox from './components/chart-model-box' // 图表组件
 import TableModel from './components/table-model' // 二级页面列表组件
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
+import { getCardListApi } from '@/api/home/equipment-supply.js'
+import { getListProject, getListUnite } from '@/api/lease/apply'
 export default {
     components: {
         CardModel,
         CardModelSpace,
         ChartModelBox,
-        TableModel
+        TableModel,
+        Treeselect
     },
     data() {
         return {
@@ -124,15 +136,20 @@ export default {
             isHome: false,
             // 二级页面标题
             levelTwoTitle: '',
+            // 公司列表
+            unitList: [],
+            // 工程列表
+            projectList: [],
+            // 日期查询条件
+            queryDate: [],
             // 表单查询条件
             queryParams: {
                 startTime: '',
                 endTime: '',
-                company: '',
-                project: ''
+                unitId: undefined,
+                projectId: undefined
             },
-            // 日期查询条件
-            queryDate: [],
+
             cardList_1: [
                 {
                     title: '需求量',
@@ -225,8 +242,27 @@ export default {
         }
     },
     methods: {
+        // 获取卡片列表信息
+        async getCardListFun() {
+            const queryParams = {
+                ...this.queryParams,
+                startTime: this.queryDate && this.queryDate.length > 0 ? this.queryDate[0] : '',
+                endTime: this.queryDate && this.queryDate.length > 0 ? this.queryDate[1] : ''
+            }
+            const res = await getCardListApi()
+            console.log(res, '--')
+        },
+        // 获取公司和工程
+        async getCompanyAndProjectFun() {
+            const comRes = await getListUnite({ projectId: null })
+            this.unitList = comRes.data
+            const proRes = await getListProject({ unitId: null })
+            this.projectList = proRes.data
+        },
         // 查询
-        onHandleSearch() {},
+        onHandleSearch() {
+            console.log('this.queryParams', this.queryParams)
+        },
         // 重置
         onHandleReset() {
             this.queryDate = []
@@ -240,7 +276,21 @@ export default {
         // 自定义事件 关闭二级页面
         onCloseLevelTwoPages() {
             this.isHome = false
+        },
+        // 转换菜单数据结构
+        normalizer(node) {
+            if (node.children && !node.children.length) {
+                delete node.children
+            }
+            return {
+                id: node.id,
+                label: node.name,
+                children: node.children
+            }
         }
+    },
+    created() {
+        this.getCompanyAndProjectFun()
     }
 }
 </script>