feat(order): 预订单列表增加订单类型和出入库状态筛选功能

- 新增订单类型和出入库状态的筛选选项
- 添加相应的 API 接口获取统计数据
- 实现筛选条件变化时重新获取列表数据
- 优化页面布局，增加统计信息显示

src/api/beforehand_order.ts

@@ -4,6 +4,9 @@ import request from '@/utils/request'
 export function apiBeforehandOrderLists(params: any) {
     return request.get({ url: '/beforehand_order/beforehandorder/lists', params })
 }
+export function apiBeforehandOrderStatisticsCount(params: any) {
+    return request.get({ url: '/beforehand_order/beforehandorder/statistics_count', params })
+}
 
 // 添加预订单表
 export function apiBeforehandOrderAdd(params: any) {
@@ -95,7 +98,6 @@ export function apiPurchaseOrderReturnSupplier(params: any) {
     return request.post({ url: '/beforehand_order/beforehandorder/return_supplier', params })
 }
 
-
 // 预订单日志列表
 export function apiBeforehandOrderLogLists(params: any) {
     return request.get({ url: '/beforehand_order/beforehandorder/logList', params })
@@ -109,4 +111,4 @@ export function apiBeforehandOrderLogSave(params: any) {
 //确认预订单日志
 export function apiBeforehandOrderLogConfirm(params: any) {
     return request.post({ url: '/beforehand_order/beforehandorder/confirmLog', params })
-}
+}

src/views/order/beforehand_order/index.vue

@@ -21,21 +21,6 @@
                         @change="changeStartEndTime"
                     />
                 </el-form-item>
-                <el-form-item label="订单类型" prop="order_type">
-                    <el-select
-                        v-model="queryParams.order_type"
-                        placeholder="请选择订单类型"
-                        style="width: 240px"
-                    >
-                        <el-option :value="1" label="铺货订单"></el-option>
-                        <el-option :value="2" label="摊贩订单"></el-option>
-                        <el-option :value="3" label="一条龙订单"></el-option>
-                        <el-option :value="4" label="线上订单"></el-option>
-                        <el-option :value="5" label="仓库补货"></el-option>
-                        <el-option :value="7" label="采购订单"></el-option>
-                        <el-option :value="8" label="其他订单"></el-option>
-                    </el-select>
-                </el-form-item>
                 <el-form-item label="门店名称" prop="store_id">
                     <div class="flex items-center mr-4">
                         <el-select
@@ -48,7 +33,7 @@
                             :remote-method="remoteMethod"
                             :loading="storeloading"
                             style="width: 240px"
-                            @change="resetPage"
+                            @change="get_lists"
                         >
                             <el-option
                                 v-for="item in storeList"
@@ -91,21 +76,9 @@
                         placeholder="请输入备注"
                     />
                 </el-form-item>
-                <el-form-item label="出入库" prop="warehouse_type">
-                    <el-select
-                        v-model="queryParams.warehouse_type"
-                        placeholder="请选择出入库类型"
-                        style="width: 180px"
-                    >
-                        <el-option :value="1" label="未出库"></el-option>
-                        <el-option :value="2" label="已出库"></el-option>
-                        <el-option :value="3" label="未入库"></el-option>
-                        <el-option :value="4" label="已入库"></el-option>
-                    </el-select>
-                </el-form-item>
                 <el-form-item>
-                    <el-button type="primary" @click="resetPage">查询</el-button>
+                    <el-button type="primary" @click="get_lists">查询</el-button>
-                    <el-button @click="resetParams">重置</el-button>
+                    <el-button @click="getResetParams">重置</el-button>
                     <export-data
                         class="ml-2.5"
                         :fetch-fun="apiBeforehandOrderLists"
@@ -132,6 +105,56 @@
             >
                 <el-button type="primary"> 商品列表 </el-button>
             </router-link>
+            <el-tabs v-model="activeName" class="demo-tabs mt-2" @tab-change="handleClick">
+                <el-tab-pane label="全部" name="all"></el-tab-pane>
+                <el-tab-pane
+                    :label="`铺货订单(${statisticsCount.order_type_1})`"
+                    name="1"
+                ></el-tab-pane>
+                <el-tab-pane
+                    :label="`摊贩订单(${statisticsCount.order_type_2})`"
+                    name="2"
+                ></el-tab-pane>
+                <el-tab-pane
+                    :label="`一条龙订单(${statisticsCount.order_type_3})`"
+                    name="3"
+                ></el-tab-pane>
+                <el-tab-pane
+                    :label="`线上订单(${statisticsCount.order_type_4})`"
+                    name="4"
+                ></el-tab-pane>
+                <el-tab-pane
+                    :label="`仓库补货(${statisticsCount.order_type_5})`"
+                    name="5"
+                ></el-tab-pane>
+                <el-tab-pane
+                    :label="`采购订单(${statisticsCount.order_type_7})`"
+                    name="7"
+                ></el-tab-pane>
+                <el-tab-pane
+                    :label="`其他订单(${statisticsCount.order_type_8})`"
+                    name="8"
+                ></el-tab-pane>
+            </el-tabs>
+            <el-tabs v-model="activeName2" @tab-change="handleClick2">
+                <el-tab-pane label="全部" name="all"></el-tab-pane>
+                <el-tab-pane
+                    :label="`未出库(${statisticsCount.outbound_0})`"
+                    name="1"
+                ></el-tab-pane>
+                <el-tab-pane
+                    :label="`已出库(${statisticsCount.outbound_1})`"
+                    name="2"
+                ></el-tab-pane>
+                <el-tab-pane
+                    :label="`未入库(${statisticsCount.warehousing_0})`"
+                    name="3"
+                ></el-tab-pane>
+                <el-tab-pane
+                    :label="`已入库(${statisticsCount.warehousing_1})`"
+                    name="4"
+                ></el-tab-pane>
+            </el-tabs>
             <div class="mt-4">
                 <el-table :data="pager.lists" @selection-change="handleSelectionChange">
                     <el-table-column type="selection" width="55" />
@@ -164,9 +187,13 @@
                     <el-table-column label="出库" prop="outbound" show-overflow-tooltip />
                     <el-table-column label="总价格" prop="total_price" show-overflow-tooltip />
                     <el-table-column label="内部备注" prop="mark" show-overflow-tooltip />
-                    <el-table-column label="代购备注" prop="other_data.store_mark" show-overflow-tooltip />
+                    <el-table-column
+                        label="代购备注"
+                        prop="other_data.store_mark"
+                        show-overflow-tooltip
+                    />
                     <el-table-column label="通知" prop="msg" show-overflow-tooltip />
-                    <el-table-column label="文件" prop="file" show-overflow-tooltip>
+                    <!-- <el-table-column label="文件" prop="file" show-overflow-tooltip>
                         <template #default="{ row }">
                             <el-image
                                 style="width: 50px; height: 50px"
@@ -174,15 +201,19 @@
                                 :preview-teleported="true"
                             />
                         </template>
-                    </el-table-column>
+                    </el-table-column> -->
                     <el-table-column label="操作" width="120" fixed="right">
                         <template #default="{ row }">
                             <el-button type="danger" link @click="handleDrawer(row)">
                                 流程
                             </el-button>
-							<el-button v-if="row.audit_status == 0" link @click="handleSettle(row.id)">
+                            <el-button
-							    完结
+                                v-if="row.audit_status == 0"
-							</el-button>
+                                link
+                                @click="handleSettle(row.id)"
+                            >
+                                完结
+                            </el-button>
                             <router-link
                                 :to="{
                                     path: 'beforehand_order_details',
@@ -229,7 +260,7 @@
                 </el-table>
             </div>
             <div class="flex mt-4 justify-end">
-                <pagination v-model="pager" @change="getLists" />
+                <pagination v-model="pager" @change="get_lists" />
             </div>
         </el-card>
         <!-- <edit-popup
@@ -246,7 +277,7 @@
             @close="showDetails = false"
             :dictData="dictData"
         /> -->
-        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
+        <edit-popup v-if="showEdit" ref="editRef" @success="get_lists" @close="showEdit = false" />
         <DrawerPop v-model="showDrawer" ref="drawerRef" @close="showDrawer = false" />
     </div>
 </template>
@@ -260,9 +291,10 @@ import moment from 'moment'
 import {
     apiBeforehandOrderLists,
     apiBeforehandOrderDelete,
-	apiBeforehandOrderSettle,
+    apiBeforehandOrderSettle,
     apiPurchaseOrderOrderOutbound,
-    apiPurchaseOrderOrderOutbound3
+    apiPurchaseOrderOrderOutbound3,
+    apiBeforehandOrderStatisticsCount
 } from '@/api/beforehand_order'
 import { apiSystemStoreLists } from '@/api/system_store'
 import DrawerPop from './component/drawer.vue'
@@ -273,9 +305,28 @@ const showEdit = ref(false)
 const editRef = shallowRef<InstanceType<typeof EditPopup>>()
 
 const showDrawer = ref(false)
+const statisticsCount = ref([])
 const drawerRef = ref(null)
 const drawerData = ref([])
 
+const activeName = ref('all')
+const handleClick = (e) => {
+    if (activeName.value == 'all') {
+        queryParams.order_type = ''
+    } else {
+        queryParams.order_type = activeName.value
+    }
+    get_lists()
+}
+const activeName2 = ref('all')
+const handleClick2 = (e) => {
+    if (activeName2.value == 'all') {
+        queryParams.warehouse_type = ''
+    } else {
+        queryParams.warehouse_type = activeName2.value
+    }
+    get_lists()
+}
 const handleDrawer = (data: any) => {
     showDrawer.value = true
     drawerRef.value?.open(data.id)
@@ -323,13 +374,13 @@ const { pager, getLists, resetParams, resetPage } = usePaging({
 const handleDelete = async (id: number | any[]) => {
     await feedback.confirm('确定要删除？')
     await apiBeforehandOrderDelete({ id })
-    getLists()
+    get_lists()
 }
 
 // 结算
 const handleSettle = async (id) => {
     await apiBeforehandOrderSettle({ id })
-    getLists()
+    get_lists()
 }
 
 const startEndTime = ref([])
@@ -342,7 +393,7 @@ const changeStartEndTime = () => {
         queryParams.start_time = ''
         queryParams.end_time = ''
     }
-    getLists()
+    get_lists()
 }
 const xlsx7 = (id) => {
     apiPurchaseOrderOrderOutbound({
@@ -381,7 +432,32 @@ const remoteMethod = (e = '') => {
             }, 300)
         })
 }
-onMounted(() => {
+const statistics_count = () => {
+    apiBeforehandOrderStatisticsCount(queryParams).then((res) => {
+        statisticsCount.value = res
+    })
+}
+const get_lists = () => {
     getLists()
+    statistics_count()
+}
+const getResetParams = () => {
+    queryParams.order_id = ''
+    queryParams.product_name = ''
+    queryParams.financial_pm = 1
+    queryParams.store_id = ''
+    queryParams.start_time = ''
+    queryParams.end_time = ''
+    queryParams.supplier_id = ''
+    queryParams.order_sn = ''
+    queryParams.order_ck = ''
+    queryParams.order_rk = ''
+    queryParams.order_type = ''
+    queryParams.warehouse_type = ''
+    queryParams.mark = ''
+    resetParams()
+}
+onMounted(() => {
+    get_lists()
 })
 </script>