GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tenant-package): 新增租户套餐管理功能

Browse Source
This commit is contained in:
AN 2025-05-11 11:27:37 +08:00
parent 862ac25057
commit 1140829bcc
14 changed files with 514 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/router/elegant/imports.ts
View File

@ -39,6 +39,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
system_oss: () => import("@/views/system/oss/index.vue"),
system_post: () => import("@/views/system/post/index.vue"),
system_role: () => import("@/views/system/role/index.vue"),
"system_tenant-package": () => import("@/views/system/tenant-package/index.vue"),
system_tenant: () => import("@/views/system/tenant/index.vue"),
system_user: () => import("@/views/system/user/index.vue"),
tool_gen: () => import("@/views/tool/gen/index.vue"),

9
src/router/elegant/routes.ts
View File

@ -277,6 +277,15 @@ export const generatedRoutes: GeneratedRoute[] = [
i18nKey: 'route.system_tenant'
}
},
{
name: 'system_tenant-package',
path: '/system/tenant-package',
component: 'view.system_tenant-package',
meta: {
title: 'system_tenant-package',
i18nKey: 'route.system_tenant-package'
}
},
{
name: 'system_user',
path: '/system/user',

1
src/router/elegant/transform.ts
View File

@ -190,6 +190,7 @@ const routeMap: RouteMap = {
"system_post": "/system/post",
"system_role": "/system/role",
"system_tenant": "/system/tenant",
"system_tenant-package": "/system/tenant-package",
"system_user": "/system/user",
"tool": "/tool",
"tool_gen": "/tool/gen",

8
src/service/api/system/menu.ts
View File

@ -50,3 +50,11 @@ export function fetchGetRoleMenuTreeSelect(roleId: CommonType.IdType) {
method: 'get'
});
}
/** 获取租户套餐关联菜单 */
export function fetchGetTenantPackageMenuTreeSelect(packageId: CommonType.IdType) {
return request<Api.System.TenantPackageMenuTreeSelect>({
url: `/system/menu/tenantPackageMenuTreeselect/${packageId}`,
method: 'get'
});
}

9
src/service/api/system/tenant-package.ts
View File

@ -41,3 +41,12 @@ export function fetchBatchDeleteTenantPackage(packageIds: CommonType.IdType[]) {
method: 'delete'
});
}
/** 修改租户套餐状态 */
export function fetchUpdateTenantPackageStatus(data: Api.System.TenantPackageOperateParams) {
return request<boolean>({
url: `/system/tenant/package/changeStatus`,
method: 'put',
data
});
}

8
src/typings/api/system.api.d.ts vendored
View File

@ -68,7 +68,11 @@ declare namespace Api {
checkedKeys: CommonType.IdType[];
menus: MenuList;
}>;
/** teannt-package menu tree select */
type TenantPackageMenuTreeSelect = Common.CommonRecord<{
checkedKeys: CommonType.IdType[];
menus: MenuList;
}>;
/** role dept tree select */
type RoleDeptTreeSelect = Common.CommonRecord<{
checkedKeys: CommonType.IdType[];
@ -562,7 +566,7 @@ declare namespace Api {
/** 套餐名称 */
packageName: string;
/** 关联菜单id */
menuIds: CommonType.IdType;
menuIds: CommonType.IdType[];
/** 备注 */
remark: string;
/** 菜单树选择项是否关联显示 */

3
src/typings/components.d.ts vendored
View File

@ -45,6 +45,9 @@ declare module 'vue' {
'IconMaterialSymbols:syncOutline': typeof import('~icons/material-symbols/sync-outline')['default']
'IconMaterialSymbols:uploadRounded': typeof import('~icons/material-symbols/upload-rounded')['default']
'IconMaterialSymbols:warningOutlineRounded': typeof import('~icons/material-symbols/warning-outline-rounded')['default']
IconMaterialSymbolsAddRounded: typeof import('~icons/material-symbols/add-rounded')['default']
IconMaterialSymbolsDeleteOutline: typeof import('~icons/material-symbols/delete-outline')['default']
IconMaterialSymbolsDriveFileRenameOutlineOutline: typeof import('~icons/material-symbols/drive-file-rename-outline-outline')['default']
IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
IconMdiDrag: typeof import('~icons/mdi/drag')['default']

2
src/typings/elegant-router.d.ts vendored
View File

@ -44,6 +44,7 @@ declare module "@elegant-router/types" {
"system_post": "/system/post";
"system_role": "/system/role";
"system_tenant": "/system/tenant";
"system_tenant-package": "/system/tenant-package";
"system_user": "/system/user";
"tool": "/tool";
"tool_gen": "/tool/gen";
@ -131,6 +132,7 @@ declare module "@elegant-router/types" {
| "system_oss"
| "system_post"
| "system_role"
| "system_tenant-package"
| "system_tenant"
| "system_user"
| "tool_gen"

8
src/views/system/config/modules/config-search.vue
View File

@ -34,13 +34,13 @@ async function search() {
<NCollapseItem :title="$t('common.search')" name="user-search">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" label="参数名称" path="configName" class="pr-24px">
<NFormItemGi span="6 s:12 m:6" label="参数名称" path="configName" class="pr-24px">
<NInput v-model:value="model.configName" placeholder="请输入参数名称" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="参数键名" path="configKey" class="pr-24px">
<NFormItemGi span="6 s:12 m:6" label="参数键名" path="configKey" class="pr-24px">
<NInput v-model:value="model.configKey" placeholder="请输入参数键名" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="是否内置" path="configType" class="pr-24px">
<NFormItemGi span="6 s:12 m:6" label="是否内置" path="configType" class="pr-24px">
<DictSelect
v-model:value="model.configType"
placeholder="请选择是否内置"
@ -48,7 +48,7 @@ async function search() {
clearable
/>
</NFormItemGi>
<NFormItemGi span="24" class="pr-24px">
<NFormItemGi span="6" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>

6
src/views/system/dept/modules/dept-search.vue
View File

@ -36,10 +36,10 @@ async function search() {
<NCollapseItem :title="$t('common.search')" name="user-search">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" label="部门名称" path="deptName" class="pr-24px">
<NFormItemGi span="8" label="部门名称" path="deptName" class="pr-24px">
<NInput v-model:value="model.deptName" placeholder="请输入部门名称" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="部门状态" path="status" class="pr-24px">
<NFormItemGi span="8 " label="部门状态" path="status" class="pr-24px">
<NSelect
v-model:value="model.status"
placeholder="请选择部门状态"
@ -47,7 +47,7 @@ async function search() {
clearable
/>
</NFormItemGi>
<NFormItemGi span="24" class="pr-24px">
<NFormItemGi span="8" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>

8
src/views/system/post/modules/post-search.vue
View File

@ -36,13 +36,13 @@ async function search() {
<NCollapseItem :title="$t('common.search')" name="user-search">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" label="岗位编码" path="postCode" class="pr-24px">
<NFormItemGi span="6 s:12 m:6" label="岗位编码" path="postCode" class="pr-24px">
<NInput v-model:value="model.postCode" placeholder="请输入岗位编码" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="岗位名称" path="postName" class="pr-24px">
<NFormItemGi span="6 s:12 m:6" label="岗位名称" path="postName" class="pr-24px">
<NInput v-model:value="model.postName" placeholder="请输入岗位名称" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="状态" path="status" class="pr-24px">
<NFormItemGi span="6 s:12 m:6" label="状态" path="status" class="pr-24px">
<NSelect
v-model:value="model.status"
placeholder="请选择状态"
@ -50,7 +50,7 @@ async function search() {
clearable
/>
</NFormItemGi>
<NFormItemGi span="24" class="pr-24px">
<NFormItemGi span="6" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>

229
src/views/system/tenant-package/index.vue Normal file
View File

@ -0,0 +1,229 @@
<script setup lang="tsx">
import { defineOptions } from 'vue';
import { NDivider } from 'naive-ui';
import {
fetchBatchDeleteTenantPackage,
fetchGetTenantPackageList,
fetchUpdateTenantPackageStatus
} from '@/service/api/system/tenant-package';
import { useAppStore } from '@/store/modules/app';
import { useAuth } from '@/hooks/business/auth';
import { useDownload } from '@/hooks/business/download';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { $t } from '@/locales';
import ButtonIcon from '@/components/custom/button-icon.vue';
import TableHeaderOperation from '@/components/advanced/table-header-operation.vue';
import StatusSwitch from '@/components/custom/status-switch.vue';
import TenantPackageSearch from './modules/tenant-package-search.vue';
import TenantPackageOperateDrawer from './modules/tenant-package-operate-drawer.vue';
defineOptions({
name: 'TenantPackageList'
});
const appStore = useAppStore();
const { download } = useDownload();
const { hasAuth } = useAuth();
const {
columns,
columnChecks,
data,
getData,
getDataByPage,
loading,
mobilePagination,
searchParams,
resetSearchParams
} = useTable({
apiFn: fetchGetTenantPackageList,
apiParams: {
pageNum: 1,
pageSize: 10,
// if you want to use the searchParams in Form, you need to define the following properties, and the value is null
// the value can not be undefined, otherwise the property in Form will not be reactive
packageName: null,
status: null,
params: {}
},
columns: () => [
{
type: 'selection',
align: 'center',
width: 48
},
{
key: 'index',
title: $t('common.index'),
align: 'center',
width: 64
},
{
key: 'packageName',
title: '套餐名称',
align: 'center',
minWidth: 120
},
{
key: 'status',
title: '状态',
align: 'center',
minWidth: 120,
render: row => {
return (
<StatusSwitch
v-model:value={row.status}
info={row.packageName}
onSubmitted={(value, callback) => handleStatusChange(row, value, callback)}
/>
);
}
},
{
key: 'remark',
title: '备注',
align: 'center',
minWidth: 120
},
{
key: 'operate',
title: $t('common.operate'),
align: 'center',
width: 130,
render: row => {
const divider = () => {
if (!hasAuth('system:tenantPackage:edit') || !hasAuth('system:tenantPackage:remove')) {
return null;
}
return <NDivider vertical />;
};
const editBtn = () => {
if (!hasAuth('system:tenantPackage:edit')) {
return null;
}
return (
<ButtonIcon
text
type="primary"
icon="material-symbols:drive-file-rename-outline-outline"
tooltipContent={$t('common.edit')}
onClick={() => edit(row.packageId!)}
/>
);
};
const deleteBtn = () => {
if (!hasAuth('system:tenantPackage:remove')) {
return null;
}
return (
<ButtonIcon
text
type="error"
icon="material-symbols:delete-outline"
tooltipContent={$t('common.delete')}
popconfirmContent={$t('common.confirmDelete')}
onPositiveClick={() => handleDelete(row.packageId!)}
/>
);
};
return (
<div class="flex-center gap-8px">
{editBtn()}
{divider()}
{deleteBtn()}
</div>
);
}
}
]
});
const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
useTableOperate(data, getData);
async function handleBatchDelete() {
// request
const { error } = await fetchBatchDeleteTenantPackage(checkedRowKeys.value);
if (error) return;
onBatchDeleted();
}
async function handleDelete(packageId: CommonType.IdType) {
// request
const { error } = await fetchBatchDeleteTenantPackage([packageId]);
if (error) return;
onDeleted();
}
function edit(packageId: CommonType.IdType) {
handleEdit('packageId', packageId);
}
function handleExport() {
download('/system/tenant/package/export', searchParams, `租户套餐_${new Date().getTime()}.xlsx`);
}
/** 处理状态切换 */
async function handleStatusChange(
row: Api.System.TenantPackage,
value: Api.Common.EnableStatus,
callback: (flag: boolean) => void
) {
const { error } = await fetchUpdateTenantPackageStatus({
packageId: row.packageId,
status: value
});
callback(!error);
if (!error) {
window.$message?.success('状态修改成功');
getData();
}
}
</script>
<template>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<TenantPackageSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
<NCard title="租户套餐列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
<template #header-extra>
<TableHeaderOperation
v-model:columns="columnChecks"
:disabled-delete="checkedRowKeys.length === 0"
:loading="loading"
:show-add="hasAuth('system:tenantPackage:add')"
:show-delete="hasAuth('system:tenantPackage:remove')"
:show-export="hasAuth('system:tenantPackage:export')"
@add="handleAdd"
@delete="handleBatchDelete"
@export="handleExport"
@refresh="getData"
/>
</template>
<NDataTable
v-model:checked-row-keys="checkedRowKeys"
:columns="columns"
:data="data"
size="small"
:flex-height="!appStore.isMobile"
:scroll-x="962"
:loading="loading"
remote
:row-key="row => row.packageId"
:pagination="mobilePagination"
class="sm:h-full"
/>
<TenantPackageOperateDrawer
v-model:visible="drawerVisible"
:operate-type="operateType"
:row-data="editingData"
@submitted="getDataByPage"
/>
</NCard>
</div>
</template>
<style scoped></style>

160
src/views/system/tenant-package/modules/tenant-package-operate-drawer.vue Normal file
View File

@ -0,0 +1,160 @@
<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue';
import { useLoading } from '@sa/hooks';
import { fetchCreateTenantPackage, fetchUpdateTenantPackage } from '@/service/api/system/tenant-package';
import { fetchGetTenantPackageMenuTreeSelect } from '@/service/api/system/menu';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import MenuTree from '@/components/custom/menu-tree.vue';
import { $t } from '@/locales';
defineOptions({
name: 'TenantPackageOperateDrawer'
});
interface Props {
/** the type of operation */
operateType: NaiveUI.TableOperateType;
/** the edit row data */
rowData?: Api.System.TenantPackage | null;
}
const props = defineProps<Props>();
interface Emits {
(e: 'submitted'): void;
}
const emit = defineEmits<Emits>();
const menuTreeRef = ref<InstanceType<typeof MenuTree> | null>(null);
const menuOptions = ref<Api.System.MenuList>([]);
const { loading: menuLoading, startLoading: startMenuLoading, endLoading: stopMenuLoading } = useLoading();
const visible = defineModel<boolean>('visible', {
default: false
});
const { formRef, validate, restoreValidation } = useNaiveForm();
const { createRequiredRule } = useFormRules();
const title = computed(() => {
const titles: Record<NaiveUI.TableOperateType, string> = {
add: '新增租户套餐',
edit: '编辑租户套餐'
};
return titles[props.operateType];
});
type Model = Api.System.TenantPackageOperateParams;
const model: Model = reactive(createDefaultModel());
function createDefaultModel(): Model {
return {
packageName: '',
menuIds: [],
remark: '',
menuCheckStrictly: null
};
}
type RuleKey = Extract<keyof Model, 'packageId'>;
const rules: Record<RuleKey, App.Global.FormRule> = {
packageId: createRequiredRule('租户套餐id不能为空')
};
async function handleUpdateModelWhenEdit() {
menuOptions.value = [];
model.menuIds = [];
if (props.operateType === 'add') {
menuTreeRef.value?.refresh();
Object.assign(model, createDefaultModel());
return;
}
if (props.operateType === 'edit' && props.rowData) {
startMenuLoading();
Object.assign(model, props.rowData);
const { data, error } = await fetchGetTenantPackageMenuTreeSelect(model.packageId!);
if (error) return;
model.menuIds = data.checkedKeys;
menuOptions.value = data.menus;
stopMenuLoading();
}
}
function closeDrawer() {
visible.value = false;
}
async function handleSubmit() {
await validate();
// request
if (props.operateType === 'add') {
const { packageName, menuIds, remark, menuCheckStrictly } = model;
const { error } = await fetchCreateTenantPackage({ packageName, menuIds, remark, menuCheckStrictly });
if (error) return;
}
if (props.operateType === 'edit') {
const { packageId, packageName, menuIds, remark, menuCheckStrictly } = model;
const { error } = await fetchUpdateTenantPackage({
packageId,
packageName,
menuIds,
remark,
menuCheckStrictly
});
if (error) return;
}
window.$message?.success($t('common.updateSuccess'));
closeDrawer();
emit('submitted');
}
watch(visible, () => {
if (visible.value) {
handleUpdateModelWhenEdit();
restoreValidation();
}
});
</script>
<template>
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
<NDrawerContent :title="title" :native-scrollbar="false" closable>
<NForm ref="formRef" :model="model" :rules="rules">
<NFormItem label="套餐名称" path="packageName">
<NInput v-model:value="model.packageName" placeholder="请输入套餐名称" />
</NFormItem>
<NFormItem label="关联菜单" path="menuIds">
<MenuTree
ref="menuTreeRef"
v-model:value="model.menuIds"
v-model:options="menuOptions"
v-model:cascade="model.menuCheckStrictly"
v-model:loading="menuLoading"
:immediate="operateType === 'add'"
/>
</NFormItem>
<NFormItem label="备注" path="remark">
<NInput v-model:value="model.remark" placeholder="请输入备注" />
</NFormItem>
</NForm>
<template #footer>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
</NSpace>
</template>
</NDrawerContent>
</NDrawer>
</template>
<style scoped></style>

75
src/views/system/tenant-package/modules/tenant-package-search.vue Normal file
View File

@ -0,0 +1,75 @@
<script setup lang="ts">
import { useDict } from '@/hooks/business/dict';
import { useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
defineOptions({
name: 'TenantPackageSearch'
});
interface Emits {
(e: 'reset'): void;
(e: 'search'): void;
}
const emit = defineEmits<Emits>();
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.System.TenantPackageSearchParams>('model', { required: true });
const { options: sysNormalDisableOptions } = useDict('sys_normal_disable');
async function reset() {
Object.assign(model.value.params!, {});
await restoreValidation();
emit('reset');
}
async function search() {
await validate();
emit('search');
}
</script>
<template>
<NCard :bordered="false" size="small" class="card-wrapper">
<NCollapse>
<NCollapseItem :title="$t('common.search')" name="user-search">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="8" label="套餐名称" path="packageName" class="pr-24px">
<NInput v-model:value="model.packageName" placeholder="请输入套餐名称" />
</NFormItemGi>
<NFormItemGi span="8" label="状态" path="status" class="pr-24px">
<NSelect
v-model:value="model.status"
placeholder="请选择状态"
:options="sysNormalDisableOptions"
clearable
/>
</NFormItemGi>
<NFormItemGi span="8" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCollapseItem>
</NCollapse>
</NCard>
</template>
<style scoped></style>