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