<template>
|
<a-modal centered width="35%" v-model="visibleShow" :title="isAddTitile" @cancel="cancelClick" @ok="onsubmit">
|
<a-form-model :model="queryForm" ref="ruleForm" :rules="rules">
|
<a-form-model-item prop="username" label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input placeholder="请输入用户账号" v-model="queryForm.username" allowClear/>
|
</a-form-model-item>
|
<a-form-model-item label="用户名" prop="realname" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input placeholder="请输入用户名" v-model="queryForm.realname" allowClear/>
|
</a-form-model-item>
|
<a-form-model-item label="角色分配" prop="selectedroles" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-select
|
style="width: 100%"
|
placeholder="请选择用户角色"
|
optionFilterProp="children"
|
v-model="queryForm.selectedroles"
|
: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-model-item>
|
<!--部门分配-->
|
<a-form-model-item label="部门分配" prop="orgCode" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-tree-select
|
allow-clear
|
show-search
|
treeNodeFilterProp="title"
|
style="width: 100%"
|
v-model="queryForm.orgCode"
|
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
|
:treeData="departTree"
|
treeDefaultExpandAll
|
placeholder="请选择机构"
|
@select="onTreeNodeSelect"
|
>
|
</a-tree-select>
|
</a-form-model-item>
|
</a-form-model>
|
</a-modal>
|
</template>
|
|
<script>
|
// 引入搜索部门弹出框的组件
|
import {queryDepartTreeList} from '@tievd/cube-block/lib/api/api'
|
import {validateTxtSpec} from "@/utils/util";
|
|
export default {
|
name: 'UserModal',
|
components: {},
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
roleList: {
|
type: Array,
|
default: [],
|
},
|
queryForm: {
|
type: Object,
|
default: {
|
title: '',
|
},
|
},
|
},
|
watch: {
|
visible(val) {
|
this.visibleShow = val
|
},
|
},
|
computed: {
|
isAddTitile() {
|
return this.queryForm.id ? '修改用户' : '新增用户'
|
},
|
},
|
data() {
|
return {
|
visibleShow: false,
|
model: {},
|
selectedRole: [],
|
labelCol: {
|
xs: {span: 24},
|
sm: {span: 5},
|
},
|
wrapperCol: {
|
xs: {span: 24},
|
sm: {span: 16},
|
},
|
rules: {
|
username: [
|
{required: true, message: '请输入用户账号'},
|
{required: true, validator: validateTxtSpec},
|
{min: 1, max: 100, message: '用户账号需在1到100个字符之间'}
|
],
|
realname: [
|
{required: true, message: '请输入用户名'},
|
{required: true, validator: validateTxtSpec},
|
{min: 1, max: 100, message: '用户名需在1到100个字符之间'}
|
],
|
orgCode: [
|
{required: true, message: '请选择部门', trigger: 'change'}
|
],
|
selectedroles: [
|
{required: true, message: '请选择角色', trigger: 'change'}
|
]
|
},
|
departTree: [],
|
allTree: [],
|
}
|
},
|
created() {
|
this.loadTreeData()
|
},
|
methods: {
|
validateTxtSpec,
|
loadTreeData() {
|
queryDepartTreeList().then((res) => {
|
if (res.success) {
|
this.departTree = []
|
for (let i = 0; i < res.result.length; i++) {
|
let temp = res.result[i]
|
this.cleanData(temp)
|
this.departTree.push(temp)
|
}
|
}
|
})
|
},
|
|
cleanData(e) {
|
e.key = e.id
|
e.value = e.orgCode
|
if (e.children != null) {
|
for (let i = 0; i < e.children.length; i++) {
|
this.cleanData(e.children[i])
|
}
|
}
|
},
|
onTreeNodeSelect(val, e) {
|
const {title, orgCode, id} = e.$options.propsData.dataRef
|
this.queryForm.title = title
|
this.queryForm.orgCode = orgCode
|
this.queryForm.selecteddeparts = id
|
this.queryForm.departIds = id
|
console.log(this.queryForm)
|
},
|
// 提交表单
|
onsubmit() {
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
let formObj = JSON.parse(JSON.stringify(this.queryForm))
|
this.$emit('modalClose', formObj)
|
} else {
|
this.$message.error('请完善信息!')
|
return false
|
}
|
})
|
},
|
// 点击关闭或者是遮罩发射关闭信号给父组件，控制关闭
|
cancelClick() {
|
this.$emit('modalClose')
|
this.$refs.ruleForm.resetFields()
|
this.uploadedFileList = []
|
},
|
// 搜索用户对应的部门API
|
onSearch() {
|
this.$refs.departWindow.add(this.queryForm)
|
}
|
},
|
}
|
</script>
|
<!-- @import '~@assets/less/dialog.less'; -->
|
<style lang="less" 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;
|
}
|
</style>
|
