0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: 角色管理

This commit is contained in:
easy 2023-01-18 12:42:10 +08:00
parent b13bdb30bb
commit 12121c1376
4 changed files with 107 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/system/role.ts
View File

@ -6,11 +6,15 @@ export const getRoleList_api = (data: any): Promise<any> => server.post(`/role/_
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 getRoleDetails_api = (id: string): Promise<any> => server.get(`/role/${id}`);
// 获取角色对应的权限树
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);
// 将用户与角色解绑
export const unbindUser_api = (roleId:string, data: string[]): Promise<any> => server.post(`/role/${roleId}/users/_unbind`, data);

30
src/views/system/Role/Detail/Permiss/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="role-permiss-container">
<a-card>
<a-card style="max-width: 60%">
<h5>基本信息</h5>
<a-form ref="formRef" :model="form.data" layout="vertical">
<a-form-item
@ -11,7 +11,6 @@
<a-input
v-model:value="form.data.name"
placeholder="请输入角色名称"
allow-clear
:maxlength="64"
/>
</a-form-item>
@ -19,7 +18,6 @@
<a-textarea
v-model:value="form.data.description"
placeholder="请输入说明"
allow-clear
:maxlength="200"
/>
</a-form-item>
@ -30,14 +28,24 @@
<h5>权限分配</h5>
<PermissTree />
<a-button type="primary" :disabled="form.loading" @click="form.clickSave">保存</a-button>
<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'
import PermissTree from '../components/PermissTree.vue';
import { getRoleDetails_api } from '@/api/system/role';
const route = useRoute();
const roleId = route.params.id as string;
// 表单相关
const formRef = ref<FormInstance>();
@ -47,9 +55,17 @@ const form = reactive({
name: '',
description: '',
},
getForm: ()=>{},
clickSave: ()=>{}
getForm: () => {
getRoleDetails_api(roleId).then((resp) => {
if (resp.status) {
form.data = resp.result;
}
});
},
clickSave: () => {},
});
form.getForm();
</script>
<style lang="less" scoped></style>

23
src/views/system/Role/Detail/User/index.d.ts vendored Normal file
View File

@ -0,0 +1,23 @@
type columnsType = {
title: string,
dataIndex: string,
key: string,
scopedSlots?:boolean
}
export type queryType = {
columns: columnsType[],
params?: object
}
export type tableType = {
columns: columnsType[],
tableData: any[],
refresh: Function,
clickAdd: Function,
clickUnBind: Function,
unbind: Function,
_selectedRowKeys?: string[],
onSelectChange?: Function,
cancelSelect?: Function
}

62
src/views/system/Role/Detail/User/index.vue
View File

@ -7,7 +7,12 @@
:columns="table.columns"
:request="getUserByRole_api"
model="TABLE"
:params="query.params"
:defaultParams="query.params"
:rowSelection="{
selectedRowKeys: table._selectedRowKeys,
onChange: table.onSelectChange,
}"
@cancelSelect="table.cancelSelect"
>
<template #headerTitle>
<a-button type="primary" @click="table.clickAdd"
@ -16,7 +21,21 @@
</template>
<template #action="slotProps">
<a-space :size="16"> </a-space>
<a-space :size="16">
<a-popconfirm
title="确认解绑"
ok-text="确定"
cancel-text="取消"
@confirm="table.clickUnBind(slotProps)"
>
<a-tooltip>
<template #title>解绑</template>
<a-button style="padding: 0" type="link">
<disconnect-outlined />
</a-button>
</a-tooltip>
</a-popconfirm>
</a-space>
</template>
</JTable>
@ -27,11 +46,15 @@
</template>
<script setup lang="ts" name="RoleUser">
import { PlusOutlined, DisconnectOutlined } from '@ant-design/icons-vue';
import AddUserDialog from '../components/AddUserDialog.vue';
import { getUserByRole_api } from '@/api/system/role';
import { getUserByRole_api, unbindUser_api } from '@/api/system/role';
import { message } from 'ant-design-vue';
import userType from './index';
const route = useRoute()
const query = reactive({
const route = useRoute();
const roleId = route.params.id as string;
const query = reactive<userType.queryType>({
columns: [
{
title: '姓名',
@ -69,7 +92,7 @@ const query = reactive({
});
const tableRef = ref<Record<string, any>>({});
const table = reactive({
const table = reactive<userType.tableType>({
columns: [
{
title: '姓名',
@ -99,12 +122,35 @@ const table = reactive({
},
],
tableData: [],
// 点击打开新增弹窗
clickAdd: () => {
dialog.openAdd += 1;
},
refresh: ()=>{
tableRef.value.reload()
// 点击解绑
clickUnBind: (row: any) => {
table.unbind([row.id]);
},
// 批量解绑
unbind: (ids: string[] = []) => {
unbindUser_api(roleId, ids).then((resp) => {
if (resp.status === 200) {
message.success('操作成功');
table.refresh();
}
});
},
// 刷新表格
refresh: () => {
tableRef.value.reload();
},
// 多选
_selectedRowKeys: [] as string[],
onSelectChange: (keys: string[]) => {
table._selectedRowKeys = [...keys];
},
cancelSelect: () => {
table._selectedRowKeys = [];
},
});
// 弹窗相关