first

src/views/system/role/Drawer.vue

@@ -0,0 +1,166 @@
+<template>
+    <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="720px" :title="`${drawerProps.title}角色`">
+        <el-form ref="ruleFormRef" label-width="90px" label-suffix=" :" :rules="rules" :model="drawerProps.row">
+            <el-form-item v-for="item in fields" :key="item.prop" :label="item.label" :prop="item.prop">
+                <el-input v-model="item.value" clearable></el-input>
+            </el-form-item>
+            <el-form-item label="角色权限">
+                <TreeFilter
+                    :title="`${drawerProps.title}角色权限(多选)`"
+                    multiple
+                    id="an_id"
+                    label="an_name"
+                    :default-value="arrActiveAnId"
+                    :data="arrRoleNodeList"
+                    @change="changeTreeFilter"
+                />
+                <!-- <el-tree
+                    show-checkbox
+                    node-key="an_id"
+                    :data="arrRoleNodeList"
+                    :default-checked-keys="arrActiveAnId"
+                    :props="defaultProps"
+                    @check="changeTreeFilter"
+                ></el-tree> -->
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="drawerVisible = false"> 取消 </el-button>
+            <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<script setup lang="ts" name="UserDrawer">
+import { ref } from "vue";
+// import { ElMessage, FormInstance } from "element-plus";
+import { ElMessage } from "element-plus";
+import { NodeList } from "@/api/interface/system/node";
+import { RoleList } from "@/api/interface/system/role";
+import { ListApi } from "@/api/modules/system/node";
+import TreeFilter from "@/components/TreeFilter/index.vue";
+import { convertToTree } from "@/utils/index";
+
+// const defaultProps = {
+//     children: "children",
+//     label: "an_name"
+// };
+let arrAllNode = [] as any;
+
+let arrActiveAnId: any[] = [];
+const changeTreeFilter = (val: string[]) => {
+    ElMessage.success(`你选择了 id 为 ${JSON.stringify(val)} 的数据🤔`);
+    arrActiveAnId = val;
+};
+
+type Fields = {
+    label: string;
+    prop: string;
+    type: string;
+    value: any;
+    required: boolean;
+};
+
+const generateRules = (fields: Fields[]) => {
+    return fields.reduce(
+        (acc, field) => {
+            acc[field.prop] = [{ required: field.required, message: `请${field.label}` }];
+            return acc;
+        },
+        {} as Record<string, any>
+    );
+};
+
+const rules = ref();
+const fields = ref<Fields[]>();
+const nodeList = ref<NodeList.ResList[]>([]);
+let arrRoleNodeList: any[] = [];
+
+interface DrawerProps {
+    title: string;
+    row: Partial<RoleList.ListResp>;
+    api?: (params: any) => Promise<any>;
+    getTableList?: () => void;
+}
+
+const drawerVisible = ref(false);
+const drawerProps = ref<DrawerProps>({
+    title: "",
+    row: {}
+});
+
+// 接收父组件传过来的参数
+// const arrTempTreeNode = [];
+const acceptParams = async (params: DrawerProps) => {
+    drawerProps.value = params;
+
+    drawerProps.value.row.an_ids = "";
+    console.log(drawerProps.value);
+    // 所有节点
+    const { data } = await ListApi({ limit: 1000, page: 1 });
+    arrAllNode = data.item;
+    const treeData = convertToTree(arrAllNode, 0);
+    nodeList.value = treeData;
+    arrRoleNodeList = treeData;
+
+    // 选中的节点
+    if (drawerProps.value.row.admin_role_node && drawerProps.value.title == "编辑") {
+        // 从 data 数组中查找对应节点的信息
+        const nodeInfoArray = drawerProps.value.row.admin_role_node.map(anId => {
+            return arrAllNode.find(item => item.an_id === anId.an_id);
+        });
+
+        // 筛选出符合条件 an_is_dir === 0 的节点
+        const filteredNodes = nodeInfoArray.filter(item => item && item.an_is_dir === 0);
+
+        // 提取相应的 an_id
+        arrActiveAnId = filteredNodes.map(item => item.an_id);
+    }
+
+    drawerVisible.value = true;
+
+    const _fields = [
+        {
+            label: "角色名称",
+            prop: "ar_name",
+            type: "input",
+            get value() {
+                return drawerProps.value.row!.ar_name;
+            },
+            set value(val) {
+                drawerProps.value.row!.ar_name = val;
+            },
+            required: true
+        }
+    ];
+    fields.value = _fields;
+    rules.value = generateRules(_fields);
+};
+
+// 提交数据（新增/编辑）
+const handleSubmit = async () => {
+    // 提交的时候 获取它的 是否有父节点id  如果有，一起提交
+    for (let i = 0; i < arrActiveAnId.length; i++) {
+        let anId = arrActiveAnId[i];
+        let currentNode = arrAllNode.find(items => items.an_id === anId);
+        if (currentNode) {
+            if (currentNode.an_pid != 0 && arrActiveAnId.includes(currentNode.an_pid) == false) {
+                arrActiveAnId.push(currentNode.an_pid);
+            }
+        }
+    }
+
+    let strAnIds = arrActiveAnId.join(",");
+
+    drawerProps.value.row.an_ids = strAnIds;
+
+    await drawerProps.value.api!(drawerProps.value.row);
+    ElMessage.success({ message: `${drawerProps.value.title}角色成功！` });
+    drawerProps.value.getTableList!();
+    drawerVisible.value = false;
+};
+
+defineExpose({
+    acceptParams
+});
+</script>