Selaa lähdekoodia

refactor(mallOrder): 替换订单日志弹窗表格组件为通用表格

使用 CommonTable 组件替代原有的 ele-data-table,以支持分页和缓存功能。
简化数据获取逻辑,通过表格组件的 reload 方法加载数据。
调整列定义,添加序号列并统一设置列对齐方式。
ylong 1 kuukausi sitten
vanhempi
sitoutus
aa3fe2a1d3
1 muutettua tiedostoa jossa 26 lisäystä ja 27 poistoa
  1. 26 27
      src/views/mallOrder/all/components/order-log.vue

+ 26 - 27
src/views/mallOrder/all/components/order-log.vue

@@ -1,7 +1,14 @@
 <!-- 订单日志弹窗 -->
 <template>
     <ele-modal :width="1080" v-model="visible" title="订单日志">
-        <ele-data-table :data="orderLog" :columns="columns">
+        <common-table
+            ref="tableRef"
+            :pageConfig="pageConfig"
+            :columns="columns"
+            :tools="false"
+            height="400px"
+            :body-style="{padding:0}"
+        >
             <template #status="{ row }">
                 <dict-data
                     code="shop_order_status"
@@ -9,7 +16,7 @@
                     :model-value="row.status"
                 />
             </template>
-        </ele-data-table>
+        </common-table>
 
         <template #footer>
             <el-button type="primary" @click="handleCancel">关闭</el-button>
@@ -18,13 +25,13 @@
 </template>
 
 <script setup>
-    import { ref, reactive, getCurrentInstance } from 'vue';
+    import { ref, reactive, nextTick } from 'vue';
     import { EleMessage } from 'ele-admin-plus/es';
+    import CommonTable from '@/components/CommonPage/CommonTable.vue';
 
-    let { proxy } = getCurrentInstance();
-    
     /** 弹窗是否打开 */
     const visible = ref(false);
+    const tableRef = ref(null);
 
     /** 关闭弹窗 */
     const handleCancel = () => {
@@ -35,33 +42,25 @@
     const handleOpen = (orderId) => {
         if (orderId) {
             visible.value = true;
-            getOrderLog(orderId);
+            nextTick(() => {
+                tableRef.value?.reload({ 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 pageConfig = reactive({
+        pageUrl: '/shop/shopOrder/getOrderLogList',
+        rowKey: 'id',
+        cacheKey: 'orderLogTable'
+    });
 
     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 }
+        { type: 'index', width: 50, align: 'center' },
+        { label: '订单编号', prop: 'orderId', width: 150, align: 'center' },
+        { label: '状态', prop: 'status', slot: 'status', width: 160, align: 'center' },
+        { label: '操作者', prop: 'createName', width: 100, align: 'center' },
+        { label: '日志描述', prop: 'content', align: 'center' },
+        { label: '操作时间', prop: 'createTime', width: 180, align: 'center' }
     ]);
 
     defineExpose({