fix:bug修改代码优化

dist/i18n/lang-en.json

@@ -157,29 +157,29 @@
     },
     "group": {
       "name": "User Group",
-      "createUserGroup": "Create User Group",
+      "create_user_group": "Create User Group",
       "deleteConfirm": "Are you sure you want to delete this data?",
       "edit": "Edit",
-      "memberManagement": "Member Management",
-      "permissionManagement": "Permission Management",
+      "member_management": "Member Management",
+      "permission_management": "Permission Management",
       "addNew": "Add New",
-      "modalTitleEdit": "Edit",
-      "modalTitleAdd": "Add New",
-      "serialNumber": "Serial Number",
+      "modal_title_edit": "Edit",
+      "modal_title_add": "Add New",
+      "serial_number": "Serial Number",
       "groupName": "Group Name",
       "description": "Description",
       "status": "Status",
       "action": "Action",
 
-      "memberTitle": "Permission Configuration",
-      "searchPlaceholder": "Please enter username to search",
-      "optionalMembers": "Available Members",
-      "selectedMembers": "Selected Members",
+      "member_title": "Permission Configuration",
+      "search_placeholder": "Please enter username to search",
+      "optional_members": "Available Members",
+      "selected_members": "Selected Members",
 
-      "permissionTitle": "Permission Configuration",
-      "knowledgeFeature": "Knowledge Base Features:",
-      "agentFeature": "Agent Features:",
-      "allPermissions": "All Permissions"
+      "permission_title": "Permission Configuration",
+      "knowledge_feature": "Knowledge Base Features:",
+      "agent_feature": "Agent Features:",
+      "all_permissions": "All Permissions"
     }
   },
   "conversation": {

dist/i18n/lang-zh.json

@@ -157,29 +157,29 @@
     },
     "group": {
       "name": "用户组",
-      "createUserGroup": "新建用户组",
+      "create_user_group": "新建用户组",
       "deleteConfirm": "确定删除该条数据吗?",
       "edit": "编辑",
-      "memberManagement": "成员管理",
-      "permissionManagement": "权限管理",
+      "member_management": "成员管理",
+      "permission_management": "权限管理",
       "addNew": "新增",
-      "modalTitleEdit": "编辑",
-      "modalTitleAdd": "新增",
-      "serialNumber": "序号",
+      "modal_title_edit": "编辑",
+      "modal_title_add": "新增",
+      "serial_number": "序号",
       "groupName": "组名称",
       "description": "描述",
       "status": "状态",
       "action": "操作",
 
-      "memberTitle": "权限配置",
-      "searchPlaceholder": "请输入用户名搜索",
-      "optionalMembers": "可选成员",
-      "selectedMembers": "已选成员",
+      "member_title": "权限配置",
+      "search_placeholder": "请输入用户名搜索",
+      "optional_members": "可选成员",
+      "selected_members": "已选成员",
 
-      "permissionTitle": "权限配置",
-      "knowledgeFeature": "知识库功能:",
-      "agentFeature": "智能体功能:",
-      "allPermissions": "角色所有权限",
+      "permission_title": "权限配置",
+      "knowledge_feature": "知识库功能:",
+      "agent_feature": "智能体功能:",
+      "all_permissions": "角色所有权限",
       "knowledge": "知识库",
       "agents": "智能体"
     }

public/i18n/lang-en.json

@@ -83,6 +83,7 @@
     "reset": "Reset",
     "refresh": "Refresh",
     "density": "Density",
+    "delete_confirm": "Are you sure you want to delete this data?",
 
     "role": {
       "name": "Role",
@@ -157,29 +158,28 @@
     },
     "group": {
       "name": "User Group",
-      "createUserGroup": "Create User Group",
-      "deleteConfirm": "Are you sure you want to delete this data?",
+      "create_user_group": "Create User Group",
+      "delete": "Delete",
       "edit": "Edit",
-      "memberManagement": "Member Management",
-      "permissionManagement": "Permission Management",
-      "addNew": "Add New",
-      "modalTitleEdit": "Edit",
-      "modalTitleAdd": "Add New",
-      "serialNumber": "Serial Number",
+      "member_management": "Member Management",
+      "permission_management": "Permission Management",
+      "modal_title_edit": "Edit",
+      "modal_title_add": "Add New",
+      "serial_number": "Serial Number",
       "groupName": "Group Name",
       "description": "Description",
       "status": "Status",
       "action": "Action",
 
-      "memberTitle": "Permission Configuration",
-      "searchPlaceholder": "Please enter username to search",
-      "optionalMembers": "Available Members",
-      "selectedMembers": "Selected Members",
+      "member_title": "Permission Configuration",
+      "search_placeholder": "Please enter username to search",
+      "optional_members": "Available Members",
+      "selected_members": "Selected Members",
 
-      "permissionTitle": "Permission Configuration",
-      "knowledgeFeature": "Knowledge Base Features:",
-      "agentFeature": "Agent Features:",
-      "allPermissions": "All Permissions"
+      "permission_title": "Permission Configuration",
+      "knowledge_feature": "Knowledge Base Features:",
+      "agent_feature": "Agent Features:",
+      "all_permissions": "All Permissions"
     }
   },
   "conversation": {

public/i18n/lang-zh.json

@@ -83,6 +83,7 @@
     "reset": "重置",
     "refresh": "刷新",
     "density": "密度",
+    "delete_confirm": "确定删除该条数据吗?",
     "role": {
       "name": "角色",
       "add": "新建角色",
@@ -157,29 +158,28 @@
     },
     "group": {
       "name": "用户组",
-      "createUserGroup": "新建用户组",
-      "deleteConfirm": "确定删除该条数据吗?",
+      "create_user_group": "新建用户组",
+      "delete": "删除",
       "edit": "编辑",
-      "memberManagement": "成员管理",
-      "permissionManagement": "权限管理",
-      "addNew": "新增",
-      "modalTitleEdit": "编辑",
-      "modalTitleAdd": "新增",
-      "serialNumber": "序号",
+      "member_management": "成员管理",
+      "permission_management": "权限管理",
+      "modal_title_edit": "编辑",
+      "modal_title_add": "新增",
+      "serial_number": "序号",
       "groupName": "组名称",
       "description": "描述",
       "status": "状态",
       "action": "操作",
 
-      "memberTitle": "权限配置",
-      "searchPlaceholder": "请输入用户名搜索",
-      "optionalMembers": "可选成员",
-      "selectedMembers": "已选成员",
+      "member_title": "权限配置",
+      "search_placeholder": "请输入用户名搜索",
+      "optional_members": "可选成员",
+      "selected_members": "已选成员",
 
-      "permissionTitle": "权限配置",
-      "knowledgeFeature": "知识库功能:",
-      "agentFeature": "智能体功能:",
-      "allPermissions": "角色所有权限",
+      "permission_title": "权限配置",
+      "knowledge_feature": "知识库功能:",
+      "agent_feature": "智能体功能:",
+      "all_permissions": "角色所有权限",
       "knowledge": "知识库",
       "agents": "智能体"
     }

src/modules/permission/account/index.vue

@@ -1,60 +1,104 @@
 <template>
   <a-card class="account-page-card">
-    <Action :btn_text="$t('permission.account.new_user')" :btn_permission="'system:user:add'" @searchClick="searchClick"
-      @resetClick="resetClick" @createClick="createClick" @sizeChange="tableSizeChange" @refreshClick="refreshClick">
+    <Action
+      :btn_text="$t('permission.account.new_user')"
+      :btn_permission="'system:user:add'"
+      @searchClick="searchClick"
+      @resetClick="resetClick"
+      @createClick="createClick"
+      @sizeChange="tableSizeChange"
+      @refreshClick="refreshClick"
+    >
     </Action>
-    <DataTable :data="table_data" :columns="table_columns" row-key="userId" :size="table_size" :loading="table_loading"
-      :pagination="pagination_props" @pageChange="handlePageChange">
+    <DataTable
+      :data="table_data"
+      :columns="table_columns"
+      row-key="userId"
+      :scroll="{
+        x: 2000
+      }"
+      :size="table_size"
+      :loading="table_loading"
+      :pagination="pagination_props"
+      @pageChange="handlePageChange"
+    >
       <template #status="{ record }">
         <a-switch v-model="record.status" @change="statusChange(record)" checked-value="1" unchecked-value="0" />
       </template>
       <template #operationSlot="{ record }">
         <a-popconfirm :content="$t('permission.account.reset_password')" @ok="handleResetPassword(record)">
-          <a-button v-hasPermi="'system:role:resetPassword'" type="text">{{ $t('permission.account.reset_password')
-            }}</a-button>
+          <a-button v-hasPermi="'system:role:resetPassword'" type="text">{{
+            $t('permission.account.reset_password')
+          }}</a-button>
         </a-popconfirm>
         <a-button v-hasPermi="'system:user:edit'" type="text" @click="handleEdit(record, true)">{{
-          $t('permission.account.edit') }}</a-button>
+          $t('permission.account.edit')
+        }}</a-button>
         <a-button v-hasPermi="'system:user:viewPermission'" type="text" @click="handleView(record, true)">{{
-          $t('permission.account.view_permission') }}</a-button>
+          $t('permission.account.view_permission')
+        }}</a-button>
         <a-button v-hasPermi="'system:user:deptEdit'" type="text" @click="handleDeptConfig(record, true)">{{
-          $t('permission.account.dept_config') }}</a-button>
-        <a-popconfirm :content="$t('permission.account.delete')" type="warning" @ok="handleDelete(record.userId)">
-          <a-button v-hasPermi="'system:user:delete'" type="text" status="warning">{{ $t('permission.account.delete')
-            }}</a-button>
-        </a-popconfirm>
+          $t('permission.account.dept_config')
+        }}</a-button>
+        <a-button
+          v-hasPermi="'system:user:delete'"
+          @click="handleDeleteModal(record.userId, $t('permission.delete_confirm'))"
+          type="text"
+          status="warning"
+          >{{ $t('permission.account.delete') }}</a-button
+        >
       </template>
     </DataTable>
   </a-card>
 
-  <Modal :visible.sync="edit_visible" @ok="modalSave" @cancel="handleEdit(null, false)"
-    :title="is_edit_mode ? $t('permission.account.edit') : $t('permission.account.new_user')">
+  <OperateModal
+    :visible.sync="edit_visible"
+    @ok="modalSave"
+    @cancel="handleEdit(null, false)"
+    :title="is_edit_mode ? $t('permission.account.edit') : $t('permission.account.new_user')"
+  >
     <AccountForm :edit_form="edit_form" :is_edit_mode="is_edit_mode" :role_list="role_list" />
-  </Modal>
-
-  <ViewPermission :visible.sync="view_permission_visible" @cancel="handleView(null, false)"
-    @close="handleView(null, false)" :menu_permissions_list="menu_permissions_list"
-    :knowledge_permissions_list="knowledge_permissions_list" :dialog_permissions_list="dialog_permissions_list"
-    :agent_permissions_list="agent_permissions_list" />
+  </OperateModal>
 
-  <DeptConfigModal :visible.sync="dept_config_visible" :dept_list="dept_list" :dept_detail="dept_detail"
-    @ok="handleDeptConfigSave" @cancel="handleDeptConfig(null, false)" />
+  <ViewPermission
+    :visible.sync="view_permission_visible"
+    @cancel="handleView(null, false)"
+    @close="handleView(null, false)"
+    :menu_permissions_list="menu_permissions_list"
+    :knowledge_permissions_list="knowledge_permissions_list"
+    :dialog_permissions_list="dialog_permissions_list"
+    :agent_permissions_list="agent_permissions_list"
+  />
 
+  <DeptConfigModal
+    :visible.sync="dept_config_visible"
+    :dept_list="dept_list"
+    :dept_detail="dept_detail"
+    @ok="handleDeptConfigSave"
+    @cancel="handleDeptConfig(null, false)"
+  />
 </template>
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
-import { Message } from '@arco-design/web-vue';
+import { Message, Modal } from '@arco-design/web-vue';
 import DataTable from '../../../views/permission/DataTable.vue';
 import Action from '../../../views/permission/Action.vue';
-import Modal from '../Modal.vue';
+import OperateModal from '../../../views/permission/Modal.vue';
 import AccountForm from './AccountForm.vue';
 import ViewPermission from './ViewPermission.vue';
 import DeptConfigModal from './DeptConfigModal.vue';
 import { hasPermission } from '../../../utils/permission';
 import {
-  QueryUserList, QueryUserDeptDetail, UpdateUserDept, AddUser,
-  UpdateUser, QueryUserPermission, UserStatusSwitch, ResetPassword, DeleteUser
+  QueryUserList,
+  QueryUserDeptDetail,
+  UpdateUserDept,
+  AddUser,
+  UpdateUser,
+  QueryUserPermission,
+  UserStatusSwitch,
+  ResetPassword,
+  DeleteUser
 } from '../../../apis/permission/account';
 import { QueryAllRoleList, QueryDeptTree } from '../../../apis/permission/common';
 
@@ -62,18 +106,35 @@ const keywords = ref('');
 // 表格相关
 const table_data = ref([]);
 const table_columns = ref([
-  { title: '序号', width: 80, slotName: 'index' },
+  { title: '序号', width: 80, fixed: 'left', slotName: 'index' },
   { title: '用户名', dataIndex: 'userName', width: 150, titleSlotName: 'userName' },
-  { title: '角色', dataIndex: 'roleName', width: 400, titleSlotName: 'roleName' },
-  { title: '所属部门', dataIndex: 'deptName', width: 600, titleSlotName: 'deptName' },
+  { title: '姓名', dataIndex: 'loginName', titleSlotName: 'loginName' },
+  {
+    title: '角色',
+    dataIndex: 'roleName',
+    width: 300,
+    ellipsis: true,
+    tooltip: { position: 'top' },
+    titleSlotName: 'roleName'
+  },
+  {
+    title: '所属部门',
+    dataIndex: 'deptName',
+    width: 400,
+    ellipsis: true,
+    tooltip: { position: 'top' },
+    titleSlotName: 'deptName'
+  },
+  { title: '手机号', dataIndex: 'phone', width: 150, titleSlotName: 'phone' },
+  { title: '邮箱', dataIndex: 'email', width: 150, titleSlotName: 'email' },
   { title: '状态', dataIndex: 'status', width: 100, slotName: 'status' },
-  { title: '操作', dataIndex: 'operation', fixed: 'right', slotName: 'operationSlot' },
+  { title: '操作', dataIndex: 'operation', width: 500, fixed: 'right', slotName: 'operationSlot' }
 ]);
 const pagination_props = ref({
   total: 10,
   current: 1,
-  pageSize: 12,
-})
+  pageSize: 12
+});
 const table_size = ref('medium');
 const table_loading = ref(false);
 
@@ -91,10 +152,10 @@ const edit_form = reactive({
 const role_list = ref([]);
 // 查看权限相关
 const view_permission_visible = ref(false);
-const menu_permissions_list = ref([])
-const knowledge_permissions_list = ref([])
-const dialog_permissions_list = ref([])
-const agent_permissions_list = ref([])
+const menu_permissions_list = ref([]);
+const knowledge_permissions_list = ref([]);
+const dialog_permissions_list = ref([]);
+const agent_permissions_list = ref([]);
 
 // 部门配置相关
 const dept_config_visible = ref(false);
@@ -105,9 +166,9 @@ const getUserList = async () => {
   const params = {
     keyword: keywords.value,
     current: pagination_props.value.current,
-    pageSize: pagination_props.value.pageSize,
+    pageSize: pagination_props.value.pageSize
   };
-  table_loading.value = true
+  table_loading.value = true;
   const { code, data } = await QueryUserList(params);
 
   if (code === 200) {
@@ -130,24 +191,23 @@ const getUserList = async () => {
       }
     }
 
-
     pagination_props.value.total = data.total;
     table_data.value = data.rows;
 
-    table_loading.value = false
+    table_loading.value = false;
   } else {
-    table_loading.value = false
+    table_loading.value = false;
   }
-}
+};
 
 const searchClick = (value) => {
   keywords.value = value;
   getUserList();
-}
+};
 const resetClick = () => {
   keywords.value = '';
   getUserList();
-}
+};
 const createClick = () => {
   edit_form.userId = '';
   edit_form.userName = '';
@@ -158,11 +218,11 @@ const createClick = () => {
   edit_form.roles = [];
   is_edit_mode.value = false;
 
-  handleEdit(null, true)
-}
+  handleEdit(null, true);
+};
 const refreshClick = () => {
-  console.log('刷新')
-}
+  console.log('刷新');
+};
 
 // 切换页码
 const handlePageChange = (current) => {
@@ -170,32 +230,25 @@ const handlePageChange = (current) => {
   getUserList();
 };
 
-// TODO功能 状态切换拦截
-const beforeStatusChange = async () => {
-  await new Promise((resolve, reject) => setTimeout(() => {
-    resolve()
-  }, 1000))
-}
-
 // 用户状态切换
 const statusChange = async (record) => {
   if (record?.dept) {
     const params = {
       userId: record.userId,
-      status: record.status,
+      status: record.status
     };
-    const { code } = await UserStatusSwitch(params)
+    const { code } = await UserStatusSwitch(params);
     if (code === 200) {
       Message.success({
         title: '成功',
-        content: '状态切换成功.',
+        content: '状态切换成功.'
       });
     }
   } else {
     record.status = '0';
     Message.warning({
       title: '提示',
-      content: '如想启用用户，需进行部门配置.',
+      content: '如想启用用户，需进行部门配置.'
     });
   }
 };
@@ -205,13 +258,12 @@ const handleResetPassword = async (record) => {
   if (code === 200) {
     Message.success({
       title: '重置密码',
-      content: '该用户密码重置为000000',
+      content: '该用户密码重置为000000'
     });
   }
-}
+};
 
 const handleEdit = async (record, visible) => {
-
   if (visible) {
     const { code, data } = await QueryAllRoleList();
     if (code === 200) {
@@ -226,13 +278,13 @@ const handleEdit = async (record, visible) => {
     edit_form.phone = record.phone;
     edit_form.email = record.email;
     edit_form.pwd = record.pwd;
-    edit_form.roles = record.roles.map(role => role.roleId);
+    edit_form.roles = record.roles.map((role) => role.roleId);
 
     is_edit_mode.value = true;
   }
 
   edit_visible.value = visible;
-}
+};
 // 查看权限
 const handleView = async (record, visible) => {
   if (record) {
@@ -242,58 +294,60 @@ const handleView = async (record, visible) => {
     const { code, data } = await QueryUserPermission(record.userId);
     if (code === 200) {
       const { knowledge, menus, dialog } = data;
-      if (dialog && dialog.length > 0) dialog_permissions_list.value = dialog
-      if (knowledge && knowledge.length > 0) knowledge_permissions_list.value = knowledge
-      if (menus && menus.length > 0) menu_permissions_list.value = getMenuTitles(menus)
-
+      if (dialog && dialog.length > 0) dialog_permissions_list.value = dialog;
+      if (knowledge && knowledge.length > 0) knowledge_permissions_list.value = knowledge;
+      if (menus && menus.length > 0) menu_permissions_list.value = getMenuTitles(menus);
     }
   }
   view_permission_visible.value = visible;
-}
+};
 // 部门配置
 const handleDeptConfig = async (record, visible) => {
   if (record) {
     edit_form.userId = record.userId;
-    const { code, data: { rows } } = await QueryUserDeptDetail(record.userId);
+    const {
+      code,
+      data: { rows }
+    } = await QueryUserDeptDetail(record.userId);
     if (code === 200) {
       dept_detail.value = rows;
     }
   }
   dept_config_visible.value = visible;
-}
+};
 
 const handleDeptConfigSave = async (checked_keys) => {
   dept_config_visible.value = false;
   const data = {
     userId: edit_form.userId,
-    depts: checked_keys,
-  }
+    depts: checked_keys
+  };
   const { code } = await UpdateUserDept(data);
   if (code === 200) {
     Message.success({
       title: '部门配置',
-      content: '部门配置成功',
+      content: '部门配置成功'
     });
     getUserList();
   }
-}
+};
 // 删除用户
 const handleDelete = async (userId) => {
   const { code } = await DeleteUser(userId);
   if (code === 200) {
     Message.success({
       title: '删除用户',
-      content: '删除成功',
+      content: '删除成功'
     });
     getUserList();
   }
-}
+};
 const modalSave = async () => {
   edit_visible.value = false;
   const data = {
     userId: is_edit_mode.value ? edit_form.userId : undefined,
-    ...edit_form,
-  }
+    ...edit_form
+  };
   const apiCall = is_edit_mode.value ? UpdateUser : AddUser;
   const { code } = await apiCall(data);
 
@@ -301,17 +355,17 @@ const modalSave = async () => {
     const action = is_edit_mode.value ? '编辑' : '新增';
     Message.success({
       title: `${action}用户`,
-      content: `${action}成功`,
+      content: `${action}成功`
     });
     getUserList();
   }
-}
+};
 const tableSizeChange = (size) => {
   table_size.value = size;
-}
+};
 // 铺开路由菜单title
 const getMenuTitles = (data, result = []) => {
-  data.forEach(item => {
+  data.forEach((item) => {
     // 检查item是否有id和name属性
     if (item.id && item.meta.title) {
       result.push({ id: item.id, name: item.meta.title });
@@ -322,22 +376,41 @@ const getMenuTitles = (data, result = []) => {
     }
   });
   return result;
-}
+};
 
 const getDeptTree = async () => {
-  const { code, data: { rows } } = await QueryDeptTree();
+  const {
+    code,
+    data: { rows }
+  } = await QueryDeptTree();
   if (code == 200) {
     dept_list.value = rows;
   }
-}
+};
+
+const handleDeleteModal = (id, title) => {
+  Modal.warning({
+    title,
+    okText: '确定',
+    cancelText: '取消',
+    hideCancel: false,
+    onOk() {
+      handleDelete(id);
+    }
+  });
+};
 
 onMounted(() => {
   if (hasPermission('system:user:list')) {
-    getUserList()
-    getDeptTree()
+    getUserList();
+    getDeptTree();
+  } else {
+    Message.error({
+      title: '权限不足',
+      content: '您没有权限查看用户列表'
+    });
   }
-
-})
+});
 </script>
 
 <style lang="css" scoped>

src/modules/permission/group/MembertConfigModal.vue

@@ -1,18 +1,27 @@
 <template>
-  <a-modal width="50%" v-model:visible="visible" :title="$t('permission.group.memberTitle')" @cancel="handleCancel"
-    @ok="ok">
+  <a-modal
+    width="50%"
+    v-model:visible="visible"
+    :title="$t('permission.group.member_title')"
+    @cancel="handleCancel"
+    @ok="ok"
+  >
     <div class="membert-config-modal">
-      <a-transfer show-search :data="memberList" :model-value="selectedMemberList"
-        :source-input-search-props="{ placeholder: $t('permission.group.searchPlaceholder') }"
-        :target-input-search-props="{ placeholder: $t('permission.group.searchPlaceholder') }" @change="handleChange">
-        <template #source-title>{{ $t('permission.group.optionalMembers') }}</template>
-        <template #target-title>{{ $t('permission.group.selectedMembers') }}</template>
+      <a-transfer
+        show-search
+        :data="memberList"
+        :model-value="selectedMemberList"
+        :source-input-search-props="{ placeholder: $t('permission.group.search_placeholder') }"
+        :target-input-search-props="{ placeholder: $t('permission.group.search_placeholder') }"
+        @change="handleChange"
+      >
+        <template #source-title>{{ $t('permission.group.optional_members') }}</template>
+        <template #target-title>{{ $t('permission.group.selected_members') }}</template>
       </a-transfer>
     </div>
   </a-modal>
 </template>
 
-
 <script setup>
 import { ref, toRefs } from 'vue';
 

src/modules/permission/group/PermissionConfigModal.vue

@@ -1,40 +1,48 @@
 <template>
-  <a-modal width="50%" v-model:visible="visible" :title="$t('permission.group.permissionTitle')" @cancel="handleCancel"
-    @ok="editDeptHandleOk">
+  <a-modal
+    width="50%"
+    v-model:visible="visible"
+    :title="$t('permission.group.permission_title')"
+    @cancel="handleCancel"
+    @ok="editDeptHandleOk"
+  >
     <a-tabs :active-key="selected_tab_key" @change="handleTabChange">
       <a-tab-pane v-for="tab in tabs" :key="tab.key">
-        <template #title>
-          <component :is="tab.icon" /> {{ tab.title }}
-        </template>
+        <template #title> <component :is="tab.icon" /> {{ tab.title }} </template>
       </a-tab-pane>
     </a-tabs>
-    <div style="display: flex;">
+    <div style="display: flex">
       <a-card class="card-body" :title="getCurrentTabTitle" hoverable>
-
         <a-checkbox-group v-if="selected_tab_key === '1'" v-model="checked_knowledge" @change="onCheckKnowledge">
-          <a-checkbox v-for="(knowledg, index) of knowledge_list" :value="knowledg.id" :label="knowledg.name"
-            style="width:150px">
+          <a-checkbox
+            v-for="(knowledg, index) of knowledge_list"
+            :value="knowledg.id"
+            :label="knowledg.name"
+            style="width: 150px"
+          >
             {{ knowledg.name }}
           </a-checkbox>
         </a-checkbox-group>
 
         <a-checkbox-group v-if="selected_tab_key === '2'" v-model="checked_agents" @change="onCheckAgents">
-          <a-checkbox v-for="(agents, index) of agents_list" :value="agents.id" :label="agents.name"
-            style="width:150px">
+          <a-checkbox
+            v-for="(agents, index) of agents_list"
+            :value="agents.id"
+            :label="agents.name"
+            style="width: 150px"
+          >
             {{ agents.name }}
           </a-checkbox>
         </a-checkbox-group>
 
         <a-checkbox-group v-if="selected_tab_key === '3'" v-model="checked_model" @change="onCheckModel">
-          <a-checkbox v-for="(model, index) of model_list" :value="model.id" :label="model.name" style="width:150px">
+          <a-checkbox v-for="(model, index) of model_list" :value="model.id" :label="model.name" style="width: 150px">
             {{ model.name }}
           </a-checkbox>
         </a-checkbox-group>
-
       </a-card>
-      <a-card class="card-body" :title="$t('permission.group.allPermissions')">
-
-        <div style="margin: 8px 0;">{{ $t('permission.group.knowledgeFeature') }}</div>
+      <a-card class="card-body" :title="$t('permission.group.all_permissions')">
+        <div style="margin: 8px 0">{{ $t('permission.group.knowledge_feature') }}</div>
         <a-space wrap>
           <a-tag v-for="item of checked_knowledge_list" :key="item.id">
             {{ item.name }}
@@ -42,7 +50,7 @@
         </a-space>
         <a-divider />
 
-        <div style="margin: 8px 0;">{{ $t('permission.group.agentFeature') }}</div>
+        <div style="margin: 8px 0">{{ $t('permission.group.agent_feature') }}</div>
         <a-space wrap>
           <a-tag v-for="item of checked_agents_list" :key="item.id">
             {{ item.name }}
@@ -54,7 +62,6 @@
   </a-modal>
 </template>
 
-
 <script setup>
 import { ref, toRefs, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -84,9 +91,9 @@ const { visible, knowledge_list, agents_list, model_list } = toRefs(props);
 const emit = defineEmits(['getActiveTab', 'close', 'ok']);
 
 const tabs = [
-  { key: "1", icon: "icon-storage", title: t("permission.group.knowledge") },
-  { key: "2", icon: "icon-robot", title: t("permission.group.agents") },
-]
+  { key: '1', icon: 'icon-storage', title: t('permission.group.knowledge') },
+  { key: '2', icon: 'icon-robot', title: t('permission.group.agents') }
+];
 const selected_tab_key = ref(tabs[0].key);
 
 // 组件内部状态
@@ -96,16 +103,15 @@ const expand_keys = ref(['0']);
 const checked_knowledge = ref([]);
 const checked_knowledge_list = ref([]);
 const checked_agents = ref([]);
-const checked_agents_list = ref([])
+const checked_agents_list = ref([]);
 const checked_model = ref([]);
-const checked_model_list = ref([])
-
+const checked_model_list = ref([]);
 
 // 递归取消所有子节点的选择
 const cancelChildSelection = (node, selectedNodes) => {
   if (node.children && node.children.length > 0) {
-    node.children.forEach(child => {
-      const childIndex = selectedNodes.findIndex(val => val.menuId === child.menuId);
+    node.children.forEach((child) => {
+      const childIndex = selectedNodes.findIndex((val) => val.menuId === child.menuId);
       if (childIndex !== -1) {
         // 取消子节点的选择
         selectedNodes.splice(childIndex, 1);
@@ -114,12 +120,12 @@ const cancelChildSelection = (node, selectedNodes) => {
       }
     });
   }
-}
+};
 
 const onCheckboxCheck = (newCheckedKeys, event, collection) => {
   let o = {
     id: event.target.value,
-    name: event.target.labels[0].innerText,
+    name: event.target.labels[0].innerText
   };
   if (event.target.checked) {
     collection.value.push(o);
@@ -135,7 +141,6 @@ const onCheckboxCheck = (newCheckedKeys, event, collection) => {
 
 const onCheckKnowledge = (newCheckedKeys, event) => {
   onCheckboxCheck(newCheckedKeys, event, checked_knowledge_list);
-
 };
 const onCheckAgents = (newCheckedKeys, event) => {
   onCheckboxCheck(newCheckedKeys, event, checked_agents_list);
@@ -145,7 +150,7 @@ const onCheckModel = (newCheckedKeys, event) => {
 };
 
 const handleTabChange = (key) => {
-  const currentTab = tabs.find(tab => tab.key === key);
+  const currentTab = tabs.find((tab) => tab.key === key);
   emit('getActiveTab', currentTab);
   selected_tab_key.value = key;
 };
@@ -166,28 +171,30 @@ const editDeptHandleOk = () => {
 };
 
 const getCurrentTabTitle = computed(() => {
-  const currentTab = tabs.find(tab => tab.key === selected_tab_key.value);
+  const currentTab = tabs.find((tab) => tab.key === selected_tab_key.value);
   return currentTab ? currentTab.title : '菜单';
 });
 
-watch(() => props.record, (newVal) => {
-  if (newVal) {
-    const { knowledges, dialogs, llms } = newVal;
-    checked_knowledge.value = knowledges.map(k => k.id);
-    checked_agents.value = dialogs.map(a => a.id);
-    checked_model.value = llms.map(m => m.id);
-    checked_knowledge_list.value = knowledges.map(k => {
-      return { id: k.id, name: k.name };
-    });
-    checked_agents_list.value = dialogs.map(a => {
-      return { id: a.id, name: a.name };
-    });
-    checked_model_list.value = llms.map(m => {
-      return { id: m.id, name: m.name };
-    });
+watch(
+  () => props.record,
+  (newVal) => {
+    if (newVal) {
+      const { knowledges, dialogs, llms } = newVal;
+      checked_knowledge.value = knowledges.map((k) => k.id);
+      checked_agents.value = dialogs.map((a) => a.id);
+      checked_model.value = llms.map((m) => m.id);
+      checked_knowledge_list.value = knowledges.map((k) => {
+        return { id: k.id, name: k.name };
+      });
+      checked_agents_list.value = dialogs.map((a) => {
+        return { id: a.id, name: a.name };
+      });
+      checked_model_list.value = llms.map((m) => {
+        return { id: m.id, name: m.name };
+      });
+    }
   }
-});
-
+);
 </script>
 
 <style lang="css" scoped>

src/modules/permission/group/index.vue

@@ -1,12 +1,24 @@
 <template>
   <a-card class="group-page-card">
-    <Action :btn_text="$t('permission.group.createUserGroup')" :btn_permission="'system:group:add'"
-      @searchClick="searchClick" @resetClick="resetClick" @createClick="createClick" @sizeChange="tableSizeChange"
-      @refreshClick="refreshClick">
+    <Action
+      :btn_text="$t('permission.group.create_user_group')"
+      :btn_permission="'system:group:add'"
+      @searchClick="searchClick"
+      @resetClick="resetClick"
+      @createClick="createClick"
+      @sizeChange="tableSizeChange"
+      @refreshClick="refreshClick"
+    >
     </Action>
-    <DataTable :data="table_data" :columns="table_columns" row-key="groupId" :size="table_size" :loading="table_loading"
-      :pagination="pagination_props" @pageChange="handlePageChange">
-
+    <DataTable
+      :data="table_data"
+      :columns="table_columns"
+      row-key="groupId"
+      :size="table_size"
+      :loading="table_loading"
+      :pagination="pagination_props"
+      @pageChange="handlePageChange"
+    >
       <template #status="{ record }">
         <a-switch v-model="record.status" @change="statusChange(record)" checked-value="1" unchecked-value="0" />
       </template>
@@ -16,45 +28,77 @@
           $t('permission.group.edit')
         }}</a-button>
         <a-button v-hasPermi="'system:group:memberConfig'" type="text" @click="handleMembertConfig(record, true)">{{
-          $t('permission.group.memberManagement') }}</a-button>
-        <a-button v-hasPermi="'system:group:permissionConfig'" type="text"
-          @click="handlePermissionConfig(record, true)">{{ $t('permission.group.permissionManagement') }}</a-button>
-        <a-popconfirm :content="$t('permission.group.deleteConfirm')" type="warning" @ok="handleDelete(record.groupId)">
-          <a-button v-hasPermi="'system:group:delete'" type="text" status="warning">删除</a-button>
-        </a-popconfirm>
+          $t('permission.group.member_management')
+        }}</a-button>
+        <a-button
+          v-hasPermi="'system:group:permissionConfig'"
+          type="text"
+          @click="handlePermissionConfig(record, true)"
+          >{{ $t('permission.group.permission_management') }}</a-button
+        >
+        <a-button
+          v-hasPermi="'system:group:delete'"
+          @click="handleDeleteModal(record.groupId, $t('permission.delete_confirm'))"
+          type="text"
+          status="warning"
+          >{{ $t('permission.group.delete') }}</a-button
+        >
       </template>
     </DataTable>
   </a-card>
 
-  <Modal :visible.sync="edit_visible" @ok="modalSave" @cancel="handleEdit(null, false)"
-    :title="is_edit_mode ? $t('permission.group.modalTitleEdit') : $t('permission.group.modalTitleAdd')">
+  <OperateModal
+    :visible.sync="edit_visible"
+    @ok="modalSave"
+    @cancel="handleEdit(null, false)"
+    :title="is_edit_mode ? $t('permission.group.modal_title_edit') : $t('permission.group.modal_title_add')"
+  >
     <GroupForm :edit_form="edit_form" :is_edit_mode="is_edit_mode" />
-  </Modal>
-
-  <MembertConfigModal :visible.sync="membert_config_visible" :memberList="memberList"
-    :selectedMemberList="selectedMemberList" @ok="membertConfigModalSave"
-    @update:selectedMemberList="updateSelectedMemberList" @cancel="handleMembertConfig(null, false)"
-    @close="handleMembertConfig(null, false)" />
-
-  <PermissionConfigModal :visible.sync="permission_config_visible" :knowledge_list="knowledge_list"
-    :agents_list="agents_list" :model_list="model_list" :record="current_record"
-    @getActiveTab="handlePermissionModalTab" @ok="handlePermissionConfigSave"
-    @cancel="handlePermissionConfig(null, false)" />
+  </OperateModal>
+
+  <MembertConfigModal
+    :visible.sync="membert_config_visible"
+    :memberList="memberList"
+    :selectedMemberList="selectedMemberList"
+    @ok="membertConfigModalSave"
+    @update:selectedMemberList="updateSelectedMemberList"
+    @cancel="handleMembertConfig(null, false)"
+    @close="handleMembertConfig(null, false)"
+  />
+
+  <PermissionConfigModal
+    :visible.sync="permission_config_visible"
+    :knowledge_list="knowledge_list"
+    :agents_list="agents_list"
+    :model_list="model_list"
+    :record="current_record"
+    @getActiveTab="handlePermissionModalTab"
+    @ok="handlePermissionConfigSave"
+    @cancel="handlePermissionConfig(null, false)"
+  />
 </template>
 
-
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
-import { Message } from '@arco-design/web-vue';
+import { Message, Modal } from '@arco-design/web-vue';
 import DataTable from '../../../views/permission/DataTable.vue';
 import Action from '../../../views/permission/Action.vue';
-import Modal from '../Modal.vue';
+import OperateModal from '../../../views/permission/Modal.vue';
 import GroupForm from './GroupForm.vue';
 import { useI18n } from 'vue-i18n';
 import MembertConfigModal from './MembertConfigModal.vue';
 import PermissionConfigModal from './PermissionConfigModal.vue';
 import { hasPermission } from '../../../utils/permission';
-import { QueryGroupList, QueryGroupUsers, SaveGroupUsers, ConfigGroupResource, GroupStatusSwitch, DeleteGroup, CreateGroup, UpdateGroup } from '../../../apis/permission/gruop';
+import {
+  QueryGroupList,
+  QueryGroupUsers,
+  SaveGroupUsers,
+  ConfigGroupResource,
+  GroupStatusSwitch,
+  DeleteGroup,
+  CreateGroup,
+  UpdateGroup
+} from '../../../apis/permission/gruop';
 import { QueryAllKnowledgeList, QueryAllDialogList } from '../../../apis/permission/common';
 
 const { t } = useI18n();
@@ -63,17 +107,17 @@ const keywords = ref('');
 // 表格相关
 const table_data = ref([]);
 const table_columns = ref([
-  { title: t('permission.group.serialNumber'), width: 80, slotName: 'index' },
+  { title: t('permission.group.serial_number'), width: 80, slotName: 'index' },
   { title: t('permission.group.groupName'), dataIndex: 'groupName', width: 150, titleSlotName: 'groupName' },
   { title: t('permission.group.description'), dataIndex: 'description', tooltip: true, titleSlotName: 'description' },
   { title: t('permission.group.status'), dataIndex: 'status', slotName: 'status' },
-  { title: t('permission.group.action'), dataIndex: 'operation', fixed: 'right', slotName: 'operationSlot' },
+  { title: t('permission.group.action'), dataIndex: 'operation', fixed: 'right', slotName: 'operationSlot' }
 ]);
 const pagination_props = ref({
   total: 10,
   current: 1,
-  pageSize: 12,
-})
+  pageSize: 12
+});
 const table_size = ref('medium');
 const table_loading = ref(false);
 const current_record = ref(null);
@@ -83,7 +127,7 @@ const edit_visible = ref(false);
 const is_edit_mode = ref(false);
 const edit_form = reactive({
   groupName: '',
-  description: '',
+  description: ''
 });
 
 // 成员管理相关
@@ -101,39 +145,38 @@ const getGroupList = async () => {
   const params = {
     keyword: keywords.value,
     current: pagination_props.value.current,
-    pageSize: pagination_props.value.pageSize,
+    pageSize: pagination_props.value.pageSize
   };
-  table_loading.value = true
+  table_loading.value = true;
   const { code, data } = await QueryGroupList(params);
   if (code === 200) {
-
     pagination_props.value.total = data.total;
     table_data.value = data.items;
 
-    table_loading.value = false
+    table_loading.value = false;
   } else {
-    table_loading.value = false
+    table_loading.value = false;
   }
-}
+};
 
 const searchClick = (value) => {
   keywords.value = value;
   getGroupList();
-}
+};
 const resetClick = () => {
   keywords.value = '';
   getGroupList();
-}
+};
 const createClick = () => {
   edit_form.groupName = '';
   edit_form.description = '';
 
   is_edit_mode.value = false;
   edit_visible.value = true;
-}
+};
 const refreshClick = () => {
-  console.log('刷新')
-}
+  console.log('刷新');
+};
 
 // 切换页码
 const handlePageChange = (current) => {
@@ -141,30 +184,21 @@ const handlePageChange = (current) => {
   getGroupList();
 };
 
-// TODO功能 状态切换拦截
-const beforeStatusChange = async () => {
-  await new Promise((resolve, reject) => setTimeout(() => {
-    resolve()
-  }, 1000))
-}
-
 // 用户状态切换
 const statusChange = async (record) => {
   const params = {
     id: record.groupId,
-    status: record.status,
+    status: record.status
   };
-  const { code } = await GroupStatusSwitch(params)
+  const { code } = await GroupStatusSwitch(params);
   if (code === 200) {
     Message.success({
       title: '成功',
-      content: '状态切换成功.',
+      content: '状态切换成功.'
     });
   }
-
 };
 
-
 const handleEdit = (record, visible) => {
   if (record) {
     edit_form.groupId = record.groupId;
@@ -174,18 +208,21 @@ const handleEdit = (record, visible) => {
   }
 
   edit_visible.value = visible;
-}
+};
 // 成员管理
 const handleMembertConfig = async (record, visible) => {
   if (record) {
-    const { code, data: { inGroup, notInGroup } } = await QueryGroupUsers(record.groupId);
+    const {
+      code,
+      data: { inGroup, notInGroup }
+    } = await QueryGroupUsers(record.groupId);
     if (code === 200) {
       const allUsers = [...inGroup, ...notInGroup];
 
       memberList.value = allUsers.map((item) => {
         return {
           label: item.userName,
-          value: item.userId,
+          value: item.userId
         };
       });
       selectedMemberList.value = inGroup.map((item) => item.userId);
@@ -193,23 +230,23 @@ const handleMembertConfig = async (record, visible) => {
   }
 
   membert_config_visible.value = visible;
-}
+};
 // 成员管理保存
 const membertConfigModalSave = async (selectedMemberList) => {
   const data = {
     id: current_record.value.groupId,
-    userList: selectedMemberList,
+    userList: selectedMemberList
   };
   const { code } = await SaveGroupUsers(data);
   if (code === 200) {
     Message.success({
       title: '成员管理',
-      content: '成员修改成功',
+      content: '成员修改成功'
     });
     membert_config_visible.value = false;
     getGroupList();
   }
-}
+};
 const updateSelectedMemberList = (newSelection) => {
   selectedMemberList.value = newSelection;
 };
@@ -222,11 +259,11 @@ const handlePermissionConfig = async (record, visible) => {
     getConfigList('1');
   }
   permission_config_visible.value = visible;
-}
+};
 
 const handlePermissionModalTab = (tab) => {
   if (tab.key) getConfigList(tab.key);
-}
+};
 
 const handlePermissionConfigSave = async ({ checkedKeys }) => {
   permission_config_visible.value = false;
@@ -235,17 +272,17 @@ const handlePermissionConfigSave = async ({ checkedKeys }) => {
     id: edit_form.groupId,
     knowledges: knowledge,
     dialogs: agents,
-    llms: model,
+    llms: model
   };
   const { code } = await ConfigGroupResource(data);
   if (code === 200) {
     Message.success({
       title: '权限配置',
-      content: '权限配置成功',
+      content: '权限配置成功'
     });
     getGroupList();
   }
-}
+};
 
 // 删除用户
 const handleDelete = async (groupId) => {
@@ -253,11 +290,11 @@ const handleDelete = async (groupId) => {
   if (code === 200) {
     Message.success({
       title: '删除用户',
-      content: '删除成功',
+      content: '删除成功'
     });
     getGroupList();
   }
-}
+};
 const modalSave = async () => {
   edit_visible.value = false;
   const data = {
@@ -272,40 +309,67 @@ const modalSave = async () => {
     const action = is_edit_mode.value ? '编辑' : '新增';
     Message.success({
       title: `${action}用户`,
-      content: `${action}成功`,
+      content: `${action}成功`
     });
     getGroupList();
   }
-}
+};
 
 const tableSizeChange = (size) => {
   table_size.value = size;
-}
+};
 
 const getConfigList = async (tabsKey) => {
   if (tabsKey === '1') {
-    const { code, data: { rows } } = await QueryAllKnowledgeList();
+    const {
+      code,
+      data: { rows }
+    } = await QueryAllKnowledgeList();
     if (code === 200) {
       knowledge_list.value = rows;
     }
   }
   if (tabsKey === '2') {
-    const { code, data: { rows } } = await QueryAllDialogList();
+    const {
+      code,
+      data: { rows }
+    } = await QueryAllDialogList();
     if (code === 200) {
       agents_list.value = rows;
     }
   }
-}
+};
+
+const handleDeleteModal = (id, title) => {
+  Modal.warning({
+    title,
+    okText: '确定',
+    cancelText: '取消',
+    hideCancel: false,
+    onOk() {
+      handleDelete(id);
+    }
+  });
+};
 
 onMounted(() => {
   if (hasPermission('system:group:list')) {
-    getGroupList()
+    getGroupList();
+  } else {
+    Message.error({
+      title: '权限不足',
+      content: '您没有权限查看用户组列表'
+    });
   }
-})
+});
 </script>
 
 <style lang="css" scoped>
 .group-page-card {
   height: calc(100% - 56px);
 }
+
+.arco-modal-simple .arco-modal-footer {
+  margin-top: 0;
+}
 </style>

src/modules/permission/org/index.vue

@@ -1,28 +1,46 @@
 <template>
   <div class="organization-container">
     <div class="left">
-      <TreeParts :treeData="org_tree_data" :title="$t('permission.org.organization')" :showLock="true" :fieldNames="{
-        key: 'deptId',
-        title: 'deptName',
-        children: 'children',
-      }" :permission="tree_permission_list" @nodeClick="onNodeClick" @addBtnClick="onAddBtnClick"
-        @deleteBtnClick="onDeleteBtnClick" @drop="onNodeDrop" />
+      <TreeParts
+        :treeData="org_tree_data"
+        :title="$t('permission.org.organization')"
+        :showLock="true"
+        :fieldNames="{
+          key: 'deptId',
+          title: 'deptName',
+          children: 'children'
+        }"
+        :permission="tree_permission_list"
+        @nodeClick="onNodeClick"
+        @addBtnClick="onAddBtnClick"
+        @deleteBtnClick="onDeleteBtnClick"
+        @drop="onNodeDrop"
+      />
     </div>
     <div class="right">
       <a-card :title="$t('permission.org.details')" style="height: 100%">
-        <OrgForm :org_form="org_form" @statusChange="resourceFromStatusChange" @save="resourceFromSave"
-          @reset="resourceFromReset">
+        <OrgForm
+          :org_form="org_form"
+          @statusChange="resourceFromStatusChange"
+          @save="resourceFromSave"
+          @reset="resourceFromReset"
+        >
           <template #actions>
-            <a-button v-hasPerm="'system:dept:edit'" @click="resourceFromSave">{{ $t('permission.org.save')
-              }}</a-button>
+            <a-button v-hasPerm="'system:dept:edit'" @click="resourceFromSave">{{
+              $t('permission.org.save')
+            }}</a-button>
             <a-button @click="resourceFromReset">{{ $t('permission.org.reset') }}</a-button>
           </template>
         </OrgForm>
       </a-card>
     </div>
 
-    <Modal :visible.sync="org_visible" @ok="resourceFromSave" @cancel="resourceFromCancel"
-      :title="$t('permission.org.add')">
+    <Modal
+      :visible.sync="org_visible"
+      @ok="resourceFromSave"
+      @cancel="resourceFromCancel"
+      :title="$t('permission.org.add')"
+    >
       <OrgForm :org_form="org_form"></OrgForm>
     </Modal>
   </div>
@@ -31,11 +49,18 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
 import { Message } from '@arco-design/web-vue';
-import TreeParts from '../TreeParts.vue';
+import TreeParts from '../../../views/permission/TreeParts.vue';
 import OrgForm from './OrgForm.vue';
-import Modal from '../Modal.vue';
+import Modal from '../../../views/permission/Modal.vue';
 import { hasPermission } from '../../../utils/permission';
-import { QueryDeptDetail, UpdateDept, UpdateDeptParent, UpdateDeptStatus, CreateDept, DeleteDept } from '../../../apis/permission/org';
+import {
+  QueryDeptDetail,
+  UpdateDept,
+  UpdateDeptParent,
+  UpdateDeptStatus,
+  CreateDept,
+  DeleteDept
+} from '../../../apis/permission/org';
 import { QueryDeptTree } from '../../../apis/permission/common';
 
 const org_visible = ref(false);
@@ -43,8 +68,8 @@ const is_edit_mode = ref(true);
 const org_tree_data = ref([]);
 const tree_permission_list = {
   add_permission: 'system:dept:add',
-  delete_permission: 'system:dept:delete',
-}
+  delete_permission: 'system:dept:delete'
+};
 
 const org_form = reactive({
   parentName: '',
@@ -55,7 +80,7 @@ const org_form = reactive({
   address: '',
 
   // 多余的参数
-  orderNum: 0,
+  orderNum: 0
 });
 
 const getDeptTree = async () => {
@@ -111,22 +136,22 @@ const onDeleteBtnClick = async ({ deptId }) => {
 const resourceFromStatusChange = async (status) => {
   const data = {
     deptId: org_form.deptId[0],
-    status,
-  }
+    status
+  };
   const { code } = await UpdateDeptStatus(data);
   if (code === 200) {
     Message.success({
       title: '状态更新',
-      content: '状态更新成功',
+      content: '状态更新成功'
     });
     getDeptTree();
   }
-}
+};
 
 const resourceFromSave = async () => {
   const data = {
     ...org_form,
-    deptId: (is_edit_mode.value && org_form.deptId) ? org_form.deptId[0] : null
+    deptId: is_edit_mode.value && org_form.deptId ? org_form.deptId[0] : null
   };
 
   const apiCall = is_edit_mode.value ? UpdateDept : CreateDept;
@@ -197,6 +222,11 @@ const onNodeDrop = async ({ dropNode, dragNode, dropPosition }) => {
 onMounted(() => {
   if (hasPermission('system:dept:list')) {
     getDeptTree();
+  } else {
+    Message.error({
+      title: '权限不足',
+      content: '您没有权限查看该页面'
+    });
   }
 });
 </script>

src/modules/permission/resource/index.vue

@@ -1,27 +1,45 @@
 <template>
   <div class="organization-container">
     <div class="left">
-      <TreeParts :treeData="resourcetree_data" :title="$t('permission.resource.organization')" :fieldNames="{
-        key: 'menuId',
-        title: 'menuName',
-        children: 'children',
-      }" :permission="tree_permission_list" @nodeClick="onNodeClick" @addBtnClick="onAddBtnClick"
-        @deleteBtnClick="onDeleteBtnClick" />
+      <TreeParts
+        :treeData="resourcetree_data"
+        :title="$t('permission.resource.organization')"
+        :fieldNames="{
+          key: 'menuId',
+          title: 'menuName',
+          children: 'children'
+        }"
+        :permission="tree_permission_list"
+        @nodeClick="onNodeClick"
+        @addBtnClick="onAddBtnClick"
+        @deleteBtnClick="onDeleteBtnClick"
+      />
     </div>
 
     <div class="right">
-      <a-card :title="$t('permission.resource.details')" style="height: 100%;">
-        <ResourceForm :resource_form="resource_form" @statusChange="orgFromStatusChange" @save="orgFromSave"
-          @reset="orgFromReset">
+      <a-card :title="$t('permission.resource.details')" style="height: 100%">
+        <ResourceForm
+          :resource_form="resource_form"
+          @statusChange="orgFromStatusChange"
+          @save="orgFromSave"
+          @reset="orgFromReset"
+        >
           <template #actions>
-            <a-button v-hasPerm="'system:resource:edit'" @click="orgFromSave">{{ $t('permission.resource.save') }}</a-button>
+            <a-button v-hasPerm="'system:resource:edit'" @click="orgFromSave">{{
+              $t('permission.resource.save')
+            }}</a-button>
             <a-button @click="orgFromReset">{{ $t('permission.resource.reset') }}</a-button>
           </template>
         </ResourceForm>
       </a-card>
     </div>
 
-    <Modal :visible.sync="resourcevisible" @ok="orgFromSave" @cancel="orgFromCancel" :title="$t('permission.resource.add')">
+    <Modal
+      :visible.sync="resourcevisible"
+      @ok="orgFromSave"
+      @cancel="orgFromCancel"
+      :title="$t('permission.resource.add')"
+    >
       <ResourceForm :resource_form="resource_form"></ResourceForm>
     </Modal>
   </div>
@@ -30,12 +48,17 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
 import { Message } from '@arco-design/web-vue';
-import TreeParts from '../TreeParts.vue';
+import TreeParts from '../../../views/permission/TreeParts.vue';
 import ResourceForm from './ResourceForm.vue';
-import Modal from '../Modal.vue';
+import Modal from '../../../views/permission/Modal.vue';
 import { hasPermission } from '../../../utils/permission';
 import {
-  QueryResourceTree, QueryResourceDetail, UpdateResourceStatus, UpdateResource, CreateResource, DeleteResource,
+  QueryResourceTree,
+  QueryResourceDetail,
+  UpdateResourceStatus,
+  UpdateResource,
+  CreateResource,
+  DeleteResource
 } from '../../../apis/permission/resource';
 
 const resourcevisible = ref(false);
@@ -43,9 +66,8 @@ const is_edit_mode = ref(true);
 const resourcetree_data = ref([]);
 const tree_permission_list = {
   add_permission: 'system:resource:add',
-  delete_permission: 'system:resource:delete',
-}
-
+  delete_permission: 'system:resource:delete'
+};
 
 const resource_form = reactive({
   parentName: '',
@@ -56,20 +78,24 @@ const resource_form = reactive({
   menuType: '0',
   description: '',
   perms: '',
-  component: '',
+  component: ''
 });
 
 const getResourceTree = async () => {
-  const { code, data: { rows } } = await QueryResourceTree();
+  const {
+    code,
+    data: { rows }
+  } = await QueryResourceTree();
   if (code == 200) {
     resourcetree_data.value = rows;
   }
-}
-
+};
 
 // 树节点操作相关
 const onNodeClick = async (id) => {
-  const { data: { data } } = await QueryResourceDetail(id);
+  const {
+    data: { data }
+  } = await QueryResourceDetail(id);
   resource_form.resourceId = id;
   resource_form.parentId = data.parentId;
   resource_form.parentName = data.parentName;
@@ -86,11 +112,11 @@ const onNodeClick = async (id) => {
 
   // 多余的参数
   resource_form.orderNum = 0;
-}
+};
 const onAddBtnClick = (nodeData) => {
   resource_form.resourceId = null;
 
-  resource_form.parentId = nodeData.menuId
+  resource_form.parentId = nodeData.menuId;
   resource_form.parentName = nodeData.menuName;
   resource_form.menuName = '';
   resource_form.path = '';
@@ -106,38 +132,38 @@ const onAddBtnClick = (nodeData) => {
 
   resourcevisible.value = true;
   is_edit_mode.value = false;
-}
+};
 
 const onDeleteBtnClick = async ({ menuId }) => {
   const { code } = await DeleteResource(menuId);
   if (code === 200) {
     Message.success({
       title: '删除',
-      content: '删除成功',
+      content: '删除成功'
     });
   }
   getResourceTree();
-}
+};
 const orgFromStatusChange = async (status) => {
   const data = {
     menuId: resource_form.resourceId[0],
-    status,
-  }
+    status
+  };
   const { code } = await UpdateResourceStatus(data);
   if (code === 200) {
     Message.success({
       title: '状态更新',
-      content: '状态更新成功',
+      content: '状态更新成功'
     });
     getResourceTree();
   }
-}
+};
 
 const orgFromSave = async () => {
   const data = {
     ...resource_form,
-    menuId: (is_edit_mode.value && resource_form.resourceId) ? resource_form.resourceId[0] : null
-  }
+    menuId: is_edit_mode.value && resource_form.resourceId ? resource_form.resourceId[0] : null
+  };
 
   const apiCall = is_edit_mode.value ? UpdateResource : CreateResource;
   const { code } = await apiCall(data);
@@ -146,13 +172,13 @@ const orgFromSave = async () => {
     const action = is_edit_mode.value ? '编辑' : '新增';
     Message.success({
       title: `${action}用户`,
-      content: `${action}成功`,
+      content: `${action}成功`
     });
 
-    getResourceTree()
+    getResourceTree();
     resourcevisible.value = false;
   }
-}
+};
 
 const orgFromReset = () => {
   resource_form.resourceId = null;
@@ -162,17 +188,22 @@ const orgFromReset = () => {
   resource_form.leader = '';
   resource_form.orderNum = '';
   resource_form.address = '';
-}
+};
 
 const orgFromCancel = () => {
   is_edit_mode.value = true;
   resourcevisible.value = false;
-}
+};
 onMounted(() => {
   if (hasPermission('system:resource:list')) {
     getResourceTree();
+  } else {
+    Message.error({
+      title: '权限不足',
+      content: '您没有权限查看资源列表'
+    });
   }
-})
+});
 </script>
 
 <style lang="css" scoped>

src/modules/permission/role/index.vue

@@ -1,46 +1,81 @@
 <template>
   <a-card class="role-page-card">
-    <Action :btn_text="$t('permission.role.add')" :btn_permission="'system:role:add'" @searchClick="searchClick"
-      @resetClick="resetClick" @createClick="createClick" @sizeChange="tableSizeChange" @refreshClick="refreshClick">
+    <Action
+      :btn_text="$t('permission.role.add')"
+      :btn_permission="'system:role:add'"
+      @searchClick="searchClick"
+      @resetClick="resetClick"
+      @createClick="createClick"
+      @sizeChange="tableSizeChange"
+      @refreshClick="refreshClick"
+    >
     </Action>
-    <DataTable :data="table_data" :columns="table_columns" row-key="roleId" :size="table_size" :loading="table_loading"
-      :pagination="pagination_props" @pageChange="handlePageChange">
+    <DataTable
+      :data="table_data"
+      :columns="table_columns"
+      row-key="roleId"
+      :size="table_size"
+      :loading="table_loading"
+      :pagination="pagination_props"
+      @pageChange="handlePageChange"
+    >
       <template #status="{ record }">
         <a-switch v-model="record.status" @change="statusChange(record)" checked-value="1" unchecked-value="0" />
       </template>
       <template #operationSlot="{ record }">
         <a-button v-hasPermi="'system:role:edit'" type="text" @click="handleEdit(record, true)">{{
-          $t('permission.role.edit') }}</a-button>
+          $t('permission.role.edit')
+        }}</a-button>
         <a-button v-hasPermi="'system:role:permissionEdit'" type="text" @click="handlePermissionConfig(record, true)">{{
-          $t('permission.role.permissionEdit') }}</a-button>
+          $t('permission.role.permissionEdit')
+        }}</a-button>
         <a-button v-hasPermi="'system:role:deptEdit'" type="text" @click="handleDeptConfig(record, true)">{{
-          $t('permission.role.deptEdit') }}</a-button>
-        <a-popconfirm :content="$t('permission.role.confirmDelete')" type="warning" @ok="handleDelete(record.roleId)">
-          <a-button v-hasPermi="'system:role:delete'" type="text" status="warning">{{ $t('permission.role.delete')
-            }}</a-button>
-        </a-popconfirm>
+          $t('permission.role.deptEdit')
+        }}</a-button>
+
+        <a-button
+          v-hasPermi="'system:role:delete'"
+          @click="handleDeleteModal(record.roleId, $t('permission.delete_confirm'))"
+          type="text"
+          status="warning"
+          >{{ $t('permission.role.delete') }}</a-button
+        >
       </template>
     </DataTable>
   </a-card>
 
-  <Modal :visible.sync="edit_visible" @ok="modalSave" @cancel="handleEdit(null, false)"
-    :title="is_edit_mode ? $t('permission.role.edit') : $t('permission.role.add')">
+  <OperateModal
+    :visible.sync="edit_visible"
+    @ok="modalSave"
+    @cancel="handleEdit(null, false)"
+    :title="is_edit_mode ? $t('permission.role.edit') : $t('permission.role.add')"
+  >
     <RoleForm :edit_form="edit_form" :is_edit_mode="is_edit_mode" />
-  </Modal>
+  </OperateModal>
 
-  <PermissionConfigModal :visible.sync="permission_config_visible" :menu_list="menu_list" :record="current_record"
-    @ok="handlePermissionConfigSave" @cancel="handlePermissionConfig(null, false)" />
+  <PermissionConfigModal
+    :visible.sync="permission_config_visible"
+    :menu_list="menu_list"
+    :record="current_record"
+    @ok="handlePermissionConfigSave"
+    @cancel="handlePermissionConfig(null, false)"
+  />
 
-  <DeptConfigModal :visible.sync="dept_config_visible" :dept_list="dept_list" :record="current_record"
-    @ok="handleDeptConfigSave" @cancel="handleDeptConfig(null, false)" />
+  <DeptConfigModal
+    :visible.sync="dept_config_visible"
+    :dept_list="dept_list"
+    :record="current_record"
+    @ok="handleDeptConfigSave"
+    @cancel="handleDeptConfig(null, false)"
+  />
 </template>
 
 <script setup>
 import { ref, reactive, onMounted, h } from 'vue';
-import { Message } from '@arco-design/web-vue';
+import { Message, Modal } from '@arco-design/web-vue';
 import DataTable from '../../../views/permission/DataTable.vue';
 import Action from '../../../views/permission/Action.vue';
-import Modal from '../Modal.vue';
+import OperateModal from '../../../views/permission/Modal.vue';
 import RoleForm from './RoleForm.vue';
 import PermissionConfigModal from './PermissionConfigModal.vue';
 import DeptConfigModal from './DeptConfigModal.vue';
@@ -271,13 +306,29 @@ const getDeptTree = async () => {
   }
 };
 
+const handleDeleteModal = (id, title) => {
+  Modal.warning({
+    title,
+    okText: '确定',
+    cancelText: '取消',
+    hideCancel: false,
+    onOk() {
+      handleDelete(id);
+    }
+  });
+};
+
 onMounted(() => {
   if (hasPermission('system:role:list')) {
     gerRoleList();
     getMenuTree();
     getDeptTree();
+  } else {
+    Message.error({
+      title: '权限不足',
+      content: '您没有权限访问该页面'
+    });
   }
-
 });
 </script>
 

src/views/permission/DataTable.vue

@@ -1,19 +1,35 @@
 <template>
   <div>
-    <a-table :columns="columns" :data="data" :row-key="rowKey" :size="size" :loading="loading" :bordered="false"
-      :pagination="false">
+    <a-table
+      :columns="columns"
+      :data="data"
+      :row-key="rowKey"
+      :size="size"
+      :scroll="scroll"
+      :loading="loading"
+      :bordered="false"
+      :pagination="false"
+    >
       <template v-for="item in columns" :key="item.slotName" #[item.slotName]="{ record, rowIndex, column }">
         <!-- 如果是序号列则显示序号 -->
-        <span v-if="item.slotName === 'index'"> {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize
-          }}</span>
+        <span v-if="item.slotName === 'index'">
+          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}</span
+        >
         <slot :name="item.slotName" v-bind="{ record, rowIndex, column }"></slot>
       </template>
       <template v-for="item in columns" :key="item.titleSlotName" #[item.titleSlotName]="{ record, rowIndex, column }">
         <div>{{ item.title }}</div>
       </template>
     </a-table>
-    <a-pagination v-if="pagination.total" class="pagination" :current="pagination.current" :total="pagination.total"
-      :page-size="pagination.pageSize" @change="handlePageChange" @page-size-change="handleSizeChange" />
+    <a-pagination
+      v-if="pagination.total"
+      class="pagination"
+      :current="pagination.current"
+      :total="pagination.total"
+      :page-size="pagination.pageSize"
+      @change="handlePageChange"
+      @page-size-change="handleSizeChange"
+    />
   </div>
 </template>
 
@@ -26,11 +42,12 @@ const props = defineProps({
   columns: Array,
   rowKey: String,
   size: String,
+  scroll: Object,
   loading: Boolean,
   pagination: Object
 });
 
-const { data, columns, rowKey, size, loading, pagination } = toRefs(props);
+const { data, columns, rowKey, size, loading, scroll, pagination } = toRefs(props);
 
 // 定义 emit 事件
 const emit = defineEmits(['expand', 'pageChange', 'sizeChange']);
@@ -43,8 +60,6 @@ const handlePageChange = (page) => {
 const handleSizeChange = (pageSize) => {
   emit('pageSizeChange', pageSize);
 };
-
-
 </script>
 
 <style lang="css" scoped>

src/modules/permission/TreeParts.vue → src/views/permission/TreeParts.vue

@@ -3,50 +3,70 @@
     <template #title>
       <span>{{ title }}</span>
       <a-tooltip v-if="showLock" content="点击后可通过拖拽更改结构,再次点击来关闭" background-color="#165DFF">
-        <a-button :type="is_lock ? 'secondary' : 'outline'" style="float: right;" @click="toggleDraggable"
-          v-has-permi="'/base/syorganization!update'">
+        <a-button
+          :type="is_lock ? 'secondary' : 'outline'"
+          style="float: right"
+          @click="toggleDraggable"
+          v-has-permi="'/base/syorganization!update'"
+        >
           <component :is="is_lock ? 'IconUnlock' : 'IconLock'" />
         </a-button>
       </a-tooltip>
     </template>
-    <a-tree :draggable="is_lock" blockNode :data="treeData" :show-line="true" ref="treeRef" :fieldNames="fieldNames"
-      @drop="onDrop" @select="nodeClick">
+    <a-tree
+      :draggable="is_lock"
+      blockNode
+      :data="treeData"
+      :show-line="true"
+      ref="treeRef"
+      :fieldNames="fieldNames"
+      @drop="onDrop"
+      @select="nodeClick"
+    >
       <template #extra="nodeData">
         <IconPlus class="icon-plus" @click="() => onAddBtnClick(nodeData)" />
 
-        <a-popconfirm v-if="nodeData.parentId" content="请确认是否删除？" type="success" @ok="() => onDeleteBtnClick(nodeData)">
-          <IconDelete class="icon-delete" />
-        </a-popconfirm>
+        <IconDelete
+          v-if="nodeData.parentId"
+          @click="handleDeleteModal(nodeData, $t('permission.delete_confirm'))"
+          class="icon-delete"
+        />
+
+        <!-- <a-popconfirm  content="请确认是否删除？" type="success" @ok="() => onDeleteBtnClick(nodeData)">
+        </a-popconfirm> -->
       </template>
     </a-tree>
   </a-card>
 </template>
 
 <script setup>
-import { onMounted, ref, toRefs, nextTick } from 'vue';
+import { watch, ref, toRefs, nextTick } from 'vue';
+import { Modal } from '@arco-design/web-vue';
 const props = defineProps({
   title: String,
   showLock: {
     type: Boolean,
-    default: false,
+    default: false
   },
   treeData: {
     type: Array,
-    default: () => [],
+    default: () => []
   },
   permission: {
     type: Object,
-    default: () => { },
+    default: () => {}
   },
   fieldNames: {
     type: Object,
-    default: () => ({ label: 'label', key: 'id', children: 'children' }),
-  },
+    default: () => ({ label: 'label', key: 'id', children: 'children' })
+  }
 });
 
 const { treeData, title } = toRefs(props);
-const { permission: { add_permission, edit_permission, delete_permission } } = props;
-const emit = defineEmits(['nodeClick', 'onAddBtnClick', 'onDrop', 'onDeleteBtnClick']);
+const {
+  permission: { add_permission, edit_permission, delete_permission }
+} = props;
+const emit = defineEmits(['nodeClick', 'addBtnClick', 'drop', 'deleteBtnClick']);
 const treeRef = ref(null);
 let is_lock = ref(false);
 
@@ -56,25 +76,37 @@ const toggleDraggable = () => {
 
 const nodeClick = (id) => {
   emit('nodeClick', id);
-
 };
 const onAddBtnClick = (nodeData) => {
   emit('addBtnClick', nodeData);
-}
-const onDeleteBtnClick = (nodeData) => {
-  emit('deleteBtnClick', nodeData);
 };
 
 const onDrop = ({ dragNode, dropNode, dropPosition }) => {
   emit('drop', { dragNode, dropNode, dropPosition });
 };
 
-onMounted(() => {
-  //TODO: 展开所有节点
-  nextTick(() => {
-    treeRef.value.expandAll();
+const handleDeleteModal = (nodeData, title) => {
+  Modal.warning({
+    title,
+    okText: '确定',
+    cancelText: '取消',
+    hideCancel: false,
+    onOk() {
+      emit('deleteBtnClick', nodeData);
+    }
   });
-});
+};
+
+watch(
+  () => props.treeData,
+  (val) => {
+    if (val.length > 0) {
+      nextTick(() => {
+        treeRef.value.expandAll();
+      });
+    }
+  }
+);
 </script>
 
 <style lang="css" scoped>