main
parent
2ad4ea12de
commit
a7f976ec6a
@ -0,0 +1,444 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer
|
||||
title="设置模块权限"
|
||||
:visible.sync="visible"
|
||||
direction="rtl"
|
||||
size="72%"
|
||||
append-to-body
|
||||
@close="$emit('update:isShow',false)">
|
||||
<div style="padding: 10px;"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)">
|
||||
<el-tabs type="border-card" v-model="activeName">
|
||||
<el-tab-pane label="权限菜单" name="menu">
|
||||
<vxe-toolbar>
|
||||
<template #buttons>
|
||||
<el-button icon="el-icon-plus" type="primary" size="small" @click="isShowAddMenu = true">新增</el-button>
|
||||
<el-button icon="el-icon-search" type="primary" plain size="small" @click="getMenu">搜索</el-button>
|
||||
</template>
|
||||
</vxe-toolbar>
|
||||
<vxe-table
|
||||
style="margin-top: 10px;"
|
||||
ref="menuTable"
|
||||
keep-source
|
||||
:row-config="{ useKey: 'id', isHover: true }"
|
||||
:column-config="{ resizable: true }"
|
||||
:edit-rules="validMenuRules"
|
||||
:edit-config="{ trigger: 'manual', mode: 'row', showStatus: true, autoClear: false }"
|
||||
:tree-config="{ rowField: 'id', parentField: 'pid' }"
|
||||
:data="menus">
|
||||
<vxe-column type="seq" width="58" align="center"></vxe-column>
|
||||
<vxe-column field="name" tree-node width="160" title="菜单" :edit-render="{ name: 'input', attrs: { type: 'text'} }"></vxe-column>
|
||||
<vxe-column field="path" title="路由地址" min-width="140" :edit-render="{ name: 'input', attrs: { type: 'text'} }">
|
||||
<template #default="{ row }">
|
||||
<template v-if="/#/g.test(row.path)">
|
||||
<SvgIcon icon-class="folder" class-name="icon-folder"></SvgIcon>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{ row.path }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="api_profix" min-width="140" title="api前缀" :edit-render="{ name: 'input', attrs: { type: 'text'} }">
|
||||
<template #default="{ row }">
|
||||
<template v-if="/#/g.test(row.api_profix)">
|
||||
<SvgIcon icon-class="folder" class-name="icon-folder"></SvgIcon>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{ row.api_profix }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="visible" width="100" align="center" title="是否显示" :edit-render="{ name: 'select', options: [{ value: 1, label: '显示' },{ value: 0, label: '隐藏' }] }"></vxe-column>
|
||||
<vxe-column field="icon" width="160" align="center" title="图标" :edit-render="{ name: 'input', attrs: { type: 'text'} }">
|
||||
<template #default="{ row }">
|
||||
<Icon :icon="row.icon"></Icon>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="sortnumber" width="80" title="排序" align="center" :edit-render="{ name: 'input', attrs: { type: 'number' } }"></vxe-column>
|
||||
<vxe-column field="operate" title="操作" min-width="240">
|
||||
<template #default="{ row }">
|
||||
<template v-if="isActiveStatus(row,'menuTable')">
|
||||
<el-button size="small" type="primary" @click="saveMenuRowEvent(row)">保存</el-button>
|
||||
<el-button size="small" type="primary" plain @click="cancelRowEvent(row,'menuTable')">取消</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-button size="small" type="success" @click="$refs['ModuleAuthAddMenu'].setPid(row.id),isShowAddMenu = true">子菜单</el-button>
|
||||
<el-button size="small" type="warning" @click="editRowEvent(row,'menuTable')">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="destroyMenuRowEvent(row)">删除</el-button>
|
||||
</template>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" name="role">
|
||||
<vxe-toolbar>
|
||||
<template #buttons>
|
||||
<el-button icon="el-icon-plus" type="primary" size="small" @click="isShowAddRole = true">新增</el-button>
|
||||
<el-button icon="el-icon-search" type="primary" plain size="small" @click="getRole">搜索</el-button>
|
||||
</template>
|
||||
</vxe-toolbar>
|
||||
<vxe-table
|
||||
stripe
|
||||
style="margin-top: 10px;"
|
||||
ref="roleTable"
|
||||
keep-source
|
||||
show-overflow
|
||||
:column-config="{ resizable: true }"
|
||||
:edit-rules="validRoleRules"
|
||||
:edit-config="{ trigger: 'manual', mode: 'row', showStatus: true, isHover: true, autoClear: false }"
|
||||
:data="roles">
|
||||
<vxe-column type="seq" width="58" align="center"></vxe-column>
|
||||
<vxe-column field="name" width="160" title="角色" :edit-render="{ name: 'input', attrs: { type: 'text'} }"></vxe-column>
|
||||
<vxe-column field="permissions" title="权限菜单" show-overflow="tooltip">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<el-tag v-for="item in row.permissions" :key="item.id">{{ item.name }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="sortnumber" width="80" title="排序" align="center" :edit-render="{ name: 'input', attrs: { type: 'number' } }"></vxe-column>
|
||||
<vxe-column field="operate" title="操作" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<template v-if="isActiveStatus(row,'roleTable')">
|
||||
<el-button size="small" type="primary" @click="saveRoleRowEvent(row)">保存</el-button>
|
||||
<el-button size="small" type="primary" plain @click="cancelRowEvent(row,'roleTable')">取消</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-button size="small" type="success" @click="bindPermission(row)">授权</el-button>
|
||||
<el-button size="small" type="warning" @click="editRowEvent(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="destroyRoleRowEvent(row,'roleTable')">删除</el-button>
|
||||
</template>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
|
||||
<p class="total" type="primary">共 {{ roleTotal }} 条数据</p>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="用户授权" name="permission">
|
||||
<vxe-table
|
||||
stripe
|
||||
style="margin-top: 10px;"
|
||||
ref="table"
|
||||
:loading="loading"
|
||||
keep-source
|
||||
show-overflow
|
||||
:column-config="{ resizable: true }"
|
||||
:edit-config="{ trigger: 'manual', mode: 'row', showStatus: true, isHover: true, autoClear: false }"
|
||||
:data="users">
|
||||
<vxe-column type="seq" width="58" align="center"></vxe-column>
|
||||
<vxe-column field="name" width="140" title="姓名" :edit-render="{ name: 'input', attrs: { type: 'text'} }"></vxe-column>
|
||||
<vxe-column field="username" width="160" title="用户名" :edit-render="{ name: 'input', attrs: { type: 'text'} }"></vxe-column>
|
||||
<vxe-column field="module_roles" title="角色" min-width="200" show-overflow="tooltip">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<el-tag v-for="item in row.module_roles" :key="item.id">{{ item.name }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="sortnumber" width="80" title="排序" align="center" :edit-render="{ name: 'input', attrs: { type: 'number' } }"></vxe-column>
|
||||
<vxe-column field="operate" title="操作" min-width="240">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="success" @click="bindRole(row)">绑定角色</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<ModuleAuthAddMenu ref="ModuleAuthAddMenu" :is-show.sync="isShowAddMenu" :list="menus" :module-id="moduleId" @refresh="getMenu"></ModuleAuthAddMenu>
|
||||
<ModuleAuthAddRole ref="ModuleAuthAddRole" :is-show.sync="isShowAddRole" :module-id="moduleId" @refresh="getRole"></ModuleAuthAddRole>
|
||||
<ModuleAuthBindPermissions ref="ModuleAuthBindPermissions" :is-show.sync="isShowBindPermissions" :module-id="moduleId" @refresh="getRole"></ModuleAuthBindPermissions>
|
||||
<ModuleAuthBindRole ref="ModuleAuthBindRole" :is-show.sync="isShowBindRoles" :module-id="moduleId" @refresh="getUsers"></ModuleAuthBindRole>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue'
|
||||
import ModuleAuthAddMenu from './ModuleAuthAddMenu.vue'
|
||||
import ModuleAuthAddRole from './ModuleAuthAddRole.vue'
|
||||
import Icon from "@/layout/components/Navbar/Icon.vue"
|
||||
import ModuleAuthBindPermissions from './ModuleAuthBindPermissions.vue'
|
||||
import ModuleAuthBindRole from './ModuleAuthBindRole.vue'
|
||||
import { menu, menuSave, menuDestroy, role, roleDestroy, roleSave, grant } from '@/api/module'
|
||||
import { deepCopy } from '@/utils'
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
ModuleAuthBindPermissions,
|
||||
ModuleAuthAddMenu,
|
||||
ModuleAuthAddRole,
|
||||
ModuleAuthBindRole,
|
||||
SvgIcon
|
||||
},
|
||||
props: {
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
activeName: "menu",
|
||||
moduleId: "",
|
||||
visible: false,
|
||||
|
||||
isShowAddMenu: false,
|
||||
menus: [],
|
||||
validMenuRules: {
|
||||
name: [
|
||||
{ required: true, message: "请输入名称" }
|
||||
],
|
||||
path: [
|
||||
{ required: true, message: "请输入路由路径" },
|
||||
],
|
||||
api_profix: [
|
||||
{ required: true, message: "请输入api前缀" }
|
||||
]
|
||||
},
|
||||
menuForm: {
|
||||
id: "",
|
||||
module_id: "",
|
||||
pid: "",
|
||||
name: "",
|
||||
url: "",
|
||||
path: "",
|
||||
api_profix: "",
|
||||
icon: "",
|
||||
visible: 1,
|
||||
sortnumber: 0
|
||||
},
|
||||
|
||||
isShowAddRole: false,
|
||||
roles: [],
|
||||
roleTotal: 0,
|
||||
validRoleRules: {
|
||||
name: [
|
||||
{ required: true, message: "请输入角色" }
|
||||
]
|
||||
},
|
||||
roleForm: {
|
||||
id: "",
|
||||
module_id: "",
|
||||
name: "",
|
||||
sortnumber: 0
|
||||
},
|
||||
isShowBindPermissions: false,
|
||||
|
||||
users: [],
|
||||
userTotal: 0,
|
||||
isShowBindRoles: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindPermission(row) {
|
||||
this.$refs['ModuleAuthBindPermissions'].setForm(['permission_id'],[row.permissions?.map(i => i.id)||[]])
|
||||
this.isShowBindPermissions = true
|
||||
},
|
||||
bindRole(row) {
|
||||
this.$refs['ModuleAuthBindRole'].setForm(['id','role_id'],[row.id,row.roles?.map(i => i.id)||[]])
|
||||
this.isShowBindRoles = true;
|
||||
},
|
||||
|
||||
editRowEvent (row,table) {
|
||||
if (this.$refs[table]) {
|
||||
this.$refs[table].setEditRow(row)
|
||||
}
|
||||
},
|
||||
cancelRowEvent (row,table) {
|
||||
if (this.$refs[table]) {
|
||||
this.$refs[table].clearEdit().then(() => {
|
||||
// 还原行数据
|
||||
this.$refs[table].revertData(row)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
setId(id) {
|
||||
this.moduleId = id
|
||||
},
|
||||
|
||||
async getMenu() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const res = await menu({
|
||||
with_root: 1,
|
||||
data_only: 1,
|
||||
module_id: this.moduleId
|
||||
})
|
||||
console.log(res)
|
||||
this.menus = res;
|
||||
this.loading = false;
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async saveMenuRowEvent (row) {
|
||||
try {
|
||||
await this.$confirm("确认保存？","提示",{
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消"
|
||||
})
|
||||
await this.$refs['menuTable'].clearEdit()
|
||||
let form = deepCopy(this.menuForm)
|
||||
for (let key in form) {
|
||||
form[key] = row[key]
|
||||
}
|
||||
this.loading = true;
|
||||
await menuSave(form)
|
||||
await this.getMenu();
|
||||
this.loading = false;
|
||||
} catch (err) {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
async destroyMenuRowEvent (row) {
|
||||
try {
|
||||
await this.$confirm("确认删除？","提示",{
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消"
|
||||
})
|
||||
this.loading = true;
|
||||
if (row.id) {
|
||||
await menuDestroy({
|
||||
id: row.id
|
||||
})
|
||||
await this.getMenu();
|
||||
} else {
|
||||
this.menus.splice(this.menus.findIndex(i => i._X_ROW_KEY === row._X_ROW_KEY),1)
|
||||
}
|
||||
this.loading = false;
|
||||
} catch (err) {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
async getRole() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const res = await role({
|
||||
module_id: this.moduleId
|
||||
})
|
||||
console.log(res)
|
||||
this.roles = res.rows;
|
||||
this.roleTotal = res.total;
|
||||
this.loading = false;
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
async saveRoleRowEvent (row) {
|
||||
try {
|
||||
await this.$confirm("确认保存？","提示",{
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消"
|
||||
})
|
||||
await this.$refs['menuTable'].clearEdit()
|
||||
let form = deepCopy(this.menuForm)
|
||||
for (let key in form) {
|
||||
form[key] = row[key]
|
||||
}
|
||||
this.loading = true;
|
||||
await roleSave(form)
|
||||
await this.getRole();
|
||||
this.loading = false;
|
||||
} catch (err) {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
async destroyRoleRowEvent (row) {
|
||||
try {
|
||||
await this.$confirm("确认删除？","提示",{
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消"
|
||||
})
|
||||
this.loading = true;
|
||||
if (row.id) {
|
||||
await roleDestroy({
|
||||
id: row.id
|
||||
})
|
||||
await this.getRole();
|
||||
} else {
|
||||
this.roles.splice(this.roles.findIndex(i => i._X_ROW_KEY === row._X_ROW_KEY),1)
|
||||
}
|
||||
this.loading = false;
|
||||
} catch (err) {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async getUsers() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const res = await grant()
|
||||
console.log(res)
|
||||
this.users = res.rows;
|
||||
this.userTotal = res.total;
|
||||
this.loading = false;
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isActiveStatus () {
|
||||
return function (row,table) {
|
||||
if (this.$refs[table]) {
|
||||
return this.$refs[table].isEditByRow(row)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isShow(newVal) {
|
||||
this.visible = newVal;
|
||||
this.getMenu()
|
||||
},
|
||||
visible(newVal) {
|
||||
this.$emit('update:isShow', newVal);
|
||||
},
|
||||
activeName: {
|
||||
handler:function(newVal) {
|
||||
switch (newVal){
|
||||
case 'menu':
|
||||
this.getMenu()
|
||||
break;
|
||||
case 'role':
|
||||
this.getRole()
|
||||
break;
|
||||
case 'permission':
|
||||
this.getUsers()
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getRole()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.total {
|
||||
color: #666;
|
||||
text-align: right;
|
||||
line-height: 3;
|
||||
}
|
||||
::v-deep .el-tag + .el-tag {
|
||||
margin-left: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div>
|
||||
<vxe-modal :value="isShow"
|
||||
show-footer
|
||||
:z-index="zIndex"
|
||||
title="权限菜单"
|
||||
show-confirm-button
|
||||
:width="600"
|
||||
:height="600"
|
||||
esc-closable
|
||||
@input="e => $emit('update:isShow',e)">
|
||||
<el-form ref="elForm" :model="form" :rules="rules" label-position="top" label-width="100">
|
||||
<el-form-item label="父级菜单" prop="pid" required>
|
||||
<Treeselect v-model="form.pid"
|
||||
:options="list"
|
||||
noChildrenText="无子菜单"
|
||||
:normalizer="node => ({
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
children: node.children,
|
||||
isDefaultExpanded: true
|
||||
})"></Treeselect>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name" required>
|
||||
<el-input v-model="form.name" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<el-input v-model="form.icon" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="路由路径" prop="path" required>
|
||||
<el-input v-model="form.path" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="api前缀" prop="api_profix" required>
|
||||
<el-input v-model="form.api_profix" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否可见" prop="visible">
|
||||
<el-switch v-model="form.visible" :active-value="1" :inactive-value="0" active-text="显示" inactive-text="隐藏"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sortnumber">
|
||||
<el-input-number controls-position="right" :precision="0" v-model="form.sortnumber"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button type="primary" :loading="loading" @click="submit">确认</el-button>
|
||||
</template>
|
||||
</vxe-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PopupManager } from 'element-ui/lib/utils/popup'
|
||||
import { menuSave } from "@/api/module"
|
||||
export default {
|
||||
props: {
|
||||
moduleId: [String,Number],
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
form: {
|
||||
name: "",
|
||||
pid: 0,
|
||||
icon: "",
|
||||
visible: 1,
|
||||
path: "",
|
||||
api_profix: "",
|
||||
sortnumber: 0
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "请输入名称" }
|
||||
],
|
||||
path: [
|
||||
{ required: true, message: "请输入路由路径" },
|
||||
],
|
||||
api_profix: [
|
||||
{ required: true, message: "请输入api前缀" }
|
||||
]
|
||||
},
|
||||
zIndex: PopupManager.nextZIndex(),
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setPid (pid) {
|
||||
this.form.pid = pid;
|
||||
},
|
||||
|
||||
submit () {
|
||||
this.$refs["elForm"].validate(async valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
try {
|
||||
this.form.module_id = this.moduleId
|
||||
await menuSave(this.form)
|
||||
this.$message.success("新增成功")
|
||||
this.$emit('refresh')
|
||||
this.$emit('update:isShow',false)
|
||||
this.loading = false
|
||||
this.$refs["elForm"].resetFields()
|
||||
} catch (err) {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
isShow(newVal) {
|
||||
if (newVal) {
|
||||
this.zIndex = PopupManager.nextZIndex()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div>
|
||||
<vxe-modal :value="isShow"
|
||||
show-footer
|
||||
title="角色"
|
||||
:z-index="zIndex"
|
||||
show-confirm-button
|
||||
:width="600"
|
||||
:height="400"
|
||||
esc-closable
|
||||
@input="e => $emit('update:isShow',e)">
|
||||
<el-form ref="elForm" :model="form" :rules="rules" label-position="top" label-width="100">
|
||||
<el-form-item label="角色" prop="name" required>
|
||||
<el-input v-model="form.name" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sortnumber">
|
||||
<el-input-number controls-position="right" :precision="0" v-model="form.sortnumber"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button type="primary" :loading="loading" @click="submit">确认</el-button>
|
||||
</template>
|
||||
</vxe-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PopupManager } from 'element-ui/lib/utils/popup'
|
||||
import { roleSave } from "@/api/module"
|
||||
export default {
|
||||
props: {
|
||||
moduleId: [String,Number],
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
zIndex: PopupManager.nextZIndex(),
|
||||
loading: false,
|
||||
form: {
|
||||
name: "",
|
||||
sortnumber: 0
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "请输入角色" }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit () {
|
||||
this.$refs["elForm"].validate(async valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
try {
|
||||
this.form.module_id = this.moduleId;
|
||||
await roleSave(this.form)
|
||||
this.$message.success("新增成功")
|
||||
this.$emit('refresh')
|
||||
this.$emit('update:isShow',false)
|
||||
this.loading = false
|
||||
this.$refs["elForm"].resetFields()
|
||||
} catch (err) {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
isShow(newVal) {
|
||||
if (newVal) {
|
||||
this.zIndex = PopupManager.nextZIndex()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div>
|
||||
<vxe-modal :value="isShow"
|
||||
show-footer
|
||||
:z-index="zIndex"
|
||||
title="绑定权限"
|
||||
show-confirm-button
|
||||
:width="600"
|
||||
:height="600"
|
||||
esc-closable
|
||||
@input="e => $emit('update:isShow',e)">
|
||||
<template>
|
||||
<Treeselect v-model="form.permission_id"
|
||||
:options="tableData"
|
||||
flat
|
||||
always-open
|
||||
multiple
|
||||
clearable
|
||||
noChildrenText="无子菜单"
|
||||
:normalizer="node => ({
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
children: node.children,
|
||||
isDefaultExpanded: true
|
||||
})"></Treeselect>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<el-button type="primary" :loading="loading" @click="submit">确认</el-button>
|
||||
</template>
|
||||
</vxe-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setPermissions, getPermissions } from "@/api/module"
|
||||
import { PopupManager } from 'element-ui/lib/utils/popup'
|
||||
export default {
|
||||
props: {
|
||||
moduleId: [String,Number],
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
zIndex: PopupManager.nextZIndex(),
|
||||
loading: false,
|
||||
|
||||
tableData: [],
|
||||
total: 0,
|
||||
form: {
|
||||
id: "",
|
||||
permission_id: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @param {array[string]} keys
|
||||
* @param {array[all]} values
|
||||
* @returns {void}
|
||||
*/
|
||||
setForm (keys = [],values = []) {
|
||||
keys.forEach((key, index) => {
|
||||
this.form[key] = values[index]
|
||||
})
|
||||
},
|
||||
|
||||
async getPermission () {
|
||||
const res = await getPermissions({
|
||||
module_id: this.moduleId
|
||||
})
|
||||
this.tableData = res;
|
||||
},
|
||||
|
||||
async submit () {
|
||||
this.loading = true;
|
||||
try {
|
||||
this.form.id = this.moduleId
|
||||
await setPermissions(this.form)
|
||||
this.$emit("update:isShow",false)
|
||||
this.$emit("refresh")
|
||||
this.loading = false;
|
||||
} catch (err) {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isShow(newVal) {
|
||||
if (newVal) {
|
||||
this.getPermission()
|
||||
this.zIndex = PopupManager.nextZIndex()
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.getPermission()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.total {
|
||||
color: #666;
|
||||
text-align: right;
|
||||
line-height: 3;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div>
|
||||
<vxe-modal :value="isShow"
|
||||
:z-index="zIndex"
|
||||
show-footer
|
||||
title="绑定角色"
|
||||
show-confirm-button
|
||||
:width="600"
|
||||
:height="600"
|
||||
esc-closable
|
||||
@input="e => $emit('update:isShow',e)">
|
||||
<template>
|
||||
<vxe-table
|
||||
stripe
|
||||
style="margin-top: 10px;"
|
||||
ref="table"
|
||||
keep-source
|
||||
show-overflow
|
||||
:column-config="{ resizable: true }"
|
||||
:checkbox-config="{ trigger: 'row', highlight: true }"
|
||||
:data="tableData">
|
||||
<vxe-column type="checkbox" width="60" fixed="left"></vxe-column>
|
||||
<vxe-column type="seq" width="58" align="center"></vxe-column>
|
||||
<vxe-column field="name" width="160" title="角色"></vxe-column>
|
||||
<vxe-column field="permissions" title="权限菜单" min-width="200" show-overflow="tooltip">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<el-tag v-for="item in row.permissions" :key="item.id">{{ item.name }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="sortnumber" width="80" title="排序" align="center"></vxe-column>
|
||||
</vxe-table>
|
||||
<p class="total" type="primary">共 {{ total }} 条数据</p>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<el-button type="primary" :loading="loading" @click="submit">确认</el-button>
|
||||
</template>
|
||||
</vxe-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setRoles, getRoles } from "@/api/module"
|
||||
import { PopupManager } from 'element-ui/lib/utils/popup'
|
||||
export default {
|
||||
props: {
|
||||
moduleId: [String,Number],
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
zIndex: PopupManager.nextZIndex(),
|
||||
loading: false,
|
||||
|
||||
tableData: [],
|
||||
total: 0,
|
||||
form: {
|
||||
id: "",
|
||||
role_id: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @param {array[string]} keys
|
||||
* @param {array[all]} values
|
||||
* @returns {void}
|
||||
*/
|
||||
setForm (keys = [],values = []) {
|
||||
keys.forEach((key, index) => {
|
||||
this.form[key] = values[index]
|
||||
})
|
||||
},
|
||||
|
||||
setSelectRow () {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs['table']) {
|
||||
this.$refs['table'].clearCheckboxRow()
|
||||
this.$refs['table'].setCheckboxRow(
|
||||
this.tableData.filter(row => this.form.role_id.findIndex(j => j === row.id) !== -1),
|
||||
true
|
||||
)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
async getRoles () {
|
||||
const res = await getRoles({
|
||||
module_id: this.moduleId,
|
||||
data_only: 1
|
||||
})
|
||||
this.tableData = res;
|
||||
this.total = res.length;
|
||||
},
|
||||
|
||||
async submit () {
|
||||
if (this.$refs['table']) {
|
||||
this.loading = true;
|
||||
const selectRecords = this.$refs['table'].getCheckboxRecords()
|
||||
try {
|
||||
setRoles({
|
||||
id: this.form.id,
|
||||
module_id: this.moduleId,
|
||||
role_id: selectRecords.map(row => row.id)
|
||||
})
|
||||
//接口中角色信息有延迟
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.$emit("update:isShow",false)
|
||||
this.$emit("refresh")
|
||||
},500)
|
||||
} catch (err) {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
"form.role_id": function(val, oldVal) {
|
||||
this.setSelectRow()
|
||||
},
|
||||
isShow(newVal) {
|
||||
if (newVal) {
|
||||
this.getRoles()
|
||||
this.zIndex = PopupManager.nextZIndex()
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.total {
|
||||
color: #666;
|
||||
text-align: right;
|
||||
line-height: 3;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue