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

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

@@ -119,16 +119,6 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入门店纬度',
       },
     },
-    // TODO @xingyu：缺少地图
-    {
-      component: 'Input',
-      fieldName: 'getGeo',
-      label: '获取经纬度',
-      formItemClass: 'col-span-2',
-      componentProps: {
-        placeholder: '点击获取经纬度',
-      },
-    },
   ];
 }
 
@@ -165,24 +155,6 @@ export function useBindFormSchema(): VbenFormSchema[] {
         placeholder: '请选择门店店员',
       },
     },
-    {
-      component: 'Select',
-      fieldName: 'verifyUsers',
-      label: '店员列表',
-      rules: 'required',
-      componentProps: {
-        options: [],
-        mode: 'tags',
-        placeholder: '店员列表',
-      },
-      dependencies: {
-        triggerFields: ['verifyUserIds'],
-        trigger(values, form) {
-          form.setFieldValue('verifyUsers', values.verifyUserIds);
-        },
-        disabled: true,
-      },
-    },
   ];
 }
 

apps/web-antd/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 { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import {
-  bindStoreStaffId,
+  bindDeliveryPickUpStore,
   getDeliveryPickUpStore,
 } from '#/api/mall/trade/delivery/pickUpStore';
 import { $t } from '#/locales';
@@ -41,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');
@@ -59,7 +59,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     // 加载数据
     const data =
-      modalApi.getData<MallDeliveryPickUpStoreApi.BindStaffRequest>();
+      modalApi.getData<MallDeliveryPickUpStoreApi.DeliveryPickUpBindReqVO>();
     if (!data || !data.id) {
       return;
     }
@@ -67,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();

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

@@ -5,10 +5,11 @@ import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
 import { useVbenForm } from '#/adapter/form';
+import { getTradeConfig } from '#/api/mall/trade/config';
 import {
   createDeliveryPickUpStore,
   getDeliveryPickUpStore,
@@ -26,6 +27,50 @@ const getTitle = computed(() => {
     : $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) {
+    message.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: {
@@ -70,6 +115,8 @@ const [Modal, modalApi] = useVbenModal({
     // 加载数据
     const data = modalApi.getData<MallDeliveryPickUpStoreApi.PickUpStore>();
     if (!data || !data.id) {
+      // 初始化地图
+      await initTencentLbsMap();
       return;
     }
     modalApi.lock();
@@ -83,6 +130,8 @@ const [Modal, modalApi] = useVbenModal({
       await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
+      // 初始化地图
+      await initTencentLbsMap();
     }
   },
 });
@@ -91,5 +140,22 @@ const [Modal, modalApi] = useVbenModal({
 <template>
   <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
+    <template #prepend-footer>
+      <Button @click="mapVisible = true"> 获取经纬度 </Button>
+    </template>
   </Modal>
+
+  <!-- 地图弹窗 -->
+  <a-modal
+    v-model:open="mapVisible"
+    title="获取经纬度"
+    :width="800"
+    :footer="null"
+  >
+    <iframe
+      v-if="mapVisible && tencentLbsUrl"
+      :src="tencentLbsUrl"
+      class="h-[600px] w-full border-0"
+    ></iframe>
+  </a-modal>
 </template>