befly-admin-ui 1.8.14

package/views/permission/role/components/edit.vue

@@ -0,0 +1,143 @@
+<template>
+    <PageDialog v-model="dialogVisible" :title="$Prop.actionType === 'upd' ? '更新角色' : '添加角色'" :confirm-loading="$Data.submitting" @confirm="onSubmit">
+        <div class="comp-role-edit">
+            <TForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" ref="formRef">
+                <TFormItem label="角色名称" prop="name">
+                    <TInput v-model="$Data.formData.name" placeholder="请输入角色名称" />
+                </TFormItem>
+                <TFormItem label="角色代码" prop="code">
+                    <TInput v-model="$Data.formData.code" placeholder="请输入角色代码，如：admin" />
+                </TFormItem>
+                <TFormItem label="角色描述" prop="description">
+                    <TInput v-model="$Data.formData.description" placeholder="请输入角色描述" />
+                </TFormItem>
+                <TFormItem label="排序" prop="sort">
+                    <TInputNumber v-model="$Data.formData.sort" :min="0" :max="9999" />
+                </TFormItem>
+                <TFormItem label="状态" prop="state">
+                    <TRadioGroup v-model="$Data.formData.state">
+                        <TRadio :value="1">正常</TRadio>
+                        <TRadio :value="2">禁用</TRadio>
+                    </TRadioGroup>
+                </TFormItem>
+            </TForm>
+        </div>
+    </PageDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+
+import {
+    //
+    Form as TForm,
+    FormItem as TFormItem,
+    Input as TInput,
+    InputNumber as TInputNumber,
+    RadioGroup as TRadioGroup,
+    Radio as TRadio,
+    Button as TButton,
+    MessagePlugin
+} from "tdesign-vue-next";
+import PageDialog from "@/components/pageDialog.vue";
+import { $Http } from "@/plugins/http";
+import { fieldClear } from "befly-admin-ui/utils/fieldClear";
+
+const $Prop = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    actionType: {
+        type: String,
+        default: "add"
+    },
+    rowData: {
+        type: Object,
+        default: {}
+    }
+});
+
+const $Emit = defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+    (e: "success"): void;
+}>();
+
+type PageDialogEventContext = {
+    close: () => void;
+};
+
+// 表单引用
+type TDesignFormInstance = {
+    validate: () => Promise<unknown>;
+};
+
+const formRef = ref<TDesignFormInstance | null>(null);
+
+const $Computed = {};
+
+const $Data = reactive({
+    submitting: false,
+    formData: {
+        id: 0,
+        name: "",
+        code: "",
+        description: "",
+        sort: 0,
+        state: 1
+    }
+});
+
+const $Data2 = reactive({
+    formRules: {
+        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+        code: [
+            { required: true, message: "请输入角色代码", trigger: "blur" },
+            { pattern: /^[a-zA-Z0-9_]+$/, message: "角色代码只能包含字母、数字和下划线", trigger: "blur" }
+        ],
+        sort: [{ type: "number", message: "排序必须是数字", trigger: "blur" }]
+    }
+});
+
+async function initData(): Promise<void> {
+    if ($Prop.actionType === "upd" && $Prop.rowData.id) {
+        $Data.formData = Object.assign({}, $Prop.rowData);
+    }
+}
+
+const dialogVisible = computed({
+    get: () => $Prop.modelValue,
+    set: (value) => {
+        $Emit("update:modelValue", value);
+    }
+});
+
+async function onSubmit(context?: PageDialogEventContext): Promise<void> {
+    try {
+        const form = formRef.value;
+        if (!form) {
+            MessagePlugin.warning("表单未就绪");
+            return;
+        }
+
+        const valid = await form.validate();
+        if (!valid) return;
+
+        $Data.submitting = true;
+        const formData = $Prop.actionType === "add" ? fieldClear($Data.formData, { omitKeys: ["id", "state"] }) : $Data.formData;
+        const res = await $Http.post($Prop.actionType === "upd" ? "/core/role/upd" : "/core/role/ins", formData);
+
+        MessagePlugin.success(res.msg);
+        $Emit("success");
+        if (context && typeof context.close === "function") {
+            context.close();
+        }
+    } catch (error) {
+        MessagePlugin.error((error as { msg?: string }).msg || "提交失败");
+    } finally {
+        $Data.submitting = false;
+    }
+}
+
+initData();
+</script>

package/views/permission/role/components/menu.vue

@@ -0,0 +1,310 @@
+<template>
+    <PageDialog v-model="dialogVisible" title="菜单权限" width="900px" :confirm-loading="$Data.submitting" @confirm="onSubmit">
+        <div class="comp-role-menu">
+            <!-- 搜索框 -->
+            <div class="search-box">
+                <TInput v-model="$Data.searchText" placeholder="搜索菜单名称或路径" clearable @change="onSearch">
+                    <template #prefix-icon>
+                        <SearchIcon />
+                    </template>
+                </TInput>
+            </div>
+
+            <div class="menu-container">
+                <div class="menu-group" v-for="group in $Data.filteredMenuGroups" :key="group.name">
+                    <div class="group-header">{{ group.title }}</div>
+                    <div class="menu-checkbox-list">
+                        <TCheckboxGroup v-model="$Data.checkedMenuPaths">
+                            <TCheckbox v-for="menu in group.menus" :key="menu.value" :value="menu.value">
+                                <div class="menu-checkbox-label">
+                                    <div class="menu-label-main">
+                                        <div class="menu-name" :title="menu.path ? `${menu.name}\n${menu.path}` : menu.name">
+                                            {{ menu.name }}
+                                        </div>
+                                    </div>
+                                </div>
+                            </TCheckbox>
+                        </TCheckboxGroup>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </PageDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive } from "vue";
+
+import { CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, Input as TInput, MessagePlugin } from "tdesign-vue-next";
+import { SearchIcon } from "tdesign-icons-vue-next";
+import PageDialog from "@/components/pageDialog.vue";
+import { $Http } from "@/plugins/http";
+import { arrayToTree } from "befly-admin-ui/utils/arrayToTree";
+
+const $Prop = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    rowData: {
+        type: Object,
+        default: () => ({})
+    }
+});
+
+const $Emit = defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+    (e: "success"): void;
+}>();
+
+type PageDialogEventContext = {
+    close: () => void;
+};
+
+const dialogVisible = computed({
+    get: () => $Prop.modelValue,
+    set: (value) => {
+        $Emit("update:modelValue", value);
+    }
+});
+
+const $Data = reactive({
+    submitting: false,
+    searchText: "",
+    menuGroups: [],
+    filteredMenuGroups: [],
+    checkedMenuPaths: []
+});
+
+async function initData(): Promise<void> {
+    await Promise.all([apiMenuAll(), apiRoleMenuDetail()]);
+    $Data.filteredMenuGroups = $Data.menuGroups;
+}
+
+async function apiMenuAll(): Promise<void> {
+    try {
+        const res = await $Http.post(
+            "/core/menu/all",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        const lists = Array.isArray(res?.data?.lists) ? res.data.lists : [];
+
+        const treeResult = arrayToTree(lists, "path", "parentPath", "children", "sort");
+        const roots = Array.isArray(treeResult?.tree) ? treeResult.tree : [];
+
+        const groups: Array<{ name: string; title: string; menus: unknown[] }> = [];
+        for (const root of roots) {
+            const rootPath = typeof root?.path === "string" ? root.path : "";
+            const rootName = typeof root?.name === "string" ? root.name : "";
+
+            const menus: unknown[] = [];
+
+            const walk = (node: Record<string, unknown>, depth: number): void => {
+                const name = typeof node["name"] === "string" ? String(node["name"]) : "";
+                const path = typeof node["path"] === "string" ? String(node["path"]) : "";
+                if (path.length > 0) {
+                    menus.push({
+                        value: path,
+                        name: name,
+                        path: path,
+                        depth: depth,
+                        label: `${name} ${path}`.trim()
+                    });
+                }
+
+                const children = Array.isArray(node["children"]) ? (node["children"] as unknown[]) : [];
+                for (const child of children) {
+                    if (child && typeof child === "object") {
+                        walk(child as Record<string, unknown>, depth + 1);
+                    }
+                }
+            };
+
+            walk(root as Record<string, unknown>, 0);
+
+            const groupTitle = rootName.length > 0 ? rootName : rootPath;
+            groups.push({
+                name: rootPath.length > 0 ? rootPath : groupTitle,
+                title: groupTitle.length > 0 ? groupTitle : "未命名菜单",
+                menus: menus
+            });
+        }
+
+        $Data.menuGroups = groups as never;
+    } catch (_error) {
+        MessagePlugin.error("加载菜单失败");
+    }
+}
+
+async function apiRoleMenuDetail(): Promise<void> {
+    if (!$Prop.rowData.id) return;
+
+    try {
+        const res = await $Http.post(
+            "/core/role/menus",
+            {
+                roleCode: $Prop.rowData.code
+            },
+            {
+                dropValues: [""]
+            }
+        );
+
+        $Data.checkedMenuPaths = Array.isArray(res.data) ? res.data : [];
+    } catch (_error) {
+        MessagePlugin.error("加载数据失败");
+    }
+}
+
+function onSearch(): void {
+    const kw = typeof $Data.searchText === "string" ? $Data.searchText.trim().toLowerCase() : "";
+    if (kw.length === 0) {
+        $Data.filteredMenuGroups = $Data.menuGroups;
+        return;
+    }
+
+    $Data.filteredMenuGroups = ($Data.menuGroups as unknown[])
+        .map((group) => {
+            const groupRecord = group && typeof group === "object" ? (group as Record<string, unknown>) : null;
+            const groupMenus = groupRecord && Array.isArray(groupRecord["menus"]) ? (groupRecord["menus"] as unknown[]) : [];
+
+            const menus = groupMenus.filter((menu) => {
+                const menuRecord = menu && typeof menu === "object" ? (menu as Record<string, unknown>) : null;
+                const label = menuRecord && typeof menuRecord["label"] === "string" ? String(menuRecord["label"]) : "";
+                return label.toLowerCase().includes(kw);
+            });
+
+            return {
+                name: groupRecord && typeof groupRecord["name"] === "string" ? String(groupRecord["name"]) : "",
+                title: groupRecord && typeof groupRecord["title"] === "string" ? String(groupRecord["title"]) : "",
+                menus: menus
+            };
+        })
+        .filter((group) => group.menus.length > 0) as never;
+}
+
+async function onSubmit(context?: PageDialogEventContext): Promise<void> {
+    try {
+        $Data.submitting = true;
+
+        const res = await $Http.post("/core/role/menuSave", {
+            roleCode: $Prop.rowData.code,
+            menuPaths: $Data.checkedMenuPaths
+        });
+
+        if (res.code === 0) {
+            MessagePlugin.success("保存成功");
+            $Emit("success");
+            if (context && typeof context.close === "function") {
+                context.close();
+            }
+        } else {
+            MessagePlugin.error(res.msg || "保存失败");
+        }
+    } catch (_error) {
+        MessagePlugin.error("保存失败");
+    } finally {
+        $Data.submitting = false;
+    }
+}
+
+initData();
+</script>
+
+<style scoped lang="scss">
+.comp-role-menu {
+    height: 60vh;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .menu-container {
+        flex: 1;
+        overflow-y: auto;
+
+        .menu-group {
+            margin-bottom: 16px;
+            border: 1px solid var(--border-color);
+            border-radius: var(--border-radius-small);
+            overflow: hidden;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .group-header {
+                padding: 12px 16px;
+                background-color: var(--primary-color-light);
+                font-weight: 500;
+                font-size: var(--font-size-sm);
+                color: var(--text-primary);
+                display: flex;
+                align-items: center;
+                gap: 8px;
+
+                &::before {
+                    content: "";
+                    width: 12px;
+                    height: 12px;
+                    border-radius: 50%;
+                    background-color: var(--primary-color);
+                    box-shadow: 0 0 0 2px var(--bg-color-container);
+                    flex-shrink: 0;
+                }
+            }
+
+            .menu-checkbox-list {
+                padding: 10px;
+
+                :deep(.t-checkbox-group) {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 12px;
+                    width: 100%;
+                }
+
+                :deep(.t-checkbox) {
+                    flex: 0 0 calc(33.333% - 8px);
+                    margin: 0;
+                    min-width: 0;
+                }
+
+                :deep(.t-checkbox__label) {
+                    min-width: 0;
+                }
+            }
+        }
+    }
+}
+
+.menu-checkbox-label {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.menu-label-main {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.menu-name {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dialog-footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+</style>

package/views/permission/role/index.vue

@@ -0,0 +1,175 @@
+<template>
+    <PagedTableDetail class="page-role page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['state', 'menuCount', 'apiCount']">
+        <template #toolLeft>
+            <TButton theme="primary" @click="onAdd">
+                <template #icon>
+                    <AddIcon />
+                </template>
+            </TButton>
+        </template>
+
+        <template #toolRight="scope">
+            <TButton shape="circle" @click="onReload(scope.reload)">
+                <template #icon>
+                    <RefreshIcon />
+                </template>
+            </TButton>
+        </template>
+
+        <template #state="{ row }">
+            <TTag v-if="row.state === 1" shape="round" theme="success" variant="light-outline">正常</TTag>
+            <TTag v-else-if="row.state === 2" shape="round" theme="warning" variant="light-outline">禁用</TTag>
+            <TTag v-else shape="round" theme="danger" variant="light-outline">已删除</TTag>
+        </template>
+
+        <template #menuCount="{ row }">
+            {{ getPathCount(row.menus) }}
+        </template>
+
+        <template #apiCount="{ row }">
+            {{ getPathCount(row.apis) }}
+        </template>
+
+        <template #operation="{ row, deleteRow }">
+            <TDropdown trigger="click" placement="bottom-right" @click="onDropdownAction($event, row, deleteRow)">
+                <TButton theme="primary" size="small">
+                    操作
+                    <template #suffix><ChevronDownIcon /></template>
+                </TButton>
+                <TDropdownMenu slot="dropdown">
+                    <TDropdownItem value="upd">
+                        <EditIcon />
+                        编辑
+                    </TDropdownItem>
+                    <TDropdownItem value="menu">
+                        <SettingIcon />
+                        菜单权限
+                    </TDropdownItem>
+                    <TDropdownItem value="api">
+                        <CodeIcon />
+                        接口权限
+                    </TDropdownItem>
+                    <TDropdownItem value="del" :divider="true">
+                        <DeleteIcon style="width: 14px; height: 14px; margin-right: 6px" />
+                        删除
+                    </TDropdownItem>
+                </TDropdownMenu>
+            </TDropdown>
+        </template>
+
+        <template #dialogs="scope">
+            <!-- 编辑对话框组件 -->
+            <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="onDialogSuccess(scope.reload)" />
+
+            <!-- 菜单权限对话框组件 -->
+            <MenuDialog v-if="$Data.menuVisible" v-model="$Data.menuVisible" :row-data="$Data.rowData" @success="onDialogSuccess(scope.reload)" />
+
+            <!-- 接口权限对话框组件 -->
+            <ApiDialog v-if="$Data.apiVisible" v-model="$Data.apiVisible" :row-data="$Data.rowData" @success="onDialogSuccess(scope.reload)" />
+        </template>
+    </PagedTableDetail>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Tag as TTag } from "tdesign-vue-next";
+import { AddIcon, ChevronDownIcon, CodeIcon, DeleteIcon, EditIcon, RefreshIcon, SettingIcon } from "tdesign-icons-vue-next";
+import EditDialog from "./components/edit.vue";
+import MenuDialog from "./components/menu.vue";
+import ApiDialog from "./components/api.vue";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
+import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
+
+// 响应式数据
+const $Data = reactive({
+    columns: withDefaultColumns([
+        { colKey: "name", title: "角色名称" },
+        { colKey: "code", title: "角色代码", width: 150 },
+        { colKey: "menuCount", title: "菜单数量", align: "center", width: 100 },
+        { colKey: "apiCount", title: "接口数量", align: "center", width: 100 },
+        { colKey: "sort", title: "排序" },
+        { colKey: "state", title: "状态" },
+        { colKey: "description", title: "描述" },
+        { colKey: "operation", title: "操作" }
+    ]),
+    endpoints: {
+        list: {
+            path: "/core/role/list",
+            dropValues: [""]
+        },
+        delete: {
+            path: "/core/role/del",
+            idKey: "id",
+            confirm: (row) => {
+                return {
+                    header: "确认删除",
+                    body: `确认删除角色“${row.name}”吗？`,
+                    confirmBtn: "删除",
+                    status: "warning"
+                };
+            }
+        }
+    },
+    editVisible: false,
+    menuVisible: false,
+    apiVisible: false,
+    actionType: "add",
+    rowData: {}
+});
+
+function onAdd(): void {
+    onAction("add", {});
+}
+
+function onReload(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
+
+function onDialogSuccess(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
+
+function getPathCount(value: unknown): number {
+    if (!Array.isArray(value)) return 0;
+    return value.filter((p) => typeof p === "string" && p.trim().length > 0).length;
+}
+
+function onAction(command: string, rowData: Record<string, unknown>): void {
+    $Data.actionType = command;
+
+    if (command === "add") {
+        $Data.rowData = {};
+    } else {
+        $Data.rowData = Object.assign({}, rowData);
+    }
+
+    if (command === "add" || command === "upd") {
+        $Data.editVisible = true;
+        return;
+    }
+
+    if (command === "menu") {
+        $Data.menuVisible = true;
+        return;
+    }
+
+    if (command === "api") {
+        $Data.apiVisible = true;
+    }
+}
+
+function onDropdownAction(data: unknown, rowData: Record<string, unknown>, deleteRow: (row: Record<string, unknown>) => void): void {
+    const record = data as Record<string, unknown>;
+    const rawValue = record && record["value"] ? record["value"] : "";
+    const cmd = rawValue ? String(rawValue) : "";
+    if (cmd === "del") {
+        deleteRow(rowData);
+        return;
+    }
+    onAction(cmd, rowData);
+}
+</script>
+
+<style scoped lang="scss">
+/* page styles */
+</style>