Files
laws_weilai/jero-web/src/views/system/modules/UserModal.vue
T
2022-06-02 10:24:06 +08:00

734 lines
26 KiB
Java
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<a-drawer
:title="$t('RoleAssignment')"
:maskClosable="true"
:width="drawerWidth"
placement="right"
:closable="true"
@close="handleCancel"
:visible="visible"
style="height: 100%;overflow: auto;padding-bottom: 53px;">
<template slot="title">
<div style="width: 100%;">
<span>{{ title }}</span>
<span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
<a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
</span>
</div>
</template>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<!-- v-if="!disabled"-->
<a-form-item :label="$t('userAccount')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :placeholder="$t('enterUserAccount')" v-decorator.trim="[ 'username', validatorRules.username]" :disabled='isdisabled'
:readOnly="!!model.id"/>
</a-form-item>
<!-- v-if="!model.id && !disabled"-->
<template>
<!-- <a-form-item :label="$t('LoginPassword')" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!-- <a-input type="password" :placeholder="$t('enterLoginPassword')" autocomplete='new-password'-->
<!-- v-decorator="[ 'password',validatorRules.password]"/>-->
<!-- </a-form-item>-->
<!-- v-if="!disabled"-->
<!-- <a-form-item :label="$t('ConfirmPassword')" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!-- <a-input type="password" @blur="handleConfirmBlur" :placeholder="$t('reenterLoginPassword')"-->
<!-- v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>-->
<!-- </a-form-item>-->
</template>
<!-- v-if="!disabled"-->
<a-form-item :label="$t('userName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :placeholder="$t('enterUserName')" :disabled='isdisabled' v-decorator.trim="[ 'realname', validatorRules.realname]"/>
</a-form-item>
<!--<a-form-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--<a-input placeholder="请输入工号" v-decorator.trim="[ 'workNo', validatorRules.workNo]" />-->
<!--</a-form-item>-->
<!--<a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--<j-select-position placeholder="请选择职务" :multiple="false" v-decorator="['post', {}]"/>-->
<!--</a-form-item>-->
<!-- v-show="!roleDisabled"-->
<a-form-item :label="$t('RoleAssignment')" :labelCol="labelCol" :wrapperCol="wrapperCol"
>
<a-select
mode="multiple"
style="width: 100%"
:placeholder="$t('selectUserRole')"
optionFilterProp="children"
v-model="selectedRole"
:getPopupContainer="(target) => target.parentNode">
<a-select-option v-for="(role,roleindex) in roleList" :key="roleindex.toString()" :value="role.id">
{{ role.roleName }}
</a-select-option>
</a-select>
</a-form-item>
<!--部门分配-->
<!-- v-show="!departDisabled && !disabled"-->
<!-- <a-form-item :label="$t('DepartmentAllocation')" :labelCol="labelCol" :wrapperCol="wrapperCol"-->
<!-- >-->
<!-- <a-input-search-->
<!-- :placeholder="$t('ClickSelectDepartment')"-->
<!-- v-model="checkedDepartNameString"-->
<!-- readOnly-->
<!-- :disabled='isdisabled'-->
<!-- @search="onSearch">-->
<!-- <a-button slot="enterButton" icon="search">{{$t('choice')}}</a-button>-->
<!-- </a-input-search>-->
<!-- </a-form-item>-->
<!--租户分配-->
<!--<a-form-item label="租户分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">-->
<!--<a-select-->
<!--mode="multiple"-->
<!--style="width: 100%"-->
<!--placeholder="请选择租户分配"-->
<!--:disabled="disableSubmit"-->
<!--v-model="currentTenant">-->
<!--<a-select-option v-for="(item, index) in tenantList" :key="index" :value="item.id">-->
<!--{{ item.name }}-->
<!--</a-select-option>-->
<!--</a-select>-->
<!--</a-form-item>-->
<!-- update--begin--autor:wangshuai-----date:20200108------for新增身份和负责部门------ -->
<!-- v-if="!disabled"-->
<!-- <a-form-item :label="$t('identity')" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!-- <a-radio-group-->
<!-- v-model="identity"-->
<!-- @change="identityChange">-->
<!-- <a-radio value="1">{{$t('OrdinaryUsers')}}</a-radio>-->
<!-- <a-radio value="2">{{$t('superior')}}</a-radio>-->
<!-- </a-radio-group>-->
<!-- </a-form-item>-->
<!-- v-if="departIdShow==true && !disabled"-->
<!-- <a-form-item :label="$t('ResponsibleDepartment')" :labelCol="labelCol" :wrapperCol="wrapperCol"-->
<!-- >-->
<!-- <a-select-->
<!-- :disabled="disabled"-->
<!-- mode="multiple"-->
<!-- style="width: 100%"-->
<!-- :placeholder="$t('selectResponsibleDepartment')"-->
<!-- v-model="departIds"-->
<!-- optionFilterProp="children"-->
<!-- :getPopupContainer="(target) => target.parentNode"-->
<!-- :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"-->
<!-- >-->
<!-- <a-select-option v-for="item in resultDepartOptions" :key="item.key" :value="item.key"-->
<!-- >{{item.title}}-->
<!-- </a-select-option-->
<!-- >-->
<!-- </a-select>-->
<!-- </a-form-item>-->
<!-- update--end--autor:wangshuai-----date:20200108------for新增身份和负责部门------ -->
<!-- <a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!-- <j-image-upload class="avatar-uploader" text="上传" v-model="fileList" ></j-image-upload>-->
<!-- </a-form-item>-->
<!--<a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--<a-date-picker-->
<!--style="width: 100%"-->
<!--placeholder="请选择生日"-->
<!--v-decorator="['birthday', {initialValue:!model.birthday?null:moment(model.birthday,dateFormat)}]"-->
<!--:getCalendarContainer="node => node.parentNode"/>-->
<!--</a-form-item>-->
<!-- v-if="!disabled"-->
<!-- <a-form-item :label="$t('Gender')" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!-- <a-select v-decorator="[ 'sex', {}]" :placeholder="$t('selectGender')"-->
<!-- :getPopupContainer="(target) => target.parentNode">-->
<!-- <a-select-option :value="1">{{$t('male')}}</a-select-option>-->
<!-- <a-select-option :value="2">{{$t('female')}}</a-select-option>-->
<!-- </a-select>-->
<!-- </a-form-item>-->
<!-- v-if="!disabled"-->
<a-form-item :label="$t('mailbox')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :placeholder="$t('enterEmailAddress')" v-decorator="[ 'email', validatorRules.email]" :disabled='isdisabled'/>
</a-form-item>
<!-- v-if="!disabled"-->
<!-- :disabled="isDisabledAuth('user:form:phone')"-->
<a-form-item :label="$t('phoneNumber')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :placeholder="$t('enterMobileNumber')" :disabled='isdisabled'
v-decorator="[ 'phone', validatorRules.phone]"/>
</a-form-item>
<!--<a-form-item label="座机" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--<a-input placeholder="请输入座机" v-decorator="[ 'telephone', validatorRules.telephone]"/>-->
<!--</a-form-item>-->
<!-- <a-form-item label="工作流引擎" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!-- <j-dict-select-tag v-decorator="['activitiSync', {}]" placeholder="请选择是否同步工作流引擎" :type="'radio'" :triggerChange="true" dictCode="activiti_sync"/>-->
<!-- </a-form-item>-->
</a-form>
</a-spin>
<depart-window ref="departWindow" @ok="modalFormOk"></depart-window>
<div class="drawer-bootom-button" v-show="!disableSubmit">
<a-popconfirm :title="$t('AreYouWantDiscardEditing')" @confirm="handleCancel" :okText="$t('determine')"
:cancelText="$t('cancel')">
<a-button style="margin-right: .8rem">{{$t('cancel')}}</a-button>
</a-popconfirm>
<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
</div>
</a-drawer>
</template>
<script>
import pick from 'lodash.pick'
import moment from 'moment'
import Vue from 'vue'
// 引入搜索部门弹出框的组件
import departWindow from './DepartWindow'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction } from '@/api/manage'
import { addUser, editUser, queryUserRole, queryall } from '@/api/api'
import { disabledAuthFilter } from '@/utils/authFilter'
import { duplicateCheck } from '@/api/api'
import JImageUpload from '../../../components/jero/JImageUpload'
export default {
name: 'UserModal',
components: {
JImageUpload,
departWindow
},
data() {
return {
isdisabled: true,
departDisabled: false, //是否是我的部门调用该页面
roleDisabled: false, //是否是角色维护调用该页面
modalWidth: 800,
drawerWidth: 700,
disabled: false,
modaltoggleFlag: true,
confirmDirty: false,
selectedDepartKeys: [], //保存用户选择部门id
checkedDepartKeys: [],
checkedDepartNames: [], // 保存部门的名称 =>title
checkedDepartNameString: '', // 保存部门的名称 =>title
resultDepartOptions: [],
userId: '', //保存用户id
disableSubmit: false,
userDepartModel: { userId: '', departIdList: [] }, // 保存SysUserDepart的用户部门中间表数据需要的对象
dateFormat: 'YYYY-MM-DD',
validatorRules: {
username: {
rules: [{
required: true, message: this.$t('enterUserAccount')
}, {
validator: this.validateUsername
}]
},
password: {
rules: [{
required: true,
pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
message: this.$t('passwordConsists')
}, {
validator: this.validateToNextPassword
}]
},
confirmpassword: {
rules: [{
required: true, message: this.$t('reenterLoginPassword')
}, {
validator: this.compareToFirstPassword
}]
},
realname: { rules: [{ required: true, message: this.$t('enterUserName') }] },
phone: { rules: [{ validator: this.validatePhone }] },
email: {
rules: [{
validator: this.validateEmail
}]
},
roles: {},
// sex:{initialValue:((!this.model.sex)?"": (this.model.sex+""))}
workNo: {
rules: [
{ required: true, message: this.$t('enterJobNumber') },
{ validator: this.validateWorkNo }
]
},
telephone: {
rules: [
{ pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: this.$t('enterCorrectLandline') }
]
}
},
departIdShow: false,
departIds: [], //负责部门id
title: this.$t('operation'),
visible: false,
model: {},
roleList: [],
selectedRole: [],
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
},
uploadLoading: false,
confirmLoading: false,
headers: {},
form: this.$form.createForm(this),
picUrl: '',
url: {
fileUpload: window._CONFIG['domianURL'] + '/sys/common/upload',
userWithDepart: '/sys/user/userDepartList', // 引入为指定用户查看部门信息需要的url
userId: '/sys/user/generateUserId', // 引入生成添加用户情况下的url
syncUserByUserName: '/act/process/extActProcess/doSyncUserByUserName',//同步用户到工作流
queryTenantList: '/sys/tenant/queryList'
},
identity: '1',
fileList: [],
tenantList: [],
currentTenant: []
}
},
created() {
const token = Vue.ls.get(ACCESS_TOKEN)
this.headers = { 'X-Access-Token': token }
this.initTenantList()
},
computed: {
uploadAction: function() {
return this.url.fileUpload
}
},
methods: {
isDisabledAuth(code) {
return disabledAuthFilter(code)
},
initTenantList() {
getAction(this.url.queryTenantList).then(res => {
if (res.success) {
this.tenantList = res.result
}
})
},
//窗口最大化切换
toggleScreen() {
if (this.modaltoggleFlag) {
this.modalWidth = window.innerWidth
} else {
this.modalWidth = 800
}
this.modaltoggleFlag = !this.modaltoggleFlag
},
initialRoleList() {
queryall().then((res) => {
if (res.success) {
this.roleList = res.result
} else {
console.log(res.message)
}
})
},
loadUserRoles(userid) {
queryUserRole({ userid: userid }).then((res) => {
if (res.success) {
this.selectedRole = res.result
} else {
console.log(res.message)
}
})
},
refresh() {
this.selectedDepartKeys = []
this.checkedDepartKeys = []
this.checkedDepartNames = []
this.checkedDepartNameString = ''
this.userId = ''
this.resultDepartOptions = []
this.departId = []
this.departIdShow = false
this.currentTenant = []
},
add() {
this.picUrl = ''
this.refresh()
this.edit({ activitiSync: '1' })
},
edit(record) {
this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
let that = this
this.disabled = false
that.initialRoleList()
if (record.activitiSync) {
this.disabled = true
}
that.checkedDepartNameString = ''
that.form.resetFields()
if (record.hasOwnProperty('id')) {
that.loadUserRoles(record.id)
setTimeout(() => {
this.fileList = record.avatar
}, 5)
}
that.userId = record.id
that.visible = true
that.model = Object.assign({}, record)
that.$nextTick(() => {
that.form.setFieldsValue(pick(this.model, 'username', 'sex', 'realname', 'email', 'phone', 'activitiSync', 'workNo', 'telephone', 'post'))
})
//身份为上级显示负责部门,否则不显示
if (this.model.userIdentity == '2') {
this.identity = '2'
this.departIdShow = true
} else {
this.identity = '1'
this.departIdShow = false
}
// 调用查询用户对应的部门信息的方法
that.checkedDepartKeys = []
that.loadCheckedDeparts()
//update-begin-author:taoyan date:2020710 for:多租户配置
if (!record.relTenantIds || record.relTenantIds.length == 0) {
this.currentTenant = []
} else {
this.currentTenant = record.relTenantIds.split(',').map(Number)
}
//update-end-author:taoyan date:2020710 for:多租户配置
},
//
loadCheckedDeparts() {
let that = this
if (!that.userId) {
return
}
getAction(that.url.userWithDepart, { userId: that.userId }).then((res) => {
that.checkedDepartNames = []
if (res.success) {
var depart = []
var departId = []
for (let i = 0; i < res.result.length; i++) {
that.checkedDepartNames.push(res.result[i].title)
this.checkedDepartNameString = this.checkedDepartNames.join(',')
that.checkedDepartKeys.push(res.result[i].key)
//新增负责部门选择下拉框
depart.push({
key: res.result[i].key,
title: res.result[i].title
})
departId.push(res.result[i].key)
}
that.resultDepartOptions = depart
//判断部门id是否存在,不存在择直接默认当前所在部门
if (this.model.departIds) {
this.departIds = this.model.departIds.split(',')
} else {
this.departIds = departId
}
that.userDepartModel.departIdList = that.checkedDepartKeys
} else {
console.log(res.message)
}
})
},
close() {
this.$emit('close')
this.visible = false
this.disableSubmit = false
this.selectedRole = []
this.userDepartModel = { userId: '', departIdList: [] }
this.checkedDepartNames = []
this.checkedDepartNameString = ''
this.checkedDepartKeys = []
this.selectedDepartKeys = []
this.resultDepartOptions = []
this.departIds = []
this.departIdShow = false
this.identity = '1'
this.fileList = []
},
moment,
handleSubmit() {
const that = this
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true
if (!values.birthday) {
values.birthday = ''
} else {
values.birthday = values.birthday.format(this.dateFormat)
}
let formData = Object.assign(this.model, values)
if (that.fileList != '') {
formData.avatar = that.fileList
} else {
formData.avatar = null
}
//update-begin-author:taoyan date:2020710 for:多租户配置
formData.relTenantIds = this.currentTenant.length > 0 ? this.currentTenant.join(',') : ''
//update-end-author:taoyan date:2020710 for:多租户配置
formData.selectedroles = this.selectedRole.length > 0 ? this.selectedRole.join(',') : ''
formData.selecteddeparts = this.userDepartModel.departIdList.length > 0 ? this.userDepartModel.departIdList.join(',') : ''
formData.userIdentity = this.identity
//如果是上级择传入departIds,否则为空
if (this.identity === '2') {
formData.departIds = this.departIds.join(',')
} else {
formData.departIds = ''
}
// that.addDepartsToUser(that,formData); // 调用根据当前用户添加部门信息的方法
let obj
if (!this.model.id) {
formData.id = this.userId
obj = addUser(formData)
} else {
obj = editUser(formData)
}
obj.then((res) => {
if (res.success) {
that.$message.success(res.message)
that.$emit('ok')
} else {
that.$message.warning(res.message)
}
}).finally(() => {
that.confirmLoading = false
that.checkedDepartNames = []
that.userDepartModel.departIdList = { userId: '', departIdList: [] }
that.close()
})
}
})
},
handleCancel() {
this.close()
},
validateToNextPassword(rule, value, callback) {
const form = this.form
const confirmpassword = form.getFieldValue('confirmpassword')
if (value && confirmpassword && value !== confirmpassword) {
callback(this.$t('passwordsEnteredTwice'))
}
if (value && this.confirmDirty) {
form.validateFields(['confirm'], { force: true })
}
callback()
},
compareToFirstPassword(rule, value, callback) {
const form = this.form
if (value && value !== form.getFieldValue('password')) {
callback(this.$t('passwordsEnteredTwice'))
} else {
callback()
}
},
validatePhone(rule, value, callback) {
if (!value) {
callback()
} else {
//update-begin--Author:kangxiaolin Date:20190826 for[05] 手机号不支持199号码段--------------------
if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {
//update-end--Author:kangxiaolin Date:20190826 for[05] 手机号不支持199号码段--------------------
var params = {
tableName: 'sys_user',
fieldName: 'phone',
fieldVal: value,
dataId: this.userId
}
duplicateCheck(params).then((res) => {
if (res.success) {
callback()
} else {
callback(this.$t('PnumberExists'))
}
})
} else {
callback(this.$t('enterPhoneCorrect'))
}
}
},
validateEmail(rule, value, callback) {
if (!value) {
callback()
} else {
if (new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)) {
var params = {
tableName: 'sys_user',
fieldName: 'email',
fieldVal: value,
dataId: this.userId
}
duplicateCheck(params).then((res) => {
console.log(res)
if (res.success) {
callback()
} else {
callback(this.$t('MailboxExists'))
}
})
} else {
callback(this.$t('enterMailboxCorrect'))
}
}
},
validateUsername(rule, value, callback) {
var params = {
tableName: 'sys_user',
fieldName: 'username',
fieldVal: value,
dataId: this.userId
}
duplicateCheck(params).then((res) => {
if (res.success) {
callback()
} else {
callback(this.$t('UserExists'))
}
})
},
validateWorkNo(rule, value, callback) {
var params = {
tableName: 'sys_user',
fieldName: 'work_no',
fieldVal: value,
dataId: this.userId
}
duplicateCheck(params).then((res) => {
if (res.success) {
callback()
} else {
callback(this.$t('nameExists'))
}
})
},
handleConfirmBlur(e) {
const value = e.target.value
this.confirmDirty = this.confirmDirty || !!value
},
normFile(e) {
console.log('Upload event:', e)
if (Array.isArray(e)) {
return e
}
return e && e.fileList
},
beforeUpload: function(file) {
var fileType = file.type
if (fileType.indexOf('image') < 0) {
this.$message.warning(this.$t('uploadPictures'))
return false
}
//TODO 验证文件大小
},
handleChange(info) {
this.picUrl = ''
if (info.file.status === 'uploading') {
this.uploadLoading = true
return
}
if (info.file.status === 'done') {
var response = info.file.response
this.uploadLoading = false
console.log(response)
if (response.success) {
this.model.avatar = response.message
this.picUrl = 'Has no pic url yet'
} else {
this.$message.warning(response.message)
}
}
},
// 搜索用户对应的部门API
onSearch() {
this.$refs.departWindow.add(this.checkedDepartKeys, this.userId)
},
// 获取用户对应部门弹出框提交给返回的数据
modalFormOk(formData) {
this.checkedDepartNames = []
this.selectedDepartKeys = []
this.checkedDepartNameString = ''
this.userId = formData.userId
this.userDepartModel.userId = formData.userId
this.departIds = []
this.resultDepartOptions = []
var depart = []
for (let i = 0; i < formData.departIdList.length; i++) {
this.selectedDepartKeys.push(formData.departIdList[i].key)
this.checkedDepartNames.push(formData.departIdList[i].title)
this.checkedDepartNameString = this.checkedDepartNames.join(',')
//新增部门选择,如果上面部门选择后不为空直接付给负责部门
depart.push({
key: formData.departIdList[i].key,
title: formData.departIdList[i].title
})
this.departIds.push(formData.departIdList[i].key)
}
this.resultDepartOptions = depart
this.userDepartModel.departIdList = this.selectedDepartKeys
this.checkedDepartKeys = this.selectedDepartKeys //更新当前的选择keys
},
// 根据屏幕变化,设置抽屉尺寸
resetScreenSize() {
let screenWidth = document.body.clientWidth
if (screenWidth < 500) {
this.drawerWidth = screenWidth
} else {
this.drawerWidth = 700
}
},
identityChange(e) {
if (e.target.value === '1') {
this.departIdShow = false
} else {
this.departIdShow = true
}
}
}
}
</script>
<style scoped>
.avatar-uploader > .ant-upload {
width: 104px;
height: 104px;
}
.ant-upload-select-picture-card i {
font-size: 49px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
.ant-table-tbody .ant-table-row td {
padding-top: 10px;
padding-bottom: 10px;
}
.drawer-bootom-button {
position: absolute;
bottom: -8px;
z-index:100;
width: 100%;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
left: 0;
background: #fff;
border-radius: 0 0 2px 2px;
}
</style>