wangxianzhang
3 years ago
11 changed files with 1498 additions and 329 deletions
@ -0,0 +1,472 @@ |
|||
<template> |
|||
<div class="div_main"> |
|||
<div ref="searchCard" |
|||
class="div_search"> |
|||
<el-form ref="searchForm" |
|||
:inline="true" |
|||
:model="formData" |
|||
size="small"> |
|||
|
|||
<el-form-item label="统计类型" |
|||
prop="name" |
|||
label-width="90px"> |
|||
<el-radio-group v-model="formData.type"> |
|||
<el-radio label="0">本级工作人员</el-radio> |
|||
<el-radio label="1">本级及下级工作人员</el-radio> |
|||
|
|||
</el-radio-group> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item label="组织" |
|||
prop="name" |
|||
label-width="90px"> |
|||
<el-cascader ref="myCascader" |
|||
v-model="agencyIdArray" |
|||
style="width:540px" |
|||
:key="iscascaderShow" |
|||
:options="casOptions" |
|||
:props="optionProps" |
|||
@change="handleChange" |
|||
clearable></el-cascader> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item label="姓名" |
|||
prop="name" |
|||
label-width="90px"> |
|||
<el-input v-model="formData.name" |
|||
style="width:290px" |
|||
placeholder="请输入姓名" |
|||
:clearable="true"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="手机号" |
|||
prop="mobile" |
|||
label-width="90px"> |
|||
<el-input v-model="formData.mobile" |
|||
style="width:290px" |
|||
placeholder="请输入手机号" |
|||
:clearable="true"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="状态" |
|||
prop="status" |
|||
label-width="90px"> |
|||
<el-select v-model="formData.status" |
|||
style="width:290px" |
|||
placeholder="选择状态" |
|||
clearable> |
|||
<el-option v-for="item in statusList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-button type="primary" |
|||
size="small" |
|||
class="diy-button--search" |
|||
@click="handleSearch">查询</el-button> |
|||
<el-button class="diy-button--reset" |
|||
size="small" |
|||
@click="handleReset">重置</el-button> |
|||
|
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="div_table"> |
|||
<el-table :data="tableData" |
|||
ref="ref_customertable" |
|||
border |
|||
:height="tableHeight" |
|||
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
|||
style="width: 100%;"> |
|||
<el-table-column label="所属组织" |
|||
header-align="center" |
|||
align="center" |
|||
prop="orgName"></el-table-column> |
|||
<el-table-column label="姓名" |
|||
header-align="center" |
|||
align="center" |
|||
width="120" |
|||
prop="userName"></el-table-column> |
|||
<el-table-column label="手机号" |
|||
header-align="center" |
|||
align="center" |
|||
width="120" |
|||
prop="telephoneNumber"></el-table-column> |
|||
<el-table-column label="性别" |
|||
header-align="center" |
|||
align="center" |
|||
width="80" |
|||
prop="gender"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.gender==='0'">{{'未知'}}</span> |
|||
<span v-if="scope.row.gender==='1'">{{'男'}}</span> |
|||
<span v-if="scope.row.gender==='2'">{{'女'}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="状态" |
|||
header-align="center" |
|||
align="center" |
|||
width="80" |
|||
prop="status"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.status==='0'">{{'未创建'}}</span> |
|||
<span v-if="scope.row.status==='1'">{{'已创建'}}</span> |
|||
|
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="备注" |
|||
header-align="center" |
|||
align="center" |
|||
prop="remark"></el-table-column> |
|||
|
|||
<el-table-column :label="$t('handle')" |
|||
fixed="right" |
|||
header-align="center" |
|||
align="center" |
|||
width="200"> |
|||
<template slot-scope="scope"> |
|||
<el-button v-if="scope.row.status === '0'" |
|||
type="text" |
|||
size="small" |
|||
@click="handleEdit(scope.row,'add')">新增</el-button> |
|||
<el-button v-if="scope.row.status === '1'" |
|||
type="text" |
|||
size="small" |
|||
@click="handleEdit(scope.row,'edit')">修改</el-button> |
|||
<el-button v-if="scope.row.status === '1'" |
|||
type="text" |
|||
size="small" |
|||
@click="handleDetail(scope.row)">查看</el-button> |
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination :current-page="pageNo" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="pageSizeChangeHandle" |
|||
@current-change="pageCurrentChangeHandle"></el-pagination> |
|||
</div> |
|||
|
|||
<el-dialog v-if="showEdit" |
|||
:title="editTitle" |
|||
:visible.sync="showEdit" |
|||
width="850" |
|||
:before-close="dialogCancle"> |
|||
<edit-form ref="ref_edit" |
|||
@dialogOk="dialogOk" |
|||
@dialogCancle="dialogCancle"></edit-form> |
|||
</el-dialog> |
|||
<el-dialog v-if="showDetail" |
|||
title="详情" |
|||
:visible.sync="showDetail" |
|||
width="850" |
|||
:before-close="dialogCancle"> |
|||
<detail-form ref="ref_detail" |
|||
@dialogCancle="dialogCancle"></detail-form> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from "vuex"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import editForm from './editForm' |
|||
import detailForm from './detailForm' |
|||
export default { |
|||
data () { |
|||
return { |
|||
tableData: [], |
|||
statusList: [ |
|||
{ |
|||
value: '0', |
|||
label: '未创建' |
|||
}, |
|||
{ |
|||
value: '1', |
|||
label: '已创建' |
|||
} |
|||
], |
|||
selOrgId: '', |
|||
casOptions: [], |
|||
agencyIdArray: [], |
|||
iscascaderShow: 0, |
|||
optionProps: { |
|||
multiple: false, |
|||
// value: 'orgId', |
|||
// label: 'orgName', |
|||
// children: 'subAgencyList', |
|||
checkStrictly: true, |
|||
|
|||
lazy: true, |
|||
lazyLoad: this.lzayLoadAgency |
|||
}, |
|||
|
|||
pageNo: 1, |
|||
pageSize: 20, |
|||
total: 0, |
|||
formData: { |
|||
name: '', |
|||
status: '', |
|||
mobile: '', |
|||
type: '0', |
|||
orgId: '' |
|||
}, |
|||
|
|||
showEdit: false, |
|||
showDetail: false, |
|||
editTitle: '新增' |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
editForm, detailForm |
|||
}, |
|||
async created () { |
|||
await this.loadTable() |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
computed: { |
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
tableHeight () { |
|||
const h = this.clientHeight - 360 + this.iframeHeigh; |
|||
const _h = this.clientHeight - 360; |
|||
return this.$store.state.inIframe ? h : _h; |
|||
}, |
|||
}, |
|||
methods: { |
|||
|
|||
lzayLoadAgency (node, resolve) { |
|||
this.getAgency(node, resolve) |
|||
// setTimeout(() => { |
|||
// this.getAgency(node, resolve) |
|||
// }, 200) |
|||
}, |
|||
async getAgency (node, resolve) { |
|||
|
|||
const url = '/third/dataSync/ytorglist' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/102/third/dataSync/ytorglist' |
|||
|
|||
let params = { |
|||
orgId: node.data ? node.data.value : '0', |
|||
|
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
const nodes = data.map(item => ({ |
|||
value: item.orgId, // |
|||
label: item.orgName, |
|||
// leaf: node.level >= 2 // 5层级 |
|||
leaf: !item.haveChild // 5层级 |
|||
})) |
|||
resolve(nodes) |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleChange (value) { |
|||
|
|||
if (value && value.length > 0) { |
|||
let selAgency = this.$refs["myCascader"].getCheckedNodes()[0].data |
|||
console.log(selAgency) |
|||
this.formData.orgId = selAgency.value |
|||
} else { |
|||
this.formData.orgId = '' |
|||
} |
|||
}, |
|||
|
|||
async loadTable () { |
|||
|
|||
const url = "/third/dataSync/page-user" |
|||
// const url = "http://yapi.elinkservice.cn/mock/102/third/dataSync/page-user" |
|||
const params = { |
|||
|
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
...this.formData |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.tableData = data.list |
|||
this.total = data.total |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
handleSearch () { |
|||
this.loadTable() |
|||
}, |
|||
async handleEdit (row, editType) { |
|||
this.editTitle = editType === 'edit' ? '修改' : '新增' |
|||
this.showEdit = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_edit.initForm(editType, row); |
|||
}); |
|||
}, |
|||
dialogCancle () { |
|||
this.showEdit = false |
|||
this.showDetail = false |
|||
}, |
|||
dialogOk () { |
|||
|
|||
this.showEdit = false |
|||
this.loadTable() |
|||
}, |
|||
|
|||
// 功能配置 |
|||
handleDetail (row) { |
|||
this.showDetail = true |
|||
this.$nextTick(() => { |
|||
|
|||
this.$refs.ref_detail.initForm(row.staffId, row.customerId); |
|||
}); |
|||
|
|||
}, |
|||
|
|||
handleReset () { |
|||
this.agencyIdArray = [] |
|||
this.formData = { |
|||
name: '', |
|||
status: '', |
|||
mobile: '', |
|||
type: '0', |
|||
orgId: '' |
|||
} |
|||
|
|||
}, |
|||
|
|||
pageCurrentChangeHandle (val) { |
|||
this.pageNo = val |
|||
this.loadTable() |
|||
}, |
|||
pageSizeChangeHandle (val) { |
|||
this.pageSize = val |
|||
this.loadTable() |
|||
}, |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped > |
|||
.div_main { |
|||
width: 100%; |
|||
} |
|||
|
|||
.div_search { |
|||
background: #ffffff; |
|||
border-radius: 4px; |
|||
padding: 30px 20px 5px; |
|||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.div_table { |
|||
background: #ffffff; |
|||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); |
|||
border-radius: 4px; |
|||
margin-top: 15px; |
|||
padding: 23px 30px 10px; |
|||
|
|||
.table { |
|||
margin-top: 20px; |
|||
} |
|||
} |
|||
</style> |
|||
<style> |
|||
.block { |
|||
position: absolute; |
|||
left: 0px; |
|||
display: inline-block; |
|||
width: 35px; |
|||
height: 50px; |
|||
background: #fff; |
|||
} |
|||
.cascader-block .el-cascader-node > .el-radio { |
|||
display: none; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.blacklist-reason { |
|||
width: 100%; |
|||
height: 80px; |
|||
border: 1px solid #e4e4e4; |
|||
border-radius: 4px; |
|||
resize: none; |
|||
padding: 8px; |
|||
box-sizing: border-box; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/buttonstyle.scss"; |
|||
|
|||
.resi-container .resi-card-table { |
|||
::v-deep .el-table th { |
|||
color: #fff; |
|||
background-color: rgba(33, 149, 254, 1); |
|||
// border-right: 1px solid rgba(33, 149, 254, 1); |
|||
} |
|||
} |
|||
.resi-table { |
|||
::v-deep .el-button--text { |
|||
text-decoration: underline; |
|||
} |
|||
::v-deep .btn-color-del { |
|||
margin-left: 10px; |
|||
color: rgba(213, 16, 16, 1); |
|||
} |
|||
::v-deep .btn-color-edit { |
|||
color: rgba(0, 167, 169, 1); |
|||
} |
|||
} |
|||
.form-wr { |
|||
.input-width { |
|||
width: 260px; |
|||
} |
|||
.input-width-textarea { |
|||
width: 500px; |
|||
} |
|||
.imsg-list { |
|||
display: flex; |
|||
align-items: center; |
|||
.imgs-item { |
|||
position: relative; |
|||
margin-right: 10px; |
|||
.el-icon-delete { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
font-size: 18px; |
|||
color: red; |
|||
z-index: 3; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.div-content { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
.resi-row-btn { |
|||
margin-bottom: 13px; |
|||
.upload-btn { |
|||
display: inline-block; |
|||
margin: 0 10px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,205 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
<div class="dialog-h-content scroll-h"> |
|||
|
|||
<div class="m-row"> |
|||
<div class="m-info"> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">姓名：</span> |
|||
<span>{{ peoForm.name||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">手机号：</span> |
|||
<span>{{ peoForm.mobile||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">性别：</span> |
|||
<span v-if="peoForm.gender==='0'">{{'未知'}}</span> |
|||
<span v-if="peoForm.gender==='1'">{{'男'}}</span> |
|||
<span v-if="peoForm.gender==='2'">{{'女'}}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">专兼职：</span> |
|||
<span v-if="peoForm.workType==='fulltime'">{{'专职'}}</span> |
|||
<span v-if="peoForm.workType==='parttime'">{{'兼职'}}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">组织/部门：</span> |
|||
<span>{{peoForm.orgName||'--'}}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">激活时间：</span> |
|||
<span>{{peoForm.activeTime||'未激活'}}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">是否禁用：</span> |
|||
<span>{{peoForm.disableFlag||'--'}}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">职责：</span> |
|||
<span>{{peoForm.rolesShow||''}}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">角色：</span> |
|||
<span>{{peoForm.szsqRolesShow||''}}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="div-btn"> |
|||
<el-button size="small" |
|||
@click="handleClose">关 闭</el-button> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// import ConfigItem from './ConfigItem' |
|||
// import FootbarList from '../../productConfig/footbar/FootbarList' |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
|
|||
staffId: '', |
|||
customerId: '', |
|||
agencyId: '', |
|||
|
|||
|
|||
|
|||
peoForm: { |
|||
name: "", |
|||
mobile: "", |
|||
gender: "", |
|||
orgId: '', |
|||
orgType: "", |
|||
orgName: "", |
|||
activeTime: "", |
|||
workType: "", |
|||
roles: [], |
|||
newRoles: [], |
|||
}, |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
|
|||
async mounted () { |
|||
|
|||
|
|||
}, |
|||
methods: { |
|||
async initForm (staffId, customerId) { |
|||
this.startLoading() |
|||
|
|||
this.staffId = staffId |
|||
this.customerId = customerId |
|||
|
|||
await this.lookAngency() |
|||
|
|||
this.endLoading() |
|||
|
|||
}, |
|||
|
|||
|
|||
// 查看按钮 |
|||
async lookAngency () { |
|||
const url = "/data/aggregator/org/staffdetailv2"; |
|||
|
|||
let params = { |
|||
staffId: this.staffId, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.peoForm = data; |
|||
|
|||
if (data.enableFlag === "enable") { |
|||
this.peoForm.disableFlag = "已启用"; |
|||
} else { |
|||
this.peoForm.disableFlag = "已禁用"; |
|||
} |
|||
|
|||
if (this.peoForm.roles && this.peoForm.roles.length > 0) { |
|||
this.peoForm.rolesShow = this.peoForm.roles.join('，') |
|||
} else { |
|||
this.peoForm.rolesShow = '--' |
|||
} |
|||
if (this.peoForm.szsqRoles && this.peoForm.szsqRoles.length > 0) { |
|||
this.peoForm.szsqRolesShow = this.peoForm.szsqRoles.join('，') |
|||
} else { |
|||
this.peoForm.szsqRolesShow = '--' |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
|
|||
}, |
|||
|
|||
|
|||
resetForm () { |
|||
this.peoForm = { |
|||
name: "", |
|||
mobile: "", |
|||
gender: "", |
|||
orgId: '', |
|||
orgType: "", |
|||
orgName: "", |
|||
workType: "", |
|||
roles: [], |
|||
newRoles: [], |
|||
} |
|||
}, |
|||
handleClose () { |
|||
this.resetForm() |
|||
this.$emit("dialogCancle") |
|||
}, |
|||
|
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
|
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/detail-main.scss"; |
|||
|
|||
.div-btn { |
|||
margin-top: 20px; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,460 @@ |
|||
<template> |
|||
<div> |
|||
<el-form :model="peoForm" |
|||
label-width="120px" |
|||
ref="editPeoForm" |
|||
:rules="rulesPeo"> |
|||
<el-form-item label="姓名" |
|||
prop="name"> |
|||
<span>{{peoForm.name}}</span> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="手机号" |
|||
prop="mobile"> |
|||
<span>{{peoForm.mobile}}</span> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="性别" |
|||
prop="gender"> |
|||
|
|||
<span v-if="peoForm.gender===0||peoForm.gender==='0'">{{'未知'}}</span> |
|||
<span v-if="peoForm.gender===1||peoForm.gender==='1'">{{'男'}}</span> |
|||
<span v-if="peoForm.gender===2||peoForm.gender==='2'">{{'女'}}</span> |
|||
</el-form-item> |
|||
<el-form-item v-if="formType==='add'" |
|||
label="组织/部门" |
|||
prop="orgId"> |
|||
<el-cascader ref="myCascader" |
|||
v-model="agencyIdArray" |
|||
class="item-width-2" |
|||
:key="iscascaderShow" |
|||
:options="casOptions" |
|||
:props="optionProps" |
|||
@change="handleChangeAgency" |
|||
clearable></el-cascader> |
|||
|
|||
</el-form-item> |
|||
<el-form-item v-if="formType==='edit'" |
|||
label="组织/部门" |
|||
prop="agencyName"> |
|||
|
|||
<span>{{peoForm.agencyName||'--'}}</span> |
|||
</el-form-item> |
|||
<el-form-item label="专兼职" |
|||
prop="workType"> |
|||
<el-select v-model="peoForm.workType" |
|||
clearable |
|||
placeholder="专兼职"> |
|||
<el-option v-for="item in postList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="职责" |
|||
prop="roles"> |
|||
<el-select v-model="peoForm.roles" |
|||
class="item-width-2" |
|||
multiple |
|||
@change="$forceUpdate()" |
|||
placeholder="请选择"> |
|||
<el-option v-for="item in dutyList" |
|||
:key="item.roleId" |
|||
:label="item.roleName" |
|||
:value="item.roleId" |
|||
:disabled="item.disabled"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="角色" |
|||
prop="newRoles"> |
|||
<el-select v-model="peoForm.newRoles" |
|||
class="item-width-2" |
|||
multiple |
|||
@change="$forceUpdate()" |
|||
placeholder="请选择"> |
|||
<el-option v-for="item in roleList" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="div-btn"> |
|||
<el-button size="small" |
|||
@click="handleClose">取 消</el-button> |
|||
<el-button size="small" |
|||
type="primary" |
|||
@click="handleConfirm">确 定</el-button> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// import ConfigItem from './ConfigItem' |
|||
// import FootbarList from '../../productConfig/footbar/FootbarList' |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
formType: 'add', |
|||
staffId: '', |
|||
customerId: '', |
|||
agencyId: '', |
|||
|
|||
agencyIdArray: [], |
|||
casOptions: [], |
|||
iscascaderShow: 0, |
|||
|
|||
optionProps: { |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
checkStrictly: true |
|||
}, |
|||
|
|||
peoForm: { |
|||
name: "", |
|||
mobile: "", |
|||
gender: "", |
|||
orgId: '', |
|||
orgType: "", |
|||
orgName: "", |
|||
workType: "", |
|||
roles: [], |
|||
newRoles: [], |
|||
}, |
|||
// 职责字典 |
|||
dutyList: [], |
|||
// 专兼职字典 |
|||
postList: [ |
|||
{ value: "fulltime", label: "专职" }, |
|||
{ value: "parttime", label: "兼职" }, |
|||
], |
|||
genderList: [ |
|||
{ value: 1, label: "男" }, |
|||
{ value: 2, label: "女" }, |
|||
{ value: 0, label: "未知" }, |
|||
], |
|||
editAgencyIdArray: [], |
|||
roleList: [], |
|||
} |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
|
|||
async mounted () { |
|||
|
|||
|
|||
}, |
|||
methods: { |
|||
async initForm (formType, row) { |
|||
this.startLoading() |
|||
this.formType = formType |
|||
this.customerId = row.customerId |
|||
this.getDutyList() |
|||
this.getRoleList() |
|||
|
|||
if (formType === 'edit') { |
|||
this.staffId = row.staffId |
|||
await this.xiuGridPeo() |
|||
} |
|||
if (formType === 'add') { |
|||
this.peoForm.name = row.userName |
|||
this.peoForm.mobile = row.telephoneNumber |
|||
this.peoForm.gender = row.gender |
|||
} |
|||
|
|||
if (formType === 'add') { |
|||
await this.getAgencyList() |
|||
} |
|||
|
|||
this.endLoading() |
|||
|
|||
}, |
|||
|
|||
handleChangeAgency (value) { |
|||
|
|||
if (value && value.length > 0) { |
|||
let selAgency = this.$refs["myCascader"].getCheckedNodes()[0].data |
|||
this.peoForm.orgName = selAgency.agencyName |
|||
this.peoForm.orgType = selAgency.level === 'grid' || selAgency.level === 'dept' ? selAgency.level : 'agency' |
|||
this.peoForm.orgId = selAgency.agencyId |
|||
} else { |
|||
this.peoForm.orgName = '' |
|||
this.peoForm.orgType = '' |
|||
this.peoForm.orgId = '' |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleConfirm () { |
|||
if (this.formType === 'add') { |
|||
this.submitPeoDo() |
|||
} else if (this.formType === 'edit') { |
|||
this.updatePeoDo() |
|||
} |
|||
}, |
|||
|
|||
// 添加人员 |
|||
async submitPeoDo () { |
|||
|
|||
this.$refs['editPeoForm'].validate((valid, messageObj) => { |
|||
|
|||
if (!valid) { |
|||
app.util.validateRule(messageObj) |
|||
} else { |
|||
|
|||
this.addPeo() |
|||
|
|||
|
|||
|
|||
} |
|||
}) |
|||
}, |
|||
|
|||
async addPeo () { |
|||
if (this.peoForm.roles.length === 0) { |
|||
this.$message.error("请选择职责"); |
|||
return false |
|||
} |
|||
if (this.peoForm.newRoles.length === 0) { |
|||
this.$message.error("请选择角色"); |
|||
return false |
|||
} |
|||
const url = "/gov/org/staff/addstaffv2"; |
|||
// console.log('this.peoForm', this.peoForm) |
|||
// return false |
|||
let params = { |
|||
customerId: this.customerId, |
|||
...this.peoForm |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.$message.success("操作成功"); |
|||
|
|||
this.peoForm = []; |
|||
|
|||
this.dialogOk() |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
// 人员修改 |
|||
async updatePeoDo () { |
|||
this.$refs['editPeoForm'].validate((valid, messageObj) => { |
|||
|
|||
if (!valid) { |
|||
app.util.validateRule(messageObj) |
|||
} else { |
|||
this.editPeo() |
|||
|
|||
} |
|||
}) |
|||
}, |
|||
|
|||
async editPeo () { |
|||
if (this.peoForm.roles.length === 0) { |
|||
this.$message.error("请选择职责"); |
|||
return false |
|||
} |
|||
if (this.peoForm.newRoles.length === 0) { |
|||
this.$message.error("请选择角色"); |
|||
return false |
|||
} |
|||
const url = "/gov/org/staff/editstaff"; |
|||
|
|||
let params = { |
|||
staffId: this.staffId, |
|||
agencyId: this.agencyId, |
|||
customerId: this.customerId, |
|||
...this.peoForm |
|||
}; |
|||
|
|||
// console.log('params', params) |
|||
// return false |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.$message.success("操作成功"); |
|||
|
|||
this.dialogOk() |
|||
|
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
|
|||
// 修改网格人员初始化 |
|||
async xiuGridPeo () { |
|||
|
|||
this.peoForm.orgType = "grid"; |
|||
|
|||
const url = "/gov/org/staff/editstaffinit"; |
|||
let params = { |
|||
staffId: this.staffId, |
|||
customerId: this.customerId, |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.agencyId = data.agencyId |
|||
this.peoForm = { ...data }; |
|||
|
|||
// 已有的权限（职责） |
|||
let existedDutyArr = []; |
|||
data.roleList.forEach(function (sysDuty) { |
|||
if (sysDuty.selected === true) { |
|||
|
|||
existedDutyArr.push(sysDuty.roleId); |
|||
} |
|||
}); |
|||
this.peoForm.roles = existedDutyArr; |
|||
// 已有的权限（角色） |
|||
let existedRoleArr = []; |
|||
data.newRoleList.forEach(function (sysRole) { |
|||
if (sysRole.selected === true) { |
|||
existedRoleArr.push(sysRole.roleId); |
|||
} |
|||
}); |
|||
this.peoForm.newRoles = existedRoleArr; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getAgencyList () { |
|||
const url = '/gov/org/customeragency/agencylist' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist' |
|||
|
|||
const params = { |
|||
customerId: this.customerId |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
++this.iscascaderShow |
|||
this.casOptions = [] |
|||
this.agencyIdArray.length = [] |
|||
|
|||
if (data) { |
|||
this.casOptions.push(data) |
|||
} |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
/** 查询系统工作人员角色（职责） */ |
|||
async getDutyList () { |
|||
const url = "/gov/org/staff/rolelist"; |
|||
let params = { |
|||
customerId: this.customerId, |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.dutyList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
/** 查询系统工作人员角色（职责） */ |
|||
async getRoleList () { |
|||
this.tableLoading = true; |
|||
|
|||
const url = "/gov/access/govrole/list"; |
|||
|
|||
let params = {}; |
|||
|
|||
const { data, code, msg } = await requestGet(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.roleList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
this.tableLoading = false; |
|||
}, |
|||
|
|||
resetForm () { |
|||
this.peoForm = { |
|||
name: "", |
|||
mobile: "", |
|||
gender: "", |
|||
orgId: '', |
|||
orgType: "", |
|||
orgName: "", |
|||
workType: "", |
|||
roles: [], |
|||
newRoles: [], |
|||
} |
|||
}, |
|||
handleClose () { |
|||
this.resetForm() |
|||
this.$emit("dialogCancle") |
|||
}, |
|||
dialogOk () { |
|||
this.resetForm() |
|||
this.$emit("dialogOk") |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
|
|||
}, |
|||
computed: { |
|||
rulesPeo () { |
|||
return { |
|||
// name: [{ required: true, message: "姓名必填", trigger: "change" }], |
|||
// mobile: [{ required: true, message: "手机号必填", trigger: "change" }], |
|||
// gender: [{ required: true, message: "性别必填", trigger: "change" }], |
|||
// gender: [{ required: true, message: "性别必填", trigger: "change" }], |
|||
orgId: [{ required: true, message: "组织/部门必填", trigger: "change" }], |
|||
workType: [{ required: true, message: "专兼职必填", trigger: "change" }], |
|||
roles: [{ required: true, message: "职责必填", trigger: "change" }], |
|||
newRoles: [{ required: true, message: "角色必填", trigger: "change" }], |
|||
} |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.item-width-1 { |
|||
width: 200px; |
|||
} |
|||
.item-width-2 { |
|||
width: 400px; |
|||
} |
|||
.div-btn { |
|||
margin-top: 20px; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue