feat: 订单查询、关闭订单

src/api/sales/order.js

@@ -8,35 +8,68 @@ export const search = (params) => {
 };
 export const detail = (id) => {
     return request({
-        url: '/uc/employee/' + id,
+        url: '/mall/trade/admin/tradeOrder/' + id,
         method: 'get',
     });
 };
-export const create = (data) => {
+export const sendList = (orderIs) => {
     return request({
-        url: '/uc/employee',
-        method: 'post',
+        url: '/mall/trade/admin/tradeOrder/listDeliveryOrder',
+        method: 'get',
+        params: { orderIs },
+    });
+};
+export const logistics = (id) => {
+    return request({
+        url: '/mall/trade/admin/tradeOrder/logistics/' + id,
+        method: 'get',
+    });
+};
+export const summary = () => {
+    return request({
+        url: '/mall/trade/admin/tradeOrder/statistics',
+        method: 'get',
+    });
+};
+export const updateFees = (data) => {
+    return request({
+        url: '/mall/trade/admin/tradeOrder/updateAmount',
+        method: 'put',
         data,
     });
 };
-export const update = (data) => {
+export const updateAddress = (data) => {
     return request({
-        url: '/uc/employee',
+        url: '/mall/trade/admin/tradeOrder/updateRecipient',
         method: 'put',
         data,
     });
 };
-export const remove = (idList) => {
+export const cancel = (data) => {
     return request({
-        url: '/uc/employee',
-        method: 'delete',
-        params: { idList },
+        url: '/mall/trade/admin/tradeOrder/cancel',
+        method: 'put',
+        data,
     });
 };
-export const enable = (params) => {
+export const close = (data) => {
     return request({
-        url: '/uc/employee/enable',
+        url: '/mall/trade/admin/tradeOrder/close',
         method: 'put',
-        params,
+        data,
+    });
+};
+export const send = (data) => {
+    return request({
+        url: '/mall/trade/admin/tradeOrder/delivery',
+        method: 'put',
+        data,
+    });
+};
+export const sendAll = (data) => {
+    return request({
+        url: '/mall/trade/admin/tradeOrder/batchDelivery',
+        method: 'put',
+        data,
     });
 };

src/components/TableList.vue

@@ -292,10 +292,12 @@
     // 自动查询
     watch(
         search,
-        (value) => {
+        (value, old) => {
             if (value && props.code) {
+                if (_.cloneDeep(value) !== _.cloneDeep(old)) {
                     resetPage(value);
                 }
+            }
             handleSearch();
         },
         { deep: true, immediate: props.config.autoSearch !== false }

src/components/extra/ElInput.vue

@@ -46,9 +46,4 @@
     const slots = useSlots();
     const render = () => <ElInput {...props} {...attrs} v-slots={slots}></ElInput>;
 </script>
-<style lang="less" scoped>
-    .el-input,
-    .el-textarea {
-        width: 160px;
-    }
-</style>
+<style lang="less" scoped></style>

src/components/extra/ElSelect.vue

@@ -71,8 +71,4 @@
     );
 </script>
 
-<style lang="less" scoped>
-    .el-select {
-        width: 160px;
-    }
-</style>
+<style lang="less" scoped></style>

src/store/modules/sales/order.js

@@ -5,6 +5,7 @@ const state = () => ({
     condition: {},
     list: [],
     total: 0,
+    summary: [],
     opts: {
         init: false,
         source: [],
@@ -17,17 +18,38 @@ const mutations = {
     setCondition: (state, data) => (state.condition = data),
     setList: (state, data) => (state.list = data),
     setTotal: (state, data) => (state.total = data),
+    setSummary: (state, data) => (state.summary = data),
     setOpts: (state, data) => (state.opts = data),
 };
 const actions = {
     search: async ({ state, commit, rootGetters }) => {
-        let res = await api.search({ ...rootGetters['local/page'](state.code), ...state.condition });
+        let data = { ...state.condition };
+        if (data.dateRange?.length) {
+            data.startTime = data.dateRange[0];
+            data.endTime = data.dateRange[1];
+        }
+        delete data.dateRange;
+        data.orderStatus = (data.orderStatus || []).join(',');
+        if (data.orderStatus === '0') {
+            delete data.orderStatus;
+        }
+        let res = await api.search({ ...rootGetters['local/page'](state.code), ...data });
+        commit('setList', res?.records || []);
+        commit('setTotal', res?.total || 0);
+        if (!res) {
+            ElMessage.error('查询订单列表失败');
+        }
+        res = await api.summary();
         if (res) {
-            commit('setList', res.records);
-            commit('setTotal', res.total);
+            commit(
+                'setSummary',
+                ['allCount', 'unpaidCount', 'closeCount', 'waitDeliveryCount', '', 'deliveredCount', 'finishCount'].map(
+                    (prop) => res[prop]
+                )
+            );
         } else {
-            ElMessage.error('查询失败');
-            commit('setList', []);
+            ElMessage.error('查询订单统计失败');
+            commit('setSummary', []);
         }
         return res;
     },
@@ -40,12 +62,13 @@ const actions = {
                 { label: 'IOS端APP', value: 3 },
             ],
             status: [
-                { label: '待支付', value: 1 },
-                { label: '已关闭', value: 2 },
-                { label: '待发货', value: 3 },
-                { label: '已发货', value: 4 },
-                { label: '已收货', value: 5 },
-                { label: '已完成', value: 6 },
+                { label: '全部', value: 0, count: 0 },
+                { label: '待支付', value: 1, count: 0 },
+                { label: '已关闭', value: 2, count: 0 },
+                { label: '待发货', value: 3, count: 0 },
+                { label: '已发货', value: 4, count: 0 },
+                { label: '已收货', value: 5, count: 0 },
+                { label: '已完成', value: 6, count: 0 },
             ],
         });
     },
@@ -56,6 +79,16 @@ const actions = {
         }
         return res;
     },
+    close: async ({ dispatch }, data) => {
+        let res = await api.close(data);
+        if (res) {
+            ElMessage.success('关闭订单成功');
+            dispatch('search');
+        } else {
+            ElMessage.error('关闭订单失败');
+        }
+        return res;
+    },
     save: async ({ dispatch }, data) => {
         let save = data.id ? api.update : api.create;
         let res = await save(data);

src/views/sales/order/close.vue

@@ -0,0 +1,58 @@
+<template>
+    <el-dialog v-model="state.visible" title="关闭订单">
+        <el-form ref="refsForm" v-loading="state.submitting" :model="state.form" :rules="state.rules">
+            <el-form-item label="操作备注" prop="remark">
+                <el-input v-model="state.form.remark" type="textarea" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="close">取消</el-button>
+            <el-button :loading="state.submitting" type="primary" @click="handleSave">确定</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="jsx">
+    const store = useStore();
+
+    const refsForm = ref(null);
+    const state = reactive({
+        submitting: false,
+        visible: false,
+        form: {
+            orderId: null,
+            remark: null,
+        },
+        rules: {
+            orderId: [{ required: true, message: '订单ID不能为空' }],
+            remark: [{ required: true, message: '操作备注不能为空' }],
+        },
+    });
+    const show = (orderId) => {
+        state.form.orderId = orderId;
+        state.form.remark = null;
+        state.visible = true;
+    };
+    const close = () => {
+        state.visible = false;
+    };
+    defineExpose({
+        show,
+        close,
+    });
+    const handleSave = async () => {
+        state.submitting = true;
+        try {
+            await unref(refsForm).validate();
+            let res = await store.dispatch('order/close', state.form);
+            if (res) {
+                state.visible = false;
+            }
+        } catch (e) {
+            console.info('取消关闭', e);
+        }
+        state.submitting = false;
+    };
+</script>
+
+<style lang="less" scoped></style>

src/views/sales/order/index.vue

@@ -1,4 +1,20 @@
 <template>
+    <div class="list-container">
+        <ul class="order-status">
+            <li v-for="(item, index) in opts.status" :key="index">
+                <el-button
+                    :type="state.condition.orderStatus.includes(item.value) ? 'primary' : 'default'"
+                    @click="handleStatus(item.value)"
+                >
+                    <span>
+                        {{ item.label }}
+                    </span>
+                    <span>(</span>
+                    <span class="num">{{ summary[index] || 0 }}</span>
+                    <span>)</span>
+                </el-button>
+            </li>
+        </ul>
         <TableList
             v-loading="loading"
             :code="code"
@@ -13,39 +29,55 @@
         >
             <template #search>
                 <el-form inline>
-                <el-form-item label="订单编号" prop="userName">
-                    <el-input v-model="state.condition.userName" />
+                    <el-form-item label="订单编号" prop="orderNo">
+                        <el-input v-model="state.condition.orderNo" />
                     </el-form-item>
-                <el-form-item label="手机号" prop="userName">
-                    <el-input v-model="state.condition.userName" />
+                    <el-form-item label="手机号" prop="userPhone">
+                        <el-input v-model="state.condition.userPhone" />
                     </el-form-item>
-                <el-form-item label="来源" prop="userName">
-                    <el-input v-model="state.condition.userName" />
+                    <el-form-item label="来源" prop="orderSource">
+                        <el-select v-model="state.condition.orderSource" :opts="opts.source" />
                     </el-form-item>
-                <el-form-item label="提交时间" prop="userName">
-                    <el-input v-model="state.condition.userName" />
+                    <el-form-item label="提交时间" prop="dateRange">
+                        <el-date-picker
+                            v-model="state.condition.dateRange"
+                            :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
+                            type="datetimerange"
+                            value-format="YYYY-MM-DD HH:mm:ss"
+                        />
                     </el-form-item>
                 </el-form>
             </template>
         </TableList>
+        <CloseOrder ref="refsCloseOrder" />
+    </div>
 </template>
 
 <script setup lang="jsx">
     import ElButton from '@/components/extra/ElButton.vue';
-    const { proxy } = getCurrentInstance();
+    import CloseOrder from './close.vue';
     const router = useRouter();
     const store = useStore();
     const loading = ref(false);
-    const code = computed(() => store.state.employee.code);
-    const list = computed(() => store.state.employee.list);
-    const total = computed(() => store.state.employee.total);
-    const opts = computed(() => store.state.employee.opts);
+    const code = computed(() => store.state.order.code);
+    const list = computed(() => store.state.order.list);
+    const total = computed(() => store.state.order.total);
+    const summary = computed(() => store.state.order.summary);
+    const opts = computed(() => store.state.order.opts);
     if (!unref(opts).init) {
         store.dispatch('order/load');
     }
+
+    /* 查询订单 */
     const state = reactive({
         condition: {
-            userName: null,
+            orderNo: null,
+            userPhone: null,
+            orderSource: null,
+            orderStatus: [0],
+            dateRange: [],
+            startTime: null,
+            endTime: null,
         },
     });
     watch(
@@ -55,17 +87,56 @@
         },
         { immediate: true, deep: true }
     );
+    watch(
+        () => state.condition.orderStatus,
+        () => {
+            handleSearch();
+        },
+        { deep: true }
+    );
     const handleReset = () => {
         state.condition = {
-            orderName: null,
-            phone: null,
+            orderNo: null,
+            userPhone: null,
+            orderSource: null,
+            orderStatus: [0],
+            dateRange: [],
+            startTime: null,
+            endTime: null,
+        };
     };
+    const handleStatus = (status) => {
+        let index = state.condition.orderStatus.indexOf(status);
+        if (index === -1) {
+            if (status === 0) {
+                state.condition.orderStatus = [0];
+            } else {
+                state.condition.orderStatus.push(status);
+            }
+            state.condition.orderStatus = state.condition.orderStatus.filter((item) => item > 0);
+        } else {
+            if (status !== 0) {
+                state.condition.orderStatus.splice(index, 1);
+                if (state.condition.orderStatus.length) {
+                    state.condition.orderStatus = state.condition.orderStatus.filter((item) => item > 0);
+                } else {
+                    state.condition.orderStatus = [0];
+                }
+            }
+        }
     };
     const handleSearch = async () => {
         loading.value = true;
         await store.dispatch('order/search');
         loading.value = false;
     };
+
+    /* 导出订单 */
+    const handleExport = async () => {
+        console.info('export');
+    };
+
+    /* 查看详情 */
     const handleDetail = (row) => {
         router.push({
             name: 'OrderDetail',
@@ -74,14 +145,15 @@
             },
         });
     };
-    const handleExport = async () => {
-        console.info('export');
-    };
-    const handleClose = async () => {
-        console.info('close');
+
+    /* 关闭订单 */
+    const refsCloseOrder = ref(null);
+    const handleClose = (row) => {
+        unref(refsCloseOrder).show(row.orderId);
     };
+
+    /* 列表配置 */
     const config = reactive({
-        // 表格列配置
         columns: [
             {
                 type: 'selection',
@@ -90,61 +162,80 @@
             },
             {
                 label: '订单编号',
-                prop: 'employeeName',
-                minWidth: 160,
+                prop: 'orderNo',
+                minWidth: 300,
                 fixed: 'left',
             },
             {
                 label: '手机号',
-                prop: 'userName',
-                minWidth: 160,
+                prop: 'userPhone',
+                width: 140,
             },
             {
                 label: '订单金额',
-                prop: 'phone',
-                width: 160,
+                prop: 'payAmount',
+                minWidth: 120,
             },
             {
                 label: '支付方式',
-                prop: 'email',
-                width: 160,
+                prop: 'payTypeDesc',
+                width: 120,
             },
             {
                 label: '订单来源',
                 width: 120,
-                slots: {
-                    default: ({ row }) => proxy.$dict(unref(opts).source, row.source),
-                },
+                prop: 'payTypeDesc',
             },
             {
                 label: '订单状态',
-                prop: 'remark',
-                width: 180,
+                width: 120,
+                prop: 'orderStatusDesc',
             },
             {
                 label: '提交时间',
-                prop: 'updateTime',
+                prop: 'submitTime',
                 width: 180,
             },
             {
                 label: '操作',
                 fixed: 'right',
+                width: 160,
                 slots: {
                     default: ({ row }) => (
                         <div>
                             <ElButton type="text" onClick={() => handleDetail(row)}>
                                 查看订单
                             </ElButton>
+                            {row.orderStatus === 1 ? (
                                 <ElButton type="text" onClick={() => handleClose(row)}>
                                     关闭订单
                                 </ElButton>
+                            ) : (
+                                ''
+                            )}
                         </div>
                     ),
                 },
-                width: 120,
             },
         ],
     });
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+    .list-container {
+        display: flex;
+        flex-direction: column;
+        .common-list {
+            flex-shrink: 1;
+        }
+        .order-status {
+            display: flex;
+            margin-bottom: @layout-space;
+            li {
+                + li {
+                    margin-left: @layout-space;
+                }
+            }
+        }
+    }
+</style>