简柏林 / thingskit-front · Commits

Commit ed8910309fe29a8458ea7fca17d399f2f0881c53

Authored by 黄 x
1 parent 6ac7d1cc

fix(front): 

增租户菜单、租户角色 同时修改相应页面及BUG
Inline Side-by-side
Showing 11 changed files with 403 additions and 10 deletions
@@ -6,6 +6,7 @@ export type AccountParams = BasicPageParams & { @@ -6,6 +6,7 @@ export type AccountParams = BasicPageParams & {
6 }; 6 };
7 7
8 export type RoleParams = { 8 export type RoleParams = {
  9 + roleType?:string;
9 roleName?: string; 10 roleName?: string;
10 status?: string; 11 status?: string;
11 }; 12 };
@@ -44,6 +44,8 @@ export const getMenuList = (params?: MenuParams) => @@ -44,6 +44,8 @@ export const getMenuList = (params?: MenuParams) =>
44 44
45 export const getRoleListByPage = (params?: RolePageParams) => 45 export const getRoleListByPage = (params?: RolePageParams) =>
46 defHttp.get<RolePageListGetResultModel>({url: Api.RolePageList, params}); 46 defHttp.get<RolePageListGetResultModel>({url: Api.RolePageList, params});
  47 +export const getTenantRoleListByPage= (params?: RolePageParams) =>
  48 + defHttp.get<RolePageListGetResultModel>({url: Api.RolePageList, params});
47 49
48 export const getAllRoleList = (params?: RoleParams) => 50 export const getAllRoleList = (params?: RoleParams) =>
49 defHttp.post<RoleListGetResultModel>({url: Api.GetAllRoleList, params}); 51 defHttp.post<RoleListGetResultModel>({url: Api.GetAllRoleList, params});
1 export enum RoleEnum { 1 export enum RoleEnum {
2 ROLE_SYS_ADMIN = "ROLE_SYS_ADMIN", 2 ROLE_SYS_ADMIN = "ROLE_SYS_ADMIN",
3 ROLE_TENANT_ADMIN = "ROLE_TENANT_ADMIN", 3 ROLE_TENANT_ADMIN = "ROLE_TENANT_ADMIN",
4 - ROLE_NORMAL_USER = "ROLE_NORMAL_USER" 4 + ROLE_NORMAL_USER = "ROLE_NORMAL_USER",
  5 + ROLE_PLATFORM_ADMIN="ROLE_PLATFORM_ADMIN"
5 } 6 }
@@ -16,6 +16,7 @@ @@ -16,6 +16,7 @@
16 label:'删除', 16 label:'删除',
17 icon: 'ant-design:delete-outlined', 17 icon: 'ant-design:delete-outlined',
18 color: 'error', 18 color: 'error',
  19 + ifShow:record.roleType!=RoleEnum.ROLE_SYS_ADMIN,
19 popConfirm: { 20 popConfirm: {
20 title: '是否确认删除', 21 title: '是否确认删除',
21 confirm: handleDelete.bind(null, record), 22 confirm: handleDelete.bind(null, record),
@@ -36,8 +37,8 @@ @@ -36,8 +37,8 @@
36 37
37 import { useDrawer } from '/@/components/Drawer'; 38 import { useDrawer } from '/@/components/Drawer';
38 import RoleDrawer from './RoleDrawer.vue'; 39 import RoleDrawer from './RoleDrawer.vue';
39 -  
40 import { columns, searchFormSchema } from './role.data'; 40 import { columns, searchFormSchema } from './role.data';
  41 + import {RoleEnum} from "/@/enums/roleEnum";
41 42
42 export default defineComponent({ 43 export default defineComponent({
43 name: 'RoleManagement', 44 name: 'RoleManagement',
@@ -101,6 +102,7 @@ @@ -101,6 +102,7 @@
101 handleEdit, 102 handleEdit,
102 handleDelete, 103 handleDelete,
103 handleSuccess, 104 handleSuccess,
  105 + RoleEnum
104 }; 106 };
105 }, 107 },
106 }); 108 });
@@ -75,6 +75,7 @@ import {Tag} from 'ant-design-vue'; @@ -75,6 +75,7 @@ import {Tag} from 'ant-design-vue';
75 import TenantAdminFormDrawer from "./TenantAdminFormDrawer.vue" 75 import TenantAdminFormDrawer from "./TenantAdminFormDrawer.vue"
76 import {MessageTypeEnum, SendResetPasswordEmailMsg} from "/@/api/tenant/tenantInfo"; 76 import {MessageTypeEnum, SendResetPasswordEmailMsg} from "/@/api/tenant/tenantInfo";
77 import {useMessage} from "/@/hooks/web/useMessage"; 77 import {useMessage} from "/@/hooks/web/useMessage";
  78 +import {RoleEnum} from "/@/enums/roleEnum";
78 export default defineComponent({ 79 export default defineComponent({
79 name: 'TenantAdminDrawer', 80 name: 'TenantAdminDrawer',
80 components: { 81 components: {
@@ -155,7 +156,8 @@ export default defineComponent({ @@ -155,7 +156,8 @@ export default defineComponent({
155 bordered: true, 156 bordered: true,
156 showIndexColumn: false, 157 showIndexColumn: false,
157 searchInfo: { 158 searchInfo: {
158 - tenantCode: tenantCode 159 + tenantCode: tenantCode,
  160 + roleType: RoleEnum.ROLE_TENANT_ADMIN
159 }, 161 },
160 actionColumn: { 162 actionColumn: {
161 width: 100, 163 width: 100,
@@ -48,11 +48,13 @@ export default defineComponent({ @@ -48,11 +48,13 @@ export default defineComponent({
48 { 48 {
49 field: 'phoneNumber', 49 field: 'phoneNumber',
50 label: '电话号码:', 50 label: '电话号码:',
  51 + required: true,
51 component: 'Input', 52 component: 'Input',
52 }, 53 },
53 { 54 {
54 field: 'email', 55 field: 'email',
55 label: '邮件:', 56 label: '邮件:',
  57 + required: true,
56 component: 'Input', 58 component: 'Input',
57 }, 59 },
58 { 60 {
@@ -79,7 +81,6 @@ export default defineComponent({ @@ -79,7 +81,6 @@ export default defineComponent({
79 await resetFields(); 81 await resetFields();
80 isUpdate.value = !!data?.isUpdate; 82 isUpdate.value = !!data?.isUpdate;
81 tenantCode.value = data?.tenantCode; 83 tenantCode.value = data?.tenantCode;
82 - console.log(data, "from TenantAdminFormDrawer ")  
83 await updateSchema({field: 'title', componentProps: {disabled: false}}); 84 await updateSchema({field: 'title', componentProps: {disabled: false}});
84 if (unref(isUpdate)) { 85 if (unref(isUpdate)) {
85 await setFieldsValue({ 86 await setFieldsValue({
@@ -102,7 +103,6 @@ export default defineComponent({ @@ -102,7 +103,6 @@ export default defineComponent({
102 tenantExpireTime: (typeof values.tenantExpireTime != 'undefined' && values.tenantExpireTime != null) ? values.tenantExpireTime.format('YYYY-MM-DD HH:mm:ss') : null, 103 tenantExpireTime: (typeof values.tenantExpireTime != 'undefined' && values.tenantExpireTime != null) ? values.tenantExpireTime.format('YYYY-MM-DD HH:mm:ss') : null,
103 tenantCode: tenantCode.value 104 tenantCode: tenantCode.value
104 } 105 }
105 - console.log(requestParams, "requestParams");  
106 setDrawerProps({confirmLoading: true}); 106 setDrawerProps({confirmLoading: true});
107 saveTenantAdmin(requestParams as any as UserDTO).then(() => { 107 saveTenantAdmin(requestParams as any as UserDTO).then(() => {
108 closeDrawer();//关闭侧框 108 closeDrawer();//关闭侧框
@@ -99,8 +99,6 @@ export default defineComponent({ @@ -99,8 +99,6 @@ export default defineComponent({
99 await updateSchema({field: 'title', componentProps: {disabled: false}}); 99 await updateSchema({field: 'title', componentProps: {disabled: false}});
100 //如果是编辑操作，设置页面数据 100 //如果是编辑操作，设置页面数据
101 if (unref(isUpdate)) { 101 if (unref(isUpdate)) {
102 - console.log(data.record, "编辑时获得的值");  
103 -  
104 //为表单赋值 102 //为表单赋值
105 setFieldsValue({ 103 setFieldsValue({
106 ...data.record, 104 ...data.record,
@@ -118,16 +116,15 @@ export default defineComponent({ @@ -118,16 +116,15 @@ export default defineComponent({
118 try { 116 try {
119 const values = await validate(); 117 const values = await validate();
120 setDrawerProps({confirmLoading: true}); 118 setDrawerProps({confirmLoading: true});
121 - console.log(tenantLogo, "tenantLogo");  
122 const req = { 119 const req = {
123 id: values.id, 120 id: values.id,
124 icon: tenantLogo.value, 121 icon: tenantLogo.value,
125 name: values.name, 122 name: values.name,
126 enabled: values.enabled, 123 enabled: values.enabled,
127 description: values.description, 124 description: values.description,
  125 + roleIds:values.roleIds,
128 tenantExpireTime: (typeof values.tenantExpireTime != 'undefined' && values.tenantExpireTime != null) ? values.tenantExpireTime.format('YYYY-MM-DD HH:mm:ss') : null 126 tenantExpireTime: (typeof values.tenantExpireTime != 'undefined' && values.tenantExpireTime != null) ? values.tenantExpireTime.format('YYYY-MM-DD HH:mm:ss') : null
129 }; 127 };
130 - console.log(req, "real req");  
131 updateOrCreateTenant(req).then(() => { 128 updateOrCreateTenant(req).then(() => {
132 closeDrawer();//关闭侧框 129 closeDrawer();//关闭侧框
133 emit('success'); 130 emit('success');
1 import { BasicColumn } from "/@/components/Table/src/types/table"; 1 import { BasicColumn } from "/@/components/Table/src/types/table";
2 import {FormSchema} from "/@/components/Form"; 2 import {FormSchema} from "/@/components/Form";
  3 +import {getAllRoleList} from "/@/api/system/system";
  4 +import {RoleEnum} from "/@/enums/roleEnum";
3 5
4 export function getBasicColumns(): BasicColumn[] { 6 export function getBasicColumns(): BasicColumn[] {
5 return [ 7 return [
@@ -31,12 +33,17 @@ export function getBasicColumns(): BasicColumn[] { @@ -31,12 +33,17 @@ export function getBasicColumns(): BasicColumn[] {
31 dataIndex: 'tenantExpireTime', 33 dataIndex: 'tenantExpireTime',
32 width: 150, 34 width: 150,
33 }, 35 },
  36 + {
  37 + title: '创建时间',
  38 + dataIndex: 'createTime',
  39 + width: 150,
  40 + },
34 ] 41 ]
35 } 42 }
36 export const tenantFormSchema: FormSchema[] = [ 43 export const tenantFormSchema: FormSchema[] = [
37 { 44 {
38 field: 'id', 45 field: 'id',
39 - label: '租户图标: ', 46 + label: 'id',
40 slot: 'iconSelect', 47 slot: 'iconSelect',
41 component: 'Input', 48 component: 'Input',
42 show:false 49 show:false
@@ -54,6 +61,21 @@ export const tenantFormSchema: FormSchema[] = [ @@ -54,6 +61,21 @@ export const tenantFormSchema: FormSchema[] = [
54 component: 'Input', 61 component: 'Input',
55 }, 62 },
56 { 63 {
  64 + field: 'roleIds',
  65 + label: '租户角色:',
  66 + component: 'ApiSelect',
  67 + required: true,
  68 + componentProps: {
  69 + mode: 'multiple',
  70 + api:getAllRoleList,
  71 + params:{
  72 + roleType:RoleEnum.ROLE_TENANT_ADMIN
  73 + },
  74 + labelField:'name',
  75 + valueField:'id',
  76 + },
  77 + },
  78 + {
57 field: 'enabled', 79 field: 'enabled',
58 label: '状态', 80 label: '状态',
59 component: 'RadioButtonGroup', 81 component: 'RadioButtonGroup',
  1 +<template>
  2 + <BasicDrawer
  3 + v-bind="$attrs"
  4 + @register="registerDrawer"
  5 + showFooter
  6 + :title="getTitle"
  7 + width="500px"
  8 + @ok="handleSubmit"
  9 + >
  10 + <BasicForm @register="registerForm">
  11 + <template #menu="{ model, field }">
  12 + <BasicTree
  13 + v-model:value="model[field]"
  14 + :treeData="treeData"
  15 + :replaceFields="{ title: 'menuName' }"
  16 + :checked-keys="roleMenus"
  17 + checkable
  18 + toolbar
  19 + title="菜单分配"
  20 + />
  21 + </template>
  22 + </BasicForm>
  23 + </BasicDrawer>
  24 +</template>
  25 +<script lang="ts">
  26 +import {defineComponent, ref, computed, unref} from 'vue';
  27 +import {BasicForm, useForm} from '/@/components/Form/index';
  28 +import {formSchema} from './role.data';
  29 +import {BasicDrawer, useDrawerInner} from '/@/components/Drawer';
  30 +import {BasicTree, TreeItem} from '/@/components/Tree';
  31 +
  32 +const {t} = useI18n(); //加载国际化
  33 +
  34 +// import { getMenuList } from '/@/api/demo/system';
  35 +
  36 +// 加载菜单数据
  37 +import {getMenuList, getMenusIdsByRoleId} from '/@/api/sys/menu';
  38 +import {useI18n} from "/@/hooks/web/useI18n";
  39 +import {RouteItem} from "/@/api/sys/model/menuModel";
  40 +import {saveOrUpdateRoleInfoWithMenu} from "/@/api/system/system";
  41 +import {RoleEnum} from "/@/enums/roleEnum";
  42 +export default defineComponent({
  43 + name: 'RoleDrawer',
  44 + components: {BasicDrawer, BasicForm, BasicTree},
  45 + emits: ['success', 'register'],
  46 + setup(_, {emit}) {
  47 + const isUpdate = ref(true);
  48 + const treeData = ref<TreeItem[]>([]);
  49 + const roleMenus = ref<string[]>([]);
  50 + const roleId = ref("");
  51 +
  52 + const [registerForm, {resetFields, setFieldsValue, validate}] = useForm({
  53 + labelWidth: 90,
  54 + schemas: formSchema,
  55 + showActionButtonGroup: false,
  56 + });
  57 +
  58 + function processChildren(items: RouteItem[]) {
  59 + items.map((item) => {
  60 + item.menuName = t(item.meta.title);
  61 + item.icon = item.meta.icon;
  62 + item.key=item.id;
  63 + if (item.children) {
  64 + processChildren(item.children);
  65 + }
  66 + });
  67 + }
  68 +
  69 + const [registerDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
  70 + resetFields();
  71 + roleId.value = "";
  72 + setDrawerProps({confirmLoading: false});
  73 + // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
  74 + if (unref(treeData).length === 0) {
  75 + const menuListModel = await getMenuList();
  76 + processChildren(menuListModel);
  77 + let treeValues = new Array<TreeItem>();
  78 + menuListModel.map((item) => {
  79 + const data = {
  80 + menuName: t(item.meta.title),
  81 + icon: item.meta.icon,
  82 + key: item.id,
  83 + children: item.children as any as TreeItem[],
  84 + }
  85 + treeValues.push(data);
  86 + })
  87 + treeData.value = treeValues;
  88 + }
  89 + if (data.record) {
  90 + roleMenus.value = await getMenusIdsByRoleId(data.record.id);
  91 + roleId.value = data.record.id;
  92 + }
  93 + isUpdate.value = !!data?.isUpdate;
  94 + if (unref(isUpdate)) {
  95 + setFieldsValue({
  96 + ...data.record,
  97 + });
  98 + }
  99 + });
  100 +
  101 + const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
  102 +
  103 + async function handleSubmit() {
  104 + try {
  105 + const values = await validate();
  106 + setDrawerProps({confirmLoading: true});
  107 + const req = {
  108 + id: roleId.value,
  109 + name: values.name,
  110 + remark: values.remark,
  111 + status: values.status,
  112 + roleType: RoleEnum.ROLE_TENANT_ADMIN,
  113 + menu: [...values.menu]
  114 + }
  115 + console.log(req,"请求参数")
  116 + saveOrUpdateRoleInfoWithMenu(req).then(()=>{
  117 + closeDrawer();
  118 + emit('success');
  119 + })
  120 + } finally {
  121 + setDrawerProps({confirmLoading: false});
  122 + }
  123 + }
  124 +
  125 + return {
  126 + registerDrawer,
  127 + registerForm,
  128 + getTitle,
  129 + handleSubmit,
  130 + treeData,
  131 + roleMenus,
  132 + };
  133 + },
  134 +});
  135 +</script>
  1 +<template>
  2 + <div>
  3 + <BasicTable @register="registerTable">
  4 + <template #toolbar>
  5 + <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
  6 + </template>
  7 + <template #action="{ record }">
  8 + <TableAction
  9 + :actions="[
  10 + {
  11 + label:'编辑',
  12 + icon: 'clarity:note-edit-line',
  13 + onClick: handleEdit.bind(null, record),
  14 + },
  15 + {
  16 + label:'删除',
  17 + icon: 'ant-design:delete-outlined',
  18 + color: 'error',
  19 + popConfirm: {
  20 + title: '是否确认删除',
  21 + confirm: handleDelete.bind(null, record),
  22 + },
  23 + },
  24 + ]"
  25 + />
  26 + </template>
  27 + </BasicTable>
  28 + <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
  29 + </div>
  30 +</template>
  31 +<script lang="ts">
  32 + import { defineComponent } from 'vue';
  33 +
  34 + import { BasicTable, useTable, TableAction } from '/@/components/Table';
  35 + import {delRole, getRoleListByPage} from '/@/api/system/system';
  36 +
  37 + import { useDrawer } from '/@/components/Drawer';
  38 + import RoleDrawer from './RoleDrawer.vue';
  39 + import { columns, searchFormSchema } from './role.data';
  40 + import {RoleEnum} from "/@/enums/roleEnum";
  41 +
  42 + export default defineComponent({
  43 + name: 'TenantRoleManagement',
  44 + components: { BasicTable, RoleDrawer, TableAction },
  45 + setup() {
  46 + const [registerDrawer, { openDrawer }] = useDrawer();
  47 + const [registerTable, { reload }] = useTable({
  48 + title: '租户角色列表',
  49 + api: getRoleListByPage,
  50 + columns,
  51 + tableSetting:{
  52 + redo:true,
  53 + size:false,
  54 + setting:false
  55 + },
  56 + formConfig: {
  57 + labelWidth: 120,
  58 + schemas: searchFormSchema,
  59 + },
  60 + useSearchForm: true,
  61 + showTableSetting: true,
  62 + bordered: true,
  63 + showIndexColumn: false,
  64 + actionColumn: {
  65 + width: 80,
  66 + title: '操作',
  67 + dataIndex: 'action',
  68 + slots: { customRender: 'action' },
  69 + fixed: undefined,
  70 + },
  71 + });
  72 +
  73 + function handleCreate() {
  74 + openDrawer(true, {
  75 + isUpdate: false,
  76 + });
  77 + }
  78 +
  79 + function handleEdit(record: Recordable) {
  80 + openDrawer(true, {
  81 + record,
  82 + isUpdate: true,
  83 + });
  84 + }
  85 +
  86 + async function handleDelete(record: Recordable) {
  87 + const roleIds = [record.id]
  88 + delRole(roleIds).then(()=>{
  89 + reload();
  90 + })
  91 +
  92 + }
  93 + function handleSuccess() {
  94 + reload();
  95 + }
  96 +
  97 + return {
  98 + registerTable,
  99 + registerDrawer,
  100 + handleCreate,
  101 + handleEdit,
  102 + handleDelete,
  103 + handleSuccess,
  104 + RoleEnum
  105 + };
  106 + },
  107 + });
  108 +</script>
  1 +import {BasicColumn} from '/@/components/Table';
  2 +import {FormSchema} from '/@/components/Table';
  3 +import {h} from 'vue';
  4 +import {Switch} from 'ant-design-vue';
  5 +import {setRoleStatus} from '/@/api/system/system';
  6 +import {useMessage} from '/@/hooks/web/useMessage';
  7 +import {RoleEnum} from "/@/enums/roleEnum";
  8 +export const columns: BasicColumn[] = [
  9 + {
  10 + title: '角色名称',
  11 + dataIndex: 'name',
  12 + width: 180,
  13 + },
  14 + {
  15 + title: '角色Code',
  16 + dataIndex: 'code',
  17 + width: 180,
  18 + },
  19 + {
  20 + title: '状态',
  21 + dataIndex: 'status',
  22 + width: 120,
  23 + customRender: ({record}) => {
  24 + if (!Reflect.has(record, 'pendingStatus')) {
  25 + record.pendingStatus = false;
  26 + }
  27 + return h(Switch, {
  28 + checked: record.status === 1,
  29 + checkedChildren: '已启用',
  30 + unCheckedChildren: '已禁用',
  31 + loading: record.pendingStatus,
  32 + onChange(checked: boolean) {
  33 + record.pendingStatus = true;
  34 + const newStatus = checked ? 1 : 0;
  35 + const {createMessage} = useMessage();
  36 + setRoleStatus(record.id, newStatus)
  37 + .then(() => {
  38 + record.status = newStatus;
  39 + createMessage.success(`已成功修改角色状态`);
  40 + })
  41 + .catch(() => {
  42 + createMessage.error('修改角色状态失败');
  43 + })
  44 + .finally(() => {
  45 + record.pendingStatus = false;
  46 + });
  47 + },
  48 + });
  49 + },
  50 + },
  51 +
  52 + {
  53 + title: '备注',
  54 + dataIndex: 'remark',
  55 + width:240,
  56 + },
  57 + {
  58 + title: '创建时间',
  59 + dataIndex: 'createTime',
  60 + width: 180,
  61 + },
  62 +];
  63 +
  64 +export const searchFormSchema: FormSchema[] = [
  65 + {
  66 + field: 'roleName',
  67 + label: '角色名称',
  68 + component: 'Input',
  69 + colProps: {span: 8},
  70 + },
  71 + {
  72 + field: 'roleType',
  73 + label: '',
  74 + component: 'Input',
  75 + colProps: {span: 8},
  76 + defaultValue:RoleEnum.ROLE_TENANT_ADMIN,
  77 + ifShow:false
  78 + },
  79 + {
  80 + field: 'status',
  81 + label: '状态',
  82 + component: 'Select',
  83 + componentProps: {
  84 + options: [
  85 + {label: '启用', value: 1},
  86 + {label: '停用', value: 0},
  87 + ],
  88 + },
  89 + colProps: {span: 8},
  90 + },
  91 +];
  92 +
  93 +export const formSchema: FormSchema[] = [
  94 + {
  95 + field: 'name',
  96 + label: '角色名称',
  97 + required: true,
  98 + component: 'Input',
  99 + },
  100 + {
  101 + field: 'status',
  102 + label: '状态',
  103 + component: 'RadioButtonGroup',
  104 + defaultValue: 0,
  105 + componentProps: {
  106 + options: [
  107 + {label: '启用', value: 1},
  108 + {label: '停用', value: 0},
  109 + ],
  110 + },
  111 + },
  112 + {
  113 + label: '备注',
  114 + field: 'remark',
  115 + component: 'InputTextArea',
  116 + },
  117 + {
  118 + label: ' ',
  119 + field: 'menu',
  120 + slot: 'menu',
  121 + component: 'Input',
  122 + },
  123 +];