feat: 完善角色管理-菜单权限功能，新颖的交互体验 (#984)

* feat: 完善角色管理-菜单权限功能，新颖的交互体验

src/views/system/role/utils/hook.tsx

@@ -1,25 +1,41 @@
 import dayjs from "dayjs";
 import editForm from "../form.vue";
+import { handleTree } from "@/utils/tree";
 import { message } from "@/utils/message";
-import { getRoleList } from "@/api/system";
 import { ElMessageBox } from "element-plus";
 import { usePublicHooks } from "../../hooks";
+import { getKeyList } from "@pureadmin/utils";
+import { transformI18n } from "@/plugins/i18n";
 import { addDialog } from "@/components/ReDialog";
 import type { FormItemProps } from "../utils/types";
 import type { PaginationProps } from "@pureadmin/table";
-import { reactive, ref, onMounted, h, toRaw } from "vue";
+import { getRoleList, getRoleMenu, getRoleMenuIds } from "@/api/system";
+import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";
 
-export function useRole() {
+export function useRole(treeRef: Ref) {
   const form = reactive({
     name: "",
     code: "",
     status: ""
   });
+  const curRow = ref();
   const formRef = ref();
   const dataList = ref([]);
+  const treeIds = ref([]);
+  const treeData = ref([]);
+  const isShow = ref(false);
   const loading = ref(true);
+  const isLinkage = ref(false);
+  const treeSearchValue = ref();
   const switchLoadMap = ref({});
+  const isExpandAll = ref(false);
+  const isSelectAll = ref(false);
   const { switchStyle } = usePublicHooks();
+  const treeProps = {
+    value: "id",
+    label: "title",
+    children: "children"
+  };
   const pagination = reactive<PaginationProps>({
     total: 0,
     pageSize: 10,
@@ -29,22 +45,18 @@ export function useRole() {
   const columns: TableColumnList = [
     {
       label: "角色编号",
-      prop: "id",
-      minWidth: 100
+      prop: "id"
     },
     {
       label: "角色名称",
-      prop: "name",
-      minWidth: 120
+      prop: "name"
     },
     {
       label: "角色标识",
-      prop: "code",
-      minWidth: 150
+      prop: "code"
     },
     {
       label: "状态",
-      minWidth: 130,
       cellRenderer: scope => (
         <el-switch
           size={scope.props.size === "small" ? "small" : "default"}
@@ -58,24 +70,25 @@ export function useRole() {
           style={switchStyle.value}
           onChange={() => onChange(scope as any)}
         />
-      )
+      ),
+      minWidth: 90
     },
     {
       label: "备注",
       prop: "remark",
-      minWidth: 150
+      minWidth: 160
     },
     {
       label: "创建时间",
-      minWidth: 180,
       prop: "createTime",
+      minWidth: 160,
       formatter: ({ createTime }) =>
         dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
     },
     {
       label: "操作",
       fixed: "right",
-      width: 240,
+      width: 210,
       slot: "operation"
     }
   ];
@@ -210,29 +223,92 @@ export function useRole() {
   }
 
   /** 菜单权限 */
-  function handleMenu() {
-    message("等菜单管理页面开发后完善");
+  async function handleMenu(row?: any) {
+    const { id } = row;
+    if (id) {
+      curRow.value = row;
+      isShow.value = true;
+      const { data } = await getRoleMenuIds({ id });
+      treeRef.value.setCheckedKeys(data);
+    } else {
+      curRow.value = null;
+      isShow.value = false;
+    }
+  }
+
+  /** 高亮当前权限选中行 */
+  function rowStyle({ row: { id } }) {
+    return {
+      cursor: "pointer",
+      background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
+    };
+  }
+
+  /** 菜单权限-保存 */
+  function handleSave() {
+    const { id, name } = curRow.value;
+    // 根据用户 id 调用实际项目中菜单权限修改接口
+    console.log(id, treeRef.value.getCheckedKeys());
+    message(`角色名称为${name}的菜单权限修改成功`, {
+      type: "success"
+    });
   }
 
   /** 数据权限 可自行开发 */
   // function handleDatabase() {}
 
-  onMounted(() => {
+  const onQueryChanged = (query: string) => {
+    treeRef.value!.filter(query);
+  };
+
+  const filterMethod = (query: string, node) => {
+    return transformI18n(node.title)!.includes(query);
+  };
+
+  onMounted(async () => {
     onSearch();
+    const { data } = await getRoleMenu();
+    treeIds.value = getKeyList(data, "id");
+    treeData.value = handleTree(data);
+  });
+
+  watch(isExpandAll, val => {
+    val
+      ? treeRef.value.setExpandedKeys(treeIds.value)
+      : treeRef.value.setExpandedKeys([]);
+  });
+
+  watch(isSelectAll, val => {
+    val
+      ? treeRef.value.setCheckedKeys(treeIds.value)
+      : treeRef.value.setCheckedKeys([]);
   });
 
   return {
     form,
+    isShow,
+    curRow,
     loading,
     columns,
+    rowStyle,
     dataList,
+    treeData,
+    treeProps,
+    isLinkage,
     pagination,
+    isExpandAll,
+    isSelectAll,
+    treeSearchValue,
     // buttonClass,
     onSearch,
     resetForm,
     openDialog,
     handleMenu,
+    handleSave,
     handleDelete,
+    filterMethod,
+    transformI18n,
+    onQueryChanged,
     // handleDatabase,
     handleSizeChange,
     handleCurrentChange,