mirror of
https://github.com/bufanyun/hotgo.git
synced 2026-05-01 23:44:27 +08:00
发布v2.15.1版本，更新内容请查看：https://github.com/bufanyun/hotgo/blob/v2.0/docs/guide-zh-CN/start-update-log.md
This commit is contained in:
孟帅
@@ -1,400 +0,0 @@
|
||||
<template>
|
||||
<n-drawer v-model:show="isDrawer" :width="width" :placement="placement" :mask-closable="false">
|
||||
<n-drawer-content :title="title" closable>
|
||||
<n-form
|
||||
:model="formParams"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
label-placement="left"
|
||||
:label-width="100"
|
||||
>
|
||||
<n-divider title-placement="left">基本设置</n-divider>
|
||||
<n-form-item label="类型" path="type">
|
||||
<n-radio-group v-model:value="formParams.type" name="type">
|
||||
<n-radio-button
|
||||
v-for="menuType in menuTypes"
|
||||
:key="menuType.value"
|
||||
:value="menuType.value"
|
||||
:label="menuType.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
<n-form-item label="上级目录" path="pid">
|
||||
<n-tree-select
|
||||
filterable
|
||||
:options="optionTreeData"
|
||||
:default-value="formParams.pid"
|
||||
@update:value="handleUpdateValue"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
:label="
|
||||
formParams.type === 1 ? '目录名称' : formParams.type === 2 ? '菜单名称' : '按钮名称'
|
||||
"
|
||||
path="title"
|
||||
>
|
||||
<n-input placeholder="请输入" v-model:value="formParams.title" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item path="icon" v-if="formParams.type !== 3">
|
||||
<IconSelector style="width: 100%" v-model:value="formParams.icon" option="antd" />
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
请填写图标编码，可以参考图标库，也可以不填使用默认图标
|
||||
</n-tooltip>
|
||||
菜单图标</template
|
||||
>
|
||||
</n-form-item>
|
||||
<n-form-item path="path" v-if="formParams.type !== 3">
|
||||
<n-input placeholder="路由地址" v-model:value="formParams.path" />
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
请路由地址，如：user
|
||||
</n-tooltip>
|
||||
路由地址</template
|
||||
>
|
||||
</n-form-item>
|
||||
<n-form-item path="name">
|
||||
<n-input placeholder="路由别名" v-model:value="formParams.name" />
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址 则会新窗口打开
|
||||
</n-tooltip>
|
||||
路由别名</template
|
||||
>
|
||||
</n-form-item>
|
||||
<n-form-item label="组件路径" path="component" v-if="formParams.type !== 3">
|
||||
<n-input placeholder="组件路径" v-model:value="formParams.component" />
|
||||
<template #feedback>
|
||||
主目录填 `LAYOUT`;多级父目录填
|
||||
`ParentLayout`;页面填具体的组件路径，如：`/system/menu/menu`</template
|
||||
>
|
||||
</n-form-item>
|
||||
<n-form-item label="默认跳转" path="redirect" v-if="formParams.type === 1">
|
||||
<n-input placeholder="默认路由跳转地址" v-model:value="formParams.redirect" />
|
||||
<template #feedback
|
||||
>默认跳转路由地址，如：`/system/menu/menu` 多级路由情况下适用</template
|
||||
>
|
||||
</n-form-item>
|
||||
<n-divider title-placement="left">功能设置</n-divider>
|
||||
<n-form-item label="分配权限" path="permissions">
|
||||
<n-input
|
||||
placeholder="请输入分配权限，多个权限用,分割"
|
||||
v-model:value="formParams.permissions"
|
||||
/>
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
请填写API路由地址，可同时作用于服务端和web端。多个权限用,分割
|
||||
</n-tooltip>
|
||||
分配权限</template
|
||||
>
|
||||
</n-form-item>
|
||||
<!-- <n-form-item label="权限名称" path="permissionName">-->
|
||||
<!-- <n-input placeholder="权限名称" v-model:value="formParams.permissionName" />-->
|
||||
<!-- </n-form-item>-->
|
||||
<n-form-item label="高亮路由" path="activeMenu" v-if="formParams.type !== 3">
|
||||
<n-input placeholder="高亮路由" v-model:value="formParams.activeMenu" />
|
||||
</n-form-item>
|
||||
<n-form-item label="菜单排序" path="sort">
|
||||
<n-input-number style="width: 100%" v-model:value="formParams.sort" clearable />
|
||||
</n-form-item>
|
||||
|
||||
<n-grid x-gap="24" :cols="2" v-if="formParams.type !== 3">
|
||||
<n-gi>
|
||||
<n-form-item label="根路由" path="isRoot">
|
||||
<n-radio-group v-model:value="formParams.isRoot" name="isRoot">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="页签固定" path="affix">
|
||||
<n-radio-group v-model:value="formParams.affix" name="affix">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="简化路由" path="alwaysShow">
|
||||
<n-radio-group v-model:value="formParams.alwaysShow" name="alwaysShow">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-grid x-gap="24" :cols="2" v-if="formParams.type !== 3">
|
||||
<n-gi>
|
||||
<n-form-item label="缓存路由" path="keepAlive">
|
||||
<n-radio-group v-model:value="formParams.keepAlive" name="keepAlive">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="是否隐藏" path="hidden">
|
||||
<n-radio-group v-model:value="formParams.hidden" name="hidden">
|
||||
<n-radio-button
|
||||
v-for="hidden in hiddenMap"
|
||||
:key="hidden.value"
|
||||
:value="hidden.value"
|
||||
:label="hidden.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-grid x-gap="24" :cols="2" v-if="formParams.type !== 3">
|
||||
<n-gi>
|
||||
<n-form-item label="是否外链" path="isFrame">
|
||||
<n-radio-group v-model:value="formParams.isFrame" name="isFrame">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="外部地址" path="frameSrc" v-show="formParams.isFrame === 1">
|
||||
<n-input placeholder="内联外部地址" v-model:value="formParams.frameSrc" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-form-item label="状态" path="status">
|
||||
<n-radio-group v-model:value="formParams.status" name="status">
|
||||
<n-radio-button
|
||||
v-for="status in statusMap"
|
||||
:key="status.value"
|
||||
:value="status.value"
|
||||
:label="status.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
<template #footer>
|
||||
<n-space>
|
||||
<n-button type="primary" :loading="subLoading" @click="formSubmit">确认添加</n-button>
|
||||
<n-button @click="handleReset">重置</n-button>
|
||||
<n-button @click="closeDrawer">取消</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-drawer-content>
|
||||
</n-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, toRefs } from 'vue';
|
||||
import { FormItemRule, TreeSelectOption, useMessage } from 'naive-ui';
|
||||
import { QuestionCircleOutlined } from '@vicons/antd';
|
||||
import { EditMenu } from '@/api/system/menu';
|
||||
import { newState } from '@/views/permission/menu/model';
|
||||
|
||||
const menuTypes = [
|
||||
{
|
||||
value: 1,
|
||||
label: '目录',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '菜单',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '按钮',
|
||||
},
|
||||
].map((s) => {
|
||||
return s;
|
||||
});
|
||||
|
||||
const switchStatusMap = [
|
||||
{
|
||||
value: 0,
|
||||
label: '关闭',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '开启',
|
||||
},
|
||||
].map((s) => {
|
||||
return s;
|
||||
});
|
||||
|
||||
const statusMap = [
|
||||
{
|
||||
value: 0,
|
||||
label: '禁用',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '启用',
|
||||
},
|
||||
].map((s) => {
|
||||
return s;
|
||||
});
|
||||
|
||||
const hiddenMap = [
|
||||
{
|
||||
value: 0,
|
||||
label: '否',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '是',
|
||||
},
|
||||
].map((s) => {
|
||||
return s;
|
||||
});
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CreateDrawer',
|
||||
components: {},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '添加顶级菜单',
|
||||
},
|
||||
optionTreeData: {
|
||||
type: Object || Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
emits: ['loadData'],
|
||||
setup(_props, context) {
|
||||
const message = useMessage();
|
||||
const formRef: any = ref(null);
|
||||
const state = reactive<any>({
|
||||
width: 700,
|
||||
isDrawer: false,
|
||||
subLoading: false,
|
||||
formParams: newState(null),
|
||||
placement: 'right',
|
||||
});
|
||||
const rules = {
|
||||
title: {
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
label: {
|
||||
required: true,
|
||||
message: '请输入标题',
|
||||
trigger: 'blur',
|
||||
},
|
||||
path: {
|
||||
required: false,
|
||||
message: '请输入路由地址',
|
||||
trigger: 'blur',
|
||||
validator: function (_rule: FormItemRule, value: any, callback: Function) {
|
||||
if (state.formParams.type != 3 && !value) {
|
||||
callback(new Error('请输入路由地址'));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function openDrawer(pid: number) {
|
||||
if (document.body.clientWidth < 700) {
|
||||
state.width = document.body.clientWidth;
|
||||
}
|
||||
state.isDrawer = true;
|
||||
state.formParams = newState(null);
|
||||
state.formParams.pid = pid;
|
||||
if (pid > 0) {
|
||||
state.formParams.type = 2;
|
||||
}
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
state.isDrawer = false;
|
||||
}
|
||||
|
||||
function formSubmit() {
|
||||
formRef.value.validate((errors) => {
|
||||
if (!errors) {
|
||||
state.subLoading = true;
|
||||
EditMenu({ ...state.formParams })
|
||||
.then(async (_res) => {
|
||||
state.subLoading = false;
|
||||
message.success('操作成功');
|
||||
handleReset();
|
||||
await context.emit('loadData');
|
||||
closeDrawer();
|
||||
})
|
||||
.catch((_e: Error) => {
|
||||
state.subLoading = false;
|
||||
});
|
||||
} else {
|
||||
message.error('请填写完整信息');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
formRef.value.restoreValidation();
|
||||
state.formParams = newState(null);
|
||||
}
|
||||
|
||||
// 处理选项更新
|
||||
function handleUpdateValue(
|
||||
value: string | number | Array<string | number> | null,
|
||||
_option: TreeSelectOption | null | Array<TreeSelectOption | null>
|
||||
) {
|
||||
state.formParams.pid = value;
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
formRef,
|
||||
rules,
|
||||
formSubmit,
|
||||
handleReset,
|
||||
openDrawer,
|
||||
closeDrawer,
|
||||
menuTypes,
|
||||
switchStatusMap,
|
||||
statusMap,
|
||||
hiddenMap,
|
||||
handleUpdateValue,
|
||||
QuestionCircleOutlined,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
84
web/src/views/permission/menu/addModal.vue
Normal file
84
web/src/views/permission/menu/addModal.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
:mask-closable="false"
|
||||
:show-icon="false"
|
||||
preset="dialog"
|
||||
transform-origin="center"
|
||||
title="添加菜单"
|
||||
:style="{
|
||||
width: dialogWidth,
|
||||
}"
|
||||
>
|
||||
<n-scrollbar style="max-height: 87vh" class="pr-5">
|
||||
<n-spin :show="loading" description="请稍候...">
|
||||
<EditForm
|
||||
ref="editFormRef"
|
||||
v-model:formParams="formParams"
|
||||
v-model:treeOption="treeOption"
|
||||
@reloadTable="reloadTable"
|
||||
@closeForm="closeForm"
|
||||
/>
|
||||
</n-spin>
|
||||
</n-scrollbar>
|
||||
<template #action>
|
||||
<n-space>
|
||||
<n-button @click="closeForm"> 关闭 </n-button>
|
||||
<n-button @click="handleReset"> 重置 </n-button>
|
||||
<n-button type="primary" :loading="formLoading" @click="formSubmit"> 确定添加 </n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { State, newState } from './model';
|
||||
import { adaModalWidth } from '@/utils/hotgo';
|
||||
import EditForm from '@/views/permission/menu/editForm.vue';
|
||||
|
||||
const emit = defineEmits(['reloadTable']);
|
||||
const formParams = ref<State>(newState(null));
|
||||
const treeOption = defineModel<any[]>('treeOption');
|
||||
const loading = ref(false);
|
||||
const showModal = ref(false);
|
||||
const editFormRef = ref();
|
||||
const formLoading = computed(() => {
|
||||
return editFormRef.value?.getFormLoading();
|
||||
});
|
||||
|
||||
const dialogWidth = computed(() => {
|
||||
return adaModalWidth(960);
|
||||
});
|
||||
|
||||
function reloadTable() {
|
||||
emit('reloadTable');
|
||||
}
|
||||
|
||||
function openModal(state: State) {
|
||||
showModal.value = true;
|
||||
formParams.value = newState(state);
|
||||
}
|
||||
|
||||
function formSubmit(e) {
|
||||
e.preventDefault();
|
||||
editFormRef.value.formSubmit();
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
editFormRef.value.handleReset();
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
showModal.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less"></style>
|
||||
417
web/src/views/permission/menu/editForm.vue
Normal file
417
web/src/views/permission/menu/editForm.vue
Normal file
@@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-form
|
||||
:model="formParams"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
label-placement="left"
|
||||
:label-width="100"
|
||||
class="py-4"
|
||||
>
|
||||
<n-grid cols="2 300:1 600:2">
|
||||
<n-gi>
|
||||
<n-form-item label="菜单类型" path="type">
|
||||
<n-radio-group
|
||||
v-model:value="formParams.type"
|
||||
name="type"
|
||||
:on-update:value="handleUpdateType"
|
||||
>
|
||||
<n-radio-button
|
||||
v-for="menuType in options.sys_menu_types"
|
||||
:key="menuType.value"
|
||||
:value="menuType.value"
|
||||
:label="menuType.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="上级目录" path="pid">
|
||||
<n-cascader
|
||||
clearable
|
||||
filterable
|
||||
:options="filterTreeOption"
|
||||
v-model:value="formParams.pid"
|
||||
value-field="key"
|
||||
label-field="label"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item :label="titleLabel" path="title">
|
||||
<n-input placeholder="请输入" v-model:value="formParams.title" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item path="icon">
|
||||
<IconSelector style="width: 100%" v-model:value="formParams.icon" option="antd" />
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
请填写图标编码，可以参考图标库，也可以不填使用默认图标
|
||||
</n-tooltip>
|
||||
菜单图标
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item path="path">
|
||||
<n-input placeholder="路由地址" v-model:value="formParams.path" />
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
请路由地址，如：user
|
||||
</n-tooltip>
|
||||
路由地址
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item path="name">
|
||||
<n-input placeholder="路由别名" v-model:value="formParams.name" />
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址 则会新窗口打开
|
||||
</n-tooltip>
|
||||
路由别名
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-grid cols="2 300:1 600:2" v-if="formParams.type !== 3">
|
||||
<n-gi v-if="formParams.type === 1">
|
||||
<n-form-item label="目录组件" path="component">
|
||||
<n-select
|
||||
v-if="formParams.type === 1"
|
||||
:options="options.sys_menu_component"
|
||||
v-model:value="formParams.component"
|
||||
placeholder="请选择目录组件"
|
||||
clearable
|
||||
tag
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
|
||||
<n-gi v-if="formParams.type === 2">
|
||||
<n-form-item label="组件路径" path="component">
|
||||
<n-input placeholder="组件路径" v-model:value="formParams.component" />
|
||||
<template #feedback> 填 Vue 组件路径，如：`/system/menu/menu` </template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi v-if="formParams.type === 1">
|
||||
<n-form-item label="默认跳转" path="redirect">
|
||||
<n-input placeholder="默认路由跳转地址" v-model:value="formParams.redirect" />
|
||||
<template #feedback>当目录下存在多个同级菜单时适用，如：`/system/menu/menu`</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-divider title-placement="left">功能设置</n-divider>
|
||||
|
||||
<n-grid cols="1">
|
||||
<n-gi>
|
||||
<n-form-item label="分配权限" path="permissions">
|
||||
<n-dynamic-tags
|
||||
v-model:value="permissions"
|
||||
:on-update:value="handleUpdatePermissions"
|
||||
type="success"
|
||||
/>
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
请填写API路径地址，可同时作用于server端接口鉴权和web端细粒度权限。一次添加多个权限用,分割
|
||||
</n-tooltip>
|
||||
分配权限
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<!-- <n-gi>-->
|
||||
<!-- <n-form-item label="权限名称" path="permissionName">-->
|
||||
<!-- <n-input placeholder="权限名称" v-model:value="formParams.permissionName" />-->
|
||||
<!-- <template #feedback>分配权限存在多个时，权限名称只绑定到第一个权限</template>-->
|
||||
<!-- </n-form-item>-->
|
||||
<!-- </n-gi>-->
|
||||
</n-grid>
|
||||
|
||||
<n-grid cols="2 300:1 600:2">
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item label="高亮路由" path="activeMenu">
|
||||
<n-input placeholder="高亮路由" v-model:value="formParams.activeMenu" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="菜单排序" path="sort">
|
||||
<n-input-number style="width: 100%" v-model:value="formParams.sort" clearable />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item label="内嵌链接" path="frameSrc">
|
||||
<n-input-group>
|
||||
<n-select
|
||||
:style="{ width: '33%', minWidth: '80px' }"
|
||||
:options="options.sys_switch"
|
||||
v-model:value="formParams.isFrame"
|
||||
/>
|
||||
<n-input
|
||||
placeholder="格式：http://www.xxx.cn 或 https://www.xxx.cn"
|
||||
v-model:value="formParams.frameSrc"
|
||||
/>
|
||||
</n-input-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="菜单状态" path="status">
|
||||
<n-radio-group v-model:value="formParams.status" name="status">
|
||||
<n-radio-button
|
||||
v-for="status in options.sys_normal_disable"
|
||||
:key="status.value"
|
||||
:value="status.value"
|
||||
:label="status.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-form-item label="高级选项" path="senior" v-if="formParams.type !== 3">
|
||||
<n-checkbox-group v-model:value="senior" :on-update:value="handleSeniorChecked">
|
||||
<n-space item-style="display: flex;">
|
||||
<n-checkbox value="keepAlive" label="缓存路由" />
|
||||
<n-checkbox value="hidden" label="隐藏菜单" />
|
||||
<n-checkbox value="alwaysShow" label="简化路由" />
|
||||
<n-checkbox value="affix" label="页签固定" />
|
||||
<n-checkbox value="isRoot" label="根路由" />
|
||||
</n-space>
|
||||
</n-checkbox-group>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item path="auth" style="margin-left: 100px" v-if="formParams.id > 0">
|
||||
<n-space>
|
||||
<n-button type="primary" :loading="loading" @click="formSubmit">保存修改 </n-button>
|
||||
<n-button @click="handleReset">重置</n-button>
|
||||
<n-button @click="handleDel">删除</n-button>
|
||||
</n-space>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { QuestionCircleOutlined } from '@vicons/antd';
|
||||
import IconSelector from '@/components/IconSelector/index.vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { newState, State, options } from '@/views/permission/menu/model';
|
||||
import { FormItemRule, useDialog, useMessage } from 'naive-ui';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { DeleteMenu, EditMenu } from '@/api/system/menu';
|
||||
import { findTreeNode } from '@/utils';
|
||||
|
||||
const rules = {
|
||||
title: {
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
label: {
|
||||
required: true,
|
||||
message: '请输入标题',
|
||||
trigger: 'blur',
|
||||
},
|
||||
path: {
|
||||
required: false,
|
||||
message: '请输入路由地址',
|
||||
trigger: 'blur',
|
||||
validator: function (_rule: FormItemRule, value: any, callback: Function) {
|
||||
if (formParams.value.type != 3 && !value) {
|
||||
callback(new Error('请输入路由地址'));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const emit = defineEmits(['reloadTable', 'closeForm']);
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const loading = ref(false);
|
||||
const formRef = ref();
|
||||
const formParams = defineModel<State>('formParams', { required: true });
|
||||
const treeOption = defineModel<any[]>('treeOption');
|
||||
const titleLabel = computed(() => {
|
||||
const type = formParams.value.type as number;
|
||||
if (type == 1) {
|
||||
return '目录名称';
|
||||
}
|
||||
if (type == 2) {
|
||||
return '菜单名称';
|
||||
}
|
||||
return '按钮名称';
|
||||
});
|
||||
|
||||
const filterTreeOption = computed(() => {
|
||||
const list = cloneDeep(treeOption.value) as any[];
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const item = list[i];
|
||||
if (item.id === formParams.value.id) {
|
||||
item.disabled = true;
|
||||
if (item.children) {
|
||||
setChildrenDisabled(item.children);
|
||||
}
|
||||
} else {
|
||||
if (item.children) {
|
||||
const foundChild = findItemById(item.children, formParams.value.id);
|
||||
if (foundChild) {
|
||||
foundChild.disabled = true;
|
||||
setChildrenDisabled(foundChild.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return list;
|
||||
});
|
||||
|
||||
const senior = computed(() => {
|
||||
let opts: string[] = [];
|
||||
if (formParams.value.keepAlive == 1) {
|
||||
opts.push('keepAlive');
|
||||
}
|
||||
if (formParams.value.hidden == 1) {
|
||||
opts.push('hidden');
|
||||
}
|
||||
if (formParams.value.alwaysShow == 1) {
|
||||
opts.push('alwaysShow');
|
||||
}
|
||||
if (formParams.value.affix == 1) {
|
||||
opts.push('affix');
|
||||
}
|
||||
if (formParams.value.isRoot == 1) {
|
||||
opts.push('isRoot');
|
||||
}
|
||||
return opts;
|
||||
});
|
||||
|
||||
function handleSeniorChecked(_: string, opt: { actionType: 'check' | 'uncheck'; value: string }) {
|
||||
if (opt.actionType == 'check') {
|
||||
formParams.value[opt.value] = 1;
|
||||
} else {
|
||||
formParams.value[opt.value] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function setChildrenDisabled(children: State[]) {
|
||||
if (!children) return;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const child = children[i];
|
||||
child.disabled = true;
|
||||
if (child.children) {
|
||||
setChildrenDisabled(child.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function findItemById(children: State[], id: number) {
|
||||
if (!children) {
|
||||
return null;
|
||||
}
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const item = children[i];
|
||||
if (item.id === id) {
|
||||
return item;
|
||||
}
|
||||
|
||||
if (item.children) {
|
||||
const child = findItemById(item.children, id);
|
||||
if (child) {
|
||||
return child;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getFormLoading() {
|
||||
return loading.value;
|
||||
}
|
||||
|
||||
function handleDel() {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: `您确定要删除 ` + formParams.value.title + ` 菜单吗?`,
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
DeleteMenu(formParams.value).then((_res) => {
|
||||
message.success('操作成功');
|
||||
formParams.value = newState(null);
|
||||
emit('reloadTable');
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
const item = findTreeNode(treeOption.value, formParams.value.id);
|
||||
formParams.value = newState(item);
|
||||
}
|
||||
|
||||
function formSubmit() {
|
||||
formRef.value.validate((errors: boolean) => {
|
||||
if (!errors) {
|
||||
loading.value = true;
|
||||
EditMenu(formParams.value)
|
||||
.then((_res) => {
|
||||
message.success('操作成功');
|
||||
emit('reloadTable');
|
||||
emit('closeForm');
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
message.error('请填写完整信息');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const permissions = computed(() => {
|
||||
if (formParams.value.permissions.length == 0) {
|
||||
return [];
|
||||
}
|
||||
return formParams.value.permissions.split(',');
|
||||
});
|
||||
|
||||
function handleUpdatePermissions(values: string[]) {
|
||||
formParams.value.permissions = Array.from(new Set(values)).join(',');
|
||||
}
|
||||
|
||||
function handleUpdateType(value: number) {
|
||||
formParams.value.type = value;
|
||||
if (value == 1) {
|
||||
formParams.value.component = null;
|
||||
} else {
|
||||
formParams.value.component = '';
|
||||
}
|
||||
|
||||
const item = findTreeNode(treeOption.value, formParams.value.id);
|
||||
if (item && item.type == value) {
|
||||
formParams.value.component = item.component;
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
handleReset,
|
||||
formSubmit,
|
||||
getFormLoading,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
@@ -1,11 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="n-layout-page-header">
|
||||
<div class="n-layout-page-header" v-if="!isModal">
|
||||
<n-card :bordered="false" title="菜单管理">
|
||||
在这里可以管理编辑系统下的所有菜单导航和分配相应的菜单权限
|
||||
</n-card>
|
||||
</div>
|
||||
<n-grid class="mt-4" cols="1 s:1 m:1 l:3 xl:3 2xl:3" responsive="screen" :x-gap="12">
|
||||
<n-grid
|
||||
:class="isModal ? '' : 'mt-4'"
|
||||
cols="1 s:1 m:1 l:3 xl:3 2xl:3"
|
||||
responsive="screen"
|
||||
:x-gap="12"
|
||||
>
|
||||
<n-gi span="1">
|
||||
<n-card :segmented="{ content: true }" :bordered="false" size="small">
|
||||
<template #header>
|
||||
@@ -24,7 +29,7 @@
|
||||
type="info"
|
||||
icon-placement="left"
|
||||
@click="openChildCreateDrawer"
|
||||
:disabled="!isEditMenu"
|
||||
:disabled="formParams.id == 0"
|
||||
>
|
||||
<template #icon>
|
||||
<div class="flex items-center">
|
||||
@@ -48,7 +53,7 @@
|
||||
</n-space>
|
||||
</template>
|
||||
<div class="w-full menu">
|
||||
<n-input type="input" v-model:value="pattern" placeholder="输入菜单名称搜索">
|
||||
<n-input type="text" v-model:value="pattern" placeholder="输入菜单名称搜索">
|
||||
<template #suffix>
|
||||
<n-icon size="18" class="cursor-pointer">
|
||||
<SearchOutlined />
|
||||
@@ -68,7 +73,7 @@
|
||||
checkable
|
||||
:virtual-scroll="true"
|
||||
:pattern="pattern"
|
||||
:data="treeData"
|
||||
:data="treeOption"
|
||||
:expandedKeys="expandedKeys"
|
||||
style="max-height: 650px; overflow: hidden"
|
||||
@update:selected-keys="selectedTree"
|
||||
@@ -87,540 +92,104 @@
|
||||
<FormOutlined />
|
||||
</n-icon>
|
||||
<span>编辑菜单{{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
|
||||
<!-- <span style="font-size: 14px">{{ treeItemTitle }}</span>-->
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<n-result
|
||||
v-show="!isEditMenu"
|
||||
v-show="formParams.id == 0"
|
||||
status="info"
|
||||
title="提示"
|
||||
description="从菜单列表中选择一项进行编辑"
|
||||
/>
|
||||
<n-form
|
||||
:model="formParams"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
label-placement="left"
|
||||
:label-width="100"
|
||||
v-if="isEditMenu"
|
||||
class="py-4"
|
||||
>
|
||||
<n-divider title-placement="left">基本设置</n-divider>
|
||||
|
||||
<n-grid cols="2 300:1 600:2">
|
||||
<n-gi>
|
||||
<n-form-item label="类型" path="type">
|
||||
<n-radio-group v-model:value="formParams.type" name="type">
|
||||
<n-radio-button
|
||||
v-for="menuType in menuTypes"
|
||||
:key="menuType.value"
|
||||
:value="menuType.value"
|
||||
:label="menuType.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="上级目录" path="pid">
|
||||
<n-tree-select
|
||||
filterable
|
||||
:options="optionTreeDataEdit"
|
||||
:value="formParams.pid"
|
||||
@update:value="handleUpdateValue"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-grid cols="2 300:1 600:2">
|
||||
<n-gi>
|
||||
<n-form-item
|
||||
:label="
|
||||
formParams.type === 1
|
||||
? '目录名称'
|
||||
: formParams.type === 2
|
||||
? '菜单名称'
|
||||
: '按钮名称'
|
||||
"
|
||||
path="title"
|
||||
>
|
||||
<n-input placeholder="请输入" v-model:value="formParams.title" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item path="icon">
|
||||
<IconSelector style="width: 100%" v-model:value="formParams.icon" option="antd" />
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
请填写图标编码，可以参考图标库，也可以不填使用默认图标
|
||||
</n-tooltip>
|
||||
菜单图标
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-grid cols="2 300:1 600:2">
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item path="path">
|
||||
<n-input placeholder="路由地址" v-model:value="formParams.path" />
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
请路由地址，如：user
|
||||
</n-tooltip>
|
||||
路由地址
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item path="name">
|
||||
<n-input placeholder="路由别名" v-model:value="formParams.name" />
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址
|
||||
则会新窗口打开
|
||||
</n-tooltip>
|
||||
路由别名
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-grid cols="2 300:1 600:2" v-if="formParams.type !== 3">
|
||||
<n-gi>
|
||||
<n-form-item label="组件路径" path="component">
|
||||
<n-input placeholder="组件路径" v-model:value="formParams.component" />
|
||||
<template #feedback>
|
||||
主目录填 `LAYOUT`;多级父目录填
|
||||
`ParentLayout`;页面填具体的组件路径，如：`/system/menu/menu`
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi v-if="formParams.type === 1">
|
||||
<n-form-item label="默认跳转" path="redirect">
|
||||
<n-input placeholder="默认路由跳转地址" v-model:value="formParams.redirect" />
|
||||
<template #feedback
|
||||
>默认跳转路由地址，如：`/system/menu/menu` 多级路由情况下适用
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-divider title-placement="left">功能设置</n-divider>
|
||||
|
||||
<n-grid cols="1 ">
|
||||
<n-gi>
|
||||
<n-form-item label="分配权限" path="permissions">
|
||||
<n-input
|
||||
:type="formParams.permissions.length > 30 ? 'textarea' : ''"
|
||||
placeholder="请输入分配权限，多个权限用,分割"
|
||||
v-model:value="formParams.permissions"
|
||||
/>
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
请填写API路由地址，可同时作用于服务端和web端。多个权限用,分割
|
||||
</n-tooltip>
|
||||
分配权限
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<!-- <n-gi>-->
|
||||
<!-- <n-form-item label="权限名称" path="permissionName">-->
|
||||
<!-- <n-input placeholder="权限名称" v-model:value="formParams.permissionName" />-->
|
||||
<!-- <template #feedback>分配权限存在多个时，权限名称只绑定到第一个权限</template>-->
|
||||
<!-- </n-form-item>-->
|
||||
<!-- </n-gi>-->
|
||||
</n-grid>
|
||||
|
||||
<n-grid cols="2 300:1 600:2">
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item label="高亮路由" path="activeMenu">
|
||||
<n-input placeholder="高亮路由" v-model:value="formParams.activeMenu" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="菜单排序" path="sort">
|
||||
<n-input-number style="width: 100%" v-model:value="formParams.sort" clearable />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-grid cols="4 300:1 400:2 600:3 800:4" v-if="formParams.type !== 3">
|
||||
<n-gi>
|
||||
<n-form-item label="根路由" path="isRoot">
|
||||
<n-radio-group v-model:value="formParams.isRoot" name="isRoot">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="页签固定" path="affix">
|
||||
<n-radio-group v-model:value="formParams.affix" name="affix">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="简化路由" path="alwaysShow">
|
||||
<n-radio-group v-model:value="formParams.alwaysShow" name="alwaysShow">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="缓存路由" path="keepAlive">
|
||||
<n-radio-group v-model:value="formParams.keepAlive" name="keepAlive">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="是否隐藏" path="hidden">
|
||||
<n-radio-group v-model:value="formParams.hidden" name="hidden">
|
||||
<n-radio-button
|
||||
v-for="hidden in hiddenMap"
|
||||
:key="hidden.value"
|
||||
:value="hidden.value"
|
||||
:label="hidden.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-grid cols="4 300:1 400:2 600:3 800:4">
|
||||
<n-gi>
|
||||
<n-form-item label="状态" path="status">
|
||||
<n-radio-group v-model:value="formParams.status" name="status">
|
||||
<n-radio-button
|
||||
v-for="status in statusMap"
|
||||
:key="status.value"
|
||||
:value="status.value"
|
||||
:label="status.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item label="是否外链" path="isFrame">
|
||||
<n-radio-group v-model:value="formParams.isFrame" name="isFrame">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item label="外部地址" path="frameSrc" v-show="formParams.isFrame === 1">
|
||||
<n-input placeholder="内联外部地址" v-model:value="formParams.frameSrc" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-form-item path="auth" style="margin-left: 100px">
|
||||
<n-space>
|
||||
<n-button type="primary" :loading="subLoading" @click="formSubmit"
|
||||
>保存修改
|
||||
</n-button>
|
||||
<n-button @click="handleReset">重置</n-button>
|
||||
<n-button @click="handleDel">删除</n-button>
|
||||
</n-space>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<EditForm
|
||||
v-if="formParams.id > 0"
|
||||
v-model:formParams="formParams"
|
||||
v-model:treeOption="treeOption"
|
||||
@reloadTable="loadTreeOption"
|
||||
/>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
<CreateDrawer
|
||||
ref="createDrawerRef"
|
||||
:title="drawerTitle"
|
||||
:optionTreeData="optionTreeData"
|
||||
@loadData="loadData"
|
||||
/>
|
||||
<AddModal ref="addModalRef" v-model:treeOption="treeOption" @reloadTable="loadTreeOption" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref, unref, computed } from 'vue';
|
||||
import { FormItemRule, useDialog, useMessage } from 'naive-ui';
|
||||
import {
|
||||
AlignLeftOutlined,
|
||||
FormOutlined,
|
||||
PlusOutlined,
|
||||
QuestionCircleOutlined,
|
||||
SearchOutlined,
|
||||
} from '@vicons/antd';
|
||||
import { DeleteMenu, EditMenu, getMenuList } from '@/api/system/menu';
|
||||
import { getTreeItem } from '@/utils';
|
||||
import CreateDrawer from './CreateDrawer.vue';
|
||||
import IconSelector from '@/components/IconSelector/index.vue';
|
||||
import { newState, State } from '@/views/permission/menu/model';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { computed, onMounted, ref, unref } from 'vue';
|
||||
import { AlignLeftOutlined, FormOutlined, PlusOutlined, SearchOutlined } from '@vicons/antd';
|
||||
import { getMenuList } from '@/api/system/menu';
|
||||
import { newState, State, loadOptions } from '@/views/permission/menu/model';
|
||||
import EditForm from '@/views/permission/menu/editForm.vue';
|
||||
import AddModal from '@/views/permission/menu/addModal.vue';
|
||||
|
||||
const menuTypes = [
|
||||
{
|
||||
value: 1,
|
||||
label: '目录',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '菜单',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '按钮',
|
||||
},
|
||||
].map((s) => {
|
||||
return s;
|
||||
});
|
||||
|
||||
const statusMap = [
|
||||
{
|
||||
value: 0,
|
||||
label: '禁用',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '启用',
|
||||
},
|
||||
].map((s) => {
|
||||
return s;
|
||||
});
|
||||
|
||||
const hiddenMap = [
|
||||
{
|
||||
value: 0,
|
||||
label: '否',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '是',
|
||||
},
|
||||
].map((s) => {
|
||||
return s;
|
||||
});
|
||||
|
||||
const rules = {
|
||||
title: {
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
label: {
|
||||
required: true,
|
||||
message: '请输入标题',
|
||||
trigger: 'blur',
|
||||
},
|
||||
path: {
|
||||
required: false,
|
||||
message: '请输入路由地址',
|
||||
trigger: 'blur',
|
||||
validator: function (_rule: FormItemRule, value: any, callback: Function) {
|
||||
if (formParams.type != 3 && !value) {
|
||||
callback(new Error('请输入路由地址'));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const formRef: any = ref(null);
|
||||
const createDrawerRef = ref();
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const treeData = ref([]);
|
||||
const loading = ref(true);
|
||||
const subLoading = ref(false);
|
||||
const isEditMenu = ref(false);
|
||||
const treeItemTitle = ref('');
|
||||
const addModalRef = ref();
|
||||
const loading = ref(false);
|
||||
const treeOption = ref([]);
|
||||
const pattern = ref('');
|
||||
const drawerTitle = ref('');
|
||||
const treeItemKey = ref([]);
|
||||
const expandedKeys = ref([]);
|
||||
const optionTreeData = ref<any>([]);
|
||||
const formParams = reactive<State>(newState(null));
|
||||
const optionTreeDataEdit = computed(() => {
|
||||
let list = cloneDeep(optionTreeData.value);
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const item = list[i];
|
||||
if (item.id === formParams.id) {
|
||||
item.disabled = true;
|
||||
setChildrenDisabled(item.children);
|
||||
} else {
|
||||
const foundChild = findItemById(item.children, formParams.id);
|
||||
if (foundChild) {
|
||||
foundChild.disabled = true;
|
||||
setChildrenDisabled(foundChild.children);
|
||||
}
|
||||
}
|
||||
const formParams = ref<State>(newState(null));
|
||||
const treeItemTitle = computed(() => {
|
||||
if (formParams.value.id > 0) {
|
||||
return formParams.value.label + ' #' + formParams.value.id;
|
||||
}
|
||||
return list;
|
||||
return '';
|
||||
});
|
||||
|
||||
function setChildrenDisabled(children) {
|
||||
if (!children) return;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const child = children[i];
|
||||
child.disabled = true;
|
||||
setChildrenDisabled(child.children);
|
||||
}
|
||||
}
|
||||
|
||||
function findItemById(children, id) {
|
||||
if (!children) return null;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const item = children[i];
|
||||
if (item.id === id) {
|
||||
return item;
|
||||
}
|
||||
const foundChild = findItemById(item.children, id);
|
||||
if (foundChild) {
|
||||
return foundChild;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const isModal = defineModel<boolean>('isModal', { default: false });
|
||||
|
||||
function openCreateDrawer() {
|
||||
drawerTitle.value = '添加菜单';
|
||||
const { openDrawer } = createDrawerRef.value;
|
||||
openDrawer(0);
|
||||
addModalRef.value.openModal(null);
|
||||
}
|
||||
|
||||
function openChildCreateDrawer() {
|
||||
drawerTitle.value = '添加菜单';
|
||||
const { openDrawer } = createDrawerRef.value;
|
||||
openDrawer(formParams.id);
|
||||
const state = newState(null);
|
||||
state.pid = formParams.value.id;
|
||||
state.type = formParams.value.type;
|
||||
addModalRef.value.openModal(state);
|
||||
}
|
||||
|
||||
function selectedTree(keys) {
|
||||
function selectedTree(keys: number[], option: any[]) {
|
||||
let item = null;
|
||||
if (keys.length) {
|
||||
const treeItem = getTreeItem(unref(treeData), keys[0]);
|
||||
treeItemKey.value = keys;
|
||||
treeItemTitle.value = treeItem.label + ' #' + treeItem.id;
|
||||
Object.assign(formParams, treeItem);
|
||||
isEditMenu.value = true;
|
||||
} else {
|
||||
isEditMenu.value = false;
|
||||
treeItemKey.value = [];
|
||||
treeItemTitle.value = '';
|
||||
item = option[0];
|
||||
}
|
||||
}
|
||||
|
||||
function handleDel() {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: `您确定要删除此菜单吗?`,
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
DeleteMenu({ ...formParams }).then(async (_res) => {
|
||||
message.success('操作成功');
|
||||
await loadData();
|
||||
});
|
||||
},
|
||||
onNegativeClick: () => {
|
||||
message.error('已取消');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
const treeItem = getTreeItem(unref(treeData), treeItemKey.value[0]);
|
||||
Object.assign(formParams, treeItem);
|
||||
}
|
||||
|
||||
function formSubmit() {
|
||||
formRef.value.validate((errors: boolean) => {
|
||||
if (!errors) {
|
||||
subLoading.value = true;
|
||||
EditMenu({ ...formParams })
|
||||
.then(async (_res) => {
|
||||
subLoading.value = false;
|
||||
message.success('操作成功');
|
||||
await loadData();
|
||||
})
|
||||
.catch((_e: Error) => {
|
||||
subLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
message.error('请填写完整信息');
|
||||
}
|
||||
});
|
||||
formParams.value = newState(item);
|
||||
}
|
||||
|
||||
function packHandle() {
|
||||
if (expandedKeys.value.length) {
|
||||
expandedKeys.value = [];
|
||||
} else {
|
||||
expandedKeys.value = unref(treeData).map((item: any) => item.key as string) as [];
|
||||
expandedKeys.value = unref(treeOption).map((item: any) => item.key as string) as [];
|
||||
}
|
||||
}
|
||||
|
||||
// 处理选项更新
|
||||
function handleUpdateValue(value) {
|
||||
formParams.pid = value as number;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadData();
|
||||
});
|
||||
|
||||
async function loadData() {
|
||||
const treeMenuList = await getMenuList();
|
||||
const keys = treeMenuList.list.map((item) => item.key);
|
||||
Object.assign(formParams, keys);
|
||||
treeData.value = [];
|
||||
treeData.value = treeMenuList.list;
|
||||
optionTreeData.value = [
|
||||
{
|
||||
id: 0,
|
||||
key: 0,
|
||||
label: '根目录',
|
||||
pid: 0,
|
||||
title: '根目录',
|
||||
type: 1,
|
||||
},
|
||||
];
|
||||
optionTreeData.value = optionTreeData.value.concat(treeMenuList.list);
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
function onExpandedKeys(keys) {
|
||||
expandedKeys.value = keys;
|
||||
}
|
||||
|
||||
// 加载菜单选项树
|
||||
function loadTreeOption() {
|
||||
const needLoading = treeOption.value.length == 0;
|
||||
if (needLoading) {
|
||||
loading.value = true;
|
||||
}
|
||||
|
||||
getMenuList()
|
||||
.then((res) => {
|
||||
if (res.list && res.list.length > 0) {
|
||||
treeOption.value = res.list;
|
||||
} else {
|
||||
treeOption.value = [];
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (needLoading) {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadTreeOption();
|
||||
loadOptions();
|
||||
});
|
||||
</script>
|
||||
|
||||
43
web/src/views/permission/menu/menuModal.vue
Normal file
43
web/src/views/permission/menu/menuModal.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-modal
|
||||
title="菜单管理"
|
||||
v-model:show="showModal"
|
||||
:block-scroll="false"
|
||||
:mask-closable="false"
|
||||
:show-icon="false"
|
||||
:on-after-leave="handleCancel"
|
||||
preset="card"
|
||||
:style="{
|
||||
width: dialogWidth,
|
||||
}"
|
||||
>
|
||||
<Menu v-model:isModal="isModal" />
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import Menu from './menu.vue';
|
||||
import { adaModalWidth } from '@/utils/hotgo';
|
||||
const showModal = ref(false);
|
||||
const isModal = ref(true);
|
||||
const dialogWidth = computed(() => {
|
||||
return adaModalWidth(1280);
|
||||
});
|
||||
|
||||
const emit = defineEmits(['reloadTable']);
|
||||
|
||||
function openModal() {
|
||||
showModal.value = true;
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
emit('reloadTable');
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
@@ -1,8 +1,11 @@
|
||||
import { ref } from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { Option } from '@/utils/hotgo';
|
||||
import { Dicts } from '@/api/dict/dict';
|
||||
|
||||
export interface State {
|
||||
id: number;
|
||||
pid: number;
|
||||
pid?: number;
|
||||
title: string;
|
||||
name: string;
|
||||
path: string;
|
||||
@@ -12,7 +15,7 @@ export interface State {
|
||||
redirect: string;
|
||||
permissions: string;
|
||||
permissionName: string;
|
||||
component: string;
|
||||
component?: string;
|
||||
alwaysShow: number;
|
||||
activeMenu: string;
|
||||
isRoot: number;
|
||||
@@ -23,9 +26,11 @@ export interface State {
|
||||
affix: number;
|
||||
status: number;
|
||||
sort: number;
|
||||
disabled: boolean;
|
||||
children?: State[];
|
||||
}
|
||||
|
||||
export const defaultState = {
|
||||
export const defaultState: State = {
|
||||
id: 0,
|
||||
pid: 0,
|
||||
title: '',
|
||||
@@ -37,22 +42,70 @@ export const defaultState = {
|
||||
redirect: '',
|
||||
permissions: '',
|
||||
permissionName: '',
|
||||
component: '',
|
||||
alwaysShow: 1,
|
||||
component: null,
|
||||
alwaysShow: 2,
|
||||
activeMenu: '',
|
||||
isRoot: 0,
|
||||
isRoot: 2,
|
||||
isFrame: 2,
|
||||
frameSrc: '',
|
||||
keepAlive: 0,
|
||||
hidden: 0,
|
||||
affix: 0,
|
||||
keepAlive: 2,
|
||||
hidden: 2,
|
||||
affix: 2,
|
||||
status: 1,
|
||||
sort: 10,
|
||||
disabled: false,
|
||||
children: null,
|
||||
};
|
||||
|
||||
export function newState(state: State | null): State {
|
||||
if (state !== null) {
|
||||
return cloneDeep(state);
|
||||
return defaultValueCheck(cloneDeep(state));
|
||||
}
|
||||
return cloneDeep(defaultState);
|
||||
return defaultValueCheck(cloneDeep(defaultState));
|
||||
}
|
||||
|
||||
// 默认值校正，主要为了解决历史数据格式不规范问题
|
||||
export function defaultValueCheck(state: State): State {
|
||||
if (state.pid < 1) {
|
||||
state.pid = null;
|
||||
}
|
||||
if (state.alwaysShow != 1) {
|
||||
state.alwaysShow = 2;
|
||||
}
|
||||
if (state.isRoot != 1) {
|
||||
state.isRoot = 2;
|
||||
}
|
||||
if (state.isFrame != 1) {
|
||||
state.isFrame = 2;
|
||||
}
|
||||
if (state.keepAlive != 1) {
|
||||
state.keepAlive = 2;
|
||||
}
|
||||
if (state.hidden != 1) {
|
||||
state.hidden = 2;
|
||||
}
|
||||
if (state.affix != 1) {
|
||||
state.affix = 2;
|
||||
}
|
||||
if (state.status != 1) {
|
||||
state.status = 2;
|
||||
}
|
||||
return state;
|
||||
}
|
||||
|
||||
// 字典数据选项
|
||||
export const options = ref({
|
||||
sys_menu_types: [] as Option[],
|
||||
sys_menu_component: [] as Option[],
|
||||
sys_normal_disable: [] as Option[],
|
||||
sys_switch: [] as Option[],
|
||||
});
|
||||
|
||||
// 加载字典数据选项
|
||||
export function loadOptions() {
|
||||
Dicts({
|
||||
types: ['sys_menu_types', 'sys_menu_component', 'sys_normal_disable', 'sys_switch'],
|
||||
}).then((res) => {
|
||||
options.value = res;
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user