feat/新增菜单客户租户

+<template>
+  <div>
+    <PageWrapper :title="`用户资料`" contentBackground @back="goBack">
+      <Description size="middle" @register="register" />
+    </PageWrapper>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { PageWrapper } from '/@/components/Page';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { Description } from '../../../components/Description';
+  import { getAccountInfo } from '../../../api/system/system';
+  import { accountSchema } from './account.detail.data';
+  import { useDescription } from '../../../components/Description';
+  import { useTabs } from '/@/hooks/web/useTabs';
+  const accountData = {};
+  export default defineComponent({
+    name: 'AccountDetail',
+    components: { PageWrapper, Description },
+    setup() {
+      const route = useRoute();
+      const go = useGo();
+      const { setTitle, close } = useTabs();
+      const [register, { setDescProps }] = useDescription({
+        title: '账号基础信息',
+        data: accountData,
+        schema: accountSchema,
+        column: 3,
+      });
+      getAccountInfo(route.params?.id).then((result) => {
+        Reflect.set(accountData, 'remark', result.remark);
+        Reflect.set(accountData, 'realName', result.realName);
+        Reflect.set(accountData, 'phoneNumber', result.phoneNumber);
+        Reflect.set(accountData, 'email', result.email);
+        Reflect.set(accountData, 'username', result.username);
+        Reflect.set(
+          accountData,
+          'enabled',
+          result.enabled ? '正常' : !result.enabled ? '禁用' : '已过期'
+        );
+        Reflect.set(accountData, 'accountExpireTime', result.accountExpireTime);
+        Reflect.set(accountData, 'createTime', result.createTime);
+        Reflect.set(accountData, 'updateTime', result.updateTime);
+        // 设置Tab的标题（不会影响页面标题）
+        setTitle('详情：用户' + result.realName);
+        setDescProps(accountData);
+      });
+      // 页面左侧点击返回链接时的操作
+      function goBack() {
+        // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
+        close();
+        go('/system/account');
+      }
+      return { goBack, accountSchema, accountData, register };
+    },
+  });
+</script>
+
+<style scoped>
+  .vben-collapse-container {
+    background-color: white !important;
+  }
+</style>

+<template>
+  <BasicModal
+    width="650px"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <div style="height: 50vh">
+      <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 './account.data';
+  import { Button } from 'ant-design-vue';
+  import {
+    findCurrentUserRelation,
+    SaveOrUpdateUserInfo,
+    filterRoleList,
+  } from '/@/api/system/system';
+  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: 'AccountModal',
+    components: {
+      BasicModal,
+      BasicForm,
+      Button,
+      BasicTree,
+      OrganizationDrawer,
+      PlusOutlined,
+      RoleDrawer,
+      VNodes: (_, { attrs }) => {
+        return attrs.vnodes;
+      },
+    },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      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 postData = reactive({});
+      const singleEditPostPhoneNumber = reactive({
+        phoneNumber: '',
+      });
+      const checkedKeysWithHalfChecked = ref<(string | number)[]>([]);
+      const getRoleList = async () => {
+        const res = await filterRoleList();
+        roleOptions.value = res.map((m) => {
+          return {
+            label: m.name,
+            value: m.id,
+          };
+        });
+      };
+      onMounted(async () => {
+        await getRoleList();
+      });
+      const [registerRoleDrawer, { openDrawer }] = useDrawer();
+
+      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 {
+          const { createMessage } = useMessage();
+          if (unref(isUpdate)) {
+            Object.assign(postData, singleEditPostPhoneNumber);
+          }
+          const values = await validate([
+            'id',
+            'username',
+            'realName',
+            'password',
+            'roleIds',
+            'email',
+            'accountExpireTime',
+            'enabled',
+            'remark',
+            'organizationIds',
+            olderPhoneNumber.value === getFieldsValue().phoneNumber ? '' : 'phoneNumber',
+          ]);
+          let treeCheckedKeys: string[] | CheckKeys =
+            (unref(basicTreeRef)?.getCheckedKeys() as string[] | CheckKeys) || [];
+          //fix 取消层级独立后(unref(treeRef)?.getCheckedKeys() as string[])的数据不是数组，是{checked:[],halfChecked:[]}对象，迭代报错
+          if (!Array.isArray(treeCheckedKeys)) {
+            treeCheckedKeys = treeCheckedKeys?.checked;
+          }
+          const organizationIds = [
+            ...new Set([...unref(checkedKeysWithHalfChecked), ...treeCheckedKeys]),
+          ];
+          values.accountExpireTime =
+            typeof values.accountExpireTime != 'undefined' && values.accountExpireTime != null
+              ? values.accountExpireTime.format('YYYY-MM-DD HH:mm:ss')
+              : null;
+          values.organizationIds = organizationIds;
+          Object.assign(postData, values);
+          if (unref(isUpdate)) {
+            if (values.email == '') {
+              delete postData.email;
+            }
+          } else {
+            if (values.email == '') {
+              delete postData.email;
+            }
+          }
+          await SaveOrUpdateUserInfo(postData as any, unref(isUpdate));
+          closeModal();
+          emit('success');
+          createMessage.success(unref(isUpdate) ? '编辑成功' : '新增成功');
+        } finally {
+          setTimeout(() => {
+            setModalProps({ confirmLoading: false });
+          }, 300);
+        }
+      }
+      // 取消全部的时候清除回显时获取的
+      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 { isAccountExist, IsPhoneExist } from '/@/api/system/system';
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { emailRule, ChineseRegexp, EmailRegexp, phoneRegexp } from '/@/utils/rules';
+
+let olderPhoneNumber;
+
+export const columns: BasicColumn[] = [
+  {
+    title: '用户名',
+    dataIndex: 'username',
+    width: 120,
+  },
+  {
+    title: '姓名',
+    dataIndex: 'realName',
+    width: 120,
+  },
+  {
+    title: '手机号码',
+    dataIndex: 'phoneNumber',
+    width: 120,
+  },
+  {
+    title: '邮箱',
+    dataIndex: 'email',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+  {
+    title: '状态',
+    dataIndex: 'userStatusEnum',
+    width: 120,
+    slots: { customRender: 'status' },
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'username',
+    label: '用户名',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入用户名',
+    },
+  },
+  {
+    field: 'realName',
+    label: '姓名',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入姓名',
+    },
+  },
+];
+
+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: 'roleIds',
+    component: 'Select',
+    colProps: { span: 12 },
+    slot: 'roleSlot',
+    rules: [
+      {
+        required: true,
+        message: '请选择角色',
+        type: 'array',
+      },
+    ],
+  },
+  {
+    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: '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,
+  },
+];

+import { DescItem } from '/@/components/Description';
+
+export const accountSchema: DescItem[] = [
+  {
+    field: 'realName',
+    label: '用户姓名',
+  },
+  {
+    field: 'phoneNumber',
+    label: '手机号',
+  },
+  {
+    field: 'email',
+    label: '邮箱',
+  },
+  {
+    field: 'username',
+    label: '账号',
+  },
+  {
+    field: 'enabled',
+    label: '状态',
+  },
+  {
+    field: 'accountExpireTime',
+    label: '有效期',
+  },
+  {
+    field: 'createTime',
+    label: '创建时间',
+  },
+  {
+    field: 'updateTime',
+    label: '更新时间',
+  },
+  {
+    field: 'remark',
+    label: '备注',
+  },
+];

+<template>
+  <div>
+    <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="handleDeleteOrBatchDelete(null)"
+            >
+              <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </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: handleView.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),
+                },
+              },
+              {
+                label: '清除密码',
+                auth: 'api:yt:user:resetPassword',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                tooltip: '清除密码',
+                popConfirm: {
+                  title: '是否确认清除密码',
+                  confirm: handleClearPassword.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+      <AccountModal @register="registerModal" @success="handleSuccess" />
+    </PageWrapper>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { deleteUser, getAccountList } from '/@/api/system/system';
+  import { PageWrapper } from '/@/components/Page';
+  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
+  import { Tag, Popconfirm } from 'ant-design-vue';
+  import { useModal } from '/@/components/Modal';
+  import AccountModal from './AccountModal.vue';
+  import { columns, searchFormSchema } from './account.data';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Authority } from '/@/components/Authority';
+  import { getAuthCache } from '/@/utils/auth';
+  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
+  import { isAdmin } from '/@/enums/roleEnum';
+  import { TenantListItemRecord } from '/@/api/tenant/tenantInfo';
+  import { useFastEnter } from '/@/hooks/business/useFastEnter';
+  import { clearUserPassword } from '/@/api/system/system';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  export default defineComponent({
+    name: 'AccountManagement',
+    components: {
+      BasicTable,
+      PageWrapper,
+      OrganizationIdTree,
+      AccountModal,
+      TableAction,
+      Tag,
+      Authority,
+      Popconfirm,
+    },
+    setup() {
+      const { createMessage } = useMessage();
+      const userInfo: any = getAuthCache(USER_INFO_KEY);
+      const role: string = userInfo?.roles[0];
+
+      const go = useGo();
+      const [registerModal, { openModal }] = useModal();
+      let searchInfo = reactive<Recordable>({});
+      const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+      const [registerTable, { reload, setProps }] = useTable({
+        title: '账号列表',
+        api: getAccountList,
+        rowKey: 'id',
+        columns,
+        searchInfo,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+          // autoSubmitOnEnter: true,
+          resetFunc: resetFn,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        actionColumn: {
+          width: 240,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+      });
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+        deleteUser,
+        handleSuccess,
+        setProps
+      );
+      nextTick(() => {
+        setProps(selectionOptions);
+      });
+
+      function handleCreate() {
+        openModal(true, {
+          isUpdate: false,
+        });
+      }
+      function handleEdit(record: Recordable) {
+        openModal(true, {
+          record,
+          isUpdate: true,
+        });
+      }
+      function handleSuccess() {
+        reload();
+      }
+
+      function handleSelect(organization) {
+        searchInfo.organizationId = organization;
+        reload();
+      }
+
+      function handleView(record: Recordable) {
+        go('/system/account_detail/' + record.id);
+      }
+
+      async function handleLoginCustomAdmin(record: TenantListItemRecord) {
+        try {
+          useFastEnter(record, go);
+        } catch (error) {
+        } finally {
+        }
+      }
+
+      const handleClearPassword = async (record: Recordable) => {
+        const { id } = record;
+        if (!id) return;
+        const { message } = await clearUserPassword(id);
+        createMessage.success(message);
+      };
+
+      return {
+        handleLoginCustomAdmin,
+        registerTable,
+        registerModal,
+        handleCreate,
+        handleEdit,
+        handleSuccess,
+        handleSelect,
+        handleView,
+        organizationIdTreeRef,
+        hasBatchDelete,
+        handleDeleteOrBatchDelete,
+        isAdmin,
+        role,
+        handleClearPassword,
+      };
+    },
+  });
+</script>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'roleName',
+    label: '角色名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '启用', value: 1 },
+        { label: '停用', value: 0 },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+];
+
+export const columns: BasicColumn[] = [
+  {
+    title: '角色名称',
+    dataIndex: 'name',
+    width: 200,
+  },
+  {
+    title: '角色Code',
+    dataIndex: 'code',
+    width: 200,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 120,
+    slots: { customRender: 'status' },
+  },
+
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    width: 240,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+];

+<template>
+  <div>123 </div>
+</template>
+
+<script lang="ts" setup></script>

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="500px"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #menu>
+        <Spin :spinning="spinning">
+          <BasicTree
+            v-if="treeData.length"
+            checkable
+            toolbar
+            ref="treeRef"
+            :treeData="treeData"
+            @check="handleCheckClick"
+            :replace-fields="{ title: 'name', key: 'id' }"
+            :checkedKeys="roleMenus"
+            title="菜单分配"
+          />
+        </Spin>
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref, nextTick } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema, KeysTypeEnum, RoleMenuDictEnum } from './role.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  const { t } = useI18n(); // 加载国际化
+  // 加载菜单数据
+  import { getMeMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { MenuRecord } from '/@/api/sys/model/menuModel';
+  import { saveOrUpdateRoleInfoWithMenu } from '/@/api/system/system';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { RoleEnum } from '/@/enums/roleEnum';
+  import { Spin } from 'ant-design-vue';
+  import { useRole } from '/@/hooks/business/useRole';
+  import { RoleListItem } from '/@/api/system/model/systemModel';
+
+  type TreeData = MenuRecord & TreeItem;
+
+  export default defineComponent({
+    name: 'RoleDrawer',
+    components: { BasicDrawer, BasicForm, BasicTree, Spin },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref<boolean>(true);
+      const treeData = ref<TreeData[]>([]);
+      const roleMenus = ref<string[]>([]);
+      const roleId = ref<string>('');
+      const treeRef = ref<Nullable<TreeActionType>>();
+      const checked = ref<string[]>([]); //需要选中的节点
+      const spinning = ref(false);
+      const checkedKeysWithHalfChecked = ref<string[]>([]);
+
+      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+        labelWidth: 100,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const transformName = (data: TreeData[]) => {
+        return data.map((item) => {
+          item.name = t(item.name);
+          if (item.children && item.children.length) {
+            item.children = transformName(item.children as unknown as TreeData[]);
+          }
+          return item;
+        });
+      };
+
+      const { isTenantAdmin, isSysadmin, getRole } = useRole();
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(
+        async (data: { isUpdate: boolean; record: RoleListItem }) => {
+          resetFields();
+          roleId.value = '';
+          // 在打开弹窗时清除所有选择的菜单
+          treeRef.value && treeRef.value?.setCheckedKeys([]);
+          isUpdate.value = data.isUpdate;
+          let roleType = unref(getRole) || RoleEnum.SYS_ADMIN;
+
+          // 租户管理员创建角色时 菜单分配为客户菜单
+          if (unref(isTenantAdmin)) {
+            roleType = RoleEnum.CUSTOMER_USER;
+          }
+
+          try {
+            spinning.value = true;
+            // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
+
+            // if (!unref(treeData).length) {
+            // 获取全部的菜单
+            const menuListModel = await getMeMenuList();
+            treeData.value = transformName(menuListModel as unknown as TreeData[]);
+            // }
+
+            const keys = await getPermissionByRole(roleType);
+            const { keyType } = RoleMenuDictEnum[roleType];
+            treeData.value = filterPermissionTreeData(
+              unref(treeData) as unknown as TreeData[],
+              keys,
+              keyType
+            );
+
+            // 如果编辑的是超级管理员 则不再过滤平台管理员禁用的权限
+            // 如果是超级管理员创建角色 创建角色属于平台管理员 因此过滤平台管理员禁用的权限
+            if (data?.record?.roleType !== RoleEnum.SYS_ADMIN && unref(isSysadmin)) {
+              const keys = await getPermissionByRole(RoleEnum.PLATFORM_ADMIN);
+              const { keyType } = RoleMenuDictEnum[RoleEnum.PLATFORM_ADMIN];
+              treeData.value = filterPermissionTreeData(
+                unref(treeData) as unknown as TreeData[],
+                keys,
+                keyType
+              );
+            }
+
+            // 更新
+            if (unref(isUpdate)) {
+              checked.value = [];
+              roleId.value = data.record.id;
+
+              //通过角色id去获取角色对应的菜单的ids
+              checkedKeysWithHalfChecked.value = roleMenus.value = await getMenusIdsByRoleId(
+                data.record.id
+              );
+              excludeHalfCheckedKeys(unref(treeData));
+              await nextTick();
+              unref(treeRef)?.setCheckedKeys(roleMenus.value);
+              setFieldsValue(data.record);
+            } else {
+            }
+          } catch (error) {
+            throw error;
+          } finally {
+            spinning.value = false;
+          }
+        }
+      );
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
+
+      async function handleSubmit() {
+        setDrawerProps({ confirmLoading: true });
+        const { createMessage } = useMessage();
+        try {
+          const values = await validate();
+          const treeCheckedKeys: string[] = (unref(treeRef)?.getCheckedKeys() as string[]) || [];
+          const menu = [...new Set([...unref(checkedKeysWithHalfChecked), ...treeCheckedKeys])];
+          const req = {
+            id: roleId.value,
+            name: values.name,
+            remark: values.remark,
+            status: values.status,
+            menu,
+          };
+          if (req.menu == undefined) return createMessage.error('请勾选权限菜单');
+          saveOrUpdateRoleInfoWithMenu(req).then(() => {
+            closeDrawer();
+            emit('success');
+            createMessage.success(`${unref(isUpdate) ? '编辑' : '新增'}成功`);
+          });
+        } finally {
+          setTimeout(() => {
+            setDrawerProps({ confirmLoading: false });
+          }, 300);
+        }
+      }
+
+      const getPermissionByRole = async (roleType: RoleEnum) => {
+        try {
+          const { key } = RoleMenuDictEnum[roleType];
+          const res = await findDictItemByCode({ dictCode: key });
+          return res.map((item) => item.itemValue);
+        } catch (error) {}
+        return [];
+      };
+
+      const filterPermissionTreeData = (
+        data: MenuRecord[],
+        permissionKeys: string[],
+        keysType: KeysTypeEnum
+      ): TreeData[] => {
+        const permissionCompare = (
+          data: MenuRecord[],
+          permissionKeys: string[],
+          keysType: KeysTypeEnum
+        ): TreeData[] => {
+          return data.filter((item) => {
+            item.name = t(item.name);
+            const findFlag = permissionKeys.includes(item.permission);
+
+            item.show = findFlag ? keysType === KeysTypeEnum.ENABLED : undefined;
+
+            if (item.children && item.children.length) {
+              if (item.show) return true;
+              if (item.show === undefined) {
+                item.children = permissionCompare(item.children, permissionKeys, keysType);
+                item.show = item.children.some((item) =>
+                  keysType === KeysTypeEnum.ENABLED
+                    ? item.show
+                    : item.show === undefined
+                    ? true
+                    : item.show
+                );
+                return item.show;
+              }
+            }
+
+            return keysType === KeysTypeEnum.ENABLED
+              ? item.show
+              : item.show === undefined
+              ? true
+              : item.show;
+          }) as unknown as TreeData[];
+        };
+
+        return permissionCompare(data, permissionKeys, keysType);
+      };
+
+      const excludeHalfCheckedKeys = (treeData: MenuRecord[]) => {
+        const needExcludeKeys: string[] = [];
+        const query = (data: MenuRecord[]) => {
+          data.forEach((item) => {
+            item.checked = roleMenus.value.includes(item.id);
+            if (item.children && item.children.length) {
+              query(item.children);
+              item.checked = item.children.every((item) => item.checked);
+            }
+            if (!item.checked) {
+              needExcludeKeys.push(item.id);
+            }
+          });
+        };
+        query(treeData);
+        roleMenus.value = unref(roleMenus).filter((key) => !needExcludeKeys.includes(key));
+        return needExcludeKeys;
+      };
+
+      const handleCheckClick = (selectedKeys: string[], event: CheckEvent) => {
+        checkedKeysWithHalfChecked.value = [
+          ...selectedKeys,
+          ...(event.halfCheckedKeys as string[]),
+        ];
+      };
+
+      return {
+        spinning,
+        registerDrawer,
+        registerForm,
+        getTitle,
+        handleSubmit,
+        treeData,
+        roleMenus,
+        treeRef,
+        handleCheckClick,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  :deep(.vben-basic-tree) {
+    width: 100% !important;
+  }
+
+  :deep(.is-unflod) {
+    display: none !important;
+  }
+
+  :deep(.is-flod) {
+    display: none !important;
+  }
+</style>

+<template>
+  <div>
+    <BasicTable
+      :rowSelection="{ type: 'checkbox' }"
+      @register="registerTable"
+      :clickToRowSelect="false"
+    >
+      <template #toolbar>
+        <Authority value="api:yt:role:saveOrUpdateRoleInfoWithMenu:post">
+          <a-button type="primary" @click="handleCreate">新增角色</a-button>
+        </Authority>
+        <Authority value="api:yt:role:delete">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #status="{ record }">
+        <Authority value="api:yt:role:saveOrUpdateRoleInfoWithMenu:update">
+          <Switch
+            :checked="record.status === 1"
+            :loading="record.pendingStatus"
+            checkedChildren="启用"
+            unCheckedChildren="禁用"
+            @change="(checked:boolean)=>statusChange(checked,record)"
+          />
+        </Authority>
+        <Tag
+          v-if="!hasPermission('api:yt:role:saveOrUpdateRoleInfoWithMenu:update')"
+          :color="record.status ? 'green' : 'red'"
+        >
+          {{ record.status ? '启用' : '禁用' }}
+        </Tag>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              auth: 'api:yt:role:saveOrUpdateRoleInfoWithMenu:update',
+              icon: 'clarity:note-edit-line',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              auth: 'api:yt:role:delete',
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              ifShow: record.roleType != RoleEnum.SYS_ADMIN,
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { delRole, getRoleListByPage, setRoleStatus } from '/@/api/system/system';
+  import { useDrawer } from '/@/components/Drawer';
+  import RoleDrawer from './RoleDrawer.vue';
+  import { columns, searchFormSchema } from './role.data';
+  import { RoleEnum } from '/@/enums/roleEnum';
+  import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Switch, Popconfirm, Tag } from 'ant-design-vue';
+  import { usePermission } from '/@/hooks/web/usePermission';
+
+  export default defineComponent({
+    name: 'RoleManagement',
+    components: { BasicTable, RoleDrawer, TableAction, Authority, Switch, Popconfirm, Tag },
+    setup() {
+      const { hasPermission } = usePermission();
+      const [registerDrawer, { openDrawer }] = useDrawer();
+      function handleSuccess() {
+        reload();
+      }
+      const [registerTable, { setProps, reload, setSelectedRowKeys }] = useTable({
+        title: '客户角色列表',
+        api: getRoleListByPage,
+        columns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+      });
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+        useBatchDelete(delRole, handleSuccess, setProps);
+      selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+        // Demo:status为1的选择框禁用
+        if (record.status === 1) {
+          return { disabled: true };
+        } else {
+          return { disabled: false };
+        }
+      };
+      nextTick(() => {
+        setProps(selectionOptions);
+      });
+
+      function handleCreate() {
+        openDrawer(true, {
+          isUpdate: false,
+        });
+      }
+
+      function handleEdit(record: Recordable) {
+        openDrawer(true, {
+          record,
+          isUpdate: true,
+        });
+      }
+
+      const statusChange = async (checked, record) => {
+        setProps({
+          loading: true,
+        });
+        setSelectedRowKeys([]);
+        resetSelectedRowKeys();
+        const newStatus = checked ? 1 : 0;
+        const { createMessage } = useMessage();
+        try {
+          await setRoleStatus(record.id, newStatus);
+          if (newStatus) {
+            createMessage.success(`启用成功`);
+          } else {
+            createMessage.success('禁用成功');
+          }
+        } finally {
+          setProps({
+            loading: false,
+          });
+          reload();
+        }
+      };
+
+      return {
+        registerTable,
+        registerDrawer,
+        handleCreate,
+        handleEdit,
+        handleSuccess,
+        RoleEnum,
+        hasBatchDelete,
+        handleDeleteOrBatchDelete,
+        statusChange,
+        hasPermission,
+      };
+    },
+  });
+</script>

+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { DictEnum } from '/@/enums/dictEnum';
+import { RoleEnum } from '/@/enums/roleEnum';
+
+export enum KeysTypeEnum {
+  DISABLED = 'disabled',
+  ENABLED = 'enabled',
+}
+
+export const RoleMenuDictEnum: Recordable<{ key: string; keyType: KeysTypeEnum }> = {
+  [RoleEnum.PLATFORM_ADMIN]: {
+    key: DictEnum.DISABLED_PLATFORM_ADMIN_AUTH,
+    keyType: KeysTypeEnum.DISABLED,
+  },
+  [RoleEnum.SYS_ADMIN]: { key: DictEnum.ENABLED_SYSADMIN_AUTH, keyType: KeysTypeEnum.ENABLED },
+  [RoleEnum.TENANT_ADMIN]: { key: DictEnum.DISABLED_TENANT_AUTH, keyType: KeysTypeEnum.DISABLED },
+  [RoleEnum.CUSTOMER_USER]: { key: DictEnum.DISABLE_CUSTOMER_AUTH, keyType: KeysTypeEnum.DISABLED },
+};
+
+export const columns: BasicColumn[] = [
+  {
+    title: '角色名称',
+    dataIndex: 'name',
+    width: 200,
+  },
+  {
+    title: '角色Code',
+    dataIndex: 'code',
+    width: 200,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 120,
+    slots: { customRender: 'status' },
+  },
+
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    width: 240,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'roleName',
+    label: '角色名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '启用', value: 1 },
+        { label: '停用', value: 0 },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '角色名称',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入角色名称',
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: 1,
+    componentProps: {
+      options: [
+        { label: '启用', value: 1 },
+        { label: '停用', value: 0 },
+      ],
+    },
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入备注',
+    },
+  },
+  {
+    label: '',
+    field: 'menu',
+    slot: 'menu',
+    component: 'Input',
+  },
+];

@@ -88,7 +88,7 @@
         reload();
         reload();
       }
       }
       const [registerTable, { setProps, reload, setSelectedRowKeys }] = useTable({
       const [registerTable, { setProps, reload, setSelectedRowKeys }] = useTable({
-        title: '角色列表',
+        title: '客户角色列表',
         api: getRoleListByPage,
         api: getRoleListByPage,
         columns,
         columns,
         formConfig: {
         formConfig: {

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="500px"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #menu>
+        <Spin :spinning="spinning">
+          <BasicTree
+            v-if="treeData.length"
+            :treeData="treeData"
+            :replaceFields="{ title: 'name', key: 'id' }"
+            :checkedKeys="roleMenus"
+            @check="handleCheckClick"
+            @unSelectAll="handleUnSelectAll"
+            checkable
+            toolbar
+            ref="treeRef"
+            title="权限分配"
+          />
+        </Spin>
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref, nextTick } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from './role.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicTree, CheckEvent, TreeActionType, TreeItem, CheckKeys } from '/@/components/Tree';
+  const { t } = useI18n(); // 加载国际化
+  // 加载菜单数据
+  import { getAdminMenuList, getMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { MenuRecord } from '/@/api/sys/model/menuModel';
+  import { saveOrUpdateRoleInfoWithMenu } from '/@/api/system/system';
+  import { RoleEnum } from '/@/enums/roleEnum';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { Spin } from 'ant-design-vue';
+  import { useRole } from '/@/hooks/business/useRole';
+  import { RoleMenuDictEnum, KeysTypeEnum } from '../custom/role.data';
+
+  type TreeData = MenuRecord & TreeItem;
+
+  export default defineComponent({
+    name: 'RoleDrawer',
+    components: { BasicDrawer, BasicForm, BasicTree, Spin },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+      const treeData = ref<TreeData[]>([]);
+      const roleMenus = ref<string[]>([]);
+      const roleId = ref('');
+      const treeRef = ref<Nullable<TreeActionType>>(null);
+      const checked = ref<string[]>([]); //需要选中的节点
+      const spinning = ref(false);
+      const checkedKeysWithHalfChecked = ref<(string | number)[]>([]);
+
+      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+        labelWidth: 90,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const transformName = (data: TreeData[]) => {
+        return data.map((item) => {
+          item.name = t(item.name);
+          if (item.children && item.children.length) {
+            item.children = transformName(item.children as unknown as TreeData[]);
+          }
+          return item;
+        });
+      };
+
+      const { isPlatformAdmin } = useRole();
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        resetFields();
+        roleId.value = '';
+        // 在打开弹窗时清除所有选择的菜单
+        treeRef.value && treeRef.value?.setCheckedKeys([]);
+        isUpdate.value = data.isUpdate;
+        const roleType = RoleEnum.TENANT_ADMIN;
+        try {
+          spinning.value = true;
+
+          if (!unref(treeData).length) {
+            // 获取全部的菜单
+            const menuListModel = unref(isPlatformAdmin)
+              ? await getAdminMenuList()
+              : await getMenuList();
+            treeData.value = transformName(menuListModel as unknown as TreeData[]);
+          }
+          const keys = await getPermissionByRole(roleType);
+          const { keyType } = RoleMenuDictEnum[roleType];
+          treeData.value = filterPermissionTreeData(
+            unref(treeData) as unknown as TreeData[],
+            keys,
+            keyType
+          );
+
+          // 更新
+          if (unref(isUpdate)) {
+            checked.value = [];
+            roleId.value = data.record.id;
+
+            //通过角色id去获取角色对应的菜单的ids
+            checkedKeysWithHalfChecked.value = roleMenus.value = await getMenusIdsByRoleId(
+              data.record.id
+            );
+
+            excludeHalfCheckedKeys(unref(treeData));
+
+            await nextTick();
+            treeRef.value?.setCheckedKeys(roleMenus.value);
+            setFieldsValue(data.record);
+          } else {
+          }
+        } catch (error) {
+          throw error;
+        } finally {
+          spinning.value = false;
+        }
+      });
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
+
+      // 取消全部的时候清除回显时获取的
+      const handleUnSelectAll = () => {
+        checkedKeysWithHalfChecked.value = [];
+      };
+
+      async function handleSubmit() {
+        setDrawerProps({ loading: true, confirmLoading: true });
+        const { createMessage } = useMessage();
+        let treeCheckedKeys: string[] | CheckKeys =
+          (unref(treeRef)?.getCheckedKeys() as string[] | CheckKeys) || [];
+        //fix 取消层级独立后(unref(treeRef)?.getCheckedKeys() as string[])的数据不是数组，是{checked:[],halfChecked:[]}对象，迭代报错
+        if (!Array.isArray(treeCheckedKeys)) {
+          treeCheckedKeys = treeCheckedKeys?.checked;
+        }
+        const menu = [...new Set([...unref(checkedKeysWithHalfChecked), ...treeCheckedKeys])];
+        try {
+          const values = await validate();
+          const req = {
+            id: roleId.value,
+            name: values.name,
+            remark: values.remark,
+            status: values.status,
+            roleType: RoleEnum.TENANT_ADMIN,
+            menu,
+          };
+          if (req.menu == undefined || !req.menu.length)
+            return createMessage.error('请勾选权限菜单');
+          const res = await saveOrUpdateRoleInfoWithMenu(req);
+          if (res) {
+            closeDrawer();
+            emit('success');
+            createMessage.success(`${unref(isUpdate) ? '编辑' : '新增'}成功`);
+            setDrawerProps({ loading: false });
+            setDrawerProps({ confirmLoading: false });
+          }
+        } finally {
+          setTimeout(() => {
+            setDrawerProps({ loading: false });
+            setDrawerProps({ confirmLoading: false });
+          }, 300);
+        }
+      }
+
+      const getPermissionByRole = async (roleType: RoleEnum) => {
+        try {
+          const { key } = RoleMenuDictEnum[roleType];
+          const res = await findDictItemByCode({ dictCode: key });
+          return res.map((item) => item.itemValue);
+        } catch (error) {}
+        return [];
+      };
+
+      const filterPermissionTreeData = (
+        data: MenuRecord[],
+        permissionKeys: string[],
+        keysType: KeysTypeEnum
+      ): TreeData[] => {
+        const permissionCompare = (
+          data: MenuRecord[],
+          permissionKeys: string[],
+          keysType: KeysTypeEnum
+        ): TreeData[] => {
+          return data.filter((item) => {
+            item.name = t(item.name);
+            const findFlag = permissionKeys.includes(item.permission);
+
+            item.show = findFlag ? keysType === KeysTypeEnum.ENABLED : undefined;
+
+            if (item.children && item.children.length) {
+              if (item.show) return true;
+              if (item.show === undefined) {
+                item.children = permissionCompare(item.children, permissionKeys, keysType);
+                item.show = item.children.some((item) =>
+                  keysType === KeysTypeEnum.ENABLED
+                    ? item.show
+                    : item.show === undefined
+                    ? true
+                    : item.show
+                );
+                return item.show;
+              }
+            }
+
+            return keysType === KeysTypeEnum.ENABLED
+              ? item.show
+              : item.show === undefined
+              ? true
+              : item.show;
+          }) as unknown as TreeData[];
+        };
+
+        return permissionCompare(data, permissionKeys, keysType);
+      };
+
+      const excludeHalfCheckedKeys = (treeData: MenuRecord[]) => {
+        const needExcludeKeys: string[] = [];
+        const query = (data: MenuRecord[]) => {
+          data.forEach((item) => {
+            item.checked = roleMenus.value.includes(item.id);
+            if (item.children && item.children.length) {
+              query(item.children);
+              item.checked = item.children.every((item) => item.checked);
+            }
+            if (!item.checked) {
+              needExcludeKeys.push(item.id);
+            }
+          });
+        };
+        query(treeData);
+        roleMenus.value = unref(roleMenus).filter((key) => !needExcludeKeys.includes(key));
+        return needExcludeKeys;
+      };
+
+      const handleCheckClick = (selectedKeys: CheckKeys, event: CheckEvent) => {
+        //fix 取消层级独立后selectedKeys不是数组，是{checked:[],halfChecked:[]}对象 迭代报错
+        if (!Array.isArray(selectedKeys)) {
+          selectedKeys = selectedKeys?.checked;
+          event.halfCheckedKeys = [];
+        }
+        checkedKeysWithHalfChecked.value = [
+          ...selectedKeys,
+          ...(event.halfCheckedKeys as string[]),
+        ];
+      };
+
+      return {
+        spinning,
+        registerDrawer,
+        registerForm,
+        getTitle,
+        handleSubmit,
+        treeData,
+        roleMenus,
+        treeRef,
+        handleCheckClick,
+        handleUnSelectAll,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  :deep(.vben-basic-tree) {
+    width: 100% !important;
+  }
+
+  :deep(.is-unflod) {
+    display: none !important;
+  }
+
+  :deep(.is-flod) {
+    display: none !important;
+  }
+</style>

+<template>
+  <div>
+    <BasicTable
+      @register="registerTable"
+      :rowSelection="{ type: 'checkbox' }"
+      :clickToRowSelect="false"
+    >
+      <template #toolbar>
+        <Authority value="api:yt:role:saveOrUpdateRoleInfoWithMenu:post">
+          <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
+        </Authority>
+        <Authority value="api:yt:role:delete">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #status="{ record }">
+        <Switch
+          :checked="record.status === 1"
+          :loading="record.pendingStatus"
+          checkedChildren="启用"
+          unCheckedChildren="禁用"
+          @change="(checked:boolean)=>statusChange(checked,record)"
+        />
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              auth: 'api:yt:role:saveOrUpdateRoleInfoWithMenu:update',
+              icon: 'clarity:note-edit-line',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              auth: 'api:yt:role:delete',
+              ifShow: !record.status,
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { delRole, getTenantRoleRoleListByPage, setRoleStatus } from '/@/api/system/system';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useDrawer } from '/@/components/Drawer';
+  import RoleDrawer from './RoleDrawer.vue';
+  import { columns, searchFormSchema } from './role.data';
+  import { RoleEnum } from '/@/enums/roleEnum';
+  import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Switch, Popconfirm } from 'ant-design-vue';
+
+  export default defineComponent({
+    name: 'TenantRoleManagement',
+    components: { BasicTable, RoleDrawer, TableAction, Authority, Switch, Popconfirm },
+    setup() {
+      const [registerDrawer, { openDrawer }] = useDrawer();
+      function handleSuccess() {
+        reload();
+      }
+      const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
+        title: '租户角色列表',
+        api: getTenantRoleRoleListByPage,
+        columns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+      });
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+        useBatchDelete(delRole, handleSuccess, setProps);
+      selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+        // Demo:status为1的选择框禁用
+        if (record.status === 1) {
+          return { disabled: true };
+        } else {
+          return { disabled: false };
+        }
+      };
+      nextTick(() => {
+        setProps(selectionOptions);
+      });
+
+      function handleCreate() {
+        openDrawer(true, {
+          isUpdate: false,
+        });
+      }
+
+      function handleEdit(record: Recordable) {
+        openDrawer(true, {
+          record,
+          isUpdate: true,
+        });
+      }
+      const statusChange = async (checked, record) => {
+        setProps({
+          loading: true,
+        });
+        setSelectedRowKeys([]);
+        resetSelectedRowKeys();
+        const newStatus = checked ? 1 : 0;
+        const { createMessage } = useMessage();
+        try {
+          await setRoleStatus(record.id, newStatus);
+          if (newStatus) {
+            createMessage.success(`启用成功`);
+          } else {
+            createMessage.success('禁用成功');
+          }
+        } finally {
+          setProps({
+            loading: false,
+          });
+          reload();
+        }
+      };
+
+      return {
+        statusChange,
+        registerTable,
+        registerDrawer,
+        handleCreate,
+        handleEdit,
+        handleSuccess,
+        RoleEnum,
+        hasBatchDelete,
+        handleDeleteOrBatchDelete,
+      };
+    },
+  });
+</script>

+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { RoleEnum } from '/@/enums/roleEnum';
+export const columns: BasicColumn[] = [
+  {
+    title: '角色名称',
+    dataIndex: 'name',
+    width: 180,
+  },
+  {
+    title: '角色Code',
+    dataIndex: 'code',
+    width: 180,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 120,
+    slots: { customRender: 'status' },
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    width: 240,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'roleName',
+    label: '角色名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入角色名称',
+    },
+  },
+
+  {
+    field: 'roleType',
+    label: '',
+    component: 'Input',
+    colProps: { span: 8 },
+    defaultValue: RoleEnum.TENANT_ADMIN,
+    ifShow: false,
+    componentProps: {
+      maxLength: 20,
+    },
+  },
+
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '启用', value: 1 },
+        { label: '停用', value: 0 },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '角色名称',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入角色名称',
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: 0,
+    componentProps: {
+      options: [
+        { label: '启用', value: 1 },
+        { label: '停用', value: 0 },
+      ],
+    },
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入备注',
+    },
+  },
+  {
+    label: ' ',
+    field: 'menu',
+    slot: 'menu',
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+];