fix: sku完成，订单、商品上下架管理正在搞

apps/web-antd/src/api/request.ts

@@ -3,6 +3,7 @@
  */
 import type { RequestClientOptions } from '@vben/request';
 
+import { confirm } from '@vben/common-ui';
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
@@ -21,6 +22,7 @@ import { refreshTokenApi } from './core';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
+
 function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   const client = new RequestClient({
     ...options,
@@ -100,9 +102,11 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
 
       // 处理登录过期
       if (errorCode === 401) {
-        message.error('登录状态已过期，请重新登录');
+        // alert('登录状态已过期，请重新登录');
+        confirm(errorMessage).then(() => {
           const authStore = useAuthStore();
           authStore.logout();
+        });
         return;
       }
 
@@ -110,18 +114,20 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
       message.error(errorMessage);
     }),
   );
-
-  // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
-  client.addResponseInterceptor(
-    errorMessageResponseInterceptor((msg: string, error) => {
-      // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
-      // 当前mock接口返回的错误字段是 error 或者 message
-      const responseData = error?.response?.data ?? {};
-      const errorMessage = responseData?.error ?? responseData?.message ?? '';
-      // 如果没有错误信息，则会根据状态码进行提示
-      message.error(errorMessage || msg);
-    }),
-  );
+  //
+  // // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
+  // client.addResponseInterceptor(
+  //   errorMessageResponseInterceptor((msg: string, error) => {
+  //     // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
+  //     // 当前mock接口返回的错误字段是 error 或者 message
+  //     const responseData = error?.response?.data ?? {};
+  //     const errorMessage = responseData?.error ?? responseData?.message ?? '';
+  //     // 如果没有错误信息，则会根据状态码进行提示
+  //     // if (type === 2) {
+  //     //   alert(errorMessage || msg);
+  //     // }
+  //   }),
+  // );
 
   return client;
 }

apps/web-antd/src/components/form/components/cascader.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { onMounted, watch } from 'vue';
+import { useVModel } from '@vueuse/core';
+import { Cascader } from 'ant-design-vue';
+import { addressOption } from '#/util/address';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  value: {
+    type: Array,
+    default: () => [],
+  },
+  loadData: Function,
+});
+
+const emits = defineEmits(['update:value', 'search-change', 'expand-change']);
+
+const mValue = useVModel(props, 'value', emits, {
+  passive: true,
+});
+
+const handleChange = (value: any) => {
+  mValue.value = value;
+};
+
+const getOptionByPath = (path: any[]) => {
+  let currentOptions = addressOption;
+  let targetOption = null;
+  for (const value of path) {
+    targetOption = currentOptions.find(opt => opt.value == value);
+    if (!targetOption) break;
+    currentOptions = targetOption.children || [];
+  }
+  return targetOption;
+};
+
+const loadFullPath = async (path: any[]) => {
+  let currentPath = [];
+  for (const value of path) {
+    currentPath.push(value);
+    const option = getOptionByPath(currentPath);
+    if (option && !option.children && props.loadData) {
+      try {
+        option.loading = true;
+        const children = await props.loadData(currentPath);
+        option.children = children;
+      } finally {
+        option.loading = false;
+      }
+    }
+  }
+};
+
+watch(
+  () => props.value,
+  async (newVal) => {
+    if (Array.isArray(newVal) && newVal.length > 0) {
+      await loadFullPath(newVal);
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(async () => {
+  if (props.value.length > 0) {
+    await loadFullPath(props.value);
+  }
+});
+</script>
+
+<template>
+  <Cascader
+    v-bind="$attrs"
+    v-model:value="mValue"
+    :options="addressOption"
+    :load-data="props.loadData ? loadFullPath : undefined"
+    :showSearch="true"
+    placeholder="请选择"
+    change-on-select
+    @change="handleChange"
+  />
+</template>

apps/web-antd/src/components/modal/ProductSkuPreview.vue

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button, Card, CardMeta, Image } from 'ant-design-vue';
+
+import { getSkuByProductIdApi } from '#/views/my-gen/sku/api';
+import ProductSkuDemo from '#/views/my-gen/sku/components/product-modal.vue';
+
+// 定义商品类型
+interface Sku {
+  id?: string;
+  product_id?: number;
+  name?: string;
+  price?: number;
+  inventory?: number;
+  cover?: string;
+}
+
+const props = defineProps({
+  // 可选的默认商品数据
+  defaultSku: {
+    type: Object as () => Sku,
+    default: () => ({}),
+  },
+});
+
+const showSkuModalApi = ref(null);
+
+const skus = ref<Sku>(props.defaultSku || {});
+const data = ref();
+const previewTitle = ref('Sku展示');
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    modalApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      showSkuModalApi.value = isOpen ? modalApi.getData()?.showSkuModal : null;
+      const { values } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        // skus.value = values.skus;
+        data.value = values;
+        getSkuByProductId();
+        previewTitle.value = `${values.title} Sku展示`;
+      }
+    }
+  },
+});
+
+const getSkuByProductId = () => {
+  getSkuByProductIdApi(data.value.id).then((res) => {
+    skus.value = res;
+  });
+};
+
+const [ProductSkuDemoModal, ProductSkuDemoModalApi] = useVbenModal({
+  connectedComponent: ProductSkuDemo,
+});
+
+const showSkuModal = (isUpdate = false, item: Sku) => {
+  ProductSkuDemoModalApi.setData({
+    // 表单值
+    values: isUpdate ? item : data.value,
+    update: isUpdate,
+    getSkuByProductId,
+  });
+  ProductSkuDemoModalApi.open();
+};
+</script>
+
+<template>
+  <Modal :title="previewTitle" class="w-[50%]">
+    <ProductSkuDemoModal />
+    <div>
+      <Button type="primary" class="w-full" @click="showSkuModal?.()">
+        新增Sku
+      </Button>
+    </div>
+    <div class="mt-6 grid grid-cols-3 gap-3">
+      <div v-for="(item, index) in skus" :key="index">
+        <Card>
+          <template #cover>
+            <Image alt="example" :src="item?.cover" />
+          </template>
+          <CardMeta :title="`${item?.name}`">
+            <template #description>
+              <div class="flex flex-col gap-2">
+                <div class="flex justify-between">
+                  <div class="text-sm font-bold text-red-600">
+                    ￥{{ item?.price }}
+                  </div>
+                  <div class="text-sm font-medium">
+                    库存：{{ item?.inventory }}
+                  </div>
+                </div>
+                <div class="flex justify-between">
+                  <div class="text-sm font-medium">
+                    {{ `${item?.name}【${item?.id}】` }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </CardMeta>
+          <template #actions>
+            <span
+              class="icon-[material-symbols--settings]"
+              @click="showSkuModal?.(true, item)"
+            ></span>
+            <span class="icon-[material-symbols--delete]"></span>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </Modal>
+</template>

apps/web-antd/src/views/my-gen/order-detail/config/table.ts

@@ -30,7 +30,7 @@ export const gridOptions: VxeGridProps<RowType> = {
     { field: 'quantity', title: '商品数量' },
     { field: 'price', title: '商品单价' },
     { field: 'subtotal', title: '小计金额' },
-    { field: 'snapshot', title: '商品快照' },
+    // { field: 'snapshot', title: '商品快照' },
 
     { field: 'created_at', title: '创建时间' },
     { field: 'updated_at', title: '编辑时间' },

apps/web-antd/src/views/my-gen/order/api/index.ts

@@ -47,3 +47,11 @@ export async function updateOrderApi(data: Record<string, any>) {
 export async function deleteOrderApi(data: Record<string, any>) {
   return requestClient.post<any>(`${prefix}delete`, data);
 }
+
+/**
+ * 生成订单
+ * @param data
+ */
+export async function generateOrderApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}generate-order`, data);
+}

apps/web-antd/src/views/my-gen/order/components/order-detail.vue

@@ -0,0 +1,221 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Card, CardMeta, Descriptions, Image, Tag } from 'ant-design-vue';
+
+import { getOrderInfoApi } from '#/views/my-gen/order/api';
+
+const showSkuModalApi = ref(null);
+
+const orderId = ref();
+const order = ref();
+const previewTitle = ref('订单详情');
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    modalApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      showSkuModalApi.value = isOpen ? modalApi.getData()?.showSkuModal : null;
+      const { values } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        // skus.value = values.skus;
+        orderId.value = values;
+        getOrderDetail();
+      }
+    }
+  },
+});
+
+const getOrderDetail = () => {
+  getOrderInfoApi(orderId.value).then((res) => {
+    order.value = res;
+    previewTitle.value = `${order.value.order_no} 商品展示`;
+  });
+};
+</script>
+
+<template>
+  <Modal :title="previewTitle" class="w-[50%]">
+    <div v-if="order" class="flex flex-col gap-4">
+      <h3 class="mt-4">订单信息</h3>
+      <Descriptions
+        :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
+        bordered
+        class="mt-4"
+      >
+        <Descriptions.Item label="订单号">
+          {{ order.order_no }}
+        </Descriptions.Item>
+        <Descriptions.Item label="总支付价格">
+          {{ order.total_amount }} 元
+        </Descriptions.Item>
+        <Descriptions.Item label="物品总价">
+          {{ order.total_amount }} 元
+        </Descriptions.Item>
+        <Descriptions.Item label="运费">
+          {{ order.trans_expenses || 0 }} 元
+        </Descriptions.Item>
+        <Descriptions.Item label="是否免邮">
+          {{ order.free_ship === 1 ? '是' : '否' }}
+        </Descriptions.Item>
+        <Descriptions.Item label="状态">
+          <Tag :color="order.status_color">{{ order.status_text }}</Tag>
+        </Descriptions.Item>
+        <Descriptions.Item label="用户备注">
+          {{ order.user_remarks || '无' }}
+        </Descriptions.Item>
+        <Descriptions.Item label="商家备注">
+          {{ order.mall_remarks || '无' }}
+        </Descriptions.Item>
+        <Descriptions.Item label="商家备注">
+          {{ order.exception_remarks || '无' }}
+        </Descriptions.Item>
+      </Descriptions>
+
+      <div class="mt-4">
+        <h3>收货人信息</h3>
+        <Descriptions
+          :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
+          bordered
+          class="mt-4"
+        >
+          <Descriptions.Item label="收货人">
+            <span>{{ order.recipient?.name }}</span>
+          </Descriptions.Item>
+          <Descriptions.Item label="联系电话">
+            <span>{{ order.recipient?.phone }}</span>
+          </Descriptions.Item>
+          <Descriptions.Item label="配送地址">
+            <span>{{ order.recipient?.complete_address }}</span>
+          </Descriptions.Item>
+        </Descriptions>
+      </div>
+      <div class="mt-4">
+        <h3>订单商品</h3>
+      </div>
+      <!-- 商品主信息 -->
+      <div class="mt-6 grid grid-cols-3 gap-3">
+        <div
+          v-for="(item, index) in order.detail"
+          :key="index"
+          class="mb-6 last:mb-0"
+        >
+          <Card
+            class="!rounded-lg shadow-sm transition-shadow duration-300 hover:shadow-md"
+          >
+            <template #cover>
+              <Image
+                alt="商品封面"
+                :src="item?.snapshot?.cover"
+                class="!h-48 object-cover"
+              />
+            </template>
+
+            <CardMeta
+              :title="`商品：${item?.snapshot.product.title}`"
+              class="p-4"
+            >
+              <template #description>
+                <!-- 价格信息区块 -->
+                <div class="flex flex-col gap-3">
+                  <div class="flex items-center justify-between">
+                    <div class="flex items-baseline gap-2">
+                      <span class="text-sm font-bold">
+                        规格：{{ item?.snapshot.name }}
+                      </span>
+                    </div>
+                  </div>
+                  <div class="flex items-center justify-between">
+                    <div class="flex items-baseline gap-2">
+                      <span class="text-sm font-bold text-red-500">
+                        小计：￥{{ Number(item?.subtotal) }}
+                      </span>
+                      <span class="text-sm text-gray-500">
+                        单价：￥{{ Number(item?.price) }}
+                      </span>
+                    </div>
+                  </div>
+                  <!--                  <div class="flex items-center justify-between">-->
+                  <!--                    <a-tag :color="item?.snapshot.status === 0 ? 'green' : 'red'">-->
+                  <!--                      {{ item.status === 0 ? '在售' : '已下架' }}-->
+                  <!--                    </a-tag>-->
+                  <!--                  </div>-->
+
+                  <!-- 商品基础信息 -->
+                  <div class="flex flex-col gap-1 text-gray-600">
+                    <!--                    <div class="flex justify-between text-sm">-->
+                    <!--                      <span>商品ID: {{ item?.id }}</span>-->
+                    <!--                      <span>分类ID: {{ item.product?.classification_id }}</span>-->
+                    <!--                    </div>-->
+                  </div>
+
+                  <!-- 商品描述 -->
+                  <div class="text-sm leading-relaxed text-gray-700">
+                    <p class="truncate" :title="item.product?.description">
+                      {{ item.product?.description }}
+                    </p>
+                  </div>
+
+                  <!-- 操作区域 -->
+                  <div class="mt-2 flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                      <a-tag color="blue">数量: {{ item?.quantity }}</a-tag>
+                      <a-tag v-if="item.product?.mall_id" color="purple">
+                        商家ID: {{ item.product.mall_id }}
+                      </a-tag>
+                    </div>
+                    <span class="text-xs text-gray-400"> </span>
+                  </div>
+                </div>
+              </template>
+            </CardMeta>
+          </Card>
+        </div>
+      </div>
+      <!--      <div>
+        <div class="mt-4">
+          <h3>物流信息</h3>
+          <Descriptions
+            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
+            bordered
+            class="mt-4"
+          >
+            <Descriptions.Item label="物流公司">
+              {{ expressDetail.express_company_name }}
+            </Descriptions.Item>
+            <Descriptions.Item label="运单号">
+              {{ expressDetail.express_no }}
+            </Descriptions.Item>
+            <Descriptions.Item label="最新状态">
+              {{ expressDetail.state_txt }}
+            </Descriptions.Item>
+          </Descriptions>
+        </div>
+        <div class="mt-4">
+          <h3>物流追踪</h3>
+          <Timeline class="mt-4">
+            <Timeline.Item
+              v-for="(detail, index) in expressDetail.detail"
+              :key="index"
+            >
+              <Tag :color="getColor(detail.status)">
+                {{ detail.status }}
+              </Tag>
+              <p>{{ detail.detail_at }}</p>
+              <p>{{ detail.detail }}</p>
+            </Timeline.Item>
+          </Timeline>
+        </div>
+      </div>-->
+    </div>
+  </Modal>
+</template>

apps/web-antd/src/views/my-gen/order/config/form.ts

@@ -44,7 +44,7 @@ export const modalFormProps: VbenFormProps = {
     {
       fieldName: 'total_amount',
       label: '订单总金额',
-      component: 'VbenInputNumber',
+      component: 'InputNumber',
       rules: 'required',
     },
   ],

apps/web-antd/src/views/my-gen/order/config/table.ts

@@ -25,7 +25,7 @@ export const gridOptions: VxeGridProps<RowType> = {
     { type: 'checkbox', width: 60 },
     { field: 'id', align: 'left', title: 'ID', width: 100 },
     // 生成的列表字段
-    { field: 'user_id', title: '用户ID' },
+    { field: 'user', title: '下单用户', slots: { default: 'user' } },
     { field: 'order_no', title: '订单编号' },
     { field: 'order_status', title: '订单状态' },
     { field: 'total_amount', title: '订单总金额' },

apps/web-antd/src/views/my-gen/order/index.vue

@@ -10,8 +10,9 @@ import { Button, Image, message } from 'ant-design-vue';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { TableAction } from '#/components/table-action';
 
-import { deleteOrderApi } from './api';
+import { deleteOrderApi, generateOrderApi } from './api';
 import FormModalDemo from './components/modal.vue';
+import OrderDetail from './components/order-detail.vue';
 import { formOptions } from './config/search';
 import { gridOptions } from './config/table';
 
@@ -34,6 +35,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridEvents,
 });
 
+const [OrderDetailModal, OrderDetailModalApi] = useVbenModal({
+  connectedComponent: OrderDetail,
+});
+
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: FormModalDemo,
 });
@@ -48,6 +53,16 @@ const showModal = (data = {}, isUpdate = false) => {
   formModalApi.open();
 };
 
+const showOrderDetailModal = (data = 0, isUpdate = false) => {
+  OrderDetailModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  OrderDetailModalApi.open();
+};
+
 const hasDelete = (row: any) => {
   let ids = [];
   if (row) {
@@ -60,11 +75,26 @@ const hasDelete = (row: any) => {
     gridApi.reload();
   });
 };
+
+const generateOrder = () => {
+  generateOrderApi({
+    products: [
+      {
+        id: 1,
+        sku_id: '商品1',
+        num: 1,
+      },
+    ],
+  }).then(() => {
+    message.success('生成订单成功!');
+  });
+};
 </script>
 
 <template>
   <Page auto-content-height title="订单管理管理">
     <FormModal />
+    <OrderDetailModal />
     <Grid>
       <template #toolbar-buttons>
         <TableAction
@@ -75,6 +105,12 @@ const hasDelete = (row: any) => {
               icon: 'ant-design:plus-outlined',
               onClick: showModal.bind(null),
             },
+            {
+              label: '生成订单',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              onClick: generateOrder.bind(null),
+            },
           ]"
           :drop-down-actions="[
             {
@@ -96,10 +132,39 @@ const hasDelete = (row: any) => {
       <template #avatar="{ row }">
         <Image :src="row.avatar" height="30" width="30" />
       </template>
+      <template #user="{ row }">
+        <div class="flex items-center space-x-3">
+          <div
+            class="h-10 w-10 flex-shrink-0 overflow-hidden rounded-full text-left"
+          >
+            <Image
+              :src="row.user.avatar"
+              :alt="row.user.nick_name"
+              class="h-full w-full object-cover"
+            />
+          </div>
+          <div>
+            <div class="text-sm font-medium text-gray-900 dark:text-white">
+              {{ row.user.nick_name }}
+            </div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">
+              ID: {{ row.user.id }}
+            </div>
+          </div>
+        </div>
+      </template>
       <template #toolbar-tools></template>
       <template #action="{ row }">
         <TableAction
           :actions="[
+            {
+              label: '查看',
+              type: 'link',
+              icon: 'marketeq:eye',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              onClick: showOrderDetailModal.bind(null, row.id),
+            },
             {
               label: '编辑',
               type: 'link',
@@ -108,6 +173,8 @@ const hasDelete = (row: any) => {
               // auth: ['admin', 'sys:role:detail'],
               onClick: showModal.bind(null, row, true),
             },
+          ]"
+          :drop-down-actions="[
             {
               label: '删除',
               type: 'link',
@@ -120,7 +187,6 @@ const hasDelete = (row: any) => {
               },
             },
           ]"
-          :drop-down-actions="[]"
         />
       </template>
     </Grid>

apps/web-antd/src/views/my-gen/product/config/table.ts

@@ -23,7 +23,7 @@ export const gridOptions: VxeGridProps<RowType> = {
   },
   columns: [
     { type: 'checkbox', width: 60 },
-    { field: 'id', align: 'left', title: 'ID', width: 50 },
+    // { field: 'id', align: 'left', title: 'ID', width: 50 },
     // 生成的列表字段
     {
       field: 'title',
@@ -38,7 +38,7 @@ export const gridOptions: VxeGridProps<RowType> = {
       slots: { default: 'user' },
       width: 150,
     },
-    // { field: 'introduction', title: '简介' },
+    { field: 'sku', title: 'SKU', slots: { default: 'sku' } },
     { field: 'images', title: '商品图册', slots: { default: 'images' } },
     // { field: 'description', title: '详细说明' },
     // { field: 'price', title: '默认价格' },

apps/web-antd/src/views/my-gen/product/index.vue

@@ -9,6 +9,7 @@ import { Button, Image, ImagePreviewGroup, message, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import ProductDetail from '#/components/modal/ProductPreview.vue';
+import ProductSkuDetail from '#/components/modal/ProductSkuPreview.vue';
 import { TableAction } from '#/components/table-action';
 import ProductSkuDemo from '#/views/my-gen/sku/components/product-modal.vue';
 
@@ -48,6 +49,10 @@ const [ProductDetailModal, ProductDetailModalApi] = useVbenModal({
   connectedComponent: ProductDetail,
 });
 
+const [ProductSkuDetailModal, ProductSkuDetailModalApi] = useVbenModal({
+  connectedComponent: ProductSkuDetail,
+});
+
 const showModal = (data = {}, isUpdate = false) => {
   formModalApi.setData({
     // 表单值
@@ -88,6 +93,15 @@ const showProductDetailModal = (row: any) => {
   });
   ProductDetailModalApi.open();
 };
+
+const openSkuModal = (row: any) => {
+  ProductSkuDetailModalApi.setData({
+    // 表单值
+    values: row,
+    showSkuModal,
+  });
+  ProductSkuDetailModalApi.open();
+};
 </script>
 
 <template>
@@ -95,6 +109,7 @@ const showProductDetailModal = (row: any) => {
     <FormModal />
     <ProductDetailModal />
     <ProductSkuDemoModal />
+    <ProductSkuDetailModal />
     <Grid>
       <template #toolbar-buttons>
         <TableAction
@@ -131,7 +146,7 @@ const showProductDetailModal = (row: any) => {
           <Image :src="row.cover" class="h-full w-full object-cover" />
         </div>
         <Button type="link" @click="showProductDetailModal(row.id)">
-          {{ row.title }}
+          {{ row.title }}【{{ row.id }}】
         </Button>
         <div>
           价格：<span class="font-bold text-red-500">￥{{ row.price }}</span>
@@ -180,6 +195,9 @@ const showProductDetailModal = (row: any) => {
           </div>
         </div>
       </template>
+      <template #sku="{ row }">
+        <Button type="link" @click="openSkuModal(row)"> 查看sku </Button>
+      </template>
       <template #classification="{ row }">
         <Tag color="#7166f0">{{ row.classification.name }}</Tag>
       </template>

apps/web-antd/src/views/my-gen/region/api/index.ts

@@ -0,0 +1,49 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'region/';
+/**
+ * 分页查询地区列表
+ * @param data
+ */
+export async function getRegionListApi(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+
+/**
+ * 获取地区下拉列表
+ */
+export async function getRegionOptionApi() {
+  return requestClient.get<any>(`${prefix}option`);
+}
+
+/**
+ * 获取地区详情
+ * @param id
+ */
+export async function getRegionInfoApi(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 新增地区
+ * @param data
+ */
+export async function createRegionApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑地区
+ * @param data
+ */
+export async function updateRegionApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除地区
+ * @param data
+ */
+export async function deleteRegionApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

apps/web-antd/src/views/my-gen/region/components/modal.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { createRegionApi, updateRegionApi } from '../api';
+import { modalFormProps } from '../config/form';
+
+defineOptions({
+  name: 'RegionDemo',
+});
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value ? updateRegionApi : createRegionApi;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        isUpdate.value = update;
+        formApi.setValues(values);
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}地区`" class="w-[30%]">
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/my-gen/region/config/form.ts

@@ -0,0 +1,40 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    // 生成的表单字段
+    {
+      fieldName: 'name',
+      label: '地区名称',
+      component: 'VbenInput',
+      rules: 'required',
+    },
+    {
+      fieldName: 'pid',
+      label: '父级ID',
+      component: 'InputNumber',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/my-gen/region/config/search.ts

@@ -0,0 +1,30 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+// import dayjs from 'dayjs';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    // 生成的搜索字段
+    {
+      fieldName: 'name',
+      label: '地区名称',
+      component: 'VbenInput',
+    },
+    {
+      fieldName: 'pid',
+      label: '父级ID',
+      component: 'InputNumber',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/my-gen/region/config/table.ts

@@ -0,0 +1,69 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getRegionListApi } from '../api';
+
+interface RowType {
+  id: string;
+  name: string;
+  logo: string;
+  introduce: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    // 生成的列表字段
+    { field: 'name', title: '地区名称' },
+    { field: 'pid', title: '父级ID' },
+
+    { field: 'created_at', title: '创建时间' },
+    { field: 'updated_at', title: '编辑时间' },
+    { type: 'html', title: '操作', slots: { default: 'action' } },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getRegionListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

apps/web-antd/src/views/my-gen/region/index.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { deleteRegionApi } from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const hasDelete = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deleteRegionApi({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="地区管理">
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              onClick: showModal.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px"> 批量操作 </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #avatar="{ row }">
+        <Image :src="row.avatar" height="30" width="30" />
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, row.id),
+              },
+            },
+          ]"
+          :drop-down-actions="[]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/my-gen/sku/api/index.ts

@@ -24,6 +24,16 @@ export async function getSkuInfoApi(id: number) {
   return requestClient.get<any>(`${prefix}detail`, { params: { id } });
 }
 
+/**
+ * 获取sku根据商品ID
+ * @param id
+ */
+export async function getSkuByProductIdApi(id: number) {
+  return requestClient.get<any>(`${prefix}get-sku-by-product-id`, {
+    params: { id },
+  });
+}
+
 /**
  * 新增sku管理
  * @param data

apps/web-antd/src/views/my-gen/sku/components/product-modal.vue

@@ -16,6 +16,7 @@ defineOptions({
 
 const isUpdate = ref(false);
 const gridApi = ref();
+const getSkuByProductIdApi = ref();
 
 const [Form, formApi] = useVbenForm(productModalFormProps);
 
@@ -34,7 +35,11 @@ const [Modal, modalApi] = useVbenModal({
         submitApi(values)
           .then(() => {
             message.success('保存成功');
+            if (getSkuByProductIdApi.value) {
+              getSkuByProductIdApi.value();
+            } else {
               gridApi.value?.reload();
+            }
             modalApi.close();
           })
           .finally(() => {
@@ -46,15 +51,22 @@ const [Modal, modalApi] = useVbenModal({
   },
   onOpenChange(isOpen: boolean) {
     gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    getSkuByProductIdApi.value = isOpen
+      ? modalApi.getData()?.getSkuByProductId
+      : null;
     if (isOpen) {
       const { values, update } = modalApi.getData<Record<string, any>>();
       if (values) {
         isUpdate.value = update;
+        if (update === true) {
+          formApi.setValues(values);
+        } else {
           formApi.setValues({
             product_id: values.id,
           });
         }
       }
+    }
   },
 });
 </script>

apps/web-antd/src/views/my-gen/user-receiving-address/config/form.ts

@@ -30,35 +30,71 @@ export const modalFormProps: VbenFormProps = {
       rules: 'required',
     },
     {
-      fieldName: 'province',
-      label: '省',
-      component: 'InputNumber',
+      fieldName: 'name',
+      label: '收件人姓名',
+      component: 'VbenInput',
       rules: 'required',
     },
     {
-      fieldName: 'city',
-      label: '市',
-      component: 'InputNumber',
+      fieldName: 'phone',
+      label: '收件人手机号',
+      component: 'VbenInput',
       rules: 'required',
     },
     {
-      fieldName: 'district',
-      label: '区',
-      component: 'InputNumber',
+      fieldName: 'total_address',
+      label: '省市区街道',
+      component: 'Cascader',
       rules: 'required',
     },
+    // {
+    //   fieldName: 'province',
+    //   label: '省',
+    //   component: 'InputNumber',
+    //   rules: 'required',
+    // },
+    // {
+    //   fieldName: 'city',
+    //   label: '市',
+    //   component: 'InputNumber',
+    //   rules: 'required',
+    // },
+    // {
+    //   fieldName: 'district',
+    //   label: '区',
+    //   component: 'InputNumber',
+    //   rules: 'required',
+    // },
+    {
+      fieldName: 'is_default',
+      label: '是否默认地址',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '是',
+            value: 1,
+          },
+          {
+            label: '否',
+            value: 0,
+          },
+        ],
+      },
+      defaultValue: 0,
+    },
     {
       fieldName: 'detailed_address',
       label: '详细地址',
       component: 'Textarea',
       rules: 'required',
     },
-    {
-      fieldName: 'complete_address',
-      label: '完整地址',
-      component: 'VbenInput',
-      rules: 'required',
-    },
+    // {
+    //   fieldName: 'complete_address',
+    //   label: '完整地址',
+    //   component: 'VbenInput',
+    //   rules: 'required',
+    // },
   ],
   showDefaultActions: false,
 };

apps/web-antd/src/views/my-gen/user-receiving-address/config/table.ts

@@ -25,10 +25,15 @@ export const gridOptions: VxeGridProps<RowType> = {
     { type: 'checkbox', width: 60 },
     { field: 'id', align: 'left', title: 'ID', width: 100 },
     // 生成的列表字段
-    { field: 'user_id', title: '用户' },
-    { field: 'province', title: '省' },
-    { field: 'city', title: '市' },
-    { field: 'district', title: '区' },
+    { field: 'user.nick_name', title: '用户' },
+    {
+      field: 'recipient',
+      title: '收件人信息',
+      slots: { default: 'recipient' },
+    },
+    { field: 'province_info.name', title: '省' },
+    { field: 'city_info.name', title: '市' },
+    { field: 'district_info.name', title: '区' },
     { field: 'detailed_address', title: '详细地址' },
     { field: 'complete_address', title: '完整地址' },
 

apps/web-antd/src/views/my-gen/user-receiving-address/index.vue

@@ -96,6 +96,13 @@ const hasDelete = (row: any) => {
       <template #avatar="{ row }">
         <Image :src="row.avatar" height="30" width="30" />
       </template>
+      <template #recipient="{ row }">
+        <div>
+          {{ row.name }}
+          <br />
+          {{ row.phone }}
+        </div>
+      </template>
       <template #toolbar-tools></template>
       <template #action="{ row }">
         <TableAction