feat(shop): 优化电子围栏编辑功能界面和交互

- 添加确认加载状态防止重复提交
- 设置弹窗最大高度和滚动条改善用户体验
- 将表单设置为只读状态时禁用输入
- 使用单选框替换类型输入框提升易用性
- 优化定位和区域字段提示文字
- 使用文本域替代输入框用于围栏范围输入
- 添加动态帮助文本和占位符指导用户输入
- 移除状态字段在列表中的显示
- 重构表单验证逻辑和数据处理流程
- 添加表单重置和填充方法
- 优化经纬度和围栏点数据的验证规则

src/views/shop/shopStoreFence/components/shopStoreFenceEdit.vue

@@ -5,8 +5,9 @@
     :visible="visible"
     :maskClosable="false"
     :maxable="maxable"
+    :confirm-loading="loading"
     :title="isUpdate ? '编辑电子围栏' : '添加电子围栏'"
-    :body-style="{ paddingBottom: '28px' }"
+    :body-style="{ paddingBottom: '28px', maxHeight: '70vh', overflow: 'auto' }"
     @update:visible="updateVisible"
     @ok="save"
   >
@@ -14,7 +15,8 @@
       ref="formRef"
       :model="form"
       :rules="rules"
-      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :disabled="loading"
+      :label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
       :wrapper-col="
         styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
       "
@@ -26,48 +28,43 @@
           v-model:value="form.name"
         />
       </a-form-item>
-      <a-form-item label="类型 0圆形 1方形" name="type">
+
-        <a-input
+      <a-row :gutter="16">
-          allow-clear
+        <a-col :xs="24" :sm="24">
-          placeholder="请输入类型 0圆形 1方形"
+          <a-form-item label="围栏类型" name="type">
-          v-model:value="form.type"
+            <a-radio-group v-model:value="form.type">
-        />
+              <a-radio :value="0">圆形</a-radio>
+              <a-radio :value="1">方形/多边形</a-radio>
+            </a-radio-group>
           </a-form-item>
-      <a-form-item label="定位" name="location">
+        </a-col>
+      </a-row>
+
+      <a-form-item label="定位描述" name="location">
         <a-input
           allow-clear
-          placeholder="请输入定位"
+          placeholder="如：xx商圈/xx门店附近（可选）"
           v-model:value="form.location"
         />
       </a-form-item>
-      <a-form-item label="经度" name="longitude">
+
+      <a-form-item label="所属区域" name="district">
         <a-input
           allow-clear
-          placeholder="请输入经度"
+          placeholder="如：广东省/广州市/天河区（可选）"
-          v-model:value="form.longitude"
-        />
-      </a-form-item>
-      <a-form-item label="纬度" name="latitude">
-        <a-input
-          allow-clear
-          placeholder="请输入纬度"
-          v-model:value="form.latitude"
-        />
-      </a-form-item>
-      <a-form-item label="区域" name="district">
-        <a-input
-          allow-clear
-          placeholder="请输入区域"
           v-model:value="form.district"
         />
       </a-form-item>
-      <a-form-item label="电子围栏轮廓" name="points">
+
-        <a-input
+      <a-form-item label="围栏范围" name="points" :extra="pointsHelp">
+        <a-textarea
+          :auto-size="{ minRows: 3, maxRows: 6 }"
           allow-clear
-          placeholder="请输入电子围栏轮廓"
+          :placeholder="pointsPlaceholder"
           v-model:value="form.points"
         />
       </a-form-item>
+
       <a-form-item label="排序" name="sortNumber">
         <a-input-number
           :min="0"
@@ -85,31 +82,23 @@
           v-model:value="form.comments"
         />
       </a-form-item>
-      <a-form-item label="状态" name="status">
+
-        <a-radio-group v-model:value="form.status">
-          <a-radio :value="0">显示</a-radio>
-          <a-radio :value="1">隐藏</a-radio>
-        </a-radio-group>
-      </a-form-item>
     </a-form>
   </ele-modal>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
+  import { computed, nextTick, reactive, ref, watch } from 'vue';
-  import { Form, message } from 'ant-design-vue';
+  import { message } from 'ant-design-vue';
-  import { assignObject, uuid } from 'ele-admin-pro';
+  import { assignObject } from 'ele-admin-pro';
   import { addShopStoreFence, updateShopStoreFence } from '@/api/shop/shopStoreFence';
   import { ShopStoreFence } from '@/api/shop/shopStoreFence/model';
   import { useThemeStore } from '@/store/modules/theme';
   import { storeToRefs } from 'pinia';
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
   import { FormInstance } from 'ant-design-vue/es/form';
-  import { FileRecord } from '@/api/system/file/model';
 
   // 是否是修改
   const isUpdate = ref(false);
-  const useForm = Form.useForm;
   // 是否开启响应式布局
   const themeStore = useThemeStore();
   const { styleResponsive } = storeToRefs(themeStore);
@@ -129,115 +118,152 @@
   // 提交状态
   const loading = ref(false);
   // 是否显示最大化切换按钮
-  const maxable = ref(true);
+  const maxable = true;
-  // 表格选中数据
+  // 表单实例
   const formRef = ref<FormInstance | null>(null);
-  const images = ref<ItemType[]>([]);
 
-  // 用户信息
+  const getDefaultForm = (): ShopStoreFence => ({
-  const form = reactive<ShopStoreFence>({
     id: undefined,
-    name: undefined,
+    name: '',
-    type: undefined,
+    type: 0,
-    location: undefined,
+    location: '',
-    longitude: undefined,
+    longitude: '',
-    latitude: undefined,
+    latitude: '',
-    district: undefined,
+    district: '',
-    points: undefined,
+    points: '',
-    sortNumber: undefined,
+    sortNumber: 100,
-    comments: undefined,
+    comments: '',
-    status: undefined,
+    status: 0,
     tenantId: undefined,
     createTime: undefined,
-    updateTime: undefined,
+    updateTime: undefined
-    shopStoreFenceId: undefined,
-    shopStoreFenceName: '',
-    status: 0,
-    comments: '',
-    sortNumber: 100
   });
 
+  const form = reactive<ShopStoreFence>(getDefaultForm());
+
   /* 更新visible */
   const updateVisible = (value: boolean) => {
+    // 保存中不允许关闭，避免重复提交/状态不一致
+    if (!value && loading.value) {
+      return;
+    }
     emit('update:visible', value);
   };
 
   // 表单验证规则
   const rules = reactive({
-    shopStoreFenceName: [
+    name: [
       {
         required: true,
         type: 'string',
         message: '请填写电子围栏名称',
         trigger: 'blur'
       }
+    ],
+    type: [
+      {
+        required: true,
+        type: 'number',
+        message: '请选择围栏类型',
+        trigger: 'change'
+      }
+    ],
+    longitude: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写经度',
+        trigger: 'blur'
+      }
+    ],
+    latitude: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写纬度',
+        trigger: 'blur'
+      }
+    ],
+    points: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写围栏范围',
+        trigger: 'blur'
+      }
     ]
   });
 
-  const chooseImage = (data: FileRecord) => {
+  const pointsPlaceholder = computed(() => {
-    images.value.push({
+    return form.type === 0
-      uid: data.id,
+      ? '圆形示例：lng,lat,radius(米) 例如：113.123456,23.123456,500'
-      url: data.path,
+      : '多边形示例：lng,lat;lng,lat;lng,lat 例如：113.1,23.1;113.2,23.1;113.2,23.2;113.1,23.2';
-      status: 'done'
   });
-    form.image = data.path;
+
+  const pointsHelp = computed(() => {
+    return form.type === 0
+      ? '按 “经度,纬度,半径(米)” 填写'
+      : '按 “经度,纬度;经度,纬度;...” 填写，建议首尾闭合';
+  });
+
+  const resetForm = async () => {
+    assignObject(form, getDefaultForm());
+    await nextTick();
+    formRef.value?.clearValidate?.();
   };
 
-  const onDeleteItem = (index: number) => {
+  const fillForm = async (data: ShopStoreFence) => {
-    images.value.splice(index, 1);
+    await resetForm();
-    form.image = '';
+    assignObject(form, data);
+    await nextTick();
+    formRef.value?.clearValidate?.();
   };
 
-  const { resetFields } = useForm(form, rules);
-
   /* 保存编辑 */
-  const save = () => {
+  const save = async () => {
-    if (!formRef.value) {
+    if (!formRef.value || loading.value) {
       return;
     }
-    formRef.value
+    try {
-      .validate()
+      await formRef.value.validate();
-      .then(() => {
       loading.value = true;
-        const formData = {
+      const formData: ShopStoreFence = {
-          ...form
+        ...form,
+        name: form.name?.trim(),
+        location: form.location?.trim(),
+        longitude: form.longitude?.trim(),
+        latitude: form.latitude?.trim(),
+        district: form.district?.trim(),
+        points: form.points?.trim(),
+        comments: form.comments?.trim()
       };
       const saveOrUpdate = isUpdate.value ? updateShopStoreFence : addShopStoreFence;
-        saveOrUpdate(formData)
+      const msg = await saveOrUpdate(formData);
-          .then((msg) => {
       loading.value = false;
       message.success(msg);
       updateVisible(false);
       emit('done');
-          })
+    } catch (e: any) {
-          .catch((e) => {
       loading.value = false;
+      if (e?.message) {
         message.error(e.message);
-          });
+      }
-      })
+    }
-      .catch(() => {});
   };
 
   watch(
     () => props.visible,
     (visible) => {
       if (visible) {
-        images.value = [];
         if (props.data) {
-          assignObject(form, props.data);
+          void fillForm(props.data);
-          if(props.data.image){
-            images.value.push({
-              uid: uuid(),
-              url: props.data.image,
-              status: 'done'
-            })
-          }
           isUpdate.value = true;
         } else {
+          void resetForm();
           isUpdate.value = false;
         }
       } else {
-        resetFields();
+        void resetForm();
       }
     },
     { immediate: true }

src/views/shop/shopStoreFence/index.vue

@@ -120,12 +120,12 @@
     //   key: 'comments',
     //   ellipsis: true
     // },
-    {
+    // {
-      title: '状态',
+    //   title: '状态',
-      dataIndex: 'status',
+    //   dataIndex: 'status',
-      key: 'status',
+    //   key: 'status',
-      width: 120
+    //   width: 120
-    },
+    // },
     {
       title: '创建时间',
       dataIndex: 'createTime',