多租户前端修改提交

This commit is contained in:
yaoyn
2024-07-19 17:47:11 +08:00
parent d85c09bd83
commit 8034e9b090
23 changed files with 958 additions and 43 deletions

View File

@ -34,5 +34,9 @@ VITE_GLOB_PRINT_BASE_URL = http://114.116.210.204:3300
# 接口地址前缀,有些系统所有接口地址都有前缀,可以在这里统一加,方便切换
VITE_GLOB_API_URL_PREFIX =
#租户开关
VITE_TENANT_ENABLED = true
# 屏蔽通知消息的轮询
VITE_DISABLE_NEWS=false
# 禁用关闭页面提示
VITE_CLOSE_ALERT_DISABLED=true

View File

@ -36,3 +36,5 @@ VITE_GLOB_API_URL_PREFIX =
# 打包是否开启pwa功能
VITE_USE_PWA = false
#租户开关
VITE_TENANT_ENABLED = true

View File

@ -19,6 +19,7 @@
import { computed } from 'vue';
import { getLogoInfo } from './api/system/login';
import { onBeforeUnmount } from 'vue';
import {getAppEnvConfig} from "/@/utils/env";
// support Multi-language
const { getLocale } = useLocale();
@ -54,7 +55,9 @@
return '关闭提示';
};
window.addEventListener('beforeunload', beforeUnloadHandler);
if(!getAppEnvConfig().VITE_CLOSE_ALERT_DISABLED){
window.addEventListener('beforeunload', beforeUnloadHandler);
}
onBeforeUnmount(() => {
window.removeEventListener('beforeunload', beforeUnloadHandler);

View File

@ -6,6 +6,7 @@ import { DesktopData } from '/@/model/desktop/designer';
export interface LoginParams {
userName: string;
password: string;
tenantCode: string;
deviceType?: number;
}
@ -18,6 +19,9 @@ export interface RoleInfo {
export type DepartmentInfo = RoleInfo;
export type PostInfo = RoleInfo;
export type TenantInfo = RoleInfo;
/**
* @description: Login interface return value
*/

View File

@ -9,6 +9,7 @@ enum Api {
AllTree = '/system/menu/all-tree',
jumpMenuTree = '/system/menu/child-tree',
SimpleTree = '/system/menu/simple-tree',
TenantSimpleTree = '/system/menu/tenant-auth-tree',
Menu = '/system/menu',
Button = '/system/menu/button',
Column = '/system/menu-colum/list',
@ -75,6 +76,24 @@ export async function getMenuSimpleTree(params?: MenuTreeParams, mode: ErrorMess
);
}
/**
* @description: 查询菜单树
*/
export async function getTenantMenuSimpleTree(
params?: MenuTreeParams,
mode: ErrorMessageMode = 'modal',
) {
return defHttp.get(
{
url: Api.TenantSimpleTree,
params,
},
{
errorMessageMode: mode,
},
);
}
/**
* @description: 删除菜单(批量删除)
*/

View File

@ -0,0 +1,193 @@
import { defHttp } from '/@/utils/http/axios';
import { ErrorMessageMode } from '/#/axios';
import { TenantModel, TenantPageListParams, TenantPageListParamsModel } from './model';
enum Api {
Page = '/system/tenant/page',
List = '/system/tenant/list',
Info = '/system/tenant/info',
Tenant = '/system/tenant',
Status = '/system/tenant/status',
Authorize = '/system/tenant/authorize',
Switch = '/system/switch-tenant',
}
/**
* @description: 查询租户分页列表
*/
export async function getTenantPageList(
params: TenantPageListParamsModel,
mode: ErrorMessageMode = 'modal',
) {
return defHttp.get<TenantPageListParamsModel>(
{
url: Api.Page,
params,
},
{
errorMessageMode: mode,
},
);
}
/**
* @description: 查询租户所有 不分页
*/
export async function getTenantAllList(mode: ErrorMessageMode = 'modal') {
return defHttp.get<TenantPageListParamsModel>(
{
url: Api.List,
},
{
errorMessageMode: mode,
},
);
}
/**
* @description: 删除租户(批量删除)
*/
export async function deleteTenant(ids: string[], mode: ErrorMessageMode = 'modal') {
return defHttp.delete<number>(
{
url: Api.Tenant,
data: ids,
},
{
errorMessageMode: mode,
},
);
}
/**
* @description: 新增租户
*/
export async function addTenant(role: Recordable, mode: ErrorMessageMode = 'modal') {
return defHttp.post<number>(
{
url: Api.Tenant,
params: role,
},
{
errorMessageMode: mode,
},
);
}
/**
* @description: 获取角色信息
*/
export async function getTenant(id: string, mode: ErrorMessageMode = 'modal') {
return defHttp.get<TenantModel>(
{
url: Api.Info,
params: { id },
},
{
errorMessageMode: mode,
},
);
}
/**
* @description: 更新租户
*/
export async function updateTenant(role: Recordable, mode: ErrorMessageMode = 'modal') {
return defHttp.put<number>(
{
url: Api.Tenant,
data: role,
},
{
errorMessageMode: mode,
},
);
}
/**
* @description: 更新租户状态
*/
export async function updateTenantStatus(
id: string,
status: number,
mode: ErrorMessageMode = 'modal',
) {
return defHttp.put<number>(
{
url: Api.Status,
data: {
id,
enabledMark: status,
},
},
{
errorMessageMode: mode,
},
);
}
/**
* @description: 查询租户列表
*/
export async function getTenantList(
params: {
keyword: string;
},
mode: ErrorMessageMode = 'modal',
) {
return defHttp.get<TenantPageListParams>(
{
url: Api.List,
params,
},
{
errorMessageMode: mode,
},
);
}
/**
* @description: 获取租户授权的菜单
*/
export async function getAuthorize(id: string, mode: ErrorMessageMode = 'modal') {
return defHttp.get(
{
url: Api.Authorize,
params: { id },
},
{
errorMessageMode: mode,
},
);
}
/**
* @description: 设置租户功能权限
*/
export async function setAuthorize(params: Recordable, mode: ErrorMessageMode = 'modal') {
return defHttp.post<number>(
{
url: Api.Authorize,
params,
},
{
errorMessageMode: mode,
},
);
}
/**
* @description: 切换岗位
*/
export async function changeTenant(tenantCode: String, mode: ErrorMessageMode = 'modal') {
return defHttp.post(
{
url: Api.Switch,
data: { tenantCode },
},
{
errorMessageMode: mode,
},
);
}

View File

@ -0,0 +1,36 @@
import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
export interface TenantPageListParams {
name: string; //角色名
code: string; //编号
startTime: string; //租户开始时间
endTime: string; //租户结束时间
remark: string; //备注
}
export interface TenantInfo {
id: string;
name: string; //角色名
code: string; //编号
startTime: string; //租户开始时间
endTime: string; //租户结束时间
remark: string; //备注
}
/**
* @description: Request list interface parameters
*/
export type TenantPageListParamsModel = BasicPageParams & TenantPageListParams;
export interface TenantModel {
id: string;
name: string; //角色名
code: string; //编号
startTime: string; //租户开始时间
endTime: string; //租户结束时间
remark: string; //备注
}
/**
* @description: Request list return value
*/
export type RolePageListResultModel = BasicFetchResult<TenantPageListParams>;

View File

@ -6,6 +6,7 @@ import appSearch from './src/search/AppSearch.vue';
import appLocalePicker from './src/AppLocalePicker.vue';
import appDarkModeToggle from './src/AppDarkModeToggle.vue';
import userPostChange from './src/UserPostChange.vue';
import userTenantChange from './src/UserTenantChange.vue';
export { useAppProviderContext } from './src/useAppContext';
export const AppLogo = withInstall(appLogo);
@ -14,3 +15,4 @@ export const AppSearch = withInstall(appSearch);
export const AppLocalePicker = withInstall(appLocalePicker);
export const AppDarkModeToggle = withInstall(appDarkModeToggle);
export const UserPostChange = withInstall(userPostChange);
export const UserTenantChange = withInstall(userTenantChange);

View File

@ -0,0 +1,116 @@
<template>
<Tooltip placement="bottom" :mouseEnterDelay="0.5">
<Dropdown v-if="formInfo.tenants.length>1"
placement="bottom"
:trigger="['click']"
:dropMenuList="formInfo.tenants"
:selectedKeys="selectedKeys"
@menu-event="handleMenuEvent"
overlayClassName="app-locale-picker-overlay"
>
<span class="cursor-pointer flex items-center" style="margin-left: 10px;">
<Icon icon="ant-design:apartment-outlined" size="18" style="color:#222222"/>
<span style="color: rgba(0, 0, 0, 0.85);margin-left: 5px;">{{formInfo.tenantName}}</span>
</span>
</Dropdown>
<span v-else class="flex items-center" style="margin-left: 10px;">
<Icon icon="ant-design:apartment-outlined" size="18" style="color:#222222"/>
<span style="color: rgba(0, 0, 0, 0.85);margin-left: 5px;">{{formInfo.tenantName}}</span>
</span>
</Tooltip>
</template>
<script lang="ts" setup>
import type { DropMenu } from '/@/components/Dropdown';
import { ref, watchEffect, watch, h } from 'vue';
import { Dropdown } from '/@/components/Dropdown';
import { Icon } from '/@/components/Icon';
import { storeToRefs } from 'pinia';
import { Tooltip } from 'ant-design-vue';
import { useUserStore } from '/@/store/modules/user';
import { changeTenant } from '/@/api/system/tenant';
import { useI18n } from '/@/hooks/web/useI18n';
import {useMessage} from "/@/hooks/web/useMessage";
import {useTabs} from "/@/hooks/web/useTabs";
import {router} from "/@/router";
import {setupRouterGuard} from "/@/router/guard";
import {usePermissionStore} from "/@/store/modules/permission";
import {useMenuSetting} from "/@/hooks/setting/useMenuSetting";
import {useAppInject} from "/@/hooks/web/useAppInject";
import {useAppStore} from "/@/store/modules/app";
const userStore = useUserStore();
const { t } = useI18n();
const { userInfo } = storeToRefs(userStore);
const { closeAll } = useTabs(router);
const permissionStore = usePermissionStore();
const { getShowTopMenu } = useMenuSetting();
const { getIsMobile } = useAppInject();
const appStore = useAppStore();
const formInfo: any = ref({
tenants: [],
tenantId: '',
tenantCode: '',
tenantName: '',
});
getDropMenuList();
watch(
() => userInfo.value,
(val) => {
if (val) getDropMenuList();
},
);
const selectedKeys = ref<string[]>([]);
watchEffect(() => {
selectedKeys.value = [formInfo.value.tenantCode];
});
function getDropMenuList() {
if (userInfo.value?.tenants) {
formInfo.value = userInfo.value;
formInfo.value.tenants.forEach((o) => {
o.text = o.name;
o.event = o.code;
});
}
}
async function toggleLocale(lang: string) {
appStore.setPageLoadingAction(true);
let res = await changeTenant(lang);
await userStore.afterLoginAction(true);
closeAll();
await setupRouterGuard(router);
await permissionStore.changeSubsystem(getShowTopMenu.value, getIsMobile.value);
if(permissionStore.getSubSysList.length>0){
permissionStore.setSubSystem(permissionStore.getSubSysList[0].id);
}else{
permissionStore.setSubSystem("");
}
//appStore.setPageLoadingAction(false);
//location.reload();
}
function handleMenuEvent(menu: DropMenu) {
if (formInfo.value.tenantCode === menu.event) {
return;
}
const { createConfirm } = useMessage();
createConfirm({
iconType: 'warning',
title: () => h('span', t('温馨提醒')),
content: () => h('span', t('是否确认切换租户?未保存的数据可能会丢失!')),
onOk: async () => {
toggleLocale(menu.event as string);
},
okText: () => t('确认'),
cancelText: () => t('取消'),
});
}
</script>
<style lang="less">
.app-locale-picker-overlay {
.ant-dropdown-menu-item {
min-width: 160px;
}
}
</style>

View File

@ -1,58 +1,58 @@
<template>
<a-date-picker
:size="size"
v-model:value="modelValue"
:placeholder="placeholder"
:format="format"
:valueFormat="format"
:allowClear="allowClear"
:disabled="disabled"
:showTime="format === 'YYYY-MM-DD HH:mm:ss'"
:picker="picker"
@change="handleChange"
/>
<a-date-picker
:size="size"
v-model:value="modelValue"
:placeholder="placeholder"
:format="format"
:valueFormat="format"
:allowClear="allowClear"
:disabled="originalDisabled"
:showTime="format === 'YYYY-MM-DD HH:mm:ss'"
:picker="picker"
@change="handleChange"
/>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs';
import { ref, watch, computed } from 'vue';
import dayjs, {Dayjs} from 'dayjs';
import {ref, watch, computed} from 'vue';
const props = defineProps({
const props = defineProps({
value: [dayjs, String, Object],
size: String,
placeholder: String,
format: String,
allowClear: Boolean,
disabled: Boolean,
});
const modelValue = ref<string>();
const emit = defineEmits(['update:value']);
originalDisabled: {
type: Boolean,
default: false
}
});
const modelValue = ref<Dayjs>();
const emit = defineEmits(['update:value']);
const picker = computed(() => {
const picker = computed(() => {
let time = 'date';
switch (props.format) {
case 'YYYY-MM':
time = 'month';
break;
case 'YYYY':
time = 'year';
break;
case 'YYYY-MM':
time = 'month';
break;
case 'YYYY':
time = 'year';
break;
}
return time;
});
watch(
});
watch(
() => props.value,
(val) => {
if (val && typeof val !== 'string') {
modelValue.value = val?.format(props.format);
} else {
modelValue.value = val || '';
}
modelValue.value = dayjs(val || '');
},
{
immediate: true,
immediate: true,
},
);
const handleChange = (time) => {
);
const handleChange = (time) => {
emit('update:value', time);
};
};
</script>

View File

@ -99,6 +99,7 @@ componentMap.set('CheckboxGroup', Checkbox.Group);
componentMap.set('ApiCascader', ApiCascader);
componentMap.set('Slider', Slider);
componentMap.set('Rate', Rate);
componentMap.set('DeptTree', SelectDepartment);
componentMap.set('Dept', SelectDepartmentV2);
componentMap.set('User', SelectUserV2);
componentMap.set('Info', CommonInfo);

View File

@ -124,6 +124,7 @@ export type ComponentType =
| 'Card'
| 'ChildTable'
| 'Divider'
| 'DeptTree'
| 'Dept'
| 'User'
| 'Info'

View File

@ -178,7 +178,12 @@
let id = await submit(saveRowKey);
let rowKey = getRowKey();
values[rowKey] = id;
values['_id'] = id
values['_id'] = id;
//重新查一遍
let newValues=await SystemFormRef.value.setFormDataFromId(id);
if(newValues){
values=newValues;
}
}
return values;

View File

@ -88,6 +88,9 @@
onMounted(async () => {
await permissionStore.changeSubsystem(getShowTopMenu.value, getIsMobile.value);
system.value = permissionStore.getSubSysList;
if(system.value.length>0){
changeSystem(system.value[0].id);
}
});
//切换系统

View File

@ -25,7 +25,7 @@
<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
<UserPostChange v-if="false" />
<UserTenantChange v-if="getAppEnvConfig().VITE_TENANT_ENABLED" />
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" ref="drawer" />
<UserDropDown @menu-click="onMenuClick" :theme="getHeaderTheme" :show-settings="getShowSetting" />
</div>
@ -49,7 +49,7 @@
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
import { SettingButtonPositionEnum } from '/@/enums/appEnum';
import { UserPostChange } from '/@/components/Application';
import { UserTenantChange } from '/@/components/Application';
import { LayoutBreadcrumb, Notify, ErrorAction } from './components';
import UserDropDown from '/@/layouts/default/header/components/user-dropdown/DropDown.vue';
@ -58,9 +58,11 @@
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { useLocale } from '/@/locales/useLocale';
import {getAppEnvConfig} from "/@/utils/env";
export default defineComponent({
name: 'LayoutHeader',
methods: {getAppEnvConfig},
components: {
LayHeader: Layout.Header,
AppLogo,
@ -74,7 +76,7 @@
SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
loading: true
}),
UserPostChange
UserTenantChange
},
props: {
fixed: propTypes.bool

View File

@ -1725,6 +1725,7 @@ export function buildSimpleFormCode(model: GeneratorConfig, _tableInfo: TableInf
await getFormDataEvent(formEventConfigs, state.formModel,
systemFormRef.value,
formProps.schemas); //表单事件:获取表单数据
return record;
} catch (error) {
}

View File

@ -18,6 +18,20 @@
</InputPassword>
</FormItem>
<FormItem v-if="getAppEnvConfig().VITE_TENANT_ENABLED" name="tenantCode" class="enter-x">
<label class="form-title"> {{ t('租户码') }}</label>
<Input
size="large"
visibilityToggle
v-model:value="formData.tenantCode"
:placeholder="t('租户码')"
style="height: 58px"
>
<template #prefix>
<IconFontSymbol icon="zuzhiguanli" class="user-icon" />
</template>
</Input>
</FormItem>
<ARow class="enter-x">
<ACol :span="12">
<FormItem>
@ -59,6 +73,7 @@
import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
import { useRouter } from 'vue-router';
import { getAppEnvConfig } from '/@/utils/env';
const ACol = Col;
const ARow = Row;
@ -81,7 +96,8 @@
const formData = reactive({
account: 'admin',
password: '123456'
password: 'YUdean@2024',
tenantCode: 'system'
});
onMounted(async () => {
@ -122,6 +138,7 @@
if (loginInfo) {
formData.account = Base64.decode(JSON.parse(loginInfo).account);
formData.password = Base64.decode(JSON.parse(loginInfo).password);
formData.tenantCode = Base64.decode(JSON.parse(loginInfo).tenantCode);
}
});
@ -139,6 +156,7 @@
const userInfo = await userStore.login({
password: data.password,
userName: data.account,
tenantCode: data.tenantCode,
deviceType: 0, //pc-0,app-1
mode: 'none' //不要默认的错误提示
});
@ -151,7 +169,8 @@
if (rememberMe.value) {
const info = {
account: Base64.encode(data.account),
password: Base64.encode(data.password)
password: Base64.encode(data.password),
tenantCode: Base64.encode(data.tenantCode)
};
window.localStorage.setItem('USER__LOGIN__INFO__', JSON.stringify(info));
} else {

View File

@ -35,6 +35,19 @@
</InputPassword>
</FormItem>
<FormItem v-if="getAppEnvConfig().VITE_TENANT_ENABLED" name="tenantCode" class="enter-x">
<label class="form-title"> {{ t('租户码') }}</label>
<Input
size="large"
visibilityToggle
v-model:value="formData.tenantCode"
:placeholder="t('租户码')"
style="height: 58px"
><template #prefix>
<IconFontSymbol icon="mima" class="user-icon" />
</template>
</Input>
</FormItem>
<ARow class="enter-x">
<ACol :span="12">
<FormItem>
@ -117,6 +130,7 @@
import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
import { getOauthAuthorizeUrl } from '/@/api/system/login';
import { useRouter } from 'vue-router';
import { getAppEnvConfig } from '/@/utils/env';
// import { nextTick } from 'vue';
const ACol = Col;
@ -144,6 +158,7 @@
const formData = reactive({
account: 'admin',
password: '123456',
tenantCode: 'system',
});
onMounted(async () => {
@ -202,6 +217,7 @@
const userInfo = await userStore.login({
password: data.password,
userName: data.account,
tenantCode: data.tenantCode,
deviceType: 0, //pc-0,app-1
mode: 'none', //不要默认的错误提示
});

View File

@ -0,0 +1,112 @@
<template>
<BasicModal
v-bind="$attrs"
@register="registerRoleAuthModal"
:title="t('功能授权')"
destroy-on-close
@ok="handleSubmit"
width="40%"
>
<div style="margin-left: 30%">
<div class="text-base border-l-6 border-[#5e95ff] pl-3 h-5 leading-5 mb-3 ml-2">
{{ t('系统功能') }}
</div>
<div class="treebox">
<BasicTree
:treeData="treeData"
checkable
ref="treeRef"
@check="handleTreeSelect"
:fieldNames="{ title: 'title', key: 'id' }"
>
<template #title="{ title, systemName, parentId }">
<div v-if="parentId == 0">{{ title }} {{ systemName }}</div>
<div v-else>{{ title }}</div>
</template>
</BasicTree>
</div>
</div>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { getTenantMenuSimpleTree } from '/@/api/system/menu';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { TreeItem, BasicTree, TreeActionType } from '/@/components/Tree';
import { useMessage } from '/@/hooks/web/useMessage';
import { getAuthorize, setAuthorize } from '/@/api/system/tenant';
import { useI18n } from '/@/hooks/web/useI18n';
const emits = defineEmits(['success', 'register']);
const { notification } = useMessage();
const { t } = useI18n();
const treeRef = ref<Nullable<TreeActionType>>(null);
const treeData = ref<TreeItem[]>([]);
const menuKeys = ref<string[]>([]);
const rowId = ref('');
function getTree(tree) {
return tree || null;
}
const [registerRoleAuthModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false });
rowId.value = data.id;
treeData.value = await getTenantMenuSimpleTree();
const authList = await getAuthorize(rowId.value);
menuKeys.value = authList || [];
let menuCheckedKey = [];
menuKeys.value.forEach((o) => {
getParentKeys(menuCheckedKey, treeData.value, o);
});
menuKeys.value = menuCheckedKey;
getTree(unref(treeRef)).setCheckedKeys(authList);
getTree(unref(treeRef)).expandAll(true);
});
async function handleSubmit() {
try {
setModalProps({ confirmLoading: true });
await setAuthorize({
id: rowId.value,
menuIds: menuKeys.value,
});
notification.success({
message: t('提示'),
description: t('功能授权更新成功'),
});
closeModal();
emits('success');
} catch (error) {
setModalProps({ confirmLoading: false });
}
}
function handleTreeSelect(keys, e) {
//keys 所有全选中的key
//e.halfCheckedKeys 所有半选中的
//如果没有半选 就证明全部全选 直接使用keys
//如果有半选需要 使用keys + e.halfCheckedKeys
const menuSelect: string[] = [...e.halfCheckedKeys, ...keys];
menuKeys.value = menuSelect;
}
function getParentKeys(checkedKey, arr, keys) {
for (let i = 0; i < arr.length; i++) {
let o = arr[i];
if (o.id == keys) {
checkedKey.push(o.id);
if (o.parentId > 0 && !checkedKey.includes(o.parentId)) {
checkedKey.push(o.parentId);
}
}
if (o.children?.length > 0) {
getParentKeys(checkedKey, o.children, keys);
}
}
}
</script>

View File

@ -0,0 +1,143 @@
<template>
<BasicModal
v-bind="$attrs"
@register="registerDrawer"
showFooter
:title="getTitle"
width="50%"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
// import { useI18n } from 'vue-i18n';
import { addTenant, updateTenant } from '/@/api/system/tenant';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
const formSchema: FormSchema[] = [
{
field: 'name',
label: t('租户名称'),
component: 'Input',
required: true,
colProps: { lg: 24, md: 24 },
},
{
field: 'code',
label: t('租户编码'),
component: 'Input',
required: true,
colProps: { lg: 24, md: 24 },
},
{
field: 'startTime',
label: t('开始时间'),
component: 'DatePicker',
required: true,
colProps: { lg: 24, md: 24 },
componentProps: {
getPopupContainer: () => document.body,
},
},
{
field: 'endTime',
label: t('结束时间'),
component: 'DatePicker',
required: true,
colProps: { lg: 24, md: 24 },
componentProps: {
getPopupContainer: () => document.body,
},
},
{
field: 'enabledMark',
label: t('状态'),
component: 'RadioButtonGroup',
defaultValue: 1,
componentProps: {
options: [
{ label: t('启用'), value: 1 },
{ label: t('禁用'), value: 0 },
],
},
required: true,
},
{
field: 'rootDepartmentId',
label: t('根部门'),
component: 'DeptTree',
defaultValue: 1,
componentProps: {
},
required: true,
},
{
field: 'remark',
label: t('备注'),
component: 'InputTextArea',
colProps: { lg: 24, md: 24 },
},
];
const isUpdate = ref(true);
const { notification } = useMessage();
const rowId = ref('');
const emit = defineEmits(['success', 'register']);
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { lg: 12, md: 24 },
});
const [registerDrawer, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
rowId.value = data.record.id;
setFieldsValue({
...data.record,
});
}
});
const getTitle = computed(() => (!unref(isUpdate) ? t('新增租户') : t('更新租户')));
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
if (!unref(isUpdate)) {
//false 新增
await addTenant(values);
notification.success({
message: t('提示'),
description: t('新增成功'),
}); //提示消息
} else {
values.id = rowId.value;
await updateTenant(values);
notification.success({
message: t('提示'),
description: t('编辑成功'),
}); //提示消息
}
closeModal();
emit('success');
} catch (error) {
setModalProps({ confirmLoading: false });
}
}
</script>

View File

@ -0,0 +1,222 @@
<template>
<PageWrapper dense contentFullHeight fixedHeight>
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleCreate">
{{ t('新增租户') }}
</a-button>
<a-button type="primary" @click="handleAuth">
{{ t('功能授权') }}
</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex == 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
popConfirm: {
title: t('是否确认删除'),
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template>
</BasicTable>
<TenantDrawer @register="registerDrawer" @success="handleSuccess" />
<AuthModal @register="registerModal" @success="handleSuccess" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { h } from 'vue';
import { BasicTable, useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
import { useModal } from '/@/components/Modal';
import { PageWrapper } from '/@/components/Page';
import TenantDrawer from './components/TenantDrawer.vue';
import AuthModal from './components/AuthModal.vue';
import { Switch } from 'ant-design-vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { deleteTenant, getTenantPageList, updateTenantStatus } from '/@/api/system/tenant';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
const columns: BasicColumn[] = [
{
title: t('租户名'),
dataIndex: 'name',
align: 'left',
sorter: true,
},
{
title: t('租户编码'),
dataIndex: 'code',
sorter: true,
align: 'left',
},
{
title: t('开始时间'),
dataIndex: 'startTime',
sorter: true,
align: 'left',
},
{
title: t('结束时间'),
dataIndex: 'endTime',
sorter: true,
align: 'left',
},
{
title: t('状态'),
dataIndex: 'enabledMark',
sorter: true,
customRender: ({ record }) => {
if (!Reflect.has(record, 'pendingStatus')) {
record.pendingStatus = false;
}
return h(Switch, {
checked: record.enabledMark === 1,
checkedChildren: t('已启用'),
unCheckedChildren: t('已禁用'),
loading: record.pendingStatus,
onChange(checked: boolean) {
record.pendingStatus = true;
const newStatus = checked ? 1 : 0;
const { createMessage } = useMessage();
updateTenantStatus(record.id, newStatus)
.then(() => {
record.enabledMark = newStatus;
createMessage.success(t('已成功修改租户状态'));
})
.catch(() => {
createMessage.error(t('修改角色租户失败'));
})
.finally(() => {
record.pendingStatus = false;
});
},
});
},
},
{
title: t('备注'),
dataIndex: 'remark',
align: 'left',
sorter: true,
},
];
const searchFormSchema: FormSchema[] = [
{
field: 'name',
label: t('租户名称'),
component: 'Input',
colProps: { lg: 8, md: 12, sm: 12 },
},
{
field: 'code',
label: t('租户编码'),
component: 'Input',
colProps: { lg: 8, md: 12, sm: 12 },
},
{
field: 'enabledMark',
label: t('状态'),
component: 'Select',
componentProps: {
options: [
{ label: t('启用'), value: 1 },
{ label: t('停用'), value: 0 },
],
},
colProps: { lg: 8, md: 12, sm: 12 },
},
];
const { notification } = useMessage();
const [registerDrawer, { openModal }] = useModal();
const [registerModal, { openModal: openAuthModal }] = useModal();
const [registerTable, { reload, getSelectRowKeys }] = useTable({
title: t('租户列表'),
api: getTenantPageList,
rowKey: 'id',
columns,
formConfig: {
rowProps: {
gutter: 16,
},
schemas: searchFormSchema,
actionColOptions: { span: 16 },
},
// beforeFetch: (params) => {
// return {
// ...params,
// isOrg: 1,
// };
// },
pagination: {
pageSize: 20,
},
striped: false,
useSearchForm: true,
showTableSetting: true,
showIndexColumn: false,
rowSelection: {
type: 'radio',
},
actionColumn: {
width: 100,
title: t('操作'),
dataIndex: 'action',
slots: { customRender: 'action' },
},
});
function handleCreate() {
openModal(true, {
isUpdate: false,
});
}
function handleAuth() {
if (getSelectRowKeys().length === 0) {
notification.warning({
message: t('警告'),
description: t('必须选中一行!'),
});
return;
}
openAuthModal(true, {
id: getSelectRowKeys()[0],
});
}
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
});
}
function handleDelete(record: Recordable) {
deleteTenant([record.id]).then((_) => {
reload();
notification.success({
message: t('提示'),
description: t('删除成功'),
}); //提示消息
});
}
function handleSuccess() {
reload();
}
</script>

3
types/config.d.ts vendored
View File

@ -139,6 +139,7 @@ export interface GlobConfig {
urlPrefix?: string;
// Project abbreviation
shortName: string;
tenantEnabled: boolean;
// outlink
outLink?: string;
//print url
@ -160,6 +161,8 @@ export interface GlobEnvConfig {
//file preview
VITE_GLOB_UPLOAD_PREVIEW?: string;
VITE_GLOB_REPORT_URL: string;
VITE_TENANT_ENABLED: boolean;
VITE_CLOSE_ALERT_DISABLED: boolean;
}
export interface LogoConfig {

8
types/store.d.ts vendored
View File

@ -1,6 +1,7 @@
import { ErrorTypeEnum } from '/@/enums/exceptionEnum';
import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
import { RoleInfo } from '/@/api/sys/model/userModel';
import {TenantInfo} from "/@/api/system/login/model";
// Lock screen information
export interface LockInfo {
@ -66,7 +67,14 @@ export interface UserInfo {
postId: string;
//岗位名称
postName: string;
//租户id
tenantId: string;
//租户名称
tenantName: string;
//租户编码
tenantCode: string;
tenants: TenantInfo[];
//所有部门
departments: DepartmentInfo[];
//所有部门