Procházet zdrojové kódy

feat(接单中心): 添加查询参数和筛选功能

引入筛选组件并实现查询参数管理,支持关键词搜索和筛选条件的动态更新。优化订单列表的获取逻辑,确保分页和状态筛选的正确性。
Yannay před 2 měsíci
rodič
revize
024c88c8bf
1 změnil soubory, kde provedl 155 přidání a 19 odebrání
  1. 155 19
      pages/pagereceivecenter/pagereceivecenter.vue

+ 155 - 19
pages/pagereceivecenter/pagereceivecenter.vue

@@ -1,10 +1,12 @@
1
 <script>
1
 <script>
2
 // import orderCard from "./compounts/orderCard.vue";
2
 // import orderCard from "./compounts/orderCard.vue";
3
+import filterQuery from "../order/components/orderCenter/filterQuery.vue";
3
 
4
 
4
 // status 状态 1 发单(刚发出来) 2 接单(处理中) 3 收单(入库了) 4 未收(没有收到)
5
 // status 状态 1 发单(刚发出来) 2 接单(处理中) 3 收单(入库了) 4 未收(没有收到)
5
 export default {
6
 export default {
6
     components: {
7
     components: {
7
         // orderCard,
8
         // orderCard,
9
+        filterQuery,
8
     },
10
     },
9
     data() {
11
     data() {
10
         return {
12
         return {
@@ -36,10 +38,61 @@ export default {
36
             activeStatus: '',//当前选择的状态,统计数据的类型
38
             activeStatus: '',//当前选择的状态,统计数据的类型
37
 
39
 
38
             currentFollowUp: [],//当前订单的跟进记录
40
             currentFollowUp: [],//当前订单的跟进记录
39
-            showMoreFollowUp: false
41
+            showMoreFollowUp: false,
42
+
43
+            // 查询参数
44
+            queryParams: {
45
+                sendDateStart: '',
46
+                sendDateEnd: '',
47
+                type: '1',
48
+                item: undefined,
49
+                phone: undefined,
50
+                deptId: undefined,
51
+                state: undefined,
52
+                status: undefined,
53
+                allTagList: [],
54
+                identification: undefined,
55
+                createBy: undefined,
56
+                pageNum: 1,
57
+                pageSize: 10,
58
+            },
59
+
60
+            // 字典数据
61
+            dicts: {
62
+                crmFormStatusDict: [],
63
+                crmFormCategoryDict: [],
64
+                crmFormStateDict: [],
65
+                crmFormTacticDict: [],
66
+            },
67
+
68
+            mapHeight: "0px"
40
         }
69
         }
41
     },
70
     },
42
     onLoad() {
71
     onLoad() {
72
+        // 初始化字典数据
73
+        this.$getDicts('crm_form_status').then(res => {
74
+            this.dicts.crmFormStatusDict = res;
75
+        });
76
+        this.$getDicts('crm_form_category').then(res => {
77
+            this.dicts.crmFormCategoryDict = res;
78
+        });
79
+        this.$getDicts('crm_form_state').then(res => {
80
+            this.dicts.crmFormStateDict = res;
81
+        });
82
+        this.$getDicts('crm_form_tactic').then(res => {
83
+            this.dicts.crmFormTacticDict = res;
84
+        });
85
+
86
+        // 设置 mapHeight
87
+        uni.getSystemInfo({
88
+            success: (e) => {
89
+                const {
90
+                    windowHeight
91
+                } = e;
92
+                this.mapHeight = (windowHeight - 70) + 'px';
93
+            }
94
+        });
95
+
43
         //初始调用
96
         //初始调用
44
         this.getOrderList();
97
         this.getOrderList();
45
         this.getStatisticsSendStatus();
98
         this.getStatisticsSendStatus();
@@ -74,25 +127,33 @@ export default {
74
         async getOrderList() {
127
         async getOrderList() {
75
             try {
128
             try {
76
                 let result;
129
                 let result;
77
-                
130
+
78
                 // 如果是"我的分成",调用分成接口
131
                 // 如果是"我的分成",调用分成接口
79
                 if (this.activeType === 3) {
132
                 if (this.activeType === 3) {
80
                     result = await uni.$u.api.selectCommissionList({
133
                     result = await uni.$u.api.selectCommissionList({
81
-                        pageSize: this.page.pageSize,
82
-                        pageNum: this.page.pageNum,
134
+                        pageSize: this.queryParams.pageSize,
135
+                        pageNum: this.queryParams.pageNum,
83
                     }, {
136
                     }, {
84
                         type: '2',
137
                         type: '2',
138
+                        ...this.queryParams
85
                     });
139
                     });
86
                     console.log('分成列表', result);
140
                     console.log('分成列表', result);
87
                 } else {
141
                 } else {
88
                     // 否则调用订单列表接口
142
                     // 否则调用订单列表接口
89
-                    result = await uni.$u.api.selectClueOrderFormList({
90
-                        pageSize: this.page.pageSize,
91
-                        pageNum: this.page.pageNum,
92
-                    }, {
143
+                    // 合并查询参数和筛选参数
144
+                    const params = {
145
+                        ...this.queryParams,
93
                         type: this.activeType,
146
                         type: this.activeType,
94
-                        status: this.activeStatus,
95
-                    });
147
+                        status: this.activeStatus || this.queryParams.status,
148
+                    };
149
+                    // 移除分页参数,因为已经在第一个参数中传递
150
+                    delete params.pageNum;
151
+                    delete params.pageSize;
152
+
153
+                    result = await uni.$u.api.selectClueOrderFormList({
154
+                        pageSize: this.queryParams.pageSize,
155
+                        pageNum: this.queryParams.pageNum,
156
+                    }, params);
96
                     console.log('接单列表', result);
157
                     console.log('接单列表', result);
97
                     // 把数组按照status的大小排序,从小到大
158
                     // 把数组按照status的大小排序,从小到大
98
                     result.rows.sort((a, b) => {
159
                     result.rows.sort((a, b) => {
@@ -102,13 +163,15 @@ export default {
102
                 }
163
                 }
103
 
164
 
104
                 // 如果是第一页(下拉刷新或初始加载),直接替换列表
165
                 // 如果是第一页(下拉刷新或初始加载),直接替换列表
105
-                if (this.page.pageNum === 1) {
166
+                if (this.queryParams.pageNum === 1) {
106
                     this.orderList = result.rows;
167
                     this.orderList = result.rows;
107
                 } else {
168
                 } else {
108
                     // 否则追加数据(上拉加载更多)
169
                     // 否则追加数据(上拉加载更多)
109
                     this.orderList.push(...result.rows);
170
                     this.orderList.push(...result.rows);
110
                 }
171
                 }
111
                 this.page.total = result.total;
172
                 this.page.total = result.total;
173
+                this.page.pageNum = this.queryParams.pageNum;
174
+                this.page.pageSize = this.queryParams.pageSize;
112
 
175
 
113
             } catch (error) {
176
             } catch (error) {
114
                 console.error('列表接口调用失败:', error);
177
                 console.error('列表接口调用失败:', error);
@@ -227,6 +290,7 @@ export default {
227
             if (this.orderList.length >= this.page.total) {
290
             if (this.orderList.length >= this.page.total) {
228
                 //到底了,没有更多
291
                 //到底了,没有更多
229
             } else {
292
             } else {
293
+                this.queryParams.pageNum++;
230
                 this.page.pageNum++;
294
                 this.page.pageNum++;
231
                 this.getOrderList();
295
                 this.getOrderList();
232
             }
296
             }
@@ -277,24 +341,56 @@ export default {
277
             this.activeType = param.type;
341
             this.activeType = param.type;
278
             // 切换筛选条件时,重置状态筛选
342
             // 切换筛选条件时,重置状态筛选
279
             this.activeStatus = '';
343
             this.activeStatus = '';
344
+            this.queryParams.status = undefined;
280
 
345
 
281
             this.page.pageNum = 1;
346
             this.page.pageNum = 1;
347
+            this.queryParams.pageNum = 1;
282
             this.orderList = [];
348
             this.orderList = [];
283
 
349
 
284
             this.getOrderList();
350
             this.getOrderList();
285
             this.getStatisticsSendStatus()
351
             this.getStatisticsSendStatus()
286
         },
352
         },
353
+        // 处理关键词搜索
354
+        handleKeyword() {
355
+            this.queryParams.pageNum = 1;
356
+            this.page.pageNum = 1;
357
+            this.orderList = [];
358
+            this.getOrderList();
359
+        },
360
+        // 处理关键词清空
361
+        handleKeywordClear() {
362
+            this.queryParams.phone = "";
363
+            this.queryParams.pageNum = 1;
364
+            this.page.pageNum = 1;
365
+            this.orderList = [];
366
+            this.getOrderList();
367
+        },
368
+        // 显示筛选弹窗
369
+        handleshowFilter() {
370
+            this.$refs.filter.show();
371
+        },
372
+        // 处理筛选查询
373
+        handleFilterQuery() {
374
+            this.queryParams.pageNum = 1;
375
+            this.page.pageNum = 1;
376
+            this.orderList = [];
377
+            this.getOrderList();
378
+        },
287
         //切换统计数据的类型
379
         //切换统计数据的类型
288
         changeStatus(param) {
380
         changeStatus(param) {
289
             if (param == this.activeStatus) {
381
             if (param == this.activeStatus) {
290
                 //如果当前点击的状态和当前选中的状态相同,则取消选中
382
                 //如果当前点击的状态和当前选中的状态相同,则取消选中
291
                 this.activeStatus = '';
383
                 this.activeStatus = '';
384
+                this.queryParams.status = undefined;
385
+                this.queryParams.pageNum = 1;
292
                 this.page.pageNum = 1;
386
                 this.page.pageNum = 1;
293
                 this.orderList = [];
387
                 this.orderList = [];
294
                 this.getOrderList();
388
                 this.getOrderList();
295
             } else {
389
             } else {
296
                 //如果当前点击的状态和当前选中的状态不同,则切换选中状态
390
                 //如果当前点击的状态和当前选中的状态不同,则切换选中状态
297
                 this.activeStatus = param;
391
                 this.activeStatus = param;
392
+                this.queryParams.status = param;
393
+                this.queryParams.pageNum = 1;
298
                 this.page.pageNum = 1;
394
                 this.page.pageNum = 1;
299
                 this.orderList = [];
395
                 this.orderList = [];
300
                 this.getOrderList();
396
                 this.getOrderList();
@@ -335,9 +431,25 @@ export default {
335
     <view class="container">
431
     <view class="container">
336
         <u-navbar title="接单中心" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
432
         <u-navbar title="接单中心" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
337
 
433
 
434
+
435
+
436
+        <!-- 查询参数区域 -->
437
+        <view class="queryParams_wrap">
438
+            <view class="search">
439
+                <u--input clearable prefixIcon="search" v-model="queryParams.phone" shape="circle" @blur="handleKeyword"
440
+                    @clear="handleKeywordClear" placeholder="请输入电话"></u--input>
441
+            </view>
442
+            <view class="query">
443
+                <view style="margin-right: 10rpx;" @click="handleshowFilter">筛选</view>
444
+                <u-icon name="arrow-down-fill" color="#aaa" size="10"></u-icon>
445
+            </view>
446
+        </view>
447
+
338
         <!-- 筛选条件 -->
448
         <!-- 筛选条件 -->
339
         <u-tabs :list="filterList" @click="changeFilter"></u-tabs>
449
         <u-tabs :list="filterList" @click="changeFilter"></u-tabs>
340
 
450
 
451
+
452
+
341
         <!-- 统计数据 -->
453
         <!-- 统计数据 -->
342
         <scroll-view scroll-x class="statusScrollView" style="width: 100%;">
454
         <scroll-view scroll-x class="statusScrollView" style="width: 100%;">
343
             <view class="statisticsContainer">
455
             <view class="statisticsContainer">
@@ -351,13 +463,8 @@ export default {
351
 
463
 
352
 
464
 
353
         <view class="scrollViewContainer">
465
         <view class="scrollViewContainer">
354
-            <scroll-view 
355
-                class="scrollView" 
356
-                scroll-y 
357
-                refresher-enabled
358
-                :refresher-triggered="refresherTriggered"
359
-                @refresherrefresh="onRefresh"
360
-                @scrolltolower="scrolltolower">
466
+            <scroll-view class="scrollView" scroll-y refresher-enabled :refresher-triggered="refresherTriggered"
467
+                @refresherrefresh="onRefresh" @scrolltolower="scrolltolower">
361
                 <transition-group name="order-move" tag="div">
468
                 <transition-group name="order-move" tag="div">
362
                     <!-- <orderCard v-for="item in orderList" :key="item.receiptId + item.id" :order="item"
469
                     <!-- <orderCard v-for="item in orderList" :key="item.receiptId + item.id" :order="item"
363
                         @handleBtnClick="handleBtnClick">
470
                         @handleBtnClick="handleBtnClick">
@@ -491,6 +598,10 @@ export default {
491
             </scroll-view>
598
             </scroll-view>
492
             <!-- </view> -->
599
             <!-- </view> -->
493
         </u-modal>
600
         </u-modal>
601
+
602
+        <!-- 筛选组件 -->
603
+        <filter-query ref="filter" v-model="queryParams" @getList="handleFilterQuery" :mapHeight="mapHeight"
604
+            :dicts="dicts"></filter-query>
494
     </view>
605
     </view>
495
 </template>
606
 </template>
496
 
607
 
@@ -502,8 +613,33 @@ export default {
502
     color: #999;
613
     color: #999;
503
 }
614
 }
504
 
615
 
616
+.queryParams_wrap {
617
+    display: flex;
618
+    background: #fff;
619
+    padding: 14px 0;
620
+
621
+    .query,
622
+    .search {
623
+        display: flex;
624
+        align-items: center;
625
+        justify-content: center;
626
+        font-size: 16px;
627
+        font-weight: 700;
628
+        color: #202020;
629
+    }
630
+
631
+    .query {
632
+        flex: 1;
633
+    }
634
+
635
+    .search {
636
+        flex: 2;
637
+        padding-left: 20px;
638
+    }
639
+}
640
+
505
 .scrollViewContainer {
641
 .scrollViewContainer {
506
-    height: calc(100vh - 44px - 44px - 27px - 10rpx);
642
+    height: calc(100vh - 44px - 44px - 27px - 60px - 10rpx);
507
 }
643
 }
508
 
644
 
509
 .followUpScroll {
645
 .followUpScroll {