265 lines
8.5 KiB
Plaintext
265 lines
8.5 KiB
Plaintext
<template>
|
||
<div>
|
||
<div class="n-layout-page-header">
|
||
<a-card :bordered="false" title="菜单权限管理">
|
||
页面数据为 Mock 示例数据，非真实数据。
|
||
</a-card>
|
||
</div>
|
||
<a-row class="mt-4" :gutter="[16, 16]">
|
||
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
|
||
<a-card :bordered="false">
|
||
<template #title>
|
||
<a-space>
|
||
<a-dropdown>
|
||
<a-button type="primary" ghost>
|
||
<div class="flex items-center">
|
||
<span class="mr-1">添加菜单</span>
|
||
<DownOutlined style="font-size: 14px" />
|
||
</div>
|
||
</a-button>
|
||
|
||
<template #overlay>
|
||
<a-menu @click="selectAddMenu">
|
||
<a-menu-item
|
||
v-for="item in addMenuOptions"
|
||
:key="item.key"
|
||
:disabled="item.key === 'son' && isAddSon ? true : false"
|
||
>
|
||
<span>{{ item.label }}</span>
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown>
|
||
<a-button type="primary" ghost icon-placement="left" @click="packHandle">
|
||
<div class="flex items-center">
|
||
<span class="mr-1">全部{{ expandedKeys.length ? '收起' : '展开' }}</span>
|
||
<AlignLeftOutlined style="font-size: 14px" />
|
||
</div>
|
||
</a-button>
|
||
</a-space>
|
||
</template>
|
||
<div class="w-full menu">
|
||
<a-input type="input" v-model:value="pattern" placeholder="输入菜单名称搜索">
|
||
<template #suffix>
|
||
<span size="18" class="cursor-pointer">
|
||
<SearchOutlined />
|
||
</span>
|
||
</template>
|
||
</a-input>
|
||
<div class="py-3 menu-list">
|
||
<template v-if="loading">
|
||
<div class="flex items-center justify-center py-4">
|
||
<a-spin size="default" />
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<a-tree
|
||
checkable
|
||
selectable
|
||
:fieldNames="{ children: 'children', title: 'label', key: 'key' }"
|
||
:tree-data="treeData"
|
||
v-model:expandedKeys="expandedKeys"
|
||
v-model:selectedKeys="selectedKeys"
|
||
@select="selectedTree"
|
||
:height="650"
|
||
>
|
||
<template #title="{ label }">
|
||
<span v-if="label.indexOf(pattern) > -1">
|
||
{{ label.substr(0, label.indexOf(pattern)) }}
|
||
<span style="color: #f50">{{ pattern }}</span>
|
||
{{ label.substr(label.indexOf(pattern) + pattern.length) }}
|
||
</span>
|
||
<span v-else>{{ label }}</span>
|
||
</template>
|
||
</a-tree>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
|
||
<a-card :bordered="false">
|
||
<template #title>
|
||
<a-space>
|
||
<FormOutlined style="font-size: 14px" />
|
||
<span>编辑菜单{{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
|
||
</a-space>
|
||
</template>
|
||
<a-alert type="info" closable>
|
||
<template #description>点击菜单列表任意一项后，可进行编辑</template>
|
||
</a-alert>
|
||
<a-form
|
||
:model="formParams"
|
||
:rules="rules"
|
||
ref="formRef"
|
||
label-placement="left"
|
||
:label-width="100"
|
||
:labelCol="{ span: 2 }"
|
||
v-if="isEditMenu"
|
||
class="py-4"
|
||
>
|
||
<a-form-item label="类型" name="type">
|
||
<span>{{ formParams.type === 1 ? '侧边栏菜单' : '' }}</span>
|
||
</a-form-item>
|
||
<a-form-item label="标题" name="label">
|
||
<a-input placeholder="请输入标题" v-model:value="formParams.label" />
|
||
</a-form-item>
|
||
<a-form-item label="副标题" name="subtitle">
|
||
<a-input placeholder="请输入副标题" v-model:value="formParams.subtitle" />
|
||
</a-form-item>
|
||
<a-form-item label="路径" name="path">
|
||
<a-input placeholder="请输入路径" v-model:value="formParams.path" />
|
||
</a-form-item>
|
||
<a-form-item label="打开方式" name="openType">
|
||
<a-radio-group v-model:value="formParams.openType" name="openType">
|
||
<a-space>
|
||
<a-radio :value="1">当前窗口</a-radio>
|
||
<a-radio :value="2">新窗口</a-radio>
|
||
</a-space>
|
||
</a-radio-group>
|
||
</a-form-item>
|
||
<a-form-item label="菜单权限" name="auth">
|
||
<a-input placeholder="请输入权限，多个权限用，分割" v-model:value="formParams.auth" />
|
||
</a-form-item>
|
||
<a-form-item :wrapperCol="{ offset: 2 }">
|
||
<a-space>
|
||
<a-button type="primary" :loading="subLoading" @click="formSubmit"
|
||
>保存修改</a-button
|
||
>
|
||
<a-button @click="handleReset">重置</a-button>
|
||
</a-space>
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
<CreateDrawer ref="createDrawerRef" :title="drawerTitle" />
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { ref, unref, reactive, onMounted, computed } from 'vue';
|
||
import { message } from 'ant-design-vue';
|
||
import {
|
||
DownOutlined,
|
||
AlignLeftOutlined,
|
||
SearchOutlined,
|
||
FormOutlined,
|
||
} from '@ant-design/icons-vue';
|
||
import { getMenuList } from '@/api/system/menu';
|
||
import { getTreeItem } from '@/utils';
|
||
import CreateDrawer from './CreateDrawer.vue';
|
||
|
||
const rules = {
|
||
label: {
|
||
required: true,
|
||
message: '请输入标题',
|
||
trigger: 'blur',
|
||
},
|
||
path: {
|
||
required: true,
|
||
message: '请输入路径',
|
||
trigger: 'blur',
|
||
},
|
||
};
|
||
|
||
const formRef: any = ref(null);
|
||
const createDrawerRef = ref();
|
||
|
||
const selectedKeys = ref([]);
|
||
|
||
let treeItemKey = ref([]);
|
||
|
||
const expandedKeys = ref<string[]>(['dashboard', 'form', 'console']);
|
||
|
||
const treeData = ref([]);
|
||
|
||
const loading = ref(true);
|
||
const subLoading = ref(false);
|
||
const isEditMenu = ref(false);
|
||
const treeItemTitle = ref('');
|
||
const pattern = ref('');
|
||
const drawerTitle = ref('');
|
||
|
||
const isAddSon = computed(() => {
|
||
return !treeItemKey.value.length;
|
||
});
|
||
|
||
const addMenuOptions = ref([
|
||
{
|
||
label: '添加顶级菜单',
|
||
key: 'home',
|
||
disabled: false,
|
||
},
|
||
{
|
||
label: '添加子菜单',
|
||
key: 'son',
|
||
disabled: isAddSon,
|
||
},
|
||
]);
|
||
|
||
const formParams = reactive({
|
||
type: 1,
|
||
label: '',
|
||
subtitle: '',
|
||
path: '',
|
||
auth: '',
|
||
openType: 1,
|
||
});
|
||
|
||
function selectAddMenu(e: any) {
|
||
drawerTitle.value = e.key === 'home' ? '添加顶栏菜单' : `添加子菜单：${treeItemTitle.value}`;
|
||
openCreateDrawer();
|
||
}
|
||
|
||
function openCreateDrawer() {
|
||
const { openDrawer } = createDrawerRef.value;
|
||
openDrawer();
|
||
}
|
||
|
||
function selectedTree(keys) {
|
||
if (keys.length) {
|
||
const treeItem = getTreeItem(unref(treeData), keys[0]);
|
||
treeItemKey.value = keys;
|
||
treeItemTitle.value = treeItem.label;
|
||
Object.assign(formParams, treeItem);
|
||
isEditMenu.value = true;
|
||
} else {
|
||
isEditMenu.value = false;
|
||
treeItemKey.value = [];
|
||
treeItemTitle.value = '';
|
||
}
|
||
}
|
||
|
||
function handleReset() {
|
||
const treeItem = getTreeItem(unref(treeData), treeItemKey.value[0]);
|
||
Object.assign(formParams, treeItem);
|
||
}
|
||
|
||
function formSubmit() {
|
||
formRef.value.validate((errors: boolean) => {
|
||
if (!errors) {
|
||
message.error('抱歉，您没有该权限');
|
||
} else {
|
||
message.error('请填写完整信息');
|
||
}
|
||
});
|
||
}
|
||
|
||
function packHandle() {
|
||
if (expandedKeys.value.length) {
|
||
expandedKeys.value = [];
|
||
} else {
|
||
expandedKeys.value = [].concat(treeData.value.map((item: any) => item.key as string) as []);
|
||
}
|
||
console.log(expandedKeys.value);
|
||
}
|
||
|
||
onMounted(async () => {
|
||
const treeMenuList = await getMenuList();
|
||
const keys = treeMenuList.list.map((item) => item.key);
|
||
Object.assign(formParams, keys);
|
||
treeData.value = treeMenuList.list;
|
||
loading.value = false;
|
||
});
|
||
</script>
|