页面美化：登陆页面优化
This commit is contained in:
sheng
@@ -40,6 +40,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="login-authorization">
|
||||||
|
<p>Copyright © 2021-2022 django-vue-admin.com 版权所有</p>
|
||||||
|
<p class="la-other">
|
||||||
|
<a href="https://beian.miit.gov.cn" target="_blank">晋ICP备18005113号-3</a>
|
||||||
|
|
|
||||||
|
<a href="https://django-vue-admin.com" target="_blank">帮助</a>
|
||||||
|
|
|
||||||
|
<a href="#">隐私</a>
|
||||||
|
|
|
||||||
|
<a href="#">条款</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -101,7 +114,7 @@ onMounted(() => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
span {
|
span {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
font-size: 28px;
|
font-size: 20px;
|
||||||
color: #26a59a;
|
color: #26a59a;
|
||||||
}
|
}
|
||||||
.login-left-logo-text-msg {
|
.login-left-logo-text-msg {
|
||||||
@@ -251,5 +264,20 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.login-authorization {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 50px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
text-align: center;
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #409eff;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,137 +1,220 @@
|
|||||||
<template>
|
<template>
|
||||||
<fs-page>
|
<fs-page>
|
||||||
<splitpanes>
|
<el-row class="s-el-row">
|
||||||
<pane max-size="20" min-size="16">
|
<el-col :span="5">
|
||||||
<el-card :body-style="{ height: '100%' }">
|
<div class="menu-box menu-left-box">
|
||||||
<p class="font-mono font-black text-center text-xl pb-5">
|
<p class="font-mono font-black text-center text-xl pb-5">
|
||||||
菜单列表
|
菜单列表
|
||||||
<el-tooltip effect="dark" :content="content" placement="right">
|
<el-tooltip effect="dark" :content="content" placement="right">
|
||||||
<el-icon>
|
<el-icon>
|
||||||
<QuestionFilled/>
|
<QuestionFilled />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</p>
|
</p>
|
||||||
<el-input v-model="filterText" :placeholder="placeholder"/>
|
<el-input v-model="filterText" :placeholder="placeholder" />
|
||||||
<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data"
|
<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="treeProps"
|
||||||
:props="treeProps"
|
:filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag" :allow-drop="allowDrop"
|
||||||
:filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag"
|
@node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable @node-click="handleNodeClick">
|
||||||
:allow-drop="allowDrop"
|
<template #default="{ node, data }">
|
||||||
@node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable
|
|
||||||
@node-click="handleNodeClick">
|
|
||||||
<template #default="{ node, data }">
|
|
||||||
<span v-if="data.status" class="text-center font-black font-normal">
|
<span v-if="data.status" class="text-center font-black font-normal">
|
||||||
<SvgIcon :name="node.data.icon"/> {{ node.label }}
|
<SvgIcon :name="node.data.icon" /> {{ node.label }}
|
||||||
</span>
|
</span>
|
||||||
<span v-else class="text-center font-black text-red-700 font-normal">
|
<span v-else class="text-center font-black text-red-700 font-normal">
|
||||||
<SvgIcon :name="node.data.icon"/> {{ node.label }}
|
<SvgIcon :name="node.data.icon" /> {{ node.label }}
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-tree>
|
</el-tree>
|
||||||
</el-card>
|
</div>
|
||||||
</pane>
|
</el-col>
|
||||||
<pane min-size="30">
|
<el-col :span="9">
|
||||||
<el-card :body-style="{ height: '100%' }">
|
<div class="menu-box menu-center-box">
|
||||||
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px"
|
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
|
||||||
label-position="right">
|
<el-alert :title="content" type="success" effect="dark" :closable="false" center />
|
||||||
<el-alert :title="content" type="success" effect="dark" :closable="false" center/>
|
<el-divider>
|
||||||
<el-divider>
|
<strong>菜单配置</strong>
|
||||||
<strong>菜单配置</strong>
|
</el-divider>
|
||||||
</el-divider>
|
<el-form-item label="菜单ID" prop="id">
|
||||||
<el-form-item label="菜单ID" prop="id">
|
<el-input v-model="form.id" disabled />
|
||||||
<el-input v-model="form.id" disabled/>
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item label="父级ID" prop="parent">
|
||||||
<el-form-item label="父级ID" prop="parent">
|
<el-input v-model="form.parent" />
|
||||||
<el-input v-model="form.parent"/>
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item required label="菜单名称" prop="name">
|
||||||
<el-form-item required label="菜单名称" prop="name">
|
<el-input v-model="form.name" />
|
||||||
<el-input v-model="form.name"/>
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item label="组件地址" prop="component">
|
||||||
<el-form-item label="组件地址" prop="component">
|
<el-autocomplete class="w-full" v-model="form.component" :fetch-suggestions="querySearch"
|
||||||
<el-autocomplete class="w-full" v-model="form.component"
|
:trigger-on-focus="false" clearable debounce="100" placeholder="输入组件地址" />
|
||||||
:fetch-suggestions="querySearch" :trigger-on-focus="false"
|
</el-form-item>
|
||||||
clearable
|
<el-form-item required label="Url" prop="web_path">
|
||||||
debounce="100"
|
<el-input v-model="form.web_path" />
|
||||||
placeholder="输入组件地址"/>
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item label="排序" prop="sort">
|
||||||
<el-form-item required label="Url" prop="web_path">
|
<el-input-number v-model="form.sort" controls-position="right" />
|
||||||
<el-input v-model="form.web_path"/>
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item label="状态">
|
||||||
<el-form-item label="排序" prop="sort">
|
<el-radio-group v-model="form.status">
|
||||||
<el-input-number v-model="form.sort" controls-position="right"/>
|
<el-radio :label="true">启用</el-radio>
|
||||||
</el-form-item>
|
<el-radio :label="false">禁用</el-radio>
|
||||||
<el-form-item label="状态">
|
</el-radio-group>
|
||||||
<el-radio-group v-model="form.status">
|
</el-form-item>
|
||||||
<el-radio :label="true">启用</el-radio>
|
<el-form-item label="侧边可见">
|
||||||
<el-radio :label="false">禁用</el-radio>
|
<el-radio-group v-model="form.visible">
|
||||||
</el-radio-group>
|
<el-radio :label="true">启用</el-radio>
|
||||||
</el-form-item>
|
<el-radio :label="false">禁用</el-radio>
|
||||||
<el-form-item label="侧边可见">
|
</el-radio-group>
|
||||||
<el-radio-group v-model="form.visible">
|
</el-form-item>
|
||||||
<el-radio :label="true">启用</el-radio>
|
<el-form-item label="缓存">
|
||||||
<el-radio :label="false">禁用</el-radio>
|
<el-radio-group v-model="form.cache">
|
||||||
</el-radio-group>
|
<el-radio :label="true">启用</el-radio>
|
||||||
</el-form-item>
|
<el-radio :label="false">禁用</el-radio>
|
||||||
<el-form-item label="缓存">
|
</el-radio-group>
|
||||||
<el-radio-group v-model="form.cache">
|
</el-form-item>
|
||||||
<el-radio :label="true">启用</el-radio>
|
<el-form-item label="图标" prop="icon">
|
||||||
<el-radio :label="false">禁用</el-radio>
|
<IconSelector clearable v-model="form.icon" />
|
||||||
</el-radio-group>
|
</el-form-item>
|
||||||
</el-form-item>
|
</el-form>
|
||||||
<el-form-item label="图标" prop="icon">
|
<el-divider></el-divider>
|
||||||
<IconSelector clearable v-model="form.icon"/>
|
<div class="menus-btns">
|
||||||
</el-form-item>
|
<el-button @click="saveMenu()" type="primary" round>保存</el-button>
|
||||||
</el-form>
|
<el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button>
|
||||||
<el-divider></el-divider>
|
<el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级
|
||||||
<div>
|
</el-button>
|
||||||
<el-button @click="saveMenu()" type="primary" round>保存</el-button>
|
<el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单
|
||||||
<el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button>
|
</el-button>
|
||||||
<el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级
|
</div>
|
||||||
</el-button>
|
</div>
|
||||||
<!-- <el-button @click="addSameLevelMenu()" type="warning" round>添加同级</el-button>-->
|
</el-col>
|
||||||
<el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单
|
<el-col :span="10">
|
||||||
</el-button>
|
<div class="menu-box menu-right-box">
|
||||||
</div>
|
<menuButton :select-menu="form" />
|
||||||
</el-card>
|
</div>
|
||||||
</pane>
|
</el-col>
|
||||||
<pane min-size="30">
|
</el-row>
|
||||||
<el-card :body-style="{ height: '100%' }">
|
<!-- <splitpanes>
|
||||||
<menuButton :select-menu="form"/>
|
<pane max-size="30" min-size="30">
|
||||||
</el-card>
|
<el-card :body-style="{ height: '100%' }">
|
||||||
</pane>
|
<p class="font-mono font-black text-center text-xl pb-5">
|
||||||
</splitpanes>
|
菜单列表
|
||||||
</fs-page>
|
<el-tooltip effect="dark" :content="content" placement="right">
|
||||||
|
<el-icon>
|
||||||
|
<QuestionFilled />
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
</p>
|
||||||
|
<el-input v-model="filterText" :placeholder="placeholder" />
|
||||||
|
<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="treeProps"
|
||||||
|
:filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag" :allow-drop="allowDrop"
|
||||||
|
@node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable @node-click="handleNodeClick">
|
||||||
|
<template #default="{ node, data }">
|
||||||
|
<span v-if="data.status" class="text-center font-black font-normal">
|
||||||
|
<SvgIcon :name="node.data.icon" /> {{ node.label }}
|
||||||
|
</span>
|
||||||
|
<span v-else class="text-center font-black text-red-700 font-normal">
|
||||||
|
<SvgIcon :name="node.data.icon" /> {{ node.label }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
|
</el-card>
|
||||||
|
</pane>
|
||||||
|
<pane min-size="30">
|
||||||
|
<el-card :body-style="{ height: '100%' }">
|
||||||
|
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
|
||||||
|
<el-alert :title="content" type="success" effect="dark" :closable="false" center />
|
||||||
|
<el-divider>
|
||||||
|
<strong>菜单配置</strong>
|
||||||
|
</el-divider>
|
||||||
|
<el-form-item label="菜单ID" prop="id">
|
||||||
|
<el-input v-model="form.id" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="父级ID" prop="parent">
|
||||||
|
<el-input v-model="form.parent" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item required label="菜单名称" prop="name">
|
||||||
|
<el-input v-model="form.name" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="组件地址" prop="component">
|
||||||
|
<el-autocomplete class="w-full" v-model="form.component" :fetch-suggestions="querySearch"
|
||||||
|
:trigger-on-focus="false" clearable debounce="100" placeholder="输入组件地址" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item required label="Url" prop="web_path">
|
||||||
|
<el-input v-model="form.web_path" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="排序" prop="sort">
|
||||||
|
<el-input-number v-model="form.sort" controls-position="right" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态">
|
||||||
|
<el-radio-group v-model="form.status">
|
||||||
|
<el-radio :label="true">启用</el-radio>
|
||||||
|
<el-radio :label="false">禁用</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="侧边可见">
|
||||||
|
<el-radio-group v-model="form.visible">
|
||||||
|
<el-radio :label="true">启用</el-radio>
|
||||||
|
<el-radio :label="false">禁用</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="缓存">
|
||||||
|
<el-radio-group v-model="form.cache">
|
||||||
|
<el-radio :label="true">启用</el-radio>
|
||||||
|
<el-radio :label="false">禁用</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="图标" prop="icon">
|
||||||
|
<IconSelector clearable v-model="form.icon" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<div class="menus-btns">
|
||||||
|
<el-button @click="saveMenu()" type="primary" round>保存</el-button>
|
||||||
|
<el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button>
|
||||||
|
<el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</pane>
|
||||||
|
<pane min-size="30">
|
||||||
|
<el-card :body-style="{ height: '100%' }">
|
||||||
|
<menuButton :select-menu="form" />
|
||||||
|
</el-card>
|
||||||
|
</pane>
|
||||||
|
</splitpanes> -->
|
||||||
|
</fs-page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup name="menu">
|
<script lang="ts" setup name="menu">
|
||||||
import {Splitpanes, Pane} from 'splitpanes';
|
import { Splitpanes, Pane } from 'splitpanes';
|
||||||
import 'splitpanes/dist/splitpanes.css';
|
import 'splitpanes/dist/splitpanes.css';
|
||||||
import * as api from './api';
|
import * as api from './api';
|
||||||
import * as menuButoonApi from './components/menuButton/api';
|
import * as menuButoonApi from './components/menuButton/api';
|
||||||
import {ElForm, ElTree, FormRules, ElMessageBox} from 'element-plus';
|
import { ElForm, ElTree, FormRules, ElMessageBox } from 'element-plus';
|
||||||
import {ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, nextTick, shallowRef, onActivated} from 'vue';
|
import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, nextTick, shallowRef, onActivated } from 'vue';
|
||||||
import XEUtils from 'xe-utils';
|
import XEUtils from 'xe-utils';
|
||||||
import {errorMessage, successMessage} from '../../../utils/message';
|
import { errorMessage, successMessage } from '../../../utils/message';
|
||||||
|
|
||||||
interface Tree {
|
interface Tree {
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
status: boolean;
|
status: boolean;
|
||||||
children?: Tree[];
|
children?: Tree[];
|
||||||
}
|
}
|
||||||
|
|
||||||
interface APIResponseData {
|
interface APIResponseData {
|
||||||
code?: number;
|
code?: number;
|
||||||
data: [];
|
data: [];
|
||||||
msg?: string;
|
msg?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Form<T> {
|
interface Form<T> {
|
||||||
[key: string]: T;
|
[key: string]: T;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ComponentFileItem {
|
interface ComponentFileItem {
|
||||||
value: string;
|
value: string;
|
||||||
label: string;
|
label: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 引入组件
|
// 引入组件
|
||||||
@@ -143,74 +226,74 @@ const filterText = ref('');
|
|||||||
const treeRef = ref<InstanceType<typeof ElTree>>();
|
const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||||
|
|
||||||
const treeProps = {
|
const treeProps = {
|
||||||
children: 'children',
|
children: 'children',
|
||||||
label: 'name',
|
label: 'name',
|
||||||
icon: 'icon',
|
icon: 'icon',
|
||||||
isLeaf: (data: Tree[], node: Node) => {
|
isLeaf: (data: Tree[], node: Node) => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
if (node.data.is_catalog) {
|
if (node.data.is_catalog) {
|
||||||
return false;
|
return false;
|
||||||
} else {
|
} else {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const validateWebPath = (rule: string, value: string, callback: Function) => {
|
const validateWebPath = (rule: string, value: string, callback: Function) => {
|
||||||
let pattern = /^\/.*?/;
|
let pattern = /^\/.*?/;
|
||||||
if (!pattern.test(value)) {
|
if (!pattern.test(value)) {
|
||||||
callback(new Error('请输入正确的地址'));
|
callback(new Error('请输入正确的地址'));
|
||||||
} else {
|
} else {
|
||||||
callback();
|
callback();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
watch(filterText, (val) => {
|
watch(filterText, (val) => {
|
||||||
treeRef.value!.filter(val);
|
treeRef.value!.filter(val);
|
||||||
});
|
});
|
||||||
|
|
||||||
const filterNode = (value: string, data: Tree) => {
|
const filterNode = (value: string, data: Tree) => {
|
||||||
if (!value) return true;
|
if (!value) return true;
|
||||||
return toRaw(data).name.indexOf(value) !== -1;
|
return toRaw(data).name.indexOf(value) !== -1;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 懒加载
|
// 懒加载
|
||||||
const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
|
const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
if (node.level !== 0) {
|
if (node.level !== 0) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
api.lazyLoadMenu({parent: node.data.id}).then((res: APIResponseData) => {
|
api.lazyLoadMenu({ parent: node.data.id }).then((res: APIResponseData) => {
|
||||||
resolve(res.data);
|
resolve(res.data);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 判断是否可以拖动
|
// 判断是否可以拖动
|
||||||
const allowDrag = (node: Node) => {
|
const allowDrag = (node: Node) => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
if (node.data.is_catalog) {
|
if (node.data.is_catalog) {
|
||||||
return false;
|
return false;
|
||||||
} else {
|
} else {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 判断是否可以被放置
|
// 判断是否可以被放置
|
||||||
const allowDrop = (draggingNode: Node, dropNode: Node, type: string) => {
|
const allowDrop = (draggingNode: Node, dropNode: Node, type: string) => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
if (!dropNode.isLeaf) {
|
if (!dropNode.isLeaf) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const nodeDrop = (draggingNode: Node, dropNode: Node, dropType: string, event: any) => {
|
const nodeDrop = (draggingNode: Node, dropNode: Node, dropType: string, event: any) => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
if (!dropNode.isLeaf) {
|
if (!dropNode.isLeaf) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
api.dragMenu({menu_id: draggingNode.data.id, parent_id: dropNode.data.id}).then((res: APIResponseData) => {
|
api.dragMenu({ menu_id: draggingNode.data.id, parent_id: dropNode.data.id }).then((res: APIResponseData) => {
|
||||||
successMessage(res.msg as string);
|
successMessage(res.msg as string);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let data = ref([]);
|
let data = ref([]);
|
||||||
@@ -227,18 +310,18 @@ const content = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
let form: Form<any> = reactive({
|
let form: Form<any> = reactive({
|
||||||
id: '',
|
id: '',
|
||||||
parent: '',
|
parent: '',
|
||||||
name: '',
|
name: '',
|
||||||
component: '',
|
component: '',
|
||||||
web_path: '',
|
web_path: '',
|
||||||
sort: '',
|
sort: '',
|
||||||
status: true,
|
status: true,
|
||||||
is_catalog: false,
|
is_catalog: false,
|
||||||
permission: '',
|
permission: '',
|
||||||
icon: '',
|
icon: '',
|
||||||
visible: true,
|
visible: true,
|
||||||
cache: true,
|
cache: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
let menuPermissonList = ref([]);
|
let menuPermissonList = ref([]);
|
||||||
@@ -246,155 +329,179 @@ let menuPermissonList = ref([]);
|
|||||||
const formRef = ref<InstanceType<typeof ElForm>>();
|
const formRef = ref<InstanceType<typeof ElForm>>();
|
||||||
|
|
||||||
const querySearch = (queryString: string, cb: any) => {
|
const querySearch = (queryString: string, cb: any) => {
|
||||||
const files: any = import.meta.glob('@views/**/*.vue');
|
const files: any = import.meta.glob('@views/**/*.vue');
|
||||||
let fileLists: Array<any> = [];
|
let fileLists: Array<any> = [];
|
||||||
Object.keys(files).forEach((queryString: string) => {
|
Object.keys(files).forEach((queryString: string) => {
|
||||||
fileLists.push({
|
fileLists.push({
|
||||||
label: queryString.replace(/(\.\/|\.vue)/g, ''),
|
label: queryString.replace(/(\.\/|\.vue)/g, ''),
|
||||||
value: queryString.replace(/(\.\/|\.vue)/g, ''),
|
value: queryString.replace(/(\.\/|\.vue)/g, ''),
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
const results = queryString ? fileLists.filter(createFilter(queryString)) : fileLists;
|
const results = queryString ? fileLists.filter(createFilter(queryString)) : fileLists;
|
||||||
// 统一去掉/src/views/前缀
|
// 统一去掉/src/views/前缀
|
||||||
results.forEach((val) => {
|
results.forEach((val) => {
|
||||||
val.label = val.label.replace('/src/views/', '');
|
val.label = val.label.replace('/src/views/', '');
|
||||||
val.value = val.value.replace('/src/views/', '');
|
val.value = val.value.replace('/src/views/', '');
|
||||||
});
|
});
|
||||||
cb(results);
|
cb(results);
|
||||||
};
|
};
|
||||||
|
|
||||||
const createFilter = (queryString: string) => {
|
const createFilter = (queryString: string) => {
|
||||||
return (file: ComponentFileItem) => {
|
return (file: ComponentFileItem) => {
|
||||||
return file.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
|
return file.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const rules = reactive<FormRules>({
|
const rules = reactive<FormRules>({
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
web_path: [{validator: validateWebPath, trigger: 'blur'}],
|
web_path: [{ validator: validateWebPath, trigger: 'blur' }],
|
||||||
});
|
});
|
||||||
|
|
||||||
const getData = () => {
|
const getData = () => {
|
||||||
api.GetList({}).then((ret: APIResponseData) => {
|
api.GetList({}).then((ret: APIResponseData) => {
|
||||||
const responseData = ret.data;
|
const responseData = ret.data;
|
||||||
const result = XEUtils.toArrayTree(responseData, {
|
const result = XEUtils.toArrayTree(responseData, {
|
||||||
parentKey: 'parent',
|
parentKey: 'parent',
|
||||||
children: 'children',
|
children: 'children',
|
||||||
strict: true,
|
strict: true,
|
||||||
});
|
});
|
||||||
data.value = result;
|
data.value = result;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const getPermissions = (menu: object) => {
|
const getPermissions = (menu: object) => {
|
||||||
menuButoonApi.GetList(menu).then((res: APIResponseData) => {
|
menuButoonApi.GetList(menu).then((res: APIResponseData) => {
|
||||||
menuPermissonList.value = res.data;
|
menuPermissonList.value = res.data;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const saveMenu = () => {
|
const saveMenu = () => {
|
||||||
formRef.value?.validate((valid, fields) => {
|
formRef.value?.validate((valid, fields) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
if (!isAddNewMenu.value) {
|
if (!isAddNewMenu.value) {
|
||||||
// 保存菜单
|
// 保存菜单
|
||||||
|
|
||||||
form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
|
form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
|
||||||
api.UpdateObj(form).then((res: APIResponseData) => {
|
api.UpdateObj(form).then((res: APIResponseData) => {
|
||||||
successMessage(res.msg as string);
|
successMessage(res.msg as string);
|
||||||
getData();
|
getData();
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// 新增菜单
|
// 新增菜单
|
||||||
form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
|
form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
|
||||||
api.AddObj(form).then((res: APIResponseData) => {
|
api.AddObj(form).then((res: APIResponseData) => {
|
||||||
successMessage(res.msg as string);
|
successMessage(res.msg as string);
|
||||||
getData();
|
getData();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
errorMessage('请填写检查表单');
|
errorMessage('请填写检查表单');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const newMenu = () => {
|
const newMenu = () => {
|
||||||
formRef.value?.resetFields();
|
formRef.value?.resetFields();
|
||||||
isAddNewMenu.value = true;
|
isAddNewMenu.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
const addChildMenu = () => {
|
const addChildMenu = () => {
|
||||||
let parentId = form.id;
|
let parentId = form.id;
|
||||||
formRef.value?.resetFields();
|
formRef.value?.resetFields();
|
||||||
form.parent = parentId;
|
form.parent = parentId;
|
||||||
isAddNewMenu.value = true;
|
isAddNewMenu.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
const addSameLevelMenu = () => {
|
const addSameLevelMenu = () => {
|
||||||
let parentId = form.parent;
|
let parentId = form.parent;
|
||||||
formRef.value?.resetFields();
|
formRef.value?.resetFields();
|
||||||
form.parent = parentId;
|
form.parent = parentId;
|
||||||
isAddNewMenu.value = true;
|
isAddNewMenu.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
const deleteMenu = () => {
|
const deleteMenu = () => {
|
||||||
ElMessageBox.confirm(
|
ElMessageBox.confirm(
|
||||||
'您确认删除该菜单项吗?',
|
'您确认删除该菜单项吗?',
|
||||||
'温馨提示',
|
'温馨提示',
|
||||||
{
|
{
|
||||||
confirmButtonText: '确认',
|
confirmButtonText: '确认',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
}
|
}
|
||||||
).then(() => {
|
).then(() => {
|
||||||
api.DelObj(form).then((res: APIResponseData) => {
|
api.DelObj(form).then((res: APIResponseData) => {
|
||||||
successMessage(res.msg as string);
|
successMessage(res.msg as string);
|
||||||
getData();
|
getData();
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleNodeClick = (data: any, node: any, prop: any) => {
|
const handleNodeClick = (data: any, node: any, prop: any) => {
|
||||||
Object.keys(toRaw(data)).forEach((key: string) => {
|
Object.keys(toRaw(data)).forEach((key: string) => {
|
||||||
form[key] = data[key];
|
form[key] = data[key];
|
||||||
});
|
});
|
||||||
delete form.component_name;
|
delete form.component_name;
|
||||||
form.id = data.id;
|
form.id = data.id;
|
||||||
isAddNewMenu.value = false;
|
isAddNewMenu.value = false;
|
||||||
|
|
||||||
// 点击tree node时，加载对应的权限菜单
|
// 点击tree node时，加载对应的权限菜单
|
||||||
// getPermissions({ menu: form.id });
|
// getPermissions({ menu: form.id });
|
||||||
};
|
};
|
||||||
|
|
||||||
const addPermission = () => {
|
const addPermission = () => {
|
||||||
!form.is_catalog ? (permissionDrawerVisible.value = true) : errorMessage('目录没有菜单权限');
|
!form.is_catalog ? (permissionDrawerVisible.value = true) : errorMessage('目录没有菜单权限');
|
||||||
};
|
};
|
||||||
const drawerClose = () => {
|
const drawerClose = () => {
|
||||||
permissionDrawerVisible.value = false;
|
permissionDrawerVisible.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
// 页面打开后获取列表数据
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getData();
|
getData();
|
||||||
});
|
});
|
||||||
onActivated(() => {
|
onActivated(() => {
|
||||||
console.log('keep-alive成功')
|
console.log('keep-alive成功')
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.el-row {
|
.s-el-row {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
.el-col {
|
.el-col {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
padding: 10px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-box {
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-card {
|
.menu-left-box {
|
||||||
height: 100%;
|
border-radius: 0 8px 8px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.menu-center-box {
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-right-box {
|
||||||
|
border-radius: 8px 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menus-btns {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
.font-normal {
|
.font-normal {
|
||||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user