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

2025-10-14 20:52:35 +08:00
parent 5e8c9175bb
commit 6fe61f9efb
2 changed files with 143 additions and 95 deletions
--- a/apps/web-antd/src/views/mall/trade/afterSale/data.ts
+++ b/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',
-      title: '商品名称',
-      align: 'left',
-      minWidth: 200,
-    },
-    {
-      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: 'productInfo',
+      title: '商品信息',
+      minWidth: 600,
+      slots: { default: 'productInfo' },
    },
    {
      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' },
    },
  ];
--- a/apps/web-antd/src/views/mall/trade/afterSale/index.vue
+++ b/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) {
-  push({ name: 'TradeOrderDetail', params: { id: row.id } });
+function handleOpenOrderDetail(row: MallAfterSaleApi.AfterSale) {
+  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="【交易】交易订单"
-        url="https://doc.iocoder.cn/mall/trade-order/"
+        title="【交易】售后退款"
+        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>