表单逻辑完善

src/assets/styles/element-ui.scss

@@ -95,5 +95,5 @@
   color: var(--el-color-primary) !important;
 }
 .el-form-item--default{
-  margin-bottom: 5px;
+  margin-bottom: 10px;
 }

src/views/system/base/massifForm.vue

@@ -8,7 +8,7 @@ import {isArray} from "@/utils/validate.js";
 import {ElMessage} from "element-plus";
 import {areaConversion} from "@/utils/ruoyi.js";
 import * as turf from "@turf/turf";
-
+let { proxy } = getCurrentInstance();
 const uploadJsonData = ref([])
 const props = defineProps({})
 const settingsStore = useSettingsStore()
@@ -108,20 +108,39 @@ const uploadJson = (file) => {
     }
   }
 }
+const formRef = ref(null)
 const saveMassif = () => {
+  proxy.$refs["formRef"].validate(valid => {
+    if (valid){
+      let newFormData = deepClone(formData.value)
+      for (let item of newFormData.coordinateList) {
+        if (!item.longitude || !item.latitude){
+          ElMessage.error('请确认坐标是否完整')
+          return
+        }
+      }
+      if (formData.value.coordinateType === 2){
+        newFormData.coordinateList = uploadJsonData.value
+      }
       emit('beforeSubmit', formData.value)
       loading.value = true
       setTimeout(() => {
         loading.value = false
-    emit('submitSuccess')
+        emit('submitSuccess', formData.value)
         showDrawer.value = false
       }, 2000)
     }
+  })
+
+}
 defineExpose({
   toAdd,
   toUpdate,
   toView
 })
+const rules = ref({
+  massifName: [{ required: true, message: "地块名称不能为空", trigger: "blur" }],
+})
 </script>
 
 <template>
@@ -133,15 +152,15 @@ defineExpose({
         <div v-if="formStatus === 3">地块详情</div>
       </div>
       <div class="form">
-        <el-form v-model="formData" :label-position="formStatus===3?'left':'top'">
+        <el-form :model="formData" :label-position="formStatus===3?'left':'top'" :rules="rules" ref="formRef">
           <el-row :gutter="20">
             <el-col :span="24">
               <title-divider title="基本信息"/>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="地块名称" prop="name">
+              <el-form-item label="地块名称" prop="massifName">
-                <el-input placeholder="请输入地块名称" v-if="formStatus!==3"></el-input>
+                <el-input placeholder="请输入地块名称" v-if="formStatus!==3" v-model="formData.massifName"></el-input>
-                <div v-else>{{formData.name}}</div>
+                <div v-else>{{ formData.massifName }}</div>
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -152,7 +171,9 @@ defineExpose({
               >
                 <el-form-item label="地块面积" prop="name">
                   <el-input v-model="formData.area" v-if="formStatus!==3">
-                  <template #append><el-button @click="calculateArea">亩</el-button></template>
+                    <template #append>
+                      <el-button @click="calculateArea">亩</el-button>
+                    </template>
                   </el-input>
                   <div v-if="formStatus===3">{{ formData.area }}亩</div>
                 </el-form-item>
@@ -221,7 +242,8 @@ defineExpose({
                 </el-col>
               </el-row>
             </el-col>
-            <el-col v-if="formData.coordinateType === 1 &&  formStatus!==3" :span="24" v-for="(item,index) in formData.coordinateList"
+            <el-col v-if="formData.coordinateType === 1 &&  formStatus!==3" :span="24"
+                    v-for="(item,index) in formData.coordinateList"
                     :key="index" style="margin-top: 10px">
               <el-row :gutter="10">
                 <el-col :span="11">

src/views/system/base/massifMap.vue

@@ -552,6 +552,12 @@ const toUpdateMassif = (row) => {
 const toViewMassif = (row) => {
   massifFormRef.value.toView(row)
 }
+const submitSuccess = (form) => {
+  polygonList.push({
+    title:form.massifName,
+    path:form.coordinateList.map(item => [item.longitude, item.latitude])
+  })
+}
 </script>
 
 <template>
@@ -748,7 +754,7 @@ const toViewMassif = (row) => {
       </div>
     </el-amap>
     <!--地块表单-->
-    <massif-form ref="massifFormRef"/>
+    <massif-form ref="massifFormRef" @submit-success="submitSuccess"/>
   </div>
 </template>