Просмотр исходного кода

fix:消息组织人员选择调整

liziliang 6 дней назад
Родитель
Сommit
df3d769f0d
3 измененных файлов с 67 добавлено и 15 удалено
  1. 12 0
      src/api/user/index.ts
  2. 32 5
      src/layout/components/header.vue
  3. 23 10
      src/views/sets/messageOrg.vue

+ 12 - 0
src/api/user/index.ts

@@ -88,6 +88,18 @@ export function getUserList(): AxiosPromise<any[]> {
   });
 }
 
+/**
+ * 获取用户层级
+ *
+ * @param queryParams
+ */
+export function getDepartmentTree(): AxiosPromise<any[]> {
+  return request({
+    url: "api/v1/syn/user/info/getDepartmentTree",
+    method: "get",
+  });
+}
+
 export function getUserTree(): AxiosPromise {
   return request({
     url: "api/v1/syn/user/info/tree",

+ 32 - 5
src/layout/components/header.vue

@@ -101,7 +101,7 @@ const allTabs = [
   {name: '首页', handler: () => router.push("/main")},
   {name: '用户管理', permission: 'canSetPermission', handler: () => router.push("/users")},
   {name: '角色管理', permission: 'setRoles', handler: () => router.push("/roles")},
-  {name: '消息管理', permission: 'canSetMessageOrg', handler: () => router.push("/messageOrg")},
+  {name: '消息组织管理', permission: 'canSetMessageOrg', handler: () => router.push("/messageOrg")},
   {name: '文件管理', permission: 'canFileShare', handler: () => router.push("/files")},
   {name: '配置IP', permission: 'canSetIP', handler: () => openDrawer()}
 ];
@@ -117,14 +117,41 @@ const availableTabs = computed(() => {
 });
 
 // 初始化选中状态
+// const initActiveTab = () => {
+//   const currentPath = route.path;
+//   const matchedTab = allTabs.find(tab =>
+//     currentPath.includes(tab.name.replace('管理', '').toLowerCase())
+//   );
+//   activeTab.value = matchedTab?.name || '';
+// };
+
+// 初始化选中状态
 const initActiveTab = () => {
   const currentPath = route.path;
-  const matchedTab = allTabs.find(tab =>
-    currentPath.includes(tab.name.replace('管理', '').toLowerCase())
-  );
-  activeTab.value = matchedTab?.name || '';
+
+  // 1. 尝试匹配当前路径对应的 tab
+  const matchedTab = allTabs.find(tab => {
+    // 提取 handler 中的路径(如 "/main")
+    const tabPath = tab.handler?.toString().match(/\/\w+/)?.[0];
+    return tabPath && (
+      currentPath === tabPath ||
+      (tabPath === '/main' && currentPath === '/') // 处理首页的特殊情况
+    );
+  });
+
+  // 2. 如果匹配到则用匹配的 tab,否则默认选中首页
+  activeTab.value = matchedTab?.name || '首页';
+
+  // 3. 存储当前选中的 tab(可选,用于刷新后恢复)
+  localStorage.setItem('lastActiveTab', activeTab.value);
 };
 
+// 监听路由变化
+watch(() => route.path, () => {
+  initActiveTab();
+});
+
+// 初始化时调用
 initActiveTab();
 
 // 导航方法

+ 23 - 10
src/views/sets/messageOrg.vue

@@ -21,7 +21,7 @@
 <script setup>
 import { ref } from "vue";
 import { useCrud } from "@/hooks/userCrud";
-import { getUserList } from "@/api/user/index";
+import {getUserList, getDepartmentTree} from "@/api/user/index";
 
 // 传入一个url,后面不带/
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
@@ -35,7 +35,8 @@ const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等
 
 const crudRef = ref(null); //crudRef.value 获取avue-crud对象
 
-const usersList = ref([]); //人员列表
+const usersTree = ref([]); //树形结构数据
+
 // 设置表格列或者其他自定义的option
 option.value = Object.assign(option.value, {
   editBtn: true, //是否显示编辑按钮
@@ -97,28 +98,40 @@ option.value = Object.assign(option.value, {
     {
       label: "人员",
       prop: "receivers", // 这里是接收者的字段
-      type: "select", //类型为单选框
+      type: "tree", // 改为tree类型
       multiple: true, //是否多选
       filterable: true, //是否可搜索
       clearable: true, //是否可清空
-      dicData: usersList, //人员列表
+      dicData: usersTree, //树形数据
       props: {
-        label: "nickName", //标签字段
-        value: "id", //值字段
+        label: 'label', // 显示的名称字段
+        value: 'value', // 选中的值字段
+        children: 'children' // 子节点字段
       },
+      nodeKey: 'value', // 每个节点的唯一标识
+      checkStrictly: false, // 是否严格遵循父子不互相关联
+      defaultExpandAll: true, // 默认展开所有节点
       valueformat: "array", //确保值是数组格式
       overHidden: true,
     },
   ],
 });
 
-const getUsersList = async () => {
-  const res = await getUserList();
-  usersList.value = res.data;
+// 获取部门树形结构数据
+const getDepartmentTreeData = async () => {
+  try {
+    const res = await getDepartmentTree();
+    // 假设返回的数据结构是树形的,包含部门和人员
+    // 例如: [{id: 1, name: '部门1', children: [{id: 101, name: '人员1'}, ...]}, ...]
+    usersTree.value = res.data;
+    console.log(res.data, "部门树形结构数据")
+  } catch (error) {
+    console.error("获取部门树失败:", error);
+  }
 };
 
 onMounted(() => {
   dataList();
-  getUsersList();
+  getDepartmentTreeData();
 });
 </script>