kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

合并网格管理员并权限控制

Browse Source
This commit is contained in:
aixianling
2022-04-29 14:32:08 +08:00
parent cf4ae0bc58
commit abe2f9892e
22 changed files with 133 additions and 1835 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
packages/grid/AppGridBlock/AppGridBlock.vue Normal file
View File

@@ -0,0 +1,76 @@
<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: "网格区块",
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.getList()
this.$refs.component.getTreeList()
}
});
}
},
},
};
</script>
<style lang="scss">
.AppGridBlock {
height: 100%;
background: #f3f6f9;
overflow: auto;
}
</style>

580
packages/grid/AppGridBlock/components/add.vue Normal file
View File

@@ -0,0 +1,580 @@
<template>
<div class="add-block">
<ai-detail>
<template #title>
<ai-title
:title="title"
: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"
>
<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>
</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-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>
</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-form-item>
</div>
<div class="right">
<el-form-item label="面积" prop="area">
<el-input
v-model="forms.area"
placeholder="面积㎡"
></el-input>
</el-form-item>
</div>
</div>
<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-button size="small" @click="showMap = true">地图标绘</el-button>
</el-form-item>
</template>
</ai-card>
</el-form>
</template>
<template #footer>
<el-button @click="cancel(false)" class="delete-btn footer-btn">
取 消
</el-button>
<el-button type="primary" @click="save()" class="footer-btn">
提 交
</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";
export default {
name: "addBlock",
props: {
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",
},
showMap: false,
map: "",
mouseTool: "",
searchAddress: "",
placeSearch: "",
overlays: [],
options: [],
path: [],
location: {},
polyEditor: "",
title: "添加网格区块",
parentGirdInfo: {},
isAddLastLevel: false
};
},
computed: {
...mapState(["user"]),
formRules() {
return {
girdName: [
{required: true, message: "请输入网格名称", trigger: "change"},
],
girdLevel: [
{required: true, message: "请选择网格层级", trigger: "change"},
],
girdCode: [
{required: true, message: "请输入网格编号"},
{pattern: /^\d+$/g, message: "请输入数字"},
]
};
},
unitProps() {
return {
value: "id",
checkStrictly: true,
emitPath: false,
};
},
unitOps() {
let initData = JSON.parse(JSON.stringify(this.options)),
ops = initData.filter((e) => !e.parentId);
ops.map((e) => this.addChild(e, initData));
return ops;
},
},
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.getAllUnit(this.user.info.areaId);
},
methods: {
cancel(isRefresh) {
this.$emit('change', {
type: 'list',
isRefresh: !!isRefresh,
})
},
// 获取所有单位
getAllUnit(data) {
this.options = [];
this.instance.post("/admin/sysunit/getAll", null, {
params: {areaId: data},
}).then((res) => {
if (res?.data) {
res.data = res.data.map((a) => {
return {...a, label: a.name}
});
this.options = res.data.filter((e) => !e.parentId);
this.options.map((t) => this.addChild(t, res.data));
}
});
},
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) {
this.instance
.post(
`/app/appgirdinfo/addOrUpdate`,
{
...this.forms,
},
null
)
.then((res) => {
if (res.code == 0) {
this.cancel(true)
}
});
} else {
console.log("error submit!!");
return false;
}
});
},
searchDetail() {
this.instance.post(`/app/appgirdinfo/queryDetailById`, null, {
params: {id: this.params.id},
}).then((res) => {
if (res?.data) {
this.forms = {...res.data};
this.parentGirdInfo = res.data.parentGirdInfo;
this.forms.parentGirdName = res.data.parentGirdInfo && res.data.parentGirdInfo.girdName;
}
});
},
},
};
</script>
<style lang="scss" scoped>
.add-block {
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>

696
packages/grid/AppGridBlock/components/list.vue Normal file
View File

@@ -0,0 +1,696 @@
<template>
<div 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)">
<el-tree
:data="treeObj.treeList"
:props="treeObj.defaultProps"
@node-click="handleNodeClick"
node-key="id"
ref="tree"
:filter-node-method="filterNode"
default-expand-all
highlight-current
/>
</ai-tree-menu>
</template>
<template slot="content">
<ai-search-bar>
<template slot="left">
<el-date-picker
v-model="searchObj.createTimeStr"
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.girdName"
size="small"
placeholder="输入网格名称"
@keyup.enter.native="(page.current = 1), getList()"
clearable
v-throttle="() => {page.current = 1, getList()}"
@clear="(searchObj.girdName = '', page.current = 1), getList()"
suffix-icon="iconfont iconSearch"
/>
</template>
</ai-search-bar>
<ai-search-bar bottomBorder>
<template slot="left">
<el-button
type="primary"
icon="iconfont iconAdd"
:disabled="info.girdLevel === '3'"
@click="(isEdit = false), toAdd()"
>新增
</el-button>
<el-button
icon="iconfont iconDelete"
@click="deleteById(ids.join(','))"
:disabled="!Boolean(ids.length)"
>
删除
</el-button>
<ai-download
:instance="instance"
url="/app/appgirdinfo/exportGirdInfo"
:params="{ ...searchObj, ids: ids.join(',') }"
fileName="网格区块"
>
<el-button icon="iconfont iconExported" size="small"
>导出全部</el-button
>
</ai-download>
<ai-import
ref="import"
title="导入"
name="网格区块"
url="/app/appgirdinfo/downloadGirdInfo"
importUrl="/app/appgirdinfo/importGirdInfo"
suffixName="xlsx"
:customCliker="true"
:instance="instance"
>
<template slot="tips">
<p>
如果表格中已经存在数据，则会被本次导入的数据覆盖；不存在数据，系统将生成新的标准记录；
</p>
</template>
<el-button size="small" icon="iconfont iconImport"
>导入</el-button
>
</ai-import>
</template>
</ai-search-bar>
<ai-table
class="mt10"
: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
slot="selectId"
type="selection"
align="center"
width="40"
>
</el-table-column>
<el-table-column
label="操作"
slot="options"
align="center"
fixed="right"
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="deleteById(row.id)">删除</el-button>
</div>
</template>
</el-table-column>
</ai-table>
</template>
</ai-list>
<ai-dialog
title="网格范围"
:visible.sync="showMap"
:customFooter="true"
:destroyOnClose="true"
border
width="850px"
>
<div class="map">
<div class="tipinput">
<el-input
v-if="editRow.plottingStatus == 0"
v-model="searchAddress"
@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>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
name: "List",
label: "网格区块",
props: {
instance: Function,
dict: Object,
permissions: Function,
},
data() {
return {
treeObj: {
treeList: [],
defaultProps: {
children: "girdList",
label: "girdName",
},
defaultExpandedKeys: [],
},
filterText: "",
page: {
current: 1,
size: 10,
total: 0,
},
searchObj: {
createTimeStr: "",
girdName: "",
},
tableData: [],
info: {},
ids: [],
showMap: false,
map: "",
polyEditor: "",
editRow: {},
searchAddress: "",
mouseTool: "",
placeSearch: "",
path: [],
overlays: [],
isEdit: false,
searchId: "",
fileList: [],
location: {}
};
},
created() {
this.getTreeList();
this.getList();
this.getCorpLocation()
this.dict.load("girdLevel", "girdType", "isLastLevel", "plottingStatus");
},
computed: {
colConfigs() {
let _ = this;
return [
{ type: 'selection'},
{
prop: "girdName",
align: "left",
label: "网格名称",
},
{
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.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];
this.info = { ...this.treeObj.treeList[0] };
this.$nextTick(() => {
this.treeObj.treeList.length && this.$refs.tree.setCurrentKey(this.treeObj.treeList[0].id)
})
}
});
},
filterNode(value, data) {
if (!value) return true;
return data.girdName.indexOf(value) !== -1;
},
deleteById(ids) {
ids &&
this.$confirm("是否要删除该网格区块？", {
type: "error",
})
.then(() => {
this.instance
.post("/app/appgirdinfo/delete", null, {
params: { ids },
})
.then((res) => {
if (res?.code == 0) {
this.$message.success("删除成功!");
this.getList();
}
});
})
.catch(() => {});
},
deleteTree(ids) {
ids &&
this.$confirm("是否要删除该网格区块？", {
type: "error",
})
.then(() => {
this.instance
.post("/app/appgirdinfo/delete", null, {
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) {
this.tableData = res.data.records;
this.page.total = res.data.total;
}
});
},
handleSelectionChange(val) {
this.ids = [];
val.map((e) => {
this.ids.push(e.id);
});
},
//添加二级网格
addTwoLevel() {
this.info = { ...this.treeObj.treeList[0] };
this.toAdd()
},
toAdd() {
this.$emit('change', {
type: 'Add',
params: this.info,
isEdit: this.isEdit
})
},
goBack() {
this.isAdd = false;
this.$nextTick(() => {
this.getList();
this.getTreeList();
});
},
poltting(row) {
this.showMap = true;
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) {
this.placeSearch.search(val);
},
close() {
this.mouseTool.close(true);
},
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() {
Object.keys(this.searchObj).map((e) => {
this.searchObj[e] = "";
});
this.getList();
},
},
};
</script>
<style lang="scss" scoped>
.app-grid-block {
width: 100%;
height: 100%;
::v-deep .el-tree {
background: transparent;
.el-tree-node__expand-icon.is-leaf {
color: transparent!important;
}
.el-tree-node__content > .el-tree-node__expand-icon {
padding: 4px;
}
.el-tree-node__content {
height: 32px;
}
.el-tree__empty-text {
color: #222;
font-size: 14px;
}
.el-tree-node__children .el-tree-node__content {
height: 32px;
}
.el-tree-node__content:hover {
background: #E8EFFF;
color: #222222;
border-radius: 2px;
}
.is-current > .el-tree-node__content {
&:hover {
background: #2266FF;
color: #fff;
}
background: #2266FF;
span {
color: #fff;
}
}
}
.mt10 {
padding: 8px 0;
}
.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;
}
}
::v-deep .treePanel {
display: flex;
flex-direction: column;
.el-tree {
min-height: 0;
flex: 1;
}
footer {
width: 100%;
height: 32px;
background-color: #fff;
display: flex;
align-items: center;
span {
width: 33.33%;
text-align: center;
cursor: pointer;
}
.el-button {
width: 33.33%;
}
}
}
}
</style>

6
packages/grid/AppGridBlock/index.js Normal file
View File

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

70
packages/grid/AppGridMap/AppGridMap.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<div class="AppGridMap">
<keep-alive :include="['List']">
<component
ref="component"
:is="component"
@change="onChange"
:params="params"
:instance="instance"
:dict="dict"
></component>
</keep-alive>
</div>
</template>
<script>
import List from "./components/list";
export default {
name: "AppGridMap",
label: "网格地图",
props: {
instance: Function,
dict: Object,
},
data() {
return {
component: "List",
params: {},
include: [],
};
},
components: {
List,
},
mounted() {},
methods: {
onChange(data) {
if (data.type === "Add") {
this.component = "Add";
this.params = data.params;
}
if (data.type === "list") {
this.component = "List";
this.params = data.params;
this.$nextTick(() => {
if (data.isRefresh) {
this.$refs.component.getList();
}
});
}
},
},
};
</script>
<style lang="scss">
.AppGridMap {
height: 100%;
background: #f3f6f9;
overflow: auto;
}
</style>

669
packages/grid/AppGridMap/components/list.vue Normal file
View File

@@ -0,0 +1,669 @@
<template>
<div class="gridMap">
<ai-t-map :map.sync="map" ref="AiTMap" :lib.sync="mapLib" @loaded="onMapInit" :libraries="['geometry','service', 'tools']"/>
<div class="drawer" ref="drawer">
<div v-if="show" class="drawer-content">
<b>网格地图</b>
<div class="tree">
<div class="input">
<el-input placeholder="请输入网格名称" v-model="filterText" size="mini" suffix-icon="el-icon-search"/>
</div>
<header class="header">
<span>网格列表</span>
</header>
<div class="tree-div">
<el-tree
:data="treeObj.treeList"
:props="treeObj.defaultProps"
@node-click="handleNodeClick"
node-key="id"
ref="tree"
:expand-on-click-node="false"
:filter-node-method="filterNode"
default-expand-all
highlight-current>
</el-tree>
</div>
</div>
</div>
<div class="rightBtn" :class="{show}" @click="show=!show">
<i class="iconfont iconArrow_Right"/>
</div>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'AppGridMap',
label: "网格地图",
props: {
instance: Function,
dict: Object,
permissions: Function,
},
data() {
return {
map: null,
mapLib: null,
show: true,
retryMapCount: 0,
polygons: [],
drawer: false,
filterText: "",
treeObj: {
treeList: [],
defaultProps: {
children: "girdList",
label: "girdName",
},
defaultExpandedKeys: [],
},
ops: {},
path: [],
searchObj: {
onlineStatus: "",
girdMemberName: "",
},
member: {
memberList: [],
},
currInfo: {},
infoWindowHtml: "",
marker: {},
activeId: null,
labels: []
};
},
computed: {
...mapState(['user']),
},
created() {
this.dict.load("onlineStatus")
this.getTreeList().then(() => {
this.getLeafNodes()
})
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.girdName.indexOf(value) !== -1;
},
getTreeList() {
return this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
if (res.code == 0) {
this.treeObj.treeList = res.data;
this.$nextTick(() => {
res.data.length && this.$refs.tree.setCurrentKey(res.data[0].id)
})
}
})
},
onMapInit () {
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
if (res.code === 0) {
this.map.setCenter(new this.mapLib.LatLng(res.data.lat, res.data.lng))
}
})
},
getLeafNodes() {
this.instance.post(`/app/appgirdinfo/listAll2`).then((res) => {
if (res?.data) {
const arr = res.data.map(v => {
return {
id: v.id,
girdName: v.girdName,
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
}
}).filter(v => v.points.length)
this.renderGridMap(arr)
}
})
},
handleNodeClick (val) {
if (val.girdLevel === '0') {
this.getLeafNodes()
return false
}
this.instance.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${val.id}`).then((res) => {
if (res?.data) {
const arr = res.data.map(v => {
return {
id: v.id,
girdName: v.girdName,
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
}
}).filter(v => v.points.length)
if (!arr.length) {
return this.$message.error('该网格还未标绘')
}
this.renderGridMap(arr)
}
})
},
fitBounds(latLngList, count = 0) {
let {mapLib: TMap} = this
if (TMap) {
if (latLngList.length === 0) {
return null;
}
let boundsN = latLngList[0].getLat();
let boundsS = boundsN;
let boundsW = latLngList[0].getLng();
let boundsE = boundsW;
latLngList.forEach((point) => {
point.getLat() > boundsN && (boundsN = point.getLat());
point.getLat() < boundsS && (boundsS = point.getLat());
point.getLng() > boundsE && (boundsE = point.getLng());
point.getLng() < boundsW && (boundsW = point.getLng());
});
return new TMap.LatLngBounds(
new TMap.LatLng(boundsS, boundsW),
new TMap.LatLng(boundsN, boundsE)
);
} else {
if (count < 5) {
this.fitBounds(latLngList, ++count)
}
}
},
renderGridMap(paths) {
let {map, mapLib: TMap } = this
if (TMap) {
if (this.polygons.length > 0) {
this.polygons.forEach(e => e.destroy())
this.labels.forEach(e => {
e.destroy(e.id)
})
this.polygons = []
this.labels = []
}
if (paths?.length > 0) {
let bounds = []
paths.forEach((path, i) => {
let polygon = new TMap.MultiPolygon({
map, styles: {
default: new TMap.PolygonStyle({
showBorder: true,
borderColor: '#5088FF',
borderWidth: 2,
color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
})
},
id: path.id,
geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
})
this.polygons.push(polygon)
bounds.push(this.fitBounds(path.points.map(e => new TMap.LatLng(e[1], e[0]))))
polygon.on('click', e => {
// const id = e.target.id
// this.getGridInfo(id)
})
const points = path.points.map(e => new TMap.LatLng(e[1], e[0]))
var position = TMap.geometry.computeCentroid(points)
let label = new TMap.MultiLabel({
id: `label~${path.id}`,
data: path.id,
map: map,
styles: {
building: new TMap.LabelStyle({
color: '#3777FF',
size: 20,
alignment: 'center',
verticalAlignment: 'middle'
})
},
geometries: [
{
id: `label-class-${i}`,
styleId: 'building',
position: position,
content: path.girdName,
}
]
})
this.labels.push(label)
label.on('click', e => {
// this.getGridInfo(e.target.id.split('~')[1])
});
})
bounds = bounds.reduce((a, b) => {
return this.fitBounds([
a.getNorthEast(),
a.getSouthWest(),
b.getNorthEast(),
b.getSouthWest(),
]);
});
map.fitBounds(bounds, {padding: 100})
}
}
},
hasClass(ele, cls) {
return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
},
addClass(ele, cls) {
if (!this.hasClass(ele, cls)) ele.className += " " + cls;
},
removeClass(ele, cls) {
if (this.hasClass(ele, cls)) {
const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
ele.className = ele.className.replace(reg, " ");
}
},
changClass(ele, className) {
if (!this.hasClass(ele, className)) {
this.addClass(ele, className);
} else {
this.removeClass(ele, className);
}
},
percentage() {
if (this.member.onlineNumber == 0) {
return 0;
} else {
return (
100 *
(this.member.onlineNumber / this.member.allMemberNumber)
).toFixed(2);
}
},
getMemberList() {
this.instance.post(`/app/appgirdmemberinfo/queryGirdMemberByMap`, this.searchObj).then((res) => {
if (res.code == 0) {
let markers = [];
this.member = res.data;
this.member.memberList.map((e) => {
if (e.onlineStatus == "1") {
markers.push({lng: e.lng, lat: e.lat, name: e.name});
}
});
this.initMap(null, null, markers);
}
});
},
clickMember(marker) {
if (marker.onlineStatus == 1) {
this.activeId = marker.id;
this.marker = marker;
this.infoWindowContent(marker);
}
},
infoWindowContent(marker) {
this.instance
.post(`/app/location/xyToAddress`, null, {
params: {
x: marker.lat,
y: marker.lng,
},
})
.then((res) => {
if (res.code == 0) {
this.infoWindowHtml = `<div class="info">
<p>
<span class="name">${marker.name}</span>
<span class="lat">${marker.lng},${marker.lat}</span>
</p>
<p>
<span class="lat">${res.data}</span>
</p>
<p class="address">
<span class="iconfont iconarea" id="addressSpan">当日轨迹</span>
</p>
</div>`;
this.initMap(false, marker);
}
});
},
queryTrajectory() {
this.instance
.post(`/app/appgirdmembertrajectory/queryTrajectory`, null, {
params: {
userId: this.marker.userId,
},
})
.then((res) => {
if (res.code == 0) {
let path = [];
if (res.data) {
res.data.map((e, index) => {
path[index] = [e.lng, e.lat];
});
}
this.initMap(path, this.marker);
}
});
},
},
}
</script>
<style lang="scss" scoped>
.gridMap {
height: 100%;
width: 100%;
position: relative;
.drawer-btn {
position: absolute;
left: 280px;
bottom: 0;
top: 0;
margin: auto;
width: 20px;
height: 24px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 16px solid #333c53;
border-right: 0 solid transparent;
transition: all 0.5s ease-in-out;
cursor: pointer;
.iconfont {
position: absolute;
font-size: 26px;
color: rgb(255, 255, 255);
left: -21px;
top: -14px;
transition: all 0.5s ease-in-out;
}
}
.btn-hide {
left: 0;
}
.drawer {
width: 280px;
height: 100%;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
visibility: visible;
opacity: 1;
transition: all 0.5s ease-in-out;
display: flex;
align-items: center;
.drawer-content {
width: 100%;
height: 100%;
padding: 0 16px;
box-sizing: border-box;
background: #333c53;
& > b {
color: #fff;
font-size: 18px;
line-height: 60px;
}
.tree {
height: calc(100% - 28px - 76px);
border-radius: 4px;
overflow: hidden;
.map-search {
display: flex;
padding: 8px 0;
justify-content: space-between;
::v-deep .el-input__inner {
color: #fff;
}
}
.member-list {
width: 100%;
height: calc(100% - 44px - 28px);
overflow: auto;
padding: 0;
margin: 0;
li {
width: 100%;
height: 32px;
display: flex;
padding: 0 8px;
align-items: center;
color: #fff;
margin: 0;
cursor: pointer;
span {
padding-right: 8px;
}
}
.active {
background: #1d2336;
}
&::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #1a1e2c;
}
&::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #282f45;
}
}
.empty {
padding: 20px 0;
color: #7a88bb;
text-align: center;
}
.header {
width: 100%;
height: 28px;
padding: 0 16px;
box-sizing: border-box;
display: flex;
align-items: center;
color: #fff;
justify-content: space-between;
font-size: 14px;
background: #3e4a69;
}
.input {
width: 100%;
padding: 8px 0;
::v-deep .el-input__inner {
color: #fff;
}
}
::v-deep .el-input__inner {
background-color: #282f45;
border: 1px solid #282f45;
}
.tree-div {
width: 100%;
height: calc(100% - 44px - 28px);
overflow: auto;
&::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #1a1e2c;
}
&::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #282f45;
}
}
footer {
width: 100%;
height: 32px;
background-color: #fff;
display: flex;
align-items: center;
span {
width: 33.33%;
text-align: center;
cursor: pointer;
}
}
::v-deep .el-tree {
width: 100%;
.el-tree__empty-block {
background: #333c53;
}
.el-tree-node__label {
color: #fff;
}
.el-tree-node__content {
background: #333c53;
}
.is-current > .el-tree-node__content {
.el-tree-node__label {
color: #5088ff;
}
}
}
}
}
}
.hide {
left: -280px;
opacity: 0;
visibility: hidden;
}
.btn {
position: absolute;
top: 100px;
}
.rightBtn {
width: 16px;
height: 80px;
background: url("https://cdn.cunwuyun.cn/monitor/drawerBtn.png");
color: #fff;
display: flex;
align-items: center;
justify-content: center;
.iconfont {
transition: transform 0.2s;
}
&.show > .iconfont {
transform: rotate(180deg);
}
}
}
</style>
<style lang="scss">
.map {
.info {
width: 280px;
height: 98px;
background: #fff;
padding: 8px 0 0 12px;
box-sizing: border-box;
p {
margin: 0;
padding: 0;
}
p {
line-height: 20px;
.name {
color: #333;
font-size: 16px;
font-weight: bold;
}
.lat {
font-size: 12px;
color: #999;
}
}
.address {
color: #999;
line-height: 40px;
font-size: 12px;
cursor: pointer;
}
}
.title_info {
width: 68px;
font-size: 14px;
font-weight: bold;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 4px;
padding: 0;
margin: 0;
}
.amap-marker-label {
border: 1px solid rgb(141, 139, 139);
background-color: #fff;
}
}
</style>

131
packages/grid/AppGridMember/AppGridMember.vue Normal file
View File

@@ -0,0 +1,131 @@
<template>
<ai-list class="AppGridMember" v-if="!isShowDetail">
<template slot="title">
<ai-title title="网格员管理" :isShowBottomBorder="false"></ai-title>
</template>
<template slot="tabs">
<el-tabs v-model="currIndex">
<el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
<component :ref="String(i)" v-if="currIndex == i" :is="tab.comp" @change="onChange" lazy :instance="instance"
:dict="dict" :permissions="permissions"/>
</el-tab-pane>
</el-tabs>
</template>
</ai-list>
<Add v-else-if="component === 'Add'" :params="params" :instance="instance" :dict="dict" :permissions="permissions"
@change="onChange"></Add>
<Family v-else-if="component === 'Family'" :params="params" :instance="instance" :dict="dict"
:permissions="permissions" @change="onChange"></Family>
<MonitorUser v-else-if="component === 'MonitorUser'" :params="params" :instance="instance" :dict="dict"
:permissions="permissions" @change="onChange"></MonitorUser>
<ApplyDetail v-else-if="component === 'ApplyDetail'" :params="params" :instance="instance" :dict="dict"
:permissions="permissions" @change="onChange"></ApplyDetail>
<ApplyAdd v-else-if="component === 'ApplyAdd'" :params="params" :instance="instance" :dict="dict"
:permissions="permissions" @change="onChange"></ApplyAdd>
</template>
<script>
import List from './components/list'
import ApplyList from './components/ApplyList'
import Add from './components/add'
import ApplyDetail from './components/ApplyDetail'
import ApplyAdd from './components/ApplyAdd'
import Family from './components/Family'
import MonitorUser from './components/MonitorUser'
export default {
name: "AppGridMember",
label: "网格管理员",
props: {
instance: Function,
dict: Object,
permissions: Function
},
data() {
return {
component: "List",
params: {},
include: [],
currIndex: '0',
isShowDetail: false
};
},
computed: {
tabs() {
return [
{label: '网格员信息', name: 'List', comp: List, permission: ''},
{label: '申报信息', name: 'ApplyList', comp: ApplyList, permission: 'app_appgirdmemberapply_detail'}
].filter(item => {
return item.name !== 'ApplyList' || this.permissions(item.permission)
})
}
},
components: {
Add,
List,
Family,
ApplyList,
ApplyDetail,
MonitorUser,
ApplyAdd
},
mounted() {
},
methods: {
onChange(data) {
if (data.type === "Add") {
this.component = "Add"
this.isShowDetail = true
this.params = data.params
}
if (data.type === "Family") {
this.component = "Family"
this.isShowDetail = true
this.params = data.params
}
if (data.type === "MonitorUser") {
this.component = "MonitorUser"
this.isShowDetail = true
this.params = data.params
}
if (data.type === "ApplyDetail") {
this.component = "ApplyDetail"
this.isShowDetail = true
this.params = data.params
}
if (data.type === "ApplyAdd") {
this.component = "ApplyAdd"
this.isShowDetail = true
this.params = data.params
}
if (data.type === "list") {
this.component = "List"
this.isShowDetail = false
this.params = data.params
}
if (data.type === "ApplyList") {
this.component = "ApplyList"
this.isShowDetail = false
this.params = data.params
}
}
}
}
</script>
<style lang="scss">
.AppGridMember {
height: 100%;
}
</style>

107
packages/grid/AppGridMember/components/ApplyAdd.vue Normal file
View File

@@ -0,0 +1,107 @@
<template>
<ai-detail class="content-add">
<template slot="title">
<ai-title :title="params.id ? '编辑' : '添加'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
</ai-title>
</template>
<template slot="content">
<ai-card title="基本信息">
<template #content>
<el-form class="ai-form" :model="form" label-width="120px" ref="form">
<el-form-item label="姓名" style="width: 100%;" prop="name" :rules="[{required: true, message: '请输入姓名', trigger: 'blur'}]">
<el-input size="small" v-model="form.name" placeholder="请输入..." :maxlength="20"></el-input>
</el-form-item>
<el-form-item label="联系电话" style="width: 100%;" prop="phone" :rules="[{required: true, message: '请输入联系电话', trigger: 'blur'}]">
<el-input size="small" v-model="form.phone" placeholder="请输入..." :maxlength="11"></el-input>
</el-form-item>
<el-form-item label="网格名称" style="width: 100%;" prop="girdName" :rules="[{required: true, message: '请输入网格名称', trigger: 'blur'}]">
<el-input size="small" v-model="form.girdName" placeholder="请输入..." :maxlength="50"></el-input>
</el-form-item>
</el-form>
</template>
</ai-card>
</template>
<template #footer>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" :loading="isLoading" @click="confirm">提交</el-button>
</template>
</ai-detail>
</template>
<script>
export default {
name: 'ApplyAdd',
props: {
instance: Function,
dict: Object,
params: Object
},
data () {
return {
form: {
name: '',
phone: '',
gridName: ''
},
isLoading: false,
id: ''
}
},
created () {
if (this.params && this.params.id) {
this.id = this.params.id
this.getInfo(this.params.id)
}
},
methods: {
getInfo (id) {
this.instance.post(`/app/appcontentinfo/queryDetailById?id=${id}`).then(res => {
if (res.code === 0) {
this.form = res.data
}
})
},
onChange () {
this.form.files = []
},
confirm () {
this.$refs.form.validate((valid) => {
if (valid) {
this.isLoading = true
this.instance.post(`/app/appgirdmemberapply/addOrUpdate`, {
...this.form,
id: this.params.id || ''
}).then(res => {
if (res.code == 0) {
this.$message.success('提交成功')
setTimeout(() => {
this.cancel(true)
}, 600)
} else {
this.isLoading = false
}
}).catch(() => {
this.isLoading = false
})
}
})
},
cancel (isRefresh) {
this.$emit('change', {
type: 'list',
isRefresh: !!isRefresh
})
}
}
}
</script>
<style scoped lang="scss">
</style>

65
packages/grid/AppGridMember/components/ApplyDetail.vue Normal file
View File

@@ -0,0 +1,65 @@
<template>
<ai-detail>
<template slot="title">
<ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
</ai-title>
</template>
<template slot="content">
<ai-card title="基本信息">
<template #content>
<ai-wrapper>
<ai-info-item label="姓名" isLine :value="info.name"></ai-info-item>
<ai-info-item label="联系电话" isLine :value="info.phone"></ai-info-item>
<ai-info-item label="网格名称" isLine :value="info.girdName"></ai-info-item>
</ai-wrapper>
</template>
</ai-card>
</template>
</ai-detail>
</template>
<script>
export default {
name: 'ApplyDetail',
props: {
instance: Function,
dict: Object,
params: Object
},
data () {
return {
info: {},
id: ''
}
},
created () {
if (this.params && this.params.id) {
this.id = this.params.id
this.getInfo(this.params.id)
}
},
methods: {
getInfo (id) {
this.instance.post(`/app/appgirdmemberapply/queryDetailById?id=${id}`).then(res => {
if (res.code === 0) {
this.info = res.data
}
})
},
cancel (isRefresh) {
this.$emit('change', {
type: 'ApplyList',
isRefresh: !!isRefresh
})
}
}
}
</script>
<style scoped lang="scss">
</style>

179
packages/grid/AppGridMember/components/ApplyList.vue Normal file
View File

@@ -0,0 +1,179 @@
<template>
<ai-list class="list" isTabs>
<template slot="content">
<ai-search-bar bottomBorder>
<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>
<ai-import :instance="instance" :dict="dict" type="appgirdmemberapply" name="网格员申报" @success="getList()">
<el-button icon="iconfont iconImport">导入</el-button>
</ai-import>
</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-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="120">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="toDetail(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: 'ApplyList',
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() {
let _ = this;
return [
{
type: "selection",
},
{
prop: "name",
label: "网格员姓名",
},
{
prop: "girdName",
align: "left",
label: "责任网格",
},
{
prop: "phone",
align: "center",
label: "联系电话",
}
];
},
},
methods: {
getList() {
this.instance
.post("/app/appgirdmemberapply/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/appgirdmemberapply/delete", null, {
params: { ids },
})
.then((res) => {
if (res?.code == 0) {
this.$message.success("删除成功!");
this.getList();
}
});
})
.catch(() => {});
},
add (id) {
this.$emit('change', {
type: 'ApplyAdd',
params: {
id: id || ''
}
})
},
toDetail (id) {
this.$emit('change', {
type: 'ApplyDetail',
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>

499
packages/grid/AppGridMember/components/Family.vue Normal file
View File

@@ -0,0 +1,499 @@
<template>
<ai-list class="Family">
<template slot="title">
<ai-title title="责任家庭" isShowBack isShowBottomBorder @onBackClick="onBack"></ai-title>
</template>
<template slot="content">
<ai-search-bar class="search-bar">
<template #left>
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="isShow = true">添加</el-button>
<el-button size="small" :disabled="!ids.length" icon="iconfont iconDelete" @click="removeAll">批量删除</el-button>
<el-select size="small" style="width: 200px;" v-model="search.girdId" placeholder="所属网格" clearable @change="getListInit()">
<el-option
v-for="(item,i) in girdList"
:key="i"
:label="item.girdName"
:value="item.id"
>
</el-option>
</el-select>
</template>
<template #right>
<el-input
v-model="search.name"
class="search-input"
size="small"
v-throttle="() => {search.current = 1, getList()}"
placeholder="姓名/身份证/联系方式"
clearable
@clear="search.current = 1, search.name = '', getList()"
suffix-icon="iconfont iconSearch">
</el-input>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
style="margin-top: 6px;"
:current.sync="search.current"
:size.sync="search.size"
@handleSelectionChange="handleSelectionChange"
@getList="getList">
<el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="remove(row.gmrId)">删除</el-button>
</div>
</template>
</el-table-column>
</ai-table>
<ai-dialog
:visible.sync="isShow"
width="890px"
@close="closeDialog"
title="添加户主"
@onConfirm="onConfirm">
<ai-area-select clearable always-show :instance="instance" v-model="areaId" :disabled-level="disabledLevel" @change="search.current = 1, getUserList()"></ai-area-select>
<span style="margin-top:16px;"><span style="color:#f46;margin-right:4px;">*</span>网格：</span>
<el-select size="small" style="width: 280px;margin-top:16px;" v-model="girdId" placeholder="请选择网格" clearable>
<el-option
v-for="(item,i) in girdList"
:key="i"
:label="item.girdName"
:value="item.id"
>
</el-option>
</el-select>
<div class="AiWechatSelecter-container">
<div class="AiWechatSelecter-container__left" v-loading="isLoading">
<div class="AiWechatSelecter-header">
<div class="AiWechatSelecter-header__left">
<h2>户主信息列表</h2>
</div>
<el-input
class="search-input"
size="mini"
placeholder="请输入姓名/身份证号"
v-model="name"
clearable
@keyup.enter.native="getUserList()"
@clear="name = '', getUserList()"
suffix-icon="iconfont iconSearch">
</el-input>
</div>
<el-scrollbar class="AiWechatSelecter-list">
<el-checkbox-group v-model="chooseUser">
<el-checkbox
:label="`${item.name}~${item.id}`"
v-for="(item, index) in userList"
:key="index">
{{ item.name }}-{{ item.idNumber }}
</el-checkbox>
</el-checkbox-group>
<AiEmpty v-if="!this.userList.length"></AiEmpty>
</el-scrollbar>
</div>
<div class="AiWechatSelecter-container__right">
<div class="AiWechatSelecter-header AiWechatSelecter-header__right">
<h2>已选择</h2>
<el-button size="mini" icon="el-icon-delete" @click="clearAll">清空</el-button>
</div>
<el-scrollbar class="AiWechatSelecter-list">
<div class="tags-wrapper">
<el-tag
v-for="(item, index) in chooseUser"
:key="index"
closable
@close="del(item)"
size="small"
type="info">
{{ item.split('~')[0] }}
</el-tag>
</div>
</el-scrollbar>
</div>
</div>
</ai-dialog>
</template>
</ai-list>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'Family',
props: {
instance: Function,
dict: Object,
params: Object
},
data() {
return {
search: {
current: 1,
size: 10,
name: '',
girdId: ''
},
isLoading: false,
form: {
},
userList: [],
name: '',
chooseUser: [],
isShow: false,
total: 10,
colConfigs: [
{ type: 'selection', label: '' },
{ prop: 'name', label: '户主姓名', align: 'left', width: '200px' },
{ prop: 'idNumber', label: '身份证号', align: 'center' },
{ prop: 'phone', label: '联系方式', align: 'center' },
{ prop: 'girdName', label: '所属网格', align: 'center' },
{ prop: 'createTime', label: '添加时间', align: 'center' },
{ slot: 'options', label: '操作', align: 'center' }
],
tableData: [],
areaId: '',
ids: [],
disabledLevel: 0,
girdList: [],
girdId: '',
}
},
computed: {
...mapState(['user'])
},
created() {
this.areaId = this.user.info.areaId
this.disabledLevel = this.user.info.areaList.length
this.dict.load('epidemicDangerousAreaLevel').then(() => {
this.getGirdList()
this.getList()
this.getUserList()
})
},
methods: {
getGirdList() {
this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.params.id}`).then(res => {
if (res.code == 0) {
this.girdList = res.data
}
})
},
getListInit() {
this.search.current = 1
this.getList()
},
getList () {
this.instance.post(`/app/appgirdmemberresident/listByGirdMember`, null, {
params: {
...this.search,
girdMemberId: this.params.id,
areaId: this.areaId
}
}).then(res => {
if (res.code == 0) {
this.tableData = res.data.records
this.total = res.data.total
}
})
},
removeAll() {
if (!this.ids) {
return this.$message.error('请选择户主')
}
this.remove(this.ids.join(','))
},
handleSelectionChange(e) {
this.ids = e.map(v => v.gmrId)
},
clearAll () {
this.chooseUser = []
},
onConfirm () {
if(!this.girdId) {
return this.$message.error('请选择网格')
}
if (!this.chooseUser.length) {
return this.$message.error('请选择户主')
}
const residentList = this.chooseUser.map(v => {
return {
girdMemberId: this.params.id,
name: v.split('~')[0],
residentId: v.split('~')[1],
girdId: this.girdId
}
})
this.instance.post(`/app/appgirdmemberresident/add`, {
residentList
}).then(res => {
if (res.code == 0) {
this.current = 1
this.getList()
this.$message.success('添加成功')
this.closeDialog()
}
})
},
closeDialog() {
this.isShow = false
this.chooseUser = []
this.girdId = ''
this.name = ''
this.areaId = this.user.info.areaId
this.getUserList()
},
del (e) {
this.chooseUser.splice(this.chooseUser.indexOf(e), 1)
},
getUserList () {
this.isLoading = true
this.instance.post(`/app/appresident/list`, null, {
params: {
current: 1,
size: 200,
con: this.name,
householdName: 1,
areaId: this.areaId,
}
}).then(res => {
if (res.code == 0) {
this.userList = res.data.records
}
this.isLoading = false
})
},
onBack () {
this.$emit('change', {
type: 'list'
})
},
remove(id) {
this.$confirm('确定删除该数据？').then(() => {
this.instance.post(`/app/appgirdmemberresident/delete?ids=${id}`).then(res => {
if (res.code == 0) {
this.$message.success('删除成功！')
this.getList()
}
})
})
}
}
}
</script>
<style lang="scss" scoped>
.Family {
.AiWechatSelecter-container {
display: flex;
height: 380px;
margin-top: 20px;
::v-deep {
.el-icon-circle-close {
display: inline-block!important;
}
}
.tree-container {
& > span {
display: block;
margin-bottom: 4px;
}
.tree-user__item {
display: flex;
align-items: center;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
img {
width: 27px;
height: 27px;
margin-right: 10px;
}
}
::v-deep .el-tree {
background: transparent;
.el-tree-node {
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
.el-tree-node__content {
height: auto;
margin-top: 2px;
// align-items: inherit;
}
.el-tree-node__expand-icon {
height: 24px;
}
}
.mask-btn__wrapper {
position: relative;
}
.mask-btn {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.userlist-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
padding: 0 17px;
cursor: pointer;
user-select: none;
::v-deep .el-checkbox__label {
display: none;
}
.userlist-item__left {
display: flex;
align-items: center;
span {
color: #222222;
font-size: 14px;
}
img {
width: 40px;
height: 40px;
margin-right: 8px;
}
}
}
& > div {
width: 280px;
background: #FCFCFC;
border: 1px solid #D0D4DC;
}
.AiWechatSelecter-list {
height: calc(100% - 40px);
padding: 8px 0;
::v-deep .el-scrollbar__wrap {
margin-bottom: 0!important;
overflow-x: hidden;
}
::v-deep .el-checkbox-group {
padding: 0 8px;
.el-checkbox {
display: block;
margin-right: 0;
}
}
}
.AiWechatSelecter-container__left {
flex: 1;
}
.AiWechatSelecter-container__right {
flex: 1;
margin-left: 20px;
.AiWechatSelecter-list {
.tags-wrapper {
padding: 0 8px;
}
.el-tag {
margin: 0 8px 8px 0px;
color: #222222;
font-size: 14px;
}
}
}
.AiWechatSelecter-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 8px 0 0;
border-bottom: 1px solid #D0D4DC;
background: #F5F7FA;
.AiWechatSelecter-header__left {
display: flex;
align-items: center;
padding: 0 8px;
h2 {
height: 100%;
line-height: 40px;
color: #222222;
font-size: 14px;
text-align: center;
cursor: pointer;
border-bottom: 2px solid transparent;
&.active {
color: #2266FF;
border-color: #2266FF;
}
}
}
.el-button {
height: 28px;
padding: 7px 5px;
}
.el-input {
width: 160px;
}
}
.AiWechatSelecter-header__right {
padding: 0 8px;
h2 {
color: #222222;
font-size: 14px;
text-align: center;
}
}
}
}
</style>

501
packages/grid/AppGridMember/components/MonitorUser.vue Normal file
View File

@@ -0,0 +1,501 @@
<template>
<ai-list class="Family">
<template slot="title">
<ai-title title="监测对象" isShowBack isShowBottomBorder @onBackClick="onBack"></ai-title>
</template>
<template slot="content">
<ai-search-bar class="search-bar">
<template #left>
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="isShow = true">添加</el-button>
<el-button size="small" :disabled="!ids.length" icon="iconfont iconDelete" @click="removeAll">批量删除</el-button>
<el-select size="small" style="width: 200px;" v-model="search.girdId" placeholder="所属网格" clearable
@change="getListInit()">
<el-option
v-for="(item,i) in girdList"
:key="i"
:label="item.girdName"
:value="item.id"
>
</el-option>
</el-select>
</template>
<template #right>
<el-input
v-model="search.name"
class="search-input"
size="small"
v-throttle="() => {search.current = 1, getList()}"
placeholder="姓名/身份证/联系方式"
clearable
@clear="search.current = 1, search.name = '', getList()"
suffix-icon="iconfont iconSearch">
</el-input>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
style="margin-top: 6px;"
:current.sync="search.current"
:size.sync="search.size"
@handleSelectionChange="handleSelectionChange"
@getList="getList">
<el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="remove(row.gmrId)">删除</el-button>
</div>
</template>
</el-table-column>
</ai-table>
<ai-dialog
:visible.sync="isShow"
width="890px"
@close="closeDialog"
title="添加户主"
@onConfirm="onConfirm">
<ai-area-select clearable always-show :instance="instance" v-model="areaId" :disabled-level="disabledLevel"
@change="search.current = 1, getUserList()"></ai-area-select>
<span style="margin-top:16px;"><span style="color:#f46;margin-right:4px;">*</span>网格：</span>
<el-select size="small" style="width: 280px;margin-top:16px;" v-model="girdId" placeholder="请选择网格" clearable>
<el-option
v-for="(item,i) in girdList"
:key="i"
:label="item.girdName"
:value="item.id"
>
</el-option>
</el-select>
<div class="AiWechatSelecter-container">
<div class="AiWechatSelecter-container__left" v-loading="isLoading">
<div class="AiWechatSelecter-header">
<div class="AiWechatSelecter-header__left">
<h2>户主信息列表</h2>
</div>
<el-input
class="search-input"
size="mini"
placeholder="请输入姓名/身份证号"
v-model="name"
clearable
v-throttle="getUserList"
@clear="name = '', getUserList()"
suffix-icon="iconfont iconSearch">
</el-input>
</div>
<el-scrollbar class="AiWechatSelecter-list">
<el-checkbox-group v-model="chooseUser">
<el-checkbox
:label="`${item.name}~${item.id}`"
v-for="(item, index) in userList"
:key="index">
{{ item.name }}-{{ item.idNumber }}
</el-checkbox>
</el-checkbox-group>
<AiEmpty v-if="!this.userList.length"></AiEmpty>
</el-scrollbar>
</div>
<div class="AiWechatSelecter-container__right">
<div class="AiWechatSelecter-header AiWechatSelecter-header__right">
<h2>已选择</h2>
<el-button size="mini" icon="el-icon-delete" @click="clearAll">清空</el-button>
</div>
<el-scrollbar class="AiWechatSelecter-list">
<div class="tags-wrapper">
<el-tag
v-for="(item, index) in chooseUser"
:key="index"
closable
@close="del(item)"
size="small"
type="info">
{{ item.split('~')[0] }}
</el-tag>
</div>
</el-scrollbar>
</div>
</div>
</ai-dialog>
</template>
</ai-list>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'Family',
props: {
instance: Function,
dict: Object,
params: Object
},
data() {
return {
search: {
current: 1,
size: 10,
name: '',
girdId: ''
},
isLoading: false,
form: {},
userList: [],
name: '',
chooseUser: [],
isShow: false,
total: 10,
colConfigs: [
{type: 'selection', label: ''},
{prop: 'name', label: '户主姓名', align: 'left', width: '200px'},
{prop: 'idNumber', label: '身份证号', align: 'center'},
{prop: 'phone', label: '联系方式', align: 'center'},
{prop: 'girdName', label: '所属网格', align: 'center'},
{prop: 'createTime', label: '添加时间', align: 'center'},
{slot: 'options', label: '操作', align: 'center'}
],
tableData: [],
areaId: '',
ids: [],
disabledLevel: 0,
girdList: [],
girdId: '',
}
},
computed: {
...mapState(['user'])
},
created() {
this.areaId = this.user.info.areaId
this.disabledLevel = this.user.info.areaList.length
this.dict.load('epidemicDangerousAreaLevel').then(() => {
this.getGirdList()
this.getList()
this.getUserList()
})
},
methods: {
getGirdList() {
this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.params.id}`).then(res => {
if (res.code == 0) {
this.girdList = res.data
}
})
},
getListInit() {
this.search.current = 1
this.getList()
},
getList() {
this.instance.post(`/app/appgirdmemberpoverty/listByGirdMemberByWeb`, null, {
params: {
...this.search,
girdMemberId: this.params.id,
}
}).then(res => {
if (res.code == 0) {
this.tableData = res.data.records
this.total = res.data.total
}
})
},
removeAll() {
if (!this.ids) {
return this.$message.error('请选择户主')
}
this.remove(this.ids.join(','))
},
handleSelectionChange(e) {
this.ids = e.map(v => v.gmpId)
},
clearAll() {
this.chooseUser = []
},
onConfirm() {
if (!this.girdId) {
return this.$message.error('请选择网格')
}
if (!this.chooseUser.length) {
return this.$message.error('请选择户主')
}
const povertyList = this.chooseUser.map(v => {
return {
girdMemberId: this.params.id,
name: v.split('~')[0],
girdId: this.girdId,
povertyId: v.split('~')[1]
}
})
this.instance.post(`/app/appgirdmemberpoverty/add`, {
povertyList
}).then(res => {
if (res.code == 0) {
this.current = 1
this.getList()
this.$message.success('添加成功')
this.closeDialog()
}
})
},
closeDialog() {
this.isShow = false
this.chooseUser = []
this.girdId = ''
this.name = ''
this.areaId = this.user.info.areaId
this.getUserList()
},
del(e) {
this.chooseUser.splice(this.chooseUser.indexOf(e), 1)
},
getUserList() {
this.isLoading = true
this.instance.post(`/app/apppreventionreturntopoverty/list`, null, {
params: {
current: 1,
size: 200,
con: this.name,
isHousehold: 1,
areaId: this.areaId
}
}).then(res => {
if (res.code == 0) {
this.userList = res.data.records
}
this.isLoading = false
})
},
onBack() {
this.$emit('change', {
type: 'list'
})
},
remove(id) {
this.$confirm('确定删除该数据？').then(() => {
this.instance.post(`/app/appgirdmemberresident/delete?ids=${id}`).then(res => {
if (res.code == 0) {
this.$message.success('删除成功！')
this.getList()
}
})
})
}
}
}
</script>
<style lang="scss" scoped>
.Family {
.AiWechatSelecter-container {
display: flex;
height: 380px;
margin-top: 20px;
::v-deep {
.el-icon-circle-close {
display: inline-block !important;
}
}
.tree-container {
& > span {
display: block;
margin-bottom: 4px;
}
.tree-user__item {
display: flex;
align-items: center;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
img {
width: 27px;
height: 27px;
margin-right: 10px;
}
}
::v-deep .el-tree {
background: transparent;
.el-tree-node {
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
.el-tree-node__content {
height: auto;
margin-top: 2px;
// align-items: inherit;
}
.el-tree-node__expand-icon {
height: 24px;
}
}
.mask-btn__wrapper {
position: relative;
}
.mask-btn {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.userlist-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
padding: 0 17px;
cursor: pointer;
user-select: none;
::v-deep .el-checkbox__label {
display: none;
}
.userlist-item__left {
display: flex;
align-items: center;
span {
color: #222222;
font-size: 14px;
}
img {
width: 40px;
height: 40px;
margin-right: 8px;
}
}
}
& > div {
width: 280px;
background: #FCFCFC;
border: 1px solid #D0D4DC;
}
.AiWechatSelecter-list {
height: calc(100% - 40px);
padding: 8px 0;
::v-deep .el-scrollbar__wrap {
margin-bottom: 0 !important;
overflow-x: hidden;
}
::v-deep .el-checkbox-group {
padding: 0 8px;
.el-checkbox {
display: block;
margin-right: 0;
}
}
}
.AiWechatSelecter-container__left {
flex: 1;
}
.AiWechatSelecter-container__right {
flex: 1;
margin-left: 20px;
.AiWechatSelecter-list {
.tags-wrapper {
padding: 0 8px;
}
.el-tag {
margin: 0 8px 8px 0px;
color: #222222;
font-size: 14px;
}
}
}
.AiWechatSelecter-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 8px 0 0;
border-bottom: 1px solid #D0D4DC;
background: #F5F7FA;
.AiWechatSelecter-header__left {
display: flex;
align-items: center;
padding: 0 8px;
h2 {
height: 100%;
line-height: 40px;
color: #222222;
font-size: 14px;
text-align: center;
cursor: pointer;
border-bottom: 2px solid transparent;
&.active {
color: #2266FF;
border-color: #2266FF;
}
}
}
.el-button {
height: 28px;
padding: 7px 5px;
}
.el-input {
width: 160px;
}
}
.AiWechatSelecter-header__right {
padding: 0 8px;
h2 {
color: #222222;
font-size: 14px;
text-align: center;
}
}
}
}
</style>

543
packages/grid/AppGridMember/components/add.vue Normal file
View File

@@ -0,0 +1,543 @@
<template>
<section style="height: 100%">
<ai-detail class="add">
<template #title>
<ai-title :title="title" :isShowBack="true" :isShowBottomBorder="true" @onBackClick="cancel(false)"></ai-title>
</template>
<template #content>
<el-form
ref="rules"
:model="forms"
:rules="formRules"
size="small"
label-suffix="："
label-width="136px">
<ai-card title="基础信息" >
<template #right v-if="title=='网格员详情'">
<span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editOne==false" @click="editOne=true">修改</span>
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="searchDetail(),editOne=false">取消</span>
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="save()">保存</span>
</template>
<template slot="content">
<div class="above" v-if="editOne==true">
<div class="left">
<el-form-item label="网格员姓名" prop="name" >
<el-input v-model="forms.name" placeholder="请选择网格员" disabled>
<template #append>
<ai-wechat-selecter :isMultiple="false" refs="addTags" :instance="instance" v-model="users" @change="getSelectPerson">
<el-button size="small" type="primary"><span style="color: #fff">选择成员</span></el-button>
</ai-wechat-selecter>
</template>
</el-input>
</el-form-item>
<el-form-item label="选用日期" prop="selectionDate" >
<el-date-picker
v-model="forms.selectionDate"
type="date"
style="width: 100%"
value-format="yyyy-MM-dd"
size="medium"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="身份证号" prop="idNumber" >
<el-input v-model="forms.idNumber" placeholder="请输入…" maxlength="18" show-word-limit></el-input>
</el-form-item>
</div>
<div class="right">
<el-form-item label="照片" prop="photo">
<!-- <ai-uploader :instance="instance" v-model="photoList" :limit="1" @change="photoChange"></ai-uploader> -->
<ai-avatar :instance="instance" v-model="forms.photo"/>
</el-form-item>
</div>
</div>
<div class="above" v-if="editOne==true">
<div class="left">
<el-form-item label="出生日期" prop="birthday" >
<el-date-picker
v-model="forms.birthday"
type="date"
style="width: 100%"
value-format="yyyy-MM-dd"
size="medium"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="联系电话" prop="phone" >
<el-input v-model.number="forms.phone" placeholder="请输入…" maxlength="11" show-word-limit></el-input>
</el-form-item>
</div>
<div class="right">
<el-form-item label="性别" prop="sex" >
<el-select size="medium" style="width: 100%" v-model="forms.sex" placeholder="请选择..." clearable>
<el-option
v-for="(item,i) in dict.getDict('sex')"
:key="i"
:label="item.dictName"
:value="item.dictValue"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="电子邮箱" prop="mail" >
<el-input v-model="forms.mail" placeholder="请输入…"></el-input>
</el-form-item>
</div>
</div>
<template v-if="editOne==false">
<div class="above">
<div class="left">
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
<ai-info-item label="网格员姓名："><span >{{forms.name}}</span></ai-info-item>
<ai-info-item label="选用日期："><span >{{forms.selectionDate}}</span></ai-info-item>
<ai-info-item label="身份证号："><span >{{forms.idNumber}}</span></ai-info-item>
<ai-info-item label="性别："><span >{{dict.getLabel('sex', forms.sex)}}</span></ai-info-item>
<ai-info-item label="出生日期："><span >{{forms.birthday}}</span></ai-info-item>
<ai-info-item label="电子邮箱："><span >{{forms.mail}}</span></ai-info-item>
</ai-wrapper>
</div>
<div class="right">
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
<ai-info-item label="照片：" v-if="forms.photo">
<span >
<ai-uploader :instance="instance" v-model="photoList" disabled :limit="1" @change="photoChange"></ai-uploader>
</span>
</ai-info-item>
<ai-info-item label="联系电话："><span >{{forms.phone}}</span></ai-info-item>
</ai-wrapper>
</div>
</div>
</template>
</template>
</ai-card>
<ai-card title="关联信息" >
<template #right v-if="title=='网格员详情'">
<span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editTwo==false" @click="editTwo=true">修改</span>
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="searchDetail(),editTwo=false">取消</span>
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="save()">保存</span>
</template>
<template slot="content">
<template v-if="editTwo==true">
<el-form-item label="责任网格" prop="girdInfoList" style="margin-top: 8px;">
<el-form-item style="width: 100%" label-width="80px" :label="'网格' + (index + 1)" v-for="(item, index) in forms.girdInfoList" :key="'选项' + (index + 1)">
<div class="form-flex">
<el-select v-model="item.checkType" placeholder="请选择网格角色">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input disabled v-model="item.girdName" :maxlength="200" size="small" placeholder="请选择责任网格">
<template slot="append">
<el-button size="small" @click="currIndex = index, showGrid = true">选择网格</el-button>
</template>
</el-input>
<el-button type="danger" size="small" @click="removeGrid(index)">删除</el-button>
</div>
</el-form-item>
<el-button type="primary" size="small" @click="addGrid">添加选项</el-button>
<!-- <el-button size="small" @click="showGrid=true">选择网格</el-button> -->
</el-form-item>
<div class="above">
<div class="left">
<el-form-item label="是否特殊网格员" prop="isGirdMember" >
<el-radio-group v-model="forms.isGirdMember">
<el-radio label="0">否</el-radio>
<el-radio label="1">是</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="政治面貌" prop="politicsStatus" >
<el-select v-model="forms.politicsStatus" size="small" style="width: 100%" placeholder="请选择..." clearable>
<el-option v-for="(item,i) in dict.getDict('politicsStatus')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
</div>
<div class="right">
<el-form-item label="特殊网格员" prop="girdMemberType" v-if="forms.isGirdMember==1">
<el-select v-model="forms.girdMemberType" size="small" placeholder="请选择..." clearable>
<el-option v-for="(item,i) in dict.getDict('girdMemberType')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="学历" prop="education" >
<el-select v-model="forms.education" style="width: 100%" size="small" placeholder="请选择..." clearable>
<el-option v-for="(item,i) in dict.getDict('education')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
</div>
</div>
<el-form-item label="个人简介" prop="introduction" >
<el-input
type="textarea"
maxlength="200"
show-word-limit
:rows="4"
placeholder="请输入内容"
v-model="forms.introduction">
</el-input>
</el-form-item>
<el-form-item label="人生格言" prop="motto" >
<el-input
type="textarea"
maxlength="200"
show-word-limit
:rows="4"
placeholder="请输入内容"
v-model="forms.motto">
</el-input>
</el-form-item>
</template>
<template v-if="editTwo==false">
<ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px;">
<ai-info-item label="责任网格：" style="width: 100%;"><span v-html="girdInfoStr || '-'"></span></ai-info-item>
<ai-info-item label="是否特殊网格员：">
<span>{{ !forms.isGirdMember ? '-' : forms.isGirdMember === '0' ? '否' : '是' }}</span>
</ai-info-item>
<ai-info-item label="特殊网格员：" v-if="forms.isGirdMember==1"><span >{{dict.getLabel('girdMemberType', forms.girdMemberType)}}</span></ai-info-item>
<ai-info-item label="政治面貌："><span >{{dict.getLabel('politicsStatus', forms.politicsStatus)}}</span></ai-info-item>
<ai-info-item label="学历："><span >{{dict.getLabel('education', forms.education)}}</span></ai-info-item>
<ai-info-item label="人生格言：" style="width: 100%;"><span >{{forms.motto}}</span></ai-info-item>
<ai-info-item label="个人简介：" style="width: 100%;"><span >{{forms.introduction}}</span></ai-info-item>
</ai-wrapper>
</template>
</template>
</ai-card>
</el-form>
<ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true" :destroyOnClose="true" border width="720px">
<div class="grid">
<el-tree
:data="treeObj.treeList"
:props="treeObj.defaultProps"
node-key="id"
ref="tree"
:check-strictly="true"
show-checkbox
:default-checked-keys="currCheckedKeys"
default-expand-all
@check="onCheckChange">
</el-tree>
</div>
<div class="dialog-footer" slot="footer" >
<el-button size="medium" @click="showGrid=false">取消</el-button>
<el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
</div>
</ai-dialog>
</template>
<template #footer v-if="title=='添加网格员'">
<el-button @click="cancel(false)" class="delete-btn footer-btn" >取 消</el-button>
<el-button type="primary" @click="save()" class="footer-btn">提 交</el-button>
</template>
</ai-detail>
</section>
</template>
<script>
export default {
name: "add",
props: {
instance: Function,
dict: Object,
permissions: Function,
params: Object,
},
data() {
return {
users: [],
currIndex: 0,
forms: {
birthday: "",
education: "",
girdId: "",
girdInfoList: [],
girdMemberType: "",
id: "",
wxUserId: '',
introduction: "",
isGirdMember: "",
mail: "",
motto: "",
name: "",
phone: "",
photo: "",
politicsStatus: "",
selectionDate: "",
sex: "",
userId: "",
},
options: [{
value: '2',
label: '网格长'
}, {
value: '1',
label: '网格员'
}],
showGrid: false,
treeObj: {
treeList: [],
defaultProps: {
children: "girdList",
label: "girdName",
},
checkedKeys: [],
},
girdInfoStr: '',
photoList: [],
title: "添加网格员",
editOne: false,
editTwo: false,
};
},
created() {
this.beforeSelectTree()
if (this.params.id) {
this.searchDetail();
this.title = "网格员详情";
this.editOne = false;
this.editTwo = false;
} else {
this.title = "添加网格员";
this.editOne = true;
this.editTwo = true;
}
},
computed: {
currCheckedKeys () {
if (this.forms && this.forms.girdInfoList && this.forms.girdInfoList[this.currIndex] && this.forms.girdInfoList[this.currIndex].id) {
return [this.forms.girdInfoList[this.currIndex].id]
}
return []
},
formRules() {
let phonePass = (rule, value, callback) => {
let reg = /^(?:(?:\+|00)86)?1\d{10}$/;
if (value) {
if (reg.test(value)) {
callback();
} else {
callback(new Error("联系电话格式错误"));
}
} else {
callback(new Error("请输入联系电话"));
}
};
return {
name: [
{ required: true, message: "请输入网格员姓名", trigger: "change" },
],
selectionDate: [
{ required: true, message: "请选择选用日期", trigger: "change" },
],
phone: [{ required: true, validator: phonePass, trigger: "blur" }],
girdInfoList: [
{ required: true, message: "请选择责任网络", trigger: "change" },
],
mail: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
]
};
},
},
methods: {
cancel (isRefresh) {
this.$emit('change', {
type: 'list',
isRefresh: !!isRefresh,
})
},
onCheckChange (e) {
this.$nextTick(() => {
this.$refs.tree.getCheckedKeys().forEach(v => {
this.$refs.tree.setChecked(v, false)
})
this.$refs.tree.setChecked(e.id, true)
})
},
removeGrid (index) {
this.forms.girdInfoList.splice(index, 1)
},
addGrid () {
this.forms.girdInfoList.push({
id: '',
girdName: '',
checkType: ''
})
},
photoChange(val) {
this.forms.photo = val[0].url;
},
getSelectPerson(val) {
this.forms.name = val[0].name;
this.forms.phone = val[0].phone;
this.forms.userId = val[0].sysUserId
this.forms.wxUserId = val[0].id
},
getCheckedTree() {
if (!this.$refs.tree.getCheckedNodes().length) {
return this.$message.error('请选择网格')
}
if (this.$refs.tree.getCheckedNodes().length > 1) {
return this.$message.error('不支持多选')
}
this.$set(this.forms.girdInfoList, this.currIndex, {
...this.$refs.tree.getCheckedNodes()[0],
checkType: this.forms.girdInfoList[this.currIndex].checkType
})
this.showGrid = false;
},
handleClose(tag) {
this.forms.girdInfoList.splice(this.forms.girdInfoList.indexOf(tag), 1);
},
beforeSelectTree() {
this.treeObj.checkedKeys = [];
this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
if (res.code == 0) {
this.treeObj.treeList = res.data;
this.forms.girdInfoList.map((e) => {
this.treeObj.checkedKeys.push(e.id);
});
}
});
},
save() {
this.$refs["rules"].validate((valid) => {
if (valid) {
for (let i = 0; i < this.forms.girdInfoList.length; i++) {
const currInfo = this.forms.girdInfoList[i]
const arr = JSON.parse(JSON.stringify(this.forms.girdInfoList))
arr.splice(i, 1)
const sameInfo = arr.filter(v => v.id === currInfo.id)
if (!currInfo.checkType) {
return this.$message.error('请选择网格员类型')
}
if (!currInfo.id) {
return this.$message.error('请选择网格')
}
if (currInfo.checkType === '1' && currInfo.girdLevel !== '2') {
return this.$message.error(`一级、二级网格不能添加网格员`)
}
if (sameInfo.length) {
return this.$message.error('不能选择同一网格重复绑定')
}
}
this.instance.post(`/app/appgirdmemberinfo/addOrUpdate`,{
...this.forms,
girdInfoListStr: this.forms.girdInfoList.map(v => v.girdName).join(',')
}).then((res) => {
if (res.code == 0) {
if (this.title == "添加网格员") {
this.cancel(true)
} else {
this.editOne = false
this.editTwo = false
this.searchDetail()
}
}
});
} else {
return false
}
});
},
searchDetail() {
this.instance
.post(`/app/appgirdmemberinfo/queryDetailById`, null, {
params: { id: this.params.id },
})
.then((res) => {
if (res.code == 0) {
this.forms = {
...res.data,
girdInfoList: res.data.girdInfoList || []
};
this.users = [{
name: res.data.name,
phone: res.data.phone,
userId: res.data.id,
id: res.data.wxUserId
}]
this.girdInfoStr = ''
this.photoList = [{ url: this.forms.photo }];
if (res.data.girdInfoList) {
res.data.girdInfoList.forEach((e) => {
this.girdInfoStr = this.girdInfoStr + `${e.checkType === '1' ? '网格员' : '网格长'}-${e.girdName}&emsp;`
})
}
}
});
},
},
};
</script>
<style lang="scss" scoped>
.add {
height: 100%;
.form-flex {
display: flex;
align-items: center;
& > .el-button {
margin-left: 20px;
}
.el-input {
width: 300px;
margin-left: 20px;
}
::v-deep .el-form-item__content {
margin-left: 0!important;
}
}
.ai-detail__title {
background-color: #fff;
}
.ai-detail__content {
.ai-detail__content--wrapper {
.el-form {
// background-color: #fff;
// padding: 0 60px;
.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.el-form-item {
width: 48%;
}
.buildingTypes {
width: 100%;
}
}
}
}
}
::v-deep .el-tag {
margin-right: 8px;
color: #333333;
}
.footer-btn {
width: 92px;
}
.above{
display: flex;
.left, .right{
flex: 1;
}
}
}
</style>

206
packages/grid/AppGridMember/components/list.vue Normal file
View File

@@ -0,0 +1,206 @@
<template>
<ai-list class="list" isTabs>
<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="网格员/责任网格"
v-throttle="() => {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="220">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="toFamily(row.id)">责任家庭</el-button>
<el-button type="text" @click="toMonitorUser(row.id)" v-if="permissions('girdmemberpovertyconfig')">监测对象</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() {
let _ = this;
return [
{
type: "selection",
},
{
prop: "name",
label: "网格员姓名",
},
{
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 || ''
}
})
},
toMonitorUser (id) {
this.$emit('change', {
type: 'MonitorUser',
params: {
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>