review：【antd】【ele】member 增加 after-sale-list 列表

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

@@ -131,7 +131,6 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     {
       field: 'user.nickname',
       title: '买家',
-      align: 'center',
       minWidth: 120,
     },
     {
@@ -144,11 +143,10 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       field: 'status',
       title: '售后状态',
       width: 100,
-      align: 'center',
       cellRender: {
         name: 'CellDict',
         props: {
-          dictType: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
+          type: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
         },
       },
     },
@@ -156,11 +154,10 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       field: 'way',
       title: '售后方式',
       width: 100,
-      align: 'center',
       cellRender: {
         name: 'CellDict',
         props: {
-          dictType: DICT_TYPE.TRADE_AFTER_SALE_WAY,
+          type: DICT_TYPE.TRADE_AFTER_SALE_WAY,
         },
       },
     },

apps/web-antd/src/views/member/user/detail/index.vue

@@ -17,6 +17,7 @@ import { $t } from '#/locales';
 import Form from '../modules/form.vue';
 import AccountInfo from './modules/account-info.vue';
 import AddressList from './modules/address-list.vue';
+import AfterSaleList from './modules/after-sale-list.vue';
 import BalanceList from './modules/balance-list.vue';
 import BasicInfo from './modules/basic-info.vue';
 import ExperienceRecordList from './modules/experience-record-list.vue';
@@ -104,10 +105,7 @@ onMounted(async () => {
             <OrderList class="h-full" :user-id="userId" />
           </TabPane>
           <TabPane tab="售后管理" key="AfterSaleList">
-            <!-- Todo: 商城模块 -->
+            <AfterSaleList class="h-full" :user-id="userId" />
-            <div class="h-full">
-              <h1>售后管理</h1>
-            </div>
           </TabPane>
           <TabPane tab="收藏记录" key="FavoriteList">
             <!-- Todo: 商城模块 -->

apps/web-antd/src/views/member/user/detail/modules/after-sale-list.vue

@@ -0,0 +1,155 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
+
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Button, Image, Tabs, Tag } from 'ant-design-vue';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAfterSalePage } from '#/api/mall/trade/afterSale';
+import {
+  useGridColumns,
+  useGridFormSchema,
+} from '#/views/mall/trade/afterSale/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const { push } = useRouter();
+
+const statusTabs = ref([
+  {
+    label: '全部',
+    value: '0',
+  },
+]);
+const statusTab = ref(statusTabs.value[0]!.value);
+
+/** 处理退款 */
+function handleOpenAfterSaleDetail(row: MallAfterSaleApi.AfterSale) {
+  push({ name: 'TradeAfterSaleDetail', 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({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    cellConfig: {
+      height: 60,
+    },
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAfterSalePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            status:
+              statusTab.value === '0' ? undefined : Number(statusTab.value),
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallAfterSaleApi.AfterSale>,
+});
+
+/** 初始化 */
+onMounted(() => {
+  for (const dict of getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
+    statusTabs.value.push({
+      label: dict.label,
+      value: dict.value.toString(),
+    });
+  }
+});
+</script>
+
+<template>
+  <Grid>
+    <template #toolbar-actions>
+      <Tabs
+        v-model:active-key="statusTab"
+        class="w-full"
+        @change="handleChangeStatus"
+      >
+        <Tabs.TabPane
+          v-for="tab in statusTabs"
+          :key="tab.value"
+          :tab="tab.label"
+        />
+      </Tabs>
+    </template>
+    <template #orderNo="{ row }">
+      <Button type="link" @click="handleOpenOrderDetail(row)">
+        {{ row.orderNo }}
+      </Button>
+    </template>
+    <template #productInfo="{ row }">
+      <div class="flex items-start gap-2 text-left">
+        <Image
+          v-if="row.picUrl"
+          :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: handleOpenAfterSaleDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>

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

@@ -131,7 +131,6 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     {
       field: 'user.nickname',
       title: '买家',
-      align: 'center',
       minWidth: 120,
     },
     {
@@ -144,11 +143,10 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       field: 'status',
       title: '售后状态',
       width: 100,
-      align: 'center',
       cellRender: {
         name: 'CellDict',
         props: {
-          dictType: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
+          type: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
         },
       },
     },
@@ -156,11 +154,10 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       field: 'way',
       title: '售后方式',
       width: 100,
-      align: 'center',
       cellRender: {
         name: 'CellDict',
         props: {
-          dictType: DICT_TYPE.TRADE_AFTER_SALE_WAY,
+          type: DICT_TYPE.TRADE_AFTER_SALE_WAY,
         },
       },
     },

apps/web-ele/src/views/member/user/detail/index.vue

@@ -16,6 +16,7 @@ import { $t } from '#/locales';
 
 import Form from '../modules/form.vue';
 import AccountInfo from './modules/account-info.vue';
+import AfterSaleList from './modules/after-sale-list.vue';
 import BalanceList from './modules/balance-list.vue';
 import BasicInfo from './modules/basic-info.vue';
 import ExperienceRecordList from './modules/experience-record-list.vue';
@@ -23,7 +24,6 @@ import OrderList from './modules/order-list.vue';
 import PointList from './modules/point-list.vue';
 import SignList from './modules/sign-list.vue';
 import UserAddressList from './modules/user-address-list.vue';
-import UserAfterSaleList from './modules/user-after-sale-list.vue';
 import UserBrokerageList from './modules/user-brokerage-list.vue';
 import UserCouponList from './modules/user-coupon-list.vue';
 import UserFavoriteList from './modules/user-favorite-list.vue';
@@ -110,10 +110,7 @@ onMounted(async () => {
             <OrderList class="h-full" :user-id="userId" />
           </ElTabPane>
           <ElTabPane label="售后管理" name="AfterSaleList">
-            <!-- Todo: 商城模块 -->
+            <AfterSaleList class="h-full" :user-id="userId" />
-            <div class="h-full">
-              <UserAfterSaleList class="h-full" :user-id="userId" />
-            </div>
           </ElTabPane>
           <ElTabPane label="收藏记录" name="FavoriteList">
             <!-- Todo: 商城模块 -->

apps/web-ele/src/views/member/user/detail/modules/after-sale-list.vue

@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
+
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElButton, ElImage, ElTabs, ElTag } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAfterSalePage } from '#/api/mall/trade/afterSale';
+import {
+  useGridColumns,
+  useGridFormSchema,
+} from '#/views/mall/trade/afterSale/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const { push } = useRouter();
+
+const statusTabs = ref([
+  {
+    label: '全部',
+    value: '0',
+  },
+]);
+const statusTab = ref(statusTabs.value[0]!.value);
+
+/** 处理退款 */
+function handleOpenAfterSaleDetail(row: MallAfterSaleApi.AfterSale) {
+  push({ name: 'TradeAfterSaleDetail', 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({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    cellConfig: {
+      height: 60,
+    },
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAfterSalePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            status:
+              statusTab.value === '0' ? undefined : Number(statusTab.value),
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallAfterSaleApi.AfterSale>,
+});
+
+/** 初始化 */
+onMounted(() => {
+  for (const dict of getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
+    statusTabs.value.push({
+      label: dict.label,
+      value: dict.value.toString(),
+    });
+  }
+});
+</script>
+
+<template>
+  <Grid>
+    <template #toolbar-actions>
+      <ElTabs
+        v-model="statusTab"
+        class="w-full"
+        @tab-change="handleChangeStatus"
+      >
+        <ElTabs.TabPane
+          v-for="tab in statusTabs"
+          :key="tab.value"
+          :label="tab.label"
+          :name="tab.value"
+        />
+      </ElTabs>
+    </template>
+    <template #orderNo="{ row }">
+      <ElButton type="primary" link @click="handleOpenOrderDetail(row)">
+        {{ row.orderNo }}
+      </ElButton>
+    </template>
+    <template #productInfo="{ row }">
+      <div class="flex items-start gap-2 text-left">
+        <ElImage
+          v-if="row.picUrl"
+          :src="row.picUrl"
+          style="width: 40px; height: 40px"
+          :preview-src-list="[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">
+            <ElTag
+              v-for="property in row.properties"
+              :key="property.propertyId!"
+              size="small"
+              type="info"
+            >
+              {{ property.propertyName }}: {{ property.valueName }}
+            </ElTag>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '处理退款',
+            type: 'primary',
+            link: true,
+            onClick: handleOpenAfterSaleDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>

apps/web-ele/src/views/member/user/detail/modules/user-after-sale-list.vue

@@ -1,150 +0,0 @@
-<script setup lang="ts">
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale/index';
-
-import { ref, watch } from 'vue';
-
-import { ElTabPane, ElTabs } from 'element-plus';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getAfterSalePage } from '#/api/mall/trade/afterSale';
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
-import { getRangePickerDefaultProps } from '#/utils';
-import { useGridColumns } from '#/views/mall/trade/order/data';
-
-const props = defineProps<{
-  userId: number;
-}>();
-
-// 添加当前选中的售后状态
-const activeStatus = ref<number | string>('all');
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: [
-      {
-        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: 'type',
-        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(),
-          clearable: true,
-        },
-      },
-    ],
-    // 监听表单值变化
-    handleValuesChange: (values, changedFields) => {
-      // 如果状态字段发生变化
-      if (changedFields.includes('status')) {
-        // 同步更新标签页选中状态
-        activeStatus.value = values.status ? String(values.status) : 'all';
-      }
-    },
-  },
-  gridOptions: {
-    columns: useGridColumns(),
-    keepSource: true,
-    pagerConfig: {
-      pageSize: 10,
-    },
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getAfterSalePage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            userId: props.userId,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-      slots: {
-        buttons: 'customTop',
-      },
-    },
-  } as VxeTableGridOptions<MallAfterSaleApi.AfterSale>,
-  separator: false,
-});
-
-// 监听标签页变化，更新表单状态值并触发查询
-watch(activeStatus, (val) => {
-  // 使用formApi获取表单对象
-  if (gridApi.formApi) {
-    // 设置状态值
-    gridApi.formApi.setFieldValue(
-      'status',
-      val === 'all' ? undefined : Number(val),
-    );
-
-    // 触发查询
-    gridApi.query({ status: val === 'all' ? undefined : Number(val) });
-  }
-});
-</script>
-
-<template>
-  <Grid>
-    <template #customTop>
-      <ElTabs v-model="activeStatus">
-        <ElTabPane label="全部" name="all" />
-        <ElTabPane
-          v-for="item in getDictOptions(
-            DICT_TYPE.TRADE_AFTER_SALE_STATUS,
-            'number',
-          )"
-          :key="String(item.value)"
-          :label="item.label"
-          :name="String(item.value)"
-        />
-      </ElTabs>
-    </template>
-  </Grid>
-</template>