<template>
|
<win-sm :title="setting.title" @close="close" :width="'800px'" :loading="loading">
|
<el-alert
|
style="margin-bottom: 10px"
|
title="温馨提示：用户初始密码为123456"
|
type="warning"
|
:closable="false"
|
show-icon>
|
</el-alert>
|
<el-form ref="ruleForm" :model="formData" :rules="rules" class="demo-ruleForm" label-width="100px">
|
<el-form-item label="当前机构">
|
<el-input v-model="setting.tenantName" disabled style="width: 250px"/>
|
</el-form-item>
|
<el-form-item label="部门" prop="sysDeptId">
|
<el-select v-model="formData.sysDeptId">
|
<el-option v-for="(item,index) in deptmentOptions" :key="index" :label="item.name"
|
:value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="人员姓名" prop="userName">
|
<el-input v-model="formData.userName" clearable maxlength="20" show-word-limit style="width: 250px"/>
|
</el-form-item>
|
<el-form-item label="登录名" prop="userCode">
|
<el-input v-model="formData.userCode" clearable maxlength="20" show-word-limit style="width: 250px"/>
|
</el-form-item>
|
<el-form-item label="手机号" prop="userPhone">
|
<el-input v-model="formData.userPhone" clearable maxlength="20" show-word-limit
|
style="width: 250px"/>
|
</el-form-item>
|
<el-form-item label="性别" prop="sex">
|
<el-radio-group v-model="formData.sex">
|
<el-radio :label="1" border>男</el-radio>
|
<el-radio :label="2" border>女</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-radio-group v-model="formData.status">
|
<el-radio :label="1" border>启用</el-radio>
|
<el-radio :label="0" border>禁用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="顺序号" prop="seq">
|
<el-input-number v-model="formData.seq" clearable :min="1" :max="99" show-word-limit/>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input
|
v-model="formData.remark"
|
type="textarea"
|
:rows="3"
|
maxlength="100"
|
show-word-limit
|
/>
|
</el-form-item>
|
<el-form-item label="角色配置" prop="roleSetting">
|
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
<div style="margin: 15px 0;"></div>
|
<el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">
|
<el-checkbox v-for="(r,i) in roleOptions" :label="r.role_id" :key="r.role_id">{{ r.role_name }}</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" align="center" class="dialog-footer">
|
<my-button name="取消" site="form" @click="close"/>
|
<my-button name="保存" site="form" @click="save"/>
|
</div>
|
</win-sm>
|
</template>
|
|
<script>
|
import winSm from '@/components/win/win-sm'
|
import myButton from '@/components/myButton/myButton'
|
import * as DateFormatter from '@/utils/DateFormatter'
|
import * as role from "@/api/system/role";
|
import * as user from "@/api/user";
|
import {departmentListAll} from "@/api/system/deptment";
|
|
export default {
|
components: {winSm, myButton},
|
props: {
|
// setting 中须至少包含控制dialog显示或隐藏的属性,其余属性可拓展
|
// 将添加/修改的大量数据及逻辑从列表页面中分离出来,避免列表页面代码过多,审查困难
|
// 若此页面须回传数据至父页面,可在引用组件时添加事件,本页面使用this.$emit('事件名',参数1,参数2...)回传数据
|
setting: {
|
type: Object,
|
default: () => {
|
}
|
}
|
},
|
data() {
|
// 参数1: rule 对象, 是校验规则, 一般不用
|
// 参数2: value 校验项的数据
|
// 参数3: callback 回调函数, 决定是否校验通过
|
const checkedListCheck = (rule, value, callback) => {
|
if (this.checkedList.length < 1) {
|
callback(new Error('至少选择一个'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
deptmentOptions: [],
|
loading: true,
|
checkAll: false,
|
checkedList: [],
|
roleList: [
|
{'id': 1, label: '王涵1'},
|
{'id': 2, label: '王涵2'}
|
],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
roleName: undefined,
|
roleKey: undefined,
|
status: undefined,
|
orgId: 1
|
},
|
roleOptions: [],// 选择项
|
roleCheckStrictly: true,
|
defaultProps: {
|
children: 'childList',
|
label: 'name',
|
},
|
formData: {
|
sysDeptId: '',
|
userName: '',
|
userCode: '',
|
userPhone: '',
|
sex: 1,
|
status: 1,
|
remark: '',
|
seq: null,
|
},
|
rules: {
|
sysDeptId: [
|
{required: true, message: '请选择部门', trigger: 'change'}
|
],
|
userName: [
|
{required: true, message: '请输入人员姓名', trigger: 'blur'}
|
],
|
userCode: [
|
{required: true, message: '请输入登录名', trigger: 'blur'}
|
],
|
userPhone: [
|
{required: true, message: '请输入手机号', trigger: 'blur'}
|
],
|
sex: [
|
{required: true, message: '请选择性别', trigger: 'change'}
|
],
|
seq: [
|
{required: true, message: '请输入顺序号', trigger: 'blur'}
|
],
|
// 角色配置的验证
|
roleSetting: [
|
{validator: checkedListCheck, required: true, trigger: 'blur'},
|
],
|
}
|
}
|
},
|
async created() {
|
this.title = this.setting.title
|
if (this.setting.id != null) {
|
await this.getInfo()
|
}
|
|
await this.getAllRole()
|
await this.getDeptmentOptions()
|
this.loading = false
|
},
|
methods: {
|
// 获取所有角色
|
async getAllRole() {
|
this.data_scope = this.$store.getters.userInfo ? this.$store.getters.userInfo.lv : ''
|
await role.listRoleByDataScope({dataScope: this.setting.data_scope}).then(response => {
|
if (response) {
|
this.roleOptions = response;
|
} else {
|
this.roleOptions = [];
|
}
|
this.loading = false;
|
}
|
);
|
},
|
async getDeptmentOptions() {
|
await departmentListAll({tenantId: this.setting.tenantId}).then(res => {
|
this.deptmentOptions = res
|
})
|
},
|
handleCheckAllChange(val) {
|
if (val) {
|
this.checkedList = this.roleOptions.map(x => {
|
return x.role_id
|
})
|
} else {
|
this.checkedList = []
|
}
|
},
|
handleCheckedCitiesChange(value) {
|
let checkedCount = value.length;
|
this.checkAll = checkedCount === this.roleOptions.length;
|
},
|
async getInfo() {
|
this.title = this.setting.title
|
// 查询数据
|
await user.getUser({id: this.setting.id}).then(res => {
|
const data = res.data
|
this.formData = Object.assign(this.formData, data)
|
if (this.formData.projectStart != null && this.formData.projectStart > 0) {
|
this.formData.projectStart = DateFormatter.LongToDateTime(this.formData.projectStart)
|
}
|
if (this.formData.projectEnd != null && this.formData.projectEnd > 0) {
|
this.formData.projectEnd = DateFormatter.LongToDateTime(this.formData.projectEnd)
|
}
|
this.checkedList = res.list.map(x => {
|
return x.role_id
|
})
|
if (res.list.length == this.roleOptions.length) {
|
this.handleCheckedCitiesChange(res.list)
|
}
|
})
|
},
|
close() {
|
this.formData = {
|
sysDeptId: '',
|
userName: '',
|
userCode: '',
|
userPhone: '',
|
sex: 1,
|
status: 1,
|
remark: '',
|
seq: null,
|
}
|
this.$emit('close')
|
},
|
save() {
|
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
const params = Object.assign({}, this.formData)
|
params.roleList = this.checkedList
|
// 区域id
|
params.tenantId = this.setting.tenantId
|
params.tenantCode = this.setting.tenantCode
|
if (params.ctiStatus == 0) {
|
params.agentJid = ''
|
params.workgroupJid = ''
|
params.clientNumber = ''
|
params.clientPwd = ''
|
}
|
if (params.projectStart != null && params.projectEnd != null) {
|
params.projectStart = DateFormatter.DateToLong(params.projectStart)
|
params.projectEnd = DateFormatter.DateToLong(params.projectEnd)
|
if (params.projectStart >= params.projectEnd) {
|
this.$message.error('服务结束时间不能小于或者等于服务开始时间')
|
return
|
}
|
}
|
if ((params.projectStart == null && params.projectEnd != null) || (params.projectStart != null && params.projectEnd == null)) {
|
this.$message.error('服务开始时间和服务结束时间必须成对出现')
|
return
|
}
|
if (this.loading) return;
|
this.loading = true
|
if (params.id) {
|
user.upd(params).then(res => {
|
this.loading = false
|
if (res) {
|
this.$message.success('保存成功！')
|
this.close()
|
this.$emit('search')
|
} else {
|
this.$message.error('保存失败')
|
}
|
}).catch(() => {
|
this.loading = false
|
})
|
} else {
|
user.add(params).then(res => {
|
this.loading = false
|
if (res) {
|
this.$message.success('保存成功！')
|
this.close()
|
this.$emit('search')
|
} else {
|
this.$message.error('保存失败')
|
}
|
}).catch(() => {
|
this.loading = false
|
})
|
}
|
} else {
|
this.$message.error('校验未通过，请检查。')
|
}
|
})
|
},
|
getWorkgroupsAll() {
|
callCenter.getWorkgroupsAll().then(res => {
|
this.workgroups = res.workgroups
|
})
|
},
|
getWorkgroupAgents(workgroupName) {
|
this.formData.agentJid = ''
|
this.formData.clientNumber = ''
|
this.formData.clientPwd = ''
|
this.agentExtendEntiry.agentId = ''
|
this.formData.workgroupJid = this.workgroup.workgroupJID
|
callCenter.getWorkgroupAgents(workgroupName).then(res => {
|
this.agents = res.agents
|
})
|
},
|
onClickAgent(agent) {
|
this.formData.agentJid = agent.agentExtendEntiry.agentId
|
this.formData.clientNumber = agent.agentExtendEntiry.ccClientNumber
|
this.formData.clientPwd = agent.agentExtendEntiry.ccClientPWD
|
}
|
}
|
}
|
</script>
|
