3 changed files with 101 additions and 17 deletions
@ -0,0 +1,30 @@ |
|||||||
|
/** |
||||||
|
* @program: kicc-ui |
||||||
|
* @description: 多租户相关操作 |
||||||
|
* @author: entfrm开发团队-王翔 |
||||||
|
* @create: 2022/4/8 |
||||||
|
*/ |
||||||
|
import { useUserStore } from '/@/store/modules/user'; |
||||||
|
import { changeTenant } from '/@/api/platform/system/controller/user'; |
||||||
|
|
||||||
|
export function useTenant() { |
||||||
|
const userStore = useUserStore(); |
||||||
|
|
||||||
|
// 切换多租户会改变当前系统中的数据环境
|
||||||
|
async function changeTenantEnv(tenantIds: string[], reload = true) { |
||||||
|
// 更改当前后端系统中的全局多租户数据
|
||||||
|
await changeTenant(tenantIds); |
||||||
|
// 更改当前前端系统中的全局多租户数据
|
||||||
|
const userInfo = userStore.getUserInfo; |
||||||
|
userInfo.tenantIds = tenantIds; |
||||||
|
userInfo.tenantId = tenantIds.join(','); |
||||||
|
userStore.setUserInfo(userInfo); |
||||||
|
reload && location.reload(); |
||||||
|
return tenantIds; |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
userStore, |
||||||
|
changeTenantEnv |
||||||
|
}; |
||||||
|
} |
@ -1,39 +1,93 @@ |
|||||||
<template> |
<template> |
||||||
<Select v-model:value="state.value" |
<AForm ref="formElRef" |
||||||
|
:model="state.modelRef" |
||||||
|
:scrollToFirstError="true" |
||||||
|
> |
||||||
|
<AFormItem name="tenantIds" |
||||||
|
style="margin-bottom:0px" |
||||||
|
:rules="[{ required: true, message: '请至少选择一个多租户,不然会产生很多脏数据!'}]" |
||||||
|
> |
||||||
|
<ASelect v-model:value="state.modelRef.tenantIds" |
||||||
:options="state.options" |
:options="state.options" |
||||||
:filterOption="filterOption" |
:filterOption="filterOption" |
||||||
mode="multiple" |
mode="multiple" |
||||||
|
:maxTagCount="4" |
||||||
|
:maxTagTextLength="10" |
||||||
placeholder="请选择多租户" |
placeholder="请选择多租户" |
||||||
style="width:100%" |
style="width:100%" |
||||||
@blur="handleBlur" |
|
||||||
/> |
/> |
||||||
|
</AFormItem> |
||||||
|
<AFormItem style="margin-bottom:0px"> |
||||||
|
<ARow> |
||||||
|
<ACol :span="12"> |
||||||
|
<a-button type="success" |
||||||
|
block |
||||||
|
@click="handleChangeTenant" |
||||||
|
> |
||||||
|
<Icon icon="fa-regular:save"/>保存 |
||||||
|
</a-button> |
||||||
|
</ACol> |
||||||
|
<ACol :span="12"> |
||||||
|
<a-button type="warning" |
||||||
|
block |
||||||
|
@click="()=>{}" |
||||||
|
> |
||||||
|
<Icon icon="ant-design:redo-outlined"/>还原 |
||||||
|
</a-button> |
||||||
|
</ACol> |
||||||
|
</ARow> |
||||||
|
</AFormItem> |
||||||
|
</AForm> |
||||||
</template> |
</template> |
||||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||||
import { reactive, onMounted } from 'vue'; |
import { reactive, onMounted, ref } from 'vue'; |
||||||
import { listTenant } from '/@/api/platform/system/controller/tenant'; |
import { listTenant } from '/@/api/platform/system/controller/tenant'; |
||||||
import { useUserStore } from '/@/store/modules/user'; |
import { useUserStore } from '/@/store/modules/user'; |
||||||
import { Select } from 'ant-design-vue'; |
import { Select, Row, Col, Form } from 'ant-design-vue'; |
||||||
|
import { useTenant } from '/@/hooks/web/useTenant'; |
||||||
|
import { Icon } from '/@/components/Icon'; |
||||||
|
|
||||||
const state = reactive<any>({ |
interface FormState { |
||||||
value: [], |
options: Recordable[]; |
||||||
options: [] |
modelRef: { |
||||||
|
tenantIds: string[]; |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
const ASelect = Select; |
||||||
|
const ARow = Row; |
||||||
|
const ACol = Col; |
||||||
|
const AForm = Form; |
||||||
|
const AFormItem = Form.Item; |
||||||
|
|
||||||
|
const formElRef = ref(); |
||||||
|
const { changeTenantEnv } = useTenant(); |
||||||
|
const state = reactive<FormState>({ |
||||||
|
options: [], |
||||||
|
modelRef: { |
||||||
|
tenantIds: [] |
||||||
|
} |
||||||
}); |
}); |
||||||
|
|
||||||
onMounted(async () => { |
onMounted(async () => { |
||||||
const result = await listTenant(); |
const result = await listTenant(); |
||||||
const userStore = useUserStore(); |
const userStore = useUserStore(); |
||||||
state.value = userStore.getUserInfo.tenantIds; |
state.modelRef.tenantIds = userStore.getUserInfo.tenantIds; |
||||||
state.options = result.data.map(tenant => ({ |
state.options = result.data.map(tenant => ({ |
||||||
value: tenant.code, |
value: tenant.code, |
||||||
label: tenant.name |
label: tenant.name |
||||||
})); |
})); |
||||||
}); |
}); |
||||||
|
|
||||||
|
/** 自定义搜索 */ |
||||||
function filterOption(input: string, option: any) { |
function filterOption(input: string, option: any) { |
||||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0; |
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0; |
||||||
} |
} |
||||||
|
|
||||||
function handleBlur() { |
/** 处理多租户更新 */ |
||||||
|
async function handleChangeTenant() { |
||||||
|
const formData = await formElRef.value.validate(); |
||||||
|
await changeTenantEnv(formData.tenantIds); |
||||||
} |
} |
||||||
|
|
||||||
</script> |
</script> |
||||||
|
Loading…
Reference in new issue