feat：【mall 商城】售后退款（100% antd table）

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

@@ -7,60 +7,6 @@ import { getDictOptions } from '@vben/hooks';
 import { z } from '#/adapter/form';
 import { getRangePickerDefaultProps } from '#/utils';
 
-/** 列表的搜索表单 */
-export function useGridFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'spuName',
-      label: '商品名称',
-      component: 'Input',
-    },
-    {
-      fieldName: 'no',
-      label: '退款编号',
-      component: 'Input',
-    },
-    {
-      fieldName: 'orderNo',
-      label: '订单编号',
-      component: 'Input',
-    },
-    {
-      fieldName: 'status',
-      label: '售后状态',
-      component: 'Select',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS, 'number'),
-      },
-    },
-    {
-      fieldName: 'status',
-      label: '售后方式',
-      component: 'Select',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_WAY, 'number'),
-      },
-    },
-    {
-      fieldName: 'type',
-      label: '售后类型',
-      component: 'Select',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_TYPE, 'number'),
-      },
-    },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
-        allowClear: true,
-      },
-    },
-  ];
-}
-
 /** 拒绝售后表单的 schema 配置 */
 export function useDisagreeFormSchema(): VbenFormSchema[] {
   return [
@@ -85,6 +31,75 @@ export function useDisagreeFormSchema(): VbenFormSchema[] {
   ];
 }
 
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'spuName',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '退款编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入退款编号',
+      },
+    },
+    {
+      fieldName: 'orderNo',
+      label: '订单编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入订单编号',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '售后状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS, 'number'),
+        placeholder: '请选择售后状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'way',
+      label: '售后方式',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_WAY, 'number'),
+        placeholder: '请选择售后方式',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '售后类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_TYPE, 'number'),
+        placeholder: '请选择售后类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
 /** 表格列配置 */
 export function useGridColumns(): VxeGridPropTypes.Columns {
   return [
@@ -92,55 +107,44 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       field: 'no',
       title: '退款编号',
       fixed: 'left',
+      minWidth: 200,
     },
     {
       field: 'orderNo',
       title: '订单编号',
       fixed: 'left',
+      minWidth: 200,
       slots: { default: 'orderNo' },
     },
     {
-      field: 'spuName',
+      field: 'productInfo',
-      title: '商品名称',
+      title: '商品信息',
-      align: 'left',
+      minWidth: 600,
-      minWidth: 200,
+      slots: { default: 'productInfo' },
-    },
-    {
-      field: 'picUrl',
-      title: '商品图片',
-      cellRender: {
-        name: 'CellImage',
-      },
-    },
-    {
-      field: 'properties',
-      title: '商品属性',
-      minWidth: 200,
-      formatter: ({ cellValue }) => {
-        return cellValue && cellValue.length > 0
-          ? cellValue
-              .map((item: any) => `${item.propertyName} : ${item.valueName}`)
-              .join('\n')
-          : '-';
-      },
     },
     {
       field: 'refundPrice',
       title: '订单金额',
+      width: 120,
       formatter: 'formatAmount2',
     },
     {
       field: 'user.nickname',
       title: '买家',
+      align: 'center',
+      minWidth: 120,
     },
     {
       field: 'createTime',
       title: '申请时间',
+      width: 180,
       formatter: 'formatDateTime',
     },
     {
-      field: 'content',
+      field: 'status',
       title: '售后状态',
+      width: 100,
+      align: 'center',
       cellRender: {
         name: 'CellDictTag',
         props: {
@@ -151,6 +155,8 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     {
       field: 'way',
       title: '售后方式',
+      width: 100,
+      align: 'center',
       cellRender: {
         name: 'CellDictTag',
         props: {
@@ -160,8 +166,9 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     },
     {
       title: '操作',
-      width: 80,
+      width: 160,
       fixed: 'right',
+      align: 'center',
       slots: { default: 'actions' },
     },
   ];

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

@@ -9,7 +9,7 @@ import { DocAlert, Page } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import { Button, Tabs } from 'ant-design-vue';
+import { Button, Image, Tabs, Tag } from 'ant-design-vue';
 
 import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getAfterSalePage } from '#/api/mall/trade/afterSale';
@@ -18,22 +18,28 @@ import { useGridColumns, useGridFormSchema } from './data';
 
 const { push } = useRouter();
 
-const status = ref('0');
 const statusTabs = ref([
   {
     label: '全部',
     value: '0',
   },
 ]);
+const statusTab = ref(statusTabs.value[0]!.value);
 
 /** 处理退款 */
-function openAfterSaleDetail(row: MallAfterSaleApi.AfterSale) {
+function handleOpenAfterSaleDetail(row: MallAfterSaleApi.AfterSale) {
   push({ name: 'TradeAfterSaleDetail', params: { id: row.id } });
 }
 
 /** 查看订单详情 */
-function openOrderDetail(row: MallAfterSaleApi.AfterSale) {
+function handleOpenOrderDetail(row: MallAfterSaleApi.AfterSale) {
-  push({ name: 'TradeOrderDetail', params: { id: row.id } });
+  push({ name: 'TradeOrderDetail', params: { id: row.orderId } });
+}
+
+/** 切换售后状态 */
+function handleChangeStatus(key: number | string) {
+  statusTab.value = key.toString();
+  gridApi.query();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -41,6 +47,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
+    cellConfig: {
+      height: 60,
+    },
     columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
@@ -50,7 +59,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getAfterSalePage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            status: status.value === '0' ? undefined : status.value,
+            status:
+              statusTab.value === '0' ? undefined : Number(statusTab.value),
             ...formValues,
           });
         },
@@ -58,6 +68,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -66,10 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<MallAfterSaleApi.AfterSale>,
 });
 
-function onChangeStatus(key: number | string) {
+/** 初始化 */
-  status.value = key.toString();
-  gridApi.query();
-}
 onMounted(() => {
   for (const dict of getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
     statusTabs.value.push({
@@ -84,13 +92,18 @@ onMounted(() => {
   <Page auto-content-height>
     <template #doc>
       <DocAlert
-        title="【交易】交易订单"
+        title="【交易】售后退款"
-        url="https://doc.iocoder.cn/mall/trade-order/"
+        url="https://doc.iocoder.cn/mall/trade-aftersale/"
       />
     </template>
-    <Grid table-title="退款列表">
+
+    <Grid>
       <template #top>
-        <Tabs class="border-none" @change="onChangeStatus">
+        <Tabs
+          v-model:active-key="statusTab"
+          class="-mt-11"
+          @change="handleChangeStatus"
+        >
           <Tabs.TabPane
             v-for="tab in statusTabs"
             :key="tab.value"
@@ -99,17 +112,40 @@ onMounted(() => {
         </Tabs>
       </template>
       <template #orderNo="{ row }">
-        <Button type="link" @click="openOrderDetail(row)">
+        <Button type="link" @click="handleOpenOrderDetail(row)">
           {{ row.orderNo }}
         </Button>
       </template>
+      <template #productInfo="{ row }">
+        <div class="flex items-start gap-2 text-left">
+          <Image
+            :src="row.picUrl"
+            :width="40"
+            :height="40"
+            :preview="{ src: row.picUrl }"
+          />
+          <div class="flex flex-1 flex-col gap-1">
+            <span class="text-sm">{{ row.spuName }}</span>
+            <div class="mt-1 flex flex-wrap gap-1">
+              <Tag
+                v-for="property in row.properties"
+                :key="property.propertyId!"
+                size="small"
+                color="blue"
+              >
+                {{ property.propertyName }}: {{ property.valueName }}
+              </Tag>
+            </div>
+          </div>
+        </div>
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
             {
               label: '处理退款',
               type: 'link',
-              onClick: openAfterSaleDetail.bind(null, row),
+              onClick: handleOpenAfterSaleDetail.bind(null, row),
             },
           ]"
         />
@@ -117,3 +153,8 @@ onMounted(() => {
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>