From 2f7c94770865c2b2db52f21e028faac9abcba4da Mon Sep 17 00:00:00 2001
From: lai <371757574@qq.com>
Date: Tue, 25 Jun 2024 16:46:47 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=9F=E6=88=B7=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/locales/en-US.ts         |    3 +-
 src/i18n/locales/zh-CN.ts         |    1 +
 src/views/system/tenant/index.vue | 1051 +++++++++++++++--------------
 3 files changed, 554 insertions(+), 501 deletions(-)

diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 9f2f4596..3fa833b0 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -1768,7 +1768,7 @@ export default {
         classId:'Number',
         classSort:'Sorting',
         status:'Status',
-        type:'Tenancy Type',
+        type:' Tenancy Type',
         createTime:'Creation Time',
         highClass:'Root Level',
         key:'Tenancy Key',
@@ -1785,6 +1785,7 @@ export default {
         SDSST:'Network Slice Rental',
         APN:'APN Rental',
         IMSI:'Card Rental',
+        treeSelectTip:'Please select the tenant to be configured on the left side',
       },
       post:{
         positionInfo:'Position Information',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 48241fc7..1f47f1c3 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -1785,6 +1785,7 @@ export default {
         SDSST:'网络切片租用',
         APN:'APN租用',
         IMSI:'卡租用',
+        treeSelectTip:'请在左侧选择需要配置的租户',
       },
       post:{
         positionInfo:'岗位信息',
diff --git a/src/views/system/tenant/index.vue b/src/views/system/tenant/index.vue
index 6db87ea5..a871931a 100644
--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw } from 'vue';
+import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal, Form } from 'ant-design-vue/lib';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useNeInfoStore from '@/store/modules/neinfo';
+import useI18n from '@/hooks/useI18n';
 import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
 import { ColumnsType } from 'ant-design-vue/lib/table';
 import {
   listDept,
@@ -13,15 +14,50 @@ import {
   updateDept,
   listDeptExcludeChild,
 } from '@/api/system/tenant';
-import { parseDateToStr } from '@/utils/date-utils';
-import { regExpMobile, regExpEmail } from '@/utils/regular-utils';
 import useDictStore from '@/store/modules/dict';
-import { parseDataToTree } from '@/utils/parse-tree-utils';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import useI18n from '@/hooks/useI18n';
+import { parseDateToStr } from '@/utils/date-utils';
+import { Form, Modal, message } from 'ant-design-vue';
+import { AnyARecord } from 'dns';
 
-const { t } = useI18n();
+const neInfoStore = useNeInfoStore();
 const { getDict } = useDictStore();
+const { t } = useI18n();
+
+/**表格分页器参数 */
+// let tablePagination = reactive({
+//   /**当前页数 */
+//   current: 1,
+//   /**每页条数 */
+//   pageSize: 20,
+//   /**默认的每页条数 */
+//   defaultPageSize: 20,
+//   /**指定每页可以显示多少条 */
+//   pageSizeOptions: ['10', '20', '50', '100'],
+//   /**只有一页时是否隐藏分页器 */
+//   hideOnSinglePage: false,
+//   /**是否可以快速跳转至某页 */
+//   showQuickJumper: true,
+//   /**是否可以改变 pageSize */
+//   showSizeChanger: true,
+//   /**数据总数 */
+//   total: 0,
+//   showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+//   onChange: (page: number, pageSize: number) => {
+//     tablePagination.current = page;
+//     tablePagination.pageSize = pageSize;
+//     queryParams.pageNum = page;
+//     queryParams.pageSize = pageSize;
+//     fnGetList();
+//   },
+// });
+
+/**左侧导航是否可收起 */
+let collapsible = ref<boolean>(true);
+
+/**改变收起状态 */
+function changeCollapsible() {
+  collapsible.value = !collapsible.value;
+}
 
 /**字典数据 */
 let dict: {
@@ -36,24 +72,14 @@ let dict: {
 
 /**查询参数 */
 let queryParams = reactive({
-  /**部门名称 */
+  /** 租户名称*/
   tenantName: '',
-  /**部门状态 */
-  status: undefined,
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
 });
 
-/**查询参数重置 */
-function fnQueryReset() {
-  queryParams = Object.assign(queryParams, {
-    tenantName: '',
-    status: undefined,
-  });
-  fnGetList();
-}
-
-/**表格全展开行key */
-let expandedRowKeys: any[] = [];
-
 /**表格状态类型 */
 type TabeStateType = {
   /**加载等待 */
@@ -64,10 +90,8 @@ type TabeStateType = {
   seached: boolean;
   /**记录数据 */
   data: object[];
-  /**全展开 */
-  expandedRowAll: boolean;
-  /**展开行key */
-  expandedRowKeys: (string | number)[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
 };
 
 /**表格状态 */
@@ -76,97 +100,71 @@ let tableState: TabeStateType = reactive({
   size: 'middle',
   seached: false,
   data: [],
-  expandedRowAll: false,
-  expandedRowKeys: [],
+  selectedRowKeys: [],
 });
 
-/**表格字段列 */
-let tableColumns: ColumnsType = [
-  {
-    title: t('views.system.dept.className'),
-    dataIndex: 'tenantName',
-    align: 'left',
-    width: 300,
-  },
-  {
-    title: t('views.system.dept.type'),
-    dataIndex: 'tenancyType',
-    key: 'tenancyType',
-    align: 'center',
-    width: 150,
-  },
-  {
-    title: t('views.system.dept.key'),
-    dataIndex: 'tenancyKey',
-    align: 'left',
-    width: 200,
-  },
+/**对象信息状态类型 */
+type StateType = {
+  /**租户数据 tree */
+  tenantTreeData: any[];
+  /**表格字段列排序 */
+  columnsDnd: Record<string, any>[];
+  /**已选择节点 */
+  selectedNode: '';
+  /**已选择节点名字 */
+  selectedName: '';
+};
 
-  {
-    title: t('views.system.dept.status'),
-    dataIndex: 'status',
-    key: 'status',
-    align: 'center',
-    width: 150,
-  },
-
-  {
-    title: t('views.system.dept.createTime'),
-    dataIndex: 'createTime',
-    align: 'center',
-    width: 150,
-    customRender(opt) {
-      if (+opt.value <= 0) return '';
-      return parseDateToStr(+opt.value);
-    },
-  },
-  {
-    title: t('common.operate'),
-    key: 'tenantId',
-    align: 'left',
-  },
-];
-
-/**表格紧凑型变更操作 */
-function fnTableSize({ key }: MenuInfo) {
-  tableState.size = key as SizeType;
-}
-
-/**表格展开行key */
-function fnTableExpandedRowsAll(checked: boolean | string | number) {
-  tableState.expandedRowKeys = checked ? expandedRowKeys : [];
-}
-
-/**表格展开行key */
-function fnTableExpandedRowsChange(expandedRows: (string | number)[]) {
-  tableState.expandedRowKeys = expandedRows;
-}
-
-/**初始上级部门选择树 */
-let treeDataAll: Record<string, any>[] = [];
+/**对象信息状态 */
+let state: StateType = reactive({
+  tenantTreeData: [],
+  columnsDnd: [],
+  selectedNode: '',
+  selectedName: '',
+});
 
 /**对话框对象信息状态类型 */
 type ModalStateType = {
-  /**详情框是否显示 */
-  visibleByView: boolean;
-  /**新增框或修改框是否显示 */
+  /**租户新增框或修改框是否显示 */
   visibleByEdit: boolean;
+  /**租户类型新增框或修改框是否显示 */
+  visibleByType: boolean;
+  /**租户类型按钮 */
+  typeButton: boolean;
   /**标题 */
   title: string;
-  /**表单数据 */
+  /**租户标题 */
+  typeTitle: string;
+  /**租户表单数据 */
   from: Record<string, any>;
+  /**租户类型表单数据 */
+  typeFrom: Record<string, any>;
   /**确定按钮 loading */
   confirmLoading: boolean;
-  /**上级部门选择树 */
-  treeData: Record<string, any>[];
 };
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
   visibleByEdit: false,
-  title: '部门',
+  visibleByType: false,
+  typeButton: false,
+  title: '租户',
+  typeTitle: '租户类型',
   from: {
+    tenantId: undefined,
+    tenantName: '',
+    email: '',
+    leader: '',
+    orderNum: 0,
+    parentId: '0',
+    ancestors: '',
+    parentName: null,
+    phone: '',
+    tenancyKey: '',
+    tenancyType: '',
+    status: '0',
+  },
+  typeFrom: {
     tenantId: undefined,
     tenantName: '',
     email: '',
@@ -181,19 +179,12 @@ let modalState: ModalStateType = reactive({
     status: '0',
   },
   confirmLoading: false,
-  treeData: [],
 });
 
 /**对话框内表单属性和校验规则 */
 const modalStateFrom = Form.useForm(
   modalState.from,
   reactive({
-    parentId: [
-      {
-        required: true,
-        message: t('views.system.dept.highClass') + t('common.unableNull'),
-      },
-    ],
     tenantName: [
       {
         required: true,
@@ -205,45 +196,112 @@ const modalStateFrom = Form.useForm(
   })
 );
 
-/**
- * 对话框弹出显示为 查看
- * @param tenantId 部门编号id
- */
-function fnModalVisibleByVive(tenantId: string | number) {
-  if (!tenantId) {
-    message.error(t('common.getInfoFail'), 2);
-    return;
-  }
-  if (modalState.confirmLoading) return;
-  const hide = message.loading(t('common.loading'), 0);
-  modalState.confirmLoading = true;
-  getDept(tenantId).then(res => {
-    modalState.confirmLoading = false;
-    hide();
-    if (res.code === RESULT_CODE_SUCCESS && res.data) {
-      if (res.data.parentId === '0') {
-        modalState.treeData = [
-          {
-            tenantId: '0',
-            parentId: '0',
-            tenantName: t('views.system.dept.node'),
-          },
-        ];
-      } else {
-        //modalState.treeData = treeDataAll;
+/**对话框内表单属性和校验规则 */
+const modalStateTypeFrom = Form.useForm(
+  modalState.typeFrom,
+  reactive({
+    tenancyType: [
+      {
+        required: true,
+        min: 1,
+        max: 50,
+        message: t('views.system.dept.type') + t('common.unableNull'),
+      },
+    ],
+    tenancyKey: [
+      {
+        required: true,
+        min: 1,
+        max: 50,
+        message: t('views.system.dept.key') + t('common.unableNull'),
+      },
+    ],
+  })
+);
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: 'Tenancy Type',
+    dataIndex: 'tenancyType',
+    key: 'tenancyType',
+    align: 'left',
+  },
+  {
+    title: 'Tenancy Key',
+    dataIndex: 'tenancyKey',
+    align: 'left',
+  },
+  {
+    title: 'Status',
+    dataIndex: 'status',
+    key: 'status',
+    align: 'center',
+    width: 150,
+  },
+  {
+    title: 'Create Time',
+    dataIndex: 'createTime',
+    align: 'left',
+    customRender(opt) {
+      if (+opt.value <= 0) return '';
+      return parseDateToStr(+opt.value);
+    },
+  },
+  {
+    title: t('common.operate'),
+    key: 'tenantId',
+    align: 'left',
+  },
+];
+
+/**选择树节点 */
+function fnSelectNode(_: any, info: any) {
+  state.selectedNode = info.node.tenantId;
+  state.selectedName = info.node.tenantName;
+  modalState.typeButton = true;
+  fnGetList(info.node.tenantId, 'table'); ///由于点击后 那些需要查询父节点为当前tenantId
+}
+
+/**获取数据 */
+function fnGetList(parentId?: any, tableFlag?: any) {
+  listDept({ parentId }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      if (tableFlag === 'tree') {
+        // 渲染左侧树列表
+        state.tenantTreeData = [];
+        res.data.forEach((item: any) => {
+          if (item.parentId === '0') {
+            state.tenantTreeData.push({
+              childern: undefined,
+              title: item.tenantName,
+              key: item.tenantId,
+              ...item,
+            });
+          }
+        });
+      } else if (tableFlag === 'table') {
+        // 渲染右测表格
+        tableState.data = res.data;
       }
-      modalState.from = Object.assign(modalState.from, res.data);
-      modalState.title = t('views.system.dept.classInfo');
-      modalState.visibleByView = true;
-    } else {
-      message.error(t('common.getInfoFail'), 2);
     }
   });
 }
 
 /**
- * 对话框弹出显示为 新增或者修改
- * @param tenantId 部门编号id, 不传为新增
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalState.visibleByType = false;
+  modalStateTypeFrom.resetFields();
+  modalStateFrom.resetFields();
+}
+
+/**
+ * 对话框弹出显示为 租户新增或者修改
+ * @param tenantId 租户编号id, 不传为新增
  * @param parentId 上级部门id
  */
 function fnModalVisibleByEdit(
@@ -255,34 +313,17 @@ function fnModalVisibleByEdit(
     if (parentId) {
       modalState.from.parentId = parentId;
     }
-    modalState.treeData = treeDataAll;
     modalState.title = t('common.addText') + t('views.system.dept.classInfo');
     modalState.visibleByEdit = true;
   } else {
+    //修改
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
     modalState.confirmLoading = true;
-    // 获取部门信息同时查询部门列表（排除节点）
-    Promise.all([getDept(tenantId), listDeptExcludeChild(tenantId)])
-      .then(resArr => {
-        if (resArr[0].code === RESULT_CODE_SUCCESS && resArr[0].data) {
-          modalState.from = Object.assign(modalState.from, resArr[0].data);
-          if (
-            resArr[1].code === RESULT_CODE_SUCCESS &&
-            Array.isArray(resArr[1].data)
-          ) {
-            if (resArr[1].data.length === 0) {
-              modalState.treeData = [
-                {
-                  tenantId: '0',
-                  parentId: '0',
-                  tenantName: t('views.system.dept.node'),
-                },
-              ];
-            } else {
-              modalState.treeData = parseDataToTree(resArr[1].data, 'tenantId');
-            }
-          }
+    getDept(tenantId)
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS && res.data) {
+          modalState.from = Object.assign(modalState.from, res.data);
           modalState.title =
             t('common.editText') + t('views.system.dept.classInfo');
           modalState.visibleByEdit = true;
@@ -294,11 +335,14 @@ function fnModalVisibleByEdit(
         modalState.confirmLoading = false;
         hide();
       });
+    modalState.title = t('common.editText') + t('views.system.dept.classInfo');
+    modalState.visibleByEdit = true;
+    // 获取部门信息同时查询部门列表（排除节点）
   }
 }
 
 /**
- * 对话框弹出确认执行函数
+ * 租户操作---弹出确认执行函数
  * 进行表达规则校验
  */
 function fnModalOk() {
@@ -307,7 +351,7 @@ function fnModalOk() {
     .then(() => {
       modalState.confirmLoading = true;
       const from = toRaw(modalState.from);
-      console.log('from', from);
+
       const dept = from.tenantId ? updateDept(from) : addDept(from);
       const hide = message.loading(t('common.loading'), 0);
       dept
@@ -319,11 +363,9 @@ function fnModalOk() {
             });
             modalState.visibleByEdit = false;
             // 新增时清空上级部门树重新获取
-            if (!from.tenantId) {
-              treeDataAll = [];
-            }
             modalStateFrom.resetFields();
-            fnGetList();
+            fnGetList(undefined, 'tree'); //渲染树状
+            tableState.data = []; //清空表格数据
           } else {
             message.error({
               content: `${res.msg}`,
@@ -342,23 +384,13 @@ function fnModalOk() {
 }
 
 /**
- * 对话框弹出关闭执行函数
- * 进行表达规则校验
- */
-function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
-  modalStateFrom.resetFields();
-}
-
-/**
- * 部门删除
- * @param tenantId 部门编号id
+ * 租户删除
+ * @param tenantId 租户编号id
  */
 function fnRecordDelete(tenantId: string | number) {
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.system.dept.delSure', { tenantId: tenantId }),
+    content: t('views.system.dept.delSure', { deptId: tenantId }),
     onOk() {
       const hide = message.loading(t('common.loading'), 0);
       delDept(tenantId).then(res => {
@@ -368,7 +400,7 @@ function fnRecordDelete(tenantId: string | number) {
             content: t('common.msgSuccess', { msg: t('common.deleteText') }),
             duration: 2,
           });
-          fnGetList();
+          fnGetList(undefined, 'tree'); //渲染树状
         } else {
           message.error({
             content: `${res.msg}`,
@@ -380,32 +412,144 @@ function fnRecordDelete(tenantId: string | number) {
   });
 }
 
-/**查询部门列表 */
-function fnGetList() {
-  if (tableState.loading) return;
-  tableState.loading = true;
-  listDept(toRaw(queryParams)).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      // 转换树状数据
-      const treeData = parseDataToTree(res.data, 'tenantId');
-      // 初始上级部门和展开编号key
-      if (treeDataAll.length <= 0) {
-        // 转换树状数据
-        treeDataAll = treeData;
-        // 展开编号key
-        expandedRowKeys = [
-          ...new Set(res.data.map((item: any) => item.parentId)),
-        ];
-        fnTableExpandedRowsAll(tableState.expandedRowAll);
-      }
-      tableState.data = treeData;
+/**
+ * 对话框弹出显示为 租户类型新增或者修改
+ * @param tenantId 部门编号id, 不传为新增
+ * @param parentId 上级部门id
+ */
+function fnModalVisibleByType(
+  tenantId?: string | number,
+  parentId?: string | number
+) {
+  if (!tenantId) {
+    modalStateTypeFrom.resetFields();
+    modalState.typeFrom.parentId = state.selectedNode;
+
+    if (parentId) {
+      modalState.typeFrom.parentId = parentId;
     }
-    tableState.loading = false;
+    modalState.typeTitle = t('common.addText') + t('views.system.dept.type');
+    modalState.visibleByType = true;
+  } else {
+    //修改
+    if (modalState.confirmLoading) return;
+    const hide = message.loading(t('common.loading'), 0);
+    modalState.confirmLoading = true;
+    getDept(tenantId)
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS && res.data) {
+          modalState.typeFrom = Object.assign(modalState.typeFrom, res.data);
+          modalState.typeTitle =
+            t('common.editText') + t('views.system.dept.type');
+          modalState.visibleByType = true;
+        } else {
+          message.error(t('common.getInfoFail'), 2);
+        }
+      })
+      .finally(() => {
+        modalState.confirmLoading = false;
+        hide();
+      });
+    modalState.title = t('common.editText') + t('views.system.dept.classInfo');
+    modalState.visibleByType = true;
+    // 获取部门信息同时查询部门列表（排除节点）
+  }
+}
+
+/**
+ * 租户类型操作---弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalTypeOk() {
+  modalStateTypeFrom
+    .validate()
+    .then(() => {
+      modalState.confirmLoading = true;
+      const from = toRaw(modalState.typeFrom);
+      from.parentId = state.selectedNode;
+      const dept = from.tenantId ? updateDept(from) : addDept(from);
+      const hide = message.loading(t('common.loading'), 0);
+      dept
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', { msg: modalState.typeTitle }),
+              duration: 2,
+            });
+            modalState.visibleByType = false;
+            // 新增时清空上级部门树重新获取
+            fnGetList(from.parentId, 'table'); //渲染表格
+            modalStateTypeFrom.resetFields();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 2);
+    });
+}
+
+/**
+ * 租户类型删除
+ * @param tenantId 租户编号id
+ */
+function fnTypeRecordDelete(
+  tenantId: string | number,
+  parentId: string | number
+) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.system.dept.delSure', { deptId: tenantId }),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      delDept(tenantId).then(res => {
+        hide();
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('common.msgSuccess', { msg: t('common.deleteText') }),
+            duration: 2,
+          });
+          fnGetList(parentId, 'table'); //渲染表格
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            duration: 2,
+          });
+        }
+      });
+    },
   });
 }
 
 onMounted(() => {
-  // 初始字典数据
+  // 获取网元网元列表
+  listDept({}).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      // 渲染左侧树列表
+      console.log(res.data);
+      state.selectedNode = res.data[1]?.tenantId;
+      //fnSelectNode(res.data[1]?.tenantId);
+
+      res.data.forEach((item: any) => {
+        if (item.parentId === '0') {
+          state.tenantTreeData.push({
+            childern: undefined,
+            title: item.tenantName,
+            key: item.tenantId,
+            ...item,
+          });
+        }
+      });
+    }
+  });
   Promise.allSettled([
     getDict('sys_normal_disable'),
     getDict('tenancy_type'),
@@ -417,302 +561,162 @@ onMounted(() => {
       dict.sysTenancyType = resArr[1].value;
     }
   });
-  // 获取列表数据
-  fnGetList();
 });
 </script>
-
 <template>
   <PageContainer>
-    <a-card
-      v-show="tableState.seached"
-      :bordered="false"
-      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
-    >
-      <!-- 表格搜索栏 -->
-      <a-form :model="queryParams" name="queryParams" layout="horizontal">
-        <a-row :gutter="16">
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.system.dept.className')"
-              name="tenantName"
-            >
-              <a-input
-                v-model:value="queryParams.tenantName"
-                allow-clear
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item :label="t('views.system.dept.status')" name="status">
-              <a-select
-                v-model:value="queryParams.status"
-                allow-clear
-                :options="dict.sysNormalDisable"
-              >
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item>
-              <a-space :size="8">
-                <a-button type="primary" @click.prevent="fnGetList">
-                  <template #icon><SearchOutlined /></template>
-                  {{ t('common.search') }}
-                </a-button>
-                <a-button type="default" @click.prevent="fnQueryReset">
-                  <template #icon><ClearOutlined /></template>
-                  {{ t('common.reset') }}</a-button
-                >
-              </a-space>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </a-card>
-
-    <a-card :bordered="false" :body-style="{ padding: '0px' }">
-      <!-- 插槽-卡片左侧侧 -->
-      <template #title>
-        <a-space :size="8" align="center">
-          <a-button
-            type="primary"
-            @click.prevent="fnModalVisibleByEdit()"
-            v-perms:has="['system:dept:add']"
-          >
-            <template #icon><PlusOutlined /></template>
-            {{ t('common.addText') }}
-          </a-button>
-        </a-space>
-      </template>
-
-      <!-- 插槽-卡片右侧 -->
-      <template #extra>
-        <a-space :size="8" align="center">
-          <a-tooltip>
-            <template #title>{{ t('views.system.role.openSwitch') }}</template>
-            <a-switch
-              v-model:checked="tableState.expandedRowAll"
-              :checked-children="t('views.system.dept.open')"
-              :un-checked-children="t('views.system.dept.open')"
-              size="small"
-              @change="fnTableExpandedRowsAll"
-            />
-          </a-tooltip>
-          <a-tooltip>
-            <template #title>{{ t('common.searchBarText') }}</template>
-            <a-switch
-              v-model:checked="tableState.seached"
-              :checked-children="t('common.switch.show')"
-              :un-checked-children="t('common.switch.hide')"
-              size="small"
-            />
-          </a-tooltip>
-          <a-tooltip>
-            <template #title>{{ t('common.reloadText') }}</template>
-            <a-button type="text" @click.prevent="fnGetList">
-              <template #icon><ReloadOutlined /></template>
-            </a-button>
-          </a-tooltip>
-          <a-tooltip placement="topRight">
-            <template #title>{{ t('common.sizeText') }}</template>
-            <a-dropdown placement="bottomRight" trigger="click">
-              <a-button type="text">
-                <template #icon><ColumnHeightOutlined /></template>
-              </a-button>
-              <template #overlay>
-                <a-menu
-                  :selected-keys="[tableState.size as string]"
-                  @click="fnTableSize"
-                >
-                  <a-menu-item key="default"
-                    >{{ t('common.size.default') }}
-                  </a-menu-item>
-                  <a-menu-item key="middle"
-                    >{{ t('common.size.middle') }}
-                  </a-menu-item>
-                  <a-menu-item key="small"
-                    >{{ t('common.size.small') }}
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
-          </a-tooltip>
-        </a-space>
-      </template>
-      <!-- 表格列表 -->
-      <a-table
-        class="table"
-        row-key="tenantId"
-        :columns="tableColumns"
-        :loading="tableState.loading"
-        :data-source="tableState.data"
-        :size="tableState.size"
-        :pagination="false"
-        :scroll="{ x: tableColumns.length * 120 }"
-        children-column-name="children"
-        :expanded-row-keys="tableState.expandedRowKeys"
-        @expandedRowsChange="fnTableExpandedRowsChange"
+    <a-row :gutter="16">
+      <a-col
+        :lg="4"
+        :md="4"
+        :xs="24"
+        style="margin-bottom: 24px"
+        v-show="collapsible"
       >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'status'">
-            <DictTag :options="dict.sysNormalDisable" :value="record.status" />
+        <!-- Tenant List -->
+        <a-card size="small" :bordered="false" title="Tenant List">
+          <template #extra>
+            <a-button size="small" @click.prevent="fnModalVisibleByEdit()">
+              <template #icon><PlusOutlined /></template>
+              {{ t('common.addText') }}
+            </a-button></template
+          >
+
+          <a-form layout="vertical" autocomplete="off">
+            <a-form-item name="mmlTree">
+              <a-directory-tree
+                :tree-data="state.tenantTreeData"
+                @select="fnSelectNode"
+              >
+                <!-- treeKey is tenantId -->
+                <template #title="{ key: treeKey, title }">
+                  <span>{{ title }}</span>
+                  <span
+                    class="iconMyStyle"
+                    @click.stop="fnModalVisibleByEdit(treeKey)"
+                  >
+                    <EditOutlined />
+                  </span>
+
+                  <span
+                    class="iconMyStyle"
+                    @click.stop="fnRecordDelete(treeKey)"
+                  >
+                    <DeleteOutlined />
+                  </span>
+                </template>
+              </a-directory-tree>
+            </a-form-item>
+          </a-form>
+        </a-card>
+      </a-col>
+
+      <a-col :lg="collapsible ? 20 : 24" :md="collapsible ? 20 : 24" :xs="24">
+        <a-card
+          size="small"
+          :bordered="false"
+          :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
+        >
+          <!-- 左侧区域 -->
+          <template #title>
+            <a-button type="text" @click.prevent="changeCollapsible()">
+              <template #icon>
+                <MenuFoldOutlined />
+              </template>
+            </a-button>
+            <a-typography-text v-if="state.selectedName">
+              {{ 'Tenant Name: ' + state.selectedName }}
+            </a-typography-text>
+            <a-typography-text type="danger" v-else>
+              {{ t('views.system.dept.treeSelectTip') }}
+            </a-typography-text>
           </template>
 
-          <template v-if="column.key === 'tenancyType'">
-            <DictTag
-              :options="dict.sysTenancyType"
-              :value="record.tenancyType"
-            />
-          </template>
-
-          <template v-if="column.key === 'tenantId'">
+          <!-- 右侧区域 -->
+          <template #extra>
             <a-space :size="8" align="center">
               <a-tooltip>
-                <template #title>{{ t('common.viewText') }}</template>
                 <a-button
-                  type="link"
-                  @click.prevent="fnModalVisibleByVive(record.tenantId)"
-                  v-perms:has="['system:dept:query']"
+                  size="small"
+                  @click.prevent="fnModalVisibleByType()"
+                  :disabled="!modalState.typeButton"
+                  :title="modalState.typeButton ? '' : 'Please Select Tenant'"
                 >
-                  <template #icon><ProfileOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip>
-                <template #title>{{ t('common.editText') }}</template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnModalVisibleByEdit(record.tenantId)"
-                  v-perms:has="['system:dept:edit']"
-                >
-                  <template #icon><FormOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip v-if="record.parentId !== '0'">
-                <template #title>{{ t('common.deleteText') }}</template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnRecordDelete(record.tenantId)"
-                  v-perms:has="['system:dept:remove']"
-                >
-                  <template #icon><DeleteOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip placement="topRight" v-if="record.status !== '0'">
-                <template #title>{{
-                  t('views.system.dept.addClass')
-                }}</template>
-                <a-button
-                  type="link"
-                  @click.prevent="
-                    fnModalVisibleByEdit(undefined, record.tenantId)
-                  "
-                  v-perms:has="['system:dept:add']"
-                >
-                  <template #icon><PlusOutlined /></template>
+                  <template #icon> <PlusOutlined /> </template>
+                  {{ t('common.addText') }}
                 </a-button>
               </a-tooltip>
             </a-space>
           </template>
-        </template>
-      </a-table>
-    </a-card>
 
-    <!-- 详情框 -->
-    <a-modal
-      width="800px"
-      :visible="modalState.visibleByView"
-      :title="modalState.title"
-      @cancel="fnModalCancel"
-    >
-      <a-form layout="horizontal" :label-col="{ span: 6 }" :labelWrap="true">
-        <a-form-item
-          :label="t('views.system.dept.highClass')"
-          name="parentId"
-          :label-col="{ span: 3 }"
-          :labelWrap="true"
-        >
-          <a-tree-select
-            :value="modalState.from.parentId"
-            disabled
-            :tree-data="modalState.treeData"
-            :field-names="{
-              children: 'children',
-              label: 'tenantName',
-              value: 'tenantId',
-            }"
-            tree-node-label-prop="tenantName"
+          <!-- 租户类型表格 -->
+          <a-table
+            class="table"
+            row-key="id"
+            :columns="tableColumns"
+            :loading="tableState.loading"
+            :data-source="tableState.data"
+            :size="tableState.size"
+            :scroll="{ x: 1000, y: 400 }"
           >
-            <template #suffixIcon></template>
-          </a-tree-select>
-        </a-form-item>
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.system.dept.className')"
-              name="tenantName"
-            >
-              {{ modalState.from.tenantName }}
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.system.dept.classSort')"
-              name="orderNum"
-            >
-              {{ modalState.from.orderNum }}
-            </a-form-item>
-          </a-col>
-        </a-row>
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'status'">
+                <DictTag
+                  :options="dict.sysNormalDisable"
+                  :value="record.status"
+                />
+              </template>
 
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.system.dept.status')" name="status">
-              <DictTag
-                :options="dict.sysNormalDisable"
-                :value="modalState.from.status"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.system.dept.classId')"
-              name="tenantId"
-            >
-              {{ modalState.from.tenantId }}
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="16">
-          <a-col :lg="24" :md="24" :xs="24">
-            <a-form-item
-              :label="t('views.system.dept.type')"
-              name="type"
-              :label-col="{ span: 3 }"
-              :labelWrap="true"
-            >
-              {{ modalState.from.tenancyType }}
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-      <template #footer>
-        <a-button key="cancel" @click="fnModalCancel">{{
-          t('common.cancel')
-        }}</a-button>
-      </template>
-    </a-modal>
+              <template v-if="column.key === 'tenancyType'">
+                <DictTag
+                  :options="dict.sysTenancyType"
+                  :value="record.tenancyType"
+                />
+              </template>
 
-    <!-- 新增框或修改框 -->
+              <template v-if="column.key === 'tenantId'">
+                <a-space :size="8" align="center">
+                  <a-tooltip>
+                    <template #title>{{ t('common.editText') }}</template>
+                    <a-button
+                      type="link"
+                      @click.prevent="fnModalVisibleByType(record.tenantId)"
+                      v-perms:has="['system:dept:edit']"
+                    >
+                      <template #icon><FormOutlined /></template>
+                    </a-button>
+                  </a-tooltip>
+
+                  <a-tooltip v-if="record.parentId !== '0'">
+                    <template #title>{{ t('common.deleteText') }}</template>
+                    <a-button
+                      type="link"
+                      @click.prevent="
+                        fnTypeRecordDelete(record.tenantId, record.parentId)
+                      "
+                      v-perms:has="['system:dept:remove']"
+                    >
+                      <template #icon><DeleteOutlined /></template>
+                    </a-button>
+                  </a-tooltip>
+                </a-space>
+              </template>
+            </template>
+          </a-table>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <!-- Tenant--新增修改框 -->
     <a-modal
       width="800px"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
       :title="modalState.title"
-      :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
       @cancel="fnModalCancel"
+      :confirm-loading="modalState.confirmLoading"
     >
       <a-form
         name="modalStateFrom"
@@ -720,30 +724,7 @@ onMounted(() => {
         :label-col="{ span: 8 }"
         :labelWrap="true"
       >
-        <a-form-item
-          :label="t('views.system.dept.highClass')"
-          name="parentId"
-          v-bind="modalStateFrom.validateInfos.parentId"
-          :label-col="{ span: 4 }"
-          :labelWrap="true"
-        >
-          <a-tree-select
-            v-model:value="modalState.from.parentId"
-            show-search
-            tree-default-expand-all
-            :tree-data="modalState.treeData"
-            :field-names="{
-              children: 'children',
-              label: 'tenantName',
-              value: 'tenantId',
-            }"
-            tree-node-label-prop="tenantName"
-            tree-node-filter-prop="tenantName"
-            style="width: 100%"
-            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
-          >
-          </a-tree-select>
-        </a-form-item>
+        {{ modalState.from }}
 
         <a-form-item
           :label="t('views.system.dept.className')"
@@ -751,12 +732,14 @@ onMounted(() => {
           v-bind="modalStateFrom.validateInfos.tenantName"
           :label-col="{ span: 4 }"
           :labelWrap="true"
+          v-show="modalState.from.parentId === '0' && state.selectedNode"
         >
           <a-input
             v-model:value="modalState.from.tenantName"
             allow-clear
             :maxlength="30"
-          ></a-input>
+          >
+          </a-input>
         </a-form-item>
 
         <a-row :gutter="16">
@@ -764,8 +747,8 @@ onMounted(() => {
             <a-form-item
               :label="t('views.system.dept.type')"
               name="type"
-
               :labelWrap="true"
+              v-show="modalState.from.parentId !== '0'"
             >
               <a-select
                 v-model:value="modalState.from.tenancyType"
@@ -775,11 +758,13 @@ onMounted(() => {
               </a-select>
             </a-form-item>
           </a-col>
+
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
               :label="t('views.system.dept.key')"
               name="key"
               :label-col="{ span: 4 }"
+              v-show="modalState.from.parentId !== '0'"
             >
               <a-input
                 v-model:value="modalState.from.tenancyKey"
@@ -815,7 +800,73 @@ onMounted(() => {
         </a-row>
       </a-form>
     </a-modal>
+
+    <!-- Tenant Type--新增修改框 -->
+    <a-modal
+      width="800px"
+      :keyboard="false"
+      :mask-closable="false"
+      :visible="modalState.visibleByType"
+      :title="modalState.typeTitle"
+      @ok="fnModalTypeOk"
+      @cancel="fnModalCancel"
+      :confirm-loading="modalState.confirmLoading"
+    >
+      <a-form
+        name="modalStateTypeFrom"
+        layout="horizontal"
+        :label-col="{ span: 8 }"
+        :labelWrap="true"
+      >
+        {{ modalState.typeFrom }}
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item
+              :label="t('views.system.dept.type')"
+              name="type"
+              :labelWrap="true"
+            >
+              <a-select
+                v-model:value="modalState.typeFrom.tenancyType"
+                allow-clear
+                :options="dict.sysTenancyType"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="24" :md="24" :xs="24">
+            <a-form-item
+              :label="t('views.system.dept.key')"
+              name="key"
+              :label-col="{ span: 4 }"
+            >
+              <a-input
+                v-model:value="modalState.typeFrom.tenancyKey"
+                allow-clear
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item :label="t('views.system.dept.status')" name="status">
+              <a-select
+                v-model:value="modalState.typeFrom.status"
+                default-value="0"
+                :options="dict.sysNormalDisable"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-modal>
   </PageContainer>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.iconMyStyle {
+  margin-left: 12px;
+}
+</style>