toesbieya
6 years ago
parent
90097bfe0e
commit
0e8f4dc504
@ -0,0 +1,190 @@ |
||||
<template> |
||||
<form-dialog :loading="loading" :title="title" :value="value" width="40%" @close="cancel" @open="open"> |
||||
<el-form |
||||
ref="form" |
||||
:model="form" |
||||
:rules="rules" |
||||
label-position="right" |
||||
label-width="100px" |
||||
status-icon |
||||
> |
||||
<el-form-item label="名 称：" prop="name"> |
||||
<el-input v-model="form.name" maxlength="20"/> |
||||
</el-form-item> |
||||
<el-form-item label="状 态：" prop="status"> |
||||
<el-radio-group v-model="form.status"> |
||||
<el-radio :label="1">启用</el-radio> |
||||
<el-radio :label="0">禁用</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item label="数据范围：" prop="scope"> |
||||
<el-select v-model="form.scope"> |
||||
<el-option :value="1" label="全部"/> |
||||
<el-option :value="2" label="本部门"/> |
||||
<el-option :value="3" label="指定部门"/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item v-if="form.scope === 3" label="指定部门："> |
||||
<el-tree |
||||
ref="dept" |
||||
:data="departments" |
||||
:props="{label:'name'}" |
||||
:default-checked-keys="form.departmentId" |
||||
node-key="id" |
||||
show-checkbox |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="权 限："> |
||||
<el-tree |
||||
ref="perm" |
||||
:data="resource" |
||||
:props="{label:'name'}" |
||||
node-key="id" |
||||
show-checkbox |
||||
/> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<template v-slot:footer> |
||||
<el-dropdown placement="top" style="float: left" @command="treeCommand"> |
||||
<el-button plain size="small"> |
||||
权限树操作 |
||||
<i class="el-icon-arrow-up el-icon--right"/> |
||||
</el-button> |
||||
<el-dropdown-menu slot="dropdown"> |
||||
<el-dropdown-item :command="{action:'expand',level:0}">展开全部</el-dropdown-item> |
||||
<el-dropdown-item :command="{action:'collapse',level:0}">收起全部</el-dropdown-item> |
||||
<el-dropdown-item :command="{action:'expand',level:1}">仅展开一级</el-dropdown-item> |
||||
</el-dropdown-menu> |
||||
</el-dropdown> |
||||
<el-button plain size="small" @click="closeDialog">取 消</el-button> |
||||
<el-button size="small" type="primary" @click="confirm">确 定</el-button> |
||||
</template> |
||||
</form-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
import dialogMixin from "@/mixins/dialogMixin" |
||||
import FormDialog from '@/components/FormDialog' |
||||
import {getDepartments} from "@/api/system/department" |
||||
import {addRole, updateRole} from "@/api/system/role" |
||||
import {isEmpty, mergeObj} from '@/utils' |
||||
import {createTreeByWorker, elTreeControl} from '@/utils/tree' |
||||
|
||||
export default { |
||||
name: "EditDialog", |
||||
|
||||
mixins: [dialogMixin], |
||||
|
||||
components: {FormDialog}, |
||||
|
||||
props: { |
||||
value: {type: Boolean, default: false}, |
||||
type: {type: String, default: 'add'}, |
||||
data: {type: Object, default: () => ({})}, |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
loading: false, |
||||
form: { |
||||
id: null, |
||||
name: null, |
||||
status: 1, |
||||
scope: 1, |
||||
departmentId: [], |
||||
resourceId: [] |
||||
}, |
||||
rules: { |
||||
name: [{required: true, message: '角色名称不能为空', trigger: 'change'}], |
||||
status: [{required: true, message: '角色状态不能为空', trigger: 'change'}], |
||||
scope: [{required: true, message: '数据范围不能为空', trigger: 'change'}], |
||||
}, |
||||
departments: [] |
||||
} |
||||
}, |
||||
|
||||
computed: { |
||||
title() { |
||||
if (isEmpty(this.type)) return '' |
||||
switch (this.type) { |
||||
case 'add': |
||||
return '添加角色' |
||||
case 'edit': |
||||
return '编辑角色' |
||||
} |
||||
}, |
||||
|
||||
confirmMessage() { |
||||
switch (this.type) { |
||||
case 'add': |
||||
return `确认添加新的角色【${this.form.name}】?` |
||||
case 'edit': |
||||
return `确认提交对【${this.data.name}】作出的修改？` |
||||
default: |
||||
return '' |
||||
} |
||||
}, |
||||
|
||||
resource() { |
||||
return this.$store.state.resource.tree |
||||
} |
||||
}, |
||||
|
||||
methods: { |
||||
treeCommand({action, level}) { |
||||
elTreeControl(this.$refs.perm, action, level) |
||||
}, |
||||
|
||||
open() { |
||||
if (this.type !== 'edit') return |
||||
this.$nextTick(() => { |
||||
mergeObj(this.form, this.data) |
||||
this.$refs.perm.setCheckedKeys(this.form.resourceId) |
||||
}) |
||||
}, |
||||
|
||||
clearForm() { |
||||
this.form.id = null |
||||
this.form.name = null |
||||
this.form.status = 1 |
||||
this.form.scope = 1 |
||||
this.form.departmentId = [] |
||||
this.form.resourceId = [] |
||||
this.$refs.perm.setCheckedKeys([]) |
||||
this.$refs.dept && this.$refs.dept.setCheckedKeys([]) |
||||
this.$nextTick(() => this.$refs.form.clearValidate()) |
||||
}, |
||||
|
||||
cancel() { |
||||
this.closeDialog() |
||||
this.clearForm() |
||||
}, |
||||
|
||||
confirm() { |
||||
if (this.loading) return |
||||
this.$refs.form.validate(v => { |
||||
if (!v) return |
||||
this.loading = true |
||||
const obj = { |
||||
...this.form, |
||||
departmentId: this.$refs.dept ? this.$refs.dept.getCheckedKeys().join(',') : [], |
||||
resourceId: this.$refs.perm.getCheckedKeys().join(',') |
||||
} |
||||
const promise = this.type === 'add' ? addRole(obj) : updateRole(obj) |
||||
promise |
||||
.then(({msg}) => this.$emit('success', msg)) |
||||
.finally(() => this.loading = false) |
||||
}) |
||||
} |
||||
}, |
||||
|
||||
mounted() { |
||||
getDepartments(false) |
||||
.then(data => createTreeByWorker(data)) |
||||
.then(data => { |
||||
this.departments = data |
||||
}) |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,158 +0,0 @@ |
||||
<template> |
||||
<form-dialog :loading="loading" :title="title" :value="value" @close="cancel" @open="open"> |
||||
<el-form |
||||
ref="form" |
||||
:model="form" |
||||
:rules="rules" |
||||
label-position="right" |
||||
label-width="75px" |
||||
status-icon |
||||
> |
||||
<el-form-item label="名 称：" prop="name"> |
||||
<el-input v-model="form.name" maxlength="20"/> |
||||
</el-form-item> |
||||
<el-form-item label="状 态：" prop="status"> |
||||
<el-radio-group v-model="form.status"> |
||||
<el-radio :label="1">启用</el-radio> |
||||
<el-radio :label="0">禁用</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item label="权 限："> |
||||
<el-tree |
||||
ref="tree" |
||||
:data="resource" |
||||
:expand-on-click-node="false" |
||||
:props="{label:'name'}" |
||||
node-key="id" |
||||
show-checkbox |
||||
/> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<template v-slot:footer> |
||||
<el-dropdown placement="top" style="float: left" @command="treeCommand"> |
||||
<el-button plain size="small"> |
||||
树形操作 |
||||
<i class="el-icon-arrow-up el-icon--right"/> |
||||
</el-button> |
||||
<el-dropdown-menu slot="dropdown"> |
||||
<el-dropdown-item :command="{action:'expand',level:0}">展开全部</el-dropdown-item> |
||||
<el-dropdown-item :command="{action:'collapse',level:0}">收起全部</el-dropdown-item> |
||||
<el-dropdown-item :command="{action:'expand',level:1}">仅展开一级</el-dropdown-item> |
||||
</el-dropdown-menu> |
||||
</el-dropdown> |
||||
<el-button plain size="small" @click="closeDialog">取 消</el-button> |
||||
<el-button size="small" type="primary" @click="confirm">确 定</el-button> |
||||
</template> |
||||
</form-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
import FormDialog from '@/components/FormDialog' |
||||
import dialogMixin from "@/mixins/dialogMixin" |
||||
import {addRole, updateRole} from "@/api/system/role" |
||||
import {isEmpty, mergeObj} from '@/utils' |
||||
import {elTreeControl} from '@/utils/tree' |
||||
|
||||
export default { |
||||
name: "EditDialog", |
||||
|
||||
mixins: [dialogMixin], |
||||
|
||||
components: {FormDialog}, |
||||
|
||||
props: { |
||||
value: {type: Boolean, default: false}, |
||||
type: {type: String, default: 'add'}, |
||||
data: {type: Object, default: () => ({})}, |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
loading: false, |
||||
form: { |
||||
id: null, |
||||
name: null, |
||||
status: 1, |
||||
resource_id: [] |
||||
}, |
||||
rules: { |
||||
name: [{required: true, message: '角色名称不能为空', trigger: 'change'}], |
||||
status: [{required: true, message: '角色状态不能为空', trigger: 'change'}], |
||||
} |
||||
} |
||||
}, |
||||
|
||||
computed: { |
||||
title() { |
||||
if (isEmpty(this.type)) return '' |
||||
switch (this.type) { |
||||
case 'add': |
||||
return '添加角色' |
||||
case 'edit': |
||||
return '编辑角色' |
||||
} |
||||
}, |
||||
|
||||
confirmMessage() { |
||||
switch (this.type) { |
||||
case 'add': |
||||
return `确认添加新的角色【${this.form.name}】?` |
||||
case 'edit': |
||||
return `确认提交对【${this.data.name}】作出的修改？` |
||||
default: |
||||
return '' |
||||
} |
||||
}, |
||||
|
||||
resource() { |
||||
return this.$store.state.resource.tree |
||||
} |
||||
}, |
||||
|
||||
methods: { |
||||
treeCommand({action, level}) { |
||||
elTreeControl(this.$refs.tree, action, level) |
||||
}, |
||||
|
||||
open() { |
||||
this.$nextTick(() => { |
||||
if (this.type === 'edit') { |
||||
mergeObj(this.form, this.data) |
||||
this.$refs.tree.setCheckedKeys(this.form.resource_id) |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
clearForm() { |
||||
this.form.id = null |
||||
this.form.name = null |
||||
this.form.status = 1 |
||||
this.form.resource_id = [] |
||||
this.$refs.tree.setCheckedKeys([]) |
||||
this.$nextTick(() => this.$refs.form.clearValidate()) |
||||
}, |
||||
|
||||
cancel() { |
||||
this.closeDialog() |
||||
this.clearForm() |
||||
}, |
||||
|
||||
confirm() { |
||||
if (this.loading) return |
||||
this.$refs.form.validate(v => { |
||||
if (!v) return |
||||
this.loading = true |
||||
let obj = { |
||||
...this.form, |
||||
resource_id: this.$refs.tree.getCheckedKeys().join(',') |
||||
} |
||||
let promise = this.type === 'add' ? addRole(obj) : updateRole(obj) |
||||
promise |
||||
.then(({msg}) => this.$emit('success', msg)) |
||||
.finally(() => this.loading = false) |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,59 +0,0 @@ |
||||
<script type="text/jsx"> |
||||
import {createTree} from "@/utils/tree" |
||||
|
||||
export default { |
||||
name: "RoleResource", |
||||
|
||||
functional: true, |
||||
|
||||
props: { |
||||
ids: {type: Array, default: () => []}, |
||||
map: {type: Object, default: () => ({})} |
||||
}, |
||||
|
||||
render(h, context) { |
||||
const {ids, map} = context.props |
||||
let tree = [] |
||||
|
||||
for (let id of ids) map[id] && tree.push(map[id]) |
||||
|
||||
tree = createTree(tree) |
||||
|
||||
const nodes = [] |
||||
|
||||
const fun = (arr, left) => { |
||||
for (let r of arr) { |
||||
nodes.push( |
||||
<span style={'margin-left:' + left + 'px'}> |
||||
<svg-icon icon="check"/> |
||||
{r.name} |
||||
</span> |
||||
) |
||||
if (r.children.length > 0) { |
||||
if (r.children[0].children.length > 0) nodes.push(<p/>) |
||||
fun(r.children, left + 20) |
||||
} |
||||
} |
||||
nodes.push(<p/>) |
||||
} |
||||
|
||||
fun(tree, 0) |
||||
|
||||
return nodes |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "~@/assets/styles/variables.scss"; |
||||
|
||||
span { |
||||
.svg-icon { |
||||
color: $--color-primary |
||||
} |
||||
} |
||||
|
||||
span + span { |
||||
margin-left: 10px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,39 @@ |
||||
<template> |
||||
<tree-select :value="value" :data="data" :props="{label:'name'}" popper-append-to-body @input="input"/> |
||||
</template> |
||||
|
||||
<script> |
||||
import TreeSelect from '@/components/TreeSelect' |
||||
import {getDepartments} from "@/api/system/department" |
||||
import {createTreeByWorker} from "@/utils/tree" |
||||
import {isEmpty} from "@/utils" |
||||
|
||||
export default { |
||||
name: "DepartmentSelector", |
||||
|
||||
components: {TreeSelect}, |
||||
|
||||
props: {value: Number}, |
||||
|
||||
data() { |
||||
return { |
||||
data: [] |
||||
} |
||||
}, |
||||
|
||||
methods: { |
||||
input(v, data) { |
||||
this.$emit('input', v) |
||||
this.$emit('get-name', data && data.fullname) |
||||
}, |
||||
}, |
||||
|
||||
mounted() { |
||||
getDepartments(false) |
||||
.then(data => createTreeByWorker(data)) |
||||
.then(data => { |
||||
this.data = data |
||||
}) |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue