fix:新增时修改地块选中状态

src/views/authentic/authenticMap.js

@@ -177,6 +177,7 @@ class AuthenticMap {
   startDraw() {
     this.kmap.setDefaultCursor("crosshair");
     this.kmap.startDraw();
+    this.kmap.endModify();
   }
   //结束勾画
   endDraw() {
@@ -184,9 +185,11 @@ class AuthenticMap {
     this.kmap.endModify();
   }
 
+
   // 开始编辑
   startModify() {
     this.kmap.startModify();
+    this.kmap.endDraw();
     mapData.point.set("icon", "point-act");
   }
   //结束编辑

src/views/authentic/index.vue

@@ -8,32 +8,32 @@
         <span>返回</span>
       </div> -->
       <el-select
-          v-model="locationVal"
-          filterable
-          remote
-          effect="dark"
-          reserve-keyword
-          placeholder="搜索地区"
-          :remote-method="remoteMethod"
-          :loading="loading"
-          @change="handleSearchRes"
-          class="v-select"
+        v-model="locationVal"
+        filterable
+        remote
+        effect="dark"
+        reserve-keyword
+        placeholder="搜索地区"
+        :remote-method="remoteMethod"
+        :loading="loading"
+        @change="handleSearchRes"
+        class="v-select"
+      >
+        <template #prefix>
+          <el-icon class="el-input__icon"><search /></el-icon>
+        </template>
+        <el-option
+          v-for="(item, index) in locationOptions.list"
+          :key="index"
+          :label="item.title"
+          :value="item.point"
         >
-          <template #prefix>
-            <el-icon class="el-input__icon"><search /></el-icon>
-          </template>
-          <el-option
-            v-for="(item, index) in locationOptions.list"
-            :key="index"
-            :label="item.title"
-            :value="item.point"
+          <span>{{ item.title }}</span>
+          <span class="sub-title"
+            >{{ item.province }}{{ item.city }}{{ item.district }}</span
           >
-            <span>{{ item.title }}</span>
-            <span class="sub-title"
-              >{{ item.province }}{{ item.city }}{{ item.district }}</span
-            >
-          </el-option>
-    </el-select>
+        </el-option>
+      </el-select>
       <div class="search">
         <div class="add btn" @click="handleAdd">
           <el-icon><Plus /></el-icon>
@@ -88,13 +88,15 @@
           />
         </el-form-item>
         <div class="button">
-          <el-button class="btn" type="primary" @click="onSearch">查询</el-button>
+          <el-button class="btn" type="primary" @click="onSearch"
+            >查询</el-button
+          >
           <el-button class="btn reset" @click="onRest">重置</el-button>
         </div>
       </el-form>
       <div class="box">
-        <div class="map-box" :class="{'cursor-pointer':mouseStyle}">
-          <div ref="mapRef" class="map" ></div>
+        <div class="map-box" :class="{ 'cursor-pointer': mouseStyle }">
+          <div ref="mapRef" class="map"></div>
         </div>
         <div class="tool-group">
           <!-- <div class="btn" @click="handleCancel" v-show="isEdit&&mapData.point">
@@ -109,7 +111,11 @@
             <el-icon size="15"><CloseBold /></el-icon>
             <span>删除点</span>
           </div> -->
-          <div class="btn delete" @click="handleDelete" v-show="mapData.selectPointArr.length>0">
+          <div
+            class="btn delete"
+            @click="handleDelete"
+            v-show="mapData.selectPointArr.length > 0"
+          >
             <el-icon size="15" color="#fff"><CloseBold /></el-icon>
             <span>删除地块</span>
           </div>
@@ -121,10 +127,16 @@
               <span>地块属性</span>
             </div>
             <div class="btn-group">
-                <div v-show="disabledForm" class="edit" @click="handleEdit">
-                    编辑
-                </div>
-                <div v-show="mapData.selectPointArr.length>0" class="edit ml" @click="handlePrint">打印</div>
+              <div v-show="disabledForm" class="edit" @click="handleEdit">
+                编辑
+              </div>
+              <div
+                v-show="mapData.selectPointArr.length > 0"
+                class="edit ml"
+                @click="handlePrint"
+              >
+                打印
+              </div>
             </div>
           </div>
           <div class="edit-cont">
@@ -249,8 +261,13 @@
       </div>
     </template>
   </el-dialog>
-  <Pdf :title="formInline.id+''" :showDialog="pdfShow" @closeDialog="pdfShow = false" v-if="formInline.id && pdfShow" :rowId="formInline.id"></Pdf>
-
+  <Pdf
+    :title="formInline.id + ''"
+    :showDialog="pdfShow"
+    @closeDialog="pdfShow = false"
+    v-if="formInline.id && pdfShow"
+    :rowId="formInline.id"
+  ></Pdf>
 </template>
 
 <script setup>
@@ -263,8 +280,8 @@ import { ElMessage, ElMessageBox } from "element-plus";
 import { dateFormat } from "@/utils/date_util";
 import { exportExcel, parseMultiPolygon } from "@/utils/index";
 import Pdf from "./Pdf";
-const pdfShow = ref(false)
-const mouseStyle = ref(1)
+const pdfShow = ref(false);
+const mouseStyle = ref(1);
 const router = useRouter();
 
 let authenticMap = new AuthenticMap();
@@ -289,7 +306,7 @@ const getList = (callback) => {
     });
     authenticMap.setAreaGeometry(geom);
     authenticMap.addPoint(data);
-    callback && callback(geom)
+    callback && callback(geom);
   });
 };
 
@@ -300,7 +317,7 @@ const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
 
 const handleSearchRes = (v) => {
   authenticMap.setMapCenter(v);
-  onRest()
+  onRest();
 };
 
 const locationOptions = reactive({
@@ -313,7 +330,7 @@ const remoteMethod = async (keyword) => {
     const params = {
       key: MAP_KEY,
       keyword,
-    //   location: location.value,
+      //   location: location.value,
       location: "22.574540836684672,113.1093017627431",
     };
     await VE_API.old_mini_map
@@ -338,15 +355,15 @@ const remoteMethod = async (keyword) => {
   }
 };
 const validatePhoneNumber = (rule, value, callback) => {
-    const phoneRegex = /^[1][3-9]\d{9}$/
-    if (!value) {
-        callback(new Error('请输入联系电话'))
-      } else if (!phoneRegex.test(value)) {
-        callback(new Error('手机号码格式不正确'));
-      } else {
-        callback();
-      }
-}
+  const phoneRegex = /^[1][3-9]\d{9}$/;
+  if (!value) {
+    callback(new Error("请输入联系电话"));
+  } else if (!phoneRegex.test(value)) {
+    callback(new Error("手机号码格式不正确"));
+  } else {
+    callback();
+  }
+};
 const rules = {
   address: [{ required: true, message: "请输入农场地址", trigger: "change" }],
   farmName: [{ required: true, message: "请输入农场名称", trigger: "change" }],
@@ -354,7 +371,9 @@ const rules = {
     { required: true, message: "请输入作物物种", trigger: "change" },
   ],
   masterName: [{ required: true, message: "请输入姓名", trigger: "change" }],
-  masterTel: [{ required: true, validator: validatePhoneNumber, trigger: "change" }],
+  masterTel: [
+    { required: true, validator: validatePhoneNumber, trigger: "change" },
+  ],
 };
 const ruleFormRef = ref(null);
 const initForm = {
@@ -380,13 +399,13 @@ const formInlineSearch = reactive({
 });
 
 const onSearch = () => {
-  authenticMap.search(formInlineSearch)
+  authenticMap.search(formInlineSearch);
 };
 
 const onRest = () => {
-    Object.assign(formInlineSearch, initForm);
-    isUpdata.value = false
-    onCancel()
+  Object.assign(formInlineSearch, initForm);
+  isUpdata.value = false;
+  onCancel();
 };
 
 const isEdit = ref(false);
@@ -405,13 +424,13 @@ const onCancel = (isCancel) => {
     authenticMap.cancelDraw();
   } else {
     // authenticMap.cancelDraw();
-    getList((geoms)=>{
-    //   const geometriesWkt = []
-    //   for(let item of geoms){
-    //     geometriesWkt.push(item.featureWkt)
-    //   }
-    //   authenticMap.fit(geometriesWkt)
-      authenticMap.allUnSelect()
+    getList((geoms) => {
+      //   const geometriesWkt = []
+      //   for(let item of geoms){
+      //     geometriesWkt.push(item.featureWkt)
+      //   }
+      //   authenticMap.fit(geometriesWkt)
+      authenticMap.allUnSelect();
     });
   }
   authenticMap.setPoint("point");
@@ -425,31 +444,33 @@ const onSubmit = () => {
   ruleFormRef.value.validate((valid, fields) => {
     if (valid) {
       VE_API.authentic.saveData(formInline).then((res) => {
-        isUpdata.value = false
+        isUpdata.value = false;
         disabledForm.value = true;
-        const point = mapData.curPointData
+        const point = mapData.curPointData;
         authenticMap.endDraw();
-        getList().then(()=>{
-            isRefresh.value = false
-            isEdit.value = true;
-            authenticMap.getSelectPointArr(point.id||plotList.value[plotList.value.length - 1].id)
-        })
+        getList().then(() => {
+          isRefresh.value = false;
+          isEdit.value = true;
+          authenticMap.getSelectPointArr(
+            point.id || plotList.value[plotList.value.length - 1].id
+          );
+        });
       });
     }
   });
 };
 
 // 打印
-const handlePrint = () =>{
-    pdfShow.value = true
-}
+const handlePrint = () => {
+  pdfShow.value = true;
+};
 
 // 返回
 const goBack = () => {
   router.go(-1);
 };
 
-function updateFormInline(newData,name) {
+function updateFormInline(newData, name) {
   Object.assign(formInline, newData);
 }
 
@@ -464,7 +485,7 @@ const handleDelete = () => {
   })
     .then(() => {
       VE_API.authentic.deleteData(id).then((res) => {
-        isUpdata.value = false
+        isUpdata.value = false;
         onCancel();
       });
     })
@@ -472,22 +493,23 @@ const handleDelete = () => {
 };
 
 // 创建
-const isRefresh = ref(true)
+const isRefresh = ref(true);
 const handleAdd = () => {
-    isRefresh.value = false
-  authenticMap.clearMapData("curPointData", {});
-  authenticMap.clearMapData("isEdit", false);
-  authenticMap.setPoint("point");
-  updateFormInline({ ...initForm });
-  pointList.value = [];
+  isRefresh.value = false;
   isEdit.value = false;
-  ruleFormRef.value.resetFields();
   if (isUpdata.value) {
     authenticMap.cancelDraw();
+    authenticMap.allUnSelect();
   } else {
     getList();
     isUpdata.value = true;
   }
+  updateFormInline({ ...initForm });
+  ruleFormRef.value.resetFields();
+  pointList.value = [];
+  authenticMap.clearMapData("curPointData", {});
+  authenticMap.clearMapData("isEdit", false);
+  authenticMap.setPoint("point");
   authenticMap.startDraw();
 };
 
@@ -499,7 +521,7 @@ const handleDeletePoint = () => {
 // 撤销
 const handleCancel = () => {
   authenticMap.undoLastDraw();
-//   authenticMap.cancelDraw()
+  //   authenticMap.cancelDraw()
 };
 
 // 导出
@@ -583,15 +605,15 @@ const updatePointList = () => {
 };
 
 watchEffect(() => {
-    isRefresh.value = true
-  if (mapData.isEdit && mapData.selectPointArr.length < 2&& isRefresh.value) {
-    isEdit.value = true;
-    disabledForm.value = false;
-    isUpdata.value = true;
-    formInline.createDate = dateFormat(new Date(), "YYYY-mm-dd HH:MM:SS");
-    updatePointList();
-    authenticMap.startModify();
-  }
+  // isRefresh.value = true
+  //   if (mapData.isEdit && mapData.selectPointArr.length < 2&& isRefresh.value) {
+  //     isEdit.value = true;
+  //     disabledForm.value = false;
+  //     isUpdata.value = true;
+  //     formInline.createDate = dateFormat(new Date(), "YYYY-mm-dd HH:MM:SS");
+  //     updatePointList();
+  //     authenticMap.startModify();
+  //   }
 
   if (mapData.isEditArea) {
     isUpdata.value = false;
@@ -600,16 +622,32 @@ watchEffect(() => {
 });
 
 watch(
+  () => mapData.isEdit,
+  (newVale, oldValue) => {
+    if (newVale && mapData.selectPointArr.length < 2 && !isRefresh.value) {
+      isEdit.value = true;
+      disabledForm.value = false;
+      isUpdata.value = true;
+    //   isRefresh.value = false;
+      formInline.createDate = dateFormat(new Date(), "YYYY-mm-dd HH:MM:SS");
+      updatePointList();
+      authenticMap.startModify();
+    }
+  }
+);
+
+watch(
   () => mapData.selectPointArr,
   (newVale, oldValue) => {
     if (mapData.selectPointArr.length === 1) {
       const id = mapData.selectPointArr.map((item) => item.values_.id);
       getDetailsData(id[0]);
     } else {
-        if(isRefresh.value){
-            isEdit.value = false;
-            authenticMap.endDraw();
-        }
+      if (isRefresh.value) {
+        isEdit.value = false;
+        authenticMap.endDraw();
+        isRefresh.value = true;
+      }
     }
   }
 );
@@ -661,18 +699,18 @@ watch(
       border: 1px solid rgba(255, 255, 255, 0.4);
     }
     .v-select {
-        width: 300px;
-        ::v-deep {
-          .el-select__wrapper {
-            background: #101010;
-            box-shadow: none;
-            border: 1px solid rgba(255, 255, 255, 0.7);
-            .el-select__input {
-              color: #fff;
-            }
+      width: 300px;
+      ::v-deep {
+        .el-select__wrapper {
+          background: #101010;
+          box-shadow: none;
+          border: 1px solid rgba(255, 255, 255, 0.7);
+          .el-select__input {
+            color: #fff;
           }
         }
       }
+    }
     .search {
       display: flex;
       align-items: center;
@@ -704,31 +742,31 @@ watch(
       height: 40px;
       margin: 5px 0;
       display: flex;
-    //   justify-content: flex-end;
-    justify-content: space-between;
-      ::v-deep{
-        .el-form-item__label{
-            color: #fff;
+      //   justify-content: flex-end;
+      justify-content: space-between;
+      ::v-deep {
+        .el-form-item__label {
+          color: #fff;
         }
-        .el-form-item__content{
-            width: 190px;
+        .el-form-item__content {
+          width: 190px;
         }
-        .el-input__wrapper{
-            background: #101010;
-            box-shadow: none;
-            border: 1px solid rgba(255, 255, 255, 0.7);
-            .el-input__inner {
-              color: #fff;
-            }
+        .el-input__wrapper {
+          background: #101010;
+          box-shadow: none;
+          border: 1px solid rgba(255, 255, 255, 0.7);
+          .el-input__inner {
+            color: #fff;
+          }
         }
       }
-      .button{
+      .button {
         display: flex;
-        .btn{
-            width:84px;
-            &.reset{
-                margin-left: 25px;
-            }
+        .btn {
+          width: 84px;
+          &.reset {
+            margin-left: 25px;
+          }
         }
       }
     }
@@ -783,10 +821,10 @@ watch(
           display: flex;
           align-items: center;
           justify-content: space-between;
-          .btn-group{
+          .btn-group {
             display: flex;
-            .ml{
-                margin-left: 20px;
+            .ml {
+              margin-left: 20px;
             }
           }
           .name {