SEONexusAdmin/src/views/system/role/Drawer.vue

<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>