网格管理调整完毕
This commit is contained in:
aixianling
497
project/sass/apps/grid/AppGridMember/components/Family.vue
Normal file
497
project/sass/apps/grid/AppGridMember/components/Family.vue
Normal file
@@ -0,0 +1,497 @@
|
||||
<template>
|
||||
<ai-list class="Family">
|
||||
<template slot="title">
|
||||
<ai-title title="责任家庭" isShowBack isShowBottomBorder @onBackClick="onBack"></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar class="search-bar">
|
||||
<template #left>
|
||||
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="isShow = true">添加</el-button>
|
||||
<el-button size="small" :disabled="!ids.length" icon="iconfont iconDelete" @click="removeAll">批量删除</el-button>
|
||||
<el-select size="small" style="width: 200px;" v-model="search.girdId" placeholder="所属网格" clearable @change="getListInit()">
|
||||
<el-option
|
||||
v-for="(item,i) in girdList"
|
||||
:key="i"
|
||||
:label="item.girdName"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input
|
||||
v-model="search.name"
|
||||
class="search-input"
|
||||
size="small"
|
||||
v-throttle="() => {search.current = 1, getList()}"
|
||||
placeholder="姓名/身份证/联系方式"
|
||||
clearable
|
||||
@clear="search.current = 1, search.name = '', getList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
style="margin-top: 6px;"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@handleSelectionChange="handleSelectionChange"
|
||||
@getList="getList">
|
||||
<el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="remove(row.gmrId)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
<ai-dialog
|
||||
:visible.sync="isShow"
|
||||
width="890px"
|
||||
@close="closeDialog"
|
||||
title="添加户主"
|
||||
@onConfirm="onConfirm">
|
||||
<ai-area-select clearable always-show :instance="instance" v-model="areaId" @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.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,
|
||||
searchAreaId: 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>
|
||||
551
project/sass/apps/grid/AppGridMember/components/add.vue
Normal file
551
project/sass/apps/grid/AppGridMember/components/add.vue
Normal file
@@ -0,0 +1,551 @@
|
||||
<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="wxUserId" >
|
||||
<div class="flex-box">
|
||||
<ai-open-data :style="{marginRight: forms.wxUserId ? '20px' : 0}" type="userName" :openid="forms.wxUserId" />
|
||||
<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>
|
||||
</AiUserGet>
|
||||
</div>
|
||||
</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><ai-open-data type="userName" :openid="forms.wxUserId" /></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 {
|
||||
wxUserId: [
|
||||
{ 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) {
|
||||
if (val.length) {
|
||||
this.forms.name = val[0].wxOpenUserId;
|
||||
this.forms.userId = val[0].id
|
||||
this.forms.wxUserId = val[0].wxOpenUserId
|
||||
|
||||
this.$refs.rules.validateField('wxUserId')
|
||||
}
|
||||
},
|
||||
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%;
|
||||
|
||||
|
||||
.flex-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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>
|
||||
216
project/sass/apps/grid/AppGridMember/components/list.vue
Normal file
216
project/sass/apps/grid/AppGridMember/components/list.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<ai-list class="list">
|
||||
<template slot="title">
|
||||
<ai-title title="网格员管理" :isShowBottomBorder="true"></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar bottomBorder>
|
||||
<template slot="left">
|
||||
<el-date-picker
|
||||
v-model="searchObj.selectionDate"
|
||||
type="date"
|
||||
@change="(page.current = 1), getList()"
|
||||
value-format="yyyy-MM-dd"
|
||||
size="small"
|
||||
placeholder="选用时间">
|
||||
</el-date-picker>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input
|
||||
v-model="searchObj.name"
|
||||
size="small"
|
||||
placeholder="责任网格"
|
||||
@keyup.enter.native="(page.current = 1), getList()"
|
||||
clearable
|
||||
@clear="(searchObj.name = '', page.current = 1), getList()"
|
||||
suffix-icon="iconfont iconSearch"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-search-bar style="padding: 16px 0 0">
|
||||
<template slot="left">
|
||||
<el-button
|
||||
icon="iconfont iconAdd"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="add('')"
|
||||
>添加
|
||||
</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="iconfont iconDelete"
|
||||
@click="deleteById(ids.join(','))"
|
||||
:disabled="!Boolean(ids.length)"
|
||||
>删除
|
||||
</el-button
|
||||
>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="page.total"
|
||||
ref="aitableex"
|
||||
:current.sync="page.current"
|
||||
:size.sync="page.size"
|
||||
@selection-change="(v) => (ids = v.map((e) => e.id))"
|
||||
@getList="getList()">
|
||||
<el-table-column label="操作" slot="options" align="center" fixed="right" width="200">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="setTag(row)">标签</el-button>
|
||||
<el-button type="text" @click="toFamily(row.id)">责任家庭</el-button>
|
||||
<el-button type="text" @click="add(row.id)">查看</el-button>
|
||||
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
<ai-dialog title="设置标签" :visible.sync="dialog" @closed="form={}" @onConfirm="submit"
|
||||
width="400px">
|
||||
<el-form :model="form" size="small" ref="DialogForm" :rules="rules" label-width="0">
|
||||
<el-form-item prop="label">
|
||||
<el-input v-model="form.label" maxlength="10" show-word-limit clearable placeholder="请输入标签信息,最多10个字"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "list",
|
||||
label: "网格员管理",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchObj: {
|
||||
name: "",
|
||||
selectionDate: "",
|
||||
},
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
},
|
||||
goAdd: false,
|
||||
tableData: [],
|
||||
fileList: [],
|
||||
ids: [],
|
||||
detail: {},
|
||||
dialog: false,
|
||||
form: {},
|
||||
rules: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.dict.load("sex", "girdMemberType", "politicsStatus", "education");
|
||||
this.getList();
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
return [
|
||||
{type: "selection"},
|
||||
{prop: "wxUserId", label: "网格员姓名", openType: 'userName'},
|
||||
{prop: "girdInfoListStr", align: "center", label: "责任网格"},
|
||||
{prop: "phone", align: "center", label: "联系电话"},
|
||||
{prop: "label", align: "center", label: "标签信息"},
|
||||
{prop: "selectionDate", align: "center", label: "选用时间"},
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance
|
||||
.post("/app/appgirdmemberinfo/list", null, {
|
||||
params: {
|
||||
...this.searchObj,
|
||||
...this.page,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records;
|
||||
this.page.total = res.data.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteById(ids) {
|
||||
ids &&
|
||||
this.$confirm("是否要删除该网格员？", {
|
||||
type: "error",
|
||||
})
|
||||
.then(() => {
|
||||
this.instance
|
||||
.post("/app/appgirdmemberinfo/delete", null, {
|
||||
params: {ids},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
},
|
||||
add(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Add',
|
||||
params: {
|
||||
id: id || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
toFamily(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Family',
|
||||
params: {
|
||||
id
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.ids = [];
|
||||
val.map((e) => {
|
||||
this.ids.push(e.id);
|
||||
});
|
||||
},
|
||||
resetSearch() {
|
||||
Object.keys(this.searchObj).map((e) => {
|
||||
this.searchObj[e] = "";
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
setTag(row) {
|
||||
this.form = this.$copy(row)
|
||||
this.dialog = true
|
||||
},
|
||||
submit() {
|
||||
this.$refs.DialogForm.validate(v => {
|
||||
if (v) {
|
||||
let loading = this.$loading({text: "提交中...", background: 'rgba(0,0,0,.8)'})
|
||||
let {id, label} = this.form
|
||||
this.instance.post("/app/appgirdmemberinfo/updateGirdMemberLabelById", null, {
|
||||
params: {id, label}
|
||||
}).then(res => {
|
||||
loading.close()
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("提交成功!")
|
||||
this.dialog = false
|
||||
this.getList()
|
||||
}
|
||||
}).catch(() => loading.close())
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user