feat：【mall 商城】门店管理的迁移（antd 50%）

2025-10-12 20:55:28 +08:00
parent 8c6d1d68d1
commit 1a9037f6ab
5 changed files with 93 additions and 53 deletions
--- a/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/data.ts
+++ b/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/data.ts
@@ -20,43 +20,64 @@ export function useFormSchema(): VbenFormSchema[] {
        show: () => false,
      },
    },
-    {
-      component: 'ImageUpload',
-      fieldName: 'logo',
-      label: '门店logo',
-      rules: 'required',
-    },
    {
      component: 'Input',
      fieldName: 'name',
      label: '门店名称',
      rules: 'required',
+      componentProps: {
+        placeholder: '请输入门店名称',
+      },
    },
    {
      component: 'Input',
      fieldName: 'phone',
      label: '门店手机',
      rules: 'mobileRequired',
+      componentProps: {
+        placeholder: '请输入门店手机',
+      },
+    },
+    {
+      component: 'ImageUpload',
+      fieldName: 'logo',
+      label: '门店 logo',
+      rules: 'required',
+      formItemClass: 'col-span-2',
+      componentProps: {
+        placeholder: '请上传门店 logo',
+      },
+      help: '推荐 180x180 图片分辨率',
    },
    {
      component: 'Textarea',
      fieldName: 'introduction',
      label: '门店简介',
+      formItemClass: 'col-span-2',
+      componentProps: {
+        placeholder: '请输入门店简介',
+        rows: 4,
+      },
    },
    {
      fieldName: 'areaId',
-      label: '地址',
+      label: '门店所在地区',
      component: 'ApiTreeSelect',
+      rules: 'required',
      componentProps: {
        api: () => getAreaTree(),
        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择省市区',
      },
    },
    {
      component: 'Input',
      fieldName: 'detailAddress',
-      label: '详细地址',
+      label: '门店详细地址',
      rules: 'required',
+      componentProps: {
+        placeholder: '请输入门店详细地址',
+      },
    },
    {
      component: 'TimeRangePicker',
@@ -66,33 +87,9 @@ export function useFormSchema(): VbenFormSchema[] {
      componentProps: {
        format: 'HH:mm',
        minuteStep: 15,
-        disabledTime: () => {
-          return {
-            disabledHours: () => {
-              return [0, 1, 2, 3, 4, 5, 6, 7];
-            },
-          };
-        },
+        placeholder: ['开始时间', '结束时间'],
      },
    },
-    {
-      component: 'Input',
-      fieldName: 'longitude',
-      label: '经度',
-      rules: 'required',
-    },
-    {
-      component: 'Input',
-      fieldName: 'latitude',
-      label: '纬度',
-      rules: 'required',
-    },
-    // TODO @xingyu：缺少地图
-    {
-      component: 'Input',
-      fieldName: 'getGeo',
-      label: '获取经纬度',
-    },
    {
      fieldName: 'status',
      label: '门店状态',
@@ -104,6 +101,34 @@ export function useFormSchema(): VbenFormSchema[] {
      },
      rules: z.number().default(CommonStatusEnum.ENABLE),
    },
+    {
+      component: 'Input',
+      fieldName: 'longitude',
+      label: '经度',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入门店经度',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'latitude',
+      label: '纬度',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入门店纬度',
+      },
+    },
+    // TODO @xingyu：缺少地图
+    {
+      component: 'Input',
+      fieldName: 'getGeo',
+      label: '获取经纬度',
+      formItemClass: 'col-span-2',
+      componentProps: {
+        placeholder: '点击获取经纬度',
+      },
+    },
  ];
 }

@@ -137,6 +162,7 @@ export function useBindFormSchema(): VbenFormSchema[] {
        fieldNames: { label: 'nickname', value: 'id' },
        mode: 'tags',
        allowClear: true,
+        placeholder: '请选择门店店员',
      },
    },
    {
@@ -147,6 +173,7 @@ export function useBindFormSchema(): VbenFormSchema[] {
      componentProps: {
        options: [],
        mode: 'tags',
+        placeholder: '店员列表',
      },
      dependencies: {
        triggerFields: ['verifyUserIds'],
@@ -166,11 +193,19 @@ export function useGridFormSchema(): VbenFormSchema[] {
      fieldName: 'phone',
      label: '门店手机',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入门店手机',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'name',
      label: '门店名称',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入门店名称',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'status',
@@ -179,6 +214,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      componentProps: {
        allowClear: true,
        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择门店状态',
      },
    },
    {
@@ -188,6 +224,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      componentProps: {
        ...getRangePickerDefaultProps(),
        allowClear: true,
+        placeholder: ['开始时间', '结束时间'],
      },
    },
  ];
@@ -199,10 +236,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'id',
      title: '编号',
+      minWidth: 80,
    },
    {
      field: 'logo',
-      title: '门店logo',
+      title: '门店 logo',
+      minWidth: 100,
      cellRender: {
        name: 'CellImage',
      },
@@ -210,18 +249,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'name',
      title: '门店名称',
+      minWidth: 150,
    },
    {
      field: 'phone',
      title: '门店手机',
+      minWidth: 120,
    },
    {
      field: 'detailAddress',
      title: '地址',
+      minWidth: 200,
    },
    {
      field: 'openingTime',
      title: '营业时间',
+      minWidth: 160,
      formatter: ({ row }) => {
        return `${row.openingTime} ~ ${row.closingTime}`;
      },
@@ -229,6 +272,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'status',
      title: '开启状态',
+      minWidth: 100,
      cellRender: {
        name: 'CellDict',
        props: { type: DICT_TYPE.COMMON_STATUS },
@@ -237,11 +281,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'createTime',
      title: '创建时间',
+      minWidth: 160,
      formatter: 'formatDateTime',
    },
    {
      title: '操作',
-      width: 200,
+      width: 220,
      fixed: 'right',
      slots: { default: 'actions' },
    },
--- a/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/index.vue
+++ b/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/index.vue
@@ -3,6 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';

 import { Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';

 import { message } from 'ant-design-vue';

@@ -28,7 +29,7 @@ const [BindFormModal, bindFormModalApi] = useVbenModal({
 });

 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
  gridApi.query();
 }

@@ -55,10 +56,8 @@ async function handleDelete(row: MallDeliveryPickUpStoreApi.PickUpStore) {
  });
  try {
    await deleteDeliveryPickUpStore(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
-    onRefresh();
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
  } finally {
    hideLoading();
  }
@@ -85,6 +84,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
@@ -96,7 +96,7 @@ const [Grid, gridApi] = useVbenVxeGrid({

 <template>
  <Page auto-content-height>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
    <BindFormModal />
    <Grid table-title="门店列表">
      <template #toolbar-tools>
--- a/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/bind-form.vue
+++ b/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/bind-form.vue
@@ -18,11 +18,6 @@ import { useBindFormSchema } from '../data';

 const emit = defineEmits(['success']);
 const formData = ref<MallDeliveryPickUpStoreApi.PickUpStore>();
-const getTitle = computed(() => {
-  return formData.value?.id
-    ? $t('ui.actionTitle.edit', ['绑定店员'])
-    : $t('ui.actionTitle.create', ['绑定店员']);
-});

 const [Form, formApi] = useVbenForm({
  commonConfig: {
@@ -81,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>

 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal title="绑定店员" class="w-2/5">
    <Form class="mx-4" />
  </Modal>
 </template>
--- a/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue
+++ b/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue
@@ -22,8 +22,8 @@ const emit = defineEmits(['success']);
 const formData = ref<MallDeliveryPickUpStoreApi.PickUpStore>();
 const getTitle = computed(() => {
  return formData.value?.id
-    ? $t('ui.actionTitle.edit', ['自提订单'])
-    : $t('ui.actionTitle.create', ['自提订单']);
+    ? $t('ui.actionTitle.edit', ['门店'])
+    : $t('ui.actionTitle.create', ['门店']);
 });

 const [Form, formApi] = useVbenForm({
@@ -31,10 +31,10 @@ const [Form, formApi] = useVbenForm({
    componentProps: {
      class: 'w-full',
    },
-    formItemClass: 'col-span-2',
    labelWidth: 120,
  },
  fieldMappingTime: [['rangeTime', ['openingTime', 'closingTime'], 'HH:mm']],
+  wrapperClass: 'grid-cols-2',
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
@@ -89,7 +89,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>

 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
    <Form class="mx-4" />
  </Modal>
 </template>