feat: 批量发货

src/api/sales/order.js

@@ -12,7 +12,7 @@ export const detail = (id) => {
         method: 'get',
     });
 };
-export const sendList = (orderIs) => {
+export const shipList = (orderIs) => {
     return request({
         url: '/mall/trade/admin/tradeOrder/listDeliveryOrder',
         method: 'get',

src/components/TableList.vue

@@ -408,7 +408,7 @@
                 ) : (
                     ''
                 )}
-                {slots.operation?.()}
+                {slots.operation?.({ selection: unref(selection) })}
                 {props.operation.includes('import') ? (
                     <ElDialog
                         title={'模板导入 - ' + props.title || props.code}

src/router/modules/sales.js

@@ -28,6 +28,16 @@ export default [
                             hidden: true,
                         },
                     },
+                    {
+                        path: 'ship',
+                        name: 'OrderShip',
+                        component: () => import('@/views/sales/order/ship.vue'),
+                        meta: {
+                            title: '批量发货',
+                            icon: 'barcode-box-fill',
+                            hidden: true,
+                        },
+                    },
                 ],
             },
         ],

src/store/modules/sales/order.js

@@ -136,15 +136,6 @@ const actions = {
             }
         }
     },
-    enable: async ({ dispatch }, data) => {
-        let res = await api.enable(data);
-        if (res) {
-            ElMessage.success((data.isEnable ? '启用' : '禁用') + '成功');
-            dispatch('search');
-        } else {
-            ElMessage.error((data.isEnable ? '启用' : '禁用') + '失败');
-        }
-    },
 };
 export default {
     state,

src/store/modules/sales/orderShip.js

@@ -0,0 +1,64 @@
+import * as api from '@/api/sales/order.js';
+import { ElMessage } from '@/plugins/element-plus';
+import { dict } from '@/plugins/global-api';
+const state = () => ({
+    code: 'OrderShipManagement',
+    condition: {
+        orderIs: [],
+    },
+    list: [],
+    total: 0,
+    summary: [],
+    opts: {
+        init: false,
+        company: [{ label: '顺丰', value: 'sf' }],
+    },
+});
+const getters = {};
+const mutations = {
+    setCode: (state, data) => (state.code = data),
+    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 }) => {
+        let res = await api.shipList(state.condition.orderIs.join(','));
+        if (!res) {
+            ElMessage.error('查询发货订单列表失败');
+        }
+        return res;
+    },
+    load: async ({ commit }) => {
+        commit('setOpts', {
+            init: true,
+            company: [{ label: '顺丰', value: 'sf' }],
+        });
+    },
+    save: async ({ rootState }, data) => {
+        let res = await api.sendAll(
+            data.map((item) => {
+                return {
+                    companyCode: item.logistics.companyCode,
+                    companyName: dict(rootState.order.opts.company, item.logistics.companyCode),
+                    orderId: item.orderId,
+                    trackingNo: item.trackingNo,
+                };
+            })
+        );
+        if (res) {
+            ElMessage.success('批量发货成功');
+        } else {
+            ElMessage.error('批量发货失败');
+        }
+        return res;
+    },
+};
+export default {
+    state,
+    getters,
+    mutations,
+    actions,
+};

src/views/sales/order/detail.vue

@@ -90,7 +90,7 @@
                 </el-table>
                 <h3 class="summary">
                     <span>合计：</span>
-                    <span class="red">￥200.00</span>
+                    <span class="red">￥{{ new Number(state.sum).toFixed(2) }}</span>
                 </h3>
                 <br />
                 <h3>费用信息</h3>
@@ -155,13 +155,17 @@
         form: {
             products: [],
         },
+        sum: computed(() => state.form.products.reduce((sum, current) => sum + current.realAmount || 0, 0)),
     });
     const handleLoad = async () => {
         state.loading = true;
         let res = await store.dispatch('order/detail', route.params.id);
-        if (res) {
-            Object.assign(state.form, res);
-        }
+        Object.assign(
+            state.form,
+            res || {
+                products: [],
+            }
+        );
         state.loading = false;
     };
     onActivated(handleLoad);

src/views/sales/order/index.vue

@@ -48,6 +48,9 @@
                     </el-form-item>
                 </el-form>
             </template>
+            <template #operation="{ selection }">
+                <el-button type="primary" @click="handleSend(selection)">批量发货</el-button>
+            </template>
         </TableList>
         <CloseOrder ref="refsCloseOrder" />
     </div>
@@ -56,6 +59,7 @@
 <script setup lang="jsx">
     import ElButton from '@/components/extra/ElButton.vue';
     import CloseOrder from './close.vue';
+    const { proxy } = getCurrentInstance();
     const router = useRouter();
     const store = useStore();
     const loading = ref(false);
@@ -136,6 +140,18 @@
         console.info('export');
     };
 
+    /* 批量发货 */
+    const handleSend = (selection) => {
+        if (selection.length) {
+            store.commit('orderShip/setCondition', {
+                orderIs: selection.map((item) => item.orderId),
+            });
+            router.push({ name: 'OrderShip' });
+        } else {
+            proxy.$message.warning('请选择要删除的数据');
+        }
+    };
+
     /* 查看详情 */
     const handleDetail = (row) => {
         router.push({

src/views/sales/order/ship.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="list-container">
+        <TableList
+            v-loading="loading"
+            :code="code"
+            :config="config"
+            :data="list"
+            :operation="[]"
+            @search="handleSearch"
+        >
+            <template #operation>
+                <el-button type="danger" @click="handleCancel">取消</el-button>
+                <el-button type="primary" @click="handleSave">确定</el-button>
+            </template>
+        </TableList>
+    </div>
+</template>
+
+<script setup lang="jsx">
+    const router = useRouter();
+    const store = useStore();
+    const loading = ref(false);
+    const code = computed(() => store.state.orderShip.code);
+    const list = ref([]);
+    const opts = computed(() => store.state.orderShip.opts);
+    if (!unref(opts).init) {
+        store.dispatch('orderShip/load');
+    }
+
+    /* 查询订单 */
+    const handleSearch = async () => {
+        loading.value = true;
+        list.value = await store.dispatch('orderShip/search');
+        loading.value = false;
+    };
+    onActivated(handleSearch);
+    /* 取消 */
+    const handleCancel = () => {
+        router.push({ name: 'OrderManagement' });
+    };
+    const handleSave = () => {
+        loading.value = true;
+        store.dispatch('orderShip/save', unref(list));
+        loading.value = false;
+    };
+    /* 保存 */
+    /* 列表配置 */
+    const config = reactive({
+        autoSearch: false,
+        page: false,
+        columns: [
+            {
+                type: 'selection',
+                fixed: 'left',
+                width: 60,
+            },
+            {
+                label: '订单编号',
+                prop: 'orderNo',
+                minWidth: 300,
+                fixed: 'left',
+            },
+            {
+                label: '收货人',
+                prop: 'logistics.recipientName',
+                width: 140,
+            },
+            {
+                label: '手机号码',
+                prop: 'logistics.recipientPhone',
+                minWidth: 120,
+            },
+            {
+                label: '收货地址',
+                prop: 'logistics.recipientAddress',
+                width: 120,
+            },
+            {
+                label: '配送方式',
+                width: 120,
+                slots: {
+                    default: ({ row }) => <ElSelect v-model={row.logistics.companyCode} opts={unref(opts).company} />,
+                },
+            },
+            {
+                label: '物流单号',
+                width: 120,
+                prop: 'logistics.trackingNo',
+                slots: {
+                    default: ({ row }) => <ElInput v-model={row.logistics.trackingNo} />,
+                },
+            },
+        ],
+    });
+</script>
+
+<style lang="less" scoped></style>