feat：【mall 商城】售后退款（20% antd detail grid 相关的几个描述）

apps/web-antd/src/api/mall/trade/afterSale/index.ts

@@ -1,5 +1,7 @@
 import type { PageParam, PageResult } from '@vben/request';
 
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
 import { requestClient } from '#/api/request';
 
 export namespace MallAfterSaleApi {
@@ -75,6 +77,9 @@ export namespace MallAfterSaleApi {
     receiveTime?: Date;
     /** 收货备注 */
     receiveReason?: string;
+    order?: MallOrderApi.Order; // 关联订单
+    orderItem?: MallOrderApi.OrderItem; // 关联订单项
+    logs?: any[]; // 关联售后日志
   }
 
   /** 拒绝售后请求 */

apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts

@@ -173,91 +173,53 @@ export function useRefundStatusSchema(): DescriptionItemSchema[] {
   ];
 }
 
-/** 商品信息 schema */
-export function useProductInfoSchema() {
-  return {
-    columns: [
-      {
-        field: 'spuName',
-        title: '商品',
-        width: 'auto',
-        formatter: ({ row }) => {
-          const properties = (row.properties || [])
-            .map(
-              (property: any) =>
-                `${property.propertyName}: ${property.valueName}`,
-            )
-            .join(', ');
-          return `${row.spuName}${properties ? ` (${properties})` : ''}`;
-        },
-      },
-      {
-        field: 'price',
-        title: '商品原价',
-        width: 150,
-        formatter: ({ cellValue }) => `${fenToYuan(cellValue)} 元`,
-      },
-      {
-        field: 'count',
-        title: '数量',
-        width: 100,
-      },
-      {
-        field: 'payPrice',
-        title: '合计',
-        width: 150,
-        formatter: ({ cellValue }) => `${fenToYuan(cellValue)} 元`,
-      },
-    ],
-    data: [],
-    pagination: false,
-    border: true,
-    size: 'small',
-  };
+/** 商品信息 columns */
+export function useProductColumns() {
+  return [
+    {
+      field: 'spuName',
+      title: '商品信息',
+      minWidth: 300,
+      slots: { default: 'spuName' },
+    },
+    {
+      field: 'price',
+      title: '商品原价',
+      minWidth: 150,
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 100,
+    },
+    {
+      field: 'payPrice',
+      title: '合计',
+      minWidth: 150,
+      formatter: 'formatFenToYuanAmount',
+    },
+  ];
 }
 
-/** 操作日志 schema */
+/** 操作日志 columns */
 export function useOperateLogSchema() {
-  return {
-    columns: [
-      {
-        field: 'createTime',
-        title: '操作时间',
-        width: 180,
-        formatter: ({ cellValue }) => formatDate(cellValue),
-      },
-      {
-        field: 'content',
-        title: '操作内容',
-        width: 'auto',
-      },
-      {
-        field: 'userType',
-        title: '操作人',
-        width: 80,
-        formatter: ({ cellValue }) => {
-          const userTypeLabels: Record<number, string> = {
-            1: '管',
-            2: '商',
-            3: '买',
-          };
-          return userTypeLabels[cellValue || 0] || '系';
-        },
-      },
-    ],
-    data: [],
-    pagination: false,
-    border: true,
-    size: 'small',
-  };
-}
-
-/** 获得用户类型颜色 */
-export function getUserTypeColor(type: number): string {
-  const colorMap: Record<number, string> = {
-    1: '#1890ff', // 蓝色
-    2: '#52c41a', // 绿色
-    3: '#fa8c16', // 橙色
-  };
-  return colorMap[type] || '#1890ff';
+  return [
+    {
+      field: 'createTime',
+      title: '操作时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'userType',
+      title: '操作人',
+      width: 100,
+      slots: { default: 'userType' },
+    },
+    {
+      field: 'content',
+      title: '操作内容',
+    },
+  ];
 }

apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue

@@ -1,28 +1,30 @@
 <script setup lang="ts">
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
 import type { MallOrderApi } from '#/api/mall/trade/order';
 
-import { h, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
-import { getDictLabel, useTabs } from '@vben/hooks';
+import { useTabs } from '@vben/hooks';
 import { $t } from '@vben/locales';
 
-import { Card, message, Modal, Timeline } from 'ant-design-vue';
+import { Card, message, Modal, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
+// TODO @AI：移除 AfterSaleApi，直接换成 api
 import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
 import { useDescription } from '#/components/description';
+import { DictTag } from '#/components/dict-tag';
 import { TableAction } from '#/components/table-action';
 
 import {
-  getUserTypeColor,
   useAfterSaleInfoSchema,
   useOperateLogSchema,
   useOrderInfoSchema,
-  useProductInfoSchema,
+  useProductColumns,
   useRefundStatusSchema,
 } from './data';
 
@@ -35,9 +37,9 @@ const tabs = useTabs();
 const loading = ref(false);
 const afterSaleId = ref(0);
 const afterSale = ref<MallAfterSaleApi.AfterSale>({
-  order: {} as MallOrderApi.Order,
-  orderItem: {} as MallOrderApi.OrderItem,
-  logs: [] as any[],
+  order: {},
+  orderItem: {},
+  logs: [],
 });
 
 const [OrderDescriptions] = useDescription({
@@ -67,20 +69,38 @@ const [RefundStatusDescriptions] = useDescription({
   schema: useRefundStatusSchema(),
 });
 
-// TODO @AI：只把 columns 拿出去
-const [ProductGrid] = useVbenVxeGrid({
+const [ProductGrid, productGridApi] = useVbenVxeGrid({
   gridOptions: {
-    ...useProductInfoSchema(),
-    class: 'mt-4',
-  },
+    cellConfig: {
+      height: 60,
+    },
+    columns: useProductColumns(),
+    data: [],
+    height: 'auto',
+    border: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallOrderApi.OrderItem>,
 });
 
-// TODO @AI：只把 columns 拿出去
-const [OperateLogGrid] = useVbenVxeGrid({
+const [OperateLogGrid, operateLogGridApi] = useVbenVxeGrid({
   gridOptions: {
-    ...useOperateLogSchema(),
-    class: 'mt-4',
-  },
+    columns: useOperateLogSchema(),
+    data: [],
+    border: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions,
 });
 
 const [DisagreeModal, disagreeModalApi] = useVbenModal({
@@ -99,15 +119,10 @@ async function getDetail() {
       return;
     }
     afterSale.value = res;
-
-    // 更新商品信息
-    if (res.orderItem) {
-      ProductGrid.api?.reload([res.orderItem]);
-    }
-    // 更新操作日志
-    if (res.logs) {
-      OperateLogGrid.api?.reload(res.logs);
-    }
+    await productGridApi.setGridOptions({ data: [afterSale.value.orderItem] });
+    await operateLogGridApi.setGridOptions({
+      data: afterSale.value.logs || [],
+    });
   } finally {
     loading.value = false;
   }
@@ -240,59 +255,6 @@ function getActionButtons() {
   return buttons;
 }
 
-/** 渲染操作日志时间线 */
-function renderTimeline() {
-  return afterSale.value.logs?.map((log: any) => ({
-    key: log.id,
-    children: [
-      h(
-        'div',
-        {
-          style: {
-            backgroundColor: '#f5f5f5',
-            padding: '10px',
-            borderRadius: '4px',
-            position: 'relative',
-            marginLeft: '10px',
-          },
-        },
-        [
-          h('div', log.content),
-          h('div', {
-            style: {
-              position: 'absolute',
-              left: '-16px',
-              top: '10px',
-              width: 0,
-              height: 0,
-              borderTop: '8px solid transparent',
-              borderBottom: '8px solid transparent',
-              borderRight: '8px solid #f5f5f5',
-            },
-          }),
-        ],
-      ),
-    ],
-    dot: h(
-      'span',
-      {
-        style: {
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: '20px',
-          height: '20px',
-          fontSize: '10px',
-          color: '#fff',
-          borderRadius: '50%',
-          backgroundColor: getUserTypeColor(log.userType ?? 0),
-        },
-      },
-      getDictLabel(DICT_TYPE.USER_TYPE, log.userType)?.[0] || '系',
-    ),
-  }));
-}
-
 onMounted(() => {
   afterSaleId.value = Number(route.params.id);
   getDetail();
@@ -301,7 +263,9 @@ onMounted(() => {
 
 <template>
   <Page auto-content-height :title="afterSale.no" :loading="loading">
+    <!-- TODO @AI：晚点搞；
     <DisagreeModal @success="getDetail" />
+    -->
 
     <!-- TODO @AI：直接写，不用 getActionButtons；按钮是否展示，使用 ifShow -->
     <template #extra>
@@ -321,14 +285,32 @@ onMounted(() => {
       <RefundStatusDescriptions :data="afterSale" />
     </Card>
     <!-- 商品信息 -->
-    <Card class="mb-4" title="商品信息">
-      <ProductGrid />
-    </Card>
+    <div class="mb-4">
+      <ProductGrid table-title="商品信息">
+        <template #spuName="{ row }">
+          <div class="flex flex-1 flex-col items-start gap-1 gap-2 text-left">
+            <span class="text-sm">{{ row.spuName }}</span>
+            <div class="flex flex-wrap gap-1">
+              <Tag
+                v-for="property in row.properties"
+                :key="property.propertyId!"
+                size="small"
+              >
+                {{ property.propertyName }}: {{ property.valueName }}
+              </Tag>
+            </div>
+          </div>
+        </template>
+      </ProductGrid>
+    </div>
     <!-- 操作日志 -->
-    <Card class="mb-4" title="售后日志">
-      <div style="margin-left: 160px">
-        <Timeline :items="renderTimeline()" />
-      </div>
-    </Card>
+    <div>
+      <OperateLogGrid table-title="售后日志">
+        <template #userType="{ row }">
+          <Tag v-if="row.userId === 0" color="default">系统</Tag>
+          <DictTag v-else :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
+        </template>
+      </OperateLogGrid>
+    </div>
   </Page>
 </template>