网格管理调整完毕

This commit is contained in:
aixianling
2022-04-28 18:39:32 +08:00
parent 86a1128d9a
commit 4cb734cbe0
12 changed files with 305 additions and 480 deletions

View File

@@ -1,76 +0,0 @@
<template>
<div class="AppGridBlock">
<keep-alive include="List">
<component
ref="component"
:is="component"
@change="onChange"
:params="params"
:instance="instance"
:dict="dict"
:isEdit="isEdit"
></component>
</keep-alive>
</div>
</template>
<script>
import List from "./components/list";
import Add from "./components/add";
export default {
name: "AppGridBlock",
label: "网格区块(saas)",
props: {
instance: Function,
dict: Object,
},
data() {
return {
component: "List",
params: {},
include: [],
isEdit: false
};
},
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.getTreeList();
this.$refs.component.getList();
}
});
}
},
},
};
</script>
<style lang="scss">
.AppGridBlock {
height: 100%;
background: #f3f6f9;
overflow: auto;
}
</style>

View File

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

View File

@@ -1,199 +0,0 @@
<template>
<ai-list class="list">
<template slot="title">
<ai-title title="网格员管理" :isShowBottomBorder="true"></ai-title>
</template>
<template slot="content">
<ai-search-bar bottomBorder>
<template slot="left">
<el-date-picker
v-model="searchObj.selectionDate"
type="date"
@change="(page.current = 1), getList()"
value-format="yyyy-MM-dd"
size="small"
placeholder="选用时间">
</el-date-picker>
</template>
<template slot="right">
<el-input
v-model="searchObj.name"
size="small"
placeholder="责任网格"
@keyup.enter.native="(page.current = 1), getList()"
clearable
@clear="(searchObj.name = '', page.current = 1), getList()"
suffix-icon="iconfont iconSearch" />
</template>
</ai-search-bar>
<ai-search-bar style="padding: 16px 0 0">
<template slot="left">
<el-button
icon="iconfont iconAdd"
type="primary"
size="small"
@click="add('')"
>添加</el-button
>
<el-button
icon="iconfont iconDelete"
@click="deleteById(ids.join(','))"
:disabled="!Boolean(ids.length)"
>删除</el-button
>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="page.total"
ref="aitableex"
:current.sync="page.current"
:size.sync="page.size"
@selection-change="(v) => (ids = v.map((e) => e.id))"
@getList="getList()">
<el-table-column label="操作" slot="options" align="center" fixed="right" width="170">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="toFamily(row.id)">责任家庭</el-button>
<el-button type="text" @click="add(row.id)">查看</el-button>
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
</div>
</template>
</el-table-column>
</ai-table>
</template>
</ai-list>
</template>
<script>
export default {
name: "list",
label: "网格员管理",
props: {
instance: Function,
dict: Object,
permissions: Function,
},
data() {
return {
searchObj: {
name: "",
selectionDate: "",
},
page: {
current: 1,
size: 10,
total: 0,
},
goAdd: false,
tableData: [],
fileList: [],
ids: [],
detail: {},
};
},
created() {
this.dict.load("sex", "girdMemberType", "politicsStatus", "education");
this.getList();
},
computed: {
colConfigs() {
return [
{
type: "selection",
},
{
prop: "wxUserId",
label: "网格员姓名",
openType: 'userName'
},
{
prop: "girdInfoListStr",
align: "center",
label: "责任网格",
},
{
prop: "phone",
align: "center",
label: "联系电话",
},
{
prop: "selectionDate",
align: "center",
label: "选用时间",
},
];
},
},
methods: {
getList() {
this.instance
.post("/app/appgirdmemberinfo/list", null, {
params: {
...this.searchObj,
...this.page,
},
})
.then((res) => {
if (res.code == 0) {
this.tableData = res.data.records;
this.page.total = res.data.total;
}
});
},
deleteById(ids) {
ids &&
this.$confirm("是否要删除该网格员", {
type: "error",
})
.then(() => {
this.instance
.post("/app/appgirdmemberinfo/delete", null, {
params: { ids },
})
.then((res) => {
if (res?.code == 0) {
this.$message.success("删除成功!");
this.getList();
}
});
})
.catch(() => {});
},
add(id) {
this.$emit('change', {
type: 'Add',
params: {
id: id || ''
}
})
},
toFamily (id) {
this.$emit('change', {
type: 'Family',
params: {
id
}
})
},
handleSelectionChange(val) {
this.ids = [];
val.map((e) => {
this.ids.push(e.id);
});
},
resetSearch() {
Object.keys(this.searchObj).map((e) => {
this.searchObj[e] = "";
});
this.getList();
},
},
};
</script>
<style lang="scss" scoped>
</style>

View File

@@ -0,0 +1,39 @@
<template>
<div class="AppGridBlock">
<component :is="currentPage" :instance="instance" :dict="dict"/>
</div>
</template>
<script>
import List from "./components/list";
import Add from "./components/add";
export default {
name: "AppGridBlock",
label: "网格区块(saas)",
props: {
instance: Function,
dict: Object,
},
computed: {
currentPage() {
return this.$route.hash == "#add" ? Add : List
}
},
data() {
return {
component: "List",
};
},
components: {Add, List},
};
</script>
<style lang="scss">
.AppGridBlock {
height: 100%;
background: #f3f6f9;
overflow: auto;
}
</style>

View File

@@ -3,150 +3,53 @@
<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="层级信息">
<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"
>
<el-form ref="rules" :model="forms" :rules="formRules" size="small" label-suffix="" label-width="120px">
<ai-card title="基础信息">
<template slot="content">
<div class="above">
<div class="left">
<el-form-item label="网格名称" prop="girdName">
<el-input
v-model="forms.girdName"
placeholder="请输入…"
:maxlength="50"
show-word-limit
></el-input>
</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>
<el-form-item label="网格名称" prop="girdName">
<el-input v-model="forms.girdName" placeholder="请输入…" :maxlength="50" show-word-limit clearable/>
</el-form-item>
<el-form-item label="网格长" prop="girdMemberManageList">
<AiUserGet :instance="instance" v-model="forms.girdMemberManageList" isShowUser :props="{label:'wxUserId'}"/>
</el-form-item>
<el-form-item label="网格员" prop="girdMemberList">
<AiUserGet :instance="instance" v-model="forms.girdMemberList" isShowUser :props="{label:'wxUserId'}"/>
</el-form-item>
</template>
</ai-card>
<ai-card title="其他信息">
<template slot="content">
<div class="above">
<div class="left">
<!-- <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-row type="flex">
<div class="fill">
<el-form-item label="初始日期" prop="startDate">
<el-date-picker
v-model="forms.startDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
style="width: 100%;"
>
</el-date-picker>
style="width: 100%;"/>
</el-form-item>
<el-form-item label="终止日期" prop="endDate">
<el-date-picker
v-model="forms.endDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
style="width: 100%;"
>
</el-date-picker>
<el-date-picker v-model="forms.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;"/>
</el-form-item>
</div>
<div class="right">
<div class="fill">
<el-form-item label="面积" prop="area">
<el-input
v-model="forms.area"
placeholder="面积㎡"
></el-input>
<el-input v-model="forms.area" placeholder="面积㎡" clearable/>
</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>
</el-form-item>
</template>
@@ -181,41 +84,26 @@
id="tipinput"
size="medium"
style="width: 200px"
></el-input>
/>
</div>
<div id="panel"></div>
<div id="panel"/>
<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 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="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
>
<el-button type="primary" size="medium" @click="surePotting()">确认</el-button>
</div>
</ai-dialog>
</div>
@@ -231,27 +119,12 @@ export default {
instance: Function,
dict: Object,
params: Object,
isEdit: Boolean
},
data() {
return {
forms: {
address: "",
area: "",
points: [],
endDate: "",
eventReportUnit: "",
eventReportUnitId: "",
girdCode: "",
girdLevel: "",
girdList: [],
girdName: "",
girdType: "",
isLastLevel: "",
parentGirdId: "",
parentGirdName: "",
startDate: "",
plottingStatus: "0",
girdMemberManageList: [],
girdMemberList: []
},
showMap: false,
map: "",
@@ -265,7 +138,6 @@ export default {
polyEditor: "",
title: "添加网格区块",
parentGirdInfo: {},
isAddLastLevel: false
};
},
computed: {
@@ -297,28 +169,24 @@ 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.parentGirdName = this.params.girdName;
this.isAddLastLevel = this.params.girdLevel === '1'
// this.forms.girdLevel = Number(this.info.girdLevel) + 1 +'';
// this.forms.isLastLevel = ['0','1'].includes(this.forms.girdLevel)?'0':'1';
this.title = "添加网格区块";
this.forms = this.$route.query
}
// this.getAllUnit(this.user.info.areaId);
},
methods: {
cancel(isRefresh) {
this.$emit('change', {
type: 'list',
isRefresh: !!isRefresh,
})
cancel() {
this.$router.push({})
},
//
getAllUnit(data) {
@@ -389,7 +257,7 @@ export default {
},
getCorpLocation() {
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
if (res.code == 0) {
if (res?.data) {
this.location = res.data
}
})
@@ -499,8 +367,9 @@ 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};
@@ -526,21 +395,6 @@ export default {
display: none !important;
}
.above {
overflow: hidden;
padding: 8px 0;
.left {
width: 380px;
float: left;
}
.right {
width: 380px;
float: right;
}
}
.footer-btn {
width: 92px;
}

View File

@@ -116,8 +116,8 @@
width="160">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="see(row)">编辑</el-button>
<el-button type="text" @click="poltting(row)" :disabled="row.girdLevel !== '2'">标绘</el-button>
<el-button type="text" @click="showEdit(row.id)">编辑</el-button>
<el-button type="text" @click="poltting(row)">标绘</el-button>
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
</div>
</template>
@@ -184,7 +184,7 @@
:isShowPagination="false" :show-header="false">
<el-table-column slot="tags">
<template slot-scope="{row}">
<el-tag v-if="row.tags" effect="dark">{{ row.tags || '标签' }}</el-tag>
<el-tag v-if="row.label" effect="dark" size="small">{{ row.label }}</el-tag>
</template>
</el-table-column>
</ai-table>
@@ -374,10 +374,9 @@ export default {
this.toAdd()
},
toAdd() {
this.$emit('change', {
type: 'Add',
params: this.info,
isEdit: this.isEdit
let {id: parentGirdId, girdName: parentGirdName} = this.info
this.$router.push({
hash: "#add", query: {parentGirdId, parentGirdName}
})
},
goBack() {
@@ -442,10 +441,8 @@ export default {
console.log(e);
});
},
see(row) {
this.info = {...row};
this.isEdit = true;
this.toAdd()
showEdit(id) {
this.$router.push({hash: "#add", query: {id}})
},
draw(type) {
switch (type) {

View File

@@ -8,7 +8,7 @@
:params="params"
:instance="instance"
:dict="dict"
></component>
/>
</keep-alive>
</div>
</template>

View File

@@ -0,0 +1,216 @@
<template>
<ai-list class="list">
<template slot="title">
<ai-title title="网格员管理" :isShowBottomBorder="true"></ai-title>
</template>
<template slot="content">
<ai-search-bar bottomBorder>
<template slot="left">
<el-date-picker
v-model="searchObj.selectionDate"
type="date"
@change="(page.current = 1), getList()"
value-format="yyyy-MM-dd"
size="small"
placeholder="选用时间">
</el-date-picker>
</template>
<template slot="right">
<el-input
v-model="searchObj.name"
size="small"
placeholder="责任网格"
@keyup.enter.native="(page.current = 1), getList()"
clearable
@clear="(searchObj.name = '', page.current = 1), getList()"
suffix-icon="iconfont iconSearch"/>
</template>
</ai-search-bar>
<ai-search-bar style="padding: 16px 0 0">
<template slot="left">
<el-button
icon="iconfont iconAdd"
type="primary"
size="small"
@click="add('')"
>添加
</el-button
>
<el-button
icon="iconfont iconDelete"
@click="deleteById(ids.join(','))"
:disabled="!Boolean(ids.length)"
>删除
</el-button
>
</template>
</ai-search-bar>
<ai-table :tableData="tableData"
:col-configs="colConfigs"
:total="page.total"
ref="aitableex"
:current.sync="page.current"
:size.sync="page.size"
@selection-change="(v) => (ids = v.map((e) => e.id))"
@getList="getList()">
<el-table-column label="操作" slot="options" align="center" fixed="right" width="200">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="setTag(row)">标签</el-button>
<el-button type="text" @click="toFamily(row.id)">责任家庭</el-button>
<el-button type="text" @click="add(row.id)">查看</el-button>
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
</div>
</template>
</el-table-column>
</ai-table>
<ai-dialog title="设置标签" :visible.sync="dialog" @closed="form={}" @onConfirm="submit"
width="400px">
<el-form :model="form" size="small" ref="DialogForm" :rules="rules" label-width="0">
<el-form-item prop="label">
<el-input v-model="form.label" maxlength="10" show-word-limit clearable placeholder="请输入标签信息,最多10个字"/>
</el-form-item>
</el-form>
</ai-dialog>
</template>
</ai-list>
</template>
<script>
export default {
name: "list",
label: "网格员管理",
props: {
instance: Function,
dict: Object,
permissions: Function,
},
data() {
return {
searchObj: {
name: "",
selectionDate: "",
},
page: {
current: 1,
size: 10,
total: 0,
},
goAdd: false,
tableData: [],
fileList: [],
ids: [],
detail: {},
dialog: false,
form: {},
rules: {}
};
},
created() {
this.dict.load("sex", "girdMemberType", "politicsStatus", "education");
this.getList();
},
computed: {
colConfigs() {
return [
{type: "selection"},
{prop: "wxUserId", label: "网格员姓名", openType: 'userName'},
{prop: "girdInfoListStr", align: "center", label: "责任网格"},
{prop: "phone", align: "center", label: "联系电话"},
{prop: "label", align: "center", label: "标签信息"},
{prop: "selectionDate", align: "center", label: "选用时间"},
];
},
},
methods: {
getList() {
this.instance
.post("/app/appgirdmemberinfo/list", null, {
params: {
...this.searchObj,
...this.page,
},
})
.then((res) => {
if (res.code == 0) {
this.tableData = res.data.records;
this.page.total = res.data.total;
}
});
},
deleteById(ids) {
ids &&
this.$confirm("是否要删除该网格员", {
type: "error",
})
.then(() => {
this.instance
.post("/app/appgirdmemberinfo/delete", null, {
params: {ids},
})
.then((res) => {
if (res?.code == 0) {
this.$message.success("删除成功!");
this.getList();
}
});
})
.catch(() => {
});
},
add(id) {
this.$emit('change', {
type: 'Add',
params: {
id: id || ''
}
})
},
toFamily(id) {
this.$emit('change', {
type: 'Family',
params: {
id
}
})
},
handleSelectionChange(val) {
this.ids = [];
val.map((e) => {
this.ids.push(e.id);
});
},
resetSearch() {
Object.keys(this.searchObj).map((e) => {
this.searchObj[e] = "";
});
this.getList();
},
setTag(row) {
this.form = this.$copy(row)
this.dialog = true
},
submit() {
this.$refs.DialogForm.validate(v => {
if (v) {
let loading = this.$loading({text: "提交中...", background: 'rgba(0,0,0,.8)'})
let {id, label} = this.form
this.instance.post("/app/appgirdmemberinfo/updateGirdMemberLabelById", null, {
params: {id, label}
}).then(res => {
loading.close()
if (res?.code == 0) {
this.$message.success("提交成功!")
this.dialog = false
this.getList()
}
}).catch(() => loading.close())
}
})
},
},
};
</script>
<style lang="scss" scoped>
</style>