553 lines
19 KiB
Vue
553 lines
19 KiB
Vue
<template>
|
||
<a-drawer
|
||
:title="title"
|
||
: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:0"></a-button>
|
||
</span>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<a-spin :spinning="confirmLoading">
|
||
<a-form-model ref="form" :model="model" :rules="validatorRules">
|
||
|
||
<a-form-model-item :label="$t('user.userAccount')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="username">
|
||
<a-input :placeholder="$t('pleaseEnter') + $t('user.userAccount')"
|
||
:maxLength="50"
|
||
v-model="model.username"
|
||
:readOnly="!!model.id"
|
||
:disabled="disableSubmit"
|
||
@change="event => event.target.value = event.target.value.trim()" />
|
||
</a-form-model-item>
|
||
|
||
<template v-if="!model.id">
|
||
<a-form-model-item :label="$t('user.loginPassword')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="password">
|
||
<a-input-password type="password"
|
||
:placeholder="$t('pleaseEnter') + $t('user.loginPassword')"
|
||
:maxLength="20"
|
||
v-model="model.password" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item :label="$t('user.confirmPassword')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="confirmpassword">
|
||
<a-input-password type="password"
|
||
@blur="handleConfirmBlur"
|
||
:maxLength="20"
|
||
:placeholder="$t('user.reenterLoginPassword')"
|
||
v-model="model.confirmpassword" />
|
||
</a-form-model-item>
|
||
</template>
|
||
|
||
<a-form-model-item :label="$t('user.userName')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realname">
|
||
<a-input :placeholder="$t('pleaseEnter') + $t('user.userName')"
|
||
v-model="model.realname"
|
||
:maxLength="50"
|
||
:disabled="disableSubmit"
|
||
@change="event => event.target.value = event.target.value.trim()" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item :label="$t('user.post')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="post">
|
||
<a-input :placeholder="$t('pleaseEnter') + $t('user.post')"
|
||
v-model="model.post"
|
||
:maxLength="50"
|
||
:disabled="disableSubmit"
|
||
@change="event => event.target.value = event.target.value.trim()" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item :label="$t('user.roleAssignment')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled">
|
||
<j-multi-select-tag
|
||
:disabled="disableSubmit"
|
||
v-model="model.selectedroles"
|
||
:options="rolesOptions"
|
||
:placeholder="$t('pleaseSelect') + $t('role')">
|
||
</j-multi-select-tag>
|
||
</a-form-model-item>
|
||
|
||
<!--部门分配-->
|
||
<a-form-model-item :label="$t('user.departmentAllocation')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">
|
||
<j-select-depart
|
||
:disabled="disableSubmit"
|
||
v-model="model.selecteddeparts"
|
||
:multi="true"
|
||
@back="backDepartInfo"
|
||
:backDepart="true"
|
||
:treeOpera="true">>
|
||
</j-select-depart>
|
||
</a-form-model-item>
|
||
|
||
<!--租户分配
|
||
<a-form-model-item label="租户分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">
|
||
<j-multi-select-tag
|
||
:disabled="disableSubmit"
|
||
v-model="model.relTenantIds"
|
||
:options="tenantsOptions"
|
||
placeholder="请选择租户">
|
||
</j-multi-select-tag>
|
||
</a-form-model-item>
|
||
-->
|
||
|
||
<a-form-model-item :label="$t('user.identity')" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-radio-group v-model="model.userIdentity" @change="identityChange" :disabled="disableSubmit">
|
||
<a-radio :value="1">{{ $t('user.ordinaryUsers') }}</a-radio>
|
||
<a-radio :value="2">{{ $t('user.superior') }}</a-radio>
|
||
</a-radio-group>
|
||
</a-form-model-item>
|
||
<a-form-model-item :label="$t('user.responsibleDepartment')"
|
||
:labelCol="labelCol"
|
||
:wrapperCol="wrapperCol"
|
||
v-if="departIdShow===true">
|
||
<j-multi-select-tag
|
||
:disabled="disableSubmit"
|
||
v-model="model.departIds"
|
||
:options="nextDepartOptions"
|
||
:placeholder="$t('pleaseSelect') + $t('user.responsibleDepartment')">
|
||
</j-multi-select-tag>
|
||
</a-form-model-item>
|
||
<!-- update--end--autor:wangshuai-----date:20200108------for：新增身份和负责部门------ -->
|
||
<!-- <a-form-model-item :label="$t('user.heads')" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
||
<!-- <j-image-upload class="avatar-uploader"-->
|
||
<!-- :text="$t('upload')"-->
|
||
<!-- v-model="model.avatar"-->
|
||
<!-- :disabled="disableSubmit"-->
|
||
<!-- :number=1-->
|
||
<!-- accept='.png,.PNG,.jpg,.JPG'></j-image-upload>-->
|
||
<!-- </a-form-model-item>-->
|
||
|
||
<a-form-model-item :label="$t('user.gender')" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-select v-model="model.sex"
|
||
:placeholder="$t('pleaseSelect') + $t('user.gender')"
|
||
:getPopupContainer="(target) => target.parentNode"
|
||
:disabled="disableSubmit">
|
||
<a-select-option :value="1">{{ $t('user.male') }}</a-select-option>
|
||
<a-select-option :value="2">{{ $t('user.female') }}</a-select-option>
|
||
</a-select>
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item :label="$t('user.mailbox')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
|
||
<a-input :placeholder="$t('pleaseEnter') + $t('user.mailbox')"
|
||
v-model="model.email"
|
||
:maxLength="50"
|
||
:disabled="disableSubmit"
|
||
@change="event => event.target.value = event.target.value.trim()" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item :label="$t('phoneNumber')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
|
||
<a-input :placeholder="$t('pleaseEnter') + $t('phoneNumber')"
|
||
:disabled="isDisabledAuth('user:form:phone') || disableSubmit"
|
||
v-model="model.phone" />
|
||
</a-form-model-item>
|
||
|
||
<!-- <a-form-model-item label="工作流引擎" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
||
<!-- <j-dict-select-tag v-model="model.activitiSync" placeholder="请选择是否同步工作流引擎" :type="'radio'" dictCode="activiti_sync"/>-->
|
||
<!-- </a-form-model-item>-->
|
||
|
||
</a-form-model>
|
||
</a-spin>
|
||
|
||
<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 moment from 'moment'
|
||
import Vue from 'vue'
|
||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||
import { getAction } from '@/api/manage'
|
||
import { addUser, duplicateCheck, editUser, queryall, queryUserRole } from '@/api/api'
|
||
import { disabledAuthFilter } from '@/utils/authFilter'
|
||
|
||
import { getRSAPublicKey } from '@/utils/encryption.js'
|
||
import { JSEncrypt } from 'jsencrypt'
|
||
import JMultiSelectTag from '../../../components/dict/JMultiSelectTag'
|
||
|
||
export default {
|
||
name: 'UserModal',
|
||
components: {
|
||
JMultiSelectTag
|
||
},
|
||
data () {
|
||
return {
|
||
departDisabled: false, // 是否是我的部门调用该页面
|
||
roleDisabled: false, // 是否是角色维护调用该页面
|
||
modalWidth: 800,
|
||
drawerWidth: 700,
|
||
modaltoggleFlag: true,
|
||
confirmDirty: false,
|
||
userId: '', // 保存用户id
|
||
disableSubmit: false,
|
||
dateFormat: 'YYYY-MM-DD',
|
||
validatorRules: {
|
||
username: [{ required: true, message: this.$t('pleaseEnter') + this.$t('user.userAccount') },
|
||
{ validator: this.validateUsername }],
|
||
password: [{
|
||
required: true,
|
||
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
|
||
message: this.$t('user.passwordConsists')
|
||
},
|
||
{ validator: this.validateToNextPassword, trigger: 'change' }],
|
||
confirmpassword: [{ required: true, message: this.$t('user.reenterLoginPassword') },
|
||
{ validator: this.compareToFirstPassword }],
|
||
realname: [{ required: true, message: this.$t('pleaseEnter') + this.$t('user.userName') }],
|
||
phone: [{ validator: this.validatePhone }],
|
||
email: [{ validator: this.validateEmail }],
|
||
roles: {}
|
||
},
|
||
departIdShow: false,
|
||
title: this.$t('operation'),
|
||
visible: false,
|
||
model: {},
|
||
labelCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 5 }
|
||
},
|
||
wrapperCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 16 }
|
||
},
|
||
uploadLoading: false,
|
||
confirmLoading: false,
|
||
headers: {},
|
||
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'
|
||
},
|
||
tenantsOptions: [],
|
||
rolesOptions: [],
|
||
nextDepartOptions: [],
|
||
rsaPublicKey: ''
|
||
}
|
||
},
|
||
created () {
|
||
const token = Vue.ls.get(ACCESS_TOKEN)
|
||
this.headers = { 'X-Access-Token': token }
|
||
this.initRoleList()
|
||
this.initTenantList()
|
||
},
|
||
computed: {
|
||
uploadAction: function () {
|
||
return this.url.fileUpload
|
||
}
|
||
},
|
||
methods: {
|
||
add () {
|
||
this.refresh()
|
||
this.edit({ userIdentity: 1 })
|
||
},
|
||
edit (record) {
|
||
const that = this
|
||
that.visible = true
|
||
// 根据屏幕宽度自适应抽屉宽度
|
||
this.resetScreenSize()
|
||
that.model = Object.assign({}, { selectedroles: '', selecteddeparts: '' }, record)
|
||
// 身份为上级显示负责部门，否则不显示
|
||
this.departIdShow = this.model.userIdentity === 2
|
||
if (Object.prototype.hasOwnProperty.call(record, 'id')) {
|
||
that.userId = record.id
|
||
that.getUserRoles(record.id)
|
||
that.getUserDeparts(record.id)
|
||
}
|
||
},
|
||
isDisabledAuth (code) {
|
||
return disabledAuthFilter(code)
|
||
},
|
||
// 窗口最大化切换
|
||
toggleScreen () {
|
||
if (this.modaltoggleFlag) {
|
||
this.modalWidth = window.innerWidth
|
||
} else {
|
||
this.modalWidth = 800
|
||
}
|
||
this.modaltoggleFlag = !this.modaltoggleFlag
|
||
},
|
||
// 根据屏幕变化,设置抽屉尺寸
|
||
resetScreenSize () {
|
||
const screenWidth = document.body.clientWidth
|
||
if (screenWidth < 500) {
|
||
this.drawerWidth = screenWidth
|
||
} else {
|
||
this.drawerWidth = 700
|
||
}
|
||
},
|
||
// 初始化租户字典
|
||
initTenantList () {
|
||
getAction(this.url.queryTenantList).then(res => {
|
||
if (res.success) {
|
||
this.tenantsOptions = res.result.map((item) => {
|
||
return { label: item.name, value: item.id + '' }
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 初始化角色字典
|
||
initRoleList () {
|
||
queryall().then((res) => {
|
||
if (res.success) {
|
||
this.rolesOptions = res.result.map((item) => {
|
||
return { label: item.roleName, value: item.id }
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getUserRoles (userid) {
|
||
queryUserRole({ userid: userid }).then((res) => {
|
||
if (res.success) {
|
||
this.model.selectedroles = res.result.join(',')
|
||
}
|
||
})
|
||
},
|
||
getUserDeparts (userid) {
|
||
const that = this
|
||
getAction(that.url.userWithDepart, { userId: userid }).then((res) => {
|
||
if (res.success) {
|
||
const departOptions = []
|
||
const selectDepartKeys = []
|
||
for (let i = 0; i < res.result.length; i++) {
|
||
selectDepartKeys.push(res.result[i].key)
|
||
// 新增负责部门选择下拉框
|
||
departOptions.push({
|
||
value: res.result[i].key,
|
||
label: res.result[i].title
|
||
})
|
||
}
|
||
that.model.selecteddeparts = selectDepartKeys.join(',')
|
||
that.nextDepartOptions = departOptions
|
||
}
|
||
})
|
||
},
|
||
backDepartInfo (info) {
|
||
this.model.departIds = this.model.selecteddeparts
|
||
this.nextDepartOptions = info.map((item) => {
|
||
return { label: item.text, value: item.value + '' }
|
||
})
|
||
},
|
||
refresh () {
|
||
this.userId = ''
|
||
this.nextDepartOptions = []
|
||
this.departIdShow = false
|
||
},
|
||
close () {
|
||
this.$emit('close')
|
||
this.visible = false
|
||
this.disableSubmit = false
|
||
this.nextDepartOptions = []
|
||
this.departIdShow = false
|
||
this.$refs.form.resetFields()
|
||
},
|
||
moment,
|
||
handleSubmit () {
|
||
const that = this
|
||
// 先拉取秘钥
|
||
getRSAPublicKey().then(res => {
|
||
this.rsaPublicKey = res.result
|
||
|
||
// 触发表单验证
|
||
this.$refs.form.validate(valid => {
|
||
if (valid) {
|
||
that.confirmLoading = true
|
||
// 如果是上级择传入departIds,否则为空
|
||
if (this.model.userIdentity !== 2) {
|
||
this.model.departIds = ''
|
||
}
|
||
|
||
// 对密码、邮箱、手机号进行加密
|
||
const encrypt = new JSEncrypt()
|
||
encrypt.setPublicKey(that.rsaPublicKey)
|
||
|
||
if (this.model.password) {
|
||
this.model.password = encrypt.encrypt(this.model.password)
|
||
}
|
||
|
||
if (this.model.phone) {
|
||
this.model.phone = encrypt.encrypt(this.model.phone)
|
||
}
|
||
|
||
if (this.model.email) {
|
||
this.model.email = encrypt.encrypt(this.model.email)
|
||
}
|
||
this.model.rsaPublicKey = that.rsaPublicKey
|
||
|
||
let obj
|
||
if (!this.model.id) {
|
||
this.model.id = this.userId
|
||
obj = addUser(this.model)
|
||
} else {
|
||
obj = editUser(this.model)
|
||
}
|
||
|
||
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.close()
|
||
})
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
})
|
||
},
|
||
handleCancel () {
|
||
this.close()
|
||
},
|
||
validateToNextPassword (rule, value, callback) {
|
||
const confirmpassword = this.model.confirmpassword
|
||
|
||
if (value && confirmpassword && value !== confirmpassword) {
|
||
callback(new Error(this.$t('user.passwordsEnteredTwice')))
|
||
}
|
||
if (value && this.confirmDirty) {
|
||
this.$refs.form.validateField(['user.confirmpassword'])
|
||
}
|
||
callback()
|
||
},
|
||
compareToFirstPassword (rule, value, callback) {
|
||
if (value && value !== this.model.password) {
|
||
callback(new Error(this.$t('user.passwordsEnteredTwice')))
|
||
} else {
|
||
callback()
|
||
}
|
||
},
|
||
validatePhone (rule, value, callback) {
|
||
if (!value) {
|
||
callback()
|
||
} else {
|
||
if (new RegExp(/^1[345789][0-9]\d{8}$/).test(value)) {
|
||
const params = {
|
||
tableName: 'sys_user',
|
||
fieldName: 'phone',
|
||
fieldVal: value,
|
||
dataId: this.userId
|
||
}
|
||
duplicateCheck(params).then((res) => {
|
||
if (res.success) {
|
||
callback()
|
||
} else {
|
||
callback(new Error(this.$t('user.phoneNumberExists')))
|
||
}
|
||
})
|
||
} else {
|
||
callback(new Error(this.$t('user.enterPhoneCorrect')))
|
||
}
|
||
}
|
||
},
|
||
validateEmail (rule, value, callback) {
|
||
if (!value) {
|
||
callback()
|
||
} else {
|
||
if (new RegExp(/^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/).test(value)) {
|
||
const params = {
|
||
tableName: 'sys_user',
|
||
fieldName: 'email',
|
||
fieldVal: value,
|
||
dataId: this.userId
|
||
}
|
||
duplicateCheck(params).then((res) => {
|
||
console.log(res)
|
||
if (res.success) {
|
||
callback()
|
||
} else {
|
||
callback(new Error(this.$t('user.mailboxExists')))
|
||
}
|
||
})
|
||
} else {
|
||
callback(new Error(this.$t('user.enterMailboxCorrect')))
|
||
}
|
||
}
|
||
},
|
||
validateUsername (rule, value, callback) {
|
||
const params = {
|
||
tableName: 'sys_user',
|
||
fieldName: 'username',
|
||
fieldVal: value,
|
||
dataId: this.userId
|
||
}
|
||
duplicateCheck(params).then((res) => {
|
||
if (res.success) {
|
||
callback()
|
||
} else {
|
||
callback(new Error(this.$t('user.userExists')))
|
||
}
|
||
})
|
||
},
|
||
handleConfirmBlur (e) {
|
||
const value = e.target.value
|
||
this.confirmDirty = this.confirmDirty || !!value
|
||
},
|
||
beforeUpload: function (file) {
|
||
const fileType = file.type
|
||
if (fileType.indexOf('image') < 0) {
|
||
this.$message.warning(this.$t('uploadPictures'))
|
||
return false
|
||
}
|
||
// TODO 验证文件大小
|
||
},
|
||
|
||
// 搜索用户对应的部门API
|
||
onSearch () {
|
||
this.$refs.departWindow.add(this.checkedDepartKeys, this.userId)
|
||
},
|
||
identityChange (e) {
|
||
this.departIdShow = e.target.value !== 1
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
width: 100%;
|
||
border-top: 1px solid #e8e8e8;
|
||
padding: 10px 16px;
|
||
text-align: right;
|
||
left: 0;
|
||
background: #fff;
|
||
border-radius: 0 0 2px 2px;
|
||
}
|
||
</style>
|