forked from github/dataease
479 lines
16 KiB
Vue
479 lines
16 KiB
Vue
<template>
|
|
<layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
|
<complex-table
|
|
:data="data"
|
|
:columns="columns"
|
|
|
|
:search-config="searchConfig"
|
|
:pagination-config="paginationConfig"
|
|
@select="select"
|
|
@search="search"
|
|
>
|
|
<template #toolbar>
|
|
<el-button v-permission="['user:add']" icon="el-icon-circle-plus-outline" @click="create">{{ $t('user.create') }}</el-button>
|
|
<!-- <fu-table-button v-permission="['user:add']" icon="el-icon-circle-plus-outline" :label="$t('user.create')" @click="create" /> -->
|
|
</template>
|
|
|
|
<el-table-column prop="username" label="ID" />
|
|
<el-table-column prop="nickName" :label="$t('commons.nick_name')" />
|
|
<el-table-column prop="gender" :label="$t('commons.gender')" />
|
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="phone" :label="$t('commons.phone')" />
|
|
<el-table-column :show-overflow-tooltip="true" prop="email" :label="$t('commons.email')" />
|
|
<el-table-column :show-overflow-tooltip="true" prop="dept" :label="$t('commons.organization')">
|
|
<template slot-scope="scope">
|
|
<div>{{ scope.row.dept && scope.row.dept.deptName }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="roles" :label="$t('commons.role')">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.roles && scope.row.roles.length <= 2">
|
|
<div v-for="role in scope.row.roles" :key="role.roleId">{{ role.roleName }}</div>
|
|
</div>
|
|
<div v-if="scope.row.roles && scope.row.roles.length > 2">
|
|
<el-tooltip placement="top">
|
|
<div slot="content">
|
|
<div v-for="role in scope.row.roles" :key="role.roleId">{{ role.roleName }}</div>
|
|
</div>
|
|
<div>
|
|
<div v-for="(role,index) in scope.row.roles" v-if="index < 2" :key="role.roleId">{{ role.roleName }}</div>
|
|
<div>...</div>
|
|
</div>
|
|
</el-tooltip>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" :label="$t('commons.status')">
|
|
<template v-slot:default="scope">
|
|
<el-switch v-model="scope.row.enabled" :active-value="1" :inactive-value="0" inactive-color="#DCDFE6" @change="changeSwitch(scope.row)" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" :label="$t('commons.create_time')">
|
|
<template v-slot:default="scope">
|
|
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix />
|
|
</complex-table>
|
|
|
|
<el-dialog
|
|
append-to-body
|
|
:close-on-click-modal="false"
|
|
:title="formType=='add' ? $t('user.create') : $t('user.modify')"
|
|
:visible.sync="dialogVisible"
|
|
width="570px"
|
|
:destroy-on-close="true"
|
|
@closed="handleClose"
|
|
>
|
|
<el-form ref="createUserForm" :inline="true" :model="form" :rules="rule" size="small" label-width="66px">
|
|
|
|
<el-form-item :label="$t('commons.name')" prop="username">
|
|
<el-input v-model="form.username" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('commons.phone')" prop="phone">
|
|
<el-input v-model="form.phone" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('commons.nick_name')" prop="nickName">
|
|
<el-input v-model="form.nickName" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('commons.email')" prop="email">
|
|
<el-input v-model="form.email" />
|
|
</el-form-item>
|
|
|
|
<el-form-item :label="$t('commons.gender')">
|
|
<el-radio-group v-model="form.gender" style="width: 178px">
|
|
<el-radio :label="$t('commons.man')">{{ $t('commons.man') }}</el-radio>
|
|
<el-radio :label="$t('commons.woman')">{{ $t('commons.woman') }}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('commons.status')">
|
|
<el-radio-group v-model="form.enabled" style="width: 140px">
|
|
<el-radio :label="1">{{ $t('commons.enable') }} </el-radio>
|
|
<el-radio :label="0"> {{ $t('commons.disable') }} </el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('commons.organization')" prop="dept">
|
|
<treeselect
|
|
v-model="form.deptId"
|
|
:options="depts"
|
|
:load-options="loadDepts"
|
|
style="width: 430px"
|
|
:placeholder="$t('user.choose_org')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item style="margin-bottom: 0;" :label="$t('commons.role')" prop="roleIds">
|
|
<el-select
|
|
v-model="form.roleIds"
|
|
style="width: 430px"
|
|
multiple
|
|
required="true"
|
|
:placeholder="$t('commons.please_select')"
|
|
@remove-tag="deleteTag"
|
|
@change="changeRole"
|
|
>
|
|
<el-option
|
|
v-for="item in roles"
|
|
:key="item.name"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
|
|
<el-button type="primary" @click="createUser('createUserForm')">{{ $t('commons.confirm') }}</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
:title="$t('member.edit_password')"
|
|
:visible.sync="editPasswordVisible"
|
|
width="30%"
|
|
:destroy-on-close="true"
|
|
left
|
|
@close="handleClose"
|
|
>
|
|
<el-form
|
|
ref="editPasswordForm"
|
|
:model="ruleForm"
|
|
label-position="right"
|
|
label-width="120px"
|
|
:rules="rule"
|
|
class="demo-ruleForm"
|
|
>
|
|
<el-form-item :label="$t('member.new_password')" prop="newPassword">
|
|
<el-input v-model="ruleForm.newPassword" type="password" autocomplete="off" show-password />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-input v-model="ruleForm.userId" autocomplete="off" :disabled="true" style="display:none" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="text" @click="editPasswordVisible = false">{{ $t('commons.cancel') }}</el-button>
|
|
<el-button type="primary" @click="editUserPassword('editPasswordForm')">{{ $t('commons.confirm') }}</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</layout-content>
|
|
</template>
|
|
|
|
<script>
|
|
import LayoutContent from '@/components/business/LayoutContent'
|
|
import ComplexTable from '@/components/business/complex-table'
|
|
|
|
// import { checkPermission } from '@/utils/permission'
|
|
import { formatCondition, formatQuickCondition } from '@/utils/index'
|
|
import { PHONE_REGEX } from '@/utils/validate'
|
|
import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
|
|
import Treeselect from '@riophae/vue-treeselect'
|
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
|
|
import { userLists, addUser, editUser, delUser, editPassword, editStatus } from '@/api/system/user'
|
|
import { allRoles } from '@/api/system/role'
|
|
import { getDeptTree, treeByDeptId } from '@/api/system/dept'
|
|
|
|
export default {
|
|
|
|
components: { ComplexTable, LayoutContent, Treeselect },
|
|
data() {
|
|
return {
|
|
header: '',
|
|
columns: [],
|
|
buttons: [
|
|
{
|
|
label: this.$t('commons.edit'), icon: 'el-icon-edit', type: 'primary', click: this.edit,
|
|
show: this.checkPermission(['user:edit'])
|
|
}, {
|
|
label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.del,
|
|
show: this.checkPermission(['user:del'])
|
|
}, {
|
|
label: this.$t('member.edit_password'), icon: 'el-icon-s-tools', type: 'success', click: this.editPassword,
|
|
show: this.checkPermission(['user:editPwd'])
|
|
}
|
|
],
|
|
searchConfig: {
|
|
useQuickSearch: true,
|
|
useComplexSearch: true,
|
|
quickPlaceholder: '按名称搜索',
|
|
components: [
|
|
{ field: 'nick_name', label: '姓名', component: 'FuComplexInput' },
|
|
{
|
|
field: 'u.enabled',
|
|
label: '状态',
|
|
component: 'FuComplexSelect',
|
|
options: [
|
|
{ label: '启用', value: '1' },
|
|
{ label: '禁用', value: '0' }
|
|
],
|
|
multiple: false
|
|
}
|
|
// { field: 'deptId', label: '组织', component: conditionTable }
|
|
]
|
|
},
|
|
paginationConfig: {
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 0
|
|
},
|
|
data: [],
|
|
|
|
dialogVisible: false,
|
|
editPasswordVisible: false,
|
|
form: {
|
|
roles: [{
|
|
id: ''
|
|
}]
|
|
},
|
|
checkPasswordForm: {},
|
|
ruleForm: {},
|
|
rule: {
|
|
username: [
|
|
{ required: true, message: this.$t('user.input_id'), trigger: 'blur' },
|
|
{ min: 1, max: 50, message: this.$t('commons.input_limit', [1, 50]), trigger: 'blur' },
|
|
{
|
|
required: true,
|
|
pattern: '^[^\u4e00-\u9fa5]+$',
|
|
message: this.$t('user.special_characters_are_not_supported'),
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
nickName: [
|
|
{ required: true, message: this.$t('user.input_name'), trigger: 'blur' },
|
|
{ min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur' },
|
|
{
|
|
required: true,
|
|
message: this.$t('user.special_characters_are_not_supported'),
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
phone: [
|
|
{
|
|
pattern: PHONE_REGEX,
|
|
message: this.$t('user.mobile_number_format_is_incorrect'),
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
email: [
|
|
{ required: true, message: this.$t('user.input_email'), trigger: 'blur' },
|
|
{
|
|
required: true,
|
|
pattern: /^[a-zA-Z0-9_._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
|
|
message: this.$t('user.email_format_is_incorrect'),
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
password: [
|
|
{ required: true, message: this.$t('user.input_password'), trigger: 'blur' },
|
|
{
|
|
required: true,
|
|
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
|
|
message: this.$t('member.password_format_is_incorrect'),
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
newPassword: [
|
|
{ required: true, message: this.$t('user.input_password'), trigger: 'blur' },
|
|
{
|
|
required: true,
|
|
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
|
|
message: this.$t('member.password_format_is_incorrect'),
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
roleIds: [{ required: true, message: this.$t('user.input_roles'), trigger: 'blur' }]
|
|
|
|
},
|
|
defaultForm: { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 1, deptId: null, phone: null },
|
|
depts: null,
|
|
roles: [],
|
|
roleDatas: [],
|
|
userRoles: [],
|
|
formType: 'add',
|
|
permission: {
|
|
add: ['user:add'],
|
|
edit: ['user:edit'],
|
|
del: ['user:del'],
|
|
editPwd: ['user:editPwd']
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// this.form = Object.assign({}, this.defaultForm);
|
|
this.allRoles()
|
|
this.search()
|
|
},
|
|
|
|
methods: {
|
|
select(selection) {
|
|
},
|
|
|
|
search(condition) {
|
|
condition = formatQuickCondition(condition, 'username')
|
|
const temp = formatCondition(condition)
|
|
const param = temp || {}
|
|
const { currentPage, pageSize } = this.paginationConfig
|
|
userLists(currentPage, pageSize, param).then(response => {
|
|
this.data = response.data.listObject
|
|
this.paginationConfig.total = response.data.itemCount
|
|
})
|
|
},
|
|
create() {
|
|
this.$router.push({ name: 'system-user-form' })
|
|
},
|
|
// create() {
|
|
// this.depts = null
|
|
// this.formType = 'add'
|
|
// this.form = Object.assign({}, this.defaultForm)
|
|
// this.dialogVisible = true
|
|
// },
|
|
edit(row) {
|
|
this.$router.push({ name: 'system-user-form', params: row })
|
|
},
|
|
// edit(row) {
|
|
// this.depts = null
|
|
// this.formType = 'modify'
|
|
// this.dialogVisible = true
|
|
// this.form = Object.assign({}, row)
|
|
// if (this.form.deptId === 0) {
|
|
// this.form.deptId = null
|
|
// }
|
|
// this.initDeptTree()
|
|
// },
|
|
editPassword(row) {
|
|
this.editPasswordVisible = true
|
|
const tempForm = Object.assign({}, row)
|
|
this.ruleForm = { userId: tempForm.userId }
|
|
},
|
|
del(row) {
|
|
this.$confirm(this.$t('user.delete_confirm'), '', {
|
|
confirmButtonText: this.$t('commons.confirm'),
|
|
cancelButtonText: this.$t('commons.cancel'),
|
|
type: 'warning'
|
|
}).then(() => {
|
|
delUser(encodeURIComponent(row.userId)).then(res => {
|
|
this.$success(this.$t('commons.delete_success'))
|
|
this.search()
|
|
})
|
|
}).catch(() => {
|
|
this.$info(this.$t('commons.delete_cancel'))
|
|
})
|
|
},
|
|
createUser(createUserForm) {
|
|
this.$refs[createUserForm].validate(valid => {
|
|
if (valid) {
|
|
const method = this.formType === 'add' ? addUser : editUser
|
|
method(this.form).then(res => {
|
|
this.$success(this.$t('commons.save_success'))
|
|
this.search()
|
|
this.dialogVisible = false
|
|
})
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
|
|
editUserPassword(editPasswordForm) {
|
|
this.$refs[editPasswordForm].validate(valid => {
|
|
if (valid) {
|
|
editPassword(this.ruleForm).then(res => {
|
|
this.$success(this.$t('commons.modify_success'))
|
|
this.editPasswordVisible = false
|
|
this.search()
|
|
window.location.reload()
|
|
})
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
handleClose() {
|
|
this.depts = null
|
|
this.formType = 'add'
|
|
this.form = {}
|
|
this.editPasswordVisible = false
|
|
this.dialogVisible = false
|
|
},
|
|
changeSwitch(row) {
|
|
const { userId, enabled } = row
|
|
const param = { userId: userId, enabled: enabled }
|
|
editStatus(param).then(res => {
|
|
this.$success(this.$t('commons.modify_success'))
|
|
})
|
|
},
|
|
|
|
initDeptTree() {
|
|
treeByDeptId(this.form.deptId || 0).then(res => {
|
|
const results = res.data.map(node => {
|
|
if (node.hasChildren && !node.children) {
|
|
node.children = null
|
|
}
|
|
return node
|
|
})
|
|
this.depts = results
|
|
})
|
|
},
|
|
// 获取弹窗内部门数据
|
|
loadDepts({ action, parentNode, callback }) {
|
|
if (action === LOAD_ROOT_OPTIONS && !this.form.deptId) {
|
|
const _self = this
|
|
treeByDeptId(0).then(res => {
|
|
const results = res.data.map(node => {
|
|
if (node.hasChildren && !node.children) {
|
|
node.children = null
|
|
}
|
|
return node
|
|
})
|
|
_self.depts = results
|
|
callback()
|
|
})
|
|
}
|
|
|
|
if (action === LOAD_CHILDREN_OPTIONS) {
|
|
const _self = this
|
|
getDeptTree(parentNode.id).then(res => {
|
|
parentNode.children = res.data.map(function(obj) {
|
|
return _self.normalizer(obj)
|
|
})
|
|
callback()
|
|
})
|
|
}
|
|
},
|
|
normalizer(node) {
|
|
if (node.hasChildren) {
|
|
node.children = null
|
|
}
|
|
return {
|
|
id: node.deptId,
|
|
label: node.name,
|
|
children: node.children
|
|
}
|
|
},
|
|
deleteTag(value) {
|
|
this.userRoles.forEach(function(data, index) {
|
|
if (data.id === value) {
|
|
this.userRoles.splice(index, value)
|
|
}
|
|
}.bind(this))
|
|
},
|
|
changeRole(value) {
|
|
this.userRoles = []
|
|
value.forEach(function(data, index) {
|
|
const role = { id: data }
|
|
this.userRoles.push(role)
|
|
}.bind(this))
|
|
},
|
|
allRoles() {
|
|
allRoles().then(res => {
|
|
this.roles = res.data
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|