wxz
2 years ago
17 changed files with 593 additions and 103 deletions
@ -0,0 +1,113 @@ |
|||||
|
<template> |
||||
|
<div class="dialog-h-content scroll-h g-main"> |
||||
|
<div v-for="(item,index) in ruleList" |
||||
|
:key="index"> |
||||
|
<div class="div_name">{{'政策细则'+(index+1)}}：{{item.ruleName}}</div> |
||||
|
<person-list-item :ruleId="item.id"> </person-list-item> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
|
||||
|
|
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { Loading } from 'element-ui' // 引入Loading服务 |
||||
|
import personListItem from './personListItem' |
||||
|
|
||||
|
let loading // 加载动画 |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
loading: false, |
||||
|
total: 0, |
||||
|
pageSize: 20, |
||||
|
pageNo: 1, |
||||
|
tableLoading: false, |
||||
|
|
||||
|
agencyId: '', |
||||
|
initLoading: false, |
||||
|
|
||||
|
tableArray: [ |
||||
|
|
||||
|
], |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
personListItem |
||||
|
}, |
||||
|
async created () { |
||||
|
|
||||
|
}, |
||||
|
activated () { |
||||
|
// this.$refs['ref_table'].doLayout() |
||||
|
}, |
||||
|
async mounted () { |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
// 开启加载动画 |
||||
|
startLoading () { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: '正在加载……', // 加载中需要显示的文字 |
||||
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
||||
|
}) |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading () { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
}, |
||||
|
watch: { |
||||
|
|
||||
|
}, |
||||
|
props: { |
||||
|
policyId: { |
||||
|
type: String, |
||||
|
required: '' |
||||
|
}, |
||||
|
ruleList: { |
||||
|
type: Array, |
||||
|
required: true, |
||||
|
default () { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped > |
||||
|
@import "@/assets/scss/modules/management/list-main.scss"; |
||||
|
|
||||
|
.div_name { |
||||
|
padding: 5px 20px; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
|
||||
|
|
||||
@ -1,113 +1,476 @@ |
|||||
<template> |
<template> |
||||
<div class="dialog-h-content scroll-h g-main"> |
<div> |
||||
<div v-for="(item,index) in ruleList" |
<div class="dialog-h-content scroll-h"> |
||||
:key="index"> |
<el-form |
||||
<div class="div_name">{{'政策细则'+(index+1)}}：{{item.ruleName}}</div> |
:inline="true" |
||||
<person-list-item :ruleId="item.id"> </person-list-item> |
:model="searchFormData" |
||||
|
ref="ref_searchform" |
||||
|
:label-width="'110px'"> |
||||
|
|
||||
|
<el-form-item label="所属组织" prop="orgId"> |
||||
|
<el-cascader |
||||
|
@change="handleOrgChange" |
||||
|
:options="orgTree" |
||||
|
:props="orgOptionProps" |
||||
|
clearable |
||||
|
placeholder="请选择组织"></el-cascader> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="人员姓名" prop="title"> |
||||
|
<el-input |
||||
|
v-model="searchFormData.name" |
||||
|
class="u-item-width-normal" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="手机号" prop="title"> |
||||
|
<el-input |
||||
|
v-model="searchFormData.mobile" |
||||
|
class="u-item-width-normal" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="身份证号" prop="title"> |
||||
|
<el-input |
||||
|
v-model="searchFormData.idCard" |
||||
|
class="u-item-width-normal" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="享受服务次数" prop="title"> |
||||
|
<el-input |
||||
|
v-model="searchFormData.serveTimes" |
||||
|
class="u-item-width-normal" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="家庭住址" prop="title"> |
||||
|
<el-select v-model="searchFormData.villageId" placeholder="请选择小区" |
||||
|
@change="handleQuarterSelectorsChange" clearable> |
||||
|
<el-option |
||||
|
v-for="item in quartersSelectItems" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="searchFormData.buildId" placeholder="请选择楼栋" |
||||
|
@change="handleBuildSelectorsChange" clearable> |
||||
|
<el-option |
||||
|
v-for="item in buildingSelectItems" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="searchFormData.unitId" placeholder="请选择单元" |
||||
|
@change="handleUnitSelectorsChange" clearable> |
||||
|
<el-option |
||||
|
v-for="item in unitSelectItems" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="searchFormData.homeId" placeholder="请选择房屋" |
||||
|
@change="handleUnitSelectorsChange" clearable> |
||||
|
<el-option |
||||
|
v-for="item in homeSelectItems" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<div class="div_btn"> |
||||
|
<el-button type="primary" size="small" class="diy-button--blue" @click="handleIncrementServeTimes">标记享受服务人员</el-button> |
||||
|
<el-button type="primary" size="small" class="diy-button--blue" @click="handleSearch">查询</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="m-table"> |
||||
|
<!--表格--> |
||||
|
<el-table |
||||
|
:data="personList" |
||||
|
height="250" |
||||
|
border |
||||
|
@select-all="handleSelectAll" |
||||
|
@selection-change="handleTableRowsSelected" |
||||
|
style="width: 100%"> |
||||
|
|
||||
|
<el-table-column |
||||
|
type="selection" |
||||
|
width="55"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="agencyName" |
||||
|
label="所属组织" |
||||
|
width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="gridName" |
||||
|
label="所属网格" |
||||
|
width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="姓名"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="genderDisplay" |
||||
|
label="性别"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="birthday" |
||||
|
width="170" |
||||
|
label="出生日期"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="age" |
||||
|
label="年龄"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="mobile" |
||||
|
width="120" |
||||
|
label="手机号"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="idCard" |
||||
|
width="180" |
||||
|
label="身份证号"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="address" |
||||
|
width="250" |
||||
|
label="家庭住址"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="serveTimes" |
||||
|
label="享受服务次数"> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
</div> |
</div> |
||||
|
|
||||
|
<!--分页条--> |
||||
|
<el-pagination |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page.sync="searchFormData.pageNo" |
||||
|
:page-sizes="pageSizes" |
||||
|
:page-size="searchFormData.pageSize" |
||||
|
layout="sizes, prev, pager, next, total" |
||||
|
background |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
|
||||
|
import { requestPost } from '@/js/dai/request' |
||||
|
import { requestGet } from '@/js/dai/request' |
||||
|
import nextTick from 'dai-js/tools/nextTick' |
||||
|
|
||||
|
|
||||
import { requestPost } from "@/js/dai/request"; |
|
||||
import { mapGetters } from 'vuex' |
|
||||
import { Loading } from 'element-ui' // 引入Loading服务 |
|
||||
import personListItem from './personListItem' |
|
||||
|
|
||||
let loading // 加载动画 |
|
||||
export default { |
export default { |
||||
|
mounted () { |
||||
|
this.initOrgTree() |
||||
|
this.handleSearch() |
||||
|
}, |
||||
data () { |
data () { |
||||
return { |
return { |
||||
loading: false, |
// 搜索表单 |
||||
total: 0, |
searchFormData: { |
||||
pageSize: 20, |
orgId: null, |
||||
pageNo: 1, |
orgType: null, |
||||
tableLoading: false, |
tagId: null, |
||||
|
name: null, |
||||
agencyId: '', |
mobile: null, |
||||
initLoading: false, |
idCard: null, |
||||
|
serveTimes: null, |
||||
tableArray: [ |
villageId: null, |
||||
|
buildId: null, |
||||
], |
unitId: null, |
||||
|
homeId: null, |
||||
|
pageSize: 10, |
||||
|
pageNo: 1, |
||||
|
}, |
||||
|
|
||||
|
// 分页参数 |
||||
|
pageSizes: [10, 20, 50, 100, 200], |
||||
|
total: 0, // 总页数 |
||||
|
|
||||
|
// 小区下拉框选项 |
||||
|
quartersSelectItems: [], |
||||
|
buildingSelectItems: [], |
||||
|
unitSelectItems: [], |
||||
|
homeSelectItems: [], |
||||
|
orgTree: [], // 组织树 |
||||
|
// 组织树选项 |
||||
|
orgOptionProps: { |
||||
|
multiple: false, |
||||
|
value: 'agencyId', |
||||
|
label: 'agencyName', |
||||
|
children: 'subAgencyList', |
||||
|
checkStrictly: true |
||||
|
}, |
||||
|
|
||||
|
//表格数据 |
||||
|
selectedPersonListIds: [], // 选中的名单id列表 |
||||
|
personList: [], // 找到的人员名单 |
||||
} |
} |
||||
}, |
}, |
||||
components: { |
methods: { |
||||
personListItem |
|
||||
}, |
|
||||
async created () { |
|
||||
|
|
||||
}, |
/** |
||||
activated () { |
* 行选中事件 |
||||
// this.$refs['ref_table'].doLayout() |
* @returns {Promise<void>} |
||||
}, |
*/ |
||||
async mounted () { |
async handleTableRowsSelected(selection) { |
||||
|
this.selectedPersonListIds = selection.map(e => e.id); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 全选 |
||||
|
* @param selection |
||||
|
* @returns {Promise<void>} |
||||
|
*/ |
||||
|
async handleSelectAll(selection) { |
||||
|
this.selectedPersonListIds = selection.map(e => e.id); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 搜索事件 |
||||
|
* @returns {Promise<void>} |
||||
|
*/ |
||||
|
async handleSearch () { |
||||
|
let url = '/actual/base/residentBaseInfo/policyFindPersonList/list' |
||||
|
this.searchFormData.tagId = this.tagId |
||||
|
const { data, code, msg } = await requestPost(url, this.searchFormData) |
||||
|
if (code === 0) { |
||||
|
this.personList = data.list |
||||
|
this.total = data.total |
||||
|
} |
||||
|
}, |
||||
|
|
||||
}, |
/** |
||||
|
* 标记享受服务人员 |
||||
|
* @returns {Promise<void>} |
||||
|
*/ |
||||
|
async handleIncrementServeTimes() { |
||||
|
let params = { |
||||
|
recIds: this.selectedPersonListIds |
||||
|
}; |
||||
|
|
||||
|
let url = "/actual/base/residentBaseInfo/policyFindPersonList/incrementServeTimes"; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message.success('操作成功'); |
||||
|
} else { |
||||
|
this.$message.error('操作失败'); |
||||
|
} |
||||
|
|
||||
|
// 重新加载列表 |
||||
|
this.handleSearch(); |
||||
|
}, |
||||
|
|
||||
methods: { |
/** |
||||
|
* 组织选择触发事件 |
||||
|
* @returns {Promise<void>} |
||||
|
*/ |
||||
|
async initOrgTree () { |
||||
|
let url = '/gov/org/customeragency/agencygridtree' |
||||
|
const { data, code, msg } = await requestPost(url, {}) |
||||
|
if (code === 0) { |
||||
|
debugger |
||||
|
this.orgTree.push(data) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 加载和填充小区下拉框 |
||||
|
* @returns {Promise<void>} |
||||
|
*/ |
||||
|
async handleOrgChange (selectedOrgNodes) { |
||||
|
let selectedLastNode = selectedOrgNodes[selectedOrgNodes.length - 1] |
||||
|
this.searchFormData.orgId = selectedLastNode |
||||
|
const { orgId, level } = this.getSelectedOrgIdAndType(selectedLastNode, this.orgTree) |
||||
|
let url = '/actual/base/communityQuarters/listQuartersOptions' |
||||
|
let params = {} |
||||
|
this.searchFormData.orgId = orgId |
||||
|
if (level === 'grid') { |
||||
|
params['gridId'] = orgId |
||||
|
this.searchFormData.orgType = 'grid' |
||||
|
} else { |
||||
|
params['agencyId'] = orgId |
||||
|
this.searchFormData.orgType = 'agency' |
||||
|
} |
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
if (code === 0) { |
||||
|
this.quartersSelectItems = data.map(e => { |
||||
|
return { |
||||
|
label: e.label, |
||||
|
value: e.value |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 小区选择器change，填充楼栋下拉框 |
||||
|
* @returns {Promise<void>} |
||||
|
*/ |
||||
|
async handleQuarterSelectorsChange (quartersId) { |
||||
|
let url = '/actual/base/communityBuilding/buildingoption' |
||||
|
let params = { |
||||
|
quartersId: quartersId, |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
if (code === 0) { |
||||
|
this.buildingSelectItems = data.map(e => { |
||||
|
return { |
||||
|
label: e.label, |
||||
|
value: e.value |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 楼栋选择器change，填充单元下拉框 |
||||
|
* @param selectedQuarter |
||||
|
* @returns {Promise<void>} |
||||
|
*/ |
||||
|
async handleBuildSelectorsChange (buildId) { |
||||
|
let url = '/actual/base/communityBuildingUnit/unitoption' |
||||
|
let params = { |
||||
|
buildingId: buildId, |
||||
|
} |
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
if (code === 0) { |
||||
|
this.unitSelectItems = data.map(e => { |
||||
|
return { |
||||
|
label: e.label, |
||||
|
value: e.value |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 单元下拉框选择器change，填充房屋 |
||||
|
* @param unitId |
||||
|
* @returns {Promise<void>} |
||||
|
*/ |
||||
|
async handleUnitSelectorsChange (unitId) { |
||||
|
let url = '/actual/base/communityHouse/houseoption' |
||||
|
let params = { |
||||
|
unitId: unitId, |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
if (code === 0) { |
||||
|
this.homeSelectItems = data.map(e => { |
||||
|
return { |
||||
|
label: e.label, |
||||
|
value: e.value, |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 递归搜索组织树，选出选中的节点 |
||||
|
* @param orgId |
||||
|
* @param orgList |
||||
|
* @returns {*} |
||||
|
*/ |
||||
|
getSelectedOrgIdAndType (orgId, orgList) { |
||||
|
for (let org of orgList) { |
||||
|
if (org.agencyId === orgId) { |
||||
|
return { orgId: org.agencyId, level: org.level } |
||||
|
} |
||||
|
|
||||
// 开启加载动画 |
if (org.subAgencyList && org.subAgencyList.length > 0) { |
||||
startLoading () { |
let selectedOrg = this.getSelectedOrgIdAndType(orgId, org.subAgencyList) |
||||
loading = Loading.service({ |
if (selectedOrg) { |
||||
lock: true, // 是否锁定 |
return selectedOrg |
||||
text: '正在加载……', // 加载中需要显示的文字 |
} |
||||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
} |
||||
}) |
|
||||
}, |
|
||||
// 结束加载动画 |
|
||||
endLoading () { |
|
||||
// clearTimeout(timer); |
|
||||
if (loading) { |
|
||||
loading.close() |
|
||||
} |
} |
||||
} |
}, |
||||
}, |
|
||||
computed: { |
|
||||
|
|
||||
}, |
// 条数改变 |
||||
watch: { |
handleSizeChange (newPageSize) { |
||||
|
this.searchFormData.pageSize = newPageSize |
||||
|
this.handleSearch() |
||||
|
}, |
||||
|
|
||||
|
// 翻页 |
||||
|
handleCurrentChange (pageNo) { |
||||
|
this.searchFormData.pageNo = pageNo |
||||
|
this.handleSearch() |
||||
|
} |
||||
}, |
}, |
||||
props: { |
props: { |
||||
policyId: { |
policyId: { |
||||
type: String, |
type: String, |
||||
required: '' |
|
||||
}, |
|
||||
ruleList: { |
|
||||
type: Array, |
|
||||
required: true, |
required: true, |
||||
default () { |
|
||||
return [] |
|
||||
} |
|
||||
}, |
}, |
||||
|
tagId: { |
||||
|
type: String, |
||||
|
required: true, |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped > |
|
||||
@import "@/assets/scss/modules/management/list-main.scss"; |
|
||||
|
|
||||
.div_name { |
<style lang="scss" scoped> |
||||
padding: 5px 20px; |
@import "@/assets/scss/modules/management/form-main.scss"; |
||||
font-size: 16px; |
|
||||
|
.btn-add-rule { |
||||
|
margin-left: 150px; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
margin-bottom: 20px; |
||||
} |
} |
||||
</style> |
|
||||
|
|
||||
|
.item_width_short { |
||||
|
width: 380px; |
||||
|
} |
||||
|
|
||||
|
.item_rule { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
.item_label { |
||||
|
flex: 0 0 150px; |
||||
|
line-height: 30px; |
||||
|
text-align: right; |
||||
|
padding-right: 12px; |
||||
|
} |
||||
|
|
||||
|
.item_label:before { |
||||
|
content: "*"; |
||||
|
color: #f56c6c; |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
</style> |
||||
|
|||||
Loading…
Reference in new issue