refactor(菜单管理管理): 组件抽离
This commit is contained in:
sheng
@@ -134,10 +134,10 @@ const handleLoadNode = (node: Node, resolve: Function) => {
|
||||
/**
|
||||
* 部门的点击事件
|
||||
*/
|
||||
const handleNodeClick = (data: TreeItemType, node: Node) => {
|
||||
treeSelectDept.value = data;
|
||||
const handleNodeClick = (record: TreeItemType, node: Node) => {
|
||||
treeSelectDept.value = record;
|
||||
treeSelectNode.value = node;
|
||||
emit('treeClick', data.id);
|
||||
emit('treeClick', record.id);
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -120,10 +120,6 @@ onMounted(() => {
|
||||
.dept-left {
|
||||
position: relative;
|
||||
border-radius: 0 8px 8px 0;
|
||||
|
||||
.dl-nav {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dept-table {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {request} from '/@/utils/service';
|
||||
import {UserPageQuery, AddReq, DelReq, EditReq, InfoReq} from '@fast-crud/fast-crud';
|
||||
import { request } from '/@/utils/service';
|
||||
import { UserPageQuery, AddReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
|
||||
|
||||
export const apiPrefix = '/api/system/menu/';
|
||||
|
||||
@@ -34,9 +34,9 @@ export function UpdateObj(obj: EditReq) {
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(obj: DelReq) {
|
||||
export function DelObj(id: string | number) {
|
||||
return request({
|
||||
url: apiPrefix + obj.id + '/',
|
||||
url: apiPrefix + id + '/',
|
||||
method: 'delete',
|
||||
});
|
||||
}
|
||||
@@ -65,7 +65,7 @@ export function dragMenu(obj: AddReq) {
|
||||
});
|
||||
}
|
||||
|
||||
export function moveUp(obj: AddReq) {
|
||||
export function menuMoveUp(obj: AddReq) {
|
||||
return request({
|
||||
url: apiPrefix + 'move_up/',
|
||||
method: 'post',
|
||||
@@ -73,7 +73,7 @@ export function moveUp(obj: AddReq) {
|
||||
});
|
||||
}
|
||||
|
||||
export function moveDown(obj: AddReq) {
|
||||
export function menuMoveDown(obj: AddReq) {
|
||||
return request({
|
||||
url: apiPrefix + 'move_down/',
|
||||
method: 'post',
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { AddReq, DelReq, EditReq, dict, CreateCrudOptionsRet, CreateCrudOptionsProps, UserPageQuery } from '@fast-crud/fast-crud';
|
||||
import { AddReq, DelReq, EditReq, dict, CreateCrudOptionsRet, CreateCrudOptionsProps } from '@fast-crud/fast-crud';
|
||||
import * as api from './api';
|
||||
|
||||
import { request } from '/@/utils/service';
|
||||
//此处为crudOptions配置
|
||||
export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
const pageRequest = async (query: UserPageQuery) => {
|
||||
const pageRequest = async () => {
|
||||
if (context!.selectOptions.value.id) {
|
||||
return await api.GetList({ menu: context!.selectOptions.value.id } as any);
|
||||
} else {
|
||||
@@ -113,7 +113,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
|
||||
},
|
||||
},
|
||||
helper: {
|
||||
render(h) {
|
||||
render() {
|
||||
return <el-alert title="手动输入" type="warning" description="页面中按钮的名称或者自定义一个名称" />;
|
||||
},
|
||||
},
|
||||
@@ -131,7 +131,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
|
||||
rules: [{ required: true, message: '权限标识必填' }],
|
||||
placeholder: '输入权限标识',
|
||||
helper: {
|
||||
render(h) {
|
||||
render() {
|
||||
return <el-alert title="唯一值" type="warning" description="用于判断前端按钮权限或接口权限" />;
|
||||
},
|
||||
},
|
||||
@@ -190,7 +190,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
|
||||
},
|
||||
},
|
||||
helper: {
|
||||
render(h) {
|
||||
render() {
|
||||
return <el-alert title="请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/" type="warning" />;
|
||||
},
|
||||
},
|
||||
@@ -3,27 +3,26 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, defineProps, watch } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { useFs } from '@fast-crud/fast-crud';
|
||||
import { createCrudOptions } from './crud';
|
||||
import { MenuTreeItemType } from '../../types';
|
||||
|
||||
// 当前选择的菜单信息
|
||||
let selectOptions: any = ref({ name: null });
|
||||
const props = defineProps<{
|
||||
selectMenu: object;
|
||||
}>();
|
||||
|
||||
const { crudRef, crudBinding, crudExpose, context } = useFs({ createCrudOptions, context: { selectOptions } });
|
||||
const { doRefresh,setTableData } = crudExpose;
|
||||
const { doRefresh, setTableData } = crudExpose;
|
||||
|
||||
watch(props.selectMenu, (val: any) => {
|
||||
if (!val.is_catalog && val.id) {
|
||||
selectOptions.value = val;
|
||||
const handleRefreshTable = (record: MenuTreeItemType) => {
|
||||
if (!record.is_catalog && record.id) {
|
||||
selectOptions.value = record;
|
||||
doRefresh();
|
||||
}else{
|
||||
} else {
|
||||
//清空表格数据
|
||||
setTableData([])
|
||||
setTableData([]);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
defineExpose({ selectOptions });
|
||||
defineExpose({ selectOptions, handleRefreshTable });
|
||||
</script>
|
||||
203
web/src/views/system/menu/components/MenuFormCom/index.vue
Normal file
203
web/src/views/system/menu/components/MenuFormCom/index.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="menu-form-com">
|
||||
<div class="menu-form-alert">
|
||||
1.红色菜单代表状态禁用;<br />
|
||||
2.添加菜单，如果是目录，组件地址为空即可;<br />
|
||||
3.添加根节点菜单，父级ID为空即可;<br />
|
||||
4.支持拖拽菜单;
|
||||
</div>
|
||||
<el-form ref="formRef" :rules="rules" :model="menuFormData" label-width="80px" label-position="right">
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="menuFormData.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="父级菜单" prop="parent">
|
||||
<el-input v-model="menuFormData.parent" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<IconSelector clearable v-model="menuFormData.icon" />
|
||||
</el-form-item>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态">
|
||||
<el-switch v-model="menuFormData.status" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="menuFormData.status" label="侧边显示">
|
||||
<el-switch v-model="menuFormData.visible" width="60" inline-prompt active-text="显示" inactive-text="隐藏" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="菜单状态">
|
||||
<el-radio-group v-model="menuFormData.menu_status">
|
||||
<el-radio-button label="1">常规</el-radio-button>
|
||||
<el-radio-button label="2">目录</el-radio-button>
|
||||
<el-radio-button label="3">外链接</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="menuFormData.description" maxlength="200" show-word-limit type="textarea" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider></el-divider>
|
||||
|
||||
<div style="min-height: 184px">
|
||||
<el-form-item v-if="menuFormData.menu_status === '3'" label="Url">
|
||||
<el-input v-model="menuFormData.web_path" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="menuFormData.menu_status === '1'" label="路由地址">
|
||||
<el-input v-model="menuFormData.web_path" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="menuFormData.menu_status === '1'" label="组件名称">
|
||||
<el-input v-model="menuFormData.component_name" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="menuFormData.menu_status === '1'" label="组件地址">
|
||||
<el-autocomplete
|
||||
class="w-full"
|
||||
v-model="menuFormData.component"
|
||||
:fetch-suggestions="querySearch"
|
||||
:trigger-on-focus="false"
|
||||
clearable
|
||||
:debounce="100"
|
||||
placeholder="输入组件地址"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="menuFormData.menu_status === '1'" label="缓存">
|
||||
<el-switch v-model="menuFormData.cache" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider></el-divider>
|
||||
</el-form>
|
||||
|
||||
<div class="menu-form-btns">
|
||||
<el-button @click="handleSubmit" type="primary">保存</el-button>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
import { ElForm, FormRules } from 'element-plus';
|
||||
import IconSelector from '/@/components/iconSelector/index.vue';
|
||||
import { MenuFormDataType, MenuTreeItemType, ComponentFileItem } from '../../types';
|
||||
|
||||
interface IProps {
|
||||
initFormData: Partial<MenuTreeItemType> | null;
|
||||
}
|
||||
|
||||
const validateWebPath = (rule: any, value: string, callback: Function) => {
|
||||
let pattern = /^\/.*?/;
|
||||
if (!pattern.test(value)) {
|
||||
callback(new Error('请输入正确的地址'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
initFormData: () => null,
|
||||
});
|
||||
const emit = defineEmits(['drawerClose']);
|
||||
|
||||
const formRef = ref<InstanceType<typeof ElForm>>();
|
||||
|
||||
const rules = reactive<FormRules>({
|
||||
web_path: [{ validator: validateWebPath, trigger: 'blur' }],
|
||||
name: [{ required: true, message: '菜单名称必填', trigger: 'blur' }],
|
||||
parent: [{ required: true, message: '父级菜单必选', trigger: ['blur', 'change'] }],
|
||||
});
|
||||
|
||||
let menuFormData = reactive<MenuFormDataType>({
|
||||
parent: '',
|
||||
name: '',
|
||||
component: '',
|
||||
web_path: '',
|
||||
icon: '',
|
||||
cache: true,
|
||||
status: true,
|
||||
visible: true,
|
||||
menu_status: '1',
|
||||
component_name: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
const setMenuFormData = () => {
|
||||
if (props.initFormData?.id) {
|
||||
menuFormData.id = props.initFormData?.id || '';
|
||||
menuFormData.name = props.initFormData?.name || '';
|
||||
menuFormData.parent = props.initFormData?.parent || '';
|
||||
menuFormData.component = props.initFormData?.component || '';
|
||||
menuFormData.web_path = props.initFormData?.web_path || '';
|
||||
menuFormData.icon = props.initFormData?.icon || '';
|
||||
menuFormData.status = props.initFormData?.status || true;
|
||||
menuFormData.visible = props.initFormData?.visible || true;
|
||||
menuFormData.cache = props.initFormData?.cache || true;
|
||||
menuFormData.component_name = props.initFormData?.component_name || '';
|
||||
menuFormData.description = props.initFormData?.description || '';
|
||||
}
|
||||
};
|
||||
|
||||
const querySearch = (queryString: string, cb: any) => {
|
||||
const files: any = import.meta.glob('@views/**/*.vue');
|
||||
let fileLists: Array<any> = [];
|
||||
Object.keys(files).forEach((queryString: string) => {
|
||||
fileLists.push({
|
||||
label: queryString.replace(/(\.\/|\.vue)/g, ''),
|
||||
value: queryString.replace(/(\.\/|\.vue)/g, ''),
|
||||
});
|
||||
});
|
||||
const results = queryString ? fileLists.filter(createFilter(queryString)) : fileLists;
|
||||
// 统一去掉/src/views/前缀
|
||||
results.forEach((val) => {
|
||||
val.label = val.label.replace('/src/views/', '');
|
||||
val.value = val.value.replace('/src/views/', '');
|
||||
});
|
||||
cb(results);
|
||||
};
|
||||
|
||||
const createFilter = (queryString: string) => {
|
||||
return (file: ComponentFileItem) => {
|
||||
return file.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = () => {};
|
||||
|
||||
const handleCancel = (type: string = '') => {
|
||||
emit('drawerClose', type);
|
||||
formRef.value?.resetFields();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
setMenuFormData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-form-com {
|
||||
border-radius: 8px;
|
||||
margin: 10px;
|
||||
overflow-y: auto;
|
||||
.menu-form-alert {
|
||||
color: #fff;
|
||||
line-height: 24px;
|
||||
padding: 8px 16px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
.menu-form-btns {
|
||||
padding-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
314
web/src/views/system/menu/components/MenuTreeCom/index.vue
Normal file
314
web/src/views/system/menu/components/MenuTreeCom/index.vue
Normal file
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<el-input v-model="filterVal" :prefix-icon="Search" placeholder="请输入菜单名称" />
|
||||
<div class="menu-tree-com">
|
||||
<div class="mtc-head">
|
||||
<el-icon size="16" color="#606266" class="mtc-head-icon">
|
||||
<Menu />
|
||||
</el-icon>
|
||||
菜单列表
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
placement="right"
|
||||
content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;"
|
||||
>
|
||||
<el-icon size="16" color="var(--el-color-primary)" class="mtc-tooltip">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="treeData"
|
||||
:props="defaultTreeProps"
|
||||
:filter-node-method="filterNode"
|
||||
:load="handleTreeLoad"
|
||||
lazy
|
||||
:indent="45"
|
||||
@node-click="handleNodeClick"
|
||||
highlight-current
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<element-tree-line :node="node" :showLabelLine="false" :indent="32">
|
||||
<span v-if="data.status" class="text-center font-black font-normal">
|
||||
<SvgIcon :name="node.data.icon" color="var(--el-color-primary)" />
|
||||
{{ node.label }}
|
||||
</span>
|
||||
<span v-else class="text-center font-black text-red-700 font-normal"> <SvgIcon :name="node.data.icon" /> {{ node.label }} </span>
|
||||
</element-tree-line>
|
||||
</template>
|
||||
</el-tree>
|
||||
|
||||
<div class="mtc-tags">
|
||||
<el-tooltip effect="dark" content="新增">
|
||||
<el-icon size="16" @click="handleUpdateMenu('create')" class="mtc-tags-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" content="编辑">
|
||||
<el-icon size="16" @click="handleUpdateMenu('update')" class="mtc-tags-icon">
|
||||
<Edit />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" content="上移">
|
||||
<el-icon size="16" @click="handleSort('up')" class="mtc-tags-icon">
|
||||
<Top />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" content="下移">
|
||||
<el-icon size="16" @click="handleSort('down')" class="mtc-tags-icon">
|
||||
<Bottom />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" content="删除">
|
||||
<el-icon size="16" @click="handleDeleteMenu()" class="mtc-tags-icon">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, toRaw, watch, h } from 'vue';
|
||||
import { ElTree } from 'element-plus';
|
||||
import { getElementLabelLine } from 'element-tree-line';
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
import SvgIcon from '/@/components/svgIcon/index.vue';
|
||||
import { lazyLoadMenu, menuMoveUp, menuMoveDown } from '../../api';
|
||||
import { warningNotification } from '/@/utils/message';
|
||||
import { TreeTypes, MenuTreeItemType } from '../../types';
|
||||
import type Node from 'element-plus/es/components/tree/src/model/node';
|
||||
|
||||
interface IProps {
|
||||
treeData: TreeTypes[];
|
||||
}
|
||||
|
||||
const ElementTreeLine = getElementLabelLine(h);
|
||||
|
||||
const defaultTreeProps: any = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
icon: 'icon',
|
||||
isLeaf: (data: TreeTypes[], node: Node) => {
|
||||
if (node.data.is_catalog) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||
|
||||
withDefaults(defineProps<IProps>(), {
|
||||
treeData: () => [],
|
||||
});
|
||||
const emit = defineEmits(['treeClick', 'deleteDept', 'updateDept']);
|
||||
|
||||
let filterVal = ref('');
|
||||
let sortDisable = ref(false);
|
||||
let treeSelectMenu = ref<TreeTypes>({});
|
||||
let treeSelectNode = ref<Node | null>(null);
|
||||
|
||||
watch(filterVal, (val) => {
|
||||
treeRef.value!.filter(val);
|
||||
});
|
||||
|
||||
/**
|
||||
* 树的搜索事件
|
||||
*/
|
||||
const filterNode = (value: string, data: any) => {
|
||||
if (!value) return true;
|
||||
return toRaw(data).name.indexOf(value) !== -1;
|
||||
};
|
||||
|
||||
/**
|
||||
* 树的懒加载
|
||||
*/
|
||||
const handleTreeLoad = (node: Node, resolve: Function) => {
|
||||
if (node.level !== 0) {
|
||||
lazyLoadMenu({ parent: node.data.id }).then((res: APIResponseData) => {
|
||||
resolve(res.data);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 树的点击事件
|
||||
*/
|
||||
const handleNodeClick = (record: MenuTreeItemType, node: Node) => {
|
||||
treeSelectMenu.value = record;
|
||||
treeSelectNode.value = node;
|
||||
emit('treeClick', record);
|
||||
};
|
||||
|
||||
/**
|
||||
* 点击左侧编辑按钮
|
||||
*/
|
||||
const handleUpdateMenu = (type: string) => {
|
||||
if (type === 'update') {
|
||||
if (!treeSelectMenu.value.id) {
|
||||
warningNotification('请选择菜单！');
|
||||
return;
|
||||
}
|
||||
emit('updateDept', type, treeSelectMenu.value);
|
||||
} else {
|
||||
emit('updateDept', type);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除菜单
|
||||
*/
|
||||
const handleDeleteMenu = () => {
|
||||
if (!treeSelectMenu.value.id) {
|
||||
warningNotification('请选择菜单！');
|
||||
return;
|
||||
}
|
||||
emit('deleteDept', treeSelectMenu.value.id, () => {
|
||||
treeSelectMenu.value = {};
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 移动操作
|
||||
*/
|
||||
const handleSort = async (type: string) => {
|
||||
if (!treeSelectMenu.value.id) {
|
||||
warningNotification('请选择菜单！');
|
||||
return;
|
||||
}
|
||||
if (sortDisable.value) return;
|
||||
|
||||
const parentList = treeSelectNode.value?.parent.childNodes || [];
|
||||
const index = parentList.findIndex((i) => i.data.id === treeSelectMenu.value.id);
|
||||
const record = parentList.find((i) => i.data.id === treeSelectMenu.value.id);
|
||||
|
||||
if (type === 'up') {
|
||||
if (index === 0) return;
|
||||
parentList.splice(index - 1, 0, record as any);
|
||||
parentList.splice(index + 1, 1);
|
||||
sortDisable.value = true;
|
||||
await menuMoveUp({ menu_id: treeSelectMenu.value.id });
|
||||
sortDisable.value = false;
|
||||
}
|
||||
if (type === 'down') {
|
||||
parentList.splice(index + 2, 0, record as any);
|
||||
parentList.splice(index, 1);
|
||||
sortDisable.value = true;
|
||||
await menuMoveDown({ menu_id: treeSelectMenu.value.id });
|
||||
sortDisable.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-tree-com {
|
||||
.mtc-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: -8px;
|
||||
color: #606266;
|
||||
font-weight: 600;
|
||||
|
||||
.mtc-head-icon {
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.mtc-tooltip {
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.mtc-tags {
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
|
||||
.mtc-tags-icon {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.menu-tree-com {
|
||||
height: calc(100% - 60px);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon svg {
|
||||
display: none !important;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.el-tree-node__expand-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-tree-node__expand-icon {
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
margin-right: 5px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon.expanded {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon.is-leaf {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon:before {
|
||||
background: url('../../../../../assets/img/menu-tree-show-icon.png') no-repeat center / 100%;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon.expanded:before {
|
||||
background: url('../../../../../assets/img/menu-tree-hidden-icon.png') no-repeat center / 100%;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.el-tree .is-leaf.el-tree-node__expand-icon::before {
|
||||
display: block;
|
||||
background: none !important;
|
||||
content: '';
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +0,0 @@
|
||||
import * as api from './api';
|
||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from '@fast-crud/fast-crud';
|
||||
|
||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }: DelReq) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }: AddReq) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest,
|
||||
},
|
||||
columns: {},
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -3,322 +3,38 @@
|
||||
<el-row class="menu-el-row">
|
||||
<el-col :span="6">
|
||||
<div class="menu-box menu-left-box">
|
||||
<el-input v-model="filterText" :prefix-icon="Search" placeholder="请输入菜单名称" />
|
||||
<div class="menu-left-tree">
|
||||
<div class="mlt-head">
|
||||
<el-icon size="16" color="#606266" class="mlt-head-icon">
|
||||
<Menu />
|
||||
</el-icon>
|
||||
菜单列表
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
placement="right"
|
||||
content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;"
|
||||
>
|
||||
<el-icon size="16" color="var(--el-color-primary)" class="mlt-tooltip">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="data"
|
||||
:props="defaultTreeProps"
|
||||
:filter-node-method="filterNode"
|
||||
:load="loadNode"
|
||||
@node-drop="nodeDrop"
|
||||
lazy
|
||||
:indent="45"
|
||||
@node-click="handleNodeClick"
|
||||
highlight-current
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<element-tree-line :node="node" :showLabelLine="false" :indent="32">
|
||||
<span v-if="data.status" class="text-center font-black font-normal">
|
||||
<SvgIcon :name="node.data.icon" color="var(--el-color-primary)" />
|
||||
{{ node.label }}
|
||||
</span>
|
||||
<span v-else class="text-center font-black text-red-700 font-normal">
|
||||
<SvgIcon :name="node.data.icon" /> {{ node.label }}
|
||||
</span>
|
||||
</element-tree-line>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
|
||||
<div class="menu-left-tags">
|
||||
<el-tooltip effect="dark" content="新增">
|
||||
<el-icon size="16" @click="handleUpdateMenu('create')" class="mlt-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" content="编辑">
|
||||
<el-icon size="16" @click="handleUpdateMenu('update')" class="mlt-icon">
|
||||
<Edit />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" content="上移">
|
||||
<el-icon size="16" @click="handleSort('up')" class="mlt-icon">
|
||||
<Top />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" content="下移">
|
||||
<el-icon size="16" @click="handleSort('down')" class="mlt-icon">
|
||||
<Bottom />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" content="删除">
|
||||
<el-icon size="16" @click="handleDeleteMenu()" class="mlt-icon">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<MenuTreeCom :treeData="menuTreeData" @treeClick="handleTreeClick" @updateDept="handleUpdateMenu" @deleteDept="handleDeleteMenu" />
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="18">
|
||||
<div class="menu-box menu-right-box">
|
||||
<menuButton :select-menu="form" />
|
||||
<MenuButtonCom ref="menuButtonRef" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-drawer v-model="drawerVisible" title="菜单配置" direction="rtl" size="500px" :close-on-click-modal="false" :before-close="handleDrawerClose">
|
||||
<div class="menu-box menu-drawer-box">
|
||||
<div class="mcb-alert">
|
||||
1.红色菜单代表状态禁用;<br />
|
||||
2.添加菜单，如果是目录，组件地址为空即可;<br />
|
||||
3.添加根节点菜单，父级ID为空即可;<br />
|
||||
4.支持拖拽菜单;
|
||||
</div>
|
||||
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="formData.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="父级菜单" prop="parent">
|
||||
<el-input v-model="formData.parent" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<IconSelector clearable v-model="formData.icon" />
|
||||
</el-form-item>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态">
|
||||
<el-switch v-model="formData.show_status" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="formData.show_status" label="侧边显示">
|
||||
<el-switch v-model="formData.slider_show" width="60" inline-prompt active-text="显示" inactive-text="隐藏" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="菜单状态">
|
||||
<el-radio-group v-model="formData.menu_status">
|
||||
<el-radio-button label="1" class="aaa">常规</el-radio-button>
|
||||
<el-radio-button label="2">目录</el-radio-button>
|
||||
<el-radio-button label="3">外链接</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formData.remark" maxlength="200" show-word-limit type="textarea" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider></el-divider>
|
||||
|
||||
<div style="min-height: 184px">
|
||||
<el-form-item v-if="formData.menu_status === '3'" required label="Url" prop="web_path">
|
||||
<el-input v-model="formData.web_path" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="formData.menu_status === '1'" label="路由地址" prop="route_path">
|
||||
<el-input v-model="formData.route_path" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="formData.menu_status === '1'" label="组件名称" prop="route_name">
|
||||
<el-input v-model="formData.route_name" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="formData.menu_status === '1'" label="组件地址" prop="component">
|
||||
<el-autocomplete
|
||||
class="w-full"
|
||||
v-model="formData.component"
|
||||
:fetch-suggestions="querySearch"
|
||||
:trigger-on-focus="false"
|
||||
clearable
|
||||
:debounce="100"
|
||||
placeholder="输入组件地址"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="formData.menu_status === '1'" label="缓存">
|
||||
<el-switch v-model="formData.cache" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider></el-divider>
|
||||
</el-form>
|
||||
|
||||
<div class="menus-btns">
|
||||
<el-button @click="saveMenu()" type="primary">保存</el-button>
|
||||
<!-- <el-button @click="newMenu()" type="primary" round :disabled="!form.id">新建</el-button>
|
||||
<el-button @click="addChildMenu()" type="primary" round :disabled="!form.id">添加子级
|
||||
</el-button> -->
|
||||
<el-button @click="handleDrawerClose()">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<MenuFormCom v-if="drawerVisible" :initFormData="drawerFormData" @drawerClose="handleDrawerClose" />
|
||||
</el-drawer>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="menuPages">
|
||||
import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, h } from 'vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import XEUtils from 'xe-utils';
|
||||
import { ElForm, ElTree, FormRules, ElMessageBox } from 'element-plus';
|
||||
import { getElementLabelLine } from 'element-tree-line';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import MenuTreeCom from './components/MenuTreeCom/index.vue';
|
||||
import MenuButtonCom from './components/MenuButtonCom/index.vue';
|
||||
import MenuFormCom from './components/MenuFormCom/index.vue';
|
||||
import * as api from './api';
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
import { errorMessage, successMessage, warningMessage } from '../../../utils/message';
|
||||
import { FormTypes, TreeTypes, APIResponseData, ComponentFileItem } from './types';
|
||||
import type Node from 'element-plus/es/components/tree/src/model/node';
|
||||
import { successNotification } from '/@/utils/message';
|
||||
import { APIResponseData, MenuTreeItemType } from './types';
|
||||
|
||||
const menuButton = defineAsyncComponent(() => import('./components/menuButton/index.vue'));
|
||||
const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));
|
||||
const SvgIcon = defineAsyncComponent(() => import('/@/components/svgIcon/index.vue'));
|
||||
|
||||
const ElementTreeLine = getElementLabelLine(h);
|
||||
|
||||
const filterText = ref('');
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||
let menuButtonRef = ref<InstanceType<typeof MenuButtonCom> | null>(null);
|
||||
let menuTreeData = ref([]);
|
||||
let drawerVisible = ref(false);
|
||||
let treeSelectNode = ref<Node | null>(null);
|
||||
let sortDisable = ref(false);
|
||||
|
||||
let formData = reactive({
|
||||
name: '',
|
||||
parent: '',
|
||||
icon: '',
|
||||
show_status: true,
|
||||
slider_show: true,
|
||||
menu_status: '1',
|
||||
remark: '',
|
||||
component: '',
|
||||
web_path: '',
|
||||
route_path: '',
|
||||
route_name: '',
|
||||
cache: true,
|
||||
});
|
||||
|
||||
watch(filterText, (val) => {
|
||||
treeRef.value!.filter(val);
|
||||
});
|
||||
|
||||
const defaultTreeProps: any = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
icon: 'icon',
|
||||
isLeaf: (data: TreeTypes[], node: Node) => {
|
||||
if (node.data.is_catalog) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const validateWebPath = (rule: string, value: string, callback: Function) => {
|
||||
let pattern = /^\/.*?/;
|
||||
if (!pattern.test(value)) {
|
||||
callback(new Error('请输入正确的地址'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const filterNode = (value: string, data: any) => {
|
||||
if (!value) return true;
|
||||
return toRaw(data).name.indexOf(value) !== -1;
|
||||
};
|
||||
|
||||
// 懒加载
|
||||
const loadNode = (node: Node, resolve: (data: TreeTypes[]) => void) => {
|
||||
// @ts-ignore
|
||||
if (node.level !== 0) {
|
||||
// @ts-ignore
|
||||
api.lazyLoadMenu({ parent: node.data.id }).then((res: APIResponseData) => {
|
||||
resolve(res.data);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const nodeDrop = (draggingNode: Node, dropNode: Node) => {
|
||||
// @ts-ignore
|
||||
if (!dropNode.isLeaf) {
|
||||
// @ts-ignore
|
||||
api.dragMenu({ menu_id: draggingNode.data.id, parent_id: dropNode.data.id }).then((res: APIResponseData) => {
|
||||
successMessage(res.msg as string);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let data = ref([]);
|
||||
|
||||
let isAddNewMenu = ref(false); // 判断当前是新增菜单，还是更新保存当前菜单
|
||||
|
||||
let form: FormTypes<any> = reactive({
|
||||
id: '',
|
||||
parent: '',
|
||||
name: '',
|
||||
component: '',
|
||||
web_path: '',
|
||||
sort: 0,
|
||||
status: true,
|
||||
is_catalog: false,
|
||||
permission: '',
|
||||
icon: '',
|
||||
visible: true,
|
||||
cache: true,
|
||||
});
|
||||
|
||||
const rules = reactive<FormRules>({
|
||||
// @ts-ignore
|
||||
web_path: [{ validator: validateWebPath, trigger: 'blur' }],
|
||||
name: [{ required: true, message: '菜单名称必填', trigger: 'blur' }],
|
||||
parent: [{ required: true, message: '父级菜单必选', trigger: ['blur', 'change'] }],
|
||||
});
|
||||
|
||||
const formRef = ref<InstanceType<typeof ElForm>>();
|
||||
|
||||
const querySearch = (queryString: string, cb: any) => {
|
||||
const files: any = import.meta.glob('@views/**/*.vue');
|
||||
let fileLists: Array<any> = [];
|
||||
Object.keys(files).forEach((queryString: string) => {
|
||||
fileLists.push({
|
||||
label: queryString.replace(/(\.\/|\.vue)/g, ''),
|
||||
value: queryString.replace(/(\.\/|\.vue)/g, ''),
|
||||
});
|
||||
});
|
||||
const results = queryString ? fileLists.filter(createFilter(queryString)) : fileLists;
|
||||
// 统一去掉/src/views/前缀
|
||||
results.forEach((val) => {
|
||||
val.label = val.label.replace('/src/views/', '');
|
||||
val.value = val.value.replace('/src/views/', '');
|
||||
});
|
||||
cb(results);
|
||||
};
|
||||
|
||||
const createFilter = (queryString: string) => {
|
||||
return (file: ComponentFileItem) => {
|
||||
return file.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
|
||||
};
|
||||
};
|
||||
let drawerFormData = ref<Partial<MenuTreeItemType>>({});
|
||||
|
||||
const getData = () => {
|
||||
api.GetList({}).then((ret: APIResponseData) => {
|
||||
@@ -328,132 +44,52 @@ const getData = () => {
|
||||
children: 'children',
|
||||
strict: true,
|
||||
});
|
||||
data.value = result;
|
||||
menuTreeData.value = result;
|
||||
});
|
||||
};
|
||||
|
||||
const saveMenu = () => {
|
||||
formRef.value?.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (!isAddNewMenu.value) {
|
||||
// 保存菜单
|
||||
|
||||
form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
|
||||
api.UpdateObj(form).then((res: APIResponseData) => {
|
||||
successMessage(res.msg as string);
|
||||
getData();
|
||||
handleDrawerClose();
|
||||
});
|
||||
} else {
|
||||
// 新增菜单
|
||||
form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
|
||||
api.AddObj(form).then((res: APIResponseData) => {
|
||||
successMessage(res.msg as string);
|
||||
getData();
|
||||
handleDrawerClose();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
errorMessage('请填写检查表单');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const newMenu = () => {
|
||||
formRef.value?.resetFields();
|
||||
isAddNewMenu.value = true;
|
||||
handleDrawerClose();
|
||||
};
|
||||
|
||||
const addChildMenu = () => {
|
||||
let parentId = form.id;
|
||||
formRef.value?.resetFields();
|
||||
form.parent = parentId;
|
||||
isAddNewMenu.value = true;
|
||||
handleDrawerClose();
|
||||
};
|
||||
|
||||
const handleNodeClick = (record: any, node: Node) => {
|
||||
treeSelectNode.value = node;
|
||||
Object.keys(toRaw(data)).forEach((key: string) => {
|
||||
form[key] = record[key];
|
||||
});
|
||||
delete form.component_name;
|
||||
form.id = record.id;
|
||||
isAddNewMenu.value = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 点击左侧编辑按钮
|
||||
* 菜单的点击事件
|
||||
*/
|
||||
const handleUpdateMenu = (type: string) => {
|
||||
if (type === 'create') {
|
||||
drawerVisible.value = true;
|
||||
return;
|
||||
}
|
||||
if (!form.id) {
|
||||
warningMessage('请选择菜单！');
|
||||
return;
|
||||
const handleTreeClick = (record: MenuTreeItemType) => {
|
||||
menuButtonRef.value?.handleRefreshTable(record);
|
||||
};
|
||||
|
||||
/**
|
||||
* 部门的 新增 or 编辑 事件
|
||||
*/
|
||||
const handleUpdateMenu = (type: string, record?: MenuTreeItemType) => {
|
||||
if (type === 'update' && record) {
|
||||
drawerFormData.value = record;
|
||||
}
|
||||
drawerVisible.value = true;
|
||||
};
|
||||
const handleDrawerClose = () => {
|
||||
const handleDrawerClose = (type?: string) => {
|
||||
if (type === 'submit') {
|
||||
getData();
|
||||
}
|
||||
drawerVisible.value = false;
|
||||
drawerFormData.value = {};
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除菜单
|
||||
* 部门的删除事件
|
||||
*/
|
||||
const handleDeleteMenu = () => {
|
||||
if (!form.id) {
|
||||
warningMessage('请选择菜单！');
|
||||
return;
|
||||
}
|
||||
const handleDeleteMenu = (id: string, callback: Function) => {
|
||||
ElMessageBox.confirm('您确认删除该菜单项吗?', '温馨提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
api.DelObj(form).then((res: APIResponseData) => {
|
||||
successMessage(res.msg as string);
|
||||
}).then(async () => {
|
||||
const res: APIResponseData = await api.DelObj(id);
|
||||
callback();
|
||||
if (res?.code === 2000) {
|
||||
successNotification(res.msg as string);
|
||||
getData();
|
||||
handleDrawerClose();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 移动操作
|
||||
*/
|
||||
const handleSort = async (type: string) => {
|
||||
if (!form.id && treeSelectNode.value) {
|
||||
warningMessage('请选择菜单！');
|
||||
return;
|
||||
}
|
||||
|
||||
if (sortDisable.value) return;
|
||||
const parentList = treeSelectNode.value?.parent.childNodes || [];
|
||||
const index = parentList.findIndex((i) => i.data.id === form.id);
|
||||
const record = parentList.find((i) => i.data.id === form.id);
|
||||
|
||||
if (type === 'up') {
|
||||
if (index === 0) return;
|
||||
parentList.splice(index - 1, 0, record as any);
|
||||
parentList.splice(index + 1, 1);
|
||||
sortDisable.value = true;
|
||||
await api.moveUp({ menu_id: form.id });
|
||||
sortDisable.value = false;
|
||||
}
|
||||
if (type === 'down') {
|
||||
parentList.splice(index + 2, 0, record as any);
|
||||
parentList.splice(index, 1);
|
||||
sortDisable.value = true;
|
||||
await api.moveDown({ menu_id: form.id });
|
||||
sortDisable.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
@@ -482,135 +118,9 @@ onMounted(() => {
|
||||
position: relative;
|
||||
border-radius: 0 8px 8px 0;
|
||||
margin-right: 10px;
|
||||
|
||||
.mlt-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: -8px;
|
||||
color: #606266;
|
||||
font-weight: 600;
|
||||
|
||||
.mlt-head-icon {
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.mlt-tooltip {
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-left-tags {
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
|
||||
.mlt-icon {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-right-box {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.menus-btns {
|
||||
padding-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.menu-drawer-box {
|
||||
border-radius: 8px;
|
||||
margin: 0 10px;
|
||||
overflow-y: auto;
|
||||
|
||||
.mcb-alert {
|
||||
color: #fff;
|
||||
line-height: 24px;
|
||||
padding: 8px 16px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.font-normal {
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.menu-left-tree {
|
||||
height: calc(100% - 60px);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon svg {
|
||||
display: none !important;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.el-tree-node__expand-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-tree-node__expand-icon {
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
margin-right: 5px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon.expanded {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon.is-leaf {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon:before {
|
||||
background: url('../../../assets/img/menu-tree-show-icon.png') no-repeat center / 100%;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon.expanded:before {
|
||||
background: url('../../../assets/img/menu-tree-hidden-icon.png') no-repeat center / 100%;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.el-tree .is-leaf.el-tree-node__expand-icon::before {
|
||||
display: block;
|
||||
background: none !important;
|
||||
content: '';
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export interface TreeTypes {
|
||||
id: number;
|
||||
name: string;
|
||||
status: boolean;
|
||||
id?: number;
|
||||
name?: string;
|
||||
status?: boolean;
|
||||
children?: TreeTypes[];
|
||||
}
|
||||
|
||||
@@ -19,3 +19,44 @@ export interface ComponentFileItem {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface MenuTreeItemType {
|
||||
id: number | string;
|
||||
modifier_name: string;
|
||||
creator_name: string;
|
||||
create_datetime: string;
|
||||
update_datetime: string;
|
||||
menuPermission: string[];
|
||||
hasChild: boolean;
|
||||
description: string;
|
||||
modifier: string;
|
||||
dept_belong_id: string;
|
||||
icon: string;
|
||||
name: string;
|
||||
sort: number;
|
||||
is_link: boolean;
|
||||
is_catalog: boolean;
|
||||
web_path: string;
|
||||
component: string;
|
||||
component_name: string;
|
||||
status: boolean;
|
||||
cache: boolean;
|
||||
visible: boolean;
|
||||
creator: string;
|
||||
parent: number | string;
|
||||
}
|
||||
|
||||
export interface MenuFormDataType {
|
||||
id?: number | string;
|
||||
parent: number | string;
|
||||
name: string;
|
||||
component: string;
|
||||
web_path: string;
|
||||
icon: string;
|
||||
cache: boolean;
|
||||
status: boolean;
|
||||
visible: boolean;
|
||||
menu_status: string;
|
||||
component_name: string;
|
||||
description: string;
|
||||
}
|
||||
Reference in New Issue
Block a user