From 703bd7723b8ad832c721241f901f0cb085340921 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=BE=E8=82=83?= <15833576927@163.com>
Date: Mon, 20 May 2024 17:42:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=8D=95=E9=80=BB=E8=BE=91=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/element-ui.scss    |  2 +-
 src/views/system/base/massifForm.vue | 64 +++++++++++++++++++---------
 src/views/system/base/massifMap.vue  |  8 +++-
 3 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index 2aaea96..7a10c2d 100644
--- a/src/assets/styles/element-ui.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/views/system/base/massifForm.vue b/src/views/system/base/massifForm.vue
index b5a1dfa..2fb9ee6 100644
--- a/src/views/system/base/massifForm.vue
+++ b/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()
@@ -26,7 +26,7 @@ const selectOptions = reactive({
     {label: '其他', value: 9},
   ]
 })
-let emit = defineEmits(['beforeSubmit','submitSuccess']);
+let emit = defineEmits(['beforeSubmit', 'submitSuccess']);
 const loading = ref(false)
 // 显示表单抽屉
 const showDrawer = ref(false)
@@ -68,7 +68,7 @@ const calculateArea = () => {
   if (formData.value.coordinateType === 1) {
     value = formData.value.coordinateList || [];
     for (let item of value) {
-      if (!item.longitude || !item.latitude){
+      if (!item.longitude || !item.latitude) {
         ElMessage.error('请确认坐标是否完整')
         return
       }
@@ -108,20 +108,39 @@ const uploadJson = (file) => {
     }
   }
 }
+const formRef = ref(null)
 const saveMassif = () => {
-    emit('beforeSubmit', formData.value)
-  loading.value = true
-  setTimeout(() => {
-    loading.value = false
-    emit('submitSuccess')
-    showDrawer.value = false
-  },2000)
+  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', 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-input placeholder="请输入地块名称" v-if="formStatus!==3"></el-input>
-                <div v-else>{{formData.name}}</div>
+              <el-form-item label="地块名称" prop="massifName">
+                <el-input placeholder="请输入地块名称" v-if="formStatus!==3" v-model="formData.massifName"></el-input>
+                <div v-else>{{ formData.massifName }}</div>
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -150,12 +169,14 @@ defineExpose({
                   placement="top"
                   :disabled="formStatus===3"
               >
-              <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>
-                </el-input>
-                <div v-if="formStatus===3">{{formData.area}}亩</div>
-              </el-form-item>
+                <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>
+                  </el-input>
+                  <div v-if="formStatus===3">{{ formData.area }}亩</div>
+                </el-form-item>
               </el-tooltip>
             </el-col>
             <el-col :span="12">
@@ -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">
diff --git a/src/views/system/base/massifMap.vue b/src/views/system/base/massifMap.vue
index 6185d98..f798bef 100644
--- a/src/views/system/base/massifMap.vue
+++ b/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>