diff --git a/src/views/appConfig/DataRuleList.vue b/src/views/appConfig/DataRuleList.vue
new file mode 100644
index 0000000..d3e9a4a
--- /dev/null
+++ b/src/views/appConfig/DataRuleList.vue
@@ -0,0 +1,144 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="数据权限规则" :width="adaptiveWidth" :rootClassName="prefixCls">
+    <BasicTable @register="registerTable">
+      <template #tableTitle>
+        <a-button type="primary" @click="handleCreate"> 新增</a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+  </BasicDrawer>
+  <DataRuleModal @register="registerModal" @success="reload" :permissionId="permissionId" />
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import DataRuleModal from './DataRuleModal.vue';
+  import { dataRuleColumns, dataRuleSearchFormSchema } from './NuAppPermission.data';
+  import { dataRuleList, deleteRule } from './NuAppPermission.api';
+  import { ColEx } from '/@/components/Form/src/types';
+  import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  const permissionId = ref('');
+  const { adaptiveWidth } = useDrawerAdaptiveWidth();
+  const { prefixCls } = useDesign('sys-menu-dataRulelist');
+  //权限规则model
+  const [registerModal, { openModal }] = useModal();
+  const [registerDrawer] = useDrawerInner(async (data) => {
+    permissionId.value = data.id;
+    setProps({ searchInfo: { permissionId: unref(permissionId) } });
+    reload();
+  });
+  // 自适应列配置
+  const adaptiveColProps: Partial<ColEx> = {
+    xs: 24, // <576px
+    sm: 24, // ≥576px
+    md: 24, // ≥768px
+    lg: 12, // ≥992px
+    xl: 8, // ≥1200px
+    xxl: 8, // ≥1600px
+  };
+  const [registerTable, { reload, setProps }] = useTable({
+    api: dataRuleList,
+    columns: dataRuleColumns,
+    size: 'small',
+    formConfig: {
+      baseColProps: adaptiveColProps,
+      labelAlign: 'right',
+      labelCol: {
+        offset: 1,
+        xs: 24,
+        sm: 24,
+        md: 24,
+        lg: 8,
+        xl: 8,
+        xxl: 8,
+      },
+      wrapperCol: {},
+      schemas: dataRuleSearchFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    showTableSetting: false,
+    canResize: false,
+    immediate: false,
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  /**
+   * 新增
+   */
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑
+   */
+  function handleEdit(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 删除
+   */
+  async function handleDelete(record) {
+    await deleteRule({ id: record.id }, reload);
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
+<style lang="less">
+  // -update-begin--author:liaozhiyang---date:20240702---for：【TV360X-1660】菜单管理-数据权限的查询和按钮没间隙
+  @prefix-cls: ~'@{namespace}-sys-menu-dataRulelist';
+  .@{prefix-cls} {
+    .jeecg-basic-table {
+      padding: 0;
+    }
+    .btnArea {
+      .ant-btn {
+        &:last-child {
+          margin-right: 0;
+        }
+        &:first-child {
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+  // -update-end--author:liaozhiyang---date:20240702---for：【TV360X-1660】菜单管理-数据权限的查询和按钮没间隙
+</style>
diff --git a/src/views/appConfig/DataRuleModal.vue b/src/views/appConfig/DataRuleModal.vue
new file mode 100644
index 0000000..7a35a92
--- /dev/null
+++ b/src/views/appConfig/DataRuleModal.vue
@@ -0,0 +1,54 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" width="700px" destroyOnClose>
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { dataRuleFormSchema } from './NuAppPermission.data';
+  import { saveOrUpdateRule } from './NuAppPermission.api';
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const props = defineProps({ permissionId: String });
+  const isUpdate = ref(true);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    schemas: dataRuleFormSchema,
+    showActionButtonGroup: false,
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+
+  //设置标题
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增规则' : '编辑规则'));
+
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      values.permissionId = props.permissionId;
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateRule(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/appConfig/MenuDrawer.vue b/src/views/appConfig/MenuDrawer.vue
new file mode 100644
index 0000000..f5a95b1
--- /dev/null
+++ b/src/views/appConfig/MenuDrawer.vue
@@ -0,0 +1,141 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :width="adaptiveWidth" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" class="menuForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, useAttrs } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema, ComponentTypes } from './NuAppPermission.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { list, saveOrUpdateMenu } from './NuAppPermission.api';
+  import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
+  import { useI18n } from "/@/hooks/web/useI18n";
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const { adaptiveWidth } = useDrawerAdaptiveWidth();
+  const attrs = useAttrs();
+  const isUpdate = ref(true);
+  const menuType = ref(0);
+  const isButton = (type) => type === 2;
+  const [registerForm, { setProps, resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
+    labelCol: {
+      md: { span: 4 },
+      sm: { span: 6 },
+    },
+    wrapperCol: {
+      md: { span: 20 },
+      sm: { span: 18 },
+    },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await resetFields();
+    setDrawerProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    menuType.value = data?.record?.menuType;
+
+    //获取下拉树信息
+    const treeData = await list();
+    updateSchema([
+      {
+        field: 'parentId',
+        // update-begin--author:liaozhiyang---date:20240306---for：【QQYUN-8379】菜单管理页菜单国际化
+        componentProps: { treeData: translateMenu(treeData, 'name') },
+        // update-end--author:liaozhiyang---date:20240306---for：【QQYUN-8379】菜单管理页菜单国际化
+      },
+      {
+        field: 'name',
+        label: isButton(unref(menuType)) ? '按钮/权限' : '菜单名称',
+      },
+      {
+        field: 'url',
+        required: !isButton(unref(menuType)),
+        componentProps: {
+          onChange: (e) => onUrlChange(e.target.value),
+        },
+      },
+    ]);
+
+    // 无论新增还是编辑，都可以设置表单值
+    if (typeof data.record === 'object') {
+      let values = { ...data.record };
+      setFieldsValue(values);
+      onUrlChange(values.url);
+    }
+    //按钮类型情况下，编辑时候清除一下地址的校验
+    if (menuType.value == 2) {
+      clearValidate();
+    }
+    //禁用表单
+    setProps({ disabled: !attrs.showFooter });
+  });
+  //获取弹窗标题
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
+  //提交事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      // iframe兼容
+      if (ComponentTypes.IFrame === values.component) {
+        values.component = values.frameSrc;
+      }
+      setDrawerProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateMenu(values, unref(isUpdate));
+      closeDrawer();
+      emit('success');
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+
+  /** url 变化时，动态设置组件名称placeholder */
+  function onUrlChange(url) {
+    let placeholder = '';
+    let httpUrl = url;
+    if (url != null && url != '') {
+      if (url.startsWith('/')) {
+        url = url.substring(1);
+      }
+      url = url.replaceAll('/', '-');
+      // 特殊标记
+      url = url.replaceAll(':', '@');
+      placeholder = `${url}`;
+    } else {
+      placeholder = '请输入组件名称';
+    }
+    updateSchema([{ field: 'componentName', componentProps: { placeholder } }]);
+    //update-begin---author:wangshuai ---date:20230204  for：[QQYUN-4058]菜单添加智能化处理------------
+    if (httpUrl != null && httpUrl != '') {
+      if (httpUrl.startsWith('http://') || httpUrl.startsWith('https://')) {
+        setFieldsValue({ component: httpUrl });
+      }
+    }
+    //update-end---author:wangshuai ---date:20230204  for：[QQYUN-4058]菜单添加智能化处理------------
+  }
+
+  /**
+  * 2024-03-06
+  * liaozhiyang
+  * 翻译菜单名称
+  */
+  function translateMenu(data, key) {
+    if (data?.length) {
+      const { t } = useI18n();
+      data.forEach((item) => {
+        if (item[key]) {
+          if (item[key].includes("t('") && t) {
+            item[key] = new Function('t', `return ${item[key]}`)(t);
+          }
+        }
+        if (item.children?.length) {
+          translateMenu(item.children, key);
+        }
+      });
+    }
+    return data;
+  }
+</script>
diff --git a/src/views/appConfig/NuAppPermission.api.ts b/src/views/appConfig/NuAppPermission.api.ts
new file mode 100644
index 0000000..df8a2ff
--- /dev/null
+++ b/src/views/appConfig/NuAppPermission.api.ts
@@ -0,0 +1,144 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/appConfig/nuAppPermission/list',
+  save = '/appConfig/nuAppPermission/add',
+  edit = '/appConfig/nuAppPermission/edit',
+  delete = '/appConfig/nuAppPermission/delete',
+  deleteBatch = '/appConfig/nuAppPermission/deleteBatch',
+  ruleList = '/appConfig/nuAppPermission/queryPermissionRule',
+  ruleSave = '/appConfig/nuAppPermission/addPermissionRule',
+  ruleEdit = '/appConfig/nuAppPermission/editPermissionRule',
+  ruleDelete = '/appConfig/nuAppPermission/deletePermissionRule',
+  checkPermDuplication = '/appConfig/nuAppPermission/checkPermDuplication',
+  isRoleExist = '/appConfig/nuAppPermission/checkRoleCode',
+}
+
+/**
+ * 编码校验
+ * @param params
+ */
+// update-begin--author:liaozhiyang---date:20231215---for：【QQYUN-7415】表单调用接口进行校验的添加防抖
+let timer;
+export const isRoleExist = (params) => {
+  return new Promise((resolve, rejected) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      defHttp
+        .get({ url: Api.isRoleExist, params }, { isTransformResponse: false })
+        .then((res) => {
+          resolve(res);
+        })
+        .catch((error) => {
+          rejected(error);
+        });
+    }, 500);
+  });
+};
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => {
+  return defHttp.get({ url: Api.list, params });
+}
+
+/**
+ * 删除菜单
+ */
+export const deleteMenu = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.delete, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 批量删除菜单
+ * @param params
+ */
+export const batchDeleteMenu = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+/**
+ * 保存或者更新菜单
+ * @param params
+ */
+export const saveOrUpdateMenu = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+/**
+ * 菜单数据权限列表接口
+ * @param params
+ */
+export const dataRuleList = (params) => defHttp.get({ url: Api.ruleList, params });
+/**
+ * 保存或者更新数据规则
+ * @param params
+ */
+export const saveOrUpdateRule = (params, isUpdate) => {
+  let url = isUpdate ? Api.ruleEdit : Api.ruleSave;
+  return defHttp.post({ url: url, params });
+};
+
+/**
+ * 删除数据权限
+ */
+export const deleteRule = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.ruleDelete, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 根据code获取字典数值
+ * @param params
+ */
+export const ajaxGetDictItems = (params) => defHttp.get({ url: `/sys/dict/getDictItems/${params.code}` });
+
+/**
+ * 唯一校验
+ * @param params
+ */
+export const getCheckPermDuplication = (params) => defHttp.get({ url: Api.checkPermDuplication, params }, { isTransformResponse: false });
+
+/**
+ * 校验菜单是否存在
+ * @param model
+ * @param schema
+ * @param required
+ */
+export const checkPermDuplication=(model, schema, required?)=>{
+  return [
+    {
+      validator: (_, value) => {
+        if (!required) {
+          return Promise.resolve();
+        }
+        if (!value && required) {
+          return Promise.reject(`请输入${schema.label}`);
+        }
+        return new Promise<void>((resolve, reject) => {
+          getCheckPermDuplication({
+            id: model.id,
+            url:model.url,
+            alwaysShow:model.alwaysShow
+          }).then((res) => {
+              res.success ? resolve() : reject(res.message || '校验失败');
+          }).catch((err) => {
+              reject(err.message || '验证失败');
+          });
+        });
+      },
+    },
+  ];
+}
diff --git a/src/views/appConfig/NuAppPermission.data.ts b/src/views/appConfig/NuAppPermission.data.ts
new file mode 100644
index 0000000..ce139a1
--- /dev/null
+++ b/src/views/appConfig/NuAppPermission.data.ts
@@ -0,0 +1,307 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { ajaxGetDictItems ,checkPermDuplication,isRoleExist } from './NuAppPermission.api';
+import { render } from '/@/utils/common/renderUtils';
+
+const isDir = (type) => type === 0;
+const isMenu = (type) => type === 1;
+const isButton = (type) => type === 2;
+
+// 定义可选择的组件类型
+export enum ComponentTypes {
+  Default = 'layouts/default/index',
+  IFrame = 'sys/iframe/FrameBlank',
+}
+
+export const columns: BasicColumn[] = [
+  {
+    title: '菜单名称',
+    dataIndex: 'name',
+    width: 200,
+    align: 'left',
+  },
+  {
+    title: '菜单编码',
+    dataIndex: 'menuCode',
+    width: 200,
+  },
+  {
+    title: '菜单类型',
+    dataIndex: 'menuType',
+    width: 150,
+    customRender: ({ text }) => {
+      return render.renderDict(text, 'menu_type');
+    },
+  },
+  {
+    title: '排序',
+    dataIndex: 'sortNo',
+    width: 50,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '菜单名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    label: 'id',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'menuType',
+    label: '菜单类型',
+    component: 'RadioButtonGroup',
+    defaultValue: 0,
+    componentProps: ({ formActionType, formModel }) => {
+      return {
+        options: [
+          { label: '一级菜单', value: 0 },
+          { label: '子菜单', value: 1 },
+          { label: '按钮/权限', value: 2 },
+        ],
+        onChange: (e) => {
+          const { updateSchema, clearValidate } = formActionType;
+          const label = isButton(e) ? '按钮/权限' : '菜单名称';
+          //清除校验
+          // clearValidate();
+          updateSchema([
+            {
+              field: 'name',
+              label: label,
+            },
+            {
+              field: 'url',
+              required: !isButton(e),
+            },
+          ]);
+          //update-begin---author:wangshuai ---date:20220729  for：[VUEN-1834]只有一级菜单，才默认值，子菜单的时候，清空------------
+          // if (isMenu(e) && !formModel.id && (formModel.component=='layouts/default/index' || formModel.component=='layouts/RouteView')) {
+          //   formModel.component = '';
+          // }
+          //update-end---author:wangshuai ---date:20220729  for：[VUEN-1834]只有一级菜单，才默认值，子菜单的时候，清空------------
+        },
+      };
+    },
+  },
+  {
+    field: 'name',
+    label: '菜单名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'menuCode',
+    label: '菜单编码',
+    required: true,
+    component: 'Input',
+    dynamicDisabled: ({ values }) => {
+      return !!values.id;
+    },
+    dynamicRules: ({ values, model }) => {
+      console.log('values:', values);
+      return [
+        {
+          required: true,
+          validator: (_, value) => {
+            if (!value) {
+              return Promise.reject('请输入菜单编码');
+            }
+            if (values) {
+              return new Promise((resolve, reject) => {
+                isRoleExist({ id: model.id, roleCode: value })
+                  .then((res) => {
+                    res.success ? resolve() : reject(res.message || '校验失败');
+                  })
+                  .catch((err) => {
+                    reject(err.message || '验证失败');
+                  });
+              });
+            }
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: 'parentId',
+    label: '上级菜单',
+    component: 'TreeSelect',
+    required: true,
+    componentProps: {
+      //update-begin---author:wangshuai ---date:20230829  for：replaceFields已过期，使用fieldNames代替------------
+      fieldNames: {
+        label: 'name',
+        key: 'id',
+        value: 'id',
+      },
+      //update-end---author:wangshuai ---date:20230829  for：replaceFields已过期，使用fieldNames代替------------
+      dropdownStyle: {
+        maxHeight: '50vh',
+      },
+      getPopupContainer: (node) => node?.parentNode,
+    },
+    ifShow: ({ values }) => !isDir(values.menuType),
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioGroup',
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        { label: '有效', value: '1' },
+        { label: '无效', value: '0' },
+      ],
+    },
+    ifShow: ({ values }) => isButton(values.menuType),
+  },
+  // {
+  //   field: 'icon',
+  //   label: '菜单图标',
+  //   component: 'IconPicker',
+  //   ifShow: ({ values }) => !isButton(values.menuType),
+  // },
+  {
+    field: 'sortNo',
+    label: '排序',
+    component: 'InputNumber',
+    defaultValue: 1,
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+];
+
+export const dataRuleColumns: BasicColumn[] = [
+  {
+    title: '规则名称',
+    dataIndex: 'ruleName',
+    width: 150,
+  },
+  {
+    title: '规则字段',
+    dataIndex: 'ruleColumn',
+    width: 100,
+  },
+  {
+    title: '规则值',
+    dataIndex: 'ruleValue',
+    width: 100,
+  },
+];
+
+export const dataRuleSearchFormSchema: FormSchema[] = [
+  {
+    field: 'ruleName',
+    label: '规则名称',
+    component: 'Input',
+    // colProps: { span: 6 },
+  },
+  {
+    field: 'ruleValue',
+    label: '规则值',
+    component: 'Input',
+    // colProps: { span: 6 },
+  },
+];
+
+export const dataRuleFormSchema: FormSchema[] = [
+  {
+    label: 'id',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'ruleName',
+    label: '规则名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'ruleColumn',
+    label: '规则字段',
+    component: 'Input',
+    ifShow: ({ values }) => {
+      const ruleConditions = Array.isArray(values.ruleConditions) ? values.ruleConditions[0] : values.ruleConditions;
+      return ruleConditions !== 'USE_SQL_RULES';
+    },
+  },
+  {
+    field: 'ruleConditions',
+    label: '条件规则',
+    required: true,
+    component: 'ApiSelect',
+    componentProps: {
+      api: ajaxGetDictItems,
+      params: { code: 'rule_conditions' },
+      labelField: 'text',
+      valueField: 'value',
+      getPopupContainer: (node) => document.body,
+    },
+  },
+  // update-begin--author:liaozhiyang---date:20240724---for：【TV360X-1864】添加系统变量
+  {
+    field: 'ruleValue',
+    component: 'JInputSelect',
+    label: '规则值',
+    required: true,
+    componentProps: {
+      selectPlaceholder: '可选择系统变量',
+      inputPlaceholder: '请输入',
+      getPopupContainer: () => document.body,
+      selectWidth: '200px',
+      options: [
+        {
+          label: '登录用户账号',
+          value: '#{sys_user_code}',
+        },
+        {
+          label: '登录用户名称',
+          value: '#{sys_user_name}',
+        },
+        {
+          label: '当前日期',
+          value: '#{sys_date}',
+        },
+        {
+          label: '当前时间',
+          value: '#{sys_time}',
+        },
+        {
+          label: '登录用户部门',
+          value: '#{sys_org_code}',
+        },
+        {
+          label: '用户拥有部门',
+          value: '#{sys_multi_org_code}',
+        },
+        {
+          label: '登录用户租户',
+          value: '#{tenant_id}',
+        },
+      ],
+    },
+  },
+  // update-end--author:liaozhiyang---date:20240724---for：【TV360X-1864】添加系统变量
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        { label: '无效', value: '0' },
+        { label: '有效', value: '1' },
+      ],
+    },
+  },
+];
diff --git a/src/views/appConfig/NuAppPermissionList.vue b/src/views/appConfig/NuAppPermissionList.vue
new file mode 100644
index 0000000..3fd568f
--- /dev/null
+++ b/src/views/appConfig/NuAppPermissionList.vue
@@ -0,0 +1,265 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增菜单</a-button>
+
+        <a-dropdown v-if="checkedKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined" />
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="ant-design:down-outlined" />
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+    <MenuDrawer @register="registerDrawer" @success="handleSuccess" :showFooter="showFooter" />
+    <DataRuleList @register="registerDrawer1" />
+  </div>
+</template>
+<script lang="ts" name="system-menu" setup>
+  import { nextTick, ref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { useDrawer } from '/@/components/Drawer';
+  import MenuDrawer from './MenuDrawer.vue';
+  import DataRuleList from './DataRuleList.vue';
+  import { columns,searchFormSchema } from './NuAppPermission.data';
+  import { list, deleteMenu, batchDeleteMenu } from './NuAppPermission.api';
+  import { useDefIndexStore } from "@/store/modules/defIndex";
+  import { useI18n } from "/@/hooks/web/useI18n";
+
+  const checkedKeys = ref<Array<string | number>>([]);
+  const showFooter = ref(true);
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerDrawer1, { openDrawer: openDataRule }] = useDrawer();
+  const { t } = useI18n();
+
+  // 自定义菜单名称列渲染
+  columns[0].customRender = function ({text, record}) {
+    const isDefIndex = checkDefIndex(record)
+    if (isDefIndex) {
+      text += '（默认首页）'
+    }
+    // update-begin--author:liaozhiyang---date:20240306---for：【QQYUN-8379】菜单管理页菜单国际化
+    if (text.includes("t('") && t) {
+      return new Function('t', `return ${text}`)(t);
+    }
+    // update-end--author:liaozhiyang---date:20240306---for：【QQYUN-8379】菜单管理页菜单国际化
+    return text
+  }
+
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext } = useListPage({
+    tableProps: {
+      title: '菜单列表',
+      api: list,
+      columns: columns,
+      size: 'small',
+      pagination: false,
+      isTreeTable: true,
+      striped: true,
+      useSearchForm: true,
+      showTableSetting: true,
+      bordered: true,
+      showIndexColumn: false,
+      tableSetting: { fullScreen: true },
+      formConfig: {
+        // update-begin--author:liaozhiyang---date:20230803---for：【QQYUN-5873】查询区域lablel默认居左
+        labelWidth: 74,
+        rowProps: { gutter: 24 },
+        // update-end--author:liaozhiyang---date:20230803---for：【QQYUN-5873】查询区域lablel默认居左
+        schemas: searchFormSchema,
+        autoAdvancedCol: 4,
+        baseColProps: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
+        actionColOptions: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
+      },
+      actionColumn: {
+        width: 120,
+      },
+    },
+  });
+  //注册table数据
+  const [registerTable, { reload, expandAll, collapseAll }] = tableContext;
+
+  /**
+   * 选择列配置
+   */
+  const rowSelection = {
+    type: 'checkbox',
+    columnWidth: 30,
+    selectedRowKeys: checkedKeys,
+    onChange: onSelectChange,
+  };
+
+  /**
+   * 选择事件
+   */
+  function onSelectChange(selectedRowKeys: (string | number)[]) {
+    checkedKeys.value = selectedRowKeys;
+  }
+
+  /**
+   * 新增
+   */
+  function handleCreate() {
+    showFooter.value = true;
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑
+   */
+  function handleEdit(record) {
+    showFooter.value = true;
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  /**
+   * 详情
+   */
+  function handleDetail(record) {
+    showFooter.value = false;
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  /**
+   * 添加下级
+   */
+  function handleAddSub(record) {
+    openDrawer(true, {
+      record: { parentId: record.id, menuType: 1 },
+      isUpdate: false,
+    });
+  }
+  /**
+   * 数据权限弹窗
+   */
+  function handleDataRule(record) {
+    openDataRule(true, { id: record.id });
+  }
+
+  /**
+   * 删除
+   */
+  async function handleDelete(record) {
+    await deleteMenu({ id: record.id }, reload);
+  }
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeleteMenu({ ids: checkedKeys.value }, () => {
+      // -update-begin--author:liaozhiyang---date:20240702---for：【TV360X-1662】菜单管理、定时任务批量删除清空选中
+      reload();
+      checkedKeys.value = [];
+      // -update-end--author:liaozhiyang---date:20240702---for：【TV360X-1662】菜单管理、定时任务批量删除清空选中
+    });
+  }
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    reload();
+    reloadDefIndex();
+  }
+
+  function onFetchSuccess() {
+    // 演示默认展开所有表项
+    nextTick(expandAll);
+  }
+
+  // --------------- begin 默认首页配置 ------------
+
+  const defIndexStore = useDefIndexStore()
+
+  // 设置默认主页
+  async function handleSetDefIndex(record: Recordable) {
+    defIndexStore.update(record.url, record.component, record.route)
+  }
+
+  /**
+   * 检查是否为默认主页
+   * @param record
+   */
+  function checkDefIndex(record: Recordable) {
+    return defIndexStore.check(record.url)
+  }
+
+  // 重新加载默认首页配置
+  function reloadDefIndex() {
+    try {
+      defIndexStore.query();
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  reloadDefIndex()
+
+  // --------------- end 默认首页配置 ------------
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        color: 'error',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+      {
+        label: '添加下级',
+        onClick: handleAddSub.bind(null, record),
+      },
+    ];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      // {
+      //   label: '详情',
+      //   onClick: handleDetail.bind(null, record),
+      // },
+      {
+        label: '添加下级',
+        onClick: handleAddSub.bind(null, record),
+      },
+      {
+        label: '删除',
+        color: 'error',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
diff --git a/src/views/appConfig/components/NuAppPermissionForm.vue b/src/views/appConfig/components/NuAppPermissionForm.vue
new file mode 100644
index 0000000..c8e727e
--- /dev/null
+++ b/src/views/appConfig/components/NuAppPermissionForm.vue
@@ -0,0 +1,266 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <JFormContainer :disabled="disabled">
+      <template #detail>
+        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="NuAppPermissionForm">
+          <a-row>
+						<a-col :span="24">
+							<a-form-item label="父id" v-bind="validateInfos.parentId" id="NuAppPermissionForm-parentId" name="parentId">
+								<a-input v-model:value="formData.parentId" placeholder="请输入父id"  allow-clear ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="菜单标题" v-bind="validateInfos.name" id="NuAppPermissionForm-name" name="name">
+								<a-input v-model:value="formData.name" placeholder="请输入菜单标题"  allow-clear ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="路径" v-bind="validateInfos.url" id="NuAppPermissionForm-url" name="url">
+								<a-input v-model:value="formData.url" placeholder="请输入路径"  allow-clear ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="组件" v-bind="validateInfos.component" id="NuAppPermissionForm-component" name="component">
+								<a-input v-model:value="formData.component" placeholder="请输入组件"  allow-clear ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="是否路由菜单: 0:不是  1:是（默认值1）" v-bind="validateInfos.isRoute" id="NuAppPermissionForm-isRoute" name="isRoute">
+								<a-input-number v-model:value="formData.isRoute" placeholder="请输入是否路由菜单: 0:不是  1:是（默认值1）" style="width: 100%" />
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="组件名字" v-bind="validateInfos.componentName" id="NuAppPermissionForm-componentName" name="componentName">
+								<a-input v-model:value="formData.componentName" placeholder="请输入组件名字"  allow-clear ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="一级菜单跳转地址" v-bind="validateInfos.redirect" id="NuAppPermissionForm-redirect" name="redirect">
+								<a-input v-model:value="formData.redirect" placeholder="请输入一级菜单跳转地址"  allow-clear ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="菜单类型(0:一级菜单; 1:子菜单:2:按钮权限)" v-bind="validateInfos.menuType" id="NuAppPermissionForm-menuType" name="menuType">
+								<a-input-number v-model:value="formData.menuType" placeholder="请输入菜单类型(0:一级菜单; 1:子菜单:2:按钮权限)" style="width: 100%" />
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="菜单权限编码" v-bind="validateInfos.perms" id="NuAppPermissionForm-perms" name="perms">
+								<a-input v-model:value="formData.perms" placeholder="请输入菜单权限编码"  allow-clear ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="权限策略1显示2禁用" v-bind="validateInfos.permsType" id="NuAppPermissionForm-permsType" name="permsType">
+								<a-input v-model:value="formData.permsType" placeholder="请输入权限策略1显示2禁用"  allow-clear ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="菜单排序" v-bind="validateInfos.sortNo" id="NuAppPermissionForm-sortNo" name="sortNo">
+								<a-input-number v-model:value="formData.sortNo" placeholder="请输入菜单排序" style="width: 100%" />
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="聚合子路由: 1是0否" v-bind="validateInfos.alwaysShow" id="NuAppPermissionForm-alwaysShow" name="alwaysShow">
+								<a-input-number v-model:value="formData.alwaysShow" placeholder="请输入聚合子路由: 1是0否" style="width: 100%" />
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="菜单图标" v-bind="validateInfos.icon" id="NuAppPermissionForm-icon" name="icon">
+								<a-input v-model:value="formData.icon" placeholder="请输入菜单图标"  allow-clear ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="是否叶子节点:    1是0否" v-bind="validateInfos.isLeaf" id="NuAppPermissionForm-isLeaf" name="isLeaf">
+								<a-input-number v-model:value="formData.isLeaf" placeholder="请输入是否叶子节点:    1是0否" style="width: 100%" />
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="是否缓存该页面:    1:是   0:不是" v-bind="validateInfos.keepAlive" id="NuAppPermissionForm-keepAlive" name="keepAlive">
+								<a-input-number v-model:value="formData.keepAlive" placeholder="请输入是否缓存该页面:    1:是   0:不是" style="width: 100%" />
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="是否隐藏路由: 0否,1是" v-bind="validateInfos.hidden" id="NuAppPermissionForm-hidden" name="hidden">
+								<a-input-number v-model:value="formData.hidden" placeholder="请输入是否隐藏路由: 0否,1是" style="width: 100%" />
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="是否隐藏tab: 0否,1是" v-bind="validateInfos.hideTab" id="NuAppPermissionForm-hideTab" name="hideTab">
+								<a-input-number v-model:value="formData.hideTab" placeholder="请输入是否隐藏tab: 0否,1是" style="width: 100%" />
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="描述" v-bind="validateInfos.description" id="NuAppPermissionForm-description" name="description">
+								<a-input v-model:value="formData.description" placeholder="请输入描述"  allow-clear ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="是否添加数据权限1是0否" v-bind="validateInfos.ruleFlag" id="NuAppPermissionForm-ruleFlag" name="ruleFlag">
+								<a-input-number v-model:value="formData.ruleFlag" placeholder="请输入是否添加数据权限1是0否" style="width: 100%" />
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="按钮权限状态(0无效1有效)" v-bind="validateInfos.status" id="NuAppPermissionForm-status" name="status">
+								<a-input v-model:value="formData.status" placeholder="请输入按钮权限状态(0无效1有效)"  allow-clear ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="外链菜单打开方式 0/内部打开 1/外部打开" v-bind="validateInfos.internalOrExternal" id="NuAppPermissionForm-internalOrExternal" name="internalOrExternal">
+								<a-input-number v-model:value="formData.internalOrExternal" placeholder="请输入外链菜单打开方式 0/内部打开 1/外部打开" style="width: 100%" />
+							</a-form-item>
+						</a-col>
+          </a-row>
+        </a-form>
+      </template>
+    </JFormContainer>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getValueType } from '/@/utils';
+  import { saveOrUpdate } from '../NuAppPermission.api';
+  import { Form } from 'ant-design-vue';
+  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+  const props = defineProps({
+    formDisabled: { type: Boolean, default: false },
+    formData: { type: Object, default: () => ({})},
+    formBpm: { type: Boolean, default: true }
+  });
+  const formRef = ref();
+  const useForm = Form.useForm;
+  const emit = defineEmits(['register', 'ok']);
+  const formData = reactive<Record<string, any>>({
+    id: '',
+    parentId: '',   
+    name: '',   
+    url: '',   
+    component: '',   
+    isRoute: undefined,
+    componentName: '',   
+    redirect: '',   
+    menuType: undefined,
+    perms: '',   
+    permsType: '',   
+    sortNo: undefined,
+    alwaysShow: undefined,
+    icon: '',   
+    isLeaf: undefined,
+    keepAlive: undefined,
+    hidden: undefined,
+    hideTab: undefined,
+    description: '',   
+    delFlag: undefined,
+    ruleFlag: undefined,
+    status: '',   
+    internalOrExternal: undefined,
+  });
+  const { createMessage } = useMessage();
+  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+  const confirmLoading = ref<boolean>(false);
+  //表单验证
+  const validatorRules = reactive({
+  });
+  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
+
+  // 表单禁用
+  const disabled = computed(()=>{
+    if(props.formBpm === true){
+      if(props.formData.disabled === false){
+        return false;
+      }else{
+        return true;
+      }
+    }
+    return props.formDisabled;
+  });
+
+  
+  /**
+   * 新增
+   */
+  function add() {
+    edit({});
+  }
+
+  /**
+   * 编辑
+   */
+  function edit(record) {
+    nextTick(() => {
+      resetFields();
+      const tmpData = {};
+      Object.keys(formData).forEach((key) => {
+        if(record.hasOwnProperty(key)){
+          tmpData[key] = record[key]
+        }
+      })
+      //赋值
+      Object.assign(formData, tmpData);
+    });
+  }
+
+  /**
+   * 提交数据
+   */
+  async function submitForm() {
+    try {
+      // 触发表单验证
+      await validate();
+    } catch ({ errorFields }) {
+      if (errorFields) {
+        const firstField = errorFields[0];
+        if (firstField) {
+          formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
+        }
+      }
+      return Promise.reject(errorFields);
+    }
+    confirmLoading.value = true;
+    const isUpdate = ref<boolean>(false);
+    //时间格式化
+    let model = formData;
+    if (model.id) {
+      isUpdate.value = true;
+    }
+    //循环数据
+    for (let data in model) {
+      //如果该数据是数组并且是字符串类型
+      if (model[data] instanceof Array) {
+        let valueType = getValueType(formRef.value.getProps, data);
+        //如果是字符串类型的需要变成以逗号分割的字符串
+        if (valueType === 'string') {
+          model[data] = model[data].join(',');
+        }
+      }
+    }
+    await saveOrUpdate(model, isUpdate.value)
+      .then((res) => {
+        if (res.success) {
+          createMessage.success(res.message);
+          emit('ok');
+        } else {
+          createMessage.warning(res.message);
+        }
+      })
+      .finally(() => {
+        confirmLoading.value = false;
+      });
+  }
+
+
+  defineExpose({
+    add,
+    edit,
+    submitForm,
+  });
+</script>
+
+<style lang="less" scoped>
+  .antd-modal-form {
+    padding: 14px;
+  }
+</style>
diff --git a/src/views/appConfig/components/NuAppPermissionModal.vue b/src/views/appConfig/components/NuAppPermissionModal.vue
new file mode 100644
index 0000000..7547439
--- /dev/null
+++ b/src/views/appConfig/components/NuAppPermissionModal.vue
@@ -0,0 +1,77 @@
+<template>
+  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
+    <NuAppPermissionForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></NuAppPermissionForm>
+  </j-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose } from 'vue';
+  import NuAppPermissionForm from './NuAppPermissionForm.vue'
+  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+  
+  const title = ref<string>('');
+  const width = ref<number>(800);
+  const visible = ref<boolean>(false);
+  const disableSubmit = ref<boolean>(false);
+  const registerForm = ref();
+  const emit = defineEmits(['register', 'success']);
+
+  /**
+   * 新增
+   */
+  function add() {
+    title.value = '新增';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.add();
+    });
+  }
+  
+  /**
+   * 编辑
+   * @param record
+   */
+  function edit(record) {
+    title.value = disableSubmit.value ? '详情' : '编辑';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.edit(record);
+    });
+  }
+  
+  /**
+   * 确定按钮点击事件
+   */
+  function handleOk() {
+    registerForm.value.submitForm();
+  }
+
+  /**
+   * form保存回调事件
+   */
+  function submitCallback() {
+    handleCancel();
+    emit('success');
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    add,
+    edit,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>
diff --git a/src/views/appConfig/components/RoleDataRuleDrawer.vue b/src/views/appConfig/components/RoleDataRuleDrawer.vue
new file mode 100644
index 0000000..a5a9091
--- /dev/null
+++ b/src/views/appConfig/components/RoleDataRuleDrawer.vue
@@ -0,0 +1,85 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="数据规则配置" width="450px" destroyOnClose>
+    <a-tabs defaultActiveKey="1">
+      <a-tab-pane tab="数据规则" key="1">
+        <a-checkbox-group v-model:value="dataRuleChecked" v-if="dataRuleList.length > 0">
+          <a-row>
+            <a-col :span="24" v-for="(item, index) in dataRuleList" :key="'dr' + index">
+              <a-checkbox :value="item.id">{{ item.ruleName }}</a-checkbox>
+            </a-col>
+
+            <a-col :span="24">
+              <div style="width: 100%; margin-top: 15px">
+                <a-button @click="saveDataRuleForRole" type="primary" size="small"> <Icon icon="ant-design:save-outlined"></Icon>点击保存</a-button>
+              </div>
+            </a-col>
+          </a-row>
+        </a-checkbox-group>
+        <div v-else><h3>无配置信息!</h3></div>
+      </a-tab-pane>
+    </a-tabs>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
+  import { useMessage } from '/src/hooks/web/useMessage';
+  import { queryDataRule, saveDataRule } from '../NuAppRole.api';
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  // 声明数据
+  const functionId = ref('');
+  const roleId = ref('');
+  const dataRuleList = ref([]);
+  const dataRuleChecked = ref([]);
+
+  /**
+   * 数据
+   */
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await reset();
+    setDrawerProps({ confirmLoading: false });
+    //权限的id
+    functionId.value = data.functionId;
+    //角色的id
+    roleId.value = data.roleId;
+    //查询数据
+    const res = await queryDataRule({ functionId: unref(functionId), roleId: unref(roleId) });
+    if (res.success) {
+      dataRuleList.value = res.result.datarule;
+      if (res.result.drChecked) {
+        dataRuleChecked.value = res.result.drChecked.split(',');
+      }
+    }
+  });
+
+  /**
+   * 重置
+   */
+  function reset() {
+    functionId.value = '';
+    roleId.value = '';
+    dataRuleList.value = [];
+    dataRuleChecked.value = [];
+  }
+
+  /**
+   * 提交
+   */
+  async function saveDataRuleForRole() {
+    if (!unref(dataRuleChecked) || unref(dataRuleChecked).length == 0) {
+      createMessage.warning('请注意，现未勾选任何数据权限!');
+    }
+    let params = {
+      permissionId: unref(functionId),
+      roleId: unref(roleId),
+      dataRuleIds: unref(dataRuleChecked).join(','),
+    };
+    await saveDataRule(params);
+    //关闭弹窗
+    closeDrawer();
+    //刷新列表
+    emit('success');
+  }
+</script>
diff --git a/src/views/appConfig/components/RoleDesc.vue b/src/views/appConfig/components/RoleDesc.vue
new file mode 100644
index 0000000..094ccf5
--- /dev/null
+++ b/src/views/appConfig/components/RoleDesc.vue
@@ -0,0 +1,18 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="角色详情" width="500px" destroyOnClose>
+    <Description :column="1" :data="roleData" :schema="formDescSchema" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, useAttrs } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
+  import { formDescSchema } from '../NuAppRole.data';
+  import { Description, useDescription } from '/@/components/Description/index';
+  const emit = defineEmits(['register']);
+  const attrs = useAttrs();
+  const roleData = ref({});
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    setDrawerProps({ confirmLoading: false });
+    roleData.value = data.record;
+  });
+</script>
diff --git a/src/views/appConfig/components/RoleDrawer.vue b/src/views/appConfig/components/RoleDrawer.vue
new file mode 100644
index 0000000..5e72907
--- /dev/null
+++ b/src/views/appConfig/components/RoleDrawer.vue
@@ -0,0 +1,53 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="getTitle" width="500px" @ok="handleSubmit" destroyOnClose>
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, useAttrs } from 'vue';
+  import { BasicForm, useForm } from '/src/components/Form';
+  import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
+  import { BasicTree, TreeItem } from '/src/components/Tree';
+  import { formSchema } from '../NuAppRole.data';
+  import { saveOrUpdateRole } from '../NuAppRole.api';
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const attrs = useAttrs();
+  const isUpdate = ref(true);
+  const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 90,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    resetFields();
+    isUpdate.value = !!data?.isUpdate;
+    setDrawerProps({ confirmLoading: false });
+    if (unref(isUpdate)) {
+      setFieldsValue({
+        ...data.record,
+      });
+    }
+    //禁用表单
+    setProps({ disabled: !attrs.showFooter });
+  });
+  /**
+   * 标题
+   */
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
+  /**
+   * 提交
+   */
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setDrawerProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateRole(values, isUpdate.value);
+      closeDrawer();
+      emit('success');
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/appConfig/components/RoleIndexModal.vue b/src/views/appConfig/components/RoleIndexModal.vue
new file mode 100644
index 0000000..4db89ea
--- /dev/null
+++ b/src/views/appConfig/components/RoleIndexModal.vue
@@ -0,0 +1,55 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="首页配置" @ok="handleSubmit" width="40%">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { roleIndexFormSchema } from '../NuAppRole.data';
+  import { saveOrUpdateRoleIndex, queryIndexByCode } from '../NuAppRole.api';
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 150,
+    schemas: roleIndexFormSchema,
+    showActionButtonGroup: false,
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    setFieldsValue({ roleCode: data.roleCode });
+    let res = await queryIndexByCode({ roleCode: data.roleCode });
+    isUpdate.value = !!res.result?.id;
+    if (unref(isUpdate)) {
+      //表单赋值
+      await setFieldsValue({
+        ...res.result,
+      });
+    }
+  });
+
+  //表单提交事件
+  async function handleSubmit(v) {
+    try {
+      let values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateRoleIndex(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success', { isUpdate: isUpdate.value, values });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/appConfig/components/RolePermissionDrawer.vue b/src/views/appConfig/components/RolePermissionDrawer.vue
new file mode 100644
index 0000000..1dc98aa
--- /dev/null
+++ b/src/views/appConfig/components/RolePermissionDrawer.vue
@@ -0,0 +1,304 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" width="650px" destroyOnClose showFooter>
+    <template #title>
+      角色权限配置
+      <a-dropdown>
+        <Icon icon="ant-design:more-outlined" class="more-icon" />
+        <template #overlay>
+          <a-menu @click="treeMenuClick">
+            <a-menu-item key="checkAll">选择全部</a-menu-item>
+            <a-menu-item key="cancelCheck">取消选择</a-menu-item>
+            <div class="line"></div>
+            <a-menu-item key="openAll">展开全部</a-menu-item>
+            <a-menu-item key="closeAll">折叠全部</a-menu-item>
+            <div class="line"></div>
+            <a-menu-item key="relation">层级关联</a-menu-item>
+            <a-menu-item key="standAlone">层级独立</a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </template>
+    <BasicTree
+      ref="treeRef"
+      checkable
+      :treeData="treeData"
+      :checkedKeys="checkedKeys"
+      :expandedKeys="expandedKeys"
+      :selectedKeys="selectedKeys"
+      :clickRowToExpand="false"
+      :checkStrictly="true"
+      title="所拥有的的权限"
+      @check="onCheck"
+      @select="onTreeNodeSelect"
+    >
+      <template #title="{ slotTitle, ruleFlag }">
+        {{ slotTitle }}
+        <Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red"></Icon>
+      </template>
+    </BasicTree>
+    <!--右下角按钮-->
+    <template #footer>
+      <!-- <PopConfirmButton title="确定放弃编辑？" @confirm="closeDrawer" okText="确定" cancelText="取消"></PopConfirmButton> -->
+      <a-button @click="closeDrawer">取消</a-button>
+      <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
+      <a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
+    </template>
+    <RoleDataRuleDrawer @register="registerDrawer1" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, onMounted } from 'vue';
+  import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicTree, TreeItem } from '/@/components/Tree';
+  import { PopConfirmButton } from '/@/components/Button';
+  import RoleDataRuleDrawer from './RoleDataRuleDrawer.vue';
+  import { queryTreeListForRole, queryRolePermission, saveRolePermission } from '../NuAppRole.api';
+  import { useI18n } from "/@/hooks/web/useI18n";
+  import { ROLE_AUTH_CONFIG_KEY } from '/@/enums/cacheEnum';
+  const emit = defineEmits(['register']);
+  //树的信息
+  const treeData = ref<TreeItem[]>([]);
+  //树的全部节点信息
+  const allTreeKeys = ref([]);
+  //树的选择节点信息
+  const checkedKeys = ref<any>([]);
+  const defaultCheckedKeys = ref([]);
+  //树的选中的节点信息
+  const selectedKeys = ref([]);
+  const roleId = ref('');
+  //树的实例
+  const treeRef = ref(null);
+  const loading = ref(false);
+
+  //展开折叠的key
+  const expandedKeys = ref<any>([]);
+  //父子节点选中状态是否关联 true不关联，false关联
+  const checkStrictly = ref<boolean>(false);
+  const [registerDrawer1, { openDrawer: openDataRuleDrawer }] = useDrawer();
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await reset();
+    setDrawerProps({ confirmLoading: false, loading: true });
+    roleId.value = data.roleId;
+    //初始化数据
+    const roleResult = await queryTreeListForRole();
+    // update-begin--author:liaozhiyang---date:20240228---for：【QQYUN-8355】角色权限配置的菜单翻译
+    treeData.value = translateTitle(roleResult.treeList);
+    // update-end--author:liaozhiyang---date:20240228---for：【QQYUN-8355】角色权限配置的菜单翻译
+    allTreeKeys.value = roleResult.ids;
+    // update-begin--author:liaozhiyang---date:20240531---for：【TV360X-590】角色授权弹窗操作缓存
+    const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
+    if (localData) {
+      const obj = JSON.parse(localData);
+      obj.level && treeMenuClick({ key: obj.level });
+      obj.expand && treeMenuClick({ key: obj.expand });
+    } else {
+      expandedKeys.value = roleResult.ids;
+    }
+    // update-end--author:liaozhiyang---date:20240531---for：【TV360X-590】角色授权弹窗操作缓存
+    //初始化角色菜单数据
+    const permResult = await queryRolePermission({ roleId: unref(roleId) });
+    checkedKeys.value = permResult;
+    defaultCheckedKeys.value = permResult;
+    setDrawerProps({ loading: false });
+  });
+  /**
+  * 2024-02-28
+  * liaozhiyang
+  * 翻译菜单名称
+   */
+  function translateTitle(data) {
+    if (data?.length) {
+      data.forEach((item) => {
+        if (item.slotTitle) {
+          const { t } = useI18n();
+          if (item.slotTitle.includes("t('") && t) {
+            item.slotTitle = new Function('t', `return ${item.slotTitle}`)(t);
+          }
+        }
+        if (item.children?.length) {
+          translateTitle(item.children);
+        }
+      });
+    }
+    return data;
+  }
+  /**
+   * 点击选中
+   * 2024-04-26
+   * liaozhiyang
+   */
+  function onCheck(o, e) {
+    // checkStrictly: true=>层级独立，false=>层级关联.
+    if (checkStrictly.value) {
+      checkedKeys.value = o.checked ? o.checked : o;
+    } else {
+      const keys = getNodeAllKey(e.node, 'children', 'key');
+      if (e.checked) {
+        // 反复操作下可能会有重复的keys，得用new Set去重下
+        checkedKeys.value = [...new Set([...checkedKeys.value, ...keys])];
+      } else {
+        const result = removeMatchingItems(checkedKeys.value, keys);
+        checkedKeys.value = result;
+      }
+    }
+  }
+  /**
+   * 2024-04-26
+   * liaozhiyang
+   * 删除相匹配数组的项
+   */
+  function removeMatchingItems(arr1, arr2) {
+    // 使用哈希表记录 arr2 中的元素
+    const hashTable = {};
+    for (const item of arr2) {
+      hashTable[item] = true;
+    }
+    // 使用 filter 方法遍历第一个数组，过滤出不在哈希表中存在的项
+    return arr1.filter((item) => !hashTable[item]);
+  }
+  /**
+   * 2024-04-26
+   * liaozhiyang
+   * 获取当前节点及以下所有子孙级的key
+   */
+  function getNodeAllKey(node: any, children: any, key: string) {
+    const result: any = [];
+    result.push(node[key]);
+    const recursion = (data) => {
+      data.forEach((item: any) => {
+        result.push(item[key]);
+        if (item[children]?.length) {
+          recursion(item[children]);
+        }
+      });
+    };
+    node[children]?.length && recursion(node[children]);
+    return result;
+  }
+
+  /**
+   * 选中节点，打开数据权限抽屉
+   */
+  function onTreeNodeSelect(key) {
+    if (key && key.length > 0) {
+      selectedKeys.value = key;
+    }
+    openDataRuleDrawer(true, { functionId: unref(selectedKeys)[0], roleId: unref(roleId) });
+  }
+  /**
+   * 数据重置
+   */
+  function reset() {
+    treeData.value = [];
+    allTreeKeys.value = [];
+    checkedKeys.value = [];
+    defaultCheckedKeys.value = [];
+    selectedKeys.value = [];
+    roleId.value = '';
+  }
+  /**
+   * 获取tree实例
+   */
+  function getTree() {
+    const tree = unref(treeRef);
+    if (!tree) {
+      throw new Error('tree is null!');
+    }
+    return tree;
+  }
+  /**
+   * 提交
+   */
+  async function handleSubmit(exit) {
+    let params = {
+      roleId: unref(roleId),
+      permissionIds: unref(getTree().getCheckedKeys()).join(','),
+      lastpermissionIds: unref(defaultCheckedKeys).join(','),
+    };
+    //update-begin-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
+    if(loading.value===false){
+      await doSave(params)
+    }else{
+      console.log('请等待上次执行完毕!');
+    }
+    if(exit){
+      // 如果关闭
+      closeDrawer();
+    }else{
+      // 没有关闭需要重新获取选中数据
+      const permResult = await queryRolePermission({ roleId: unref(roleId) });
+      defaultCheckedKeys.value = permResult;
+    }
+  }
+  
+  // VUE角色授权重复保存 #352
+  async function doSave(params) {
+    loading.value = true;
+    await saveRolePermission(params);
+    setTimeout(()=>{
+      loading.value = false;
+    }, 500)
+  }
+  //update-end-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
+
+  /**
+   * 树菜单选择
+   * @param key
+   */
+  function treeMenuClick({ key }) {
+    if (key === 'checkAll') {
+      checkedKeys.value = allTreeKeys.value;
+    } else if (key === 'cancelCheck') {
+      checkedKeys.value = [];
+    } else if (key === 'openAll') {
+      expandedKeys.value = allTreeKeys.value;
+      saveLocalOperation('expand', 'openAll');
+    } else if (key === 'closeAll') {
+      expandedKeys.value = [];
+      saveLocalOperation('expand', 'closeAll');
+    } else if (key === 'relation') {
+      checkStrictly.value = false;
+      saveLocalOperation('level', 'relation');
+    } else {
+      checkStrictly.value = true;
+      saveLocalOperation('level', 'standAlone');
+    }
+  }
+  /**
+   * 2024-05-31
+   * liaozhiyang
+   * 【TV360X-590】角色授权弹窗操作缓存
+   * */
+  const saveLocalOperation = (key, value) => {
+    const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
+    const obj = localData ? JSON.parse(localData) : {};
+    obj[key] = value;
+    localStorage.setItem(ROLE_AUTH_CONFIG_KEY, JSON.stringify(obj))
+  };
+</script>
+
+<style lang="less" scoped>
+  /** 固定操作按钮 */
+  .jeecg-basic-tree {
+    position: absolute;
+    width: 618px;
+  }
+  //update-begin---author:wangshuai ---date:20230202  for：抽屉弹窗标题图标下拉样式------------
+  .line {
+    height: 1px;
+    width: 100%;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  .more-icon {
+    font-size: 20px !important;
+    color: black;
+    display: inline-flex;
+    float: right;
+    margin-right: 2px;
+    cursor: pointer;
+  }
+  :deep(.jeecg-tree-header) {
+    border-bottom: none;
+  }
+  //update-end---author:wangshuai ---date:20230202  for：抽屉弹窗标题图标下拉样式------------
+</style>
diff --git a/src/views/appConfig/components/RoleUserTable.vue b/src/views/appConfig/components/RoleUserTable.vue
new file mode 100644
index 0000000..b9465a5
--- /dev/null
+++ b/src/views/appConfig/components/RoleUserTable.vue
@@ -0,0 +1,200 @@
+<template>
+  <BasicDrawer @register="registerBaseDrawer" title="角色用户" width="800" destroyOnClose>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button type="primary" @click="handleCreate" v-if="!disableUserEdit"> 新增用户</a-button>
+        <a-button type="primary" @click="handleSelect"> 已有用户</a-button>
+
+        <a-dropdown v-if="checkedKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="bx:bx-unlink"></Icon>
+                取消关联
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="ant-design:down-outlined"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+    <!--用户操作抽屉-->
+    <UserDrawer @register="registerDrawer" @success="handleSuccess" />
+    <!--用户选择弹窗-->
+    <UseSelectModal @register="registerModal" @select="selectOk" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, watch, unref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/src/components/Table';
+  import { BasicDrawer, useDrawer, useDrawerInner } from '/src/components/Drawer';
+  import { useModal } from '/src/components/Modal';
+  import UserDrawer from '/@/views/system/user/UserDrawer.vue';
+  import UseSelectModal from './UseSelectModal.vue';
+  import { userList, deleteUserRole, batchDeleteUserRole, addUserRole } from '../NuAppRole.api';
+  import { userColumns, searchUserFormSchema } from '../NuAppRole.data';
+  import { getUserRoles } from '/@/views/system/user/user.api';
+
+  const emit = defineEmits(['register', 'hideUserList']);
+  const props = defineProps({
+    disableUserEdit: {type:Boolean,default:false}
+  })
+  
+  const checkedKeys = ref<Array<string | number>>([]);
+  const roleId = ref('');
+  const [registerBaseDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    roleId.value = data.id;
+    setProps({ searchInfo: { roleId: data.id } });
+    reload();
+  });
+  //注册drawer
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  //注册drawer
+  const [registerModal, { openModal }] = useModal();
+  const [registerTable, { reload, updateTableDataRecord, setProps }] = useTable({
+    title: '用户列表',
+    api: userList,
+    columns: userColumns,
+    formConfig: {
+      //update-begin---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示
+      labelWidth: 60,
+      //update-end---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示
+      schemas: searchUserFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    striped: true,
+    useSearchForm: true,
+    showTableSetting: true,
+    clickToRowSelect: false,
+    bordered: true,
+    showIndexColumn: false,
+    // 【issues/1064】列设置的 cacheKey
+    tableSetting: { fullScreen: true, cacheKey: 'role_user_table' },
+    canResize: false,
+    rowKey: 'id',
+    actionColumn: {
+      width: 180,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  /**
+   * 选择列配置
+   */
+  const rowSelection = {
+    type: 'checkbox',
+    columnWidth: 50,
+    selectedRowKeys: checkedKeys,
+    onChange: onSelectChange,
+  };
+
+  /**
+   * 选择事件
+   */
+  function onSelectChange(selectedRowKeys: (string | number)[], selectionRows) {
+    checkedKeys.value = selectedRowKeys;
+  }
+
+  /**
+   * 新增
+   */
+  function handleCreate() {
+    openDrawer(true, {
+      isUpdate: false,
+      selectedroles: [roleId.value],
+      isRole: true,
+    });
+  }
+  /**
+   * 编辑
+   */
+  async function handleEdit(record: Recordable) {
+    try {
+      const userRoles = await getUserRoles({ userid: record.id });
+      if (userRoles && userRoles.length > 0) {
+        record.selectedroles = userRoles;
+      }
+    } catch (e) {
+      console.log(e);
+    }
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+      isRole: true,
+    });
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteUserRole({ userId: record.id, roleId: roleId.value }, reload);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeleteUserRole({ userIds: checkedKeys.value.join(','), roleId: roleId.value }, () => {
+      // update-begin--author:liaozhiyang---date:20240701---for：【TV360X-1655】批量取消关联之后清空选中记录
+      reload();
+      checkedKeys.value = [];
+      // update-end--author:liaozhiyang---date:20240701---for：【TV360X-1655】批量取消关联之后清空选中记录
+    });
+  }
+
+  /**
+   * 成功回调
+   */
+  function handleSuccess({ isUpdate, values }) {
+    isUpdate ? updateTableDataRecord(values.id, values) : reload();
+  }
+  /**
+   * 选择已有用户
+   */
+  function handleSelect() {
+    openModal(true);
+  }
+  /**
+   * 添加已有用户
+   */
+  async function selectOk(val) {
+    await addUserRole({ roleId: roleId.value, userIdList: val }, reload);
+  }
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+        ifShow: () => !props.disableUserEdit,
+      },
+      {
+        label: '取消关联',
+        popConfirm: {
+          title: '是否确认取消关联',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
+
+<style scoped>
+  /*update-begin---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示*/
+  :deep(.ant-form-item-control-input-content){
+    text-align: left;
+  }
+  /*update-end---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示*/
+</style>
diff --git a/src/views/appConfig/components/UseSelectModal.vue b/src/views/appConfig/components/UseSelectModal.vue
new file mode 100644
index 0000000..3165a2e
--- /dev/null
+++ b/src/views/appConfig/components/UseSelectModal.vue
@@ -0,0 +1,67 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="用户选择列表" width="1000px" @ok="handleSubmit" destroyOnClose @openChange="handleOpenChange">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref, toRaw } from 'vue';
+  import { BasicModal, useModalInner } from '/src/components/Modal';
+  import { BasicTable, useTable, TableAction } from '/src/components/Table';
+  import { userColumns, searchUserFormSchema } from '../NuAppRole.data';
+  import { list } from '/@/views/system/user/user.api';
+  // 声明Emits
+  const emit = defineEmits(['select', 'register']);
+  const checkedKeys = ref<Array<string | number>>([]);
+  const [registerModal, { setModalProps, closeModal }] = useModalInner();
+  //注册table数据
+  const [registerTable, { reload }] = useTable({
+    api: list,
+    rowKey: 'id',
+    columns: userColumns,
+    formConfig: {
+      labelWidth: 60,
+      schemas: searchUserFormSchema,
+      baseRowStyle: { maxHeight: '20px' },
+      autoSubmitOnEnter: true,
+    },
+    striped: true,
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+  });
+  /**
+   * 选择列配置
+   */
+  const rowSelection = {
+    type: 'checkbox',
+    columnWidth: 50,
+    selectedRowKeys: checkedKeys,
+    onChange: onSelectChange,
+  };
+  /**
+   * 选择事件
+   */
+  function onSelectChange(selectedRowKeys: (string | number)[]) {
+    checkedKeys.value = selectedRowKeys;
+  }
+
+  const handleOpenChange = (visible) => {
+    // -update-begin--author:liaozhiyang---date:20240702---for：【TV360X-1679】系统角色-角色用户再次打开弹窗重置之前选中的状态
+    if (visible) {
+      checkedKeys.value = [];
+    }
+    // -update-end--author:liaozhiyang---date:20240702---for：【TV360X-1679】系统角色-角色用户再次打开弹窗重置之前选中的状态
+  };
+
+  //提交事件
+  function handleSubmit() {
+    setModalProps({ confirmLoading: true });
+    //关闭弹窗
+    closeModal();
+    //刷新列表
+    emit('select', toRaw(unref(checkedKeys)));
+    setModalProps({ confirmLoading: false });
+  }
+</script>
diff --git a/src/views/biz/bizEmployeesInfo/BizEmployeesInfo.api.ts b/src/views/biz/bizEmployeesInfo/BizEmployeesInfo.api.ts
index e446d28..cd1aeb4 100644
--- a/src/views/biz/bizEmployeesInfo/BizEmployeesInfo.api.ts
+++ b/src/views/biz/bizEmployeesInfo/BizEmployeesInfo.api.ts
@@ -17,6 +17,10 @@ enum Api {
   checkTags='/bizEmployeesInfo/nuBizEmployeesServcieTags/add',
   removeTags = '/bizEmployeesInfo/nuBizEmployeesServcieTags/delete',
   getEmployessServiceTags = '/services/serviceTag/serviceTag/getEmployessServiceTags',
+  queryTreeListForRole = '/employessPermission/nuAppEmployessPermission/queryTreeList',
+  queryRolePermission = '/employessPermission/nuAppEmployessPermission/queryEmployessPermission',
+  saveRolePermission = '/employessPermission/nuAppEmployessPermission/saveRolePermission',
+  queryDataRule = '/employessPermission/nuAppEmployessPermission/queryDataRule',
 
 }
 
@@ -90,4 +94,27 @@ export const checkTags = (params) => {
 export const removeTags = (params) => {
   let url = Api.removeTags;
   return defHttp.delete({ url: url, params },  {joinParamsToUrl: true});
-}
\ No newline at end of file
+}
+
+
+/**
+ * 根据角色查询树信息
+ */
+export const queryTreeListForRole = () => defHttp.get({ url: Api.queryTreeListForRole });
+/**
+ * 查询角色权限
+ */
+export const queryRolePermission = (params) => defHttp.get({ url: Api.queryRolePermission, params });
+/**
+ * 保存角色权限
+ */
+export const saveRolePermission = (params) => defHttp.post({ url: Api.saveRolePermission, params });
+/**
+ * 查询角色数据规则
+ */
+export const queryDataRule = (params) =>
+  defHttp.get({ url: `${Api.queryDataRule}/${params.functionId}/${params.roleId}` }, { isTransformResponse: false });
+/**
+ * 保存角色数据规则
+ */
+export const saveDataRule = (params) => defHttp.post({ url: Api.queryDataRule, params });
\ No newline at end of file
diff --git a/src/views/biz/bizEmployeesInfo/BizEmployeesInfoList.vue b/src/views/biz/bizEmployeesInfo/BizEmployeesInfoList.vue
index 7af2cb9..7add2ce 100644
--- a/src/views/biz/bizEmployeesInfo/BizEmployeesInfoList.vue
+++ b/src/views/biz/bizEmployeesInfo/BizEmployeesInfoList.vue
@@ -98,6 +98,7 @@
                       <a-menu-item @click="handleEdit(item)">编辑</a-menu-item>
                       <a-menu-item @click="handleFwbq(item)">服务标签</a-menu-item>
                       <a-menu-item @click="handleFpzh(item)">分配账号</a-menu-item>
+                      <a-menu-item @click="handlePerssion(item)">分配角色</a-menu-item>
                     </a-menu>
                   </template>
                 </a-dropdown>
@@ -125,6 +126,8 @@
     <EmployeesServiceTagModal ref="registerServiceTagModal" @success="handleSuccess"></EmployeesServiceTagModal>
     <!--用户抽屉-->
     <UserDrawer @register="registerDrawer" @success="handleSuccess" />
+    <!--角色菜单授权抽屉-->
+    <RolePermissionDrawer @register="rolePermissionDrawer" />
   </div>
 </template>
 
@@ -141,8 +144,10 @@ import { Pagination } from 'ant-design-vue';
 import { useDrawer } from '/@/components/Drawer';
 import UserDrawer from '/@/views/system/user/UserDrawer.vue';
 import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
+  import RolePermissionDrawer from './components/RolePermissionDrawer.vue';
 
 
+  const [rolePermissionDrawer, { openDrawer: openRolePermissionDrawer }] = useDrawer();
 const APagination = Pagination;
 //注册drawer
 const [registerDrawer, { openDrawer }] = useDrawer();
@@ -167,6 +172,13 @@ const wrapperCol = reactive({
   sm: 20,
 });
 
+  /**
+   * 角色授权弹窗
+   */
+  function handlePerssion(record) {
+    console.log("🚀 ~ handlePerssion ~ record:", record.id)
+    openRolePermissionDrawer(true, { roleId: record.id });
+  }
 //当没有员工头像时，默认展示企业logo
 function handleHeadPath(headPath) {
   console.log('headPath--->', headPath);
diff --git a/src/views/biz/bizEmployeesInfo/components/RolePermissionDrawer.vue b/src/views/biz/bizEmployeesInfo/components/RolePermissionDrawer.vue
new file mode 100644
index 0000000..cb2ed57
--- /dev/null
+++ b/src/views/biz/bizEmployeesInfo/components/RolePermissionDrawer.vue
@@ -0,0 +1,301 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" width="650px" destroyOnClose showFooter>
+    <template #title>
+      角色权限配置
+      <a-dropdown>
+        <Icon icon="ant-design:more-outlined" class="more-icon" />
+        <template #overlay>
+          <a-menu @click="treeMenuClick">
+            <a-menu-item key="checkAll">选择全部</a-menu-item>
+            <a-menu-item key="cancelCheck">取消选择</a-menu-item>
+            <div class="line"></div>
+            <a-menu-item key="openAll">展开全部</a-menu-item>
+            <a-menu-item key="closeAll">折叠全部</a-menu-item>
+            <div class="line"></div>
+            <a-menu-item key="relation">层级关联</a-menu-item>
+            <a-menu-item key="standAlone">层级独立</a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </template>
+    <BasicTree
+      ref="treeRef"
+      checkable
+      :treeData="treeData"
+      :checkedKeys="checkedKeys"
+      :expandedKeys="expandedKeys"
+      :selectedKeys="selectedKeys"
+      :clickRowToExpand="false"
+      :checkStrictly="true"
+      title="所拥有的的权限"
+      @check="onCheck"
+      @select="onTreeNodeSelect"
+    >
+      <template #title="{ slotTitle, ruleFlag }">
+        {{ slotTitle }}
+        <Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red"></Icon>
+      </template>
+    </BasicTree>
+    <!--右下角按钮-->
+    <template #footer>
+      <!-- <PopConfirmButton title="确定放弃编辑？" @confirm="closeDrawer" okText="确定" cancelText="取消"></PopConfirmButton> -->
+      <a-button @click="closeDrawer">取消</a-button>
+      <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
+      <a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
+    </template>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, onMounted } from 'vue';
+  import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicTree, TreeItem } from '/@/components/Tree';
+  import { PopConfirmButton } from '/@/components/Button';
+  import { queryTreeListForRole, queryRolePermission, saveRolePermission } from '../BizEmployeesInfo.api';
+  import { useI18n } from "/@/hooks/web/useI18n";
+  import { ROLE_AUTH_CONFIG_KEY } from '/@/enums/cacheEnum';
+  const emit = defineEmits(['register']);
+  //树的信息
+  const treeData = ref<TreeItem[]>([]);
+  //树的全部节点信息
+  const allTreeKeys = ref([]);
+  //树的选择节点信息
+  const checkedKeys = ref<any>([]);
+  const defaultCheckedKeys = ref([]);
+  //树的选中的节点信息
+  const selectedKeys = ref([]);
+  const roleId = ref('');
+  //树的实例
+  const treeRef = ref(null);
+  const loading = ref(false);
+
+  //展开折叠的key
+  const expandedKeys = ref<any>([]);
+  //父子节点选中状态是否关联 true不关联，false关联
+  const checkStrictly = ref<boolean>(false);
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await reset();
+    setDrawerProps({ confirmLoading: false, loading: true });
+    roleId.value = data.roleId;
+    //初始化数据
+    const roleResult = await queryTreeListForRole();
+    // update-begin--author:liaozhiyang---date:20240228---for：【QQYUN-8355】角色权限配置的菜单翻译
+    treeData.value = translateTitle(roleResult.treeList);
+    // update-end--author:liaozhiyang---date:20240228---for：【QQYUN-8355】角色权限配置的菜单翻译
+    allTreeKeys.value = roleResult.ids;
+    // update-begin--author:liaozhiyang---date:20240531---for：【TV360X-590】角色授权弹窗操作缓存
+    const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
+    if (localData) {
+      const obj = JSON.parse(localData);
+      obj.level && treeMenuClick({ key: obj.level });
+      obj.expand && treeMenuClick({ key: obj.expand });
+    } else {
+      expandedKeys.value = roleResult.ids;
+    }
+    // update-end--author:liaozhiyang---date:20240531---for：【TV360X-590】角色授权弹窗操作缓存
+    //初始化角色菜单数据
+    const permResult = await queryRolePermission({ employessId: unref(roleId) });
+    checkedKeys.value = permResult;
+    defaultCheckedKeys.value = permResult;
+    setDrawerProps({ loading: false });
+  });
+  /**
+  * 2024-02-28
+  * liaozhiyang
+  * 翻译菜单名称
+   */
+  function translateTitle(data) {
+    if (data?.length) {
+      data.forEach((item) => {
+        if (item.slotTitle) {
+          const { t } = useI18n();
+          if (item.slotTitle.includes("t('") && t) {
+            item.slotTitle = new Function('t', `return ${item.slotTitle}`)(t);
+          }
+        }
+        if (item.children?.length) {
+          translateTitle(item.children);
+        }
+      });
+    }
+    return data;
+  }
+  /**
+   * 点击选中
+   * 2024-04-26
+   * liaozhiyang
+   */
+  function onCheck(o, e) {
+    // checkStrictly: true=>层级独立，false=>层级关联.
+    if (checkStrictly.value) {
+      checkedKeys.value = o.checked ? o.checked : o;
+    } else {
+      const keys = getNodeAllKey(e.node, 'children', 'key');
+      if (e.checked) {
+        // 反复操作下可能会有重复的keys，得用new Set去重下
+        checkedKeys.value = [...new Set([...checkedKeys.value, ...keys])];
+      } else {
+        const result = removeMatchingItems(checkedKeys.value, keys);
+        checkedKeys.value = result;
+      }
+    }
+  }
+  /**
+   * 2024-04-26
+   * liaozhiyang
+   * 删除相匹配数组的项
+   */
+  function removeMatchingItems(arr1, arr2) {
+    // 使用哈希表记录 arr2 中的元素
+    const hashTable = {};
+    for (const item of arr2) {
+      hashTable[item] = true;
+    }
+    // 使用 filter 方法遍历第一个数组，过滤出不在哈希表中存在的项
+    return arr1.filter((item) => !hashTable[item]);
+  }
+  /**
+   * 2024-04-26
+   * liaozhiyang
+   * 获取当前节点及以下所有子孙级的key
+   */
+  function getNodeAllKey(node: any, children: any, key: string) {
+    const result: any = [];
+    result.push(node[key]);
+    const recursion = (data) => {
+      data.forEach((item: any) => {
+        result.push(item[key]);
+        if (item[children]?.length) {
+          recursion(item[children]);
+        }
+      });
+    };
+    node[children]?.length && recursion(node[children]);
+    return result;
+  }
+
+  /**
+   * 选中节点，打开数据权限抽屉
+   */
+  function onTreeNodeSelect(key) {
+    if (key && key.length > 0) {
+      selectedKeys.value = key;
+    }
+    // openDataRuleDrawer(true, { functionId: unref(selectedKeys)[0], roleId: unref(roleId) });
+  }
+  /**
+   * 数据重置
+   */
+  function reset() {
+    treeData.value = [];
+    allTreeKeys.value = [];
+    checkedKeys.value = [];
+    defaultCheckedKeys.value = [];
+    selectedKeys.value = [];
+    roleId.value = '';
+  }
+  /**
+   * 获取tree实例
+   */
+  function getTree() {
+    const tree = unref(treeRef);
+    if (!tree) {
+      throw new Error('tree is null!');
+    }
+    return tree;
+  }
+  /**
+   * 提交
+   */
+  async function handleSubmit(exit) {
+    let params = {
+      roleId: unref(roleId),
+      permissionIds: unref(getTree().getCheckedKeys()).join(','),
+      lastpermissionIds: unref(defaultCheckedKeys).join(','),
+    };
+    //update-begin-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
+    if(loading.value===false){
+      await doSave(params)
+    }else{
+      console.log('请等待上次执行完毕!');
+    }
+    if(exit){
+      // 如果关闭
+      closeDrawer();
+    }else{
+      // 没有关闭需要重新获取选中数据
+      const permResult = await queryRolePermission({ employessId: unref(roleId) });
+      defaultCheckedKeys.value = permResult;
+    }
+  }
+  
+  // VUE角色授权重复保存 #352
+  async function doSave(params) {
+    loading.value = true;
+    await saveRolePermission(params);
+    setTimeout(()=>{
+      loading.value = false;
+    }, 500)
+  }
+  //update-end-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
+
+  /**
+   * 树菜单选择
+   * @param key
+   */
+  function treeMenuClick({ key }) {
+    if (key === 'checkAll') {
+      checkedKeys.value = allTreeKeys.value;
+    } else if (key === 'cancelCheck') {
+      checkedKeys.value = [];
+    } else if (key === 'openAll') {
+      expandedKeys.value = allTreeKeys.value;
+      saveLocalOperation('expand', 'openAll');
+    } else if (key === 'closeAll') {
+      expandedKeys.value = [];
+      saveLocalOperation('expand', 'closeAll');
+    } else if (key === 'relation') {
+      checkStrictly.value = false;
+      saveLocalOperation('level', 'relation');
+    } else {
+      checkStrictly.value = true;
+      saveLocalOperation('level', 'standAlone');
+    }
+  }
+  /**
+   * 2024-05-31
+   * liaozhiyang
+   * 【TV360X-590】角色授权弹窗操作缓存
+   * */
+  const saveLocalOperation = (key, value) => {
+    const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
+    const obj = localData ? JSON.parse(localData) : {};
+    obj[key] = value;
+    localStorage.setItem(ROLE_AUTH_CONFIG_KEY, JSON.stringify(obj))
+  };
+</script>
+
+<style lang="less" scoped>
+  /** 固定操作按钮 */
+  .jeecg-basic-tree {
+    position: absolute;
+    width: 618px;
+  }
+  //update-begin---author:wangshuai ---date:20230202  for：抽屉弹窗标题图标下拉样式------------
+  .line {
+    height: 1px;
+    width: 100%;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  .more-icon {
+    font-size: 20px !important;
+    color: black;
+    display: inline-flex;
+    float: right;
+    margin-right: 2px;
+    cursor: pointer;
+  }
+  :deep(.jeecg-tree-header) {
+    border-bottom: none;
+  }
+  //update-end---author:wangshuai ---date:20230202  for：抽屉弹窗标题图标下拉样式------------
+</style>
diff --git a/src/views/biz/nuBaseInfo/NuBaseInfo.api.ts b/src/views/biz/nuBaseInfo/NuBaseInfo.api.ts
index dbff4d7..7be6ad0 100644
--- a/src/views/biz/nuBaseInfo/NuBaseInfo.api.ts
+++ b/src/views/biz/nuBaseInfo/NuBaseInfo.api.ts
@@ -8,6 +8,10 @@ enum Api {
   importExcel = '/nuBaseInfo/nuBaseInfo/importExcel',
   exportXls = '/nuBaseInfo/nuBaseInfo/exportXls',
   qyList = '/nuBaseInfo/nuBaseInfo/qyList',
+  queryTreeListForRole = '/nuidPermission/nuAppNuidPermission/queryTreeList',
+  queryRolePermission = '/nuidPermission/nuAppNuidPermission/queryNuidPermission',
+  saveRolePermission = '/nuidPermission/nuAppNuidPermission/saveRolePermission',
+  queryDataRule = '/nuidPermission/nuAppNuidPermission/queryDataRule',
 }
 
 /**
@@ -37,3 +41,26 @@ export const saveOrUpdate = (params, isUpdate) => {
   let url = isUpdate ? Api.edit : Api.save;
   return defHttp.post({ url: url, params }, { isTransformResponse: false });
 };
+
+
+/**
+ * 根据角色查询树信息
+ */
+export const queryTreeListForRole = () => defHttp.get({ url: Api.queryTreeListForRole });
+/**
+ * 查询角色权限
+ */
+export const queryRolePermission = (params) => defHttp.get({ url: Api.queryRolePermission, params });
+/**
+ * 保存角色权限
+ */
+export const saveRolePermission = (params) => defHttp.post({ url: Api.saveRolePermission, params });
+/**
+ * 查询角色数据规则
+ */
+export const queryDataRule = (params) =>
+  defHttp.get({ url: `${Api.queryDataRule}/${params.functionId}/${params.roleId}` }, { isTransformResponse: false });
+/**
+ * 保存角色数据规则
+ */
+export const saveDataRule = (params) => defHttp.post({ url: Api.queryDataRule, params });
\ No newline at end of file
diff --git a/src/views/biz/nuBaseInfo/QyxxList.vue b/src/views/biz/nuBaseInfo/QyxxList.vue
index 351624e..5014110 100644
--- a/src/views/biz/nuBaseInfo/QyxxList.vue
+++ b/src/views/biz/nuBaseInfo/QyxxList.vue
@@ -81,6 +81,7 @@
                   </template>
                   <a-button type="dashed" size="small" style="margin-left:10px">二维码</a-button>
                 </a-popover>
+                <a-button type="dashed" size="small" @click="handlePerssion(item)" style="margin-left:10px" >外挂</a-button>
             </div>
             
             <div style="float:right;margin-top: 20px;">
@@ -99,6 +100,8 @@
     <NuBaseInfoModal ref="registerModal" @success="handleSuccess"></NuBaseInfoModal>
     <BaseWlsbListModal ref="wlsbModal" ></BaseWlsbListModal>
     <CameraPreviewModal ref="previewModal"></CameraPreviewModal>
+    <!--角色菜单授权抽屉-->
+    <RolePermissionDrawer @register="rolePermissionDrawer" />
   </div>
 </template>
 
@@ -119,6 +122,11 @@ import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectT
 import { useMessage } from '/@/hooks/web/useMessage';
 import QRCodeWithLogo from './EwmImage.vue';
 import { defHttp } from '/@/utils/http/axios';
+import { useDrawer } from '/@/components/Drawer';
+  import RolePermissionDrawer from './components/RolePermissionDrawer.vue';
+
+
+  const [rolePermissionDrawer, { openDrawer: openRolePermissionDrawer }] = useDrawer();
 
 const logoUrl = 'https://www.focusnu.com/devops/resource/img/logo.png'; // 替换为你的 Logo URL
 
@@ -143,6 +151,13 @@ const { createMessage } = useMessage();
     sm: 18,
   });
 
+  /**
+   * 角色授权弹窗
+   */
+  function handlePerssion(record) {
+    console.log("🚀 ~ handlePerssion ~ record:", record.nuId)
+    openRolePermissionDrawer(true, { roleId: record.nuId });
+  }
 //查看物联设备
   function handleWlsb(record) {
     wlsbModal.value.disableSubmit = true;
diff --git a/src/views/biz/nuBaseInfo/components/RolePermissionDrawer.vue b/src/views/biz/nuBaseInfo/components/RolePermissionDrawer.vue
new file mode 100644
index 0000000..92b2c80
--- /dev/null
+++ b/src/views/biz/nuBaseInfo/components/RolePermissionDrawer.vue
@@ -0,0 +1,301 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" width="650px" destroyOnClose showFooter>
+    <template #title>
+      角色权限配置
+      <a-dropdown>
+        <Icon icon="ant-design:more-outlined" class="more-icon" />
+        <template #overlay>
+          <a-menu @click="treeMenuClick">
+            <a-menu-item key="checkAll">选择全部</a-menu-item>
+            <a-menu-item key="cancelCheck">取消选择</a-menu-item>
+            <div class="line"></div>
+            <a-menu-item key="openAll">展开全部</a-menu-item>
+            <a-menu-item key="closeAll">折叠全部</a-menu-item>
+            <div class="line"></div>
+            <a-menu-item key="relation">层级关联</a-menu-item>
+            <a-menu-item key="standAlone">层级独立</a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </template>
+    <BasicTree
+      ref="treeRef"
+      checkable
+      :treeData="treeData"
+      :checkedKeys="checkedKeys"
+      :expandedKeys="expandedKeys"
+      :selectedKeys="selectedKeys"
+      :clickRowToExpand="false"
+      :checkStrictly="true"
+      title="所拥有的的权限"
+      @check="onCheck"
+      @select="onTreeNodeSelect"
+    >
+      <template #title="{ slotTitle, ruleFlag }">
+        {{ slotTitle }}
+        <Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red"></Icon>
+      </template>
+    </BasicTree>
+    <!--右下角按钮-->
+    <template #footer>
+      <!-- <PopConfirmButton title="确定放弃编辑？" @confirm="closeDrawer" okText="确定" cancelText="取消"></PopConfirmButton> -->
+      <a-button @click="closeDrawer">取消</a-button>
+      <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
+      <a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
+    </template>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, onMounted } from 'vue';
+  import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicTree, TreeItem } from '/@/components/Tree';
+  import { PopConfirmButton } from '/@/components/Button';
+  import { queryTreeListForRole, queryRolePermission, saveRolePermission } from '../NuBaseInfo.api';
+  import { useI18n } from "/@/hooks/web/useI18n";
+  import { ROLE_AUTH_CONFIG_KEY } from '/@/enums/cacheEnum';
+  const emit = defineEmits(['register']);
+  //树的信息
+  const treeData = ref<TreeItem[]>([]);
+  //树的全部节点信息
+  const allTreeKeys = ref([]);
+  //树的选择节点信息
+  const checkedKeys = ref<any>([]);
+  const defaultCheckedKeys = ref([]);
+  //树的选中的节点信息
+  const selectedKeys = ref([]);
+  const roleId = ref('');
+  //树的实例
+  const treeRef = ref(null);
+  const loading = ref(false);
+
+  //展开折叠的key
+  const expandedKeys = ref<any>([]);
+  //父子节点选中状态是否关联 true不关联，false关联
+  const checkStrictly = ref<boolean>(false);
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await reset();
+    setDrawerProps({ confirmLoading: false, loading: true });
+    roleId.value = data.roleId;
+    //初始化数据
+    const roleResult = await queryTreeListForRole();
+    // update-begin--author:liaozhiyang---date:20240228---for：【QQYUN-8355】角色权限配置的菜单翻译
+    treeData.value = translateTitle(roleResult.treeList);
+    // update-end--author:liaozhiyang---date:20240228---for：【QQYUN-8355】角色权限配置的菜单翻译
+    allTreeKeys.value = roleResult.ids;
+    // update-begin--author:liaozhiyang---date:20240531---for：【TV360X-590】角色授权弹窗操作缓存
+    const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
+    if (localData) {
+      const obj = JSON.parse(localData);
+      obj.level && treeMenuClick({ key: obj.level });
+      obj.expand && treeMenuClick({ key: obj.expand });
+    } else {
+      expandedKeys.value = roleResult.ids;
+    }
+    // update-end--author:liaozhiyang---date:20240531---for：【TV360X-590】角色授权弹窗操作缓存
+    //初始化角色菜单数据
+    const permResult = await queryRolePermission({ nuId: unref(roleId) });
+    checkedKeys.value = permResult;
+    defaultCheckedKeys.value = permResult;
+    setDrawerProps({ loading: false });
+  });
+  /**
+  * 2024-02-28
+  * liaozhiyang
+  * 翻译菜单名称
+   */
+  function translateTitle(data) {
+    if (data?.length) {
+      data.forEach((item) => {
+        if (item.slotTitle) {
+          const { t } = useI18n();
+          if (item.slotTitle.includes("t('") && t) {
+            item.slotTitle = new Function('t', `return ${item.slotTitle}`)(t);
+          }
+        }
+        if (item.children?.length) {
+          translateTitle(item.children);
+        }
+      });
+    }
+    return data;
+  }
+  /**
+   * 点击选中
+   * 2024-04-26
+   * liaozhiyang
+   */
+  function onCheck(o, e) {
+    // checkStrictly: true=>层级独立，false=>层级关联.
+    if (checkStrictly.value) {
+      checkedKeys.value = o.checked ? o.checked : o;
+    } else {
+      const keys = getNodeAllKey(e.node, 'children', 'key');
+      if (e.checked) {
+        // 反复操作下可能会有重复的keys，得用new Set去重下
+        checkedKeys.value = [...new Set([...checkedKeys.value, ...keys])];
+      } else {
+        const result = removeMatchingItems(checkedKeys.value, keys);
+        checkedKeys.value = result;
+      }
+    }
+  }
+  /**
+   * 2024-04-26
+   * liaozhiyang
+   * 删除相匹配数组的项
+   */
+  function removeMatchingItems(arr1, arr2) {
+    // 使用哈希表记录 arr2 中的元素
+    const hashTable = {};
+    for (const item of arr2) {
+      hashTable[item] = true;
+    }
+    // 使用 filter 方法遍历第一个数组，过滤出不在哈希表中存在的项
+    return arr1.filter((item) => !hashTable[item]);
+  }
+  /**
+   * 2024-04-26
+   * liaozhiyang
+   * 获取当前节点及以下所有子孙级的key
+   */
+  function getNodeAllKey(node: any, children: any, key: string) {
+    const result: any = [];
+    result.push(node[key]);
+    const recursion = (data) => {
+      data.forEach((item: any) => {
+        result.push(item[key]);
+        if (item[children]?.length) {
+          recursion(item[children]);
+        }
+      });
+    };
+    node[children]?.length && recursion(node[children]);
+    return result;
+  }
+
+  /**
+   * 选中节点，打开数据权限抽屉
+   */
+  function onTreeNodeSelect(key) {
+    if (key && key.length > 0) {
+      selectedKeys.value = key;
+    }
+    // openDataRuleDrawer(true, { functionId: unref(selectedKeys)[0], roleId: unref(roleId) });
+  }
+  /**
+   * 数据重置
+   */
+  function reset() {
+    treeData.value = [];
+    allTreeKeys.value = [];
+    checkedKeys.value = [];
+    defaultCheckedKeys.value = [];
+    selectedKeys.value = [];
+    roleId.value = '';
+  }
+  /**
+   * 获取tree实例
+   */
+  function getTree() {
+    const tree = unref(treeRef);
+    if (!tree) {
+      throw new Error('tree is null!');
+    }
+    return tree;
+  }
+  /**
+   * 提交
+   */
+  async function handleSubmit(exit) {
+    let params = {
+      roleId: unref(roleId),
+      permissionIds: unref(getTree().getCheckedKeys()).join(','),
+      lastpermissionIds: unref(defaultCheckedKeys).join(','),
+    };
+    //update-begin-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
+    if(loading.value===false){
+      await doSave(params)
+    }else{
+      console.log('请等待上次执行完毕!');
+    }
+    if(exit){
+      // 如果关闭
+      closeDrawer();
+    }else{
+      // 没有关闭需要重新获取选中数据
+      const permResult = await queryRolePermission({ nuId: unref(roleId) });
+      defaultCheckedKeys.value = permResult;
+    }
+  }
+  
+  // VUE角色授权重复保存 #352
+  async function doSave(params) {
+    loading.value = true;
+    await saveRolePermission(params);
+    setTimeout(()=>{
+      loading.value = false;
+    }, 500)
+  }
+  //update-end-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
+
+  /**
+   * 树菜单选择
+   * @param key
+   */
+  function treeMenuClick({ key }) {
+    if (key === 'checkAll') {
+      checkedKeys.value = allTreeKeys.value;
+    } else if (key === 'cancelCheck') {
+      checkedKeys.value = [];
+    } else if (key === 'openAll') {
+      expandedKeys.value = allTreeKeys.value;
+      saveLocalOperation('expand', 'openAll');
+    } else if (key === 'closeAll') {
+      expandedKeys.value = [];
+      saveLocalOperation('expand', 'closeAll');
+    } else if (key === 'relation') {
+      checkStrictly.value = false;
+      saveLocalOperation('level', 'relation');
+    } else {
+      checkStrictly.value = true;
+      saveLocalOperation('level', 'standAlone');
+    }
+  }
+  /**
+   * 2024-05-31
+   * liaozhiyang
+   * 【TV360X-590】角色授权弹窗操作缓存
+   * */
+  const saveLocalOperation = (key, value) => {
+    const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
+    const obj = localData ? JSON.parse(localData) : {};
+    obj[key] = value;
+    localStorage.setItem(ROLE_AUTH_CONFIG_KEY, JSON.stringify(obj))
+  };
+</script>
+
+<style lang="less" scoped>
+  /** 固定操作按钮 */
+  .jeecg-basic-tree {
+    position: absolute;
+    width: 618px;
+  }
+  //update-begin---author:wangshuai ---date:20230202  for：抽屉弹窗标题图标下拉样式------------
+  .line {
+    height: 1px;
+    width: 100%;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  .more-icon {
+    font-size: 20px !important;
+    color: black;
+    display: inline-flex;
+    float: right;
+    margin-right: 2px;
+    cursor: pointer;
+  }
+  :deep(.jeecg-tree-header) {
+    border-bottom: none;
+  }
+  //update-end---author:wangshuai ---date:20230202  for：抽屉弹窗标题图标下拉样式------------
+</style>