网格区块基本调整完毕

project/grid/AppGridBlock/AppGridBlock.vue

@@ -1,15 +1,7 @@
 <template>
   <div class="AppGridBlock">
     <keep-alive include="List">
-      <component
+      <component :is="currentPage" :instance="instance" :dict="dict"/>
-        ref="component"
-        :is="component"
-        @change="onChange"
-        :params="params"
-        :instance="instance"
-        :dict="dict"
-        :isEdit="isEdit"
-      ></component>
     </keep-alive>
   </div>
 </template>
@@ -26,44 +18,17 @@ export default {
     instance: Function,
     dict: Object,
   },
-
+  computed: {
+    currentPage() {
+      return this.$route.hash == "#add" ? Add : List
+    }
+  },
   data() {
     return {
       component: "List",
-      params: {},
-      include: [],
-      isEdit: false
     };
   },
-
+  components: {Add, List},
-  components: {
-    Add,
-    List,
-  },
-
-  mounted() {},
-
-  methods: {
-    onChange(data) {
-      if (data.type === "Add") {
-        this.component = "Add";
-        this.params = data.params;
-        this.isEdit = data.isEdit
-      }
-
-      if (data.type === "list") {
-        this.component = "List";
-        this.params = data.params;
-
-        this.$nextTick(() => {
-          if (data.isRefresh) {
-            this.$refs.component.getList()
-            this.$refs.component.getTreeList()
-          }
-        });
-      }
-    },
-  },
 };
 </script>
 

project/grid/AppGridBlock/components/add.vue

@@ -3,151 +3,56 @@
     <ai-detail>
       <template #title>
         <ai-title
-            :title="title"
+            :title="pageTitle"
             :isShowBack="true"
             :isShowBottomBorder="true"
             @onBackClick="cancel(false)"
-        ></ai-title>
+        />
       </template>
       <template #content>
-        <ai-card title="层级信息">
+        <el-form ref="rules" :model="forms" :rules="formRules" size="small" label-suffix="：" label-width="120px">
-          <template slot="content">
-            <ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px">
-              <ai-info-item label="上级层级单位："><span>{{ forms.parentGirdName }}</span></ai-info-item>
-            </ai-wrapper>
-          </template>
-        </ai-card>
-
-        <el-form
-            ref="rules"
-            :model="forms"
-            :rules="formRules"
-            size="small"
-            label-suffix="："
-            label-width="120px"
-        >
           <ai-card title="基础信息">
             <template slot="content">
-              <div class="above">
+              <el-form-item label="网格名称" prop="girdName">
-                <div class="left">
+                <el-input v-model="forms.girdName" placeholder="请输入…" :maxlength="50" show-word-limit clearable/>
-                  <el-form-item label="网格名称" prop="girdName">
+              </el-form-item>
-                    <el-input
+              <el-form-item label="网格长" prop="girdMemberManageList">
-                        v-model="forms.girdName"
+                <ai-user-picker :instance="instance" v-model="forms.girdMemberManageList" isShowUser :props="{label:'name', id: 'id'}"/>
-                        placeholder="请输入…"
+              </el-form-item>
-                        :maxlength="50"
+              <el-form-item label="网格员" prop="girdMemberList">
-                        show-word-limit
+                <ai-user-picker :instance="instance" v-model="forms.girdMemberList" isShowUser :props="{label:'name', id: 'id'}"/>
-                    ></el-input>
+              </el-form-item>
-                  </el-form-item>
-                  <el-form-item label="网格类型" prop="girdType">
-                    <el-select
-                        v-model="forms.girdType"
-                        placeholder="请选择"
-                        clearable
-                        style="width: 100%;"
-                    >
-                      <el-option
-                          v-for="(item, i) in dict.getDict('girdType')"
-                          :key="i"
-                          :label="item.dictName"
-                          :value="item.dictValue"
-                      ></el-option>
-                    </el-select>
-                  </el-form-item>
-                  <el-form-item label="是否最后一级" prop="isLastLevel">
-                    <el-select
-                        v-model="forms.isLastLevel"
-                        placeholder="请选择"
-                        clearable
-                        style="width: 100%;"
-                    >
-                      <el-option
-                          v-for="(item, i) in dict.getDict('isLastLevel')"
-                          :key="i"
-                          :label="item.dictName"
-                          :value="item.dictValue"
-                      ></el-option>
-                    </el-select>
-                  </el-form-item>
-                </div>
-                <div class="right">
-                  <el-form-item label="网格编码" prop="girdCode">
-                    <el-input
-                        v-model="forms.girdCode"
-                        placeholder="请输入…"
-                        maxlength="30"
-                        show-word-limit
-                    ></el-input>
-                  </el-form-item>
-                  <el-form-item label="网格层级" prop="girdLevel">
-                    <el-select
-                        v-model="forms.girdLevel"
-                        placeholder="请选择"
-                        :disabled="isEdit"
-                        clearable
-                        style="width: 100%;"
-                    >
-                      <el-option
-                          v-for="(item, i) in dict.getDict('girdLevel')"
-                          :key="i"
-                          :label="item.dictName"
-                          :value="item.dictValue"
-                      ></el-option>
-                    </el-select>
-                  </el-form-item>
-                </div>
-              </div>
             </template>
           </ai-card>
-
           <ai-card title="其他信息">
             <template slot="content">
-              <div class="above">
+              <el-row type="flex">
-                <div class="left">
+                <div class="fill">
-                  <!-- <el-form-item label="事件上报主体" prop="eventReportUnitId">
-                    <el-cascader
-                      style="width: 100%"
-                      :options="unitOps"
-                      ref="cascader"
-                      v-model="forms.eventReportUnitId"
-                      :props="unitProps"
-                      :show-all-levels="false"
-                    />
-                  </el-form-item> -->
                   <el-form-item label="初始日期" prop="startDate">
                     <el-date-picker
                         v-model="forms.startDate"
                         type="date"
                         value-format="yyyy-MM-dd"
                         placeholder="选择日期"
-                        style="width: 100%;"
+                        style="width: 100%;"/>
-                    >
-                    </el-date-picker>
                   </el-form-item>
                   <el-form-item label="终止日期" prop="endDate">
-                    <el-date-picker
+                    <el-date-picker v-model="forms.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;"/>
-                        v-model="forms.endDate"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="选择日期"
-                        style="width: 100%;"
-                    >
-                    </el-date-picker>
                   </el-form-item>
                 </div>
-                <div class="right">
+                <div class="fill">
                   <el-form-item label="面积" prop="area">
-                    <el-input
+                    <el-input v-model="forms.area" placeholder="面积㎡" clearable/>
-                        v-model="forms.area"
-                        placeholder="面积㎡"
-                    ></el-input>
                   </el-form-item>
                 </div>
-              </div>
+              </el-row>
               <el-form-item label="网格地址" prop="address">
                 <el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input>
               </el-form-item>
-              <el-form-item label="网格范围" prop="enclosure" v-if="forms.girdLevel === '2' || isAddLastLevel">
+              <el-form-item label="网格范围" prop="enclosure">
-                <el-button size="small" @click="showMap = true">地图标绘</el-button>
+                <map-plotting v-model="forms.points">
+                  <el-button size="small">地图标绘</el-button>
+                </map-plotting>
               </el-form-item>
             </template>
           </ai-card>
@@ -162,110 +67,30 @@
         </el-button>
       </template>
     </ai-detail>
-    <ai-dialog
-        title="网格范围"
-        :visible.sync="showMap"
-        :customFooter="true"
-        :destroyOnClose="true"
-        @opened="beforeSelectMap"
-        border
-        width="850px"
-    >
-      <div class="map">
-        <div class="tipinput">
-          <el-input
-              v-model="searchAddress"
-              @change="addressChange"
-              clearable
-              placeholder="请输入关键字"
-              id="tipinput"
-              size="medium"
-              style="width: 200px"
-          ></el-input>
-        </div>
-        <div id="panel"></div>
-        <div class="container" id="container"></div>
-        <el-button-group
-            style="margin-top: 8px"
-            v-if="forms.plottingStatus == 1"
-        >
-          <el-button type="primary" size="mini" @click="polyEditor.open()"
-          >开始编辑
-          </el-button
-          >
-          <el-button size="mini" @click="polyEditor.close()"
-          >结束编辑
-          </el-button
-          >
-        </el-button-group>
-        <el-button-group
-            style="margin-top: 8px"
-            v-if="forms.plottingStatus == 0"
-        >
-          <el-button size="mini" @click="draw('polygon')"
-          >开始绘制多边形
-          </el-button
-          >
-          <!-- <el-button  size="mini" @click="close()">关闭绘制</el-button> -->
-          <el-button size="mini" @click="clear()">清除绘制</el-button>
-        </el-button-group>
-      </div>
-      <div class="dialog-footer" slot="footer">
-        <el-button size="medium" @click="showMap = false">取消</el-button>
-        <el-button type="primary" size="medium" @click="surePotting()"
-        >确认
-        </el-button
-        >
-      </div>
-    </ai-dialog>
   </div>
 </template>
 
 <script>
-import AMapLoader from "@amap/amap-jsapi-loader";
 import {mapState} from "vuex";
+import MapPlotting from "./mapPlotting";
+import AiUserPicker from "../../components/AiUserPicker";
 
 export default {
   name: "addBlock",
+  components: {AiUserPicker, MapPlotting},
   props: {
     instance: Function,
     dict: Object,
     params: Object,
-    isEdit: Boolean
   },
   data() {
     return {
       forms: {
-        address: "",
+        girdMemberManageList: [],
-        area: "",
+        girdMemberList: []
-        points: [],
-        endDate: "",
-        eventReportUnit: "",
-        eventReportUnitId: "",
-        girdCode: "",
-        girdLevel: "",
-        girdList: [],
-        girdName: "",
-        girdType: "",
-        isLastLevel: "",
-        parentGirdId: "",
-        parentGirdName: "",
-        startDate: "",
-        plottingStatus: "0",
       },
-      showMap: false,
-      map: "",
-      mouseTool: "",
-      searchAddress: "",
-      placeSearch: "",
-      overlays: [],
       options: [],
-      path: [],
-      location: {},
-      polyEditor: "",
-      title: "添加网格区块",
       parentGirdInfo: {},
-      isAddLastLevel: false
     };
   },
   computed: {
@@ -297,28 +122,26 @@ export default {
       ops.map((e) => this.addChild(e, initData));
       return ops;
     },
+    pageTitle() {
+      return this.isEdit ? "编辑网格区块" : "添加网格区块"
+    },
+    isEdit() {
+      return !!this.$route.query.id;
+    }
   },
   created() {
-    this.getCorpLocation()
     if (this.isEdit) {
-      this.title = "编辑网格区块";
       this.searchDetail();
     } else {
-      this.forms.parentGirdId = this.params.id;
+      this.forms = {
-      this.forms.parentGirdName = this.params.girdName;
+        ...this.forms,
-      this.isAddLastLevel = this.params.girdLevel === '1'
+        ...this.$route.query
-      // this.forms.girdLevel = Number(this.info.girdLevel) + 1 +'';
+      }
-      // this.forms.isLastLevel = ['0','1'].includes(this.forms.girdLevel)?'0':'1';
-      this.title = "添加网格区块";
     }
-    // this.getAllUnit(this.user.info.areaId);
   },
   methods: {
-    cancel(isRefresh) {
+    cancel() {
-      this.$emit('change', {
+      this.$router.push({})
-        type: 'list',
-        isRefresh: !!isRefresh,
-      })
     },
     // 获取所有单位
     getAllUnit(data) {
@@ -335,147 +158,6 @@ export default {
         }
       });
     },
-    beforeSelectMap() {
-      AMapLoader.load({
-        key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: ["AMap.MouseTool", "AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-        AMapUI: {
-          // 是否加载 AMapUI，缺省不加载
-          version: "1.1", // AMapUI 缺省 1.1
-          plugins: [], // 需要加载的 AMapUI ui插件
-        },
-      })
-      .then((AMap) => {
-        this.map = new AMap.Map("container", {
-          resizeEnable: true,
-        });
-        if (this.forms.plottingStatus == 1) {
-          let path = [];
-          this.forms.points.map((e, index) => {
-            path[index] = [e.lng, e.lat];
-          });
-          let polygon = new AMap.Polygon({
-            path: path,
-            strokeColor: "#FF33FF",
-            strokeWeight: 6,
-            strokeOpacity: 0.2,
-            fillOpacity: 0.4,
-            fillColor: "#1791fc",
-            zIndex: 50,
-            bubble: true,
-          });
-          this.map.add([polygon]);
-          this.map.setFitView();
-          this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
-        } else {
-          this.mouseTool = new AMap.MouseTool(this.map);
-          // this.map.add(new AMap.Marker({
-          //     position:this.map.getCenter()
-          // }));
-          this.placeSearch = new AMap.PlaceSearch({
-            pageSize: 3, // 单页显示结果条数
-            pageIndex: 1, // 页码
-            city: "", // 兴趣点城市
-            citylimit: false, //是否强制限制在设置的城市内搜索
-            map: this.map, // 展现结果的地图实例
-            panel: "panel", // 结果列表将在此容器中进行展示。
-            autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
-          });
-          this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
-          this.eventOn();
-        }
-      })
-    },
-    getCorpLocation() {
-      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
-        if (res.code == 0) {
-          this.location = res.data
-        }
-      })
-    },
-    //地图事件绑定
-    eventOn() {
-      this.path = [];
-      this.overlays = [];
-      this.map.on("mousemove", null, this);
-      this.mouseTool.on("draw", ({obj}) => {
-        obj.getPath().map((e) => {
-          this.path.push({lat: e.getLat(), lng: e.getLng()});
-        });
-        this.overlays.push(obj);
-      })
-    },
-    //map搜索
-    addressChange(val) {
-      this.placeSearch.search(val);
-    },
-    close() {
-      this.mouseTool.close(true);
-    },
-    clear() {
-      this.map.remove(this.overlays);
-      this.overlays = [];
-      this.path = [];
-    },
-    draw(type) {
-      switch (type) {
-        case "marker": {
-          this.mouseTool.marker({
-            //同Marker的Option设置
-          });
-          break;
-        }
-        case "polyline": {
-          this.mouseTool.polyline({
-            strokeColor: "#80d8ff",
-            //同Polyline的Option设置
-          });
-          break;
-        }
-        case "polygon": {
-          this.mouseTool.polygon({
-            fillColor: "#00b0ff",
-            strokeColor: "#80d8ff",
-            borderWeight: 2,
-            strokeWeight: 4,
-            //同Polygon的Option设置
-          });
-          break;
-        }
-        case "rectangle": {
-          this.mouseTool.rectangle({
-            fillColor: "#00b0ff",
-            strokeColor: "#80d8ff",
-            //同Polygon的Option设置
-          });
-          break;
-        }
-        case "circle": {
-          this.mouseTool.circle({
-            fillColor: "#00b0ff",
-            strokeColor: "#80d8ff",
-            //同Circle的Option设置
-          });
-          break;
-        }
-      }
-    },
-    surePotting() {
-      this.forms.points = [];
-      // this.forms.eventReportUnit = this.$refs.cascader.getCheckedNodes().label;
-      if (this.forms.plottingStatus == 1) {
-        this.polyEditor
-        .getTarget()
-        .getPath()
-        .map((e) => {
-          this.forms.points.push({lng: e.lng, lat: e.lat});
-        });
-      } else {
-        this.forms.points = [...this.path];
-      }
-      this.showMap = false;
-    },
     save() {
       this.$refs["rules"].validate((valid) => {
         if (valid) {
@@ -484,6 +166,16 @@ export default {
               `/app/appgirdinfo/addOrUpdate`,
               {
                 ...this.forms,
+                girdMemberManageList: this.forms.girdMemberManageList.length ? this.forms.girdMemberManageList.map(v => {
+                  return {
+                    wxUserId: v.wxOpenUserId || v.wxUserId
+                  }
+                }) : [],
+                girdMemberList: this.forms.girdMemberList.length ? this.forms.girdMemberList.map(v => {
+                  return {
+                    wxUserId: v.wxOpenUserId || v.wxUserId
+                  }
+                }) : []
               },
               null
           )
@@ -499,11 +191,26 @@ export default {
       });
     },
     searchDetail() {
+      let {id} = this.$route.query
       this.instance.post(`/app/appgirdinfo/queryDetailById`, null, {
-        params: {id: this.params.id},
+        params: {id},
       }).then((res) => {
         if (res?.data) {
-          this.forms = {...res.data};
+          this.forms = {
+            ...res.data,
+            girdMemberManageList: res.data.girdMemberManageList ? res.data.girdMemberManageList.map(v => {
+              return {
+                ...v,
+                id: v.wxUserId
+              }
+            }) : [],
+            girdMemberList: res.data.girdMemberList ? res.data.girdMemberList.map(v => {
+              return {
+                ...v,
+                id: v.wxUserId
+              }
+            }) : []
+          };
           this.parentGirdInfo = res.data.parentGirdInfo;
           this.forms.parentGirdName = res.data.parentGirdInfo && res.data.parentGirdInfo.girdName;
         }
@@ -518,63 +225,8 @@ export default {
   width: 100%;
   height: 100%;
 
-  ::v-deep .amap-copyright {
-    display: none !important;
-  }
-
-  ::v-deep .amap-logo {
-    display: none !important;
-  }
-
-  .above {
-    overflow: hidden;
-    padding: 8px 0;
-
-    .left {
-      width: 380px;
-      float: left;
-    }
-
-    .right {
-      width: 380px;
-      float: right;
-    }
-  }
-
   .footer-btn {
     width: 92px;
   }
-
-  .map {
-    width: 780px;
-    position: relative;
-    overflow: hidden;
-
-    .container {
-      width: 760px;
-      height: 420px;
-      border-radius: 2px;
-      border: 1px solid #d0d4dc;
-    }
-
-    #panel {
-      position: absolute;
-      height: 400px;
-      right: 30px;
-      top: 20px;
-      width: 280px;
-      overflow: hidden;
-      z-index: 10000;
-    }
-
-    .tipinput {
-      position: absolute;
-      width: 200px;
-      height: 38px;
-      left: 20px;
-      top: 20px;
-      z-index: 10000;
-    }
-  }
 }
 </style>

project/grid/AppGridBlock/components/list.vue

@@ -1,84 +1,87 @@
 <template>
-  <div class="app-grid-block">
+  <section class="app-grid-block">
     <ai-list>
       <template slot="title">
         <ai-title title="网格区块" :isShowBottomBorder="true"></ai-title>
       </template>
       <template slot="left">
-        <ai-tree-menu title="网格层级" @search="(v) => $refs.tree.filter(v)">
+        <ai-tree-menu title="网格层级" @search="v=> $refs.tree.filter(v)">
           <el-tree
-            :data="treeObj.treeList"
+              :data="treeObj.treeList"
-            :props="treeObj.defaultProps"
+              :props="treeObj.defaultProps"
-            @node-click="handleNodeClick"
+              @node-click="handleNodeClick"
-            node-key="id"
+              node-key="id"
-            ref="tree"
+              ref="tree"
-            :filter-node-method="filterNode"
+              :filter-node-method="filterNode"
-            default-expand-all
+              default-expand-all
-            highlight-current
+              highlight-current>
-          />
+            <template slot-scope="{node,data}">
+              <div v-text="node.label"/>
+            </template>
+          </el-tree>
         </ai-tree-menu>
       </template>
       <template slot="content">
         <ai-search-bar>
           <template slot="left">
             <el-date-picker
-              v-model="searchObj.createTimeStr"
+                v-model="searchObj.createTimeStr"
-              type="date"
+                type="date"
-              @change="(page.current = 1), getList()"
+                @change="(page.current = 1), getList()"
-              value-format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
-              size="small"
+                size="small"
-              placeholder="创建时间"
+                placeholder="创建时间"
             >
             </el-date-picker>
           </template>
           <template slot="right">
             <el-input
-              v-model="searchObj.girdName"
+                v-model="searchObj.girdName"
-              size="small"
+                size="small"
-              placeholder="输入网格名称"
+                placeholder="输入网格名称"
-              @keyup.enter.native="(page.current = 1), getList()"
+                @keyup.enter.native="(page.current = 1), getList()"
-              clearable
+                clearable
-              v-throttle="() => {page.current = 1, getList()}"
+                @clear="(searchObj.girdName = '', page.current = 1), getList()"
-              @clear="(searchObj.girdName = '', page.current = 1), getList()"
+                suffix-icon="iconfont iconSearch"
-              suffix-icon="iconfont iconSearch"
             />
           </template>
         </ai-search-bar>
         <ai-search-bar bottomBorder>
           <template slot="left">
             <el-button
-              type="primary"
+                type="primary"
-              icon="iconfont iconAdd"
+                icon="iconfont iconAdd"
-              :disabled="info.girdLevel === '3'"
+                :disabled="info.girdLevel === '3'"
-              @click="(isEdit = false), toAdd()"
+                @click="(isEdit = false), toAdd()"
-              >新增
+            >新增
             </el-button>
             <el-button
-              icon="iconfont iconDelete"
+                icon="iconfont iconDelete"
-              @click="deleteById(ids.join(','))"
+                @click="deleteById(ids.join(','))"
-              :disabled="!Boolean(ids.length)"
+                :disabled="!Boolean(ids.length)"
             >
               删除
             </el-button>
             <ai-download
-              :instance="instance"
+                :instance="instance"
-              url="/app/appgirdinfo/exportGirdInfo"
+                url="/app/appgirdinfo/exportGirdInfo"
-              :params="{ ...searchObj, ids: ids.join(',') }"
+                :params="{ ...searchObj, ids: ids.join(',') }"
-              fileName="网格区块"
+                fileName="网格区块"
             >
               <el-button icon="iconfont iconExported" size="small"
-                >导出全部</el-button
+              >导出全部
+              </el-button
               >
             </ai-download>
             <ai-import
-              ref="import"
+                ref="import"
-              title="导入"
+                title="导入"
-              name="网格区块"
+                name="网格区块"
-              url="/app/appgirdinfo/downloadGirdInfo"
+                url="/app/appgirdinfo/downloadGirdInfo"
-              importUrl="/app/appgirdinfo/importGirdInfo"
+                importUrl="/app/appgirdinfo/importGirdInfo"
-              suffixName="xlsx"
+                suffixName="xlsx"
-              :customCliker="true"
+                :customCliker="true"
-              :instance="instance"
+                :instance="instance"
             >
               <template slot="tips">
                 <p>
@@ -86,104 +89,66 @@
                 </p>
               </template>
               <el-button size="small" icon="iconfont iconImport"
-                >导入</el-button
+              >导入
+              </el-button
               >
             </ai-import>
           </template>
         </ai-search-bar>
         <ai-table
-          class="mt10"
+            class="mt10"
-          :tableData="tableData"
+            :tableData="tableData"
-          :col-configs="colConfigs"
+            :col-configs="colConfigs"
-          :total="page.total"
+            :total="page.total"
-          ref="aitableex"
+            ref="aitableex"
-          :current.sync="page.current"
+            :current.sync="page.current"
-          :size.sync="page.size"
+            :size.sync="page.size"
-          @selection-change="(v) => (ids = v.map((e) => e.id))"
+            @selection-change="v=>ids=v.map((e) => e.id)"
-          @getList="getList()"
+            @getList="getList()"
-        >
+            :dict="dict">
-          <el-table-column
+          <el-table-column label="网格成员" slot="user" align="center" width="160">
-            slot="selectId"
+            <template slot-scope="{ row }">
-            type="selection"
+              <el-button type="text" @click="showGridMembers(row)">{{ row.girdMemberNumber || 0 }}</el-button>
-            align="center"
+            </template>
-            width="40"
-          >
           </el-table-column>
           <el-table-column
-            label="操作"
+              label="操作"
-            slot="options"
+              slot="options"
-            align="center"
+              align="center"
-            fixed="right"
+              fixed="right"
-            width="160">
+              width="160">
             <template slot-scope="{ row }">
-              <div class="table-options">
+              <el-button type="text" @click="showEdit(row.id)">编辑</el-button>
-                <el-button type="text" @click="see(row)">编辑</el-button>
+              <map-plotting :value="row.points" @change="v=>confirm(row,v)"/>
-                <el-button type="text" @click="poltting(row)" :disabled="row.girdLevel !== '2'">标绘</el-button>
+              <el-button type="text" @click="deleteById(row.id)">删除</el-button>
-                <el-button type="text" @click="deleteById(row.id)">删除</el-button>
-              </div>
             </template>
           </el-table-column>
         </ai-table>
       </template>
     </ai-list>
-    <ai-dialog
+    <ai-dialog :title="`${gridInfo.girdName}网格成员`" :visible.sync="dialog" customFooter @closed="gridInfo={}"
-      title="网格范围"
+               width="700px">
-      :visible.sync="showMap"
+      <ai-table :tableData="gridInfo.tableData" :colConfigs="gridMemberColConfigs" :dict="dict"
-      :customFooter="true"
+                :isShowPagination="false" :show-header="false">
-      :destroyOnClose="true"
+        <el-table-column slot="tags">
-      border
+          <template slot-scope="{row}">
-      width="850px"
+            <el-tag v-if="row.label" effect="dark" size="small">{{ row.label }}</el-tag>
-    >
+          </template>
-      <div class="map">
+        </el-table-column>
-        <div class="tipinput">
+      </ai-table>
-          <el-input
+      <template #footer>
-            v-if="editRow.plottingStatus == 0"
+        <el-button @click="dialog=false">关闭</el-button>
-            v-model="searchAddress"
+      </template>
-            @change="addressChange"
-            clearable
-            placeholder="请输入关键字"
-            id="tipinput"
-            size="medium"
-            style="width: 200px"
-          ></el-input>
-        </div>
-        <div id="panel" v-if="editRow.plottingStatus == 0"></div>
-        <div class="container" id="container"></div>
-        <el-button-group
-          style="margin-top: 8px"
-          v-if="editRow.plottingStatus == 1"
-        >
-          <el-button type="primary" size="mini" @click="beginPoltting()"
-            >开始编辑</el-button
-          >
-          <el-button size="mini" @click="finishPoltting()">结束编辑</el-button>
-        </el-button-group>
-        <el-button-group
-          style="margin-top: 8px"
-          v-if="editRow.plottingStatus == 0"
-        >
-          <el-button size="mini" @click="draw('polygon')"
-            >开始绘制多边形</el-button
-          >
-          <!-- <el-button  size="mini" @click="close()">关闭绘制</el-button> -->
-          <el-button size="mini" @click="clear()">清除绘制</el-button>
-        </el-button-group>
-      </div>
-      <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>
-  </div>
+  </section>
 </template>
 
 <script>
-import AMapLoader from "@amap/amap-jsapi-loader";
+import MapPlotting from "./mapPlotting";
 
 export default {
   name: "List",
+  components: {MapPlotting},
   label: "网格区块",
   props: {
     instance: Function,
@@ -225,105 +190,52 @@ export default {
       isEdit: false,
       searchId: "",
       fileList: [],
-      location: {}
+      dialog: false,
+      gridInfo: {},
+      gridMemberColConfigs: [
+        {prop: "wxUserId", openType: 'userName'},
+        {prop: "checkType", formart: v => v === '1' ? '网格员' : '网格长'},
+        {slot: "tags"}
+      ]
     };
   },
   created() {
     this.getTreeList();
     this.getList();
-    this.getCorpLocation()
+    this.dict.load("girdLevel", "girdType", "isLastLevel", "plottingStatus", "girdMemberType");
-    this.dict.load("girdLevel", "girdType", "isLastLevel", "plottingStatus");
   },
   computed: {
     colConfigs() {
-      let _ = this;
       return [
-        { type: 'selection'},
+        {type: 'selection'},
-        {
+        {prop: "girdName", align: "left", label: "网格名称",},
-          prop: "girdName",
+        {slot: 'user'},
-          align: "left",
+        {prop: "plottingStatus", align: "center", label: "标绘状态", dict: "plottingStatus"},
-          label: "网格名称",
+        {prop: "createTime", align: "center", label: "创建时间", dateFormat: "YYYY-MM-DD"},
-        },
+        {slot: "options"}
-        {
-          prop: "girdCode",
-          align: "center",
-          label: "网格编码",
-        },
-        {
-          prop: "girdType",
-          align: "center",
-          label: "网格类型",
-          render(h, { row }) {
-            return h("span", {}, _.dict.getLabel("girdType", row.girdType) || '-');
-          },
-        },
-        {
-          prop: "girdLevel",
-          align: "center",
-          label: "网格层级",
-          render(h, { row }) {
-            return h("span", {}, _.dict.getLabel("girdLevel", row.girdLevel) || '-');
-          },
-        },
-        {
-          prop: "plottingStatus",
-          align: "center",
-          label: "标绘状态",
-          render(h, { row }) {
-            return h(
-              "span",
-              {
-                style: {
-                  color: _.dict.getColor("plottingStatus", row.plottingStatus),
-                },
-              },
-              _.dict.getLabel("plottingStatus", row.plottingStatus)
-            );
-          },
-        },
-        {
-          prop: "createTime",
-          align: "center",
-          label: "创建时间",
-          render(h, { row }) {
-            return h("span", {}, row.createTime.substring(0, 11));
-          },
-        },
-        {
-          prop: "girdMemberNames",
-          align: "center",
-          width: 200,
-          label: "网格员",
-        },
       ];
     },
   },
   methods: {
-    getCorpLocation(){
-      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
-        if(res.code==0){
-          this.location = res.data
-        }
-      })
-    },
     handleNodeClick(val) {
-      this.info = { ...val };
+      this.info = {...val};
       this.searchId = val.id;
       this.getList();
     },
     getTreeList() {
-      this.instance
+      this.instance.post("/app/appgirdinfo/listAllByTop").then(res => {
-        .post("/app/appgirdinfo/listByTop", null, null)
+        if (res?.data) {
-        .then((res) => {
+          this.treeObj.treeList = [res.data];
-          if (res.code == 0) {
+          this.$nextTick(() => {
-            this.treeObj.treeList = [...res.data];
+            if (this.treeObj.treeList.length && !this.info.girdLevel) {
-            this.info = { ...this.treeObj.treeList[0] };
+              this.$refs.tree.setCurrentKey(this.treeObj.treeList[0].id)
-
+              this.info = {...this.treeObj.treeList[0]};
-            this.$nextTick(() => {
+            } else {
-              this.treeObj.treeList.length && this.$refs.tree.setCurrentKey(this.treeObj.treeList[0].id)
+              this.$refs.tree.setCurrentKey(this.info.id)
-            })
+            }
-          }
+          })
-        });
+        }
+      });
     },
     filterNode(value, data) {
       if (!value) return true;
@@ -331,59 +243,60 @@ export default {
     },
     deleteById(ids) {
       ids &&
-        this.$confirm("是否要删除该网格区块？", {
+      this.$confirm("删除网格后，会清除网格内网格员和责任家庭信息，如有下级网格，会同步删除下级网格所有数据!", {
-          type: "error",
+        type: "error",
+      })
+      .then(() => {
+        this.instance
+        .post("/app/appgirdinfo/delete", null, {
+          params: {ids},
         })
-          .then(() => {
+        .then((res) => {
-            this.instance
+          if (res?.code == 0) {
-              .post("/app/appgirdinfo/delete", null, {
+            this.$message.success("删除成功!");
-                params: { ids },
-              })
-              .then((res) => {
-                if (res?.code == 0) {
-                  this.$message.success("删除成功!");
 
-                  this.getList();
+            this.getList();
-                }
+            this.getTreeList();
-              });
+          }
-          })
+        });
-          .catch(() => {});
+      })
+      .catch(() => {
+      });
     },
     deleteTree(ids) {
       ids &&
-        this.$confirm("是否要删除该网格区块？", {
+      this.$confirm("是否要删除该网格区块？", {
-          type: "error",
+        type: "error",
-        })
+      })
-          .then(() => {
+      .then(() => {
-            this.instance
+        this.instance
-              .post("/app/appgirdinfo/delete", null, {
+        .post("/app/appgirdinfo/delete", null, {
-                params: { ids },
+          params: {ids},
-              })
-              .then((res) => {
-                if (res?.code == 0) {
-                  this.$message.success("删除成功!");
-
-                  this.getTreeList();
-                }
-              });
-          })
-          .catch(() => {});
-    },
-    getList() {
-      this.instance
-        .post("/app/appgirdinfo/list", null, {
-          params: {
-            ...this.searchObj,
-            ...this.page,
-            parentGirdId: this.info.girdLevel === '0' ? '' : this.searchId,
-          },
         })
         .then((res) => {
-          if (res?.data) {
+          if (res?.code == 0) {
-            this.tableData = res.data.records;
+            this.$message.success("删除成功!");
-            this.page.total = res.data.total;
+
+            this.getTreeList();
           }
         });
+      })
+      .catch(() => {
+      });
+    },
+    getList() {
+      this.instance.post("/app/appgirdinfo/list", null, {
+        params: {
+          ...this.searchObj,
+          ...this.page,
+          parentGirdId: this.info.girdLevel === '0' ? '' : this.searchId,
+        },
+      }).then((res) => {
+        if (res?.data) {
+          this.tableData = res.data.records;
+          this.page.total = res.data.total;
+        }
+      });
     },
     handleSelectionChange(val) {
       this.ids = [];
@@ -393,14 +306,13 @@ export default {
     },
     //添加二级网格
     addTwoLevel() {
-      this.info = { ...this.treeObj.treeList[0] };
+      this.info = {...this.treeObj.treeList[0]};
       this.toAdd()
     },
     toAdd() {
-      this.$emit('change', {
+      let {id: parentGirdId, girdName: parentGirdName} = this.info
-        type: 'Add',
+      this.$router.push({
-        params: this.info,
+        hash: "#add", query: {parentGirdId, parentGirdName}
-        isEdit: this.isEdit
       })
     },
     goBack() {
@@ -410,165 +322,16 @@ export default {
         this.getTreeList();
       });
     },
-    poltting(row) {
+    showEdit(id) {
-      this.showMap = true;
+      this.$router.push({hash: "#add", query: {id}})
-      this.editRow = { ...row };
-      AMapLoader.load({
-        key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: ["AMap.PolygonEditor", "AMap.MouseTool", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-        AMapUI: {
-          // 是否加载 AMapUI，缺省不加载
-          version: "1.1", // AMapUI 缺省 1.1
-          plugins: [], // 需要加载的 AMapUI ui插件
-        },
-      })
-        .then((AMap) => {
-          this.map = new AMap.Map("container", {
-            resizeEnable: true,
-            zoom: 14,
-          });
-          if (this.editRow.plottingStatus == 1) {
-            let path = [];
-            this.editRow.points.map((e, index) => {
-              path[index] = [e.lng, e.lat];
-            });
-            let polygon = new AMap.Polygon({
-              path: path,
-              strokeColor: "#FF33FF",
-              strokeWeight: 6,
-              strokeOpacity: 0.2,
-              fillOpacity: 0.4,
-              fillColor: "#1791fc",
-              zIndex: 50,
-              bubble: true,
-            });
-            this.map.add([polygon]);
-            this.map.setFitView();
-            this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
-          } else {
-            this.mouseTool = new AMap.MouseTool(this.map);
-            this.placeSearch = new AMap.PlaceSearch({
-              pageSize: 3, // 单页显示结果条数
-              pageIndex: 1, // 页码
-              city: "", // 兴趣点城市
-              citylimit: false, //是否强制限制在设置的城市内搜索
-              map: this.map, // 展现结果的地图实例
-              panel: "panel", // 结果列表将在此容器中进行展示。
-              autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
-            });
-            this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
-            this.eventOn();
-          }
-        })
-        .catch((e) => {
-          console.log(e);
-        });
-    },
-    see(row) {
-      this.info = { ...row };
-      this.isEdit = true;
-     this.toAdd()
-    },
-    draw(type) {
-      switch (type) {
-        case "marker": {
-          this.mouseTool.marker({
-            //同Marker的Option设置
-          });
-          break;
-        }
-        case "polyline": {
-          this.mouseTool.polyline({
-            strokeColor: "#80d8ff",
-            //同Polyline的Option设置
-          });
-          break;
-        }
-        case "polygon": {
-          this.mouseTool.polygon({
-            fillColor: "#00b0ff",
-            strokeColor: "#80d8ff",
-            borderWeight: 2,
-            strokeWeight: 4,
-            //同Polygon的Option设置
-          });
-          break;
-        }
-        case "rectangle": {
-          this.mouseTool.rectangle({
-            fillColor: "#00b0ff",
-            strokeColor: "#80d8ff",
-            //同Polygon的Option设置
-          });
-          break;
-        }
-        case "circle": {
-          this.mouseTool.circle({
-            fillColor: "#00b0ff",
-            strokeColor: "#80d8ff",
-            //同Circle的Option设置
-          });
-          break;
-        }
-      }
     },
     //map搜索
-    addressChange(val) {
+    confirm(row, points) {
-      this.placeSearch.search(val);
+      this.instance.post(`/app/appgirdinfo/addOrUpdate`, {...row, points}).then((res) => {
-    },
+        if (res.code == 0) {
-    close() {
+          this.$message.success("提交成功!")
-      this.mouseTool.close(true);
+          this.getList();
-    },
+        }
-    clear() {
-      this.map.remove(this.overlays);
-      this.overlays = [];
-      this.path = [];
-    },
-    beginPoltting() {
-      this.polyEditor.open();
-    },
-    finishPoltting() {
-      this.polyEditor.close();
-    },
-    confirm() {
-      let path = [];
-      if (this.editRow.plottingStatus == 1) {
-        this.polyEditor
-          .getTarget()
-          .getPath()
-          .map((e) => {
-            path.push({ lng: e.lng, lat: e.lat });
-          });
-      } else {
-        path = [...this.path];
-      }
-      delete this.editRow.points;
-      this.instance
-        .post(
-          `/app/appgirdinfo/addOrUpdate`,
-          {
-            ...this.editRow,
-            points: path,
-          },
-          null
-        )
-        .then((res) => {
-          if (res.code == 0) {
-            this.getList();
-            this.showMap = false;
-          }
-        });
-    },
-    eventOn() {
-      this.path = [];
-      this.overlays = [];
-      this.map.on("mousemove", this.showInfoMove, this);
-      this.mouseTool.on("draw", ({ type, obj }) => {
-        obj.getPath().map((e) => {
-          this.path.push({ lat: e.getLat(), lng: e.getLng() });
-        });
-        this.overlays.push(obj);
       });
     },
     resetSearch() {
@@ -577,6 +340,19 @@ export default {
       });
       this.getList();
     },
+    showGridMembers(row) {
+      if (row.girdMemberNumber > 0) {
+        this.gridInfo = this.$copy(row)
+        this.instance.post("/app/appgirdmemberinfo/listByGirdIdByThree", null, {
+          params: {girdId: row.id}
+        }).then(res => {
+          if (res?.data) {
+            this.gridInfo.tableData = res.data
+            this.dialog = true
+          }
+        })
+      } else this.$message.warning("当前网格无成员")
+    }
   },
 };
 </script>
@@ -585,11 +361,12 @@ export default {
 .app-grid-block {
   width: 100%;
   height: 100%;
+
   ::v-deep .el-tree {
     background: transparent;
 
     .el-tree-node__expand-icon.is-leaf {
-      color: transparent!important;
+      color: transparent !important;
     }
 
     .el-tree-node__content > .el-tree-node__expand-icon {
@@ -616,52 +393,60 @@ export default {
     }
 
     .is-current > .el-tree-node__content {
+      color: #fff !important;
+
       &:hover {
         background: #2266FF;
         color: #fff;
       }
 
       background: #2266FF;
-      
+
-      span {
+      .el-tooltip {
         color: #fff;
       }
     }
   }
 
+  .flex-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-all;
+
+    & > div {
+      display: flex;
+    }
+  }
+
   .mt10 {
     padding: 8px 0;
   }
 
-  .map {
+  ::v-deep.fullscreenMap {
-    width: 780px;
+    .el-dialog {
-    position: relative;
+      display: flex;
-    overflow: hidden;
+      flex-direction: column;
 
-    .container {
+      .el-dialog__body {
-      width: 760px;
+        padding: 0;
-      height: 420px;
+        flex: 1;
-      border-radius: 2px;
+        min-height: 0;
-      border: 1px solid #d0d4dc;
-    }
 
-    #panel {
+        .ai-dialog__content {
-      position: absolute;
+          max-height: unset !important;
-      height: 400px;
+          padding-bottom: 0;
-      right: 30px;
+          height: 100%;
-      top: 20px;
-      width: 280px;
-      overflow: hidden;
-      z-index: 10000;
-    }
 
-    .tipinput {
+          .ai-dialog__content--wrapper {
-      position: absolute;
+            padding-right: 0 !important;
-      width: 200px;
+          }
-      height: 38px;
+        }
-      left: 20px;
+      }
-      top: 20px;
-      z-index: 10000;
     }
   }
 

project/grid/AppGridBlock/components/mapPlotting.vue

@@ -0,0 +1,231 @@
+<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"
+              @change="addressChange"
+              clearable
+              placeholder="请输入关键字"
+              id="tipinput"
+              size="medium"/>
+        </div>
+        <div id="panel"/>
+        <div class="container fill" id="container"/>
+        <div class="operationBtns" v-if="map">
+          <el-alert type="success" title="操作说明:" :closable="false">
+            <li>1.双击覆盖物即可编辑</li>
+            <li>2.编辑状态,对点双击可删除该点</li>
+            <li>3.绘制状态,右键结束绘制</li>
+            <li>4.结束编辑才能保存绘制的覆盖物信息</li>
+          </el-alert>
+          <el-button-group>
+            <el-button type="primary" @click="handleAdd">新建</el-button>
+            <el-button @click="polyEditor.close()">结束编辑</el-button>
+            <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",
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    title: {default: "地图标绘"},
+    value: Array
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  data() {
+    return {
+      map: null,
+      polyEditor: null,
+      placeSearch: null,
+      searchAddress: "",
+      overlays: [],
+      points: [],
+      dialog: false
+    }
+  },
+  methods: {
+    addressChange(val) {
+      this.placeSearch.search(val);
+    },
+    clear() {
+      this.map.remove(this.overlays);
+      this.overlays = [];
+      this.points = []
+    },
+    handleAdd() {
+      let {polyEditor} = this
+      polyEditor.close();
+      polyEditor.setTarget();
+      polyEditor.open();
+    },
+    initMap() {
+      setTimeout(() => AMapLoader.load({
+        key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ["AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        AMapUI: {
+          // 是否加载 AMapUI，缺省不加载
+          version: "1.1", // AMapUI 缺省 1.1
+          plugins: [], // 需要加载的 AMapUI ui插件
+        },
+      }).then((AMap) => {
+        this.map = new AMap.Map("container", {
+          resizeEnable: true,
+        });
+        this.placeSearch = new AMap.PlaceSearch({
+          pageSize: 5, // 单页显示结果条数
+          pageIndex: 1, // 页码
+          city: this.user.info.areaId?.substring(0, 6), // 兴趣点城市
+          citylimit: true, //是否强制限制在设置的城市内搜索
+          map: this.map, // 展现结果的地图实例
+          panel: "panel", // 结果列表将在此容器中进行展示。
+          autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+        });
+        this.polyEditor = new AMap.PolygonEditor(this.map).on('add', ({target}) => {
+          this.polyEditor.addAdsorbPolygons(target)
+          target.on("dblclick", () => {
+            this.polyEditor.setTarget(target);
+            this.polyEditor.open()
+          })
+        })
+        this.polyEditor.on('end', ({target}) => {
+          if (target) {
+            this.overlays.push(target);
+            this.points.push(target.getPath().map((e) => ({lat: e.getLat(), lng: e.getLng()})))
+          }
+        });
+        if (this.value?.length > 0) {
+          let path = this.value.map(e => [e.lng, e.lat]);
+          let polygon = new AMap.Polygon({
+            path,
+            strokeColor: "#FF33FF",
+            strokeWeight: 6,
+            strokeOpacity: 0.2,
+            fillOpacity: 0.4,
+            fillColor: "#1791fc",
+          })
+          this.map.add([polygon]);
+          this.map.setFitView();
+          this.polyEditor.addAdsorbPolygons(polygon)
+          polygon.on('dblclick', () => {
+            this.polyEditor.setTarget(polygon);
+            this.polyEditor.open()
+          });
+          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;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .container {
+      width: inherit;
+    }
+
+    #panel {
+      position: absolute;
+      height: 400px;
+      right: 30px;
+      top: 20px;
+      width: 280px;
+      overflow: hidden;
+      z-index: 10000;
+    }
+
+    .tipinput {
+      position: absolute;
+      width: 300px;
+      height: 38px;
+      left: 20px;
+      top: 20px;
+      z-index: 10000;
+    }
+
+    .operationBtns {
+      position: absolute;
+      left: 20px;
+      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>

project/grid/AppGridBlock/index.js

@@ -1,6 +0,0 @@
-import component from './AppGridBlock.vue'
-
-component.install = function (Vue) {
-  Vue.component(component.name, component)
-}
-export default component

project/grid/components/AiUserPicker.vue

@@ -0,0 +1,160 @@
+<template>
+  <section class="AiUserPicker">
+    <div v-if="$slots.default " @click="handleSelect">
+      <slot/>
+    </div>
+    <div class="AiWechatSelecter-userlist" v-else>
+      <div class="user-item" v-for="(item, index) in value" :key="index">
+        <img :src="item.avatar||'https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png'">
+        <div class="itemLabel" v-text="item.name"/>
+        <i class="iconfont iconwarning" @click="removeUser(index)"/>
+      </div>
+      <div class="user-add" @click="handleSelect">
+        <div class="userlist-add__icon">
+          <i class="el-icon-plus"/>
+        </div>
+        <span>选择</span>
+      </div>
+    </div>
+    <ai-dialog title="选择人员" :visible.sync="dialog" width="1100px" @onConfirm="submit" @closed="selected=[]">
+      <ai-table-select :instance="instance" v-model="selected" multiple action="/app/wxcp/wxuser/list?status=1"/>
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "AiUserPicker",
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    value: {default: () => []},
+    instance: Function,
+    multiple: {default: true},
+    props: {
+      default: () => ({
+        label: 'name',
+        id: 'id'
+      })
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+      selected: [],
+    }
+  },
+  methods: {
+    removeUser(i) {
+      let list = this.$copy(this.value)
+      list.splice(i, 1)
+      this.$emit("change", list)
+    },
+    submit() {
+      this.$emit("change", this.selected)
+      this.dialog = false
+    },
+    handleSelect() {
+      this.selected = this.$copy(this.value)
+      this.dialog = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiUserPicker {
+  .AiWechatSelecter-userlist {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .user-add {
+      margin-bottom: 6px;
+
+      .userlist-add__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        margin-bottom: 4px;
+        border-radius: 2px;
+        border: 1px solid #CCCCCC;
+        cursor: pointer;
+
+        &:hover {
+          opacity: 0.6;
+        }
+
+        i {
+          color: #CCCCCC;
+          font-size: 20px;
+        }
+      }
+
+      span {
+        display: block;
+        width: 100%;
+        line-height: 22px;
+        text-align: center;
+        color: #888888;
+        font-size: 14px;
+      }
+    }
+
+    .user-item {
+      position: relative;
+      margin-bottom: 6px;
+      margin-right: 16px;
+      width: 40px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
+      img {
+        display: block;
+        width: 40px;
+        height: 40px;
+        margin-bottom: 4px;
+        border-radius: 2px;
+        border: 1px solid #CCCCCC;
+      }
+
+      i {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 2px;
+        font-size: 16px;
+        background: #fff;
+        border-radius: 50%;
+        cursor: pointer;
+        transform: translate(40%, -100%);
+        height: 16px;
+
+        &:hover {
+          opacity: 0.6;
+        }
+      }
+
+      .itemLabel {
+        display: block;
+        width: 60px;
+        line-height: 22px;
+        text-align: center;
+        color: #888888;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

vue.config.js

@@ -104,16 +104,15 @@ module.exports = {
           '^/xsjr': '/'
         }
       },
-      '/grid': {
+      '/wg': {
-        target: 'http://192.168.1.87:12307',
+        target: 'http://192.168.1.34:10000',
         changeOrigin: true,
         pathRewrite: {
           //地址重写
-          '^/grid': '/'
+          '^/wg': '/'
         }
       }
     },
     disableHostCheck: true
   }
 };
-