地图标绘调整

project/sass/apps/grid/AppGridBlock/components/add.vue

@@ -50,7 +50,9 @@
                 <el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input>
               </el-form-item>
               <el-form-item label="网格范围" prop="enclosure">
-                <el-button size="small" @click="handlePlotting">地图标绘</el-button>
+                <map-plotting v-model="forms.points">
+                  <el-button size="small">地图标绘</el-button>
+                </map-plotting>
               </el-form-item>
             </template>
           </ai-card>
@@ -65,9 +67,6 @@
         </el-button>
       </template>
     </ai-detail>
-    <ai-dialog class="fullscreenMap" title="网格范围" :visible.sync="showMap" @onConfirm="surePotting" fullscreen>
-      <map-plotting v-model="path"/>
-    </ai-dialog>
   </div>
 </template>
 
@@ -89,9 +88,7 @@ export default {
         girdMemberManageList: [],
         girdMemberList: []
       },
-      showMap: false,
       options: [],
-      path: [],
       parentGirdInfo: {},
     };
   },
@@ -160,10 +157,6 @@ export default {
         }
       });
     },
-    surePotting() {
-      this.forms.points = JSON.parse(JSON.stringify(this.path));
-      this.showMap = false;
-    },
     save() {
       this.$refs["rules"].validate((valid) => {
         if (valid) {
@@ -222,10 +215,6 @@ export default {
         }
       });
     },
-    handlePlotting() {
-      if (this.forms.points?.length > 0) this.path = JSON.parse(JSON.stringify(this.forms.points))
-      this.showMap = true
-    }
   },
 };
 </script>
@@ -235,37 +224,6 @@ export default {
   width: 100%;
   height: 100%;
 
-  ::v-deep .amap-copyright {
-    display: none !important;
-  }
-
-  ::v-deep .amap-logo {
-    display: none !important;
-  }
-
-  ::v-deep.fullscreenMap {
-    .el-dialog {
-      display: flex;
-      flex-direction: column;
-
-      .el-dialog__body {
-        padding: 0;
-        flex: 1;
-        min-height: 0;
-
-        .ai-dialog__content {
-          max-height: unset !important;
-          padding-bottom: 0;
-          height: 100%;
-
-          .ai-dialog__content--wrapper {
-            padding-right: 0 !important;
-          }
-        }
-      }
-    }
-  }
-
   .footer-btn {
     width: 92px;
   }

project/sass/apps/grid/AppGridBlock/components/list.vue

@@ -120,7 +120,7 @@
             <template slot-scope="{ row }">
               <div class="table-options">
                 <el-button type="text" @click="showEdit(row.id)">编辑</el-button>
-                <el-button type="text" @click="poltting(row)">标绘</el-button>
+                <map-plotting :value="row.points" @change="v=>confirm(row,v)"/>
                 <el-button type="text" @click="deleteById(row.id)">删除</el-button>
               </div>
             </template>
@@ -128,20 +128,6 @@
         </ai-table>
       </template>
     </ai-list>
-    <ai-dialog
-        title="网格范围" class="fullscreenMap"
-        :visible.sync="showMap"
-        :customFooter="true"
-        border fullscreen
-        width="850px"
-    >
-      <map-plotting v-model="path"/>
-      <div class="dialog-footer" slot="footer">
-        <el-button size="medium" @click="showMap=false">取消</el-button>
-        <el-button type="primary" size="medium" @click="confirm()">确认
-        </el-button>
-      </div>
-    </ai-dialog>
     <ai-dialog :title="`${gridInfo.girdName}网格成员`" :visible.sync="dialog" customFooter @closed="gridInfo={}"
                width="700px">
       <ai-table :tableData="gridInfo.tableData" :colConfigs="gridMemberColConfigs" :dict="dict"
@@ -344,25 +330,15 @@ export default {
         this.getTreeList();
       });
     },
-    poltting(row) {
-      this.showMap = true;
-      if (this.editRow.points?.length > 0) this.path = JSON.parse(JSON.stringify(this.editRow.points))
-      this.editRow = {...row};
-    },
     showEdit(id) {
       this.$router.push({hash: "#add", query: {id}})
     },
     //map搜索
-    confirm() {
+    confirm(row, points) {
-      this.editRow.points = JSON.parse(JSON.stringify(this.path));
+      this.instance.post(`/app/appgirdinfo/addOrUpdate`, {...row, points}).then((res) => {
-      let {girdMemberNames} = this.editRow
-      this.instance.post(`/app/appgirdinfo/addOrUpdate`, {
-        ...this.editRow,
-        girdMemberNames: girdMemberNames?.toString()
-      }).then((res) => {
         if (res.code == 0) {
+          this.$message.success("提交成功!")
           this.getList();
-          this.showMap = false;
         }
       });
     },
@@ -425,7 +401,8 @@ export default {
     }
 
     .is-current > .el-tree-node__content {
-      color: #fff!important;
+      color: #fff !important;
+
       &:hover {
         background: #2266FF;
         color: #fff;
@@ -480,6 +457,7 @@ export default {
       }
     }
   }
+
   ::v-deep .treePanel {
     display: flex;
     flex-direction: column;

project/sass/apps/grid/AppGridBlock/components/mapPlotting.vue

@@ -1,5 +1,17 @@
 <template>
   <section class="mapPlotting">
+    <div class="clicker" @click="dialog=true,$emit('open')">
+      <slot v-if="$slots.default"/>
+      <el-button v-else type="text">标绘</el-button>
+    </div>
+    <ai-dialog :title="title" class="fullscreenMap"
+               :visible.sync="dialog"
+               :destroyOnClose="true"
+               @close="points=[]"
+               border fullscreen
+               @open="initMap" :modal="false"
+               @onConfirm="$emit('change',points.flat()),dialog=false">
+      <div class="mapPanel">
         <div class="tipinput">
           <el-input
               v-model="searchAddress"
@@ -11,7 +23,7 @@
         </div>
         <div id="panel"/>
         <div class="container fill" id="container"/>
-    <div class="operationBtns">
+        <div class="operationBtns" v-if="map">
           <el-alert type="success" title="操作说明:" :closable="false">
             <li>1.双击覆盖物即可编辑</li>
             <li>2.编辑状态,对点双击可删除该点</li>
@@ -24,11 +36,14 @@
             <el-button @click="clear()">清除绘制</el-button>
           </el-button-group>
         </div>
+      </div>
+    </ai-dialog>
   </section>
 </template>
 
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
+import {mapState} from "vuex";
 
 export default {
   name: "mapPlotting",
@@ -37,8 +52,12 @@ export default {
     event: "change"
   },
   props: {
+    title: {default: "地图标绘"},
     value: Array
   },
+  computed: {
+    ...mapState(['user']),
+  },
   data() {
     return {
       map: null,
@@ -46,14 +65,8 @@ export default {
       placeSearch: null,
       searchAddress: "",
       overlays: [],
-      points: []
+      points: [],
-    }
+      dialog: false
-  },
-  watch: {
-    points: {
-      deep: true, handler(v) {
-        this.$emit('change', v.flat())
-      }
     }
   },
   methods: {
@@ -70,9 +83,8 @@ export default {
       polyEditor.close();
       polyEditor.setTarget();
       polyEditor.open();
-    }
     },
-  mounted() {
+    initMap() {
       setTimeout(() => AMapLoader.load({
         key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
         version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
@@ -89,8 +101,8 @@ export default {
         this.placeSearch = new AMap.PlaceSearch({
           pageSize: 5, // 单页显示结果条数
           pageIndex: 1, // 页码
-        city: "", // 兴趣点城市
+          city: this.user.info.areaId?.substring(0, 6), // 兴趣点城市
-        citylimit: false, //是否强制限制在设置的城市内搜索
+          citylimit: true, //是否强制限制在设置的城市内搜索
           map: this.map, // 展现结果的地图实例
           panel: "panel", // 结果列表将在此容器中进行展示。
           autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
@@ -125,14 +137,26 @@ export default {
           });
           this.polyEditor.setTarget(polygon);
           this.polyEditor.open()
+        } else {
+          this.map.setCity(this.user.info.areaId?.substring(0, 6))
+          this.map.setZoom(14, false, 600)
         }
       }), 500)
     }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .mapPlotting {
+  display: inline-block;
+  text-align: left;
+
+  .clicker {
+    display: inline-block;
+  }
+
+  .mapPanel {
     width: 100%;
     height: 100%;
     position: relative;
@@ -169,5 +193,37 @@ export default {
       bottom: 20px;
       z-index: 10000;
     }
+  }
+
+  ::v-deep.fullscreenMap {
+    .el-dialog {
+      display: flex;
+      flex-direction: column;
+
+      .el-dialog__body {
+        padding: 0;
+        flex: 1;
+        min-height: 0;
+
+        .ai-dialog__content {
+          max-height: unset !important;
+          padding-bottom: 0;
+          height: 100%;
+
+          .ai-dialog__content--wrapper {
+            padding-right: 0 !important;
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep .amap-copyright {
+    display: none !important;
+  }
+
+  ::v-deep .amap-logo {
+    display: none !important;
+  }
 }
 </style>