feat/新增菜单客户租户

 import { AccountParams } from './model/systemModel';
 import { defHttp } from '/@/utils/http/axios';
 enum Api {
-  TENANT_List = '/user/tenantt/page',
+  GET_TENANT_List = '/user/tenant/page',
+  ADD_TANANT_LIST = '/user/save_common_tenant',
 }
 
 export const getTenantList = (params: AccountParams) => {
-  const url = Api.TENANT_List;
+  const url = Api.GET_TENANT_List;
   return defHttp.get({ url: url, params });
 };
+export const addTenantList = (params: AccountParams) => {
+  const url = Api.ADD_TANANT_LIST;
+  return defHttp.post({ url: url, params });
+};

@@ -94,12 +94,17 @@ export const getAllRoleList = async (params?: RoleParams) => {
 };
 
 // 过滤角色列表----根据登录的账号所属的角色-过滤掉其他平台类型的角色
-export const filterRoleList = async () => {
-  const res = await defHttp.post<RoleListGetResultModel>({ url: Api.GetAllRoleList });
+export const filterRoleList = async (params?: { roleType: string }) => {
+  const res = await defHttp.post<RoleListGetResultModel>({
+    url: Api.GetAllRoleList,
+    params: params,
+  });
   const userInfo: any = getAuthCache(USER_INFO_KEY);
   const role = userInfo.roles[0];
   const options = res.filter((item) => {
-    if (role === 'SYS_ADMIN' || role === 'PLATFORM_ADMIN') {
+    if (params?.roleType && params.roleType === 'TENANT_ADMIN') {
+      return item;
+    } else if (role === 'SYS_ADMIN' || role === 'PLATFORM_ADMIN') {
       return item.roleType === 'PLATFORM_ADMIN';
     } else {
       return item.roleType === 'CUSTOMER_USER';

+<template>
+  <BasicModal
+    width="650px"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <div style="height: 40vh">
+      <BasicForm @register="registerForm">
+        <template #organizationId="{ model, field }">
+          <Button type="link" @click="handleOpenCreate" style="padding: 0; z-index: 9999"
+            >新增组织
+          </Button>
+          <BasicTree
+            v-if="organizationTreeData.length"
+            v-model:value="model[field]"
+            :treeData="organizationTreeData"
+            :checked-keys="checkGroup"
+            :expandedKeys="treeExpandData"
+            ref="basicTreeRef"
+            @check="handleCheckClick"
+            @unSelectAll="handleUnSelectAll"
+            @strictlyStatus="handleStrictlyStatus"
+            checkable
+            toolbar
+            @change="handleTreeSelect"
+          />
+        </template>
+        <template #roleSlot="{ model, field }">
+          <a-select
+            mode="multiple"
+            allowClear
+            placeholder="请选择角色"
+            v-model:value="model[field]"
+            @change="handleRoleSelect"
+            :options="roleOptions.map((item) => ({ value: item.value, label: item.label }))"
+          >
+            <template #dropdownRender="{ menuNode: menu }">
+              <v-nodes :vnodes="menu" />
+              <a-divider style="margin: 4px 0" />
+              <div @click="handleOpenRole" style="padding: 4px 0; cursor: pointer">
+                <plus-outlined />
+                新增角色
+              </div>
+            </template>
+          </a-select>
+        </template>
+      </BasicForm>
+
+      <OrganizationDrawer @register="registerDrawer" @success="handleReload" />
+    </div>
+  </BasicModal>
+  <RoleDrawer @register="registerRoleDrawer" @success="handleSuccess" />
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref, reactive, onMounted } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { accountFormSchema } from './config';
+  import { Button } from 'ant-design-vue';
+  import { findCurrentUserRelation, filterRoleList } from '/@/api/system/system';
+  import { addTenantList } from '/@/api/system/account';
+  import { BasicTree, TreeItem, CheckKeys, CheckEvent } from '/@/components/Tree';
+  import { findCurrentUserGroups } from '/@/api/system/group';
+  import { RoleOrOrganizationParam } from '/@/api/system/model/systemModel';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { copyTransTreeFun } from '/@/utils/fnUtils';
+  import { TOption } from '/@/views/rule/linkedge/config/config.data';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import RoleDrawer from '../../role/RoleDrawer.vue';
+  import OrganizationDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
+
+  export default defineComponent({
+    name: 'TenantModal',
+    components: {
+      BasicModal,
+      BasicForm,
+      Button,
+      BasicTree,
+      OrganizationDrawer,
+      PlusOutlined,
+      RoleDrawer,
+      VNodes: (_, { attrs }) => {
+        return attrs.vnodes;
+      },
+    },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const [registerRoleDrawer, { openDrawer }] = useDrawer();
+      const { createMessage } = useMessage();
+
+      const roleOptions = ref<TOption[]>([]);
+      const isUpdate = ref(true);
+      const rowId = ref('');
+      const organizationTreeData = ref<TreeItem[]>([]);
+      const basicTreeRef = ref();
+      const checkGroup = ref<string[]>([]);
+      const treeExpandData = ref([]);
+      const olderPhoneNumber = ref();
+      const singleEditPostPhoneNumber = reactive({
+        phoneNumber: '',
+      });
+      const checkedKeysWithHalfChecked = ref<(string | number)[]>([]);
+      const getRoleList = async () => {
+        const res = await filterRoleList({ roleType: 'TENANT_ADMIN' });
+        roleOptions.value = res.map((m) => {
+          return {
+            label: m.name,
+            value: m.id,
+          };
+        });
+      };
+
+      onMounted(async () => {
+        await getRoleList();
+      });
+      const handleOpenRole = () => {
+        openDrawer(true, {
+          isUpdate: false,
+        });
+      };
+      const clearValidateByField = (field: string) => {
+        clearValidate(field);
+      };
+      const handleRoleSelect = (e) => {
+        if (e?.length > 0) clearValidateByField('roleIds');
+        else validateFields(['roleIds']);
+      };
+      const handleTreeSelect = (e) => {
+        if (e) clearValidateByField('organizationIds');
+      };
+      const handleSuccess = async () => {
+        await getRoleList();
+      };
+      const [
+        registerForm,
+        {
+          setFieldsValue,
+          updateSchema,
+          resetFields,
+          validate,
+          getFieldsValue,
+          clearValidate,
+          validateFields,
+        },
+      ] = useForm({
+        labelWidth: 100,
+        schemas: accountFormSchema,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 18,
+        },
+      });
+      //获取所有父级id
+      function findForAllId(data = [], arr = []) {
+        for (const item of data) {
+          arr.push(item.id);
+        }
+        return arr;
+      }
+
+      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+        await resetFields();
+        setModalProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+        const groupListModel = await findCurrentUserGroups();
+        if (!unref(organizationTreeData).length) {
+          copyTransTreeFun(groupListModel);
+          organizationTreeData.value = groupListModel;
+          const getAllIds = findForAllId(organizationTreeData.value as any, []);
+          //设置要展开的id
+          treeExpandData.value = getAllIds;
+        }
+        if (unref(isUpdate)) {
+          rowId.value = data.record.id;
+          const roleParams = new RoleOrOrganizationParam(rowId.value, true, false);
+          olderPhoneNumber.value = data.record.phoneNumber;
+          singleEditPostPhoneNumber.phoneNumber = data.record.phoneNumber;
+          findCurrentUserRelation(roleParams).then((result) => {
+            Reflect.set(data.record, 'roleIds', result);
+            Reflect.set(data.record, 'password', '******');
+            setFieldsValue(data.record);
+          });
+          const organizationParams = new RoleOrOrganizationParam(rowId.value, false, true);
+          checkGroup.value = await findCurrentUserRelation(organizationParams);
+        }
+        await updateSchema([
+          {
+            field: 'username',
+            dynamicDisabled: unref(isUpdate),
+          },
+          {
+            field: 'password',
+            ifShow: !unref(isUpdate),
+          },
+        ]);
+      });
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增账号' : '编辑账号'));
+
+      async function handleSubmit() {
+        setModalProps({ confirmLoading: true });
+        try {
+          await validate();
+          const values = getFieldsValue();
+          await addTenantList({ ...values, level: 4 });
+          createMessage.success('操作成功');
+          closeModal();
+          emit('success');
+        } finally {
+          setModalProps({ confirmLoading: false });
+        }
+      }
+      // 取消全部的时候清除回显时获取的
+      const handleUnSelectAll = () => {
+        checkedKeysWithHalfChecked.value = [];
+      };
+
+      const strictlyStatus = ref(false); //层级关联或独立的状态 false为层级关联 true为层级独立
+
+      const handleStrictlyStatus = (status) => (strictlyStatus.value = status);
+
+      const handleCheckClick = (selectedKeys: CheckKeys, event: CheckEvent) => {
+        //fix 取消层级独立后selectedKeys不是数组，是{checked:[],halfChecked:[]}对象 迭代报错
+        // 层级独立
+        if (strictlyStatus.value) {
+          if (!Array.isArray(selectedKeys)) {
+            selectedKeys = selectedKeys?.checked;
+            event.halfCheckedKeys = [];
+          }
+        } else {
+          // 层级关联
+          event.halfCheckedKeys = [];
+        }
+        checkedKeysWithHalfChecked.value = [
+          ...selectedKeys,
+          ...(event.halfCheckedKeys as string[]),
+        ];
+      };
+
+      const [registerDrawer, { openDrawer: addOpenDrawer }] = useDrawer();
+
+      const handleOpenCreate = () => {
+        addOpenDrawer(true, { isUpdate: false });
+      };
+      const handleReload = async () => {
+        const groupListModel = await findCurrentUserGroups();
+        copyTransTreeFun(groupListModel);
+        organizationTreeData.value = groupListModel;
+      };
+
+      return {
+        registerModal,
+        registerForm,
+        handleSubmit,
+        getTitle,
+        organizationTreeData,
+        checkGroup,
+        basicTreeRef,
+        treeExpandData,
+        roleOptions,
+        registerRoleDrawer,
+        handleOpenRole,
+        handleSuccess,
+        handleRoleSelect,
+        handleTreeSelect,
+        handleCheckClick,
+        handleUnSelectAll,
+        handleStrictlyStatus,
+        handleOpenCreate,
+        registerDrawer,
+        handleReload,
+      };
+    },
+  });
+</script>
+<style scoped lang="less">
+  :deep(.vben-basic-tree) {
+    width: 100% !important;
+    margin-top: -28px !important;
+    padding: 0;
+  }
+
+  :deep(.is-unflod) {
+    display: none !important;
+  }
+
+  :deep(.is-flod) {
+    display: none !important;
+  }
+</style>

+import { IsPhoneExist, isAccountExist } from '/@/api/system/system';
 import { BasicColumn, FormSchema } from '/@/components/Table';
+import { ChineseRegexp, EmailRegexp, emailRule, phoneRegexp } from '/@/utils/rules';
+
+let olderPhoneNumber;
 
 export const columns: BasicColumn[] = [
   {
@@ -56,3 +60,180 @@ export const searchFormSchema: FormSchema[] = [
     },
   },
 ];
+
+export const accountFormSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: 'id',
+    component: 'Input',
+    show: false,
+    componentProps: {
+      maxLength: 36,
+    },
+  },
+  {
+    field: 'username',
+    label: '用户名',
+    component: 'Input',
+    colProps: { span: 12 },
+    dynamicDisabled: false,
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入用户名',
+    },
+    dynamicRules: ({ values }) => {
+      return [
+        {
+          required: true,
+          validator(_, value) {
+            return new Promise((resolve, reject) => {
+              if (value == '') {
+                reject('请输入用户名');
+              } else if (ChineseRegexp.test(value)) {
+                reject('用户名不能含有中文');
+              } else if (EmailRegexp.test(value)) {
+                reject('用户名不能为电子邮箱格式');
+              } else {
+                if (values.username != undefined && values.id == undefined) {
+                  isAccountExist(value).then(({ data }) => {
+                    if (data != null) {
+                      reject('用户名已存在');
+                    } else {
+                      resolve();
+                    }
+                  });
+                } else {
+                  resolve();
+                }
+              }
+            });
+          },
+        },
+      ];
+    },
+  },
+  // {
+  //   field: 'password',
+  //   label: '密码',
+  //   component: 'InputPassword',
+  //   required: true,
+  //   colProps: { span: 12 },
+  // },
+  {
+    field: 'realName',
+    label: '真实姓名',
+    component: 'Input',
+    colProps: { span: 12 },
+    required: true,
+    componentProps: {
+      maxLength: 10,
+    },
+  },
+
+  {
+    label: '手机号',
+    field: 'phoneNumber',
+    component: 'Input',
+    colProps: { span: 12 },
+    dynamicRules: ({ values }) => {
+      return [
+        {
+          required: true,
+          validator(_, value) {
+            return new Promise((resolve, reject) => {
+              if (value == '') {
+                reject('请输入手机号');
+              } else if (!phoneRegexp.test(value)) {
+                reject('请输入正确的手机号');
+              } else {
+                if (values.phoneNumber != undefined) {
+                  // 此处可以用防抖函数优化性能
+                  IsPhoneExist(value).then(({ data }) => {
+                    if (data != null) {
+                      reject('手机号已存在');
+                    } else {
+                      resolve();
+                    }
+                  });
+                } else {
+                  resolve();
+                }
+              }
+            });
+          },
+        },
+      ];
+    },
+    componentProps({ formActionType }) {
+      const { clearValidate } = formActionType;
+      return {
+        onChange(value) {
+          if (value == olderPhoneNumber) {
+            clearValidate('phoneNumber');
+          }
+        },
+      };
+    },
+  },
+  {
+    label: '角色',
+    field: 'roleIds',
+    component: 'Select',
+    colProps: { span: 12 },
+    slot: 'roleSlot',
+    rules: [
+      {
+        required: true,
+        message: '请选择角色',
+        type: 'array',
+      },
+    ],
+  },
+  {
+    label: '邮箱',
+    field: 'email',
+    component: 'Input',
+    colProps: { span: 12 },
+    rules: emailRule,
+  },
+  // {
+  //   field: 'accountExpireTime',
+  //   label: '有效期',
+  //   component: 'DatePicker',
+  //   colProps: { span: 12 },
+  //   componentProps: {
+  //     showTime: true,
+  //     format: 'YYYY-MM-DD HH:mm:ss',
+  //   },
+  // },
+  {
+    field: 'enabled',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    colProps: { span: 12 },
+    defaultValue: true,
+    componentProps: {
+      options: [
+        { label: '启用', value: true },
+        { label: '禁用', value: false },
+      ],
+    },
+  },
+  // {
+  //   field: 'remark',
+  //   label: '备注',
+  //   component: 'InputTextArea',
+  //   colProps: { span: 24 },
+  //   componentProps: {
+  //     maxLength: 255,
+  //     placeholder: '请输入备注',
+  //   },
+  // },
+  {
+    field: 'organizationIds',
+    label: '所属组织',
+    component: 'Input',
+    slot: 'organizationId',
+    required: true,
+  },
+];

 <template>
   <div>
-    <BasicTable style="flex: auto" :clickToRowSelect="false" @register="registerTable">
-      <template #toolbar>
-        <Authority value="api:yt:user:post">
-          <a-button type="primary" @click="handleCreate">新增账号</a-button>
-        </Authority>
-        <Authority value="api:yt:user:delete">
-          <Popconfirm
-            title="您确定要批量删除数据"
-            ok-text="确定"
-            cancel-text="取消"
-            @confirm="() => {}"
+    <PageWrapper dense contentFullHeight contentClass="flex">
+      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
+
+      <BasicTable
+        style="flex: auto"
+        :clickToRowSelect="false"
+        @register="registerTable"
+        class="w-3/4 xl:w-4/5"
+      >
+        <template #toolbar>
+          <Authority value="api:yt:user:post">
+            <a-button type="primary" @click="handleCreate">新增租户</a-button>
+          </Authority>
+          <Authority value="api:yt:user:delete">
+            <Popconfirm
+              title="您确定要批量删除数据"
+              ok-text="确定"
+              cancel-text="取消"
+              @confirm="() => {}"
+            >
+              <a-button color="error"> 批量删除 </a-button>
+            </Popconfirm>
+          </Authority>
+        </template>
+        <template #status="{ record }">
+          <Tag
+            :color="
+              record.userStatusEnum === 'NORMAL'
+                ? 'green'
+                : record.userStatusEnum === 'DISABLED'
+                ? 'red'
+                : 'orange'
+            "
           >
-            <a-button color="error"> 批量删除 </a-button>
-          </Popconfirm>
-        </Authority>
-      </template>
-      <template #status="{ record }">
-        <Tag
-          :color="
-            record.userStatusEnum === 'NORMAL'
-              ? 'green'
-              : record.userStatusEnum === 'DISABLED'
-              ? 'red'
-              : 'orange'
-          "
-        >
-          {{
-            record.userStatusEnum === 'NORMAL'
-              ? '正常'
-              : record.userStatusEnum === 'DISABLED'
-              ? '已禁用'
-              : '已过期'
-          }}
-        </Tag>
-      </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            // {
-            //   label: '进入',
-            //   icon: 'ant-design:login-outlined',
-            //   tooltip: `以${!isAdmin(role) ? '客户' : '平台'}用户身份登录`,
-            //   onClick: handleLoginCustomAdmin.bind(null, record),
-            // },
-            {
-              label: '用户详情',
-              auth: 'api:yt:user:get',
-              icon: 'clarity:info-standard-line',
-              tooltip: '用户详情',
-              onClick: handledetail.bind(null, record),
-              ifShow: record.level != 0,
-            },
-            {
-              label: '编辑',
-              auth: 'api:yt:user:update',
-              icon: 'clarity:note-edit-line',
-              tooltip: '编辑',
-              onClick: handleEdit.bind(null, record),
-              ifShow: record.level != 0,
-            },
-          ]"
-          :drop-down-actions="[
-            {
-              label: '删除',
-              auth: 'api:yt:user:delete',
-              icon: 'ant-design:delete-outlined',
-              color: 'error',
-              tooltip: '删除',
-              ifShow: record.level != 0,
-              popConfirm: {
-                title: '是否确认删除',
-                confirm: handleDeleteOrBatchDelete.bind(null, record),
+            {{
+              record.userStatusEnum === 'NORMAL'
+                ? '正常'
+                : record.userStatusEnum === 'DISABLED'
+                ? '已禁用'
+                : '已过期'
+            }}
+          </Tag>
+        </template>
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              // {
+              //   label: '进入',
+              //   icon: 'ant-design:login-outlined',
+              //   tooltip: `以${!isAdmin(role) ? '客户' : '平台'}用户身份登录`,
+              //   onClick: handleLoginCustomAdmin.bind(null, record),
+              // },
+              {
+                label: '用户详情',
+                auth: 'api:yt:user:get',
+                icon: 'clarity:info-standard-line',
+                tooltip: '用户详情',
+                onClick: handledetail.bind(null, record),
+                ifShow: record.level != 0,
+              },
+              {
+                label: '编辑',
+                auth: 'api:yt:user:update',
+                icon: 'clarity:note-edit-line',
+                tooltip: '编辑',
+                onClick: handleEdit.bind(null, record),
+                ifShow: record.level != 0,
               },
-            },
-            {
-              label: '清除密码',
-              auth: 'api:yt:user:resetPassword',
-              icon: 'ant-design:delete-outlined',
-              color: 'error',
-              tooltip: '清除密码',
-              popConfirm: {
-                title: '是否确认清除密码',
-                confirm: handleClearPassword.bind(null, record),
+            ]"
+            :drop-down-actions="[
+              {
+                label: '删除',
+                auth: 'api:yt:user:delete',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                tooltip: '删除',
+                ifShow: record.level != 0,
+                popConfirm: {
+                  title: '是否确认删除',
+                  confirm: handleDeleteOrBatchDelete.bind(null, record),
+                },
               },
-            },
-          ]"
-        />
-      </template>
-    </BasicTable>
+              {
+                label: '清除密码',
+                auth: 'api:yt:user:resetPassword',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                tooltip: '清除密码',
+                popConfirm: {
+                  title: '是否确认清除密码',
+                  confirm: handleClearPassword.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+      <TenantModal @register="registerModal" @success="handleSuccess" />
+    </PageWrapper>
   </div>
 </template>
 
@@ -96,22 +106,35 @@
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { getTenantList } from '/@/api/system/account';
   import { columns, searchFormSchema } from './config';
-  // import { useResetOrganizationTree } from '/@/views/common/organizationIdTree';
+  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
   import { reactive } from 'vue';
   import { Authority } from '/@/components/Authority';
+  import { useUserStore } from '/@/store/modules/user';
+  import { PageWrapper } from '/@/components/Page';
+  import { Tag, Popconfirm } from 'ant-design-vue';
+  import TenantModal from './TenantModal.vue';
+  import { useModal } from '/@/components/Modal';
 
   const searchInfo = reactive<Recordable>({});
 
-  // const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+  const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
 
-  const [registerTable, {}] = useTable({
+  const userInfo = useUserStore();
+  const [registerTable, { reload }] = useTable({
     title: '租户账号列表',
     columns,
     api: getTenantList,
     formConfig: {
       labelWidth: 100,
       schemas: searchFormSchema,
-      // resetFunc: resetFn,
+      resetFunc: resetFn,
+    },
+
+    beforeFetch: (params) => {
+      return {
+        ...params,
+        tenantId: userInfo.getUserInfo.tenantId!,
+      };
     },
     useSearchForm: true,
     showTableSetting: true,
@@ -128,9 +151,21 @@
     },
   });
 
-  const handleCreate = () => {};
+  const [registerModal, { openModal }] = useModal();
+
+  function handleSelect(organization) {
+    searchInfo.organizationId = organization;
+    reload();
+  }
+
+  const handleCreate = () => {
+    openModal(true, {
+      isAdd: true,
+    });
+  };
   const handledetail = (_data?: any[]) => {};
   const handleEdit = (_data?: any[]) => {};
   const handleDeleteOrBatchDelete = (_data?: any[]) => {};
   const handleClearPassword = (_data?: any[]) => {};
+  const handleSuccess = () => {};
 </script>