Переглянути джерело

feat(mallOrder): 添加订单日志查看功能

在订单列表项中新增“订单日志”按钮,点击后打开弹窗展示该订单的操作日志记录。
新增 order-log.vue 组件用于显示日志表格,包含订单状态、操作者、描述和时间等信息。
ylong 1 тиждень тому
батько
коміт
354d4dfcf7

+ 2 - 1
src/views/mallOrder/all/components/order-item.vue

@@ -80,6 +80,7 @@
             <div class="col-merged col-action">
                 <el-button link type="primary" @click="$emit('push-sms', order)">[推送短信]</el-button>
                 <el-button link type="warning" @click="$emit('refund', order)">[缺货退款]</el-button>
+                <el-button link type="primary" @click="$emit('view-log', order)">[订单日志]</el-button>
             </div>
         </div>
 
@@ -106,7 +107,7 @@
         }
     });
 
-    defineEmits(['view-detail', 'push-sms', 'refund']);
+    defineEmits(['view-detail', 'push-sms', 'refund', 'view-log']);
 
     const { copy } = useClipboard();
 

+ 70 - 0
src/views/mallOrder/all/components/order-log.vue

@@ -0,0 +1,70 @@
+<!-- 订单日志弹窗 -->
+<template>
+    <ele-modal :width="1080" v-model="visible" title="订单日志">
+        <ele-data-table :data="orderLog" :columns="columns">
+            <template #status="{ row }">
+                <dict-data
+                    code="shop_order_status"
+                    type="text"
+                    :model-value="row.status"
+                />
+            </template>
+        </ele-data-table>
+
+        <template #footer>
+            <el-button type="primary" @click="handleCancel">关闭</el-button>
+        </template>
+    </ele-modal>
+</template>
+
+<script setup>
+    import { ref, reactive, getCurrentInstance } from 'vue';
+    import { EleMessage } from 'ele-admin-plus/es';
+
+    let { proxy } = getCurrentInstance();
+    
+    /** 弹窗是否打开 */
+    const visible = ref(false);
+
+    /** 关闭弹窗 */
+    const handleCancel = () => {
+        visible.value = false;
+    };
+
+    /** 弹窗打开事件 */
+    const handleOpen = (orderId) => {
+        if (orderId) {
+            visible.value = true;
+            getOrderLog(orderId);
+        }
+    };
+
+    // 订单日志
+    const orderLog = ref([]);
+    function getOrderLog(orderId) {
+        proxy.$http
+            .get(`/shop/shopOrder/getOrderLogList?orderId=${orderId}`)
+            .then((res) => {
+                if (res.data.code === 200) {
+                    orderLog.value = res.data.data;
+                } else {
+                    EleMessage.error(res.data.msg || '获取订单日志失败');
+                }
+            })
+            .catch((err) => {
+                EleMessage.error(err.message || '获取订单日志失败');
+            });
+    }
+
+    const columns = reactive([
+        { label: '订单编号', prop: 'orderId', width: 150 },
+        { label: '状态', prop: 'status', width: 160 },
+        { label: '操作者', prop: 'createName', width: 100 },
+        { label: '日志描述', prop: 'content' },
+        { label: '操作时间', prop: 'createTime', width: 180 }
+    ]);
+
+    defineExpose({
+        handleOpen
+    });
+</script>

+ 8 - 1
src/views/mallOrder/all/index.vue

@@ -16,7 +16,7 @@
             <div class="order-list" v-loading="loading">
                 <div v-if="list.length === 0" class="empty-text">暂无数据</div>
                 <order-item v-for="order in list" :key="order.orderId" :order="order" @view-detail="openDetail"
-                    @push-sms="openSms" @refund="openRefund" />
+                    @push-sms="openSms" @refund="openRefund" @view-log="openLog" />
             </div>
 
             <!-- Pagination -->
@@ -32,6 +32,7 @@
         <push-sms-dialog ref="smsRef" />
         <refund-dialog ref="refundRef" />
         <add-package-dialog ref="packageRef" />
+        <order-log ref="logRef" />
     </ele-page>
 </template>
 
@@ -42,6 +43,7 @@
     import PushSmsDialog from './components/push-sms-dialog.vue';
     import RefundDialog from './components/refund-dialog.vue';
     import AddPackageDialog from './components/add-package-dialog.vue';
+    import OrderLog from './components/order-log.vue';
     import OrderTableHeader from './components/order-table-header.vue';
     import OrderItem from './components/order-item.vue';
     import request from '@/utils/request';
@@ -64,6 +66,7 @@
     const detailRef = ref(null);
     const smsRef = ref(null);
     const refundRef = ref(null);
+    const logRef = ref(null);
 
     const fetchData = () => {
         loading.value = true;
@@ -122,6 +125,10 @@
         refundRef.value?.handleOpen(row);
     };
 
+    const openLog = (row) => {
+        logRef.value?.handleOpen(row.orderId);
+    };
+
     onMounted(() => {
         fetchData();
     });