2025-03-26

src/views/userManagement/list/constant/edit.ts

@@ -0,0 +1,70 @@
+interface FormItem {
+    prop: string;
+    label?: string;
+    placeholder?: string;
+    type: string;
+    isCopy?: boolean;
+    optionProps?: any;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    options?: any;
+    isArray?: boolean;
+    startDate?: string; //开始时间(传入后台需要的参数)
+    endDate?: string; //结束时间(传入后台需要的参数)
+    startProp?: string;
+    endProp?: string;
+    isInteger?: boolean;
+    disabled?: boolean;
+    fileList?: any;
+    prompt?: any;
+}
+export const EDIT_FORM_DATA: FormItem[] = [
+    {
+        prop: "username",
+        placeholder: "请输入",
+        type: "input",
+        label: "用户名: "
+    },
+    {
+        prop: "email",
+        type: "input",
+        placeholder: "请输入",
+        label: "邮箱: "
+    },
+
+    {
+        prop: "role_id",
+        placeholder: "请输入",
+        type: "select",
+        label: "所属角色: ",
+        options: []
+    },
+    {
+        prop: "status",
+        placeholder: "",
+        type: "radio",
+        label: "状态: ",
+        options: [
+            {
+                label: "启用",
+                value: 1
+            },
+            {
+                label: "禁用",
+                value: -1
+            }
+        ]
+    },
+    {
+        prop: "password",
+        placeholder: "请输入",
+        type: "input",
+        label: "用户密码: "
+    },
+    {
+        prop: "repassword",
+        type: "input",
+        label: "确认密码: "
+    }
+];
+export const EDIT_RULE_FORM = {};

src/views/userManagement/list/constant/index.ts

@@ -0,0 +1,5 @@
+import { FORM_DATA, RULE_FORM } from "./search";
+import { COLUMNS } from "./table";
+import { RULES, RULES1 } from "./rules";
+import { EDIT_FORM_DATA, EDIT_RULE_FORM } from "./edit";
+export { FORM_DATA, RULE_FORM, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES, RULES1 };

src/views/userManagement/list/constant/rules.ts

@@ -0,0 +1,16 @@
+export const RULES = {
+    username: [{ required: true, message: "用户名称不能为空 ! ", trigger: "blur" }],
+    role_id: [{ required: true, message: "角色不能为空 ! ", trigger: "change" }],
+    password: [
+        { required: true, message: "密码不能为空 ! ", trigger: "blur" },
+        { min: 8, max: 16, message: "密码长度必须在 6 到 20 个字符之间", trigger: "blur" }
+    ],
+    repassword: [
+        { required: true, message: "密码不能为空 ! ", trigger: "blur" },
+        { min: 8, max: 16, message: "密码长度必须在 6 到 20 个字符之间", trigger: "blur" }
+    ]
+};
+export const RULES1 = {
+    username: [{ required: true, message: "用户名称不能为空 ! ", trigger: "blur" }],
+    role_id: [{ required: true, message: "角色不能为空 ! ", trigger: "change" }]
+};

src/views/userManagement/list/constant/search.ts

@@ -0,0 +1,49 @@
+interface FormItem {
+    prop: string;
+    label?: string;
+    placeholder?: string;
+    type: string;
+    isCopy?: boolean;
+    optionProps?: any;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    options?: any;
+    isArray?: boolean;
+    startDate?: string; //开始时间(传入后台需要的参数)
+    endDate?: string; //结束时间(传入后台需要的参数)
+    startProp?: string;
+    endProp?: string;
+    isInteger?: boolean;
+}
+export const FORM_DATA: FormItem[] = [
+    {
+        prop: "username",
+        placeholder: "请输入",
+        type: "input",
+        isArray: true,
+        label: "用户名: "
+    },
+
+    {
+        prop: "status",
+        placeholder: "请选择",
+        type: "select",
+        isArray: true,
+        label: "状态: ",
+        options: [
+            {
+                value: 1,
+                label: "启用"
+            },
+            {
+                value: -1,
+                label: "禁用"
+            }
+        ]
+    }
+];
+
+export const RULE_FORM = {
+    page: 1,
+    size: 50
+};

src/views/userManagement/list/constant/table.ts

@@ -0,0 +1,40 @@
+//import { RenderScope } from "@/components/ProTable/interface";
+export const COLUMNS = [
+    {
+        align: "center",
+        fixed: true,
+        label: "ID",
+        prop: "id",
+        width: 80
+    },
+
+    {
+        align: "center",
+        fixed: true,
+        label: "用户名",
+        prop: "username"
+    },
+    {
+        align: "center",
+        label: "最后登录时间",
+        prop: "last_login_at"
+    },
+    {
+        align: "center",
+        label: "最后登录IP",
+        prop: "last_login_ip"
+    },
+    {
+        align: "center",
+        label: "角色",
+        prop: "role_name"
+    },
+
+    {
+        align: "center",
+        label: "状态",
+        prop: "status"
+    },
+
+    { prop: "operation", label: "操作", fixed: "right", width: 200 }
+];

src/views/userManagement/list/index.vue

@@ -0,0 +1,227 @@
+<!-- 视频列表 -->
+<template>
+    <div class="table-box">
+        <div style="padding-bottom: 16px">
+            <el-button type="primary" @click="handleAdd"> 添加 </el-button>
+        </div>
+        <ProTable
+            ref="proTableRef"
+            :formData="dataStore.formData"
+            :columns="dataStore.columns"
+            :request-api="getUserListApi"
+            :init-param="dataStore.initParam"
+        >
+            <template #status="scope">
+                <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" effect="dark">{{
+                    scope.row.status === 1 ? "启用" : "禁用"
+                }}</el-tag>
+            </template>
+            <template #operation="scope">
+                <el-button size="small" type="primary" @click="handleBtnClick('编辑', scope.row)">编辑</el-button>
+                <el-button
+                    size="small"
+                    type="danger"
+                    @click="handleBtnClick('删除', scope.row)"
+                    v-if="scope.row.delete_disable === 0"
+                    >删除</el-button
+                >
+            </template>
+        </ProTable>
+        <el-drawer
+            v-model="dataStore.visible"
+            :show-close="true"
+            :size="600"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :before-close="handleBeforeClone"
+            destroy-on-close
+        >
+            <template #header="{ titleId, titleClass }">
+                <h4 :id="titleId" :class="titleClass">{{ dataStore.title }}</h4>
+            </template>
+            <div>
+                <rulesForm
+                    :ruleForm="dataStore.editRuleForm"
+                    :formData="dataStore.editFormData"
+                    :rules="dataStore.rules"
+                    ref="formRef"
+                    @handleInputBlurEmits="handleInputBlurEmits"
+                >
+                </rulesForm>
+            </div>
+            <template #footer>
+                <div style="flex: auto">
+                    <el-button @click="handleResetClick">重置</el-button>
+                    <el-button type="primary" @click="handleConfirmClick">确认</el-button>
+                </div>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script setup lang="ts" name="userListIndex">
+import ProTable from "@/components/ProTable/index.vue";
+import rulesForm from "@/components/rulesForm/index.vue";
+import CryptoJS from "crypto-js";
+//接口
+import {
+    getUserListApi,
+    getUserListDelApi,
+    getUserListDetailsApi,
+    getUserListEditUpApi,
+    getUserListSaveApi
+} from "@/api/modules/userList";
+import { getRolesListApi } from "@/api/modules/roleList";
+
+import { messageBox } from "@/utils/messageBox";
+import { useMsg } from "@/hooks/useMsg";
+//深拷贝方法
+import { cloneDeep } from "lodash-es";
+//表格和搜索條件
+import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES, RULES1 } from "./constant/index";
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTableRef = ref<any>(null);
+const formRef: any = ref(null);
+// 数据源
+const dataStore = reactive<any>({
+    title: "添加用户",
+    columns: COLUMNS, //列表配置项
+    rules: cloneDeep(RULES), //抽屉表单验证
+    editRuleForm: cloneDeep(EDIT_RULE_FORM),
+    editFormData: cloneDeep(EDIT_FORM_DATA), //抽屉表单配置项
+    initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
+    ruleForm: cloneDeep(RULE_FORM), // 搜索參數
+    formData: FORM_DATA, //搜索配置项
+    visible: false,
+    selectRow: {} //当前选择的row
+});
+
+//抽屉确认
+const handleConfirmClick = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef!.validate((valid: any) => {
+        if (valid) {
+            dataStore.title === "添加用户" ? getUserListSave() : getUserListEditUp();
+            console.log("submit!");
+        } else {
+            console.log("error submit!");
+            return false;
+        }
+    });
+};
+//重置验证状态
+const resetFields = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef.resetFields();
+};
+//抽屉重置
+const handleResetClick = () => {
+    if (dataStore.title === "添加用户") {
+        resetFields();
+    } else {
+        getUserListDetails(dataStore.editRuleForm.id);
+    }
+};
+//添加
+const handleAdd = () => {
+    dataStore.title = "添加用户";
+    dataStore.visible = true;
+};
+//抽屉关闭前的钩子
+const handleBeforeClone = () => {
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    resetFields();
+    dataStore.visible = false;
+};
+
+//按钮点击事件
+const handleBtnClick = (type: any, row: any) => {
+    //编辑
+    if (type === "编辑") {
+        dataStore.rules = cloneDeep(RULES1);
+        dataStore.visible = true;
+        dataStore.title = "编辑用户";
+        getUserListDetails(row.id);
+        return;
+    }
+    //删除
+    if (type === "删除") {
+        getUserListDel(row.id);
+    }
+};
+//删除
+const getUserListDel = (id: any) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getUserListDelApi(id);
+        if (result?.code === 0) {
+            const { msg } = result;
+            useMsg("success", msg);
+            proTableRef?.value?.getTableList();
+        }
+    });
+};
+//详情
+const getUserListDetails = async (id: any) => {
+    const result = await getUserListDetailsApi(id);
+    if (result?.code === 0) {
+        dataStore.editRuleForm = result?.data;
+    }
+};
+const setPwMD5 = () => {
+    dataStore.editRuleForm.password = CryptoJS.MD5(dataStore.editRuleForm.password)?.toString();
+    dataStore.editRuleForm.repassword = CryptoJS.MD5(dataStore.editRuleForm.repassword)?.toString();
+};
+//保存
+const getUserListSave = async () => {
+    // repassword,password
+    setPwMD5();
+    const result = await getUserListSaveApi(dataStore.editRuleForm);
+    if (result?.code === 0) {
+        const { msg } = result;
+        useMsg("success", msg);
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        proTableRef?.value?.getTableList();
+    }
+};
+//更新
+const getUserListEditUp = async () => {
+    if (dataStore.editRuleForm.password && dataStore.editRuleForm.repassword) {
+        setPwMD5();
+    }
+
+    const result = await getUserListEditUpApi(dataStore.editRuleForm);
+    if (result?.code === 0) {
+        const { msg } = result;
+        useMsg("success", msg);
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        proTableRef?.value?.getTableList();
+    }
+};
+//角色
+const getRolesList = async () => {
+    const result = await getRolesListApi();
+    if (result?.code === 0) {
+        let arr: any = [];
+        result?.data.forEach((item: any) => {
+            arr.push({
+                value: item.id,
+                label: item.name
+            });
+            dataStore.editFormData[2].options = arr;
+        });
+    }
+};
+getRolesList();
+//验证密码是否一致
+const handleInputBlurEmits = () => {
+    if (dataStore.editRuleForm.password && dataStore.editRuleForm.repassword) {
+        if (dataStore.editRuleForm.password !== dataStore.editRuleForm.repassword) {
+            useMsg("warning", "请保持用户密码与确认密码一致！");
+        }
+    }
+};
+</script>
+
+<style scoped></style>

src/views/userManagement/role/constant/edit.ts

@@ -0,0 +1,38 @@
+interface FormItem {
+    prop: string;
+    label?: string;
+    placeholder?: string;
+    type: string;
+    isCopy?: boolean;
+    optionProps?: any;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    options?: any;
+    isArray?: boolean;
+    startDate?: string; //开始时间(传入后台需要的参数)
+    endDate?: string; //结束时间(传入后台需要的参数)
+    startProp?: string;
+    endProp?: string;
+    isInteger?: boolean;
+    disabled?: boolean;
+    fileList?: any;
+    prompt?: any;
+    isAll?: any;
+}
+export const EDIT_FORM_DATA: FormItem[] = [
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        label: "角色名: "
+    },
+    {
+        prop: "desc",
+        type: "textarea",
+        placeholder: "请输入",
+        label: "角色描述: "
+    }
+];
+export const EDIT_RULE_FORM = {};
+// editRuleForm: {},
+//editFormData: [],

src/views/userManagement/role/constant/index.ts

@@ -0,0 +1,5 @@
+import { FORM_DATA, RULE_FORM } from "./search";
+import { COLUMNS } from "./table";
+import { RULES } from "./rules";
+import { EDIT_FORM_DATA, EDIT_RULE_FORM } from "./edit";
+export { FORM_DATA, RULE_FORM, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES };

src/views/userManagement/role/constant/rules.ts

@@ -0,0 +1,3 @@
+export const RULES = {
+    name: [{ required: true, message: "角色名称不能为空 ! ", trigger: "blur" }]
+};

src/views/userManagement/role/constant/search.ts

@@ -0,0 +1,31 @@
+interface FormItem {
+    prop: string;
+    label?: string;
+    placeholder?: string;
+    type: string;
+    isCopy?: boolean;
+    optionProps?: any;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    options?: any;
+    isArray?: boolean;
+    startDate?: string; //开始时间(传入后台需要的参数)
+    endDate?: string; //结束时间(传入后台需要的参数)
+    startProp?: string;
+    endProp?: string;
+    isInteger?: boolean;
+}
+export const FORM_DATA: FormItem[] = [
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        isArray: true,
+        label: "角色名: "
+    }
+];
+
+export const RULE_FORM = {
+    page: 1,
+    size: 50
+};

src/views/userManagement/role/constant/table.ts

@@ -0,0 +1,33 @@
+import { RenderScope } from "@/components/ProTable/interface";
+export const COLUMNS = [
+    {
+        align: "center",
+        fixed: true,
+        label: "ID",
+        prop: "id",
+        width: 80
+    },
+
+    {
+        align: "center",
+        fixed: true,
+        label: "角色名",
+        prop: "name"
+    },
+    {
+        align: "center",
+        label: "角色描述",
+        prop: "desc"
+    },
+    {
+        align: "center",
+        label: "权限",
+        prop: "authority",
+        render: (scope: RenderScope<any>): VNode | string | any => {
+            return Object.values(scope.row.authority).join("/");
+
+            // return scope.row.authority ? scope.row.authority.join(",") : "";
+        }
+    },
+    { prop: "operation", label: "操作", fixed: "right", width: 200 }
+];

src/views/userManagement/role/index.vue

@@ -0,0 +1,270 @@
+<template>
+    <div class="table-box">
+        <div style="padding-bottom: 16px">
+            <el-button type="primary" @click="handleAdd"> 添加 </el-button>
+        </div>
+        <ProTable
+            ref="proTableRef"
+            :formData="dataStore.formData"
+            :columns="dataStore.columns"
+            :request-api="getRoleListApi"
+            :init-param="dataStore.initParam"
+        >
+            <template #operation="scope">
+                <el-button size="small" type="primary" @click="handleBtnClick('编辑', scope.row)">编辑</el-button>
+                <el-button size="small" type="danger" @click="handleBtnClick('删除', scope.row)">删除</el-button>
+            </template>
+        </ProTable>
+        <el-drawer
+            v-model="dataStore.visible"
+            :show-close="true"
+            :size="600"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :before-close="handleBeforeClone"
+            destroy-on-close
+        >
+            <template #header="{ titleId, titleClass }">
+                <h4 :id="titleId" :class="titleClass">{{ dataStore.title }}</h4>
+            </template>
+            <div>
+                <rulesForm
+                    :ruleForm="dataStore.editRuleForm"
+                    :formData="dataStore.editFormData"
+                    :rules="dataStore.rules"
+                    :indeterminate="dataStore.isIndeterminate"
+                    ref="formRef"
+                >
+                </rulesForm>
+                <div style="margin-left: 65px; font-size: 14px; color: #606266">
+                    <div style="display: flex; align-items: center; margin-bottom: 10px">
+                        <span style="margin-right: 10px">权限分配:</span>
+                        <el-checkbox v-model="dataStore.allCheck" @change="handleAllCheckChange" label="全选" size="large" />
+                    </div>
+                    <el-tree
+                        ref="treeRef"
+                        style="max-width: 600px"
+                        :data="dataStore.treeData"
+                        show-checkbox
+                        node-key="id"
+                        highlight-current
+                        :props="defaultProps"
+                        @check-change="handleTreeCheckChange"
+                    />
+                </div>
+            </div>
+            <template #footer>
+                <div style="flex: auto">
+                    <el-button @click="handleResetClick">重置</el-button>
+                    <el-button type="primary" @click="handleConfirmClick">确认</el-button>
+                </div>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script setup lang="ts" name="roleListIndex">
+import ProTable from "@/components/ProTable/index.vue";
+import rulesForm from "@/components/rulesForm/index.vue";
+import { messageBox } from "@/utils/messageBox";
+import { nextTick } from "vue";
+import { useMsg } from "@/hooks/useMsg";
+//列表接口
+import {
+    getRoleListApi,
+    getRoleListDetailsApi,
+    getRoleListDelApi,
+    getRoleListEditUpApi,
+    getRoleListSaveApi
+} from "@/api/modules/roleList";
+//getMenusListApi
+import { getRoleMenusListApi } from "@/api/modules/webMenusList";
+//深拷贝方法
+import { cloneDeep } from "lodash-es";
+//表格和搜索條件
+import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTableRef = ref<any>(null);
+const formRef: any = ref(null);
+const treeRef: any = ref(null);
+const defaultProps = {
+    children: "children",
+    label: "title"
+};
+// 数据源
+const dataStore = reactive<any>({
+    treeData: [], //权限
+    allCheck: false,
+    title: "添加角色", //抽屉标题
+    columns: COLUMNS, //列表配置项
+    rules: cloneDeep(RULES), //抽屉表单验证
+    editRuleForm: cloneDeep(EDIT_RULE_FORM),
+    editFormData: cloneDeep(EDIT_FORM_DATA), //抽屉表单配置项
+    initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
+    ruleForm: cloneDeep(RULE_FORM), // 搜索參數
+    formData: FORM_DATA, //搜索配置项
+    selectedMenuIds: [], // 新增属性，用于保存选中的菜单 id
+    isIndeterminate: false, //全选框样式控制
+    visible: false, //抽屉控制
+    selectRow: {} //当前选择的row
+});
+
+// 处理全选框状态变化
+const handleAllCheckChange = (checked: any) => {
+    const allNodeKeys = getAllNodeKeys(dataStore.treeData);
+    if (checked) {
+        treeRef.value.setCheckedKeys(allNodeKeys);
+    } else {
+        treeRef.value.setCheckedKeys([]);
+    }
+};
+
+// 获取所有节点的 key
+const getAllNodeKeys = (data: any[]) => {
+    let keys: number[] = [];
+    data.forEach(item => {
+        keys.push(item.id);
+        if (item.children && item.children.length > 0) {
+            keys = keys.concat(getAllNodeKeys(item.children));
+        }
+    });
+    return keys;
+};
+
+// 处理树节点选中状态变化
+const handleTreeCheckChange = () => {
+    const allNodeKeys = getAllNodeKeys(dataStore.treeData);
+    const checkedKeys = treeRef.value.getCheckedKeys();
+    if (checkedKeys.length === allNodeKeys.length) {
+        dataStore.allCheck = true;
+        dataStore.isIndeterminate = false;
+    } else if (checkedKeys.length === 0) {
+        dataStore.allCheck = false;
+        dataStore.isIndeterminate = false;
+    } else {
+        dataStore.allCheck = false;
+        dataStore.isIndeterminate = true;
+    }
+    // 更新选中的菜单 id
+    dataStore.selectedMenuIds = checkedKeys.map((id: any) => ({ menu_id: id }));
+};
+
+//抽屉确认
+const handleConfirmClick = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef!.validate((valid: any) => {
+        if (valid) {
+            console.log("submit!");
+            dataStore.title === "添加角色" ? getRoleListSave() : getRoleListEditUp();
+        } else {
+            console.log("error submit!");
+            return false;
+        }
+    });
+};
+//重置验证状态
+const resetFields = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef.resetFields();
+};
+//抽屉重置
+const handleResetClick = () => {
+    if (dataStore.title === "添加角色") {
+        resetFields();
+    } else {
+        getRoleListDetails(dataStore.editRuleForm.id);
+    }
+};
+//添加
+const handleAdd = () => {
+    dataStore.title = "添加角色";
+    dataStore.visible = true;
+};
+//抽屉关闭前的钩子
+const handleBeforeClone = () => {
+    dataStore.selectedMenuIds = [];
+    treeRef.value.setCheckedKeys([]);
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    resetFields();
+    dataStore.visible = false;
+};
+//按钮点击事件
+const handleBtnClick = (type: any, row: any) => {
+    dataStore.selectRow = row;
+    //编辑
+    if (type === "编辑") {
+        dataStore.visible = true;
+        dataStore.title = "编辑角色";
+        getRoleListDetails(row.id);
+        return;
+    }
+    //删除
+    if (type === "删除") {
+        getRoleListDel(row.id);
+    }
+};
+
+//删除
+const getRoleListDel = (id: any) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getRoleListDelApi(id);
+        if (result?.code === 0) {
+            const { msg } = result;
+            useMsg("success", msg);
+            proTableRef?.value?.getTableList();
+        }
+    });
+};
+//详情
+const getRoleListDetails = async (id: any) => {
+    const result = await getRoleListDetailsApi(id);
+    if (result?.code === 0) {
+        dataStore.editRuleForm = result?.data;
+        const menuIds = dataStore.editRuleForm.authorities.map((item: any) => item.menu_id);
+        // 设置树组件的默认选中节点
+        nextTick(() => {
+            if (treeRef.value) {
+                treeRef.value.setCheckedKeys(menuIds);
+            }
+        });
+    }
+};
+//保存
+const getRoleListSave = async () => {
+    const result = await getRoleListSaveApi({
+        ...dataStore.editRuleForm,
+        menu_permission: JSON.stringify(dataStore.selectedMenuIds)
+    });
+    if (result?.code === 0) {
+        const { msg } = result;
+        useMsg("success", msg);
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        proTableRef?.value?.getTableList();
+    }
+};
+//更新
+const getRoleListEditUp = async () => {
+    const result = await getRoleListEditUpApi({
+        ...dataStore.editRuleForm,
+        menu_permission: JSON.stringify(dataStore.selectedMenuIds)
+    });
+    if (result?.code === 0) {
+        const { msg } = result;
+        useMsg("success", msg);
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        proTableRef?.value?.getTableList();
+    }
+};
+//权限管理
+const getMenusList = async () => {
+    const result = await getRoleMenusListApi();
+    if (result?.code === 0) {
+        dataStore.treeData = result?.data;
+    }
+};
+getMenusList();
+</script>
+
+<style scoped></style>