提交 e32be3b5 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw

feat: 用户管理弹窗修改

上级 52d31b50
<template>
<el-icon name="back" class="back-button" @click.native="jump" />
</template>
<script>
export default {
name: 'BackButton',
props: {
// eslint-disable-next-line vue/require-default-prop
path: String,
// eslint-disable-next-line vue/require-default-prop
name: String,
// eslint-disable-next-line vue/require-default-prop
to: Object
},
methods: {
jump() {
const { path, name, to } = this
if (path) {
this.$router.push(path)
}
if (name) {
this.$router.push({ name: this.name })
}
if (to) {
this.$router.push(to)
}
}
}
}
</script>
<style lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
.back-button {
cursor: pointer;
margin-right: 10px;
font-weight: 600;
&:active {
transform: scale(0.85);
}
}
</style>
<template>
<div class="content-container">
<div v-if="$slots.header || header" class="content-container__header">
<slot name="header">
<back-button v-if="showBack" :path="backPath" :name="backName" :to="backTo" />
{{ header }}
</slot>
</div>
<div v-if="$slots.toolbar" class="content-container__toolbar">
<slot name="toolbar" />
</div>
<slot />
</div>
</template>
<script>
import BackButton from '@/components/back-button'
export default {
name: 'LayoutContent'
name: 'LayoutContent',
components: { BackButton },
props: {
// eslint-disable-next-line vue/require-default-prop
header: String,
// eslint-disable-next-line vue/require-default-prop
backPath: String,
// eslint-disable-next-line vue/require-default-prop
backName: String,
// eslint-disable-next-line vue/require-default-prop
backTo: Object
},
computed: {
showBack({ backPath, backName, backTo }) {
return backPath || backName || backTo
}
}
}
</script>
<style lang="scss">
@import "~@/styles/variables";
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
.content-container {
transition: 0.3s;
......@@ -23,5 +51,15 @@ export default {
border-radius: 4px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 14%);
box-sizing: border-box;
.content-container__header {
line-height: 60px;
font-size: 18px;
}
.content-container__toolbar {
@include flex-row(space-between, center);
margin-bottom: 10px;
}
}
</style>
@mixin flex-row($justify: flex-start, $align: stretch) {
display: flex;
@if $justify != flex-start {
justify-content: $justify;
display: flex;
@if $justify != flex-start {
justify-content: $justify;
}
@if $align != stretch {
align-items: $align;
}
}
@if $align != stretch {
align-items: $align;
@mixin variant($color, $background-color, $border-color) {
color: $color;
background-color: $background-color;
border-color: $border-color;
}
}
\ No newline at end of file
......@@ -36,4 +36,10 @@
align-items: $align;
}
}
@mixin variant($color, $background-color, $border-color) {
color: $color;
background-color: $background-color;
border-color: $border-color;
}
<template>
<layout-content :header="formType=='add' ? $t('user.create') : $t('user.modify')" back-name="用户管理">
<el-form ref="createUserForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="form.phone" />
</el-form-item>
<el-form-item label="昵称" prop="nickName">
<el-input v-model="form.nickName" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" />
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.gender" style="width: 178px">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="form.enabled" style="width: 140px">
<el-radio :label="1">启用</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="部门" prop="dept">
<treeselect
v-model="form.deptId"
:options="depts"
:load-options="loadDepts"
placeholder="选择部门"
/>
</el-form-item>
<el-form-item label="角色" prop="roleIds">
<el-select
v-model="form.roleIds"
style="width: 100%"
multiple
placeholder="请选择"
@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-item>
<el-button type="primary" @click="save">保存</el-button>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
</layout-content>
</template>
<script>
import LayoutContent from '@/components/business/LayoutContent'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { PHONE_REGEX } from '@/utils/validate'
import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
import { getDeptTree, treeByDeptId } from '@/api/system/dept'
import { allRoles } from '@/api/system/role'
import { addUser, editUser } from '@/api/system/user'
export default {
components: { LayoutContent, Treeselect },
data() {
return {
form: {
roles: [{
id: ''
}]
},
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: 'change' }]
},
defaultForm: { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 1, deptId: null, phone: null, roleIds: [] },
depts: null,
roles: [],
roleDatas: [],
userRoles: [],
formType: 'add'
}
},
created() {
if (this.$router.currentRoute.params && this.$router.currentRoute.params.id) {
const row = this.$router.currentRoute.params
this.edit(row)
} else {
this.create()
}
this.initRoles()
},
methods: {
create() {
this.depts = null
this.formType = 'add'
this.form = Object.assign({}, this.defaultForm)
console.log(this.form)
},
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()
},
initRoles() {
allRoles().then(res => {
this.roles = res.data
})
},
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))
},
reset() {
this.$refs.createUserForm.resetFields()
},
save() {
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.backToList()
})
} else {
return false
}
})
},
backToList() {
this.$router.push({ name: '用户管理' })
}
}
}
</script>
......@@ -13,7 +13,6 @@
<fu-table-button v-permission="['user:add']" icon="el-icon-circle-plus-outline" :label="$t('user.create')" @click="create" />
</template>
<!-- <el-table-column type="selection" fix /> -->
<el-table-column prop="username" label="ID" width="80" />
<el-table-column prop="nickName" :label="$t('commons.name')" width="140" />
<el-table-column prop="gender" label="性别" width="50" />
......@@ -108,7 +107,6 @@
</div>
</el-dialog>
<!--Changing user password in system settings-->
<el-dialog
:close-on-click-modal="false"
:title="$t('member.edit_password')"
......@@ -144,9 +142,7 @@
<script>
import LayoutContent from '@/components/business/LayoutContent'
import ComplexTable from '@/components/business/complex-table'
// import conditionTable from '@/components/business/condition-table'
// import CustomCondition from './CustomCondtion'
// import { GridButton } from '@/components/GridButton'
import { checkPermission } from '@/utils/permission'
import { formatCondition } from '@/utils/index'
import { PHONE_REGEX } from '@/utils/validate'
......@@ -305,23 +301,28 @@ export default {
this.paginationConfig.total = response.data.itemCount
})
},
create() {
this.depts = null
this.formType = 'add'
this.form = Object.assign({}, this.defaultForm)
this.dialogVisible = true
this.$router.push({ name: '用户表单' })
},
// create() {
// this.depts = null
// this.formType = 'add'
// this.form = Object.assign({}, this.defaultForm)
// this.dialogVisible = true
// },
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()
this.$router.push({ name: '用户表单', 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)
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论