fix:评论组件调试权限模块前端页面开发

2026-01-09 19:23:04 +08:00
parent fc84d925d6
commit 0a54a7affb
17 changed files with 586 additions and 139 deletions
--- a/src/api/modules/Comment/index.ts
+++ b/src/api/modules/Comment/index.ts
@@ -33,4 +33,9 @@ export const addReplyComment = (data: addCommentProps) => {
 // 删除评论
 export const deleteComment = (id: string) => {
    return request.delete(`/communicate/v1/comment/del/${id}`);
+}
+
+// 根据员工关键字查询员工信息
+export const getEmployeeByKeyword = (params: Record<string, any>) => {
+    return request.get(`/auth/v1/employee`,params);
 }
--- a/src/api/stage/permission/index.ts
+++ b/src/api/stage/permission/index.ts
@@ -0,0 +1,64 @@
+import request from '@/request';
+
+
+
+// 查询角色列表
+export const getRoleList = (params: any) => {
+    return request.get('/auth/v1/backend/role', params);
+}
+// 获取角色详情
+export const getRoleDetail = (id: string) => {
+    return request.get(`/auth/v1/backend/role/${id}`);
+}
+
+// 更新角色
+export const updateRole = (data: any) => {
+    return request.put('/auth/v1/backend/role', data);
+}
+
+// 新增角色
+export const addRole = (data: any) => {
+    return request.post('/auth/v1/backend/role', data);
+}
+
+// 删除角色
+export const deleteRole = (id: string) => {
+    return request.delete(`/auth/v1/backend/role/${id}`);
+}
+
+// 删除用户角色
+export const deleteUserRole = (userId:string,roleId: string) => {
+    return request.delete(`/auth/v1/backend/role/user/${userId}/role/${roleId}`);
+}
+
+// 添加用户角色
+export const addUserRole = (userId:string,roleId: string) => {
+    return request.post(`/auth/v1/backend/role/user/${userId}/role/${roleId}`);
+};
+
+// 启用角色
+export const enableRole = (id: string) => {
+    return request.put(`/auth/v1/backend/role/enable/${id}`);
+}
+
+// 禁用角色
+export const disableRole = (id: string) => {
+    return request.put(`/auth/v1/backend/role/disable/${id}`);
+}
+
+/**------------------------角色权限相关---------------------------**/ 
+
+// 保存角色权限
+export const saveRolePermission = (data: any) => {
+    return request.post(`/auth/v1/backend/role/permission/save`, data);
+}
+
+// 查询角色权限
+export const getRolePermission = (roleId: string) => {
+    return request.get(`/auth/v1/backend/role/${roleId}/permission`);
+}
+
+// 获取角色成员列表
+export const getRoleMemberList = (roleId: string) => {
+    return request.get(`/auth/v1/backend/role/${roleId}/members`);
+}
--- a/src/components/proTable/index.vue
+++ b/src/components/proTable/index.vue
@@ -8,7 +8,7 @@
      header-row-class-name="header-row-name"
      :height="tableHeight"
    >
-      <template v-for="(col, index) in columns" :key="col.prop">
+      <template v-for="(col, index) in columns" :key="index">
        <el-table-column
          v-if="!col.slot && col.prop !== 'actions'"
          v-bind="col"
@@ -47,6 +47,7 @@
                    >
                      <el-button
                        v-bind="getButtonProps(btn)"
+                        :disabled="getButtonDisabled(btn, scope.row)"
                        @click="handleButtonClick(btn, scope.row)"
                      >
                        {{
@@ -58,15 +59,9 @@
                    </span>
                  </template>

-                  <!-- 如果按钮超过maxButtons，显示下拉菜单 -->
+                  <!-- 如果按钮超过maxButtons，显示下拉菜单 (如果是移入移除展示按钮 不建议开启下拉菜单)-->
                  <el-dropdown
-                    v-if="
-                      col.actions.length >
-                        (col.maxButtons || MAX_BUTTON_LENGTH) &&
-                      hasDropdownPermission(
-                        col.actions.slice(col.maxButtons || MAX_BUTTON_LENGTH)
-                      )
-                    "
+                    v-if="showDropdown && col.actions.length > (col.maxButtons || MAX_BUTTON_LENGTH) &&  hasDropdownPermission(col.actions.slice(col.maxButtons || MAX_BUTTON_LENGTH))"
                    class="dropdown-menu-table"
                    trigger="hover"
                  >
@@ -87,6 +82,7 @@
                            <el-dropdown-item>
                              <el-button
                                v-bind="getButtonProps(btn)"
+                                :disabled="getButtonDisabled(btn, scope.row)"
                                @click="handleButtonClick(btn, scope.row)"
                              >
                                {{
@@ -145,8 +141,15 @@ const props = defineProps({
  immediate: { type: Boolean, default: true },
  // 是否在激活时刷新数据
  refreshOnActivated: { type: Boolean, default: true },
+  // 是否展示下拉菜单 (如果按钮是鼠标移入移出 不建议开启下拉菜单 会导致弹层的问题)
+  showDropdown: { type: Boolean, default: false },
 });

+const DEFAULT_PAGINATION = {
+  layout: "prev, pager, next",
+  background: false,
+}
+
 const emit = defineEmits([
  "current-change",
  "size-change",
@@ -217,11 +220,12 @@ const params = computed(() => {
 });

 // 请求方法
-const refresh = async () => {
+const refresh = async (isReset:boolean=false) => {
  if (!props.requestApi) return;
  innerLoading.value = true;
  try {
-    const res = await props.requestApi(params.value);
+    const requestParams = isReset ? {...params.value,pageNo:1} : params.value;
+    const res = await props.requestApi(requestParams);
    emit("update:data", res?.records || []);
    emit("update:total", res?.total || 0);
  } catch (error) {
@@ -242,6 +246,14 @@ const handleSizeChange = (val) => {
  if (props.requestApi) refresh();
 };

+// 按钮支持 disabledFn函数
+const getButtonDisabled = (button, row) => {
+  if (button.disabledFn && typeof button.disabledFn === 'function') {
+    return button.disabledFn(row);
+  }
+  return button.disabled || false;
+};
+
 onMounted(async () => {
  await updateContainerHeight();
  window.addEventListener('resize', handleResize);
@@ -267,14 +279,23 @@ onUnmounted(() => {
 });

 // 暴露 refresh 方法给外部使用
-defineExpose({ refresh });
+defineExpose({ refresh,reset:()=>refresh(true) });

 // 分页配置
-const paginationConfig = computed(() => ({
-  layout: "prev, pager, next",
-  background: false,
-  ...props.pagination,
-}));
+const paginationConfig = computed(() =>{
+  if (typeof props.pagination === 'boolean') {
+    return DEFAULT_PAGINATION;
+  }
+
+  if (typeof props.pagination === 'object' && props.pagination !== null) {
+    return {
+      ...DEFAULT_PAGINATION,
+      ...props.pagination
+    };
+  }
+
+  return DEFAULT_PAGINATION;
+});

 // action按钮组的数据
 const handleButtonClick = (button, row) => {
@@ -292,6 +313,9 @@ const shouldHideButton = (button, row) => {
 const getVisibleButtonCount = (col) => {
  const { actions, maxButtons } = col;
  const totalButtons = maxButtons || MAX_BUTTON_LENGTH;
+  if(!props.showDropdown){
+    return actions.length;
+  }
  return totalButtons ===  actions.length ? totalButtons : Math.min(totalButtons, actions.length)-1;
 };

@@ -301,7 +325,7 @@ const hasDropdownPermission = (dropdownActions) => {
  );
 };
 const getButtonProps = (button) => {
-  const { label, onClick, show, permission, ...buttonProps } = button;
+  const { label, onClick, show, permission,disabledFn, ...buttonProps } = button;
  return buttonProps;
 };
 </script>
@@ -348,7 +372,7 @@ const getButtonProps = (button) => {
    pointer-events: none;
    transition: opacity 0.25s ease-in, transform 0.25s ease-in;
  }
-  :deep(.el-table__row:hover) .action-group {
+  :deep(.el-table__row:hover) .action-group,:deep(.row-dropdown-active) .action-group{
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
--- a/src/dict/PermissionManage.ts
+++ b/src/dict/PermissionManage.ts
@@ -0,0 +1,37 @@
+// 后台 - 权限管理模块-权限内容信息
+
+
+// 权限状态映射
+const roleDict = {
+    1: '启用',
+    0: '禁用'
+}
+
+// 权限状态颜色
+const roleDictColor = {
+    1:'#66E5BE',
+    0:'#90A1B9'
+}
+
+// 创建角色类型字典
+const roleTypeOptions = [
+  { label: '实例角色', value: 'INSTANCE' },
+  { label: '默认角色', value: 'DEFAULT' },
+  { label: '系统角色', value: 'SYSTEM' }
+]
+
+// 设置权限转换为目标格式
+const statusOptions = Object.keys(roleDict).map((key) => {
+    return {
+        label: roleDict[key],
+        value: Number(key)
+    }
+})
+
+
+export default {
+    roleDict,
+    roleDictColor,
+    statusOptions,
+    roleTypeOptions
+}
--- a/src/dict/index.ts
+++ b/src/dict/index.ts
@@ -1,5 +1,14 @@
-import DictManage from './dictManage';
-
-const Dict = { DictManage }
-export { DictManage }
-export default Dict;
+const modules = import.meta.glob('./*.{vue,ts,js}', { eager: true });
+const components: Record<string, any> = {};
+Object.entries(modules).forEach(([path, module]: [string, any]) => {
+  // 过滤掉 index 文件本身
+  if (path.includes('index')) return;
+  const name = path.replace(/^\.\/(.*)\.\w+$/, '$1');
+  components[name] = module.default || module;
+});
+// 2. 统一导出
+export const { 
+    DictManage, 
+    PermissionManage 
+} = components;
+export default components;
--- a/src/modules/Comment/index.scss
+++ b/src/modules/Comment/index.scss
@@ -231,6 +231,7 @@ $color-white: #fff;
  }

  .observer-anchor{
+    height: 60px;
    text-align: center;
    font-size: 12px;
    color: #808080;
--- a/src/modules/Comment/index.vue
+++ b/src/modules/Comment/index.vue
@@ -268,6 +268,7 @@ import {
  getComment,
  addReplyComment,
  deleteComment,
+  getEmployeeByKeyword
 } from "@/api/modules/Comment";
 const { formatTime } = useRelativeTime();
 const userStore = useUserStore();
@@ -275,7 +276,7 @@ const { t } = useI18n();
 // 当前用户信息
 const currentUser = computed(() => {
  return {
-    name: userStore.userInfo.username,
+    name: userStore.userInfo.nickname,
    avatar: userStore.userInfo.avatar,
    id: 1,
  };
@@ -299,6 +300,8 @@ const {

 // 评论业务逻辑
 const activeReply = reactive({
+  id:"",
+  rootId:"",
  replyUserId: "",
  parentId: null,
  targetName: "",
@@ -312,23 +315,61 @@ const commentData = ref([]);
 // 滚动加载
 const infinityLoading = ref(false);
 const loadMoreAnchor = ref(null);
+const isProcessing = ref(false);
 const noMore = ref(false);
-// FIXME:请求用户列表的接口函数
+// 请求用户列表的接口函数
 const handleFetchSearch = async (keyword, signal) => {
-  console.log("获取参数信息", keyword, signal);
+  const selectedIds = new Set();
+  selectedUsersCache.forEach(userList => {
+    userList.forEach(u => selectedIds.add(u.id));
+  });
+  // FIXME:模拟接口返回的数据人员信息
  await new Promise((resolve) => setTimeout(resolve, 300));
-  return [
-    { id: 1, name: "李星倩" },
-    { id: 2, name: "冯娜" },
-    { id: 4, name: "张三1" },
-    { id: 5, name: "张三2" },
-    { id: 6, name: "张三3" },
-    { id: 7, name: "张三4" },
-    { id: 8, name: "张三5" },
-    { id: 9, name: "张三6" },
-    { id: 10, name: "张三7" },
-    { id: 11, name: "张三8" },
-  ];
+  const allEmployees =  [
+    {
+      id:1,
+      name:"张三",
+    },
+    {
+      id:2,
+      name:"李四",
+    },
+    {
+      id:3,
+      name:"王五",
+    },
+    {
+      id:4,
+      name:"赵六",
+    },
+    {
+      id:5,
+      name:"冯七 ",
+    },
+  ]
+  return allEmployees.filter(user => {
+    const isMatch = user.name.toLowerCase().includes(keyword.toLowerCase());
+    const notSelected = !selectedIds.has(user.id);
+    return isMatch && notSelected;
+  });
+
+  // 正式请求
+  const queryParams = {
+    keyword,
+    kind:0,
+    pageNo: 1,
+    pageSize: 20,
+  };
+  try {
+    const allEmployees = await getEmployeeByKeyword(queryParams);
+    return allEmployees.filter(user => {
+      const isMatch = user.name.toLowerCase().includes(keyword.toLowerCase());
+      const notSelected = !selectedIds.has(user.id);
+      return isMatch && notSelected;
+    });
+  } catch (error) {
+    console.log('fetch user error:',error);
+  }
 };

 // 获取当前的的评论信息
@@ -373,7 +414,7 @@ const onUserSelect = (user: any) => {
 // 回复
 const openReply = (target, group) => {
  // 1. 设置回复的目标关系
-  activeReply.groupId = target.rootId; // 根评论ID
+  activeReply.rootId = target.rootId; // 根评论ID
  activeReply.replyUserId = target.employee.userId; //回复-人的id
  activeReply.parentId = target.parentId; // 直接父级ID
  activeReply.targetName = target.employee.username; //回复人员的username
@@ -393,7 +434,6 @@ const deleteReply = async (target, group) => {
  try {
    // 删除成功
    await deleteComment(target.id);
-    ElMessage.success("删除成功");
    const index = group.children.findIndex((item) => item.id === target.id);
    if (index !== -1) {
      group.children.splice(index, 1);
@@ -414,12 +454,11 @@ const deleteReply = async (target, group) => {
 const deleteMainComment = async (target) => {
  try {
    await deleteComment(target.id);
-    ElMessage.success("删除成功");
    // 前端动态操作
    const index = commentData.value.findIndex((item) => item.id === target.id);
    if (index !== -1) {
      commentData.value.splice(index, 1);
-      if (activeReply.groupId === target.id) {
+      if (activeReply.rootId === target.id) {
        cancelReply();
      }
    }
@@ -433,11 +472,14 @@ const onSelectEmoji = (emoji) => {
  mainInput.value += emoji;
 };

-// 清除回复信息的操作
+// 清除回复信息的人员数据
 const resetReplyStatus = () => {
  activeReply.parentId = null;
  activeReply.targetName = "";
-  activeReply.groupId = null;
+  activeReply.rootId = "";
+  activeReply.replyUserId = "";
+  activeReply.id = "";
+
 };

 // 取消评论
@@ -451,7 +493,8 @@ const cancelReply = () => {
 */
 const handleSendComment = async () => {
  let rawText = mainInput.value;
-  if (!rawText.trim()) return ElMessage.warning("内容不能为空");
+  if (!rawText.trim() || isProcessing.value) return;
+  isProcessing.value = true;

  let finalReplyId = null;
  const expectedPrefix = `@${activeReply.targetName} `;
@@ -484,7 +527,7 @@ const handleSendComment = async () => {
        `匹配到用户: ${currentUser?.name}, ID: ${currentUser?.id}, 位置: ${match.index}`
      );
      mentionList.push({
-        id: currentUser.id,
+        userId: currentUser.id,
        name: currentUser.name,
        start: match.index,
        end: match.index + match[0].length,
@@ -495,12 +538,12 @@ const handleSendComment = async () => {
  // 组装接口请求的参数
  const params = {
    content: rawText,
-    mentions: Object.keys(mentionList).length ? mentionList : null,
+    mentions: mentionList.length ? mentionList : null,
    ...props.queryParams,
  };
  // 回复数据复制
  if(type === "reply"){
-    params.rootId = activeReply.groupId ? activeReply.groupId : activeReply.id;
+    params.rootId = activeReply.rootId ? activeReply.rootId : activeReply.id;
    params.parentId = activeReply.parentId;
    params.replyUserId = activeReply.replyUserId;
  }
@@ -513,7 +556,7 @@ const handleSendComment = async () => {
    // 清空输入框
    cancelReply();
    clearSelection();
-    ElMessage.success(type === "reply" ? "回复成功" : "评论成功");
+    // ElMessage.success(type === "reply" ? "回复成功" : "评论成功");  //屏蔽当前的提示
  } catch (error) {
    console.log("error", error);
  }
@@ -532,9 +575,9 @@ const updateUIAfterSend = (type, params, response) => {
      userId: activeReply.replyUserId,
      username: activeReply.targetName,
    },
-    rootId: params.groupId,
+    rootId: params.rootId,
    content: params.content,
-    mentions: params.mentionList,
+    mentions: params.mentions,
    createTime: new Date().valueOf(),
    children: [],
  };
@@ -544,33 +587,47 @@ const updateUIAfterSend = (type, params, response) => {
    commentData.value.unshift(newComment);
  } else {
    //回复某人的数据渲染
-    const targetGroup = commentData.value.find(
-      (i) => i.id === params.rootId
-    ); //获取返回的数据信息
+    const targetGroup = commentData.value.find((i) => i.id === params.rootId);
    if (targetGroup) {
-      if (!targetGroup.children) targetGroup.children = [];
-      targetGroup.children.unshift(newComment);
-      targetGroup.childrenCount = targetGroup.children.length;
+      targetGroup.childrenCount = (targetGroup.childrenCount || 0) + 1;
+      if (targetGroup.showAllReplies) {
+        if (!targetGroup.children) targetGroup.children = [];
+        targetGroup.children.unshift(newComment);
+      }else{
+        handleExpand(targetGroup);
+      }
    }
  }

 };

+/*  二级评论加载 可能会触发一级加载的问题 */
+// 是否有任何二级回复正在加载
+const isSubTaskRunning = computed(() => {
+  return commentData.value.some(item => item.loading);
+});
+
+// 综合加载状态：主列表加载中 OR 子任务运行中 OR 发送中
+const isBusy = computed(() => {
+  return infinityLoading.value || isSubTaskRunning.value || isProcessing.value;
+});
+
 // 滚动加载数据
 const setupObserver = () => {
  const observer = new IntersectionObserver(
    (entries) => {
      // 如果探测器进入视口，且当前没在加载，且还有更多数据
+      const target = entries[0];
      if (
-        entries[0].isIntersecting &&
-        !infinityLoading.value &&
+        target.isIntersecting &&
+        !isBusy.value &&
        !noMore.value
      ) {
        loadMainComments();
      }
    },
    {
-      threshold: 0.1,
+      threshold: 0.1
    }
  );

@@ -580,6 +637,7 @@ const setupObserver = () => {
 };

 const nextPage = ref(1);
+// TODO:能会存在数据重复的问题
 const loadMainComments = async () => {
  infinityLoading.value = true;
  try {
@@ -629,13 +687,15 @@ const loadMoreReplies = async (item) => {
  try {
    const res = await getCommentData({
      rootId: item.id,
-      pageNum: nextPage,
+      pageNo: nextPage,
      pageSize: PAGE_SIZE_MORE,
    });
-
+    const newRecords = res?.records || [];
    // 将新数据追加到列表末尾
-    item.children = [...item.children, ...res];
-    item.currentPage = nextPage;
+    if(newRecords.length > 0){
+      item.children = [...item.children, ...newRecords];
+      item.currentPage = nextPage;
+    }
  } finally {
    item.loading = false;
  }
@@ -644,7 +704,7 @@ const loadMoreReplies = async (item) => {
 const collapseReplies = (item) => {
  item.showAllReplies = false;
  item.children = [];  //清空数据
-  item.currentPage = 0; //重置页码
+  item.currentPage = 1; //重置页码
 };

 onMounted(() => {
--- a/src/modules/Comment/useUserSearch.ts
+++ b/src/modules/Comment/useUserSearch.ts
@@ -81,6 +81,12 @@ export function useUserSearch(
   * 暴露给外部调用的入口
   */
  const search = (keyword: string) => {
+    // 如果输入框里没这个 @名字 了，从 selectedUsersCache 删掉它
+    for (const name of selectedUsersCache.keys()) {
+      if (!mainInput.value.includes(`@${name}`)) {
+        selectedUsersCache.delete(name);
+      }
+    }
    searching.value = true;
    debouncedSearch(keyword);
  };
--- a/src/modules/Comment/utils.ts
+++ b/src/modules/Comment/utils.ts
@@ -26,6 +26,5 @@ export const parseMention = (text: string, atUsers: atUserProps[]) => {

    result = prefix + highlight + suffix;
  });
-
  return result.replace(/\n/g, '<br>');
 };
--- a/src/pages/stage/dict/dictFieldLevelManage.vue
+++ b/src/pages/stage/dict/dictFieldLevelManage.vue
@@ -9,6 +9,7 @@
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
+      modal-class="standard-overlay-dialog-flat"
    >
      <el-form
        ref="ruleFormRef"
--- a/src/pages/stage/dict/dictManage.vue
+++ b/src/pages/stage/dict/dictManage.vue
@@ -9,6 +9,7 @@
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
+      modal-class="standard-overlay-dialog-flat"
    >
      <el-form
        ref="ruleFormRef"
--- a/src/pages/stage/dict/index.vue
+++ b/src/pages/stage/dict/index.vue
@@ -239,7 +239,7 @@ const getTableData = async (params) => {
 };
 // 搜索查询条件信息
 const fetchTableData = () => {
-  dictTableRef.value && dictTableRef.value.refresh();
+  onConfirmSuccess();
 };
 const clearSelectItem = () => {
  Object.assign(selectItem,{id:null,name:'',key:'',status:1,remark:''})
@@ -268,7 +268,7 @@ const handleDictStatus = async (row) => {

 // 刷新Table数据信息
 const onConfirmSuccess = () => {
-  dictTableRef.value && dictTableRef.value.refresh();
+  dictTableRef.value && dictTableRef.value.reset();
 };
 // TODO:字段配置
 const handlefieldsConfig = (ite) => {
@@ -281,7 +281,7 @@ const handleDelete = async (item) => {
    .then(async () => {
      try {
        await deleteDictValue(item.id);
-        dictTableRef.value && dictTableRef.value.refresh();
+        onConfirmSuccess();
      } catch (error) {
        console.log("fetch error", error);
      }
@@ -301,19 +301,5 @@ const handleDelete = async (item) => {
    align-items: center;
    gap: 14px;
  }
-
-  .mj-status-dot {
-    cursor: pointer;
-    &::before {
-      content: "";
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background-color: var(--data-status-color);
-      margin-right: 8px;
-      vertical-align: middle;
-    }
-  }
 }
 </style>
--- a/src/pages/stage/permission/addRoles.vue
+++ b/src/pages/stage/permission/addRoles.vue
@@ -1,25 +1,28 @@
 <template>
  <el-dialog
    v-model="dialogVisible"
-    title="新增系统角色"
+    :title="computedTitle"
    width="500px"
    class="standard-ui-flat-dialog"
    modal-class="standard-overlay-dialog-flat"
    destroy-on-close
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    top="10vh"
  >
-    <el-form :model="form" label-position="top" class="role-form">
+    <el-form ref="formRef" :model="form" label-position="top" :rules="rules">
      <div class="row-flex">
-        <el-form-item label="角色名称" required>
+        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入角色名称" />
        </el-form-item>
-        <el-form-item label="角色编码" required>
+        <el-form-item label="角色编码" prop="code">
          <el-input v-model="form.code" placeholder="ROLE_CODE" />
        </el-form-item>
      </div>

      <el-form-item label="角色类型">
        <div class="full-width-radio">
-          <BaseSegmented v-model="roleType" :options="roleOptions" />
+          <BaseSegmented v-model="form.type" :options="PermissionManage.roleTypeOptions" />
        </div>
      </el-form-item>

@@ -28,16 +31,17 @@
          <div class="title">组织架构</div>
          <div class="desc">是否将该角色与系统组织架构体系进行深度关联</div>
        </div>
-        <el-switch v-model="form.isOrg" />
+        <el-switch v-model="form.isOrgRelated" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #CAD5E2" :active-value="1" :inactive-value="0" />
      </div>

      <el-form-item label="关联岗位">
        <el-select
-          v-model="form.post"
-          placeholder="请选择岗位"
-          style="width: 100%"
+          v-model="form.positionIds"
+          placeholder="请选择关联岗位"
+          multiple
+          collapse-tags
        >
-          <el-option label="技术总监" value="1" />
+          <el-option :label="item.label" :value="item.value" v-for="(item,index) in positionList" :key="index"/>
        </el-select>
      </el-form-item>

@@ -46,7 +50,7 @@
          <div class="title">启用状态</div>
          <div class="desc">控制该角色及其下属权限是否立即生效</div>
        </div>
-        <el-switch v-model="form.status" />
+        <el-switch v-model="form.status" :active-value="1" :inactive-value="0"/>
      </div>

      <el-form-item label="备注说明">
@@ -62,8 +66,8 @@

    <template #footer>
      <div class="dialog-footer">
-        <el-button @click="dialogVisible = false" text>取消</el-button>
-        <el-button type="primary" @click="handleSubmit">确认创建</el-button>
+        <el-button @click="cancelRoles" text>取消</el-button>
+        <el-button type="primary" @click="handleSubmit(formRef)">确认创建</el-button>
      </div>
    </template>
  </el-dialog>
@@ -71,28 +75,88 @@

 <script lang="ts" setup>
 import BaseSegmented from "./baseSegmented.vue";
+import { PermissionManage } from "@/dict";
+import type { FormInstance, FormRules } from 'element-plus';
+import {
+  addRole,
+  getRoleDetail
+} from "@/api/stage/permission/index.ts";
 defineOptions({ name: "addRoles" });
 const dialogVisible = defineModel("visible", { type: Boolean, default: false });
-const roleType = ref('system'); // 初始值
+const props = defineProps({
+  detailId: {
+    type: [String,Number],
+    default: '',
+  }
+});

-const roleOptions = [
-  { label: '实例角色', value: 'instance' },
-  { label: '默认角色', value: 'default' },
-  { label: '系统角色', value: 'system' }
-];
-const form = reactive({
+const computedTitle = computed(() => {
+  return props.detailId ? "编辑系统角色" : "新增系统角色";
+});
+const emit = defineEmits(["on-success"]);
+const positionList = ref([]);
+const formRef = ref<FormInstance>(null);
+const form = reactive<RuleForm>({
  name: "",
  code: "",
-  type: "实例角色",
-  isOrg: false,
+  type: "DEFAULT",
+  isOrgRelated: 0,  // 是否和组织架构深度关联
  post: "",
-  status: true,
+  status: 1,
  remark: "",
 });

-const handleSubmit = () => {
+
+const rules = reactive<FormInstance<RuleForm>>({
+  name: [
+    { required: true, message: "请输入角色名称", trigger: "blur" }
+  ],
+  code: [
+    { required: true, message: "请输入角色编码", trigger: "blur" }
+  ]
+})
+
+
+const cancelRoles = () => {
+  formRef.value && formRef.value.resetFields();
  dialogVisible.value = false;
 };
+
+// 获取角色详情
+const getRoleShowDetail = async (val) =>{
+  try {
+    const res = await getRoleDetail(props.detailId);
+    Object.assign(form,res);
+  } catch (error) {
+    console.log('getRoleDetail error:',error);
+  }
+}
+
+
+// 监听详情
+watch(()=>dialogVisible.value,(val) => {
+  if(val){
+    getRoleShowDetail();
+  }
+})
+
+const handleSubmit = (formEl:FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate(async (valid) => {
+    if (valid) {
+      try {
+        const res = await addRole(form);
+        ElMessage.success("操作成功");
+        cancelRoles();
+        emit('on-success');
+      } catch (error) {
+        console.log(error);
+      }
+    } else {
+      console.log('error submit!')
+    }
+  })
+};
 </script>

 <style lang="scss" scoped>
--- a/src/pages/stage/permission/baseSegmented.vue
+++ b/src/pages/stage/permission/baseSegmented.vue
@@ -50,6 +50,7 @@ const handleChange = (val) => {
 </script>

 <style lang="scss" scoped>
+@use "sass:color";
 $bg-color: #f2f3f5;
 $active-bg: #ffffff;
 $primary-color: #1661ff;
@@ -86,7 +87,7 @@ $text-secondary: #86909c;
      user-select: none;

      &:hover {
-        color: darken($text-secondary, 15%);
+        color: color.adjust($text-secondary, $lightness: 15%);
      }

      // 选中状态样式
--- a/src/pages/stage/permission/index.vue
+++ b/src/pages/stage/permission/index.vue
@@ -30,8 +30,8 @@

    <!-- 表格 -->
    <CommonTable
-      ref="dictTableRef"
-      :columns="columns"
+      ref="tableRef"
+      :columns="tableColumns"
      v-model:data="dataList"
      v-model:total="total"
      pagination
@@ -39,12 +39,31 @@
    >
      <!-- 状态 -->
      <template #status="{ row }">
-        <el-tag>{{ row.status }}</el-tag>
+        <div
+          class="mj-status-dot"
+          :style="{
+            '--data-status-color': PermissionManage.roleDictColor[row.status],
+          }"
+          @click="handleDictStatus(row)"
+        >
+          {{ PermissionManage.roleDict[row.status] }}
+        </div>
+      </template>
+
+      <!-- 类型 -->
+      <template #type="{ row }">
+        <el-tag type="primary">{{ row.type }}</el-tag>
      </template>

      <!-- 成员数量 -->
      <template #member="{ row }">
-        <el-tag @click.stop="addMember">{{ row.member }}</el-tag>
+        <el-button
+          link
+          icon="UserFilled"
+          type="primary"
+          @click.stop="addMember"
+          >{{ row.memberCount }}</el-button
+        >
      </template>
    </CommonTable>
  </div>
@@ -53,7 +72,7 @@
  <member-selector v-model:visible="showMember" />

  <!-- 新增角色 -->
-  <add-roles v-model:visible="showRoles" />
+  <add-roles v-model:visible="showRoles" @on-success="onRefresh" :detail-id="detailId"/>

  <!-- 权限抽屉 -->
  <permission-drawer v-model:visible="showPermission" />
@@ -64,14 +83,26 @@ import CommonTable from "@/components/proTable/index.vue";
 import memberSelector from "@/components/memberSelector/index.vue";
 import addRoles from "./addRoles.vue";
 import permissionDrawer from "./permissionDrawer.vue";
+import { PermissionManage } from "@/dict";
+import { formatIndex } from "@/utils/utils";
+import {
+  getRoleList,
+  getRoleDetail,
+  updateRole,
+  addRole,
+  deleteRole,
+  enableRole,
+  disableRole
+} from "@/api/stage/permission/index.ts";
 defineOptions({ name: "PermissionManagement" });
 const activeTab = ref(1);
-const dictTableRef = ref(null);
+const tableRef = ref(null);
 const searchVal = ref("");
 const dataList = ref([]);
 const total = ref(0);
 const showMember = ref(false);
 const showRoles = ref(false);
+const detailId = ref('');
 const showPermission = ref(false);
 const tabList = [
  {
@@ -88,19 +119,30 @@ const tabList = [
  },
 ];

-const columns = [
-  { prop: "id", label: "编号", width: "80", align: "center", slot: "number" },
-  { prop: "name", label: "字典名称", align: "center", slot: "name" },
+const roleColumns = [
  {
-    prop: "member",
+    prop: "id",
+    label: "编号",
+    width: "80",
+    align: "center",
+    formatter: (val) => {
+      return `#${formatIndex(val.id)}`;
+    },
+  },
+  { prop: "name", label: "角色名称", align: "center",showOverflowTooltip:true },
+  {
+    prop: "memberCount",
    label: "成员数量",
    align: "center",
    slot: "member",
  },
  {
-    prop: "key",
+    prop: "permissionCount",
    label: "权限数量",
    align: "center",
+    formatter: (val) => { 
+      return val.permissionCount ? `${val.permissionCount}项` : "-";
+    },
  },
  {
    prop: "status",
@@ -109,30 +151,33 @@ const columns = [
    slot: "status",
  },
  {
-    prop: "roleType",
+    prop: "type",
    label: "角色类型",
    align: "center",
-    showOverflowTooltip: true,
+    slot: "type",
  },
  {
-    prop: "remark",
+    prop: "positionIds",
    label: "关联岗位",
    align: "center",
    showOverflowTooltip: true,
+    formatter: (val) => {
+      return val.positionIds ? val.positionIds.join(",") : "-";
+    },
  },
  {
-    prop: "createTime",
+    prop: "updateTime",
    label: "更新时间",
    align: "center",
    showOverflowTooltip: true,
    formatter: (val) => {
-      return val.createTime
-        ? dayjs(val.createTime).format("YYYY-MM-DD HH:mm")
+      return val.updateTime
+        ? dayjs(val.updateTime).format("YYYY-MM-DD HH:mm")
        : "-";
    },
  },
  {
-    prop: "updateByName",
+    prop: "updater",
    label: "更新人",
    align: "center",
  },
@@ -140,7 +185,8 @@ const columns = [
    prop: "actions",
    label: "操作",
    align: "right",
-    width: "300",
+    fixed:"right",
+    width: "200",
    actions: [
      {
        label: "权限",
@@ -163,41 +209,167 @@ const columns = [
        type: "default",
        link: true,
        permission: ["config"],
-        onClick: (row) => {},
+        onClick: (row) => {
+          showRoles.value = true;
+          detailId.value = row.id;
+        },
      },
      {
        label: "删除",
        type: "danger",
        link: true,
        permission: ["delete"],
-        onClick: (row) => {},
+        disabledFn: (row) => {
+          return (row.type !== 'SYSTEM')
+        },
+        onClick: async (row) => {
+          try {
+            deleteRole(row.id).then(() => {
+              ElMessage.success("删除成功");
+              tableRef.value.refresh();
+            });
+          } catch (error) {
+            console.log('error',error);
+          }
+        },
      },
    ],
  },
 ];

+const userColumns = [
+  {
+    prop: "name",
+    label: "姓名",
+    align: "center",
+  },
+  {
+    prop: "code",
+    label: "账号",
+    align: "center",
+  },
+  {
+    prop: "departIds",
+    label: "所属部门",
+    align: "center",
+  },
+  {
+    prop: "roleIds",
+    label: "所属角色",
+    align: "center",
+  },
+  {
+    prop: "status",
+    label: "状态",
+    align: "center",
+  },
+  {
+    prop: "actions",
+    label: "操作",
+    align: "right",
+    fixed:"right",
+    actions: [
+      {
+        label: "编辑",
+        type: "primary",
+        link: true,
+        permission: ["edit"],
+        onClick: (row) => {
+          showPermission.value = true;
+        },
+      },
+      {
+        label: "重置密码",
+        type: "primary",
+        link: true,
+        permission: ["edit"],
+        onClick: (row) => {
+          showPermission.value = true;
+        },
+      },
+      {
+        label: "移除",
+        type: "danger",
+        link: true,
+        permission: ["edit"],
+        onClick: (row) => {
+          showPermission.value = true;
+        },
+      },
+    ],
+  },
+];
+
+const tableColumns = computed(() => {
+  const columns = {
+    1: roleColumns,
+    2: userColumns,
+  }[activeTab.value];
+  return columns;
+});
+
 // 当前成员数量
 const addMember = () => {
  showMember.value = true;
 };

+// 刷新列表
+const onRefresh = () => {
+  tableRef.value && tableRef.value.reset();
+};
+
+// 监听Tabs变化 
+watch(activeTab,()=>{
+  dataList.value = [];
+  tableRef.value && tableRef.value.reset();
+})
+
+// 权限
+const handleDictStatus = async (row) => {
+  try {
+    row.status === 1 ? await disableRole(row.id) : await enableRole(row.id);
+    ElMessage.success("操作成功");
+    onRefresh();
+  } catch (error) {
+    console.log("error", error);
+  }
+};
+
 const getTableData = async (params) => {
+  console.log('每次请求的分页:',params);
  await new Promise((resolve) => setTimeout(resolve, 500));
  return {
    records: [
      {
        id: 1,
-        name: "11111",
-        member: "2222",
+        name: "测试角色名称",
+        memberCount: 10,
+        permissionCount: 22,
        status: 1,
-        key: "",
-        roleType: 1,
-        remark: "",
-        createTime: 1767878508824,
-        updateByName: "111",
+        type: "SYSTEM",
+        positionIds: "",
+        updateTime: 1767878508824,
+        updater: "更新人",
      },
    ],
  };
+
+  // 正式请求
+  const queryParams = {
+    ...(searchVal.value && { name:searchVal.value }),
+    status:1,
+    type:1,
+    pageNo:1,
+    pageSize:10
+  }
+  try {
+    const res = await getRoleList(queryParams);
+    return res;
+  } catch (error) {
+    console.log("error", error);
+  }
+
+  
 };

 const checkRolesText = computed(() => {
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -85,7 +85,6 @@ const transformRoutes = (
  routes: any[],
  parentCode: string = ""
 ): RouteRecordRaw[] => {
-  console.log("transformRoutes", routes);
  return routes.flatMap((route) => {
    const fullCode = parentCode ? `${parentCode}/${route.code}` : route.code;

@@ -143,7 +142,8 @@ const addDynamicRoutes = async () => {
    // 从后端获取路由菜单数据  (这边需要区分 后台的菜单  和用户的菜单)
    let allRoutes:any[] = [];
    if (userStore.isBackendUser) {
-      const backendResponse = await getRouteMenus();
+      // const backendResponse = await getRouteMenus();
+      const backendResponse = [];
      allRoutes = [
        {
          code: "stage",
--- a/src/styles/element.scss
+++ b/src/styles/element.scss
@@ -157,6 +157,23 @@
    .el-dialog__header {
        padding: var(--el-dialog-inset-padding-primary);
        border-bottom: 1px solid var(--el-dialog-border-header-footer-color);
+
+        .el-dialog__title{
+            position: relative;
+            padding-left: 16px;
+            font-size: 14px;
+            &::before{
+                content: '';
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 4px;
+                height: 16px;
+                background-color: var(--blue-block-color);
+                border-radius: 2px;
+                left: 0;
+            }
+        }
    }

    .el-dialog__body {