<template> <a-drawer :title="title" :maskClosable="true" :width="drawerWidth" placement="right" :closable="true" @close="handleCancel" :visible="visible" style="height: 100%;"> <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-model ref="form" :model="model" :rules="validatorRules"> <a-form-model-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="username"> <a-input placeholder="请输入用户账号" v-model="model.username" :readOnly="!!model.id"/> </a-form-model-item> <template v-if="!model.id"> <a-form-model-item label="登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="password"> <a-input type="password" placeholder="请输入登录密码" v-model="model.password"/> </a-form-model-item> <a-form-model-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="confirmpassword"> <a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登录密码" v-model="model.confirmpassword"/> </a-form-model-item> </template> <a-form-model-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realname"> <a-input placeholder="请输入用户姓名" v-model="model.realname"/> </a-form-model-item> <a-form-model-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workNo"> <a-input placeholder="请输入工号" v-model="model.workNo"/> </a-form-model-item> <a-form-model-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone"> <a-input placeholder="请输入手机号码" v-model="model.phone"/> </a-form-model-item> <!-- <a-form-model-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol"> <j-select-position placeholder="请选择职务" :multiple="false" v-model="model.post"/> </a-form-model-item> --> <a-form-model-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled" prop="selectedRoles"> <j-multi-select-tag :disabled="disableSubmit" v-model="model.selectedRoles" :options="rolesOptions" placeholder="请选择角色"> </j-multi-select-tag> </a-form-model-item> <a-form-model-item label="仓库分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!warehouseDisable" prop="selectedWarehouse"> <j-multi-select-tag :disabled="disableSubmit" v-model="model.selectedWarehouse" :options="warehouseOptions" placeholder="请选择仓库"> </j-multi-select-tag> </a-form-model-item> <a-form-model-item label="库区分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!warehouseDisable" prop="zoneCode"> <j-multi-select-tag :disabled="disableSubmit" v-model="model.zoneCode" :options="zoneOptions" placeholder="请选择库区"> </j-multi-select-tag> </a-form-model-item> <!--部门分配--> <!-- <a-form-model-item label="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled"> <j-select-depart 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="身份" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-radio-group v-model="model.userIdentity" @change="identityChange"> <a-radio :value="1">普通用户</a-radio> <a-radio :value="2">上级</a-radio> </a-radio-group> </a-form-model-item> --> <!-- <a-form-model-item label="负责部门" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="departIdShow==true"> <j-multi-select-tag :disabled="disableSubmit" v-model="model.departIds" :options="nextDepartOptions" placeholder="请选择负责部门"> </j-multi-select-tag> </a-form-model-item> --> <!-- <a-form-model-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol"> <j-image-upload class="avatar-uploader" text="上传" v-model="model.avatar"></j-image-upload> </a-form-model-item> --> <!-- <a-form-model-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-date-picker style="width: 100%" placeholder="请选择生日" v-model="model.birthday" :format="dateFormat" :getCalendarContainer="node => node.parentNode"/> </a-form-model-item> --> <a-form-model-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-select v-model="model.sex" placeholder="请选择性别" :getPopupContainer="(target) => target.parentNode"> <a-select-option :value="1">男</a-select-option> <a-select-option :value="2">女</a-select-option> </a-select> </a-form-model-item> <a-form-model-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email"> <a-input placeholder="请输入邮箱" v-model="model.email"/> </a-form-model-item> <!-- <a-form-model-item label="座机" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="telephone"> <a-input placeholder="请输入座机" v-model="model.telephone"/> </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="确定放弃编辑?" @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 moment from 'moment' import Vue from 'vue' import {ACCESS_TOKEN} from "@/store/mutation-types" import {getAction} from '@/api/manage' import {addUser, editUser, queryUserRole, queryall, queryWarehouse, getAllWarehouseList, getZoneList, getAllZoneList} from '@/api/api' import {disabledAuthFilter} from "@/utils/authFilter" import {duplicateCheck} from '@/api/api' export default { name: "UserModal", components: {}, data() { return { departDisabled: false, //是否是我的部门调用该页面 roleDisabled: false, //是否是角色维护调用该页面 warehouseDisable: false, //是否是角色维护调用该页面 modalWidth: 800, drawerWidth: 700, modaltoggleFlag: true, confirmDirty: false, userId: "", //保存用户id disableSubmit: false, dateFormat: "YYYY-MM-DD", validatorRules: { username: [{required: true, message: '请输入用户账号!'}, {validator: this.validateUsername,}], selectedWarehouse: [ {required: true, message: '请选择仓库!', trigger: "change" , validator: 'click'} ], selectedRoles: [ {required: true, message: '请选择角色!', trigger: "change" , validator: 'click'} ], password: [ {validator: this.validateToNextPassword, trigger: 'change'}], confirmpassword: [{required: true, message: '请重新输入登录密码!',}, {validator: this.compareToFirstPassword,}], realname: [{required: true, message: '请输入用户名称!'}], phone: [{required: true, message: '请输入手机号!'}, {validator: this.validatePhone}], email: [{validator: this.validateEmail}], roles: {}, workNo: [{required: true, message: '请输入工号'}, {validator: this.validateWorkNo}], telephone: [{pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码'},], }, departIdShow: false, title: "操作", 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: [], zoneOptions:[], warehouseOptions: [], rolesOptions: [], nextDepartOptions: [], } }, created() { const token = Vue.ls.get(ACCESS_TOKEN); this.headers = {"X-Access-Token": token} this.initRoleList() this.initWarehouseList() this.initTenantList() this.initZoneList() }, computed: { uploadAction: function () { return this.url.fileUpload; } }, methods: { add() { this.refresh(); this.edit({activitiSync: '1', userIdentity: 1}); }, edit(record) { let that = this; that.visible = true; //根据屏幕宽度自适应抽屉宽度 this.resetScreenSize(); that.userId = record.id; that.model = Object.assign({}, {selectedRoles: '', selectedWarehouse: '',selecteddeparts: '', zoneCode: ''}, record); //身份为上级显示负责部门,否则不显示 if (this.model.userIdentity == 2) { this.departIdShow = true; } else { this.departIdShow = false; } // if (record.hasOwnProperty("id")) { // that.getUserRoles(record.id); // that.getWarehouse(record.id); // that.getUserDeparts(record.id); // } console.log('that.model=', that.model) }, isDisabledAuth(code) { return disabledAuthFilter(code); }, //窗口最大化切换 toggleScreen() { if (this.modaltoggleFlag) { this.modalWidth = window.innerWidth; } else { this.modalWidth = 800; } this.modaltoggleFlag = !this.modaltoggleFlag; }, // 根据屏幕变化,设置抽屉尺寸 resetScreenSize() { let 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, index, arr) => { let c = {label: item.name, value: item.id + ""} return c; }) console.log('this.tenantsOptions: ', this.tenantsOptions) } }) }, //初始化角色字典 initRoleList() { queryall().then((res) => { if (res.success) { this.rolesOptions = res.result.map((item, index, arr) => { let c = {label: item.roleName, value: item.id + ""} return c; }) console.log('this.rolesOptions: ', this.rolesOptions) } }); }, initWarehouseList() { getAllWarehouseList().then((res) => { if (res.success) { this.warehouseOptions = res.result.map((item, index, arr) => { let c = {label: item.name, value: item.code} return c; }) console.log('this.warehouseOptions: ', this.warehouseOptions) } }); }, initZoneList() { getAllZoneList().then((res) => { if (res.success) { this.zoneOptions = res.result.map((item, index, arr) => { let c = {label: item.name, value: item.code} return c; }) console.log('this.zoneOptions: ', this.zoneOptions) } }); }, // getWarehouse(userid) { // queryWarehouse({userid: userid}).then((res) => { // if (res.success) { // this.model.selectedWarehouse = res.result.join(","); // console.log('that.model.selectedWarehouse=', this.model.selectedWarehouse) // } // }); // }, getUserRoles(userid) { queryUserRole({userid: userid}).then((res) => { if (res.success) { this.model.selectedRoles = res.result.join(","); console.log('that.model.selectedRoles=', this.model.selectedRoles) } }); }, getUserDeparts(userid) { let that = this; getAction(that.url.userWithDepart, {userId: userid}).then((res) => { if (res.success) { let departOptions = []; let 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; console.log('that.nextDepartOptions=', that.nextDepartOptions) } }) }, backDepartInfo(info) { this.model.departIds = this.model.selecteddeparts; this.nextDepartOptions = info.map((item, index, arr) => { let c = {label: item.text, value: item.value + ""} return c; }) }, 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; // 触发表单验证 this.$refs.form.validate(valid => { if (valid) { that.confirmLoading = true; //如果是上级择传入departIds,否则为空 if (this.model.userIdentity !== 2) { this.model.departIds = ""; } 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('两次输入的密码不一样!'); } if (value && this.confirmDirty) { this.$refs.form.validateField(['confirmpassword']); } callback(); }, compareToFirstPassword(rule, value, callback) { if (value && value !== this.model.password) { callback('两次输入的密码不一样!'); } else { callback() } }, validatePhone(rule, value, callback) { if (!value) { callback() } else { if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) { var params = { tableName: 'sys_user', fieldName: 'phone', fieldVal: value, dataId: this.userId }; duplicateCheck(params).then((res) => { if (res.success) { callback() } else { callback("手机号已存在!") } }) } else { callback("请输入正确格式的手机号码!"); } } }, 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("邮箱已存在!") } }) } else { callback("请输入正确格式的邮箱!") } } }, 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("用户名已存在!") } }) }, 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("工号已存在!") } }) }, handleConfirmBlur(e) { const value = e.target.value; this.confirmDirty = this.confirmDirty || !!value }, beforeUpload: function (file) { var fileType = file.type; if (fileType.indexOf('image') < 0) { this.$message.warning('请上传图片'); return false; } //TODO 验证文件大小 }, 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: 0; width: 100%; border-top: 1px solid #e8e8e8; padding: 10px 16px; text-align: right; left: 0; background: #fff; border-radius: 0 0 2px 2px; } /*【JTC-502】 添加用户两个滚动条*/ ::v-deep .ant-drawer-body { padding-bottom: 53px; } </style>