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

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: () => {
+        placeholder: ['开始时间', '结束时间'],
-          return {
-            disabledHours: () => {
-              return [0, 1, 2, 3, 4, 5, 6, 7];
-            },
-          };
-        },
       },
     },
-    {
-      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' },
     },

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({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    handleRefresh();
-    });
-    onRefresh();
   } 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>

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>

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.edit', ['门店'])
-    : $t('ui.actionTitle.create', ['自提订单']);
+    : $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>

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

@@ -23,7 +23,7 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       component: 'ImageUpload',
       fieldName: 'logo',
-      label: '门店logo',
+      label: '门店 logo',
       rules: 'required',
     },
     {
@@ -201,7 +201,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       field: 'logo',
-      title: '门店logo',
+      title: '门店 logo',
       cellRender: {
         name: 'CellImage',
       },