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

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

@@ -86,7 +86,6 @@ export function useFormSchema(): VbenFormSchema[] {
       rules: 'required',
       componentProps: {
         format: 'HH:mm',
-        minuteStep: 15,
         placeholder: ['开始时间', '结束时间'],
       },
     },

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

@@ -3,7 +3,6 @@ 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';
 

apps/web-antd/src/views/system/tenant/data.ts

@@ -9,6 +9,7 @@ import { z } from '#/adapter/form';
 import { getTenantPackageList } from '#/api/system/tenant-package';
 import { getRangePickerDefaultProps } from '#/utils';
 
+// TODO @xingyu：这个不用 ref 么？
 let tenantPackageList: SystemTenantPackageApi.TenantPackage[] = [];
 
 async function getTenantPackageData() {

apps/web-ele/src/api/mall/trade/delivery/pickUpStore/index.ts

@@ -29,19 +29,18 @@ export namespace MallDeliveryPickUpStoreApi {
     longitude: number;
     /** 状态 */
     status: number;
+    /** 营业时间 用于fieldMappingTime */
+    rangeTime: any[];
     /** 绑定用户编号组数 */
-    verifyUserIds: number[];
+    verifyUserIds?: number[];
+    verifyUsers?: any[];
   }
 
   /** 绑定自提店员请求 */
-  export interface BindStaffRequest {
+  export interface DeliveryPickUpBindReqVO {
     id?: number;
-    /** 门店名称 */
-    name: string;
-    /** 门店编号 */
-    storeId: number;
     /** 用户编号列表 */
-    userIds: number[];
+    verifyUserIds: number[];
   }
 }
 
@@ -87,8 +86,8 @@ export function deleteDeliveryPickUpStore(id: number) {
 }
 
 /** 绑定自提店员 */
-export function bindStoreStaffId(
+export function bindDeliveryPickUpStore(
-  data: MallDeliveryPickUpStoreApi.BindStaffRequest,
+  data: MallDeliveryPickUpStoreApi.DeliveryPickUpBindReqVO,
 ) {
   return requestClient.post('/trade/delivery/pick-up-store/bind', data);
 }

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

@@ -20,76 +20,76 @@ 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(),
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
+        placeholder: '请选择省市区',
       },
     },
     {
       component: 'Input',
       fieldName: 'detailAddress',
-      label: '详细地址',
+      label: '门店详细地址',
-      rules: 'required',
-    },
-    // TODO @霖：时间类型不对
-    {
-      component: 'TimePicker',
-      fieldName: 'openingTime',
-      label: '营业开始时间',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入门店详细地址',
+      },
     },
     {
       component: 'TimePicker',
-      fieldName: 'closingTime',
+      fieldName: 'rangeTime',
-      label: '营业结束时间',
+      label: '营业时间',
       rules: 'required',
-    },
+      componentProps: {
-    {
+        isRange: true,
-      component: 'Input',
+        format: 'HH:mm',
-      fieldName: 'longitude',
+      },
-      label: '经度',
-      rules: 'required',
-    },
-    {
-      component: 'Input',
-      fieldName: 'latitude',
-      label: '纬度',
-      rules: 'required',
-    },
-    // TODO @霖：缺少地图
-    {
-      component: 'Input',
-      fieldName: 'getGeo',
-      label: '获取经纬度',
     },
     {
       fieldName: 'status',
@@ -102,6 +102,24 @@ 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: '请输入门店纬度',
+      },
+    },
   ];
 }
 
@@ -134,25 +152,9 @@ export function useBindFormSchema(): VbenFormSchema[] {
         api: () => getSimpleUserList(),
         labelField: 'nickname',
         valueField: 'id',
-        mode: 'tags',
+        multiple: true,
         clearable: true,
-      },
+        placeholder: '请选择门店店员',
-    },
-    {
-      component: 'Select',
-      fieldName: 'verifyUsers',
-      label: '店员列表',
-      rules: 'required',
-      componentProps: {
-        options: [],
-        mode: 'tags',
-      },
-      dependencies: {
-        triggerFields: ['verifyUserIds'],
-        trigger(values, form) {
-          form.setFieldValue('verifyUsers', values.verifyUserIds);
-        },
-        disabled: true,
       },
     },
   ];
@@ -165,11 +167,19 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'phone',
       label: '门店手机',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入门店手机',
+        clearable: true,
+      },
     },
     {
       fieldName: 'name',
       label: '门店名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入门店名称',
+        clearable: true,
+      },
     },
     {
       fieldName: 'status',
@@ -178,6 +188,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         clearable: true,
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择门店状态',
       },
     },
     {
@@ -198,10 +209,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
+      minWidth: 80,
     },
     {
       field: 'logo',
       title: '门店 logo',
+      minWidth: 100,
       cellRender: {
         name: 'CellImage',
       },
@@ -209,18 +222,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}`;
       },
@@ -228,6 +245,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'status',
       title: '开启状态',
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -236,11 +254,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-ele/src/views/mall/trade/delivery/pickUpStore/index.vue

@@ -28,7 +28,7 @@ const [BindFormModal, bindFormModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -55,7 +55,7 @@ async function handleDelete(row: MallDeliveryPickUpStoreApi.PickUpStore) {
   try {
     await deleteDeliveryPickUpStore(row.id as number);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -82,6 +82,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -93,7 +94,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <BindFormModal />
     <Grid table-title="门店列表">
       <template #toolbar-tools>
@@ -114,6 +115,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               label: $t('common.edit'),
+              type: 'primary',
               link: true,
               icon: ACTION_ICON.EDIT,
               auth: ['trade:delivery:pick-up-store:update'],
@@ -121,6 +123,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             },
             {
               label: '绑定店员',
+              type: 'primary',
               link: true,
               icon: ACTION_ICON.ADD,
               auth: ['trade:delivery:pick-up-store:update'],
@@ -128,8 +131,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
             },
             {
               label: $t('common.delete'),
-              link: true,
               type: 'danger',
+              link: true,
               icon: ACTION_ICON.DELETE,
               auth: ['trade:delivery:pick-up-store:delete'],
               popConfirm: {

apps/web-ele/src/views/mall/trade/delivery/pickUpStore/modules/bind-form.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
 
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
@@ -9,7 +9,7 @@ import { ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
 import {
-  bindStoreStaffId,
+  bindDeliveryPickUpStore,
   getDeliveryPickUpStore,
 } from '#/api/mall/trade/delivery/pickUpStore';
 import { $t } from '#/locales';
@@ -18,12 +18,6 @@ import { useBindFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<MallDeliveryPickUpStoreApi.PickUpStore>();
-// TODO @霖：店员是多选；
-const getTitle = computed(() => {
-  return formData.value?.id
-    ? $t('ui.actionTitle.edit', ['绑定店员'])
-    : $t('ui.actionTitle.create', ['绑定店员']);
-});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -47,9 +41,9 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data =
-      (await formApi.getValues()) as MallDeliveryPickUpStoreApi.BindStaffRequest;
+      (await formApi.getValues()) as MallDeliveryPickUpStoreApi.DeliveryPickUpBindReqVO;
     try {
-      await bindStoreStaffId(data);
+      await bindDeliveryPickUpStore(data);
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -65,7 +59,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     // 加载数据
     const data =
-      modalApi.getData<MallDeliveryPickUpStoreApi.BindStaffRequest>();
+      modalApi.getData<MallDeliveryPickUpStoreApi.DeliveryPickUpBindReqVO>();
     if (!data || !data.id) {
       return;
     }
@@ -73,6 +67,9 @@ const [Modal, modalApi] = useVbenModal({
     try {
       formData.value = await getDeliveryPickUpStore(data.id);
       // 设置到 values
+      formData.value.verifyUserIds = formData.value.verifyUsers?.map(
+        (item: any) => item.id,
+      );
       await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
@@ -82,7 +79,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-ele/src/views/mall/trade/delivery/pickUpStore/modules/form.vue

@@ -5,9 +5,11 @@ import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { ElMessage } from 'element-plus';
+import dayjs from 'dayjs';
+import { ElButton, ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
+import { getTradeConfig } from '#/api/mall/trade/config';
 import {
   createDeliveryPickUpStore,
   getDeliveryPickUpStore,
@@ -21,18 +23,63 @@ 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 mapVisible = ref(false); // 是否显示地图弹窗
+const tencentLbsUrl = ref(''); // 腾讯位置服务 url
+
+/** 获取经纬度相关方法 */
+function selectAddress(loc: any) {
+  if (loc.latlng?.lat) {
+    formApi.setFieldValue('latitude', loc.latlng.lat);
+  }
+  if (loc.latlng?.lng) {
+    formApi.setFieldValue('longitude', loc.latlng.lng);
+  }
+  mapVisible.value = false;
+}
+
+/** 初始化腾讯地图 */
+async function initTencentLbsMap() {
+  // 从配置中获取腾讯地图的 key
+  const data = await getTradeConfig();
+  const key = data.tencentLbsKey;
+  if (!key) {
+    ElMessage.warning('请先配置腾讯位置服务的 key');
+    return;
+  }
+
+  // 设置 url
+  if (!window) {
+    return;
+  }
+  (window as any).selectAddress = selectAddress;
+  window.addEventListener(
+    'message',
+    (event) => {
+      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
+      const loc = event.data;
+      if (loc && loc.module === 'locationPicker') {
+        // 防止其他应用也会向该页面 post 信息，需判断 module 是否为 'locationPicker'
+        (window.parent as any).selectAddress(loc);
+      }
+    },
+    false,
+  );
+  tencentLbsUrl.value = `https://apis.map.qq.com/tools/locpicker?type=1&key=${key}&referer=myapp`;
+}
+
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     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,
@@ -68,22 +115,47 @@ const [Modal, modalApi] = useVbenModal({
     // 加载数据
     const data = modalApi.getData<MallDeliveryPickUpStoreApi.PickUpStore>();
     if (!data || !data.id) {
+      // 初始化地图
+      await initTencentLbsMap();
       return;
     }
     modalApi.lock();
     try {
       formData.value = await getDeliveryPickUpStore(data.id);
+      formData.value.rangeTime = [
+        dayjs(formData.value.openingTime, 'HH:mm'),
+        dayjs(formData.value.closingTime, 'HH:mm'),
+      ];
       // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
+      // 初始化地图
+      await initTencentLbsMap();
     }
   },
 });
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
+    <template #prepend-footer>
+      <ElButton @click="mapVisible = true"> 获取经纬度 </ElButton>
+    </template>
   </Modal>
+
+  <!-- 地图弹窗 -->
+  <el-dialog
+    v-model="mapVisible"
+    title="获取经纬度"
+    :width="800"
+    :footer="null"
+  >
+    <iframe
+      v-if="mapVisible && tencentLbsUrl"
+      :src="tencentLbsUrl"
+      class="h-[600px] w-full border-0"
+    ></iframe>
+  </el-dialog>
 </template>

apps/web-ele/src/views/system/tenant/data.ts

@@ -9,6 +9,7 @@ import { z } from '#/adapter/form';
 import { getTenantPackageList } from '#/api/system/tenant-package';
 import { getRangePickerDefaultProps } from '#/utils';
 
+// TODO @xingyu：这个不用 ref 么？
 let tenantPackageList: SystemTenantPackageApi.TenantPackage[] = [];
 
 async function getTenantPackageData() {