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

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

@@ -117,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                   <Tag
                     color="blue"
                     v-for="property in item.properties"
-                    :key="property.id"
+                    :key="property.propertyId"
                   >
                     {{ property.propertyName }} : {{ property.valueName }}
                   </Tag>

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

@@ -20,6 +20,7 @@ import AddressList from './modules/address-list.vue';
 import BalanceList from './modules/balance-list.vue';
 import BasicInfo from './modules/basic-info.vue';
 import ExperienceRecordList from './modules/experience-record-list.vue';
+import OrderList from './modules/order-list.vue';
 import PointList from './modules/point-list.vue';
 import SignList from './modules/sign-list.vue';
 
@@ -100,10 +101,7 @@ onMounted(async () => {
             <AddressList class="h-full" :user-id="userId" />
           </TabPane>
           <TabPane tab="订单管理" key="OrderList">
-            <!-- Todo: 商城模块 -->
-            <div class="h-full">
-              <h1>订单管理</h1>
-            </div>
+            <OrderList class="h-full" :user-id="userId" />
           </TabPane>
           <TabPane tab="售后管理" key="AfterSaleList">
             <!-- Todo: 商城模块 -->

apps/web-antd/src/views/member/user/detail/modules/account-info.vue

@@ -8,7 +8,7 @@ import { Card } from 'ant-design-vue';
 
 import { useDescription } from '#/components/description';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     mode?: 'kefu' | 'member';
     user: MemberUserApi.User;
@@ -20,6 +20,8 @@ withDefaults(
 );
 
 const [Descriptions] = useDescription({
+  bordered: false,
+  column: props.mode === 'member' ? 2 : 1,
   schema: [
     {
       field: 'levelName',

apps/web-antd/src/views/member/user/detail/modules/basic-info.vue

@@ -11,7 +11,7 @@ import { Avatar, Card, Col, Row } from 'ant-design-vue';
 import { useDescription } from '#/components/description';
 import { DictTag } from '#/components/dict-tag';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{ mode?: 'kefu' | 'member'; user: MemberUserApi.User }>(),
   {
     mode: 'member',
@@ -19,6 +19,8 @@ withDefaults(
 );
 
 const [Descriptions] = useDescription({
+  bordered: false,
+  column: props.mode === 'member' ? 2 : 1,
   schema: [
     {
       field: 'name',
@@ -35,10 +37,10 @@ const [Descriptions] = useDescription({
     {
       field: 'sex',
       label: '性别',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.SYSTEM_USER_SEX,
-          value: data.sex,
+          value: val,
         }),
     },
     {
@@ -52,17 +54,17 @@ const [Descriptions] = useDescription({
     {
       field: 'birthday',
       label: '生日',
-      content: (data) => formatDate(data.birthday)?.toString() || '-',
+      render: (val) => formatDate(val)?.toString() || '-',
     },
     {
       field: 'createTime',
       label: '注册时间',
-      content: (data) => formatDate(data.createTime)?.toString() || '-',
+      render: (val) => formatDate(val)?.toString() || '-',
     },
     {
       field: 'loginDate',
       label: '最后登录时间',
-      content: (data) => formatDate(data.loginDate)?.toString() || '-',
+      render: (val) => formatDate(val)?.toString() || '-',
     },
   ],
 });

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

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { useRouter } from 'vue-router';
+
+import { DICT_TYPE } from '@vben/constants';
+import { fenToYuan } from '@vben/utils';
+
+import { Image, List, Tag } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getOrderPage } from '#/api/mall/trade/order';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import {
+  useGridColumns,
+  useGridFormSchema as useOrderGridFormSchema,
+} from '#/views/mall/trade/order/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const { push } = useRouter();
+
+/** 列表的搜索表单（过滤掉用户相关字段） */
+function useGridFormSchema() {
+  const excludeFields = new Set(['userId', 'userNickname']);
+  return useOrderGridFormSchema().filter(
+    (item) => !excludeFields.has(item.fieldName),
+  );
+}
+
+/** 详情 */
+function handleDetail(row: MallOrderApi.Order) {
+  push({ name: 'TradeOrderDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    expandConfig: {
+      trigger: 'row',
+      expandAll: true,
+      padding: true,
+    },
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallOrderApi.Order>,
+});
+</script>
+
+<template>
+  <Grid table-title="订单列表">
+    <template #expand_content="{ row }">
+      <List item-layout="vertical" :data-source="row.items">
+        <template #renderItem="{ item }">
+          <List.Item>
+            <List.Item.Meta>
+              <template #title>
+                {{ item.spuName }}
+                <Tag
+                  color="blue"
+                  v-for="property in item.properties"
+                  :key="property.propertyId"
+                >
+                  {{ property.propertyName }} : {{ property.valueName }}
+                </Tag>
+              </template>
+              <template #avatar>
+                <Image :src="item.picUrl" :width="40" :height="40" />
+              </template>
+              <template #description>
+                {{
+                  `原价：${fenToYuan(item.price)} 元 / 数量：${item.count} 个`
+                }}
+                |
+                <DictTag
+                  :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
+                  :value="item.afterSaleStatus"
+                />
+              </template>
+            </List.Item.Meta>
+          </List.Item>
+        </template>
+      </List>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.detail'),
+            type: 'link',
+            icon: ACTION_ICON.VIEW,
+            auth: ['trade:order:query'],
+            onClick: handleDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>

apps/web-ele/src/views/mall/trade/order/index.vue

@@ -122,7 +122,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 {{ item.spuName }}
                 <ElTag
                   v-for="property in item.properties"
-                  :key="property.id"
+                  :key="property.propertyId"
                   class="ml-1"
                   size="small"
                 >
@@ -133,7 +133,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 class="flex items-center justify-between text-xs text-gray-500"
               >
                 <span>
-                  原价：{{ fenToYuan(item.price) }} 元 / 数量：{{
+                  原价：{{ fenToYuan(item.price!) }} 元 / 数量：{{
                     item.count
                   }}个
                 </span>

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

@@ -19,6 +19,7 @@ import AccountInfo from './modules/account-info.vue';
 import BalanceList from './modules/balance-list.vue';
 import BasicInfo from './modules/basic-info.vue';
 import ExperienceRecordList from './modules/experience-record-list.vue';
+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';
@@ -26,7 +27,6 @@ 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';
-import UserOrderList from './modules/user-order-list.vue';
 
 const route = useRoute();
 const { closeCurrentTab, refreshTab } = useTabs();
@@ -70,6 +70,7 @@ onMounted(async () => {
   <Page auto-content-height>
     <FormModal @success="refreshTab" />
     <div class="flex">
+      <!-- TODO @芋艿：这里的 title 怎么办？ -->
       <BasicInfo v-if="user" class="w-3/5" :user="user" mode="member">
         <template #title> 基本信息 </template>
         <template #extra>
@@ -106,10 +107,7 @@ onMounted(async () => {
             <UserAddressList class="h-full" :user-id="userId" />
           </ElTabPane>
           <ElTabPane label="订单管理" name="OrderList">
-            <!-- Todo: 商城模块 -->
-            <div class="h-full">
-              <UserOrderList class="h-full" :user-id="userId" />
-            </div>
+            <OrderList class="h-full" :user-id="userId" />
           </ElTabPane>
           <ElTabPane label="售后管理" name="AfterSaleList">
             <!-- Todo: 商城模块 -->

apps/web-ele/src/views/member/user/detail/modules/account-info.vue

@@ -22,7 +22,6 @@ const props = withDefaults(
 const [Descriptions] = useDescription({
   border: false,
   column: props.mode === 'member' ? 2 : 1,
-  labelWidth: 140,
   schema: [
     {
       field: 'levelName',

apps/web-ele/src/views/member/user/detail/modules/basic-info.vue

@@ -21,7 +21,6 @@ const props = withDefaults(
 const [Descriptions] = useDescription({
   border: false,
   column: props.mode === 'member' ? 2 : 1,
-  labelWidth: 140,
   schema: [
     {
       field: 'name',

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

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { useRouter } from 'vue-router';
+
+import { DICT_TYPE } from '@vben/constants';
+import { fenToYuan } from '@vben/utils';
+
+import { ElImage, ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getOrderPage } from '#/api/mall/trade/order';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import {
+  useGridColumns,
+  useGridFormSchema as useOrderGridFormSchema,
+} from '#/views/mall/trade/order/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const { push } = useRouter();
+
+/** 列表的搜索表单（过滤掉用户相关字段） */
+function useGridFormSchema() {
+  const excludeFields = new Set(['userId', 'userNickname']);
+  return useOrderGridFormSchema().filter(
+    (item) => !excludeFields.has(item.fieldName),
+  );
+}
+
+/** 详情 */
+function handleDetail(row: MallOrderApi.Order) {
+  push({ name: 'TradeOrderDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    expandConfig: {
+      trigger: 'row',
+      expandAll: true,
+      padding: true,
+    },
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallOrderApi.Order>,
+});
+</script>
+
+<template>
+  <Grid table-title="订单列表">
+    <template #expand_content="{ row }">
+      <div class="py-2">
+        <div
+          v-for="item in row.items"
+          :key="item.id!"
+          class="flex items-start border-b border-gray-100 py-2 last:border-b-0"
+        >
+          <div class="mr-3 flex-shrink-0">
+            <ElImage :src="item.picUrl" class="h-10 w-10" />
+          </div>
+          <div class="flex-1">
+            <div class="mb-1 font-medium">
+              {{ item.spuName }}
+              <ElTag
+                v-for="property in item.properties"
+                :key="property.propertyId"
+                class="ml-1"
+                size="small"
+              >
+                {{ property.propertyName }}: {{ property.valueName }}
+              </ElTag>
+            </div>
+            <div
+              class="flex items-center justify-between text-xs text-gray-500"
+            >
+              <span>
+                原价：{{ fenToYuan(item.price!) }} 元 / 数量：{{ item.count }}个
+              </span>
+              <DictTag
+                :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
+                :value="item.afterSaleStatus"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.detail'),
+            type: 'primary',
+            link: true,
+            icon: ACTION_ICON.VIEW,
+            auth: ['trade:order:query'],
+            onClick: handleDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>

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

@@ -1,264 +0,0 @@
-<script setup lang="ts">
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
-import type { MallOrderApi } from '#/api/mall/trade/order/index';
-
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-import { DeliveryTypeEnum, DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-import { $t } from '@vben/locales';
-import { fenToYuan } from '@vben/utils';
-
-import { ElImage, ElTag } from 'element-plus';
-
-import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
-import { getSimpleDeliveryPickUpStoreList } from '#/api/mall/trade/delivery/pickUpStore';
-import * as OrderApi from '#/api/mall/trade/order/index';
-import { DictTag } from '#/components/dict-tag';
-import { getRangePickerDefaultProps } from '#/utils';
-import { useGridColumns } from '#/views/mall/trade/order/data';
-
-const props = defineProps<{
-  userId: number;
-}>();
-
-const pickUpStoreList = ref<MallDeliveryPickUpStoreApi.PickUpStore[]>([]);
-
-getSimpleDeliveryPickUpStoreList().then((res) => {
-  pickUpStoreList.value = res;
-});
-const { push } = useRouter();
-/** 详情 */
-function handleDetail(row: MallOrderApi.Order) {
-  push({ name: 'TradeOrderDetail', params: { id: row.id } });
-}
-
-const [Grid] = useVbenVxeGrid({
-  formOptions: {
-    schema: [
-      {
-        fieldName: 'bizType',
-        label: '订单状态',
-        component: 'Select',
-        componentProps: {
-          clearable: true,
-          options: getDictOptions(DICT_TYPE.TRADE_ORDER_STATUS, 'number'),
-          placeholder: '全部',
-        },
-      },
-      {
-        fieldName: 'payChannelCode',
-        label: '支付方式',
-        component: 'Select',
-        componentProps: {
-          clearable: true,
-          options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'number'),
-          placeholder: '全部',
-        },
-      },
-      {
-        fieldName: 'createTime',
-        label: '创建时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          clearable: true,
-        },
-      },
-      {
-        fieldName: 'terminal',
-        label: '订单来源',
-        component: 'Select',
-        componentProps: {
-          clearable: true,
-          options: getDictOptions(DICT_TYPE.TERMINAL, 'number'),
-          placeholder: '全部',
-        },
-      },
-      {
-        fieldName: 'type',
-        label: '订单类型',
-        component: 'Select',
-        componentProps: {
-          clearable: true,
-          options: getDictOptions(DICT_TYPE.TRADE_ORDER_TYPE, 'number'),
-          placeholder: '全部',
-        },
-      },
-      {
-        fieldName: 'deliveryType',
-        label: '配送方式',
-        component: 'Select',
-        componentProps: {
-          clearable: true,
-          options: getDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE, 'number'),
-          placeholder: '全部',
-        },
-      },
-      {
-        fieldName: 'logisticsId',
-        label: '快递公司',
-        component: 'ApiSelect',
-        componentProps: {
-          clearable: true,
-          api: getSimpleDeliveryExpressList,
-          labelField: 'name',
-          valueField: 'id',
-          placeholder: '全部',
-        },
-        dependencies: {
-          triggerFields: ['deliveryType'],
-          show: (values) =>
-            values.deliveryType === DeliveryTypeEnum.EXPRESS.type,
-        },
-      },
-      {
-        fieldName: 'pickUpStoreId',
-        label: '自提门店',
-        component: 'ApiSelect',
-        componentProps: {
-          api: getSimpleDeliveryPickUpStoreList,
-          labelField: 'name',
-          valueField: 'id',
-        },
-        dependencies: {
-          triggerFields: ['deliveryType'],
-          show: (values) =>
-            values.deliveryType === DeliveryTypeEnum.PICK_UP.type,
-        },
-      },
-      {
-        fieldName: 'pickUpVerifyCode',
-        label: '核销码',
-        component: 'Input',
-        dependencies: {
-          triggerFields: ['deliveryType'],
-          show: (values) =>
-            values.deliveryType === DeliveryTypeEnum.PICK_UP.type,
-        },
-      },
-    ],
-  },
-  gridOptions: {
-    columns: useGridColumns(),
-    keepSource: true,
-    pagerConfig: {
-      pageSize: 10,
-    },
-    expandConfig: {
-      trigger: 'row',
-      expandAll: true,
-      padding: true,
-    },
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await OrderApi.getOrderPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            userId: props.userId,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<MallOrderApi.Order>,
-  separator: false,
-});
-</script>
-
-<template>
-  <Grid table-title="订单列表">
-    <template #expand_content="{ row }">
-      <div class="order-items">
-        <div v-for="(item, index) in row.items" :key="index" class="order-item">
-          <div class="order-item-image">
-            <ElImage :src="item.picUrl" :width="40" :height="40" />
-          </div>
-          <div class="order-item-content">
-            <div class="order-item-name">
-              {{ item.spuName }}
-              <ElTag
-                v-for="property in item.properties"
-                :key="property.id"
-                class="ml-1"
-              >
-                {{ property.propertyName }}: {{ property.valueName }}
-              </ElTag>
-            </div>
-            <div class="order-item-info">
-              <span>
-                原价：{{ fenToYuan(item.price) }} 元 / 数量：{{ item.count }} 个
-              </span>
-              <DictTag
-                :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
-                :value="item.afterSaleStatus"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #actions="{ row }">
-      <TableAction
-        :actions="[
-          {
-            label: $t('common.detail'),
-            link: true,
-            icon: ACTION_ICON.VIEW,
-            auth: ['trade:order:query'],
-            onClick: handleDetail.bind(null, row),
-          },
-        ]"
-      />
-    </template>
-  </Grid>
-</template>
-<style lang="scss" scoped>
-.order-items {
-  padding: 8px 0;
-}
-
-.order-item {
-  display: flex;
-  align-items: flex-start;
-  padding: 8px 0;
-  border-bottom: 1px solid #f0f0f0;
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.order-item-image {
-  flex-shrink: 0;
-  margin-right: 12px;
-}
-
-.order-item-content {
-  flex: 1;
-}
-
-.order-item-name {
-  margin-bottom: 4px;
-  font-weight: 500;
-}
-
-.order-item-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 13px;
-  color: #666;
-}
-</style>