update: 角色管理
This commit is contained in:
easy
parent
890d2b091b
commit
9ae2c6981a
|
|
@ -1,3 +1,16 @@
|
|||
import server from '@/utils/request';
|
||||
|
||||
// 获取角色列表
|
||||
export const getRoleList_api = (data: any): Promise<any> => server.post(`/role/_query/`, data);
|
||||
// 删除角色
|
||||
export const delRole_api = (id: string): Promise<any> => server.remove(`/role/${id}`);
|
||||
// 保存角色
|
||||
export const saveRole_api = (data: any): Promise<any> => server.post(`/role`, data);
|
||||
// 获取角色对应的权限树
|
||||
export const getPrimissTree_api = (id: string): Promise<any> => server.get(`/menu/role/${id}/_grant/tree`);
|
||||
|
||||
|
||||
// 获取用户列表
|
||||
export const getUserByRole_api = (data: any): Promise<any> => server.post(`/user/_query/`, data);
|
||||
// 将用户与该角色进行绑定
|
||||
export const bindUser_api = (roleId:string, data: string[]): Promise<any> => server.post(`/role/${roleId}/users/_bind`, data);
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<a-table rowKey="id" :rowSelection="rowSelection" :columns="[..._columns]" :dataSource="_dataSource" :pagination="false" :scroll="{ x: 1366 }">
|
||||
<a-table rowKey="id" :rowSelection="rowSelection" :columns="[..._columns]" :dataSource="_dataSource" :pagination="false">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- <template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
|
|
|
|||
|
|
@ -105,6 +105,10 @@ export default [
|
|||
path:'/system/Role',
|
||||
component: ()=>import('@/views/system/Role/index.vue')
|
||||
},
|
||||
{
|
||||
path:'/system/Role/detail/:id',
|
||||
component: ()=>import('@/views/system/Role/Detail/index.vue')
|
||||
},
|
||||
// 初始化
|
||||
{
|
||||
path: '/init-home',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div class="role-permiss-container">
|
||||
<a-card>
|
||||
<h5>基本信息</h5>
|
||||
<a-form ref="formRef" :model="form.data" layout="vertical">
|
||||
<a-form-item
|
||||
name="name"
|
||||
label="名称"
|
||||
:rules="[{ required: true, message: '请输入名称' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="form.data.name"
|
||||
placeholder="请输入角色名称"
|
||||
allow-clear
|
||||
:maxlength="64"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="name" label="说明">
|
||||
<a-textarea
|
||||
v-model:value="form.data.description"
|
||||
placeholder="请输入说明"
|
||||
allow-clear
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<a-card>
|
||||
<h5>权限分配</h5>
|
||||
<PermissTree />
|
||||
|
||||
<a-button type="primary" :disabled="form.loading" @click="form.clickSave">保存</a-button>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="RolePermiss">
|
||||
import { FormInstance } from 'ant-design-vue';
|
||||
import PermissTree from '../components/PermissTree.vue'
|
||||
|
||||
// 表单相关
|
||||
const formRef = ref<FormInstance>();
|
||||
const form = reactive({
|
||||
loading: false,
|
||||
data: {
|
||||
name: '',
|
||||
description: '',
|
||||
},
|
||||
getForm: ()=>{},
|
||||
clickSave: ()=>{}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<a-card class="role-user-container">
|
||||
<Search :columns="query.columns" />
|
||||
|
||||
<JTable
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
:request="getUserByRole_api"
|
||||
model="TABLE"
|
||||
:params="query.params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-button type="primary" @click="table.clickAdd"
|
||||
><plus-outlined />新增</a-button
|
||||
>
|
||||
</template>
|
||||
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16"> </a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
|
||||
<div class="dialogs">
|
||||
<AddUserDialog :open="dialog.openAdd" @refresh="table.refresh" />
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="RoleUser">
|
||||
import AddUserDialog from '../components/AddUserDialog.vue';
|
||||
import { getUserByRole_api } from '@/api/system/role';
|
||||
|
||||
const route = useRoute()
|
||||
const query = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
},
|
||||
],
|
||||
params: {
|
||||
terms: [
|
||||
{
|
||||
terms: [
|
||||
{
|
||||
column: 'id$in-dimension$role',
|
||||
value: route.params.id,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const table = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
scopedSlots: true,
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
clickAdd: () => {
|
||||
dialog.openAdd += 1;
|
||||
},
|
||||
refresh: ()=>{
|
||||
tableRef.value.reload()
|
||||
}
|
||||
});
|
||||
|
||||
// 弹窗相关
|
||||
const dialog = reactive({
|
||||
openAdd: 0,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-model:visible="dialog.visible"
|
||||
title="新增"
|
||||
width="1000px"
|
||||
@ok="dialog.handleOk"
|
||||
>
|
||||
<Search :columns="query.columns" type="simple" />
|
||||
|
||||
<JTable
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
:request="getUserByRole_api"
|
||||
model="TABLE"
|
||||
:params="query.params"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: table._selectedRowKeys,
|
||||
onChange: table.onSelectChange,
|
||||
}"
|
||||
@cancelSelect="table.cancelSelect"
|
||||
>
|
||||
</JTable>
|
||||
|
||||
<template #footer>
|
||||
<a-button key="back" @click="dialog.visible = false">取消</a-button>
|
||||
<a-button key="submit" type="primary" @click="dialog.handleOk"
|
||||
>确定</a-button
|
||||
>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getUserByRole_api, bindUser_api } from '@/api/system/role';
|
||||
import { message } from 'ant-design-vue';
|
||||
const route = useRoute();
|
||||
|
||||
const emits = defineEmits(['refresh']);
|
||||
const props = defineProps({
|
||||
open: Number,
|
||||
});
|
||||
|
||||
const query = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
},
|
||||
],
|
||||
params: {
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms: [
|
||||
{
|
||||
terms: [
|
||||
{
|
||||
column: 'id$in-dimension$role$not',
|
||||
value: route.params.id,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const table = reactive({
|
||||
_selectedRowKeys: [] as string[],
|
||||
columns: [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
onSelectChange: (keys: string[]) => {
|
||||
table._selectedRowKeys = [...keys];
|
||||
},
|
||||
cancelSelect: () => {
|
||||
table._selectedRowKeys = [];
|
||||
},
|
||||
});
|
||||
|
||||
// 弹窗相关
|
||||
const dialog = reactive({
|
||||
visible: false,
|
||||
handleOk: () => {
|
||||
if (table._selectedRowKeys.length < 1) {
|
||||
message.error('请至少选择一项');
|
||||
} else {
|
||||
bindUser_api(
|
||||
route.params.id as string,
|
||||
table._selectedRowKeys,
|
||||
).then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功');
|
||||
emits('refresh');
|
||||
dialog.visible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
() => {
|
||||
dialog.visible = true;
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div class="permiss-tree-container">
|
||||
<a-table :data-source="dataSource">
|
||||
<a-table-column key="menu" data-index="menu">
|
||||
<template #title><span style="">菜单权限</span></template>
|
||||
</a-table-column>
|
||||
<a-table-column key="action" title="操作权限" data-index="action" />
|
||||
<a-table-column key="data" data-index="data">
|
||||
<template #title>
|
||||
<span style="">数据权限</span>
|
||||
<a-checkbox v-model:checked="checked">批量设置</a-checkbox>
|
||||
<a-select
|
||||
v-show="checked"
|
||||
v-model:value="selectValue"
|
||||
:size="'middle'"
|
||||
style="width: 200px"
|
||||
:options="options"
|
||||
></a-select>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getPrimissTree_api } from '@/api/system/role';
|
||||
|
||||
const route = useRoute();
|
||||
const props = defineProps({
|
||||
selectItems: Array,
|
||||
});
|
||||
const dataSource = ref([]);
|
||||
const checked = ref<boolean>(false);
|
||||
const options = [
|
||||
{
|
||||
label: '全部数据',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '所在组织及下级组织',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
label: '所在组织',
|
||||
value: '3',
|
||||
},
|
||||
{
|
||||
label: '自己创建的',
|
||||
value: '4',
|
||||
},
|
||||
];
|
||||
const selectValue = ref<string>('');
|
||||
|
||||
const getAllPermiss = () => {
|
||||
const id = route.params.id as string;
|
||||
getPrimissTree_api(id).then((resp) => {
|
||||
console.log(resp);
|
||||
});
|
||||
};
|
||||
|
||||
getAllPermiss();
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.permiss-tree-container {
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<div class="details-container">
|
||||
{{ route.params.id }}
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="权限分配"><Permiss /></a-tab-pane>
|
||||
<a-tab-pane key="2" tab="用户管理"><User /></a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="Detail">
|
||||
import Permiss from './Permiss/index.vue';
|
||||
import User from './User/index.vue';
|
||||
const route = useRoute();
|
||||
|
||||
const activeKey = ref('1');
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -2,26 +2,90 @@
|
|||
<a-modal
|
||||
v-model:visible="dialog.visible"
|
||||
title="新增"
|
||||
width="670px"
|
||||
@ok="dialog.handleOk"
|
||||
>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<a-form ref="formRef" :model="form.data" layout="vertical">
|
||||
<a-form-item
|
||||
name="name"
|
||||
label="名称"
|
||||
:rules="[{ required: true, message: '请输入名称' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="form.data.name"
|
||||
placeholder="请输入角色名称"
|
||||
allow-clear
|
||||
:maxlength="64"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="name" label="说明">
|
||||
<a-textarea
|
||||
v-model:value="form.data.description"
|
||||
placeholder="请输入说明"
|
||||
allow-clear
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<template #footer>
|
||||
<a-button key="back" @click="dialog.visible = false">取消</a-button>
|
||||
<a-button
|
||||
key="submit"
|
||||
type="primary"
|
||||
:loading="form.loading"
|
||||
@click="dialog.handleOk"
|
||||
>确定</a-button
|
||||
>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const emits = defineEmits(['refresh']);
|
||||
import { FormInstance, message } from 'ant-design-vue';
|
||||
import { saveRole_api } from '@/api/system/role';
|
||||
const router = useRouter()
|
||||
const props = defineProps({
|
||||
open: Number,
|
||||
});
|
||||
|
||||
// 弹窗相关
|
||||
const dialog = reactive({
|
||||
visible: false,
|
||||
handleOk: () => {
|
||||
emits('refresh');
|
||||
formRef.value
|
||||
?.validate()
|
||||
.then(() => saveRole_api(form.data))
|
||||
.then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功');
|
||||
dialog.visible = false;
|
||||
router.push(`/system/Role/detail/${resp.result.id}`)
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
// 表单相关
|
||||
const formRef = ref<FormInstance>();
|
||||
const form = reactive({
|
||||
loading: false,
|
||||
data: {
|
||||
name: '',
|
||||
description: '',
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
() => {
|
||||
// 重置表单
|
||||
form.data = {
|
||||
name: '',
|
||||
description: '',
|
||||
};
|
||||
formRef.value?.resetFields();
|
||||
dialog.visible = true;
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<Search :columns="query.columns" />
|
||||
|
||||
<JTable
|
||||
:ref="tableRef"
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
:request="getRoleList_api"
|
||||
model="TABLE"
|
||||
|
|
@ -43,6 +43,10 @@
|
|||
</a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
|
||||
<div class="dialogs">
|
||||
<AddDialog :open="dialog.openAdd" />
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
|
|
@ -52,8 +56,11 @@ import {
|
|||
DeleteOutlined,
|
||||
PlusOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { getRoleList_api } from '@/api/system/role';
|
||||
import AddDialog from './components/AddDialog.vue';
|
||||
import { getRoleList_api, delRole_api } from '@/api/system/role';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const router = useRouter()
|
||||
// 筛选
|
||||
const query = reactive({
|
||||
columns: [
|
||||
|
|
@ -88,7 +95,7 @@ const query = reactive({
|
|||
params: {},
|
||||
});
|
||||
// 表格
|
||||
const tableRef = ref();
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const table = reactive({
|
||||
columns: [
|
||||
{
|
||||
|
|
@ -114,11 +121,25 @@ const table = reactive({
|
|||
},
|
||||
],
|
||||
tableData: [],
|
||||
clickAdd: () => {},
|
||||
clickDel: (row: any) => {},
|
||||
clickEdit: (row: any) => {},
|
||||
clickAdd: () => {
|
||||
dialog.openAdd += 1;
|
||||
},
|
||||
clickDel: (row: any) => {
|
||||
delRole_api(row.id).then((resp:any)=>{
|
||||
if(resp.status === 200){
|
||||
tableRef.value?.reload()
|
||||
message.success('操作成功!')
|
||||
}
|
||||
})
|
||||
},
|
||||
clickEdit: (row: any) => {
|
||||
router.push(`/system/Role/detail/${row.id}`)
|
||||
},
|
||||
});
|
||||
// 弹窗相关
|
||||
const dialog = reactive({
|
||||
openAdd: 0,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue