场景管理的位置信息添加

src/views/system-config/scene-manage/CompanyDrawer.vue

@@ -74,6 +74,13 @@
             ></div>
           </div>
         </el-form-item>
+        <el-form-item label="坐标位置" prop="location">
+          <el-input
+            v-model="ruleForm.location"
+            style="width: 200px"
+            placeholder="经度:121.53 ；纬度:31.22"
+          />
+        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="ruleForm.remark" style="width: 200px" />
         </el-form-item>
@@ -128,7 +135,10 @@
       seniorScene?: string;
       addEnable?: ENABLED;
       selectItems?: SelectItemType[];
-      remark: string;
+      remark?: string;
+      location?: string;
+      longitude?: number; //经度
+      latitude?: number; //纬度
     };
   }>();
 
@@ -145,6 +155,8 @@
 
   //表格中的规则
   const ruleFormRef = ref<FormInstance>();
+  //匹配规则
+  const pattern = /经度\s*[:：]\s*([0-9.]+)\s*[;；]\s*纬度\s*[:：]\s*([0-9.]+)/;
 
   interface RuleForm {
     name: string; //名称
@@ -158,6 +170,9 @@
     selectItems?: SelectItemType[];
     addEnable?: ENABLED;
     remark?: string; //备注，可用于添加经纬度，非必要
+    location?: string; //坐标位置
+    longitude?: number; //经度
+    latitude?: number; //纬度
   }
 
   const ruleForm = reactive<RuleForm>({
@@ -172,6 +187,9 @@
     selectItems: [{ tag: '', template: '' }],
     addEnable: ENABLED.TRUE,
     remark: '',
+    location: '',
+    longitude: undefined, //经度
+    latitude: undefined, //纬度
   });
   const rules = reactive<FormRules>({
     name: [
@@ -203,6 +221,9 @@
       ruleForm.addEnable = data.addEnable;
       ruleForm.selectItems = data.selectItems;
       ruleForm.remark = data.remark;
+      if (data.longitude && data.latitude) {
+        ruleForm.location = `经度:${data.longitude} ；纬度:${data.latitude}`;
+      }
     },
     { immediate: true },
   );
@@ -261,6 +282,8 @@
             console.log('取消删除物件');
           });
       } else {
+        const matchResult = ruleForm.location?.match(pattern)!;
+        // 经度：43.22；纬度：34234
         const newComData = {
           name: ruleForm.name,
           code: ruleForm.code,
@@ -269,6 +292,8 @@
           parentId: 0,
           serial: 0,
           remark: ruleForm.remark,
+          longitude: Number(matchResult[1]),
+          latitude: Number(matchResult[2]),
         };
         //提交数据并重置关闭el-draw
         addCompany(newComData)
@@ -329,6 +354,8 @@
         return item.tag && item.template;
       });
 
+      const matchResult = ruleForm.location?.match(pattern)!;
+
       //新增的数据
       const editNewCom = {
         id: props.detail.id,
@@ -336,6 +363,8 @@
         code: ruleForm.code,
         status: Number(ruleForm.addEnable),
         remark: ruleForm.remark,
+        longitude: Number(matchResult[1]),
+        latitude: Number(matchResult[2]),
       };
       // 编辑上传
       editCompany(editNewCom)