村微上架
This commit is contained in:
yanran200730
70
project/sass/apps/AppGridMap/AppGridMap.vue
Normal file
70
project/sass/apps/AppGridMap/AppGridMap.vue
Normal 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
project/sass/apps/AppGridMap/components/list.vue
Normal file
669
project/sass/apps/AppGridMap/components/list.vue
Normal 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>
|
||||||
79
project/sass/apps/AppGridMember copy/AppGridMember.vue
Normal file
79
project/sass/apps/AppGridMember copy/AppGridMember.vue
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<div class="AppGridMember">
|
||||||
|
<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";
|
||||||
|
import Add from "./components/add";
|
||||||
|
import Family from "./components/Family";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AppGridMember",
|
||||||
|
label: "网格管理员",
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
component: "List",
|
||||||
|
params: {},
|
||||||
|
include: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
Add,
|
||||||
|
List,
|
||||||
|
Family
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onChange(data) {
|
||||||
|
if (data.type === "Add") {
|
||||||
|
this.component = "Add";
|
||||||
|
this.params = data.params;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.type === "Family") {
|
||||||
|
this.component = "Family"
|
||||||
|
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">
|
||||||
|
.AppGridMember {
|
||||||
|
height: 100%;
|
||||||
|
background: #f3f6f9;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
499
project/sass/apps/AppGridMember copy/components/Family.vue
Normal file
499
project/sass/apps/AppGridMember copy/components/Family.vue
Normal 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"
|
||||||
|
@keyup.enter.native="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>
|
||||||
543
project/sass/apps/AppGridMember copy/components/add.vue
Normal file
543
project/sass/apps/AppGridMember copy/components/add.vue
Normal 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} `
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</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>
|
||||||
199
project/sass/apps/AppGridMember copy/components/list.vue
Normal file
199
project/sass/apps/AppGridMember copy/components/list.vue
Normal file
@@ -0,0 +1,199 @@
|
|||||||
|
<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() {
|
||||||
|
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 || ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
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>
|
||||||
79
project/sass/apps/AppGridMember/AppGridMember.vue
Normal file
79
project/sass/apps/AppGridMember/AppGridMember.vue
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<div class="AppGridMember">
|
||||||
|
<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";
|
||||||
|
import Add from "./components/add";
|
||||||
|
import Family from "./components/Family";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AppGridMember",
|
||||||
|
label: "网格管理员",
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
component: "List",
|
||||||
|
params: {},
|
||||||
|
include: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
Add,
|
||||||
|
List,
|
||||||
|
Family
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onChange(data) {
|
||||||
|
if (data.type === "Add") {
|
||||||
|
this.component = "Add";
|
||||||
|
this.params = data.params;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.type === "Family") {
|
||||||
|
this.component = "Family"
|
||||||
|
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">
|
||||||
|
.AppGridMember {
|
||||||
|
height: 100%;
|
||||||
|
background: #f3f6f9;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
499
project/sass/apps/AppGridMember/components/Family.vue
Normal file
499
project/sass/apps/AppGridMember/components/Family.vue
Normal 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"
|
||||||
|
@keyup.enter.native="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>
|
||||||
543
project/sass/apps/AppGridMember/components/add.vue
Normal file
543
project/sass/apps/AppGridMember/components/add.vue
Normal 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} `
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</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>
|
||||||
199
project/sass/apps/AppGridMember/components/list.vue
Normal file
199
project/sass/apps/AppGridMember/components/list.vue
Normal file
@@ -0,0 +1,199 @@
|
|||||||
|
<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() {
|
||||||
|
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 || ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
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>
|
||||||
65
project/sass/apps/AppReportAiWill/AppReportAtWill.vue
Normal file
65
project/sass/apps/AppReportAiWill/AppReportAtWill.vue
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div class="doc-circulation ailist-wrapper">
|
||||||
|
<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'
|
||||||
|
import Detail from './components/Detail'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AppReportAtWill',
|
||||||
|
label: '矛盾调解',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
component: 'List',
|
||||||
|
params: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
List,
|
||||||
|
Detail
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted () {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onChange (data) {
|
||||||
|
if (data.type === 'Detail') {
|
||||||
|
this.component = 'Detail'
|
||||||
|
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">
|
||||||
|
.doc-circulation {
|
||||||
|
height: 100%;
|
||||||
|
background: #F3F6F9;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
602
project/sass/apps/AppReportAiWill/components/Detail.vue
Normal file
602
project/sass/apps/AppReportAiWill/components/Detail.vue
Normal file
@@ -0,0 +1,602 @@
|
|||||||
|
<template>
|
||||||
|
<ai-detail class="reportAtWillDetail" v-loading="isLoading">
|
||||||
|
<template #title>
|
||||||
|
<ai-title title="随手拍详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
||||||
|
<template #rightBtn>
|
||||||
|
<div class="title-btns">
|
||||||
|
<el-button type="primary" icon="iconfont iconPerson_Transfered" @click="isShowForward = true" v-if="detail.eventStatus < 2">指派事件</el-button>
|
||||||
|
<el-button type="primary" icon="iconfont iconRegister" @click="isShowAdd = true" v-if="detail.eventStatus < 2">处理事件</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ai-title>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<div class="detail-content__wrapper">
|
||||||
|
<ai-card class="detail-content__wrapper--left" title="基础信息">
|
||||||
|
<template #content>
|
||||||
|
<ai-wrapper>
|
||||||
|
<ai-info-item label="上报人员" :value="detail.name"></ai-info-item>
|
||||||
|
<ai-info-item label="当前状态" :value="dict.getLabel('clapEventStatus', detail.eventStatus)"></ai-info-item>
|
||||||
|
<ai-info-item label="联系方式">{{ detail.phone }}</ai-info-item>
|
||||||
|
<ai-info-item label="上报时间">{{ detail.createTime }}</ai-info-item>
|
||||||
|
<ai-info-item label="事件类型">{{ detail.groupName }}</ai-info-item>
|
||||||
|
<ai-info-item label="事件描述" isLine>{{ detail.content }}</ai-info-item>
|
||||||
|
<ai-info-item label="现场照片" isLine>
|
||||||
|
<ai-uploader :instance="instance" disabled v-model="detail.files"></ai-uploader>
|
||||||
|
</ai-info-item>
|
||||||
|
<ai-info-item label="所属网格">{{ detail.girdName }}</ai-info-item>
|
||||||
|
<ai-info-item label="事件位置" isLine>
|
||||||
|
<div id="map" style="width: 500px; height: 280px;"></div>
|
||||||
|
</ai-info-item>
|
||||||
|
</ai-wrapper>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
<div class="rightZone">
|
||||||
|
<ai-card title="办理进度">
|
||||||
|
<template #content>
|
||||||
|
<el-steps direction="vertical" :active="1">
|
||||||
|
<el-step
|
||||||
|
v-for="(item, i) in processList"
|
||||||
|
:key="i"
|
||||||
|
:title="item.systemExplain"
|
||||||
|
:description="item.doTime">
|
||||||
|
<template #title>
|
||||||
|
<h2 class="step-title" style="font-weight: 500; font-size: 14px;">
|
||||||
|
{{ item.systemExplain }}
|
||||||
|
</h2>
|
||||||
|
</template>
|
||||||
|
<template #description>
|
||||||
|
<p style="color: #888; margin: 0 4px 10px 0; font-size: 14px;">{{ item.doTime }}</p>
|
||||||
|
<div style="color: #444;margin-bottom: 10px;" v-if="item.doExplain">{{ item.doExplain }}</div>
|
||||||
|
<ai-uploader :instance="instance" disabled v-model="item.files"></ai-uploader>
|
||||||
|
</template>
|
||||||
|
</el-step>
|
||||||
|
</el-steps>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ai-dialog
|
||||||
|
:visible.sync="isShowAdd"
|
||||||
|
width="800px"
|
||||||
|
title="事件处理"
|
||||||
|
@closed="onClose"
|
||||||
|
@onConfirm="handleEvent">
|
||||||
|
<el-form class="ai-form" label-width="120px" :model="form" ref="form">
|
||||||
|
<el-form-item label="事件分类" prop="groupId" style="width: 100%;" :rules="[{ required: true, message: '请选择事件分类' }]">
|
||||||
|
<ai-select
|
||||||
|
v-model="form.groupId"
|
||||||
|
placeholder="请选择事件分类"
|
||||||
|
:selectList="dictList">
|
||||||
|
</ai-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理结果" prop="eventStatus" style="width: 100%;" :rules="[{ required: true, message: '请选择处理结果' }]">
|
||||||
|
<el-radio-group v-model="form.eventStatus">
|
||||||
|
<el-radio label="2">已办结</el-radio>
|
||||||
|
<el-radio label="3">已拒绝</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入处理意见' }]">
|
||||||
|
<el-input type="textarea" :rows="5" :maxlength="500" v-model="form.content" clearable placeholder="请输入处理意见" show-word-limit></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="图片" prop="files" style="width: 100%;">
|
||||||
|
<ai-uploader
|
||||||
|
:instance="instance"
|
||||||
|
isShowTip
|
||||||
|
v-model="form.files"
|
||||||
|
:limit="9">
|
||||||
|
</ai-uploader>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ai-dialog>
|
||||||
|
<ai-dialog
|
||||||
|
:visible.sync="isShowForward"
|
||||||
|
width="800px"
|
||||||
|
@close="onClose"
|
||||||
|
title="事件指派"
|
||||||
|
@onConfirm="onForwardConfirm">
|
||||||
|
<el-form class="ai-form" label-width="120px" :model="forwardForm" ref="forwardForm">
|
||||||
|
<el-form-item label="转交" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请选择网格员或网格' }]">
|
||||||
|
<el-input disabled size="small" v-model="forwardForm.name" clearable placeholder="请选择网格员或网格">
|
||||||
|
<template slot="append">
|
||||||
|
<el-button @click="isShowUser = true">选择</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="办理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入办理意见' }]">
|
||||||
|
<el-input type="textarea" :rows="5" :maxlength="500" v-model="forwardForm.content" clearable placeholder="请输入办理意见" show-word-limit></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="图片" prop="files" style="width: 100%;">
|
||||||
|
<ai-uploader
|
||||||
|
:instance="instance"
|
||||||
|
v-model="forwardForm.files"
|
||||||
|
isShowTip
|
||||||
|
:limit="9">
|
||||||
|
</ai-uploader>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ai-dialog>
|
||||||
|
<ai-dialog
|
||||||
|
:visible.sync="isShowUser"
|
||||||
|
width="800px"
|
||||||
|
title="选择网格或网格员"
|
||||||
|
@onConfirm="onConfirm">
|
||||||
|
<div class="grid-wrapper">
|
||||||
|
<el-input
|
||||||
|
style="margin-bottom: 10px;"
|
||||||
|
size="small"
|
||||||
|
placeholder="请输入网格名称/网格员姓名/网格员电话"
|
||||||
|
v-model="name"
|
||||||
|
suffix-icon="iconfont iconSearch">
|
||||||
|
</el-input>
|
||||||
|
<el-tree
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
ref="tree"
|
||||||
|
:props="defaultProps"
|
||||||
|
node-key="id"
|
||||||
|
:data="tree"
|
||||||
|
highlight-current
|
||||||
|
@current-change="onTreeChange">
|
||||||
|
<div class="tree-container" slot-scope="{ data }">
|
||||||
|
<div class="tree-container__user">
|
||||||
|
<div class="tree-user__item">
|
||||||
|
<span>{{ data.isUser ? `${data.name}-${data.phone}` : data.girdName }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
</ai-dialog>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Detail',
|
||||||
|
props: ['dict', 'instance', 'params'],
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
forwardForm: {
|
||||||
|
content: '',
|
||||||
|
girdId: '',
|
||||||
|
girdName: '',
|
||||||
|
girdMemberId: '',
|
||||||
|
girdMemberName: '',
|
||||||
|
name: ''
|
||||||
|
},
|
||||||
|
isLoading: true,
|
||||||
|
name: '',
|
||||||
|
detail: {},
|
||||||
|
isShowUser: false,
|
||||||
|
eventList: [],
|
||||||
|
isShowAdd: false,
|
||||||
|
userList: [],
|
||||||
|
processList: [],
|
||||||
|
dictList: [],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'girdList',
|
||||||
|
label: 'girdName'
|
||||||
|
},
|
||||||
|
isShowForward: false,
|
||||||
|
tree: [],
|
||||||
|
gridInfo: {},
|
||||||
|
form: {
|
||||||
|
files: [],
|
||||||
|
groupId: '',
|
||||||
|
groupName: '',
|
||||||
|
content: [],
|
||||||
|
eventStatus: '2'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
...mapState(['user'])
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
name (val) {
|
||||||
|
this.$refs.tree.filter(val)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getDict()
|
||||||
|
this.getGirdList()
|
||||||
|
this.dict.load('clapEventStatus').then(() => {
|
||||||
|
this.getDetail()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getDetail() {
|
||||||
|
this.instance.post('/app/appclapeventinfo/queryDetailById', null, {
|
||||||
|
params: { id: this.params.id }
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.detail = res.data
|
||||||
|
this.processList = res.data.processList
|
||||||
|
this.form.groupId = res.data.groupId
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initMap()
|
||||||
|
})
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.isLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getGirdList () {
|
||||||
|
this.instance.post(`/app/appgirdinfo/listAllByTop`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.tree = this.formatList(res.data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onClose () {
|
||||||
|
this.form.files = []
|
||||||
|
this.form.groupId = ''
|
||||||
|
this.form.groupName = ''
|
||||||
|
this.form.content = ''
|
||||||
|
this.form.eventStatus = ''
|
||||||
|
this.forwardForm.content = ''
|
||||||
|
this.forwardForm.girdId = ''
|
||||||
|
this.forwardForm.girdName = ''
|
||||||
|
this.forwardForm.girdMemberId = ''
|
||||||
|
this.forwardForm.girdMemberName = ''
|
||||||
|
this.forwardForm.name = ''
|
||||||
|
},
|
||||||
|
|
||||||
|
formatList (list) {
|
||||||
|
var arr = []
|
||||||
|
for (let item of list) {
|
||||||
|
if (item.girdMemberList && item.girdMemberList.length) {
|
||||||
|
let userList = JSON.parse(JSON.stringify(item.girdMemberList)).map(v => {
|
||||||
|
return {
|
||||||
|
...v,
|
||||||
|
isUser: true,
|
||||||
|
girdName: item.girdName,
|
||||||
|
girdId: item.id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
item.girdList = [
|
||||||
|
...userList
|
||||||
|
]
|
||||||
|
delete item.girdMemberList
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.girdList && item.girdList.length) {
|
||||||
|
this.formatList(item.girdList)
|
||||||
|
}
|
||||||
|
|
||||||
|
arr.push(item)
|
||||||
|
}
|
||||||
|
|
||||||
|
return arr
|
||||||
|
},
|
||||||
|
|
||||||
|
filterNode (value, data) {
|
||||||
|
if (!value) return true
|
||||||
|
|
||||||
|
return (data.girdName && data.girdName.indexOf(value) !== -1) || (data.name && data.name.indexOf(value) !== -1) || (data.name && data.phone.indexOf(value) !== -1)
|
||||||
|
},
|
||||||
|
|
||||||
|
onTreeChange (e) {
|
||||||
|
this.gridInfo = e
|
||||||
|
},
|
||||||
|
|
||||||
|
onForwardConfirm () {
|
||||||
|
this.$refs.forwardForm.validate(v => {
|
||||||
|
if (v) {
|
||||||
|
this.instance.post('/app/appclapeventinfo/transferByManager', {
|
||||||
|
...this.forwardForm,
|
||||||
|
id: this.params.id
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.code == 0) {
|
||||||
|
this.isShowForward = false
|
||||||
|
this.getDetail()
|
||||||
|
this.$message.success('转交成功!')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onConfirm () {
|
||||||
|
if (this.gridInfo.userId || this.gridInfo.isLastLevel === '1') {
|
||||||
|
if (this.gridInfo.userId) {
|
||||||
|
this.forwardForm.girdId = this.gridInfo.girdId
|
||||||
|
this.forwardForm.girdName = this.gridInfo.girdName
|
||||||
|
this.forwardForm.girdMemberId = this.gridInfo.id
|
||||||
|
this.forwardForm.girdMemberName = this.gridInfo.name
|
||||||
|
} else {
|
||||||
|
this.forwardForm.girdId = this.gridInfo.id
|
||||||
|
}
|
||||||
|
|
||||||
|
this.forwardForm.girdName = this.gridInfo.girdName
|
||||||
|
this.forwardForm.name = `${this.gridInfo.girdName}${this.gridInfo.name ? '-' + this.gridInfo.name : ''}`
|
||||||
|
|
||||||
|
this.isShowUser = false
|
||||||
|
} else {
|
||||||
|
return this.$message.error('请选择网格员或者最后层网格')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getDict () {
|
||||||
|
this.instance.post(`/app/appclapeventgroup/list?current=1&size=100000`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.dictList = res.data.records.map(v => {
|
||||||
|
return {
|
||||||
|
dictValue: v.id,
|
||||||
|
dictName: v.groupName
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
close () {
|
||||||
|
this.$confirm('确定关闭该事件？').then(() => {
|
||||||
|
this.instance.post(`/app/appmininotice/delete?ids=${this.params.id}`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('删除成功！')
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel (isRefresh) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'list',
|
||||||
|
isRefresh: !!isRefresh
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange(e) {
|
||||||
|
this.instance.post(`/app/appvillagerintegralrule/list?size=1000&classification=${e}&ruleStatus=1`).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.form.ruleId = ''
|
||||||
|
this.eventList = res.data.records
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
initMap() {
|
||||||
|
let { lng, lat } = this.detail
|
||||||
|
let center = [lng, lat]
|
||||||
|
AMapLoader.load({
|
||||||
|
key: 'b553334ba34f7ac3cd09df9bc8b539dc',
|
||||||
|
version: '2.0'
|
||||||
|
}).then(AMap => {
|
||||||
|
let map = new AMap.Map('map', {
|
||||||
|
center,
|
||||||
|
zoom: 14
|
||||||
|
})
|
||||||
|
let marker = new AMap.Marker({
|
||||||
|
position: new AMap.LngLat(lng, lat),
|
||||||
|
title: this.detail.address
|
||||||
|
})
|
||||||
|
map.add(marker)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
handleEvent() {
|
||||||
|
this.$refs.form.validate(v => {
|
||||||
|
if (v) {
|
||||||
|
this.instance.post('/app/appclapeventinfo/finishByManager', {
|
||||||
|
...this.form,
|
||||||
|
groupName: this.dictList.filter(v => v.dictValue === this.form.groupId)[0].dictName,
|
||||||
|
id: this.params.id
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.code == 0) {
|
||||||
|
this.isShowAdd = false
|
||||||
|
this.getDetail()
|
||||||
|
this.$message.success('处理成功!')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.reportAtWillDetail {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.grid-wrapper {
|
||||||
|
min-height: 360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-btns {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
::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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-steps {
|
||||||
|
::v-deep .el-step__icon {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #555555;
|
||||||
|
border-color: #d0d4dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-step__head.is-finish {
|
||||||
|
.el-step__icon.is-text {
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
background: #2266ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-step__line {
|
||||||
|
background-color: #d0d4dc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgs {
|
||||||
|
font-size: 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 108px;
|
||||||
|
height: 108px;
|
||||||
|
margin-right: 4px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(2n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .report-dialog {
|
||||||
|
.el-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-step__head.is-process {
|
||||||
|
color: #555;
|
||||||
|
border-color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .is-finish h2 {
|
||||||
|
color: #2266ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-title {
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-content__wrapper {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.detail-content__wrapper--left {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .ai-detail__content {
|
||||||
|
background: #f3f6f9;
|
||||||
|
|
||||||
|
.ai-detail__content--wrapper {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
& > .el-card {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightZone {
|
||||||
|
width: 400px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-card {
|
||||||
|
.el-card__header {
|
||||||
|
padding: 12px 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card__body {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#amap {
|
||||||
|
width: 466px;
|
||||||
|
height: 232px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-steps {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgFormItem > .el-form-item__content {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-image__inner {
|
||||||
|
width: 82px;
|
||||||
|
height: 82px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
121
project/sass/apps/AppReportAiWill/components/List.vue
Normal file
121
project/sass/apps/AppReportAiWill/components/List.vue
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
<template>
|
||||||
|
<ai-list>
|
||||||
|
<template #title>
|
||||||
|
<ai-title title="事件上报" isShowBottomBorder></ai-title>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<ai-search-bar>
|
||||||
|
<template #left>
|
||||||
|
<ai-select
|
||||||
|
v-model="search.eventStatus"
|
||||||
|
clearable
|
||||||
|
placeholder="处理状态"
|
||||||
|
:selectList="dict.getDict('clapEventStatus')"
|
||||||
|
@change="search.current = 1, getList()">
|
||||||
|
</ai-select>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
<el-input
|
||||||
|
v-model="search.content"
|
||||||
|
class="search-input"
|
||||||
|
size="small"
|
||||||
|
@keyup.enter.native="search.current = 1, getList()"
|
||||||
|
placeholder="请输入内容描述/上报人"
|
||||||
|
clearable
|
||||||
|
@change="getList"
|
||||||
|
@clear="search.current = 1, search.content = '', getList()"
|
||||||
|
suffix-icon="iconfont iconSearch">
|
||||||
|
</el-input>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table :tableData="tableData" :colConfigs="colConfigs" :total="total" :current.sync="search.current" :size.sync="search.size" @getList="getList">
|
||||||
|
<el-table-column slot="options" label="操作" fixed="right" width="120" align="center">
|
||||||
|
<div class="table-options" slot-scope="{row}">
|
||||||
|
<el-button type="text" title="详情" @click="toDetail(row.id)">详情</el-button>
|
||||||
|
</div>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'List',
|
||||||
|
label: "随手拍",
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
userList: [],
|
||||||
|
search: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
eventStatus: '',
|
||||||
|
content: ''
|
||||||
|
},
|
||||||
|
total: 0,
|
||||||
|
tableData: [],
|
||||||
|
content: '',
|
||||||
|
id: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
|
||||||
|
colConfigs() {
|
||||||
|
return [
|
||||||
|
{ prop: 'content', label: '内容描述', width: '300px' },
|
||||||
|
{ prop: 'groupName', label: '事件类型', align: 'center' },
|
||||||
|
{ prop: 'girdName', label: '所属网格', align: 'center' },
|
||||||
|
{ prop: 'createTime', label: '上报时间', align: 'center' },
|
||||||
|
{ prop: 'name', label: '上报居民', align: 'center' },
|
||||||
|
{ prop: 'phone', label: '联系方式', align: 'center' },
|
||||||
|
{ prop: 'eventStatus', label: '处理状态', align: 'center', formart: v => this.dict.getLabel('clapEventStatus', v) },
|
||||||
|
{ prop: 'processTime', label: '处理时长', align: 'center' },
|
||||||
|
{ slot: 'options' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created () {
|
||||||
|
this.dict.load('clapEventStatus').then(() => {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getList () {
|
||||||
|
this.instance.post(`/app/appclapeventinfo/list`, null, {
|
||||||
|
params: {
|
||||||
|
...this.search
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
toDetail (id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Detail',
|
||||||
|
params: {
|
||||||
|
id: id || ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<div class="AppReturnHomeRegister">
|
||||||
|
<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.vue'
|
||||||
|
import Detail from './components/Detail.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AppReturnHomeRegister',
|
||||||
|
label: '返乡登记',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
List,
|
||||||
|
Detail
|
||||||
|
},
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
permissions: Function
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
component: 'List',
|
||||||
|
params: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onChange (data) {
|
||||||
|
if (data.type === 'Detail') {
|
||||||
|
this.component = 'Detail'
|
||||||
|
this.isShowDetail = true
|
||||||
|
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" scoped>
|
||||||
|
.AppReturnHomeRegister {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
279
project/sass/apps/AppReturnHomeRegister/components/Detail.vue
Normal file
279
project/sass/apps/AppReturnHomeRegister/components/Detail.vue
Normal file
@@ -0,0 +1,279 @@
|
|||||||
|
<template>
|
||||||
|
<ai-detail isHasSidebar>
|
||||||
|
<template slot="title">
|
||||||
|
<ai-title title="返乡登记详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
||||||
|
</ai-title>
|
||||||
|
</template>
|
||||||
|
<template slot="content">
|
||||||
|
<AiSidebar :tabTitle="tabList" v-model="currIndex"></AiSidebar>
|
||||||
|
<div v-show="currIndex === 0">
|
||||||
|
<ai-card title="基本信息" v-show="currIndex === 0">
|
||||||
|
<template #content>
|
||||||
|
<ai-wrapper
|
||||||
|
label-width="120px">
|
||||||
|
<ai-info-item label="姓名" :value="info.name"></ai-info-item>
|
||||||
|
<ai-info-item label="填报时间" :value="info.createTime"></ai-info-item>
|
||||||
|
<ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
|
||||||
|
<ai-info-item label="手机号码" :value="info.phone"></ai-info-item>
|
||||||
|
<ai-info-item label="人员类别" isLine>
|
||||||
|
<span :style="info.type == 0 ? 'color:#42D784;' : 'color:#f46;'">{{dict.getLabel('epidemicMemberType', info.type)}}</span>
|
||||||
|
</ai-info-item>
|
||||||
|
</ai-wrapper>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
<ai-card title="行程信息">
|
||||||
|
<template #content>
|
||||||
|
<ai-wrapper
|
||||||
|
label-width="120px">
|
||||||
|
<ai-info-item label="出发时间" :value="info.startTime"></ai-info-item>
|
||||||
|
<ai-info-item label="出发地区" >
|
||||||
|
<span :style="{color: info.denger == 1 ? '#FF4466' : '#333'}">{{info.startAreaName}} </span>
|
||||||
|
</ai-info-item>
|
||||||
|
<ai-info-item label="出发地址" isLine :value="info.startAddress"></ai-info-item>
|
||||||
|
<ai-info-item label="出行方式" :value="dict.getLabel('epidemicRecentTravel', info.travelType)"></ai-info-item>
|
||||||
|
<ai-info-item label="行程描述" isLine :value="info.description"></ai-info-item>
|
||||||
|
<ai-info-item label="到达时间" :value="info.arriveTime"></ai-info-item>
|
||||||
|
<ai-info-item label="到达地区" :value="info.arriveAreaName"></ai-info-item>
|
||||||
|
<ai-info-item label="返乡地址" isLine :value="info.arriveAddress"></ai-info-item>
|
||||||
|
</ai-wrapper>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
<ai-card title="健康状况">
|
||||||
|
<template #content>
|
||||||
|
<ai-wrapper
|
||||||
|
label-width="120px">
|
||||||
|
<ai-info-item label="当前体温">
|
||||||
|
<span :style="info.temperature >= 37.3 ? 'color:#f46;' : ''">{{ info.temperature + '℃' }}</span>
|
||||||
|
</ai-info-item>
|
||||||
|
<ai-info-item label="14天内是否接触新冠确诊或疑似患者">
|
||||||
|
<span :class="'color-'+info.touchInFourteen">{{$dict.getLabel('epidemicTouchInFourteen', info.touchInFourteen)}}</span>
|
||||||
|
</ai-info-item>
|
||||||
|
<ai-info-item label="当前健康状况">
|
||||||
|
<span></span>
|
||||||
|
<span v-for="(item, index) in info.health" :key="index" :style="item != 0 ? 'color:#FF4466;' : ''"><span v-if="index>0">;</span>{{$dict.getLabel('epidemicRecentHealth', item)}}</span>
|
||||||
|
</ai-info-item>
|
||||||
|
</ai-wrapper>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
<ai-card title="核酸检测">
|
||||||
|
<template #content>
|
||||||
|
<ai-wrapper
|
||||||
|
label-width="120px">
|
||||||
|
<ai-info-item label="检测日期" :value="info.checkTime && info.checkTime.split(' ')[0]"></ai-info-item>
|
||||||
|
<ai-info-item label="检测结果">
|
||||||
|
<span :style="info.checkResult == 1 ? 'color:#f46;' : 'color:#42D784;'">{{$dict.getLabel('epidemicRecentTestResult', info.checkResult)}}</span>
|
||||||
|
</ai-info-item>
|
||||||
|
<ai-info-item label="本人健康码截图" isLine>
|
||||||
|
<ai-uploader
|
||||||
|
:instance="instance"
|
||||||
|
v-model="info.checkPhoto"
|
||||||
|
disabled
|
||||||
|
:limit="9">
|
||||||
|
</ai-uploader>
|
||||||
|
</ai-info-item>
|
||||||
|
</ai-wrapper>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</div>
|
||||||
|
<div v-show="currIndex === 1">
|
||||||
|
<ai-card title="异常处理">
|
||||||
|
<template #right>
|
||||||
|
<el-button type="primary" v-if="info.status === '0'" @click="release">解除异常</el-button>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<ai-wrapper
|
||||||
|
label-width="120px">
|
||||||
|
<ai-info-item label="姓名" :value="info.name"></ai-info-item>
|
||||||
|
<ai-info-item label="填报时间" :value="info.createTime"></ai-info-item>
|
||||||
|
<ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
|
||||||
|
<ai-info-item label="手机号码" :value="info.phone"></ai-info-item>
|
||||||
|
<ai-info-item label="人员类别" isLine :value="dict.getLabel('epidemicMemberType', info.type)"></ai-info-item>
|
||||||
|
<ai-info-item label="异常状况" isLine>
|
||||||
|
<span :style="{color: info.unusual ? 'red' : '#333'}">{{ info.unusual || '-' }}</span>
|
||||||
|
</ai-info-item>
|
||||||
|
<ai-info-item label="异常解除人" v-if="info.releaseName && info.status === '1'" :value="info.releaseName"></ai-info-item>
|
||||||
|
<ai-info-item label="异常解除时间" v-if="info.releaseTime && info.status === '1'" :value="info.releaseTime"></ai-info-item>
|
||||||
|
</ai-wrapper>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
<ai-card title="异常情况记录">
|
||||||
|
<template #right>
|
||||||
|
<el-button type="primary" v-if="info.status === '0'" @click="isShow = true">添加记录</el-button>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<ai-table
|
||||||
|
:tableData="tableData"
|
||||||
|
:col-configs="colConfigs"
|
||||||
|
:total="total"
|
||||||
|
:current.sync="search.current"
|
||||||
|
:size.sync="search.size"
|
||||||
|
@getList="getList">
|
||||||
|
<el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<div class="table-options">
|
||||||
|
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
<ai-dialog
|
||||||
|
:visible.sync="isShow"
|
||||||
|
width="800px"
|
||||||
|
@close="form.content = ''"
|
||||||
|
title="添加异常记录"
|
||||||
|
@onConfirm="onConfirm">
|
||||||
|
<el-form class="ai-form" label-width="120px" :model="form" ref="form">
|
||||||
|
<el-form-item label="异常记录" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入异常记录' }]">
|
||||||
|
<el-input type="textarea" :rows="5" :maxlength="500" v-model="form.content" clearable placeholder="请输入异常记录" show-word-limit></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ai-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Detail',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
params: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
total: 0,
|
||||||
|
info: {},
|
||||||
|
id: '',
|
||||||
|
search: {
|
||||||
|
current: 1,
|
||||||
|
size: 10
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
content: ''
|
||||||
|
},
|
||||||
|
isShow: false,
|
||||||
|
currIndex: 0,
|
||||||
|
tableData: [],
|
||||||
|
colConfigs: [
|
||||||
|
{prop: 'content', label: '异常记录', align: 'center' },
|
||||||
|
{prop: 'createTime', label: '创建时间', align: 'center'},
|
||||||
|
{prop: 'createUserName', label: '记录人', align: 'center' }
|
||||||
|
],
|
||||||
|
tabList: ['基本信息', '异常处理']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created () {
|
||||||
|
if (this.params && this.params.id) {
|
||||||
|
this.id = this.params.id
|
||||||
|
this.$dict.load(['epidemicRecentHealth', 'epidemicRecentTravel', 'epidemicTouchInFourteen', 'epidemicMemberType', 'epidemicRecentTestResult']).then(() => {
|
||||||
|
this.getInfo(this.params.id)
|
||||||
|
})
|
||||||
|
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getInfo (id) {
|
||||||
|
this.instance.post(`/app/appepidemicbackhomerecord/queryDetailById?id=${id}`).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.info = res.data
|
||||||
|
this.info.checkPhoto = res.data.checkPhoto ? JSON.parse(res.data.checkPhoto) : []
|
||||||
|
let healthName = ''
|
||||||
|
this.info.isHealth = false
|
||||||
|
res.data.health.split(',').forEach(v => {
|
||||||
|
if (v > 0) {
|
||||||
|
this.info.isHealth = true
|
||||||
|
}
|
||||||
|
healthName = healthName + this.$dict.getLabel('epidemicRecentHealth', v)
|
||||||
|
})
|
||||||
|
this.info.healthName = healthName
|
||||||
|
this.info.health = this.info.health.split(',')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
release () {
|
||||||
|
this.$confirm('确定解除异常？').then(() => {
|
||||||
|
this.instance.post(`/app/appepidemicbackhomerecord/release?recordId=${this.params.id}`, {
|
||||||
|
id: this.params.id
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('解除异常成功！')
|
||||||
|
this.currIndex = 0
|
||||||
|
this.getInfo(this.params.id)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
remove(id) {
|
||||||
|
this.$confirm('确定删除该数据？').then(() => {
|
||||||
|
this.instance.post(`/app/appepidemicunusuallog/delete?ids=${id}`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('删除成功！')
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onConfirm() {
|
||||||
|
this.$refs.form.validate(v => {
|
||||||
|
if (v) {
|
||||||
|
this.instance.post('/app/appepidemicunusuallog/addOrUpdate', {
|
||||||
|
...this.form,
|
||||||
|
recordId: this.params.id
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.code == 0) {
|
||||||
|
this.isShow = false
|
||||||
|
this.getList()
|
||||||
|
this.$message.success('添加成功!')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getList () {
|
||||||
|
this.instance.post(`/app/appepidemicunusuallog/list`, null, {
|
||||||
|
params: {
|
||||||
|
...this.search,
|
||||||
|
recordId: this.params.id
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel () {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'list',
|
||||||
|
isRefresh: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.color-0{
|
||||||
|
color: #42D784;
|
||||||
|
}
|
||||||
|
.color-1{
|
||||||
|
color: #f46;
|
||||||
|
}
|
||||||
|
.color-2{
|
||||||
|
color: #1365DD;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
274
project/sass/apps/AppReturnHomeRegister/components/List.vue
Normal file
274
project/sass/apps/AppReturnHomeRegister/components/List.vue
Normal file
@@ -0,0 +1,274 @@
|
|||||||
|
<template>
|
||||||
|
<ai-list class="list">
|
||||||
|
<ai-title slot="title" title="返乡登记" v-if="search.arriveAreaId" isShowBottomBorder :instance="instance" :disabledLevel="disabledLevel" isShowArea v-model="search.arriveAreaId" @change="changeArea"></ai-title>
|
||||||
|
<template slot="content">
|
||||||
|
<div class="statistics-top">
|
||||||
|
<div class="statistics-top__item">
|
||||||
|
<span>返乡人数</span>
|
||||||
|
<h2 style="color: #2266FF;">{{ info.total }}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="statistics-top__item">
|
||||||
|
<span>今日新增返乡</span>
|
||||||
|
<h2 style="color: #22AA99;">{{ info.today }}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="statistics-top__item">
|
||||||
|
<span>异常人数</span>
|
||||||
|
<h2 style="color: #F8B425">{{ info.unusual }}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="statistics-top__item">
|
||||||
|
<span>今日异常人数</span>
|
||||||
|
<h2 style="color: red">{{ info.todayUnusual }}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="statistics-top__item">
|
||||||
|
<span>异常处理</span>
|
||||||
|
<h2 style="color: red">{{ info.release }}</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<ai-search-bar bottomBorder>
|
||||||
|
<template #left>
|
||||||
|
<ai-select
|
||||||
|
v-model="search.status"
|
||||||
|
clearable
|
||||||
|
placeholder="请选择健康状态"
|
||||||
|
:selectList="dictList"
|
||||||
|
@change="search.current = 1, getList()">
|
||||||
|
</ai-select>
|
||||||
|
<ai-download :instance="instance" url="/app/appepidemicbackhomerecord/export" :params="param" fileName="返乡登记" :disabled="tableData.length == 0">
|
||||||
|
<el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
|
||||||
|
</ai-download>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
<el-input
|
||||||
|
v-model="search.name"
|
||||||
|
size="small"
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="search.current = 1, getList()"
|
||||||
|
@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"
|
||||||
|
v-loading="loading"
|
||||||
|
style="margin-top: 16px;"
|
||||||
|
:current.sync="search.current"
|
||||||
|
:size.sync="search.size"
|
||||||
|
@getList="getList">
|
||||||
|
<el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<div class="table-options">
|
||||||
|
<el-button type="text" @click="toDetail(row.id)">详情</el-button>
|
||||||
|
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
export default {
|
||||||
|
name: 'List',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
search: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
name: '',
|
||||||
|
arriveAreaId: '',
|
||||||
|
status: ''
|
||||||
|
},
|
||||||
|
dictList: [{
|
||||||
|
dictName: '异常',
|
||||||
|
dictValue: '0'
|
||||||
|
}, {
|
||||||
|
dictName: '正常',
|
||||||
|
dictValue: '1'
|
||||||
|
}],
|
||||||
|
info: {},
|
||||||
|
colConfigs: [
|
||||||
|
{ prop: 'name', label: '姓名' },
|
||||||
|
{ prop: 'phone', align: 'center', label: '手机号码' },
|
||||||
|
{ prop: 'startTime', align: 'center', label: '出发时间', formart: v => v.substr(0, v.length - 3) },
|
||||||
|
{
|
||||||
|
prop: 'startAreaName',
|
||||||
|
align: 'center',
|
||||||
|
label: '出发地区'
|
||||||
|
},
|
||||||
|
{ prop: 'arriveTime', align: 'center', label: '到达时间', formart: v => v.substr(0, v.length - 3) },
|
||||||
|
{
|
||||||
|
prop: 'arriveAreaName',
|
||||||
|
align: 'center',
|
||||||
|
label: '到达地区'
|
||||||
|
},
|
||||||
|
{ prop: 'checkTime', align: 'center', label: '核酸日期', formart: v => v.split(' ')[0] },
|
||||||
|
{
|
||||||
|
prop: 'status',
|
||||||
|
align: 'center',
|
||||||
|
label: '健康状态',
|
||||||
|
render: (h, {row}) => {
|
||||||
|
return h('span', {
|
||||||
|
style: {
|
||||||
|
color: row.status === '0' ? 'red' : '#333'
|
||||||
|
}
|
||||||
|
}, row.status === '0' ? '异常' : '正常')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
ids: [],
|
||||||
|
tableData: [],
|
||||||
|
total: 0,
|
||||||
|
loading: false,
|
||||||
|
disabledLevel: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
|
||||||
|
param () {
|
||||||
|
return this.search
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created () {
|
||||||
|
this.disabledLevel = this.user.info.areaList.length - 1
|
||||||
|
this.search.arriveAreaId = this.user.info.areaId
|
||||||
|
this.loading = true
|
||||||
|
this.dict.load(['marriageType', 'marriagePersonType', 'modeType']).then(() => {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getList () {
|
||||||
|
this.instance.post(`/app/appepidemicbackhomerecord/list`, null, {
|
||||||
|
params: {
|
||||||
|
...this.search
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
this.loading = false
|
||||||
|
} else {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
|
||||||
|
this.getTotalInfo()
|
||||||
|
},
|
||||||
|
|
||||||
|
toDetail (id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Detail',
|
||||||
|
params: {
|
||||||
|
id: id || ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
changeArea () {
|
||||||
|
this.search.current = 1
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getList()
|
||||||
|
this.getTotalInfo()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
remove(id) {
|
||||||
|
this.$confirm('确定删除该数据？').then(() => {
|
||||||
|
this.instance.post(`/app/appepidemicbackhomerecord/delete?ids=${id}`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('删除成功！')
|
||||||
|
this.getTotalInfo()
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
getTotalInfo () {
|
||||||
|
this.instance.post(`/app/appepidemicbackhomerecord/statistic`, null, {
|
||||||
|
params: {
|
||||||
|
areaId: this.search.arriveAreaId
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.info = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.list {
|
||||||
|
::v-deep .ai-list__content {
|
||||||
|
padding: 0!important;
|
||||||
|
|
||||||
|
.ai-list__content--right-wrapper {
|
||||||
|
background: transparent!important;
|
||||||
|
box-shadow: none!important;
|
||||||
|
margin: 0!important;
|
||||||
|
padding: 12px 16px 12px!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.statistics-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
flex: 1;
|
||||||
|
height: 96px;
|
||||||
|
line-height: 1;
|
||||||
|
margin-right: 20px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #888888;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 16px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
65
project/sass/apps/AppRiskArea/AppRiskArea.vue
Normal file
65
project/sass/apps/AppRiskArea/AppRiskArea.vue
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div class="doc-circulation ailist-wrapper">
|
||||||
|
<keep-alive :include="['List']">
|
||||||
|
<component ref="component" :moduleName="moduleName" :moduleId="moduleId" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||||
|
</keep-alive>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import List from './components/List'
|
||||||
|
import Add from './components/Add'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AppRiskArea',
|
||||||
|
label: '风险配置',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
component: 'List',
|
||||||
|
params: {},
|
||||||
|
moduleId: '',
|
||||||
|
include: [],
|
||||||
|
moduleName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
Add,
|
||||||
|
List
|
||||||
|
},
|
||||||
|
|
||||||
|
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">
|
||||||
|
.doc-circulation {
|
||||||
|
height: 100%;
|
||||||
|
background: #F3F6F9;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
154
project/sass/apps/AppRiskArea/components/Add.vue
Normal file
154
project/sass/apps/AppRiskArea/components/Add.vue
Normal file
@@ -0,0 +1,154 @@
|
|||||||
|
<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 prop="areaId" style="width: 100%;" label="选择地区" :rules="[{required: true, message: '请选择地区', trigger: 'change'}]">
|
||||||
|
<ai-area-select clearable @fullname="v => form.areaName = v" always-show :instance="instance" v-model="form.areaId"></ai-area-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="风险等级" style="width: 100%;" prop="level" :rules="[{required: true, message: '请选择风险等级', trigger: 'change'}]">
|
||||||
|
<ai-select
|
||||||
|
v-model="form.level"
|
||||||
|
clearable
|
||||||
|
placeholder="请选择风险等级"
|
||||||
|
:selectList="dict.getDict('epidemicDangerousAreaLevel')">
|
||||||
|
</ai-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="cancel">取消</el-button>
|
||||||
|
<el-button type="primary" @click="confirm">提交</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
export default {
|
||||||
|
name: 'Add',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
params: Object,
|
||||||
|
moduleName: String
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
info: {},
|
||||||
|
form: {
|
||||||
|
level: '',
|
||||||
|
areaId: '',
|
||||||
|
areaName: ''
|
||||||
|
},
|
||||||
|
id: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
...mapState(['user'])
|
||||||
|
},
|
||||||
|
|
||||||
|
created () {
|
||||||
|
this.dict.load('epidemicDangerousAreaLevel').then(() => {
|
||||||
|
if (this.params && this.params.id) {
|
||||||
|
this.id = this.params.id
|
||||||
|
this.getInfo(this.params.id)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getInfo (id) {
|
||||||
|
this.instance.post(`/app/appepidemicdangerousarea/queryDetailById?id=${id}`).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.form = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
confirm () {
|
||||||
|
this.$refs.form.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.instance.post(`/app/appepidemicdangerousarea/addOrUpdate`, {
|
||||||
|
...this.form
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('提交成功')
|
||||||
|
setTimeout(() => {
|
||||||
|
this.cancel(true)
|
||||||
|
}, 600)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel (isRefresh) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'list',
|
||||||
|
isRefresh: !!isRefresh
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.content-add {
|
||||||
|
.video {
|
||||||
|
width: 640px;
|
||||||
|
height: 360px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px dashed #D0D4DC;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
span:nth-child(2) {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 40px;
|
||||||
|
color: #2266FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-com {
|
||||||
|
width: 640px;
|
||||||
|
height: 360px;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #D0D4DC;
|
||||||
|
margin-top: -40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
141
project/sass/apps/AppRiskArea/components/List.vue
Normal file
141
project/sass/apps/AppRiskArea/components/List.vue
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
<template>
|
||||||
|
<ai-list class="notice">
|
||||||
|
<template slot="title">
|
||||||
|
<ai-title title="风险区域配置" isShowBottomBorder></ai-title>
|
||||||
|
</template>
|
||||||
|
<template slot="content">
|
||||||
|
<ai-search-bar class="search-bar">
|
||||||
|
<template #left>
|
||||||
|
<ai-select
|
||||||
|
v-model="search.level"
|
||||||
|
clearable
|
||||||
|
placeholder="请选择风险登记"
|
||||||
|
:selectList="dict.getDict('epidemicDangerousAreaLevel')"
|
||||||
|
@change="search.current = 1, getList()">
|
||||||
|
</ai-select>
|
||||||
|
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
<el-input
|
||||||
|
v-model="search.province"
|
||||||
|
class="search-input"
|
||||||
|
size="small"
|
||||||
|
@keyup.enter.native="search.current = 1, getList()"
|
||||||
|
placeholder="省级名称/市级名称/区级名称"
|
||||||
|
clearable
|
||||||
|
@clear="search.current = 1, search.province = '', 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"
|
||||||
|
@getList="getList">
|
||||||
|
<el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<div class="table-options">
|
||||||
|
<el-button type="text" @click="toAdd(row.id)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
export default {
|
||||||
|
name: 'List',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
moduleName: String
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
search: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
level: '',
|
||||||
|
province: ''
|
||||||
|
},
|
||||||
|
currIndex: -1,
|
||||||
|
areaList: [],
|
||||||
|
total: 10,
|
||||||
|
colConfigs: [
|
||||||
|
{ prop: 'province', label: '省级', align: 'left', width: '200px' },
|
||||||
|
{ prop: 'city', label: '市级', align: 'center' },
|
||||||
|
{ prop: 'district', label: '区级', align: 'center' },
|
||||||
|
{ prop: 'town', label: '镇级', align: 'center' },
|
||||||
|
{ prop: 'village', label: '村级', align: 'center' },
|
||||||
|
{ prop: 'level', label: '等级', align: 'center', formart: v => this.dict.getLabel('epidemicDangerousAreaLevel', v) },
|
||||||
|
{ prop: 'createTime', label: '设置时间', align: 'center' },
|
||||||
|
{ prop: 'createUserName', label: '添加人', align: 'center' },
|
||||||
|
{ slot: 'options', label: '操作', align: 'center' }
|
||||||
|
],
|
||||||
|
areaName: '',
|
||||||
|
unitName: '',
|
||||||
|
tableData: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
...mapState(['user'])
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.dict.load('epidemicDangerousAreaLevel').then(() => {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getList() {
|
||||||
|
this.instance.post(`/app/appepidemicdangerousarea/list`, null, {
|
||||||
|
params: {
|
||||||
|
...this.search
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
remove(id) {
|
||||||
|
this.$confirm('确定删除该数据？').then(() => {
|
||||||
|
this.instance.post(`/app/appepidemicdangerousarea/delete?ids=${id}`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('删除成功！')
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
toAdd(id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Add',
|
||||||
|
params: {
|
||||||
|
id: id || ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.notice {
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user