👣 重构底层多租户

kicc-ui/src/api/platform/system/controller/user.ts

@@ -45,4 +45,4 @@ export const resetPwd = (params: Partial<User>) => defHttp.put({ url: Api.resetP
 export const changeStatus = (id: string, status: string) => defHttp.put({ url: Api.changeStatus, data: { id: id, status: status } });
 
 /** 修改用户多租户 */
-export const changeTenant = (tenantIds: string) => defHttp.put({ url: Api.changeTenant, params: { tenantIds } });
+export const changeTenant = (tenantIds: string[]) => defHttp.get({ url: Api.changeTenant, params: { tenantIds } });

kicc-ui/src/hooks/web/useTenant.ts

@@ -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
+  };
+}

kicc-ui/src/layouts/default/setting/components/TenantSelect.vue

@@ -1,39 +1,93 @@
 <template>
-  <Select v-model:value="state.value"
-          :options="state.options"
-          :filterOption="filterOption"
-          mode="multiple"
-          placeholder="请选择多租户"
-          style="width:100%"
-          @blur="handleBlur"
-  />
+  <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"
+               :filterOption="filterOption"
+               mode="multiple"
+               :maxTagCount="4"
+               :maxTagTextLength="10"
+               placeholder="请选择多租户"
+               style="width:100%"
+      />
+    </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>
 <script lang="ts" setup>
-  import { reactive, onMounted } from 'vue';
+  import { reactive, onMounted, ref } from 'vue';
   import { listTenant } from '/@/api/platform/system/controller/tenant';
   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>({
-    value: [],
-    options: []
+  interface FormState {
+    options: Recordable[];
+    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 () => {
     const result = await listTenant();
     const userStore = useUserStore();
-    state.value = userStore.getUserInfo.tenantIds;
+    state.modelRef.tenantIds = userStore.getUserInfo.tenantIds;
     state.options = result.data.map(tenant => ({
       value: tenant.code,
       label: tenant.name
     }));
   });
 
+  /** 自定义搜索 */
   function filterOption(input: string, option: any) {
     return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
   }
 
-  function handleBlur() {
-
+  /** 处理多租户更新 */
+  async function handleChangeTenant() {
+    const formData = await formElRef.value.validate();
+    await changeTenantEnv(formData.tenantIds);
   }
 
 </script>