初始化
袁子龙
parent
3b56aac88b
commit
9efdd71e99
|
|
@ -0,0 +1,58 @@
|
||||||
|
<template>
|
||||||
|
<div :class="{'has-logo':showLogo}"
|
||||||
|
:style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
||||||
|
<logo v-if="showLogo" :collapse="isCollapse"/>
|
||||||
|
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
||||||
|
<el-menu
|
||||||
|
:active-text-color="settings.theme"
|
||||||
|
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
|
||||||
|
:collapse="isCollapse"
|
||||||
|
:collapse-transition="false"
|
||||||
|
:default-active="activeMenu"
|
||||||
|
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
||||||
|
:unique-opened="true"
|
||||||
|
mode="vertical"
|
||||||
|
>
|
||||||
|
<sidebar-item
|
||||||
|
v-for="(route, index) in sidebarRouters"
|
||||||
|
:key="route.path + index"
|
||||||
|
:base-path="route.path"
|
||||||
|
:item="route"
|
||||||
|
/>
|
||||||
|
</el-menu>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapGetters, mapState} from "vuex";
|
||||||
|
import Logo from "./Logo";
|
||||||
|
import SidebarItem from "./SidebarItem";
|
||||||
|
import variables from "@/assets/styles/variables.scss";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {SidebarItem, Logo},
|
||||||
|
computed: {
|
||||||
|
...mapState(["settings"]),
|
||||||
|
...mapGetters(["sidebarRouters", "sidebar"]),
|
||||||
|
activeMenu() {
|
||||||
|
const route = this.$route;
|
||||||
|
const {meta, path} = route;
|
||||||
|
// if set path, the sidebar will highlight the path you set
|
||||||
|
if (meta.activeMenu) {
|
||||||
|
return meta.activeMenu;
|
||||||
|
}
|
||||||
|
return path;
|
||||||
|
},
|
||||||
|
showLogo() {
|
||||||
|
return this.$store.state.settings.sidebarLogo;
|
||||||
|
},
|
||||||
|
variables() {
|
||||||
|
return variables;
|
||||||
|
},
|
||||||
|
isCollapse() {
|
||||||
|
return !this.sidebar.opened;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,344 @@
|
||||||
|
<template>
|
||||||
|
<div id="tags-view-container" class="tags-view-container">
|
||||||
|
<scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
|
||||||
|
<router-link
|
||||||
|
v-for="tag in visitedViews"
|
||||||
|
:key="tag.path"
|
||||||
|
ref="tag"
|
||||||
|
:class="isActive(tag)?'active':''"
|
||||||
|
:style="activeStyle(tag)"
|
||||||
|
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
|
||||||
|
class="tags-view-item"
|
||||||
|
tag="span"
|
||||||
|
@click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
|
||||||
|
@contextmenu.prevent.native="openMenu(tag,$event)"
|
||||||
|
>
|
||||||
|
{{ tag.title }}
|
||||||
|
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)"/>
|
||||||
|
</router-link>
|
||||||
|
</scroll-pane>
|
||||||
|
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
|
||||||
|
<li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li>
|
||||||
|
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> 关闭当前
|
||||||
|
</li>
|
||||||
|
<li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 关闭其他</li>
|
||||||
|
<li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 关闭左侧</li>
|
||||||
|
<li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 关闭右侧</li>
|
||||||
|
<li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ScrollPane from './ScrollPane'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {ScrollPane},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
selectedTag: {},
|
||||||
|
affixTags: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
visitedViews() {
|
||||||
|
return this.$store.state.tagsView.visitedViews
|
||||||
|
},
|
||||||
|
routes() {
|
||||||
|
return this.$store.state.permission.routes
|
||||||
|
},
|
||||||
|
theme() {
|
||||||
|
return this.$store.state.settings.theme;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route() {
|
||||||
|
this.addTags()
|
||||||
|
this.moveToCurrentTag()
|
||||||
|
},
|
||||||
|
visible(value) {
|
||||||
|
if (value) {
|
||||||
|
document.body.addEventListener('click', this.closeMenu)
|
||||||
|
} else {
|
||||||
|
document.body.removeEventListener('click', this.closeMenu)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initTags()
|
||||||
|
this.addTags()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isActive(route) {
|
||||||
|
return route.path === this.$route.path
|
||||||
|
},
|
||||||
|
activeStyle(tag) {
|
||||||
|
if (!this.isActive(tag)) return {};
|
||||||
|
return {
|
||||||
|
"background-color": this.theme,
|
||||||
|
"border-color": this.theme
|
||||||
|
};
|
||||||
|
},
|
||||||
|
isAffix(tag) {
|
||||||
|
return tag.meta && tag.meta.affix
|
||||||
|
},
|
||||||
|
isFirstView() {
|
||||||
|
try {
|
||||||
|
return this.selectedTag.fullPath === '/index' || this.selectedTag.fullPath === this.visitedViews[1].fullPath
|
||||||
|
} catch (err) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isLastView() {
|
||||||
|
try {
|
||||||
|
return this.selectedTag.fullPath === this.visitedViews[this.visitedViews.length - 1].fullPath
|
||||||
|
} catch (err) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
filterAffixTags(routes, basePath = '/') {
|
||||||
|
let tags = []
|
||||||
|
routes.forEach(route => {
|
||||||
|
if (route.meta && route.meta.affix) {
|
||||||
|
const tagPath = path.resolve(basePath, route.path)
|
||||||
|
tags.push({
|
||||||
|
fullPath: tagPath,
|
||||||
|
path: tagPath,
|
||||||
|
name: route.name,
|
||||||
|
meta: {...route.meta}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (route.children) {
|
||||||
|
const tempTags = this.filterAffixTags(route.children, route.path)
|
||||||
|
if (tempTags.length >= 1) {
|
||||||
|
tags = [...tags, ...tempTags]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return tags
|
||||||
|
},
|
||||||
|
initTags() {
|
||||||
|
const affixTags = this.affixTags = this.filterAffixTags(this.routes)
|
||||||
|
for (const tag of affixTags) {
|
||||||
|
// Must have tag name
|
||||||
|
if (tag.name) {
|
||||||
|
this.$store.dispatch('tagsView/addVisitedView', tag)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addTags() {
|
||||||
|
const {name} = this.$route
|
||||||
|
if (name) {
|
||||||
|
this.$store.dispatch('tagsView/addView', this.$route)
|
||||||
|
if (this.$route.meta.link) {
|
||||||
|
this.$store.dispatch('tagsView/addIframeView', this.$route)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
moveToCurrentTag() {
|
||||||
|
const tags = this.$refs.tag
|
||||||
|
this.$nextTick(() => {
|
||||||
|
for (const tag of tags) {
|
||||||
|
if (tag.to.path === this.$route.path) {
|
||||||
|
this.$refs.scrollPane.moveToTarget(tag)
|
||||||
|
// when query is different then update
|
||||||
|
if (tag.to.fullPath !== this.$route.fullPath) {
|
||||||
|
this.$store.dispatch('tagsView/updateVisitedView', this.$route)
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
refreshSelectedTag(view) {
|
||||||
|
this.$tab.refreshPage(view);
|
||||||
|
if (this.$route.meta.link) {
|
||||||
|
this.$store.dispatch('tagsView/delIframeView', this.$route)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
closeSelectedTag(view) {
|
||||||
|
this.$tab.closePage(view).then(({visitedViews}) => {
|
||||||
|
if (this.isActive(view)) {
|
||||||
|
this.toLastView(visitedViews, view)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
closeRightTags() {
|
||||||
|
this.$tab.closeRightPage(this.selectedTag).then(visitedViews => {
|
||||||
|
if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) {
|
||||||
|
this.toLastView(visitedViews)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
closeLeftTags() {
|
||||||
|
this.$tab.closeLeftPage(this.selectedTag).then(visitedViews => {
|
||||||
|
if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) {
|
||||||
|
this.toLastView(visitedViews)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
closeOthersTags() {
|
||||||
|
this.$router.push(this.selectedTag.fullPath).catch(() => {
|
||||||
|
});
|
||||||
|
this.$tab.closeOtherPage(this.selectedTag).then(() => {
|
||||||
|
this.moveToCurrentTag()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
closeAllTags(view) {
|
||||||
|
this.$tab.closeAllPage().then(({visitedViews}) => {
|
||||||
|
if (this.affixTags.some(tag => tag.path === this.$route.path)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.toLastView(visitedViews, view)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
toLastView(visitedViews, view) {
|
||||||
|
const latestView = visitedViews.slice(-1)[0]
|
||||||
|
if (latestView) {
|
||||||
|
this.$router.push(latestView.fullPath)
|
||||||
|
} else {
|
||||||
|
// now the default is to redirect to the home page if there is no tags-view,
|
||||||
|
// you can adjust it according to your needs.
|
||||||
|
if (view.name === 'Dashboard') {
|
||||||
|
// to reload home page
|
||||||
|
this.$router.replace({path: '/redirect' + view.fullPath})
|
||||||
|
} else {
|
||||||
|
this.$router.push('/')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
openMenu(tag, e) {
|
||||||
|
const menuMinWidth = 105
|
||||||
|
const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
|
||||||
|
const offsetWidth = this.$el.offsetWidth // container width
|
||||||
|
const maxLeft = offsetWidth - menuMinWidth // left boundary
|
||||||
|
const left = e.clientX - offsetLeft + 15 // 15: margin right
|
||||||
|
|
||||||
|
if (left > maxLeft) {
|
||||||
|
this.left = maxLeft
|
||||||
|
} else {
|
||||||
|
this.left = left
|
||||||
|
}
|
||||||
|
|
||||||
|
this.top = e.clientY
|
||||||
|
this.visible = true
|
||||||
|
this.selectedTag = tag
|
||||||
|
},
|
||||||
|
closeMenu() {
|
||||||
|
this.visible = false
|
||||||
|
},
|
||||||
|
handleScroll() {
|
||||||
|
this.closeMenu()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tags-view-container {
|
||||||
|
height: 34px;
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1px solid #d8dce5;
|
||||||
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
|
||||||
|
|
||||||
|
.tags-view-wrapper {
|
||||||
|
.tags-view-item {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
border: 1px solid #d8dce5;
|
||||||
|
color: #495060;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-top: 4px;
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: #42b983;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #42b983;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
background: #fff;
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: relative;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contextmenu {
|
||||||
|
margin: 0;
|
||||||
|
background: #fff;
|
||||||
|
z-index: 3000;
|
||||||
|
position: absolute;
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 5px 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333;
|
||||||
|
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 0;
|
||||||
|
padding: 7px 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
//reset element css of el-icon-close
|
||||||
|
.tags-view-wrapper {
|
||||||
|
.tags-view-item {
|
||||||
|
.el-icon-close {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: 2px;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
||||||
|
transform-origin: 100% 50%;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
transform: scale(.6);
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #b4bccc;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
<template>
|
||||||
|
<div class="icons-container">
|
||||||
|
<aside>
|
||||||
|
<a href="#" target="_blank">Add and use
|
||||||
|
</a>
|
||||||
|
</aside>
|
||||||
|
<el-tabs type="border-card">
|
||||||
|
<el-tab-pane label="Icons">
|
||||||
|
<div v-for="item of svgIcons" :key="item">
|
||||||
|
<el-tooltip placement="top">
|
||||||
|
<div slot="content">
|
||||||
|
{{ generateIconCode(item) }}
|
||||||
|
</div>
|
||||||
|
<div class="icon-item">
|
||||||
|
<svg-icon :icon-class="item" class-name="disabled"/>
|
||||||
|
<span>{{ item }}</span>
|
||||||
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="Element-UI Icons">
|
||||||
|
<div v-for="item of elementIcons" :key="item">
|
||||||
|
<el-tooltip placement="top">
|
||||||
|
<div slot="content">
|
||||||
|
{{ generateElementIconCode(item) }}
|
||||||
|
</div>
|
||||||
|
<div class="icon-item">
|
||||||
|
<i :class="'el-icon-' + item"/>
|
||||||
|
<span>{{ item }}</span>
|
||||||
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import svgIcons from './svg-icons'
|
||||||
|
import elementIcons from './element-icons'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Icons',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
svgIcons,
|
||||||
|
elementIcons
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
generateIconCode(symbol) {
|
||||||
|
return `<svg-icon icon-class="${symbol}" />`
|
||||||
|
},
|
||||||
|
generateElementIconCode(symbol) {
|
||||||
|
return `<i class="el-icon-${symbol}" />`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.icons-container {
|
||||||
|
margin: 10px 20px 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.icon-item {
|
||||||
|
margin: 20px;
|
||||||
|
height: 85px;
|
||||||
|
text-align: center;
|
||||||
|
width: 100px;
|
||||||
|
float: left;
|
||||||
|
font-size: 30px;
|
||||||
|
color: #24292e;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,352 @@
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
|
||||||
|
<el-form-item label="参数名称" prop="configName">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.configName"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入参数名称"
|
||||||
|
style="width: 240px"
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="参数键名" prop="configKey">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.configKey"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入参数键名"
|
||||||
|
style="width: 240px"
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="系统内置" prop="configType">
|
||||||
|
<el-select v-model="queryParams.configType" clearable placeholder="系统内置">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in dict.type.sys_yes_no"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="创建时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dateRange"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
range-separator="-"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
style="width: 240px"
|
||||||
|
type="daterange"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:config:add']"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
@click="handleAdd"
|
||||||
|
>新增
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:config:edit']"
|
||||||
|
:disabled="single"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="success"
|
||||||
|
@click="handleUpdate"
|
||||||
|
>修改
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:config:remove']"
|
||||||
|
:disabled="multiple"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
@click="handleDelete"
|
||||||
|
>删除
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:config:export']"
|
||||||
|
icon="el-icon-download"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="warning"
|
||||||
|
@click="handleExport"
|
||||||
|
>导出
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:config:remove']"
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
@click="handleRefreshCache"
|
||||||
|
>刷新缓存
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
|
||||||
|
<el-table-column align="center" type="selection" width="55"/>
|
||||||
|
<el-table-column align="center" label="参数主键" prop="configId"/>
|
||||||
|
<el-table-column :show-overflow-tooltip="true" align="center" label="参数名称" prop="configName"/>
|
||||||
|
<el-table-column :show-overflow-tooltip="true" align="center" label="参数键名" prop="configKey"/>
|
||||||
|
<el-table-column :show-overflow-tooltip="true" align="center" label="参数键值" prop="configValue"/>
|
||||||
|
<el-table-column align="center" label="系统内置" prop="configType">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.configType"/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column :show-overflow-tooltip="true" align="center" label="备注" prop="remark"/>
|
||||||
|
<el-table-column align="center" label="创建时间" prop="createTime" width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:config:edit']"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
@click="handleUpdate(scope.row)"
|
||||||
|
>修改
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:config:remove']"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
@click="handleDelete(scope.row)"
|
||||||
|
>删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination
|
||||||
|
v-show="total>0"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:total="total"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 添加或修改参数配置对话框 -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="参数名称" prop="configName">
|
||||||
|
<el-input v-model="form.configName" placeholder="请输入参数名称"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="参数键名" prop="configKey">
|
||||||
|
<el-input v-model="form.configKey" placeholder="请输入参数键名"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="参数键值" prop="configValue">
|
||||||
|
<el-input v-model="form.configValue" placeholder="请输入参数键值"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="系统内置" prop="configType">
|
||||||
|
<el-radio-group v-model="form.configType">
|
||||||
|
<el-radio
|
||||||
|
v-for="dict in dict.type.sys_yes_no"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.value"
|
||||||
|
>{{ dict.label }}
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="form.remark" placeholder="请输入内容" type="textarea"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {addConfig, delConfig, getConfig, listConfig, refreshCache, updateConfig} from "@/api/system/config";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Config",
|
||||||
|
dicts: ['sys_yes_no'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 选中数组
|
||||||
|
ids: [],
|
||||||
|
// 非单个禁用
|
||||||
|
single: true,
|
||||||
|
// 非多个禁用
|
||||||
|
multiple: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 参数表格数据
|
||||||
|
configList: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 日期范围
|
||||||
|
dateRange: [],
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
configName: undefined,
|
||||||
|
configKey: undefined,
|
||||||
|
configType: undefined
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
configName: [
|
||||||
|
{required: true, message: "参数名称不能为空", trigger: "blur"}
|
||||||
|
],
|
||||||
|
configKey: [
|
||||||
|
{required: true, message: "参数键名不能为空", trigger: "blur"}
|
||||||
|
],
|
||||||
|
configValue: [
|
||||||
|
{required: true, message: "参数键值不能为空", trigger: "blur"}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询参数列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
||||||
|
this.configList = response.data.rows;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
configId: undefined,
|
||||||
|
configName: undefined,
|
||||||
|
configKey: undefined,
|
||||||
|
configValue: undefined,
|
||||||
|
configType: "Y",
|
||||||
|
remark: undefined
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.dateRange = [];
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加参数";
|
||||||
|
},
|
||||||
|
// 多选框选中数据
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map(item => item.configId)
|
||||||
|
this.single = selection.length != 1
|
||||||
|
this.multiple = !selection.length
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const configId = row.configId || this.ids
|
||||||
|
getConfig(configId).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改参数";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm: function () {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.configId != undefined) {
|
||||||
|
updateConfig(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addConfig(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const configIds = row.configId || this.ids;
|
||||||
|
this.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function () {
|
||||||
|
return delConfig(configIds);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
this.download('system/config/export', {
|
||||||
|
...this.queryParams
|
||||||
|
}, `config_${new Date().getTime()}.xlsx`)
|
||||||
|
},
|
||||||
|
/** 刷新缓存按钮操作 */
|
||||||
|
handleRefreshCache() {
|
||||||
|
refreshCache().then(() => {
|
||||||
|
this.$modal.msgSuccess("刷新成功");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,344 @@
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
|
||||||
|
<el-form-item label="部门名称" prop="deptName">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.deptName"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入部门名称"
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-select v-model="queryParams.status" clearable placeholder="部门状态">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in dict.type.sys_normal_disable"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:dept:add']"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
@click="handleAdd"
|
||||||
|
>新增
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-sort"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="info"
|
||||||
|
@click="toggleExpandAll"
|
||||||
|
>展开/折叠
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
v-if="refreshTable"
|
||||||
|
v-loading="loading"
|
||||||
|
:data="deptList"
|
||||||
|
:default-expand-all="isExpandAll"
|
||||||
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||||
|
row-key="deptId"
|
||||||
|
>
|
||||||
|
<el-table-column label="部门名称" prop="deptName" width="260"></el-table-column>
|
||||||
|
<el-table-column label="排序" prop="orderNum" width="200"></el-table-column>
|
||||||
|
<el-table-column label="状态" prop="status" width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="创建时间" prop="createTime" width="200">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:dept:edit']"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
@click="handleUpdate(scope.row)"
|
||||||
|
>修改
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:dept:add']"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
@click="handleAdd(scope.row)"
|
||||||
|
>新增
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="scope.row.parentId != 0"
|
||||||
|
v-hasPermi="['system:dept:remove']"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
@click="handleDelete(scope.row)"
|
||||||
|
>删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 添加或修改部门对话框 -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" append-to-body width="600px">
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-row>
|
||||||
|
<el-col v-if="form.parentId !== 0" :span="24">
|
||||||
|
<el-form-item label="上级部门" prop="parentId">
|
||||||
|
<treeselect v-model="form.parentId" :normalizer="normalizer" :options="deptOptions"
|
||||||
|
placeholder="选择上级部门"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="部门名称" prop="deptName">
|
||||||
|
<el-input v-model="form.deptName" placeholder="请输入部门名称"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="显示排序" prop="orderNum">
|
||||||
|
<el-input-number v-model="form.orderNum" :min="0" controls-position="right"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="负责人" prop="leader">
|
||||||
|
<el-input v-model="form.leader" maxlength="20" placeholder="请输入负责人"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="联系电话" prop="phone">
|
||||||
|
<el-input v-model="form.phone" maxlength="11" placeholder="请输入联系电话"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="邮箱" prop="email">
|
||||||
|
<el-input v-model="form.email" maxlength="50" placeholder="请输入邮箱"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="部门状态">
|
||||||
|
<el-radio-group v-model="form.status">
|
||||||
|
<el-radio
|
||||||
|
v-for="dict in dict.type.sys_normal_disable"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.value"
|
||||||
|
>{{ dict.label }}
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {addDept, delDept, getDept, listDept, listDeptExcludeChild, updateDept} from "@/api/system/dept";
|
||||||
|
import Treeselect from "@riophae/vue-treeselect";
|
||||||
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Dept",
|
||||||
|
dicts: ['sys_normal_disable'],
|
||||||
|
components: {Treeselect},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 表格树数据
|
||||||
|
deptList: [],
|
||||||
|
// 部门树选项
|
||||||
|
deptOptions: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 是否展开，默认全部展开
|
||||||
|
isExpandAll: true,
|
||||||
|
// 重新渲染表格状态
|
||||||
|
refreshTable: true,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
deptName: undefined,
|
||||||
|
status: undefined
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
parentId: [
|
||||||
|
{required: true, message: "上级部门不能为空", trigger: "blur"}
|
||||||
|
],
|
||||||
|
deptName: [
|
||||||
|
{required: true, message: "部门名称不能为空", trigger: "blur"}
|
||||||
|
],
|
||||||
|
orderNum: [
|
||||||
|
{required: true, message: "显示排序不能为空", trigger: "blur"}
|
||||||
|
],
|
||||||
|
email: [
|
||||||
|
{
|
||||||
|
type: "email",
|
||||||
|
message: "请输入正确的邮箱地址",
|
||||||
|
trigger: ["blur", "change"]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
phone: [
|
||||||
|
{
|
||||||
|
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||||
|
message: "请输入正确的手机号码",
|
||||||
|
trigger: "blur"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询部门列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
listDept(this.queryParams).then(response => {
|
||||||
|
this.deptList = this.handleTree(response.data, "deptId");
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 转换部门数据结构 */
|
||||||
|
normalizer(node) {
|
||||||
|
if (node.children && !node.children.length) {
|
||||||
|
delete node.children;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
id: node.deptId,
|
||||||
|
label: node.deptName,
|
||||||
|
children: node.children
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
deptId: undefined,
|
||||||
|
parentId: undefined,
|
||||||
|
deptName: undefined,
|
||||||
|
orderNum: undefined,
|
||||||
|
leader: undefined,
|
||||||
|
phone: undefined,
|
||||||
|
email: undefined,
|
||||||
|
status: "0"
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd(row) {
|
||||||
|
this.reset();
|
||||||
|
if (row != undefined) {
|
||||||
|
this.form.parentId = row.deptId;
|
||||||
|
}
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加部门";
|
||||||
|
listDept().then(response => {
|
||||||
|
this.deptOptions = this.handleTree(response.data, "deptId");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 展开/折叠操作 */
|
||||||
|
toggleExpandAll() {
|
||||||
|
this.refreshTable = false;
|
||||||
|
this.isExpandAll = !this.isExpandAll;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.refreshTable = true;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
getDept(row.deptId).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改部门";
|
||||||
|
});
|
||||||
|
listDeptExcludeChild(row.deptId).then(response => {
|
||||||
|
this.deptOptions = this.handleTree(response.data, "deptId");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm: function () {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.deptId != undefined) {
|
||||||
|
updateDept(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addDept(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function () {
|
||||||
|
return delDept(row.deptId);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,356 @@
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
|
||||||
|
<el-form-item label="字典名称" prop="dictName">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.dictName"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入字典名称"
|
||||||
|
style="width: 240px"
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="字典类型" prop="dictType">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.dictType"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入字典类型"
|
||||||
|
style="width: 240px"
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParams.status"
|
||||||
|
clearable
|
||||||
|
placeholder="字典状态"
|
||||||
|
style="width: 240px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in dict.type.sys_normal_disable"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="创建时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dateRange"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
range-separator="-"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
style="width: 240px"
|
||||||
|
type="daterange"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:dict:add']"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
@click="handleAdd"
|
||||||
|
>新增
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:dict:edit']"
|
||||||
|
:disabled="single"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="success"
|
||||||
|
@click="handleUpdate"
|
||||||
|
>修改
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:dict:remove']"
|
||||||
|
:disabled="multiple"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
@click="handleDelete"
|
||||||
|
>删除
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:dict:export']"
|
||||||
|
icon="el-icon-download"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="warning"
|
||||||
|
@click="handleExport"
|
||||||
|
>导出
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:dict:remove']"
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
@click="handleRefreshCache"
|
||||||
|
>刷新缓存
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
|
||||||
|
<el-table-column align="center" type="selection" width="55"/>
|
||||||
|
<el-table-column align="center" label="字典编号" prop="dictId"/>
|
||||||
|
<el-table-column :show-overflow-tooltip="true" align="center" label="字典名称" prop="dictName"/>
|
||||||
|
<el-table-column :show-overflow-tooltip="true" align="center" label="字典类型">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
|
||||||
|
<span>{{ scope.row.dictType }}</span>
|
||||||
|
</router-link>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="状态" prop="status">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column :show-overflow-tooltip="true" align="center" label="备注" prop="remark"/>
|
||||||
|
<el-table-column align="center" label="创建时间" prop="createTime" width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:dict:edit']"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
@click="handleUpdate(scope.row)"
|
||||||
|
>修改
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:dict:remove']"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
@click="handleDelete(scope.row)"
|
||||||
|
>删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination
|
||||||
|
v-show="total>0"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:total="total"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 添加或修改参数配置对话框 -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="字典名称" prop="dictName">
|
||||||
|
<el-input v-model="form.dictName" placeholder="请输入字典名称"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="字典类型" prop="dictType">
|
||||||
|
<el-input v-model="form.dictType" placeholder="请输入字典类型"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-radio-group v-model="form.status">
|
||||||
|
<el-radio
|
||||||
|
v-for="dict in dict.type.sys_normal_disable"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.value"
|
||||||
|
>{{ dict.label }}
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="form.remark" placeholder="请输入内容" type="textarea"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {addType, delType, getType, listType, refreshCache, updateType} from "@/api/system/dict/type";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Dict",
|
||||||
|
dicts: ['sys_normal_disable'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 选中数组
|
||||||
|
ids: [],
|
||||||
|
// 非单个禁用
|
||||||
|
single: true,
|
||||||
|
// 非多个禁用
|
||||||
|
multiple: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 字典表格数据
|
||||||
|
typeList: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 日期范围
|
||||||
|
dateRange: [],
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
dictName: undefined,
|
||||||
|
dictType: undefined,
|
||||||
|
status: undefined
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
dictName: [
|
||||||
|
{required: true, message: "字典名称不能为空", trigger: "blur"}
|
||||||
|
],
|
||||||
|
dictType: [
|
||||||
|
{required: true, message: "字典类型不能为空", trigger: "blur"}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询字典类型列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
listType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
||||||
|
this.typeList = response.data.rows;
|
||||||
|
this.total = response.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
dictId: undefined,
|
||||||
|
dictName: undefined,
|
||||||
|
dictType: undefined,
|
||||||
|
status: "0",
|
||||||
|
remark: undefined
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.dateRange = [];
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加字典类型";
|
||||||
|
},
|
||||||
|
// 多选框选中数据
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map(item => item.dictId)
|
||||||
|
this.single = selection.length != 1
|
||||||
|
this.multiple = !selection.length
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const dictId = row.dictId || this.ids
|
||||||
|
getType(dictId).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改字典类型";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm: function () {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.dictId != undefined) {
|
||||||
|
updateType(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addType(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const dictIds = row.dictId || this.ids;
|
||||||
|
this.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function () {
|
||||||
|
return delType(dictIds);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
this.download('system/dict/type/export', {
|
||||||
|
...this.queryParams
|
||||||
|
}, `type_${new Date().getTime()}.xlsx`)
|
||||||
|
},
|
||||||
|
/** 刷新缓存按钮操作 */
|
||||||
|
handleRefreshCache() {
|
||||||
|
refreshCache().then(() => {
|
||||||
|
this.$modal.msgSuccess("刷新成功");
|
||||||
|
this.$store.dispatch('dict/cleanDict');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,461 @@
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
|
||||||
|
<el-form-item label="菜单名称" prop="menuName">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.menuName"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入菜单名称"
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-select v-model="queryParams.status" clearable placeholder="菜单状态">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in dict.type.sys_normal_disable"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:menu:add']"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
@click="handleAdd"
|
||||||
|
>新增
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-sort"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="info"
|
||||||
|
@click="toggleExpandAll"
|
||||||
|
>展开/折叠
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
v-if="refreshTable"
|
||||||
|
v-loading="loading"
|
||||||
|
:data="menuList"
|
||||||
|
:default-expand-all="isExpandAll"
|
||||||
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||||
|
row-key="menuId"
|
||||||
|
>
|
||||||
|
<el-table-column :show-overflow-tooltip="true" label="菜单名称" prop="menuName" width="160"></el-table-column>
|
||||||
|
<el-table-column align="center" label="图标" prop="icon" width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<svg-icon :icon-class="scope.row.icon"/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="排序" prop="orderNum" width="60"></el-table-column>
|
||||||
|
<el-table-column :show-overflow-tooltip="true" label="权限标识" prop="perms"></el-table-column>
|
||||||
|
<el-table-column :show-overflow-tooltip="true" label="组件路径" prop="component"></el-table-column>
|
||||||
|
<el-table-column label="状态" prop="status" width="80">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="创建时间" prop="createTime">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:menu:edit']"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
@click="handleUpdate(scope.row)"
|
||||||
|
>修改
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:menu:add']"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
@click="handleAdd(scope.row)"
|
||||||
|
>新增
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['system:menu:remove']"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
@click="handleDelete(scope.row)"
|
||||||
|
>删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 添加或修改菜单对话框 -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" append-to-body width="680px">
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="上级菜单" prop="parentId">
|
||||||
|
<treeselect
|
||||||
|
v-model="form.parentId"
|
||||||
|
:normalizer="normalizer"
|
||||||
|
:options="menuOptions"
|
||||||
|
:show-count="true"
|
||||||
|
placeholder="选择上级菜单"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="菜单类型" prop="menuType">
|
||||||
|
<el-radio-group v-model="form.menuType">
|
||||||
|
<el-radio label="M">目录</el-radio>
|
||||||
|
<el-radio label="C">菜单</el-radio>
|
||||||
|
<el-radio label="F">按钮</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col v-if="form.menuType != 'F'" :span="24">
|
||||||
|
<el-form-item label="菜单图标" prop="icon">
|
||||||
|
<el-popover
|
||||||
|
placement="bottom-start"
|
||||||
|
trigger="click"
|
||||||
|
width="460"
|
||||||
|
@show="$refs['iconSelect'].reset()"
|
||||||
|
>
|
||||||
|
<IconSelect ref="iconSelect" :active-icon="form.icon" @selected="selected"/>
|
||||||
|
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
|
||||||
|
<svg-icon
|
||||||
|
v-if="form.icon"
|
||||||
|
slot="prefix"
|
||||||
|
:icon-class="form.icon"
|
||||||
|
style="width: 25px;"
|
||||||
|
/>
|
||||||
|
<i v-else slot="prefix" class="el-icon-search el-input__icon"/>
|
||||||
|
</el-input>
|
||||||
|
</el-popover>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="菜单名称" prop="menuName">
|
||||||
|
<el-input v-model="form.menuName" placeholder="请输入菜单名称"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="显示排序" prop="orderNum">
|
||||||
|
<el-input-number v-model="form.orderNum" :min="0" controls-position="right"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col v-if="form.menuType != 'F'" :span="12">
|
||||||
|
<el-form-item prop="isFrame">
|
||||||
|
<span slot="label">
|
||||||
|
<el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
|
||||||
|
<i class="el-icon-question"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
是否外链
|
||||||
|
</span>
|
||||||
|
<el-radio-group v-model="form.isFrame">
|
||||||
|
<el-radio label="0">是</el-radio>
|
||||||
|
<el-radio label="1">否</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col v-if="form.menuType != 'F'" :span="12">
|
||||||
|
<el-form-item prop="path">
|
||||||
|
<span slot="label">
|
||||||
|
<el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
|
||||||
|
<i class="el-icon-question"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
路由地址
|
||||||
|
</span>
|
||||||
|
<el-input v-model="form.path" placeholder="请输入路由地址"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col v-if="form.menuType == 'C'" :span="12">
|
||||||
|
<el-form-item prop="component">
|
||||||
|
<span slot="label">
|
||||||
|
<el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
|
||||||
|
<i class="el-icon-question"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
组件路径
|
||||||
|
</span>
|
||||||
|
<el-input v-model="form.component" placeholder="请输入组件路径"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col v-if="form.menuType != 'M'" :span="12">
|
||||||
|
<el-form-item prop="perms">
|
||||||
|
<el-input v-model="form.perms" maxlength="100" placeholder="请输入权限标识"/>
|
||||||
|
<span slot="label">
|
||||||
|
<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
|
||||||
|
placement="top">
|
||||||
|
<i class="el-icon-question"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
权限字符
|
||||||
|
</span>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col v-if="form.menuType == 'C'" :span="12">
|
||||||
|
<el-form-item prop="query">
|
||||||
|
<el-input v-model="form.query" maxlength="255" placeholder="请输入路由参数"/>
|
||||||
|
<span slot="label">
|
||||||
|
<el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
|
||||||
|
<i class="el-icon-question"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
路由参数
|
||||||
|
</span>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col v-if="form.menuType == 'C'" :span="12">
|
||||||
|
<el-form-item prop="isCache">
|
||||||
|
<span slot="label">
|
||||||
|
<el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
|
||||||
|
<i class="el-icon-question"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
是否缓存
|
||||||
|
</span>
|
||||||
|
<el-radio-group v-model="form.isCache">
|
||||||
|
<el-radio label="0">缓存</el-radio>
|
||||||
|
<el-radio label="1">不缓存</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col v-if="form.menuType != 'F'" :span="12">
|
||||||
|
<el-form-item prop="visible">
|
||||||
|
<span slot="label">
|
||||||
|
<el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
|
||||||
|
<i class="el-icon-question"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
显示状态
|
||||||
|
</span>
|
||||||
|
<el-radio-group v-model="form.visible">
|
||||||
|
<el-radio
|
||||||
|
v-for="dict in dict.type.sys_show_hide"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.value"
|
||||||
|
>{{ dict.label }}
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item prop="status">
|
||||||
|
<span slot="label">
|
||||||
|
<el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
|
||||||
|
<i class="el-icon-question"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
菜单状态
|
||||||
|
</span>
|
||||||
|
<el-radio-group v-model="form.status">
|
||||||
|
<el-radio
|
||||||
|
v-for="dict in dict.type.sys_normal_disable"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.value"
|
||||||
|
>{{ dict.label }}
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {addMenu, delMenu, getMenu, listMenu, updateMenu} from "@/api/system/menu";
|
||||||
|
import Treeselect from "@riophae/vue-treeselect";
|
||||||
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||||
|
import IconSelect from "@/components/IconSelect";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Menu",
|
||||||
|
dicts: ['sys_show_hide', 'sys_normal_disable'],
|
||||||
|
components: {Treeselect, IconSelect},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 菜单表格树数据
|
||||||
|
menuList: [],
|
||||||
|
// 菜单树选项
|
||||||
|
menuOptions: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 是否展开，默认全部折叠
|
||||||
|
isExpandAll: false,
|
||||||
|
// 重新渲染表格状态
|
||||||
|
refreshTable: true,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
menuName: undefined,
|
||||||
|
visible: undefined
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
menuName: [
|
||||||
|
{required: true, message: "菜单名称不能为空", trigger: "blur"}
|
||||||
|
],
|
||||||
|
orderNum: [
|
||||||
|
{required: true, message: "菜单顺序不能为空", trigger: "blur"}
|
||||||
|
],
|
||||||
|
path: [
|
||||||
|
{required: true, message: "路由地址不能为空", trigger: "blur"}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 选择图标
|
||||||
|
selected(name) {
|
||||||
|
this.form.icon = name;
|
||||||
|
},
|
||||||
|
/** 查询菜单列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
listMenu(this.queryParams).then(response => {
|
||||||
|
this.menuList = this.handleTree(response.data, "menuId");
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 转换菜单数据结构 */
|
||||||
|
normalizer(node) {
|
||||||
|
if (node.children && !node.children.length) {
|
||||||
|
delete node.children;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
id: node.menuId,
|
||||||
|
label: node.menuName,
|
||||||
|
children: node.children
|
||||||
|
};
|
||||||
|
},
|
||||||
|
/** 查询菜单下拉树结构 */
|
||||||
|
getTreeselect() {
|
||||||
|
listMenu().then(response => {
|
||||||
|
this.menuOptions = [];
|
||||||
|
const menu = {menuId: 0, menuName: '主类目', children: []};
|
||||||
|
menu.children = this.handleTree(response.data, "menuId");
|
||||||
|
this.menuOptions.push(menu);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
menuId: undefined,
|
||||||
|
parentId: 0,
|
||||||
|
menuName: undefined,
|
||||||
|
icon: undefined,
|
||||||
|
menuType: "M",
|
||||||
|
orderNum: undefined,
|
||||||
|
isFrame: "1",
|
||||||
|
isCache: "0",
|
||||||
|
visible: "0",
|
||||||
|
status: "0"
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd(row) {
|
||||||
|
this.reset();
|
||||||
|
this.getTreeselect();
|
||||||
|
if (row != null && row.menuId) {
|
||||||
|
this.form.parentId = row.menuId;
|
||||||
|
} else {
|
||||||
|
this.form.parentId = 0;
|
||||||
|
}
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加菜单";
|
||||||
|
},
|
||||||
|
/** 展开/折叠操作 */
|
||||||
|
toggleExpandAll() {
|
||||||
|
this.refreshTable = false;
|
||||||
|
this.isExpandAll = !this.isExpandAll;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.refreshTable = true;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
this.getTreeselect();
|
||||||
|
getMenu(row.menuId).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改菜单";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm: function () {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.menuId != undefined) {
|
||||||
|
updateMenu(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addMenu(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function () {
|
||||||
|
return delMenu(row.menuId);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue