From 92249196a42e3f2a3ff76f1930d129e868931711 Mon Sep 17 00:00:00 2001 From: aixianling Date: Wed, 16 Mar 2022 12:02:38 +0800 Subject: [PATCH] BUG 28264 --- .../apps/AppGridBlock/components/list.vue | 475 +++++++++--------- 1 file changed, 240 insertions(+), 235 deletions(-) diff --git a/project/sass/apps/AppGridBlock/components/list.vue b/project/sass/apps/AppGridBlock/components/list.vue index 7fea9f0c..f6673505 100644 --- a/project/sass/apps/AppGridBlock/components/list.vue +++ b/project/sass/apps/AppGridBlock/components/list.vue @@ -7,14 +7,14 @@ @@ -22,62 +22,63 @@ + label="网格员" + slot="user" + align="center" + fixed="right" + width="160"> + label="操作" + slot="options" + align="center" + fixed="right" + width="160">
开始编辑开始编辑 + 结束编辑 开始绘制多边形开始绘制多边形 + 清除绘制 @@ -185,7 +190,8 @@
取消 确认确认 +
@@ -197,7 +203,7 @@ import AMapLoader from "@amap/amap-jsapi-loader"; import Template from '../../../../../packages/wechat/AppAskForm/components/Template.vue'; export default { - components: { Template }, + components: {Template}, name: "List", label: "网格区块", props: { @@ -253,7 +259,7 @@ export default { colConfigs() { let _ = this; return [ - { type: 'selection'}, + {type: 'selection'}, { prop: "girdName", align: "left", @@ -268,7 +274,7 @@ export default { prop: "girdType", align: "center", label: "网格类型", - render(h, { row }) { + render(h, {row}) { return h("span", {}, _.dict.getLabel("girdType", row.girdType) || '-'); }, }, @@ -276,7 +282,7 @@ export default { prop: "girdLevel", align: "center", label: "网格层级", - render(h, { row }) { + render(h, {row}) { return h("span", {}, _.dict.getLabel("girdLevel", row.girdLevel) || '-'); }, }, @@ -284,15 +290,15 @@ export default { prop: "plottingStatus", align: "center", label: "标绘状态", - render(h, { row }) { + render(h, {row}) { return h( - "span", - { - style: { - color: _.dict.getColor("plottingStatus", row.plottingStatus), + "span", + { + style: { + color: _.dict.getColor("plottingStatus", row.plottingStatus), + }, }, - }, - _.dict.getLabel("plottingStatus", row.plottingStatus) + _.dict.getLabel("plottingStatus", row.plottingStatus) ); }, }, @@ -300,7 +306,7 @@ export default { prop: "createTime", align: "center", label: "创建时间", - render(h, { row }) { + render(h, {row}) { return h("span", {}, row.createTime.substring(0, 11)); }, }, @@ -309,41 +315,41 @@ export default { align: "center", slot: 'user', width: 200, - label: "网格员", + label: "网格员", }, ]; }, }, methods: { - getCorpLocation(){ - this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{ - if(res.code==0){ + 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 - .post("/app/appgirdinfo/listByTop", null, null) - .then((res) => { - if (res.code == 0) { - this.treeObj.treeList = [...res.data]; + .post("/app/appgirdinfo/listByTop", null, null) + .then((res) => { + if (res.code == 0) { + this.treeObj.treeList = [...res.data]; - this.$nextTick(() => { - if (this.treeObj.treeList.length && !this.info.girdLevel) { - this.$refs.tree.setCurrentKey(this.treeObj.treeList[0].id) - this.info = { ...this.treeObj.treeList[0] }; - } else { - this.$refs.tree.setCurrentKey(this.info.id) - } - }) - } - }); + this.$nextTick(() => { + if (this.treeObj.treeList.length && !this.info.girdLevel) { + this.$refs.tree.setCurrentKey(this.treeObj.treeList[0].id) + this.info = {...this.treeObj.treeList[0]}; + } else { + this.$refs.tree.setCurrentKey(this.info.id) + } + }) + } + }); }, filterNode(value, data) { if (!value) return true; @@ -351,64 +357,66 @@ export default { }, deleteById(ids) { ids && - this.$confirm("是否要删除该网格区块？", { - type: "error", + this.$confirm("是否要删除该网格区块？", { + type: "error", + }) + .then(() => { + this.instance + .post("/app/appgirdinfo/delete", null, { + params: {ids}, }) - .then(() => { - this.instance - .post("/app/appgirdinfo/delete", null, { - params: { ids }, - }) - .then((res) => { - if (res?.code == 0) { - this.$message.success("删除成功!"); + .then((res) => { + if (res?.code == 0) { + this.$message.success("删除成功!"); - this.getList(); - } - }); - }) - .catch(() => {}); + this.getList(); + } + }); + }) + .catch(() => { + }); }, deleteTree(ids) { ids && - this.$confirm("是否要删除该网格区块？", { - type: "error", + this.$confirm("是否要删除该网格区块？", { + type: "error", + }) + .then(() => { + this.instance + .post("/app/appgirdinfo/delete", null, { + params: {ids}, }) - .then(() => { - this.instance - .post("/app/appgirdinfo/delete", null, { - params: { ids }, - }) - .then((res) => { - if (res?.code == 0) { - this.$message.success("删除成功!"); + .then((res) => { + if (res?.code == 0) { + this.$message.success("删除成功!"); - this.getTreeList(); - } - }); - }) - .catch(() => {}); + 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.map(v => { - return { - ...v, - girdMemberNames: v.girdMemberNames ? v.girdMemberNames.split(',') : [] - } - }); - this.page.total = res.data.total; - } - }); + .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.map(v => { + return { + ...v, + girdMemberNames: v.girdMemberNames ? v.girdMemberNames.split(',') : [] + } + }); + this.page.total = res.data.total; + } + }); }, handleSelectionChange(val) { this.ids = []; @@ -418,7 +426,7 @@ export default { }, //添加二级网格 addTwoLevel() { - this.info = { ...this.treeObj.treeList[0] }; + this.info = {...this.treeObj.treeList[0]}; this.toAdd() }, toAdd() { @@ -437,7 +445,7 @@ export default { }, poltting(row) { this.showMap = true; - this.editRow = { ...row }; + this.editRow = {...row}; AMapLoader.load({ key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 @@ -448,52 +456,52 @@ export default { 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); + .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.info = {...row}; this.isEdit = true; - this.toAdd() + this.toAdd() }, draw(type) { switch (type) { @@ -560,39 +568,35 @@ export default { let path = []; if (this.editRow.plottingStatus == 1) { this.polyEditor - .getTarget() - .getPath() - .map((e) => { - path.push({ lng: e.lng, lat: e.lat }); - }); + .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; - } - }); + let {girdMemberNames} = this.editRow + this.instance.post(`/app/appgirdinfo/addOrUpdate`, { + ...this.editRow, + points: path, + girdMemberNames: girdMemberNames?.toString() + }).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 }) => { + this.mouseTool.on("draw", ({type, obj}) => { obj.getPath().map((e) => { console.log(e) - this.path.push({ lat: e.getLat(), lng: e.getLng() }); + this.path.push({lat: e.getLat(), lng: e.getLng()}); }); this.overlays.push(obj); }); @@ -611,11 +615,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 { @@ -648,7 +653,7 @@ export default { } background: #2266FF; - + span { color: #fff; }