Files
laws_weilai/jero-web/src/views/system/modules/UserModal.vue
T
2022-01-17 10:09:01 +08:00

709 lines
25 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="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:0px"></a-button>
</span>
</div>
</template>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item :label="$t('userAccount')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :placeholder="$t('enterUserAccount')" v-decorator.trim="[ 'username', validatorRules.username]" :readOnly="!!model.id"/>
</a-form-item>
<template v-if="!model.id">
<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>
<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>
<a-form-item :label="$t('userName')" :labelCol="labelCol" :wrapperCol="wrapperCol" >
<a-input :placeholder="$t('enterUserName')" 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>-->
<a-form-item :label="$t('RoleAssignment')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled" >
<a-select
mode="multiple"
:disabled="departDisabled"
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>
<!--部门分配-->
<a-form-item :label="$t('DepartmentAllocation')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">
<a-input-search
:placeholder="$t('ClickSelectDepartment')"
v-model="checkedDepartNameString"
readOnly
@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新增身份和负责部门------ -->
<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>
<a-form-item :label="$t('ResponsibleDepartment')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="departIdShow==true">
<a-select
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>-->
<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>
<a-form-item :label="$t('mailbox')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :placeholder="$t('enterEmailAddress')" v-decorator="[ 'email', validatorRules.email]" />
</a-form-item>
<a-form-item :label="$t('phoneNumber')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :placeholder="$t('enterMobileNumber')" :disabled="isDisabledAuth('user:form:phone')" 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 {
departDisabled: false, //是否是我的部门调用该页面
roleDisabled: false, //是否是角色维护调用该页面
modalWidth:800,
drawerWidth:700,
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;
that.initialRoleList();
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;
width: 100%;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
left: 0;
background: #fff;
border-radius: 0 0 2px 2px;
}
</style>