|
|
<template>
|
|
|
<a-drawer
|
|
|
:title="title"
|
|
|
:maskClosable="true"
|
|
|
:width="drawerWidth"
|
|
|
placement="right"
|
|
|
:closable="true"
|
|
|
@close="handleCancel"
|
|
|
:visible="visible"
|
|
|
style="height: calc(100% - 55px);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="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
<a-input placeholder="请输入用户账号" v-decorator="[ 'username', validatorRules.username]" :readOnly="!!model.id"/>
|
|
|
</a-form-item>
|
|
|
|
|
|
<template v-if="!model.id">
|
|
|
<a-form-item label="登陆密码" :labelCol="labelCol" :wrapperCol="wrapperCol" >
|
|
|
<a-input type="password" placeholder="请输入登陆密码" v-decorator="[ 'password', validatorRules.password]" />
|
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" >
|
|
|
<a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登陆密码" v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
|
|
|
</a-form-item>
|
|
|
</template>
|
|
|
|
|
|
<a-form-item label="用户名字" :labelCol="labelCol" :wrapperCol="wrapperCol" >
|
|
|
<a-input placeholder="请输入用户名称" v-decorator="[ 'realname', validatorRules.realname]" />
|
|
|
</a-form-item>
|
|
|
<template v-show="!roleDisabled">
|
|
|
<a-form-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" >
|
|
|
<a-select
|
|
|
mode="multiple"
|
|
|
style="width: 100%"
|
|
|
placeholder="请选择用户角色"
|
|
|
v-model="selectedRole">
|
|
|
<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>
|
|
|
</template>
|
|
|
<!--部门分配-->
|
|
|
<template v-show="!departDisabled">
|
|
|
<a-form-item label="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol" >
|
|
|
<a-input-search
|
|
|
placeholder="点击右侧按钮选择部门"
|
|
|
v-model="checkedDepartNameString"
|
|
|
disabled
|
|
|
@search="onSearch">
|
|
|
<a-button slot="enterButton" icon="search">选择</a-button>
|
|
|
</a-input-search>
|
|
|
</a-form-item>
|
|
|
</template>
|
|
|
<a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
<a-upload
|
|
|
listType="picture-card"
|
|
|
class="avatar-uploader"
|
|
|
:showUploadList="false"
|
|
|
:action="uploadAction"
|
|
|
:data="{'isup':1}"
|
|
|
:headers="headers"
|
|
|
:beforeUpload="beforeUpload"
|
|
|
@change="handleChange"
|
|
|
>
|
|
|
<img v-if="picUrl" :src="getAvatarView()" alt="头像" style="height:104px;max-width:300px"/>
|
|
|
<div v-else>
|
|
|
<a-icon :type="uploadLoading ? 'loading' : 'plus'" />
|
|
|
<div class="ant-upload-text">上传</div>
|
|
|
</div>
|
|
|
</a-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)}]"/>
|
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
<a-select v-decorator="[ 'sex', {}]" placeholder="请选择性别">
|
|
|
<a-select-option :value="1">男</a-select-option>
|
|
|
<a-select-option :value="2">女</a-select-option>
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
<a-input placeholder="请输入邮箱" v-decorator="[ 'email', validatorRules.email]" />
|
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
<a-input placeholder="请输入手机号码" :disabled="disabledAuth('user:form:phone')" v-decorator="[ 'phone', validatorRules.phone]" />
|
|
|
</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="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
|
|
|
<a-button style="margin-right: .8rem">取消</a-button>
|
|
|
</a-popconfirm>
|
|
|
<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</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, httpAction,putAction } from '@/api/manage'
|
|
|
import {addUser,editUser,queryUserRole,queryall,checkUsername } from '@/api/api'
|
|
|
import { disabledAuthFilter } from "@/utils/authFilter"
|
|
|
|
|
|
export default {
|
|
|
name: "RoleModal",
|
|
|
components: {
|
|
|
departWindow,
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
departDisabled: false, //是否是我的部门调用该页面
|
|
|
deptId: '',
|
|
|
roleDisabled: false, //是否是角色维护调用该页面
|
|
|
roleId: '',
|
|
|
modalWidth:800,
|
|
|
drawerWidth:700,
|
|
|
modaltoggleFlag:true,
|
|
|
confirmDirty: false,
|
|
|
selectedDepartKeys:[], //保存用户选择部门id
|
|
|
checkedDepartKeys:[],
|
|
|
checkedDepartNames:[], // 保存部门的名称 =>title
|
|
|
checkedDepartNameString:"", // 保存部门的名称 =>title
|
|
|
userId:"", //保存用户id
|
|
|
disableSubmit:false,
|
|
|
userDepartModel:{userId:'',departIdList:[]}, // 保存SysUserDepart的用户部门中间表数据需要的对象
|
|
|
dateFormat:"YYYY-MM-DD",
|
|
|
validatorRules:{
|
|
|
username:{
|
|
|
rules: [{
|
|
|
required: true, message: '请输入用户账号!'
|
|
|
},{
|
|
|
validator: this.validateUsername,
|
|
|
}]
|
|
|
},
|
|
|
password:{
|
|
|
rules: [{
|
|
|
required: true, message: '请输入密码!',
|
|
|
}, {
|
|
|
validator: this.validateToNextPassword,
|
|
|
}],
|
|
|
},
|
|
|
confirmpassword:{
|
|
|
rules: [{
|
|
|
required: true, message: '请重新输入登陆密码!',
|
|
|
}, {
|
|
|
validator: this.compareToFirstPassword,
|
|
|
}],
|
|
|
},
|
|
|
realname:{rules: [{ required: true, message: '请输入用户名称!' }]},
|
|
|
phone:{rules: [{validator: this.validatePhone}]},
|
|
|
email:{rules: [{type: 'email', message: '请输入正确格式的电子邮箱!',}]},
|
|
|
roles:{}
|
|
|
// sex:{initialValue:((!this.model.sex)?"": (this.model.sex+""))}
|
|
|
},
|
|
|
title:"操作",
|
|
|
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: {
|
|
|
addUDepartIds:"/sys/user/addUDepartIds", // 引入为用户添加部门信息需要的url
|
|
|
editUDepartIds:"/sys/user/editUDepartIds", // 引入为用户更新部门信息需要的url
|
|
|
fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
|
|
|
imgerver: window._CONFIG['domianURL']+"/sys/common/view",
|
|
|
userWithDepart: "/sys/user/userDepartList", // 引入为指定用户查看部门信息需要的url
|
|
|
userId:"/sys/user/generateUserId", // 引入生成添加用户情况下的url
|
|
|
syncUserByUserName:"/process/extActProcess/doSyncUserByUserName",//同步用户到工作流
|
|
|
},
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
const token = Vue.ls.get(ACCESS_TOKEN);
|
|
|
this.headers = {"X-Access-Token":token}
|
|
|
|
|
|
},
|
|
|
computed:{
|
|
|
uploadAction:function () {
|
|
|
return this.url.fileUpload;
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
disabledAuth(code){
|
|
|
return disabledAuthFilter(code);
|
|
|
},
|
|
|
//窗口最大化切换
|
|
|
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=""
|
|
|
},
|
|
|
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);
|
|
|
this.picUrl = "Has no pic url yet";
|
|
|
}
|
|
|
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'))
|
|
|
});
|
|
|
// 调用查询用户对应的部门信息的方法
|
|
|
that.checkedDepartKeys = [];
|
|
|
that.loadCheckedDeparts();
|
|
|
},
|
|
|
//
|
|
|
loadCheckedDeparts(){
|
|
|
let that = this;
|
|
|
getAction(that.url.userWithDepart,{userId:that.userId}).then((res)=>{
|
|
|
that.checkedDepartNames = [];
|
|
|
if(res.success){
|
|
|
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);
|
|
|
}
|
|
|
}else{
|
|
|
console.log(res.message);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
close () {
|
|
|
this.$emit('close');
|
|
|
this.visible = false;
|
|
|
this.disableSubmit = false;
|
|
|
this.selectedRole = [];
|
|
|
this.userDepartModel = {};
|
|
|
this.checkedDepartNames = [];
|
|
|
},
|
|
|
moment,
|
|
|
handleSubmit () {
|
|
|
if(this.departDisabled===true){
|
|
|
this.handleSubmitDepart();
|
|
|
return
|
|
|
}else if(this.roleDisabled===true){
|
|
|
this.handleSubmitRole()
|
|
|
return
|
|
|
}
|
|
|
const that = this;
|
|
|
// 触发表单验证
|
|
|
this.form.validateFields((err, values) => {
|
|
|
if (!err) {
|
|
|
that.confirmLoading = true;
|
|
|
let avatar = that.model.avatar;
|
|
|
if(!values.birthday){
|
|
|
values.birthday = '';
|
|
|
}else{
|
|
|
values.birthday = values.birthday.format(this.dateFormat);
|
|
|
}
|
|
|
let formData = Object.assign(this.model, values);
|
|
|
formData.avatar = avatar;
|
|
|
formData.selectedroles = this.selectedRole.length>0?this.selectedRole.join(","):'';
|
|
|
|
|
|
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.close();
|
|
|
})
|
|
|
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 提交表单（我的部门调用)
|
|
|
handleSubmitDepart(){
|
|
|
const that = this;
|
|
|
// 触发表单验证
|
|
|
this.form.validateFields((err, values) => {
|
|
|
if (!err) {
|
|
|
that.confirmLoading = true;
|
|
|
let avatar = that.model.avatar;
|
|
|
if (!values.birthday) {
|
|
|
values.birthday = '';
|
|
|
} else {
|
|
|
values.birthday = values.birthday.format(this.dateFormat);
|
|
|
}
|
|
|
let formData = Object.assign(this.model, values);
|
|
|
formData.avatar = avatar;
|
|
|
formData.selectedroles = this.roleId;
|
|
|
|
|
|
//生成userId
|
|
|
getAction(this.url.userId).then((res) => {
|
|
|
if (res.success) {
|
|
|
this.userId = res.result;
|
|
|
console.log("generateUserId:" + this.userId)
|
|
|
formData.id = that.userId;
|
|
|
console.log("formData.id:" + formData.id)
|
|
|
this.addDepartsToUser1(that, formData); // 调用根据当前用户添加部门信息的方法
|
|
|
addUser(formData).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.close();
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//提交表单（角色维护调用）
|
|
|
handleSubmitRole(){
|
|
|
const that = this;
|
|
|
// 触发表单验证
|
|
|
this.form.validateFields((err, values) => {
|
|
|
if (!err) {
|
|
|
that.confirmLoading = true;
|
|
|
let avatar = that.model.avatar;
|
|
|
if(!values.birthday){
|
|
|
values.birthday = '';
|
|
|
}else{
|
|
|
values.birthday = values.birthday.format(this.dateFormat);
|
|
|
}
|
|
|
let formData = Object.assign(this.model, values);
|
|
|
formData.avatar = avatar;
|
|
|
formData.selectedroles = this.selectedRole.length>0?this.selectedRole.join(","):'';
|
|
|
if(this.roleId!=''){
|
|
|
formData.selectedroles = this.roleId;
|
|
|
}
|
|
|
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.close();
|
|
|
})
|
|
|
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
handleCancel () {
|
|
|
this.close()
|
|
|
},
|
|
|
// 根据当前用户添加部门信息的方法
|
|
|
addDepartsToUser(that,formData){
|
|
|
let httpurl = '';
|
|
|
let method = '';
|
|
|
if(this.userDepartModel.userId != formData.id){
|
|
|
httpurl+=this.url.addUDepartIds;
|
|
|
method = 'post';
|
|
|
}else{
|
|
|
httpurl+=this.url.editUDepartIds;
|
|
|
method = 'put';
|
|
|
}
|
|
|
httpAction(httpurl,this.userDepartModel,method).then((res)=>{
|
|
|
if(res.success){
|
|
|
this.userDepartModel = {};
|
|
|
}else{
|
|
|
that.$message.warning(res.message);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 根据当前用户添加部门信息的方法（我的部门调用）
|
|
|
addDepartsToUser1: function() {
|
|
|
let httpurl = ''
|
|
|
let method = ''
|
|
|
httpurl += this.url.addUDepartIds
|
|
|
method = 'post';
|
|
|
let departIdList = [];
|
|
|
departIdList.push(this.deptId);
|
|
|
httpAction(httpurl, { userId: this.userId, departIdList: departIdList }, method).then((res) => {
|
|
|
if (res.success) {
|
|
|
this.userId = ''
|
|
|
this.deptId = ''
|
|
|
this.departIdList = []
|
|
|
} else {
|
|
|
this.$message.warning(res.message)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
validateToNextPassword (rule, value, callback) {
|
|
|
const form = this.form;
|
|
|
const confirmpassword=form.getFieldValue('confirmpassword');
|
|
|
if (value && confirmpassword && value !== confirmpassword) {
|
|
|
callback('两次输入的密码不一样！');
|
|
|
}
|
|
|
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('两次输入的密码不一样！');
|
|
|
} else {
|
|
|
callback()
|
|
|
}
|
|
|
},
|
|
|
validatePhone(rule, value, callback){
|
|
|
if(!value || new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/).test(value)){
|
|
|
callback();
|
|
|
}else{
|
|
|
callback("请输入正确格式的手机号码!");
|
|
|
}
|
|
|
},
|
|
|
validateUsername(rule, value, callback){
|
|
|
var params = {
|
|
|
id:this.model.id,
|
|
|
username:value
|
|
|
};
|
|
|
checkUsername(params).then((res)=>{
|
|
|
if(res.success){
|
|
|
callback();
|
|
|
}else{
|
|
|
callback("用户账号已存在！");
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
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('请上传图片');
|
|
|
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);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
getAvatarView(){
|
|
|
return this.url.imgerver +"/"+ this.model.avatar;
|
|
|
},
|
|
|
// 搜索用户对应的部门API
|
|
|
onSearch(){
|
|
|
this.$refs.departWindow.add(this.checkedDepartKeys,this.userId);
|
|
|
},
|
|
|
|
|
|
// 获取用户对应部门弹出框提交给返回的数据
|
|
|
modalFormOk (formData) {
|
|
|
this.checkedDepartNames = [];
|
|
|
this.selectedDepartKeys = [];
|
|
|
this.userId = formData.userId;
|
|
|
this.userDepartModel.userId = formData.userId;
|
|
|
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(",");
|
|
|
}
|
|
|
this.userDepartModel.departIdList = this.selectedDepartKeys;
|
|
|
},
|
|
|
// 根据屏幕变化,设置抽屉尺寸
|
|
|
resetScreenSize(){
|
|
|
let screenWidth = document.body.clientWidth;
|
|
|
if(screenWidth < 500){
|
|
|
this.drawerWidth = screenWidth;
|
|
|
}else{
|
|
|
this.drawerWidth = 700;
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</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> |
