网格区块
This commit is contained in:
yanran200730
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="AppGridMember">
|
<div class="AppGridBlock">
|
||||||
<keep-alive :include="['List']">
|
<keep-alive include="List">
|
||||||
<component
|
<component
|
||||||
ref="component"
|
ref="component"
|
||||||
:is="component"
|
:is="component"
|
||||||
@@ -8,6 +8,7 @@
|
|||||||
:params="params"
|
:params="params"
|
||||||
:instance="instance"
|
:instance="instance"
|
||||||
:dict="dict"
|
:dict="dict"
|
||||||
|
:isEdit="isEdit"
|
||||||
></component>
|
></component>
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</div>
|
</div>
|
||||||
@@ -16,11 +17,10 @@
|
|||||||
<script>
|
<script>
|
||||||
import List from "./components/list";
|
import List from "./components/list";
|
||||||
import Add from "./components/add";
|
import Add from "./components/add";
|
||||||
import Family from "./components/Family";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "AppGridMember",
|
name: "AppGridBlock",
|
||||||
label: "网格管理员",
|
label: "网格区块",
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
instance: Function,
|
instance: Function,
|
||||||
@@ -32,13 +32,13 @@ export default {
|
|||||||
component: "List",
|
component: "List",
|
||||||
params: {},
|
params: {},
|
||||||
include: [],
|
include: [],
|
||||||
|
isEdit: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
Add,
|
Add,
|
||||||
List,
|
List,
|
||||||
Family
|
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {},
|
mounted() {},
|
||||||
@@ -48,11 +48,7 @@ export default {
|
|||||||
if (data.type === "Add") {
|
if (data.type === "Add") {
|
||||||
this.component = "Add";
|
this.component = "Add";
|
||||||
this.params = data.params;
|
this.params = data.params;
|
||||||
}
|
this.isEdit = data.isEdit
|
||||||
|
|
||||||
if (data.type === "Family") {
|
|
||||||
this.component = "Family"
|
|
||||||
this.params = data.params
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.type === "list") {
|
if (data.type === "list") {
|
||||||
@@ -71,7 +67,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.AppGridMember {
|
.AppGridBlock {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #f3f6f9;
|
background: #f3f6f9;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
580
project/sass/apps/AppGridBlock/components/add.vue
Normal file
580
project/sass/apps/AppGridBlock/components/add.vue
Normal file
@@ -0,0 +1,580 @@
|
|||||||
|
<template>
|
||||||
|
<div class="add-block">
|
||||||
|
<ai-detail>
|
||||||
|
<template #title>
|
||||||
|
<ai-title
|
||||||
|
:title="title"
|
||||||
|
:isShowBack="true"
|
||||||
|
:isShowBottomBorder="true"
|
||||||
|
@onBackClick="cancel(false)"
|
||||||
|
></ai-title>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<ai-card title="层级信息">
|
||||||
|
<template slot="content">
|
||||||
|
<ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px">
|
||||||
|
<ai-info-item label="上级层级单位："><span>{{ forms.parentGirdName }}</span></ai-info-item>
|
||||||
|
</ai-wrapper>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
|
||||||
|
<el-form
|
||||||
|
ref="rules"
|
||||||
|
:model="forms"
|
||||||
|
:rules="formRules"
|
||||||
|
size="small"
|
||||||
|
label-suffix="："
|
||||||
|
label-width="120px"
|
||||||
|
>
|
||||||
|
<ai-card title="基础信息">
|
||||||
|
<template slot="content">
|
||||||
|
<div class="above">
|
||||||
|
<div class="left">
|
||||||
|
<el-form-item label="网格名称" prop="girdName">
|
||||||
|
<el-input
|
||||||
|
v-model="forms.girdName"
|
||||||
|
placeholder="请输入…"
|
||||||
|
:maxlength="50"
|
||||||
|
show-word-limit
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="网格类型" prop="girdType">
|
||||||
|
<el-select
|
||||||
|
v-model="forms.girdType"
|
||||||
|
placeholder="请选择"
|
||||||
|
clearable
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="(item, i) in dict.getDict('girdType')"
|
||||||
|
:key="i"
|
||||||
|
:label="item.dictName"
|
||||||
|
:value="item.dictValue"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否最后一级" prop="isLastLevel">
|
||||||
|
<el-select
|
||||||
|
v-model="forms.isLastLevel"
|
||||||
|
placeholder="请选择"
|
||||||
|
clearable
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="(item, i) in dict.getDict('isLastLevel')"
|
||||||
|
:key="i"
|
||||||
|
:label="item.dictName"
|
||||||
|
:value="item.dictValue"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<el-form-item label="网格编码" prop="girdCode">
|
||||||
|
<el-input
|
||||||
|
v-model="forms.girdCode"
|
||||||
|
placeholder="请输入…"
|
||||||
|
maxlength="30"
|
||||||
|
show-word-limit
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="网格层级" prop="girdLevel">
|
||||||
|
<el-select
|
||||||
|
v-model="forms.girdLevel"
|
||||||
|
placeholder="请选择"
|
||||||
|
:disabled="isEdit"
|
||||||
|
clearable
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="(item, i) in dict.getDict('girdLevel')"
|
||||||
|
:key="i"
|
||||||
|
:label="item.dictName"
|
||||||
|
:value="item.dictValue"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
|
||||||
|
<ai-card title="其他信息">
|
||||||
|
<template slot="content">
|
||||||
|
<div class="above">
|
||||||
|
<div class="left">
|
||||||
|
<!-- <el-form-item label="事件上报主体" prop="eventReportUnitId">
|
||||||
|
<el-cascader
|
||||||
|
style="width: 100%"
|
||||||
|
:options="unitOps"
|
||||||
|
ref="cascader"
|
||||||
|
v-model="forms.eventReportUnitId"
|
||||||
|
:props="unitProps"
|
||||||
|
:show-all-levels="false"
|
||||||
|
/>
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item label="初始日期" prop="startDate">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="forms.startDate"
|
||||||
|
type="date"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
placeholder="选择日期"
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="终止日期" prop="endDate">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="forms.endDate"
|
||||||
|
type="date"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
placeholder="选择日期"
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<el-form-item label="面积" prop="area">
|
||||||
|
<el-input
|
||||||
|
v-model="forms.area"
|
||||||
|
placeholder="面积㎡"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-form-item label="网格地址" prop="address">
|
||||||
|
<el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="网格范围" prop="enclosure" v-if="forms.girdLevel === '2' || isAddLastLevel">
|
||||||
|
<el-button size="small" @click="showMap = true">地图标绘</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="cancel(false)" class="delete-btn footer-btn">
|
||||||
|
取 消
|
||||||
|
</el-button>
|
||||||
|
<el-button type="primary" @click="save()" class="footer-btn">
|
||||||
|
提 交
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
<ai-dialog
|
||||||
|
title="网格范围"
|
||||||
|
:visible.sync="showMap"
|
||||||
|
:customFooter="true"
|
||||||
|
:destroyOnClose="true"
|
||||||
|
@opened="beforeSelectMap"
|
||||||
|
border
|
||||||
|
width="850px"
|
||||||
|
>
|
||||||
|
<div class="map">
|
||||||
|
<div class="tipinput">
|
||||||
|
<el-input
|
||||||
|
v-model="searchAddress"
|
||||||
|
@change="addressChange"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入关键字"
|
||||||
|
id="tipinput"
|
||||||
|
size="medium"
|
||||||
|
style="width: 200px"
|
||||||
|
></el-input>
|
||||||
|
</div>
|
||||||
|
<div id="panel"></div>
|
||||||
|
<div class="container" id="container"></div>
|
||||||
|
<el-button-group
|
||||||
|
style="margin-top: 8px"
|
||||||
|
v-if="forms.plottingStatus == 1"
|
||||||
|
>
|
||||||
|
<el-button type="primary" size="mini" @click="polyEditor.open()"
|
||||||
|
>开始编辑
|
||||||
|
</el-button
|
||||||
|
>
|
||||||
|
<el-button size="mini" @click="polyEditor.close()"
|
||||||
|
>结束编辑
|
||||||
|
</el-button
|
||||||
|
>
|
||||||
|
</el-button-group>
|
||||||
|
<el-button-group
|
||||||
|
style="margin-top: 8px"
|
||||||
|
v-if="forms.plottingStatus == 0"
|
||||||
|
>
|
||||||
|
<el-button size="mini" @click="draw('polygon')"
|
||||||
|
>开始绘制多边形
|
||||||
|
</el-button
|
||||||
|
>
|
||||||
|
<!-- <el-button size="mini" @click="close()">关闭绘制</el-button> -->
|
||||||
|
<el-button size="mini" @click="clear()">清除绘制</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-footer" slot="footer">
|
||||||
|
<el-button size="medium" @click="showMap = false">取消</el-button>
|
||||||
|
<el-button type="primary" size="medium" @click="surePotting()"
|
||||||
|
>确认
|
||||||
|
</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</ai-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
|
import {mapState} from "vuex";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "addBlock",
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
params: Object,
|
||||||
|
isEdit: Boolean
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
forms: {
|
||||||
|
address: "",
|
||||||
|
area: "",
|
||||||
|
points: [],
|
||||||
|
endDate: "",
|
||||||
|
eventReportUnit: "",
|
||||||
|
eventReportUnitId: "",
|
||||||
|
girdCode: "",
|
||||||
|
girdLevel: "",
|
||||||
|
girdList: [],
|
||||||
|
girdName: "",
|
||||||
|
girdType: "",
|
||||||
|
isLastLevel: "",
|
||||||
|
parentGirdId: "",
|
||||||
|
parentGirdName: "",
|
||||||
|
startDate: "",
|
||||||
|
plottingStatus: "0",
|
||||||
|
},
|
||||||
|
showMap: false,
|
||||||
|
map: "",
|
||||||
|
mouseTool: "",
|
||||||
|
searchAddress: "",
|
||||||
|
placeSearch: "",
|
||||||
|
overlays: [],
|
||||||
|
options: [],
|
||||||
|
path: [],
|
||||||
|
location: {},
|
||||||
|
polyEditor: "",
|
||||||
|
title: "添加网格区块",
|
||||||
|
parentGirdInfo: {},
|
||||||
|
isAddLastLevel: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(["user"]),
|
||||||
|
formRules() {
|
||||||
|
return {
|
||||||
|
girdName: [
|
||||||
|
{required: true, message: "请输入网格名称", trigger: "change"},
|
||||||
|
],
|
||||||
|
girdLevel: [
|
||||||
|
{required: true, message: "请选择网格层级", trigger: "change"},
|
||||||
|
],
|
||||||
|
girdCode: [
|
||||||
|
{required: true, message: "请输入网格编号"},
|
||||||
|
{pattern: /^\d+$/g, message: "请输入数字"},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
unitProps() {
|
||||||
|
return {
|
||||||
|
value: "id",
|
||||||
|
checkStrictly: true,
|
||||||
|
emitPath: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
unitOps() {
|
||||||
|
let initData = JSON.parse(JSON.stringify(this.options)),
|
||||||
|
ops = initData.filter((e) => !e.parentId);
|
||||||
|
ops.map((e) => this.addChild(e, initData));
|
||||||
|
return ops;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getCorpLocation()
|
||||||
|
if (this.isEdit) {
|
||||||
|
this.title = "编辑网格区块";
|
||||||
|
this.searchDetail();
|
||||||
|
} else {
|
||||||
|
this.forms.parentGirdId = this.params.id;
|
||||||
|
this.forms.parentGirdName = this.params.girdName;
|
||||||
|
this.isAddLastLevel = this.params.girdLevel === '1'
|
||||||
|
// this.forms.girdLevel = Number(this.info.girdLevel) + 1 +'';
|
||||||
|
// this.forms.isLastLevel = ['0','1'].includes(this.forms.girdLevel)?'0':'1';
|
||||||
|
this.title = "添加网格区块";
|
||||||
|
}
|
||||||
|
// this.getAllUnit(this.user.info.areaId);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
cancel(isRefresh) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'list',
|
||||||
|
isRefresh: !!isRefresh,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取所有单位
|
||||||
|
getAllUnit(data) {
|
||||||
|
this.options = [];
|
||||||
|
this.instance.post("/admin/sysunit/getAll", null, {
|
||||||
|
params: {areaId: data},
|
||||||
|
}).then((res) => {
|
||||||
|
if (res?.data) {
|
||||||
|
res.data = res.data.map((a) => {
|
||||||
|
return {...a, label: a.name}
|
||||||
|
});
|
||||||
|
this.options = res.data.filter((e) => !e.parentId);
|
||||||
|
this.options.map((t) => this.addChild(t, res.data));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeSelectMap() {
|
||||||
|
AMapLoader.load({
|
||||||
|
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||||
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
|
plugins: ["AMap.MouseTool", "AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||||
|
AMapUI: {
|
||||||
|
// 是否加载 AMapUI，缺省不加载
|
||||||
|
version: "1.1", // AMapUI 缺省 1.1
|
||||||
|
plugins: [], // 需要加载的 AMapUI ui插件
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((AMap) => {
|
||||||
|
this.map = new AMap.Map("container", {
|
||||||
|
resizeEnable: true,
|
||||||
|
});
|
||||||
|
if (this.forms.plottingStatus == 1) {
|
||||||
|
let path = [];
|
||||||
|
this.forms.points.map((e, index) => {
|
||||||
|
path[index] = [e.lng, e.lat];
|
||||||
|
});
|
||||||
|
let polygon = new AMap.Polygon({
|
||||||
|
path: path,
|
||||||
|
strokeColor: "#FF33FF",
|
||||||
|
strokeWeight: 6,
|
||||||
|
strokeOpacity: 0.2,
|
||||||
|
fillOpacity: 0.4,
|
||||||
|
fillColor: "#1791fc",
|
||||||
|
zIndex: 50,
|
||||||
|
bubble: true,
|
||||||
|
});
|
||||||
|
this.map.add([polygon]);
|
||||||
|
this.map.setFitView();
|
||||||
|
this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
|
||||||
|
} else {
|
||||||
|
this.mouseTool = new AMap.MouseTool(this.map);
|
||||||
|
// this.map.add(new AMap.Marker({
|
||||||
|
// position:this.map.getCenter()
|
||||||
|
// }));
|
||||||
|
this.placeSearch = new AMap.PlaceSearch({
|
||||||
|
pageSize: 3, // 单页显示结果条数
|
||||||
|
pageIndex: 1, // 页码
|
||||||
|
city: "", // 兴趣点城市
|
||||||
|
citylimit: false, //是否强制限制在设置的城市内搜索
|
||||||
|
map: this.map, // 展现结果的地图实例
|
||||||
|
panel: "panel", // 结果列表将在此容器中进行展示。
|
||||||
|
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||||
|
});
|
||||||
|
// this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
|
||||||
|
this.eventOn();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getCorpLocation() {
|
||||||
|
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.location = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//地图事件绑定
|
||||||
|
eventOn() {
|
||||||
|
this.path = [];
|
||||||
|
this.overlays = [];
|
||||||
|
this.map.on("mousemove", null, this);
|
||||||
|
this.mouseTool.on("draw", ({obj}) => {
|
||||||
|
obj.getPath().map((e) => {
|
||||||
|
this.path.push({lat: e.getLat(), lng: e.getLng()});
|
||||||
|
});
|
||||||
|
this.overlays.push(obj);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//map搜索
|
||||||
|
addressChange(val) {
|
||||||
|
this.placeSearch.search(val);
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.mouseTool.close(true);
|
||||||
|
},
|
||||||
|
clear() {
|
||||||
|
this.map.remove(this.overlays);
|
||||||
|
this.overlays = [];
|
||||||
|
this.path = [];
|
||||||
|
},
|
||||||
|
draw(type) {
|
||||||
|
switch (type) {
|
||||||
|
case "marker": {
|
||||||
|
this.mouseTool.marker({
|
||||||
|
//同Marker的Option设置
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "polyline": {
|
||||||
|
this.mouseTool.polyline({
|
||||||
|
strokeColor: "#80d8ff",
|
||||||
|
//同Polyline的Option设置
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "polygon": {
|
||||||
|
this.mouseTool.polygon({
|
||||||
|
fillColor: "#00b0ff",
|
||||||
|
strokeColor: "#80d8ff",
|
||||||
|
borderWeight: 2,
|
||||||
|
strokeWeight: 4,
|
||||||
|
//同Polygon的Option设置
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "rectangle": {
|
||||||
|
this.mouseTool.rectangle({
|
||||||
|
fillColor: "#00b0ff",
|
||||||
|
strokeColor: "#80d8ff",
|
||||||
|
//同Polygon的Option设置
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "circle": {
|
||||||
|
this.mouseTool.circle({
|
||||||
|
fillColor: "#00b0ff",
|
||||||
|
strokeColor: "#80d8ff",
|
||||||
|
//同Circle的Option设置
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
surePotting() {
|
||||||
|
this.forms.points = [];
|
||||||
|
// this.forms.eventReportUnit = this.$refs.cascader.getCheckedNodes().label;
|
||||||
|
if (this.forms.plottingStatus == 1) {
|
||||||
|
this.polyEditor
|
||||||
|
.getTarget()
|
||||||
|
.getPath()
|
||||||
|
.map((e) => {
|
||||||
|
this.forms.points.push({lng: e.lng, lat: e.lat});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.forms.points = [...this.path];
|
||||||
|
}
|
||||||
|
this.showMap = false;
|
||||||
|
},
|
||||||
|
save() {
|
||||||
|
this.$refs["rules"].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.instance
|
||||||
|
.post(
|
||||||
|
`/app/appgirdinfo/addOrUpdate`,
|
||||||
|
{
|
||||||
|
...this.forms,
|
||||||
|
},
|
||||||
|
null
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.cancel(true)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.log("error submit!!");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
searchDetail() {
|
||||||
|
this.instance.post(`/app/appgirdinfo/queryDetailById`, null, {
|
||||||
|
params: {id: this.params.id},
|
||||||
|
}).then((res) => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.forms = {...res.data};
|
||||||
|
this.parentGirdInfo = res.data.parentGirdInfo;
|
||||||
|
this.forms.parentGirdName = res.data.parentGirdInfo && res.data.parentGirdInfo.girdName;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.add-block {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
::v-deep .amap-copyright {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .amap-logo {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.above {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 8px 0;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 380px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 380px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-btn {
|
||||||
|
width: 92px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
width: 780px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 760px;
|
||||||
|
height: 420px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #d0d4dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#panel {
|
||||||
|
position: absolute;
|
||||||
|
height: 400px;
|
||||||
|
right: 30px;
|
||||||
|
top: 20px;
|
||||||
|
width: 280px;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tipinput {
|
||||||
|
position: absolute;
|
||||||
|
width: 200px;
|
||||||
|
height: 38px;
|
||||||
|
left: 20px;
|
||||||
|
top: 20px;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
696
project/sass/apps/AppGridBlock/components/list.vue
Normal file
696
project/sass/apps/AppGridBlock/components/list.vue
Normal file
@@ -0,0 +1,696 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-grid-block">
|
||||||
|
<ai-list>
|
||||||
|
<template slot="title">
|
||||||
|
<ai-title title="网格区块" :isShowBottomBorder="true"></ai-title>
|
||||||
|
</template>
|
||||||
|
<template slot="left">
|
||||||
|
<ai-tree-menu title="网格层级" @search="(v) => $refs.tree.filter(v)">
|
||||||
|
<el-tree
|
||||||
|
:data="treeObj.treeList"
|
||||||
|
:props="treeObj.defaultProps"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
node-key="id"
|
||||||
|
ref="tree"
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
default-expand-all
|
||||||
|
highlight-current
|
||||||
|
/>
|
||||||
|
</ai-tree-menu>
|
||||||
|
</template>
|
||||||
|
<template slot="content">
|
||||||
|
<ai-search-bar>
|
||||||
|
<template slot="left">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="searchObj.createTimeStr"
|
||||||
|
type="date"
|
||||||
|
@change="(page.current = 1), getList()"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
size="small"
|
||||||
|
placeholder="创建时间"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</template>
|
||||||
|
<template slot="right">
|
||||||
|
<el-input
|
||||||
|
v-model="searchObj.girdName"
|
||||||
|
size="small"
|
||||||
|
placeholder="输入网格名称"
|
||||||
|
@keyup.enter.native="(page.current = 1), getList()"
|
||||||
|
clearable
|
||||||
|
@clear="(searchObj.girdName = '', page.current = 1), getList()"
|
||||||
|
suffix-icon="iconfont iconSearch"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-search-bar bottomBorder>
|
||||||
|
<template slot="left">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="iconfont iconAdd"
|
||||||
|
:disabled="info.girdLevel === '3'"
|
||||||
|
@click="(isEdit = false), toAdd()"
|
||||||
|
>新增
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
icon="iconfont iconDelete"
|
||||||
|
@click="deleteById(ids.join(','))"
|
||||||
|
:disabled="!Boolean(ids.length)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
<ai-download
|
||||||
|
:instance="instance"
|
||||||
|
url="/app/appgirdinfo/exportGirdInfo"
|
||||||
|
:params="{ ...searchObj, ids: ids.join(',') }"
|
||||||
|
fileName="网格区块"
|
||||||
|
>
|
||||||
|
<el-button icon="iconfont iconExported" size="small"
|
||||||
|
>导出全部</el-button
|
||||||
|
>
|
||||||
|
</ai-download>
|
||||||
|
<ai-import
|
||||||
|
ref="import"
|
||||||
|
title="导入"
|
||||||
|
name="网格区块"
|
||||||
|
url="/app/appgirdinfo/downloadGirdInfo"
|
||||||
|
importUrl="/app/appgirdinfo/importGirdInfo"
|
||||||
|
suffixName="xlsx"
|
||||||
|
:customCliker="true"
|
||||||
|
:instance="instance"
|
||||||
|
>
|
||||||
|
<template slot="tips">
|
||||||
|
<p>
|
||||||
|
如果表格中已经存在数据，则会被本次导入的数据覆盖；不存在数据，系统将生成新的标准记录；
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
<el-button size="small" icon="iconfont iconImport"
|
||||||
|
>导入</el-button
|
||||||
|
>
|
||||||
|
</ai-import>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table
|
||||||
|
class="mt10"
|
||||||
|
:tableData="tableData"
|
||||||
|
:col-configs="colConfigs"
|
||||||
|
:total="page.total"
|
||||||
|
ref="aitableex"
|
||||||
|
:current.sync="page.current"
|
||||||
|
:size.sync="page.size"
|
||||||
|
@selection-change="(v) => (ids = v.map((e) => e.id))"
|
||||||
|
@getList="getList()"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
slot="selectId"
|
||||||
|
type="selection"
|
||||||
|
align="center"
|
||||||
|
width="40"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="操作"
|
||||||
|
slot="options"
|
||||||
|
align="center"
|
||||||
|
fixed="right"
|
||||||
|
width="160">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<div class="table-options">
|
||||||
|
<el-button type="text" @click="see(row)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="poltting(row)" :disabled="row.girdLevel !== '2'">标绘</el-button>
|
||||||
|
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
<ai-dialog
|
||||||
|
title="网格范围"
|
||||||
|
:visible.sync="showMap"
|
||||||
|
:customFooter="true"
|
||||||
|
:destroyOnClose="true"
|
||||||
|
border
|
||||||
|
width="850px"
|
||||||
|
>
|
||||||
|
<div class="map">
|
||||||
|
<div class="tipinput">
|
||||||
|
<el-input
|
||||||
|
v-if="editRow.plottingStatus == 0"
|
||||||
|
v-model="searchAddress"
|
||||||
|
@change="addressChange"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入关键字"
|
||||||
|
id="tipinput"
|
||||||
|
size="medium"
|
||||||
|
style="width: 200px"
|
||||||
|
></el-input>
|
||||||
|
</div>
|
||||||
|
<div id="panel" v-if="editRow.plottingStatus == 0"></div>
|
||||||
|
<div class="container" id="container"></div>
|
||||||
|
<el-button-group
|
||||||
|
style="margin-top: 8px"
|
||||||
|
v-if="editRow.plottingStatus == 1"
|
||||||
|
>
|
||||||
|
<el-button type="primary" size="mini" @click="beginPoltting()"
|
||||||
|
>开始编辑</el-button
|
||||||
|
>
|
||||||
|
<el-button size="mini" @click="finishPoltting()">结束编辑</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
<el-button-group
|
||||||
|
style="margin-top: 8px"
|
||||||
|
v-if="editRow.plottingStatus == 0"
|
||||||
|
>
|
||||||
|
<el-button size="mini" @click="draw('polygon')"
|
||||||
|
>开始绘制多边形</el-button
|
||||||
|
>
|
||||||
|
<!-- <el-button size="mini" @click="close()">关闭绘制</el-button> -->
|
||||||
|
<el-button size="mini" @click="clear()">清除绘制</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-footer" slot="footer">
|
||||||
|
<el-button size="medium" @click="showMap = false">取消</el-button>
|
||||||
|
<el-button type="primary" size="medium" @click="confirm()"
|
||||||
|
>确认</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</ai-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "List",
|
||||||
|
label: "网格区块",
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
permissions: Function,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
treeObj: {
|
||||||
|
treeList: [],
|
||||||
|
defaultProps: {
|
||||||
|
children: "girdList",
|
||||||
|
label: "girdName",
|
||||||
|
},
|
||||||
|
defaultExpandedKeys: [],
|
||||||
|
},
|
||||||
|
filterText: "",
|
||||||
|
page: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
},
|
||||||
|
searchObj: {
|
||||||
|
createTimeStr: "",
|
||||||
|
girdName: "",
|
||||||
|
},
|
||||||
|
tableData: [],
|
||||||
|
info: {},
|
||||||
|
ids: [],
|
||||||
|
showMap: false,
|
||||||
|
map: "",
|
||||||
|
polyEditor: "",
|
||||||
|
editRow: {},
|
||||||
|
searchAddress: "",
|
||||||
|
mouseTool: "",
|
||||||
|
placeSearch: "",
|
||||||
|
path: [],
|
||||||
|
overlays: [],
|
||||||
|
isEdit: false,
|
||||||
|
searchId: "",
|
||||||
|
fileList: [],
|
||||||
|
location: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getTreeList();
|
||||||
|
this.getList();
|
||||||
|
this.getCorpLocation()
|
||||||
|
this.dict.load("girdLevel", "girdType", "isLastLevel", "plottingStatus");
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
colConfigs() {
|
||||||
|
let _ = this;
|
||||||
|
return [
|
||||||
|
{ type: 'selection'},
|
||||||
|
{
|
||||||
|
prop: "girdName",
|
||||||
|
align: "left",
|
||||||
|
label: "网格名称",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "girdCode",
|
||||||
|
align: "center",
|
||||||
|
label: "网格编码",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "girdType",
|
||||||
|
align: "center",
|
||||||
|
label: "网格类型",
|
||||||
|
render(h, { row }) {
|
||||||
|
return h("span", {}, _.dict.getLabel("girdType", row.girdType) || '-');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "girdLevel",
|
||||||
|
align: "center",
|
||||||
|
label: "网格层级",
|
||||||
|
render(h, { row }) {
|
||||||
|
return h("span", {}, _.dict.getLabel("girdLevel", row.girdLevel) || '-');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "plottingStatus",
|
||||||
|
align: "center",
|
||||||
|
label: "标绘状态",
|
||||||
|
render(h, { row }) {
|
||||||
|
return h(
|
||||||
|
"span",
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
color: _.dict.getColor("plottingStatus", row.plottingStatus),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_.dict.getLabel("plottingStatus", row.plottingStatus)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "createTime",
|
||||||
|
align: "center",
|
||||||
|
label: "创建时间",
|
||||||
|
render(h, { row }) {
|
||||||
|
return h("span", {}, row.createTime.substring(0, 11));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "girdMemberNames",
|
||||||
|
align: "center",
|
||||||
|
width: 200,
|
||||||
|
label: "网格员",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getCorpLocation(){
|
||||||
|
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
|
||||||
|
if(res.code==0){
|
||||||
|
this.location = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleNodeClick(val) {
|
||||||
|
this.info = { ...val };
|
||||||
|
this.searchId = val.id;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
getTreeList() {
|
||||||
|
this.instance
|
||||||
|
.post("/app/appgirdinfo/listByTop", null, null)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.treeObj.treeList = [...res.data];
|
||||||
|
this.info = { ...this.treeObj.treeList[0] };
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.treeObj.treeList.length && this.$refs.tree.setCurrentKey(this.treeObj.treeList[0].id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
filterNode(value, data) {
|
||||||
|
if (!value) return true;
|
||||||
|
return data.girdName.indexOf(value) !== -1;
|
||||||
|
},
|
||||||
|
deleteById(ids) {
|
||||||
|
ids &&
|
||||||
|
this.$confirm("是否要删除该网格区块？", {
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.instance
|
||||||
|
.post("/app/appgirdinfo/delete", null, {
|
||||||
|
params: { ids },
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res?.code == 0) {
|
||||||
|
this.$message.success("删除成功!");
|
||||||
|
|
||||||
|
this.getList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
deleteTree(ids) {
|
||||||
|
ids &&
|
||||||
|
this.$confirm("是否要删除该网格区块？", {
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.instance
|
||||||
|
.post("/app/appgirdinfo/delete", null, {
|
||||||
|
params: { ids },
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res?.code == 0) {
|
||||||
|
this.$message.success("删除成功!");
|
||||||
|
|
||||||
|
this.getTreeList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
this.instance
|
||||||
|
.post("/app/appgirdinfo/list", null, {
|
||||||
|
params: {
|
||||||
|
...this.searchObj,
|
||||||
|
...this.page,
|
||||||
|
parentGirdId: this.info.girdLevel === '0' ? '' : this.searchId,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.tableData = res.data.records;
|
||||||
|
this.page.total = res.data.total;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleSelectionChange(val) {
|
||||||
|
this.ids = [];
|
||||||
|
val.map((e) => {
|
||||||
|
this.ids.push(e.id);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//添加二级网格
|
||||||
|
addTwoLevel() {
|
||||||
|
this.info = { ...this.treeObj.treeList[0] };
|
||||||
|
this.toAdd()
|
||||||
|
},
|
||||||
|
toAdd() {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Add',
|
||||||
|
params: this.info,
|
||||||
|
isEdit: this.isEdit
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goBack() {
|
||||||
|
this.isAdd = false;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getList();
|
||||||
|
this.getTreeList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
poltting(row) {
|
||||||
|
this.showMap = true;
|
||||||
|
this.editRow = { ...row };
|
||||||
|
AMapLoader.load({
|
||||||
|
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||||
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
|
plugins: ["AMap.PolygonEditor", "AMap.MouseTool", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||||
|
AMapUI: {
|
||||||
|
// 是否加载 AMapUI，缺省不加载
|
||||||
|
version: "1.1", // AMapUI 缺省 1.1
|
||||||
|
plugins: [], // 需要加载的 AMapUI ui插件
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((AMap) => {
|
||||||
|
this.map = new AMap.Map("container", {
|
||||||
|
resizeEnable: true,
|
||||||
|
zoom: 14,
|
||||||
|
});
|
||||||
|
if (this.editRow.plottingStatus == 1) {
|
||||||
|
let path = [];
|
||||||
|
this.editRow.points.map((e, index) => {
|
||||||
|
path[index] = [e.lng, e.lat];
|
||||||
|
});
|
||||||
|
let polygon = new AMap.Polygon({
|
||||||
|
path: path,
|
||||||
|
strokeColor: "#FF33FF",
|
||||||
|
strokeWeight: 6,
|
||||||
|
strokeOpacity: 0.2,
|
||||||
|
fillOpacity: 0.4,
|
||||||
|
fillColor: "#1791fc",
|
||||||
|
zIndex: 50,
|
||||||
|
bubble: true,
|
||||||
|
});
|
||||||
|
this.map.add([polygon]);
|
||||||
|
this.map.setFitView();
|
||||||
|
this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
|
||||||
|
} else {
|
||||||
|
this.mouseTool = new AMap.MouseTool(this.map);
|
||||||
|
this.placeSearch = new AMap.PlaceSearch({
|
||||||
|
pageSize: 3, // 单页显示结果条数
|
||||||
|
pageIndex: 1, // 页码
|
||||||
|
city: "", // 兴趣点城市
|
||||||
|
citylimit: false, //是否强制限制在设置的城市内搜索
|
||||||
|
map: this.map, // 展现结果的地图实例
|
||||||
|
panel: "panel", // 结果列表将在此容器中进行展示。
|
||||||
|
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||||
|
});
|
||||||
|
// this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
|
||||||
|
this.eventOn();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
see(row) {
|
||||||
|
this.info = { ...row };
|
||||||
|
this.isEdit = true;
|
||||||
|
this.toAdd()
|
||||||
|
},
|
||||||
|
draw(type) {
|
||||||
|
switch (type) {
|
||||||
|
case "marker": {
|
||||||
|
this.mouseTool.marker({
|
||||||
|
//同Marker的Option设置
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "polyline": {
|
||||||
|
this.mouseTool.polyline({
|
||||||
|
strokeColor: "#80d8ff",
|
||||||
|
//同Polyline的Option设置
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "polygon": {
|
||||||
|
this.mouseTool.polygon({
|
||||||
|
fillColor: "#00b0ff",
|
||||||
|
strokeColor: "#80d8ff",
|
||||||
|
borderWeight: 2,
|
||||||
|
strokeWeight: 4,
|
||||||
|
//同Polygon的Option设置
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "rectangle": {
|
||||||
|
this.mouseTool.rectangle({
|
||||||
|
fillColor: "#00b0ff",
|
||||||
|
strokeColor: "#80d8ff",
|
||||||
|
//同Polygon的Option设置
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "circle": {
|
||||||
|
this.mouseTool.circle({
|
||||||
|
fillColor: "#00b0ff",
|
||||||
|
strokeColor: "#80d8ff",
|
||||||
|
//同Circle的Option设置
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//map搜索
|
||||||
|
addressChange(val) {
|
||||||
|
this.placeSearch.search(val);
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.mouseTool.close(true);
|
||||||
|
},
|
||||||
|
clear() {
|
||||||
|
this.map.remove(this.overlays);
|
||||||
|
this.overlays = [];
|
||||||
|
this.path = [];
|
||||||
|
},
|
||||||
|
beginPoltting() {
|
||||||
|
this.polyEditor.open();
|
||||||
|
},
|
||||||
|
finishPoltting() {
|
||||||
|
this.polyEditor.close();
|
||||||
|
},
|
||||||
|
confirm() {
|
||||||
|
let path = [];
|
||||||
|
if (this.editRow.plottingStatus == 1) {
|
||||||
|
this.polyEditor
|
||||||
|
.getTarget()
|
||||||
|
.getPath()
|
||||||
|
.map((e) => {
|
||||||
|
path.push({ lng: e.lng, lat: e.lat });
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
path = [...this.path];
|
||||||
|
}
|
||||||
|
delete this.editRow.points;
|
||||||
|
this.instance
|
||||||
|
.post(
|
||||||
|
`/app/appgirdinfo/addOrUpdate`,
|
||||||
|
{
|
||||||
|
...this.editRow,
|
||||||
|
points: path,
|
||||||
|
},
|
||||||
|
null
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.getList();
|
||||||
|
this.showMap = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
eventOn() {
|
||||||
|
this.path = [];
|
||||||
|
this.overlays = [];
|
||||||
|
this.map.on("mousemove", this.showInfoMove, this);
|
||||||
|
this.mouseTool.on("draw", ({ type, obj }) => {
|
||||||
|
obj.getPath().map((e) => {
|
||||||
|
console.log(e)
|
||||||
|
this.path.push({ lat: e.getLat(), lng: e.getLng() });
|
||||||
|
});
|
||||||
|
this.overlays.push(obj);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
resetSearch() {
|
||||||
|
Object.keys(this.searchObj).map((e) => {
|
||||||
|
this.searchObj[e] = "";
|
||||||
|
});
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.app-grid-block {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
::v-deep .el-tree {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
.el-tree-node__expand-icon.is-leaf {
|
||||||
|
color: transparent!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__content > .el-tree-node__expand-icon {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__content {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree__empty-text {
|
||||||
|
color: #222;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__children .el-tree-node__content {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__content:hover {
|
||||||
|
background: #E8EFFF;
|
||||||
|
color: #222222;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-current > .el-tree-node__content {
|
||||||
|
&:hover {
|
||||||
|
background: #2266FF;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
background: #2266FF;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt10 {
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
width: 780px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 760px;
|
||||||
|
height: 420px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #d0d4dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#panel {
|
||||||
|
position: absolute;
|
||||||
|
height: 400px;
|
||||||
|
right: 30px;
|
||||||
|
top: 20px;
|
||||||
|
width: 280px;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tipinput {
|
||||||
|
position: absolute;
|
||||||
|
width: 200px;
|
||||||
|
height: 38px;
|
||||||
|
left: 20px;
|
||||||
|
top: 20px;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .treePanel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.el-tree {
|
||||||
|
min-height: 0;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
width: 100%;
|
||||||
|
height: 32px;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 33.33%;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
width: 33.33%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
6
project/sass/apps/AppGridBlock/index.js
Normal file
6
project/sass/apps/AppGridBlock/index.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import component from './AppGridBlock.vue'
|
||||||
|
|
||||||
|
component.install = function (Vue) {
|
||||||
|
Vue.component(component.name, component)
|
||||||
|
}
|
||||||
|
export default component
|
||||||
@@ -1,499 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,543 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,199 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ai-list class="list">
|
|
||||||
<template slot="title">
|
|
||||||
<ai-title title="网格员管理" :isShowBottomBorder="true"></ai-title>
|
|
||||||
</template>
|
|
||||||
<template slot="content">
|
|
||||||
<ai-search-bar bottomBorder>
|
|
||||||
<template slot="left">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="searchObj.selectionDate"
|
|
||||||
type="date"
|
|
||||||
@change="(page.current = 1), getList()"
|
|
||||||
value-format="yyyy-MM-dd"
|
|
||||||
size="small"
|
|
||||||
placeholder="选用时间">
|
|
||||||
</el-date-picker>
|
|
||||||
</template>
|
|
||||||
<template slot="right">
|
|
||||||
<el-input
|
|
||||||
v-model="searchObj.name"
|
|
||||||
size="small"
|
|
||||||
placeholder="网格员/责任网格"
|
|
||||||
@keyup.enter.native="(page.current = 1), getList()"
|
|
||||||
clearable
|
|
||||||
@clear="(searchObj.name = '', page.current = 1), getList()"
|
|
||||||
suffix-icon="iconfont iconSearch" />
|
|
||||||
</template>
|
|
||||||
</ai-search-bar>
|
|
||||||
<ai-search-bar style="padding: 16px 0 0">
|
|
||||||
<template slot="left">
|
|
||||||
<el-button
|
|
||||||
icon="iconfont iconAdd"
|
|
||||||
type="primary"
|
|
||||||
size="small"
|
|
||||||
@click="add('')"
|
|
||||||
>添加</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
icon="iconfont iconDelete"
|
|
||||||
@click="deleteById(ids.join(','))"
|
|
||||||
:disabled="!Boolean(ids.length)"
|
|
||||||
>删除</el-button
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</ai-search-bar>
|
|
||||||
<ai-table
|
|
||||||
:tableData="tableData"
|
|
||||||
:col-configs="colConfigs"
|
|
||||||
:total="page.total"
|
|
||||||
ref="aitableex"
|
|
||||||
:current.sync="page.current"
|
|
||||||
:size.sync="page.size"
|
|
||||||
@selection-change="(v) => (ids = v.map((e) => e.id))"
|
|
||||||
@getList="getList()">
|
|
||||||
<el-table-column label="操作" slot="options" align="center" fixed="right" width="170">
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<div class="table-options">
|
|
||||||
<el-button type="text" @click="toFamily(row.id)">责任家庭</el-button>
|
|
||||||
<el-button type="text" @click="add(row.id)">查看</el-button>
|
|
||||||
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</ai-table>
|
|
||||||
</template>
|
|
||||||
</ai-list>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "list",
|
|
||||||
label: "网格员管理",
|
|
||||||
props: {
|
|
||||||
instance: Function,
|
|
||||||
dict: Object,
|
|
||||||
permissions: Function,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
searchObj: {
|
|
||||||
name: "",
|
|
||||||
selectionDate: "",
|
|
||||||
},
|
|
||||||
page: {
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
total: 0,
|
|
||||||
},
|
|
||||||
goAdd: false,
|
|
||||||
tableData: [],
|
|
||||||
fileList: [],
|
|
||||||
ids: [],
|
|
||||||
detail: {},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.dict.load("sex", "girdMemberType", "politicsStatus", "education");
|
|
||||||
this.getList();
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
colConfigs() {
|
|
||||||
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>
|
|
||||||
@@ -24,9 +24,9 @@
|
|||||||
<el-form-item label="网格员姓名" prop="name" >
|
<el-form-item label="网格员姓名" prop="name" >
|
||||||
<el-input v-model="forms.name" placeholder="请选择网格员" disabled>
|
<el-input v-model="forms.name" placeholder="请选择网格员" disabled>
|
||||||
<template #append>
|
<template #append>
|
||||||
<ai-wechat-selecter :isMultiple="false" refs="addTags" :instance="instance" v-model="users" @change="getSelectPerson">
|
<AiUserGet :isMultiple="false" refs="addTags" :instance="instance" v-model="users" @change="getSelectPerson">
|
||||||
<el-button size="small" type="primary"><span style="color: #fff">选择成员</span></el-button>
|
<el-button size="small" type="primary"><span style="color: #fff">选择成员</span></el-button>
|
||||||
</ai-wechat-selecter>
|
</AiUserGet>
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -88,7 +88,7 @@
|
|||||||
<div class="above">
|
<div class="above">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
|
<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><ai-open-data type="userName" :openid="forms.name" /></span></ai-info-item>
|
||||||
<ai-info-item label="选用日期："><span >{{forms.selectionDate}}</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 >{{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 >{{dict.getLabel('sex', forms.sex)}}</span></ai-info-item>
|
||||||
|
|||||||
@@ -99,14 +99,14 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
colConfigs() {
|
colConfigs() {
|
||||||
let _ = this;
|
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
type: "selection",
|
type: "selection",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: "name",
|
prop: "wxUserId",
|
||||||
label: "网格员姓名",
|
label: "网格员姓名",
|
||||||
|
openType: 'userName'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: "girdInfoListStr",
|
prop: "girdInfoListStr",
|
||||||
|
|||||||
@@ -5,22 +5,7 @@
|
|||||||
</ai-title>
|
</ai-title>
|
||||||
</template>
|
</template>
|
||||||
<template slot="content">
|
<template slot="content">
|
||||||
<AiSidebar :tabTitle="tabList" v-model="currIndex"></AiSidebar>
|
<ai-card title="基本信息">
|
||||||
<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.areaName"></ai-info-item>
|
|
||||||
<ai-info-item label="详细地址" isLine :value="info.address"></ai-info-item>
|
|
||||||
</ai-wrapper>
|
|
||||||
</template>
|
|
||||||
</ai-card>
|
|
||||||
</div>
|
|
||||||
<ai-card title="每日上报" v-show="currIndex === 1">
|
|
||||||
<template #content>
|
<template #content>
|
||||||
<ai-table
|
<ai-table
|
||||||
class="detail-table__table"
|
class="detail-table__table"
|
||||||
@@ -86,61 +71,6 @@
|
|||||||
</ai-dialog>
|
</ai-dialog>
|
||||||
</template>
|
</template>
|
||||||
</ai-card>
|
</ai-card>
|
||||||
<div v-show="currIndex === 2">
|
|
||||||
<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>
|
|
||||||
<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="isShowAdd = true">添加记录</el-button>
|
|
||||||
</template>
|
|
||||||
<template #content>
|
|
||||||
<ai-table
|
|
||||||
:tableData="recordList"
|
|
||||||
:col-configs="recordConfigs"
|
|
||||||
:total="recordTotal"
|
|
||||||
:current.sync="recordSerch.current"
|
|
||||||
:size.sync="recordSerch.size"
|
|
||||||
@getList="getRecordList">
|
|
||||||
<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="isShowAdd"
|
|
||||||
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>
|
</template>
|
||||||
</ai-detail>
|
</ai-detail>
|
||||||
</template>
|
</template>
|
||||||
@@ -160,114 +90,33 @@
|
|||||||
total: 0,
|
total: 0,
|
||||||
info: {},
|
info: {},
|
||||||
id: '',
|
id: '',
|
||||||
isShowAdd: false,
|
|
||||||
recordTotal: 0,
|
|
||||||
recordSerch: {
|
|
||||||
current: 1,
|
|
||||||
size: 10
|
|
||||||
},
|
|
||||||
search: {
|
search: {
|
||||||
current: 1,
|
current: 1,
|
||||||
size: 10
|
size: 10
|
||||||
},
|
},
|
||||||
form: {
|
|
||||||
content: ''
|
|
||||||
},
|
|
||||||
recordConfigs: [
|
|
||||||
{prop: 'content', label: '异常记录', align: 'center' },
|
|
||||||
{prop: 'createTime', label: '创建时间', align: 'center'},
|
|
||||||
{prop: 'createUserName', label: '记录人', align: 'center' }
|
|
||||||
],
|
|
||||||
reportInfo: {},
|
reportInfo: {},
|
||||||
isShow: false,
|
isShow: false,
|
||||||
currIndex: 0,
|
currIndex: 0,
|
||||||
tableData: [],
|
tableData: [],
|
||||||
recordList: [],
|
|
||||||
colConfigs: [
|
colConfigs: [
|
||||||
{prop: 'createTime', label: '上报日期', align: 'center', dateFormart: 'YYYY-MM-DD'},
|
{prop: 'createTime', label: '上报日期', align: 'center', dateFormart: 'YYYY-MM-DD'},
|
||||||
{prop: 'status', label: '健康状态', align: 'center', formart: v => v === '0' ? '异常' : '正常' }
|
{prop: 'status', label: '健康状态', align: 'center', formart: v => v === '0' ? '异常' : '正常' }
|
||||||
],
|
]
|
||||||
tabList: ['基本信息', '每日上报', '异常处理']
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
created () {
|
created () {
|
||||||
|
console.log(this.params)
|
||||||
if (this.params && this.params.id) {
|
if (this.params && this.params.id) {
|
||||||
this.id = this.params.id
|
this.id = this.params.id
|
||||||
|
console.log(this.id)
|
||||||
this.dict.load(['epidemicRecentHealth', 'epidemicRecentTravel', 'epidemicTouchInFourteen', 'epidemicMemberType', 'epidemicRecentTestResult']).then(() => {
|
this.dict.load(['epidemicRecentHealth', 'epidemicRecentTravel', 'epidemicTouchInFourteen', 'epidemicMemberType', 'epidemicRecentTestResult']).then(() => {
|
||||||
this.getInfo(this.params.id)
|
|
||||||
this.getList()
|
this.getList()
|
||||||
this.getRecordList()
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
getInfo (id) {
|
|
||||||
this.instance.post(`/app/appepidemicreportmember/queryDetailById?memberId=${id}`).then(res => {
|
|
||||||
if (res.code === 0) {
|
|
||||||
this.info = res.data
|
|
||||||
this.currIndex = 0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
getRecordList () {
|
|
||||||
this.instance.post(`/app/appepidemicunusuallog/list`, null, {
|
|
||||||
params: {
|
|
||||||
...this.search,
|
|
||||||
recordId: this.params.id
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
if (res.code == 0) {
|
|
||||||
this.recordList = res.data.records
|
|
||||||
this.recordTotal = res.data.total
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
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.isShowAdd = false
|
|
||||||
this.getRecordList(this.params.id)
|
|
||||||
this.$message.success('添加成功!')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
release () {
|
|
||||||
this.$confirm('确定解除异常？').then(() => {
|
|
||||||
this.instance.post(`/app/appepidemicreportmember/release`, {
|
|
||||||
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.getRecordList(this.params.id)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
toDetail (id) {
|
toDetail (id) {
|
||||||
this.instance.post(`/app/appepidemichealthreport/queryDetailById?id=${id}`).then(res => {
|
this.instance.post(`/app/appepidemichealthreport/queryDetailById?id=${id}`).then(res => {
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
|
|||||||
@@ -57,7 +57,7 @@
|
|||||||
name: ''
|
name: ''
|
||||||
},
|
},
|
||||||
colConfigs: [
|
colConfigs: [
|
||||||
{ prop: 'name', label: '员工姓名' },
|
{ prop: 'name', label: '员工姓名', openType: 'userName' },
|
||||||
{ prop: 'girdNames', align: 'center', label: '网格' },
|
{ prop: 'girdNames', align: 'center', label: '网格' },
|
||||||
{ prop: 'clockCount', align: 'center', label: '打卡次数' },
|
{ prop: 'clockCount', align: 'center', label: '打卡次数' },
|
||||||
{ prop: 'lastReportTime', align: 'center', label: '最近打卡时间' },
|
{ prop: 'lastReportTime', align: 'center', label: '最近打卡时间' },
|
||||||
|
|||||||
Reference in New Issue
Block a user