123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633 |
- <template>
- <a-drawer
- :title="title"
- :maskClosable="true"
- :width="drawerWidth"
- placement="right"
- :closable="true"
- @close="handleCancel"
- :visible="visible"
- >
- <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">
- <!-- :readOnly="!!model.id" -->
- <a-input placeholder="请输入用户账号" v-decorator="['username', validatorRules.username]" :disabled="disableSubmit"/>
- </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]" :disabled="disableSubmit"/>
- </a-form-item>
- <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <a-input
- type="password"
- @blur="handleConfirmBlur"
- placeholder="请重新输入登陆密码"
- v-decorator="['confirmpassword', validatorRules.confirmpassword]"
- :disabled="disableSubmit"
- />
- </a-form-item>
- </template>
- <a-form-item label="用户名字" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <a-input placeholder="请输入用户名称" v-decorator="['realname', validatorRules.realname]" :disabled="disableSubmit"/>
- </a-form-item>
- <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <a-input placeholder="请输入邮箱" v-decorator="['email', validatorRules.email]" :disabled="disableSubmit"/>
- </a-form-item>
- <a-form-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled">
- <a-select style="width: 100%" placeholder="请选择用户角色" v-model="selectedRole" :disabled="disableSubmit">
- <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="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">
- <a-input placeholder="点击右侧按钮选择部门" v-model="checkedDepartNameString" disabled @search="onSearch">
- <span slot="addonAfter" icon="search" @click="onSearch" style="cursor: pointer">选择</span>
- </a-input>
- </a-form-item>
- <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"
- :disabled="disableSubmit"
- >
- <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-select
- :disabled="disableSubmit"
- showSearch
- :filterOption="filterOption"
- style="width: 100%"
- placeholder="请选择汇报上级"
- v-decorator="['leader', { rules: [{ required: true, message: '汇报上级必选' }] }]"
- labelInValue
- >
- <a-select-option v-for="(people, peopleindex) in peopleList" :key="peopleindex" :value="people.key">
- {{ people.label }}
- </a-select-option>
- </a-select>
- </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="请选择性别" :disabled="disableSubmit">
- <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="请输入手机号码"
- :disabled="disableSubmit"
- v-decorator="['phone', validatorRules.phone]"
- />
- </a-form-item>
- <a-form-item label="工作流引擎" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <j-dict-select-tag
- :disabled="disableSubmit"
- 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: 0.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 } from '@/api/manage'
- import { addUser, editUser, queryUserRole, queryall } from '@/api/api'
- import { disabledAuthFilter } from '@/utils/authFilter'
- import { duplicateCheck } from '@/api/api'
- export default {
- name: 'RoleModal',
- components: {
- departWindow,
- },
- data() {
- return {
- departDisabled: false, //是否是我的部门调用该页面
- roleDisabled: false, //是否是角色维护调用该页面
- 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,
- pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
- message: '密码由8位数字、大小写字母和特殊符号组成!',
- },
- {
- validator: this.validateToNextPassword,
- },
- ],
- },
- confirmpassword: {
- rules: [
- {
- required: true,
- message: '请重新输入登陆密码!',
- },
- {
- validator: this.compareToFirstPassword,
- },
- ],
- },
- realname: { rules: [{ required: true, message: '请输入用户名称!' }] },
- phone: { rules: [{ validator: this.validatePhone }] },
- email: {
- rules: [
- {
- required: true,
- validator: this.validateEmail,
- },
- ],
- },
- roles: {},
- // sex:{initialValue:((!this.model.sex)?"": (this.model.sex+""))}
- },
- title: '操作',
- visible: false,
- model: {},
- roleList: [],
- peopleList: [],
- 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',
- 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: {
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- isDisabledAuth(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)
- }
- })
- },
- getAllPeople() {
- this.getAction('/sys/user/getAllUser',{status:1}).then((res) => {
- if (res.success) {
- console.log(res)
- this.peopleList = res.result.map((item) => {
- return { key: item.userId, label: item.realName }
- })
- }
- })
- },
- loadUserRoles(userid) {
- queryUserRole({ userid: userid }).then((res) => {
- if (res.success) {
- console.log(res.result)
- this.selectedRole = res.result[0]
- } else {
- console.log(res.message)
- }
- })
- },
- refresh() {
- this.selectedDepartKeys = []
- this.checkedDepartKeys = []
- this.checkedDepartNames = []
- this.checkedDepartNameString = ''
- this.userId = ''
- },
- add() {
- this.disableSubmit = false
- this.selectedRole = ''
- this.userDepartModel = { userId: '', departIdList: [] }
- this.checkedDepartNames = []
- this.checkedDepartNameString = ''
- this.checkedDepartKeys = []
- this.selectedDepartKeys = []
- this.picUrl = ''
- this.refresh()
- this.edit({ activitiSync: '1' })
- },
- edit(record) {
- this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
- let that = this
- console.log(record)
- that.initialRoleList()
- that.getAllPeople()
- // that.checkedDepartNameString = "";
- that.form.resetFields()
- if (record.hasOwnProperty('id')) {
- that.loadUserRoles(record.id)
- this.picUrl = 'Has no pic url yet'
- }
- if (record.leaderId) {
- record.leader = {key:record.leaderId,label:record.leaderName}
- }else{
- record.leader = undefined
- }
- 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','leader'))
- })
- // 调用查询用户对应的部门信息的方法
- that.checkedDepartKeys = []
- that.loadCheckedDeparts()
- },
- //
- loadCheckedDeparts() {
- let that = this
- if (!that.userId) {
- return
- }
- 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)
- }
- 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 = []
- },
- moment,
- handleSubmit() {
- const that = this
- that.confirmLoading = true
- // 触发表单验证
- this.form.validateFields((err, values) => {
- if (!err) {
- console.log(this.model, 'this.model-this.model');
- console.log(values, 'values-values');
- 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 ? this.selectedRole : ''
- formData.roleName = this.selectedRole ? this.roleList.filter(item => item.id === this.selectedRole)[0].roleName : '';
- formData.departName = this.checkedDepartNameString;
- formData.selecteddeparts =
- this.userDepartModel.departIdList.length > 0 ? this.userDepartModel.departIdList.join(',') : ''
- formData.leaderId = values.leader.key
- formData.leaderName = values.leader.label.replace(/[\r\n]/g, "");
- // that.addDepartsToUser(that,formData); // 调用根据当前用户添加部门信息的方法
- let obj
- if (!this.model.id) {
- formData.id = this.userId
- obj = addUser(formData)
- } else {
- obj = editUser(formData)
- }
- console.log(formData)
- obj
- .then((res) => {
- if (res.success) {
- that.$message.success(res.message)
- that.$emit('ok')
- // that.close()
- that.visible = false
- that.confirmLoading = false
- } else {
- that.$message.warning(res.message)
- }
- })
- .finally(() => {
-
-
-
- })
- }else{
- that.confirmLoading = false
- }
- })
- },
- handleCancel() {
- this.close()
- },
- 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) {
- callback()
- } else {
- if (new RegExp(/^1[3|4|5|7|8][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(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/).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('用户名已存在!')
- }
- })
- },
- 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(value) {
- this.$refs.departWindow.add(this.checkedDepartKeys, this.userId)
- },
- // 获取用户对应部门弹出框提交给返回的数据
- modalFormOk(formData) {
- console.log(formData)
- this.checkedDepartNames = []
- this.selectedDepartKeys = []
- this.checkedDepartNameString = ''
- 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
- this.checkedDepartKeys = this.selectedDepartKeys //更新当前的选择keys
- },
- // 根据屏幕变化,设置抽屉尺寸
- resetScreenSize() {
- let screenWidth = document.body.clientWidth
- if (screenWidth < 500) {
- this.drawerWidth = screenWidth
- } else {
- this.drawerWidth = 700
- }
- },
- getData(className) {
- return this.form.getFieldValue(className)
- },
- },
- }
- </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>
|