导航is-active完成

main
qzp 2 years ago
parent 1a28c7bc72
commit 589216d6b0

@ -87,6 +87,7 @@
& .theme-dark .is-active > .el-submenu__title { & .theme-dark .is-active > .el-submenu__title {
color: $base-menu-color-active !important; color: $base-menu-color-active !important;
// border-left: 5px solid $base-menu-color-active !important;
} }
& .nest-menu .el-submenu>.el-submenu__title, & .nest-menu .el-submenu>.el-submenu__title,
@ -203,6 +204,7 @@
.el-menu-item { .el-menu-item {
&:hover { &:hover {
// you can use $subMenuHover // you can use $subMenuHover
// background-color: rgba(0, 0, 0, 0.06) !important;
background-color: rgba(0, 0, 0, 0.06) !important; background-color: rgba(0, 0, 0, 0.06) !important;
} }
} }
@ -226,3 +228,9 @@
} }
} }
} }
.el-menu-item.is-active{
border-left: 5px solid #409eff !important;
}
.el-scrollbar__view {
margin-top: 10px;
}

@ -5,33 +5,35 @@
@select="handleSelect" @select="handleSelect"
> >
<template v-for="(item, index) in topMenus"> <template v-for="(item, index) in topMenus">
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber" <el-menu-item
v-if="index < visibleNumber"
:key="index"
:style="{'--theme': theme}"
:index="item.path"
><svg-icon :icon-class="item.meta.icon" /> ><svg-icon :icon-class="item.meta.icon" />
{{ item.meta.title }}</el-menu-item {{ item.meta.title }}</el-menu-item>
>
</template> </template>
<!-- 顶部菜单超出数量折叠 --> <!-- 顶部菜单超出数量折叠 -->
<el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber"> <el-submenu v-if="topMenus.length > visibleNumber" :style="{'--theme': theme}" index="more">
<template slot="title">更多菜单</template> <template slot="title">更多菜单</template>
<template v-for="(item, index) in topMenus"> <template v-for="(item, index) in topMenus">
<el-menu-item <el-menu-item
:index="item.path"
:key="index"
v-if="index >= visibleNumber" v-if="index >= visibleNumber"
:key="index"
:index="item.path"
><svg-icon :icon-class="item.meta.icon" /> ><svg-icon :icon-class="item.meta.icon" />
{{ item.meta.title }}</el-menu-item {{ item.meta.title }}</el-menu-item>
>
</template> </template>
</el-submenu> </el-submenu>
</el-menu> </el-menu>
</template> </template>
<script> <script>
import { constantRoutes } from "@/router"; import { constantRoutes } from '@/router'
// //
const hideList = ['/index', '/user/profile']; const hideList = ['/index', '/user/profile']
export default { export default {
data() { data() {
@ -40,68 +42,68 @@ export default {
visibleNumber: 5, visibleNumber: 5,
// index // index
currentIndex: undefined currentIndex: undefined
}; }
}, },
computed: { computed: {
theme() { theme() {
return this.$store.state.settings.theme; return this.$store.state.settings.theme
}, },
// //
topMenus() { topMenus() {
let topMenus = []; const topMenus = []
this.routers.map((menu) => { this.routers.map((menu) => {
if (menu.hidden !== true) { if (menu.hidden !== true) {
// //
if (menu.path === "/") { if (menu.path === '/') {
topMenus.push(menu.children[0]); topMenus.push(menu.children[0])
} else { } else {
topMenus.push(menu); topMenus.push(menu)
} }
} }
}); })
return topMenus; return topMenus
}, },
// //
routers() { routers() {
return this.$store.state.permission.topbarRouters; return this.$store.state.permission.topbarRouters
}, },
// //
childrenMenus() { childrenMenus() {
var childrenMenus = []; var childrenMenus = []
this.routers.map((router) => { this.routers.map((router) => {
for (var item in router.children) { for (var item in router.children) {
if (router.children[item].parentPath === undefined) { if (router.children[item].parentPath === undefined) {
if(router.path === "/") { if (router.path === '/') {
router.children[item].path = "/" + router.children[item].path; router.children[item].path = '/' + router.children[item].path
} else { } else {
if (!this.ishttp(router.children[item].path)) { if (!this.ishttp(router.children[item].path)) {
router.children[item].path = router.path + "/" + router.children[item].path; router.children[item].path = router.path + '/' + router.children[item].path
} }
} }
router.children[item].parentPath = router.path; router.children[item].parentPath = router.path
} }
childrenMenus.push(router.children[item]); childrenMenus.push(router.children[item])
} }
}); })
return constantRoutes.concat(childrenMenus); return constantRoutes.concat(childrenMenus)
}, },
// //
activeMenu() { activeMenu() {
const path = this.$route.path; const path = this.$route.path
let activePath = path; let activePath = path
if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) { if (path !== undefined && path.lastIndexOf('/') > 0 && hideList.indexOf(path) === -1) {
const tmpPath = path.substring(1, path.length); const tmpPath = path.substring(1, path.length)
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/")); activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'))
if (!this.$route.meta.link) { if (!this.$route.meta.link) {
this.$store.dispatch('app/toggleSideBarHide', false); this.$store.dispatch('app/toggleSideBarHide', false)
} }
} else if (!this.$route.children) { } else if (!this.$route.children) {
activePath = path; activePath = path
this.$store.dispatch('app/toggleSideBarHide', true); this.$store.dispatch('app/toggleSideBarHide', true)
}
this.activeRoutes(activePath)
return activePath
} }
this.activeRoutes(activePath);
return activePath;
},
}, },
beforeMount() { beforeMount() {
window.addEventListener('resize', this.setVisibleNumber) window.addEventListener('resize', this.setVisibleNumber)
@ -110,58 +112,58 @@ export default {
window.removeEventListener('resize', this.setVisibleNumber) window.removeEventListener('resize', this.setVisibleNumber)
}, },
mounted() { mounted() {
this.setVisibleNumber(); this.setVisibleNumber()
}, },
methods: { methods: {
// //
setVisibleNumber() { setVisibleNumber() {
const width = document.body.getBoundingClientRect().width / 3; const width = document.body.getBoundingClientRect().width / 3
this.visibleNumber = parseInt(width / 85); this.visibleNumber = parseInt(width / 85)
}, },
// //
handleSelect(key, keyPath) { handleSelect(key, keyPath) {
this.currentIndex = key; this.currentIndex = key
const route = this.routers.find(item => item.path === key); const route = this.routers.find(item => item.path === key)
if (this.ishttp(key)) { if (this.ishttp(key)) {
// http(s):// // http(s)://
window.open(key, "_blank"); window.open(key, '_blank')
} else if (!route || !route.children) { } else if (!route || !route.children) {
// //
const routeMenu = this.childrenMenus.find(item => item.path === key); const routeMenu = this.childrenMenus.find(item => item.path === key)
if (routeMenu && routeMenu.query) { if (routeMenu && routeMenu.query) {
let query = JSON.parse(routeMenu.query); const query = JSON.parse(routeMenu.query)
this.$router.push({ path: key, query: query }); this.$router.push({ path: key, query: query })
} else { } else {
this.$router.push({ path: key }); this.$router.push({ path: key })
} }
this.$store.dispatch('app/toggleSideBarHide', true); this.$store.dispatch('app/toggleSideBarHide', true)
} else { } else {
// //
this.activeRoutes(key); this.activeRoutes(key)
this.$store.dispatch('app/toggleSideBarHide', false); this.$store.dispatch('app/toggleSideBarHide', false)
} }
}, },
// //
activeRoutes(key) { activeRoutes(key) {
var routes = []; var routes = []
if (this.childrenMenus && this.childrenMenus.length > 0) { if (this.childrenMenus && this.childrenMenus.length > 0) {
this.childrenMenus.map((item) => { this.childrenMenus.map((item) => {
if (key == item.parentPath || (key == "index" && "" == item.path)) { if (key == item.parentPath || (key == 'index' && item.path == '')) {
routes.push(item); routes.push(item)
} }
}); })
} }
if (routes.length > 0) { if (routes.length > 0) {
this.$store.commit("SET_SIDEBAR_ROUTERS", routes); this.$store.commit('SET_SIDEBAR_ROUTERS', routes)
} else { } else {
this.$store.dispatch('app/toggleSideBarHide', true); this.$store.dispatch('app/toggleSideBarHide', true)
} }
}, },
ishttp(url) { ishttp(url) {
return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1 return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
} }
}, }
}; }
</script> </script>
<style lang="scss"> <style lang="scss">

@ -60,7 +60,7 @@ export default {
hasOneShowingChild(children = [], parent) { hasOneShowingChild(children = [], parent) {
// console.log(children,"parent"); // console.log(children,"parent");
if (!children) { if (!children) {
children = []; children = []
} }
const showingChildren = children.filter(item => { const showingChildren = children.filter(item => {
@ -76,7 +76,6 @@ export default {
// When there is only one child router, the child router is displayed by default // When there is only one child router, the child router is displayed by default
if (showingChildren.length === 1) { if (showingChildren.length === 1) {
return true return true
} }
@ -90,7 +89,7 @@ export default {
return false return false
}, },
resolvePath(routePath, routeQuery) { resolvePath(routePath, routeQuery) {
console.log(routePath,routeQuery,"路由"); console.log(routePath, routeQuery, '路由')
if (isExternal(routePath)) { if (isExternal(routePath)) {
return routePath return routePath
} }
@ -98,10 +97,10 @@ export default {
return this.basePath return this.basePath
} }
if (routeQuery) { if (routeQuery) {
let query = JSON.parse(routeQuery); const query = JSON.parse(routeQuery)
return { path: path.resolve(this.basePath, routePath), query: query } return { path: path.resolve(this.basePath, routePath), query: query }
} }
console.log(this.basePath, routePath,"this.basePath, routePath"); console.log(this.basePath, routePath, 'this.basePath, routePath')
return path.resolve(this.basePath, routePath) return path.resolve(this.basePath, routePath)
} }
} }

@ -61,7 +61,6 @@ export default {
} }
}, },
mounted() { mounted() {
const roleid = getroleId() const roleid = getroleId()
// roleid4,3 // roleid4,3
if (roleid == 4) { if (roleid == 4) {

@ -2,7 +2,7 @@
<div class="container"> <div class="container">
<div class="left-board"> <div class="left-board">
<div class="logo-wrapper"> <div class="logo-wrapper">
<div class="logo"><img :src="logo" alt="logo" /> Form Generator</div> <div class="logo"><img :src="logo" alt="logo"> Form Generator</div>
</div> </div>
<el-scrollbar class="left-scrollbar"> <el-scrollbar class="left-scrollbar">
<div class="components-list"> <div class="components-list">
@ -152,38 +152,38 @@
:show-file-name="showFileName" :show-file-name="showFileName"
@confirm="generate" @confirm="generate"
/> />
<input id="copyNode" type="hidden" /> <input id="copyNode" type="hidden">
</div> </div>
</template> </template>
<script> <script>
import draggable from "vuedraggable"; import draggable from 'vuedraggable'
import beautifier from "js-beautify"; import beautifier from 'js-beautify'
import ClipboardJS from "clipboard"; import ClipboardJS from 'clipboard'
import render from "@/utils/generator/render"; import render from '@/utils/generator/render'
import RightPanel from "./RightPanel"; import RightPanel from './RightPanel'
import { import {
inputComponents, inputComponents,
selectComponents, selectComponents,
layoutComponents, layoutComponents,
formConf, formConf
} from "@/utils/generator/config"; } from '@/utils/generator/config'
import { beautifierConf, titleCase } from "@/utils/index"; import { beautifierConf, titleCase } from '@/utils/index'
import { import {
makeUpHtml, makeUpHtml,
vueTemplate, vueTemplate,
vueScript, vueScript,
cssStyle, cssStyle
} from "@/utils/generator/html"; } from '@/utils/generator/html'
import { makeUpJs } from "@/utils/generator/js"; import { makeUpJs } from '@/utils/generator/js'
import { makeUpCss } from "@/utils/generator/css"; import { makeUpCss } from '@/utils/generator/css'
import drawingDefault from "@/utils/generator/drawingDefault"; import drawingDefault from '@/utils/generator/drawingDefault'
import logo from "@/assets/logo/logo.png"; import logo from '@/assets/logo/logo.png'
import CodeTypeDialog from "./CodeTypeDialog"; import CodeTypeDialog from './CodeTypeDialog'
import DraggableItem from "./DraggableItem"; import DraggableItem from './DraggableItem'
let oldActiveId; let oldActiveId
let tempActiveData; let tempActiveData
export default { export default {
components: { components: {
@ -191,7 +191,7 @@ export default {
render, render,
RightPanel, RightPanel,
CodeTypeDialog, CodeTypeDialog,
DraggableItem, DraggableItem
}, },
data() { data() {
return { return {
@ -210,201 +210,200 @@ export default {
dialogVisible: false, dialogVisible: false,
generateConf: null, generateConf: null,
showFileName: false, showFileName: false,
activeData: drawingDefault[0], activeData: drawingDefault[0]
}; }
},
created() {
// firefox
document.body.ondrop = (event) => {
event.preventDefault();
event.stopPropagation();
};
}, },
watch: { watch: {
// eslint-disable-next-line func-names // eslint-disable-next-line func-names
"activeData.label": function (val, oldVal) { 'activeData.label': function(val, oldVal) {
if ( if (
this.activeData.placeholder === undefined || this.activeData.placeholder === undefined ||
!this.activeData.tag || !this.activeData.tag ||
oldActiveId !== this.activeId oldActiveId !== this.activeId
) { ) {
return; return
} }
this.activeData.placeholder = this.activeData.placeholder =
this.activeData.placeholder.replace(oldVal, "") + val; this.activeData.placeholder.replace(oldVal, '') + val
}, },
activeId: { activeId: {
handler(val) { handler(val) {
oldActiveId = val; oldActiveId = val
}, },
immediate: true, immediate: true
}
}, },
created() {
// firefox
document.body.ondrop = (event) => {
event.preventDefault()
event.stopPropagation()
}
}, },
mounted() { mounted() {
const clipboard = new ClipboardJS("#copyNode", { const clipboard = new ClipboardJS('#copyNode', {
text: (trigger) => { text: (trigger) => {
const codeStr = this.generateCode(); const codeStr = this.generateCode()
this.$notify({ this.$notify({
title: "成功", title: '成功',
message: "代码已复制到剪切板,可粘贴。", message: '代码已复制到剪切板,可粘贴。',
type: "success", type: 'success'
}); })
return codeStr; return codeStr
}, }
}); })
clipboard.on("error", (e) => { clipboard.on('error', (e) => {
this.$message.error("代码复制失败"); this.$message.error('代码复制失败')
}); })
}, },
methods: { methods: {
activeFormItem(element) { activeFormItem(element) {
this.activeData = element; this.activeData = element
this.activeId = element.formId; this.activeId = element.formId
}, },
onEnd(obj, a) { onEnd(obj, a) {
if (obj.from !== obj.to) { if (obj.from !== obj.to) {
this.activeData = tempActiveData; this.activeData = tempActiveData
this.activeId = this.idGlobal; this.activeId = this.idGlobal
} }
}, },
addComponent(item) { addComponent(item) {
const clone = this.cloneComponent(item); const clone = this.cloneComponent(item)
this.drawingList.push(clone); this.drawingList.push(clone)
this.activeFormItem(clone); this.activeFormItem(clone)
}, },
cloneComponent(origin) { cloneComponent(origin) {
const clone = JSON.parse(JSON.stringify(origin)); const clone = JSON.parse(JSON.stringify(origin))
clone.formId = ++this.idGlobal; clone.formId = ++this.idGlobal
clone.span = formConf.span; clone.span = formConf.span
clone.renderKey = +new Date(); // renderKey clone.renderKey = +new Date() // renderKey
if (!clone.layout) clone.layout = "colFormItem"; if (!clone.layout) clone.layout = 'colFormItem'
if (clone.layout === "colFormItem") { if (clone.layout === 'colFormItem') {
clone.vModel = `field${this.idGlobal}`; clone.vModel = `field${this.idGlobal}`
clone.placeholder !== undefined && (clone.placeholder += clone.label); clone.placeholder !== undefined && (clone.placeholder += clone.label)
tempActiveData = clone; tempActiveData = clone
} else if (clone.layout === "rowFormItem") { } else if (clone.layout === 'rowFormItem') {
delete clone.label; delete clone.label
clone.componentName = `row${this.idGlobal}`; clone.componentName = `row${this.idGlobal}`
clone.gutter = this.formConf.gutter; clone.gutter = this.formConf.gutter
tempActiveData = clone; tempActiveData = clone
} }
return tempActiveData; return tempActiveData
}, },
AssembleFormData() { AssembleFormData() {
this.formData = { this.formData = {
fields: JSON.parse(JSON.stringify(this.drawingList)), fields: JSON.parse(JSON.stringify(this.drawingList)),
...this.formConf, ...this.formConf
}; }
}, },
generate(data) { generate(data) {
const func = this[`exec${titleCase(this.operationType)}`]; const func = this[`exec${titleCase(this.operationType)}`]
this.generateConf = data; this.generateConf = data
func && func(data); func && func(data)
}, },
execRun(data) { execRun(data) {
this.AssembleFormData(); this.AssembleFormData()
this.drawerVisible = true; this.drawerVisible = true
}, },
execDownload(data) { execDownload(data) {
const codeStr = this.generateCode(); const codeStr = this.generateCode()
const blob = new Blob([codeStr], { type: "text/plain;charset=utf-8" }); const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
this.$download.saveAs(blob, data.fileName); this.$download.saveAs(blob, data.fileName)
}, },
execCopy(data) { execCopy(data) {
document.getElementById("copyNode").click(); document.getElementById('copyNode').click()
}, },
empty() { empty() {
this.$confirm("确定要清空所有组件吗?", "提示", { type: "warning" }).then( this.$confirm('确定要清空所有组件吗?', '提示', { type: 'warning' }).then(
() => { () => {
this.drawingList = []; this.drawingList = []
} }
); )
}, },
drawingItemCopy(item, parent) { drawingItemCopy(item, parent) {
let clone = JSON.parse(JSON.stringify(item)); let clone = JSON.parse(JSON.stringify(item))
clone = this.createIdAndKey(clone); clone = this.createIdAndKey(clone)
parent.push(clone); parent.push(clone)
this.activeFormItem(clone); this.activeFormItem(clone)
}, },
createIdAndKey(item) { createIdAndKey(item) {
item.formId = ++this.idGlobal; item.formId = ++this.idGlobal
item.renderKey = +new Date(); item.renderKey = +new Date()
if (item.layout === "colFormItem") { if (item.layout === 'colFormItem') {
item.vModel = `field${this.idGlobal}`; item.vModel = `field${this.idGlobal}`
} else if (item.layout === "rowFormItem") { } else if (item.layout === 'rowFormItem') {
item.componentName = `row${this.idGlobal}`; item.componentName = `row${this.idGlobal}`
} }
if (Array.isArray(item.children)) { if (Array.isArray(item.children)) {
item.children = item.children.map((childItem) => item.children = item.children.map((childItem) =>
this.createIdAndKey(childItem) this.createIdAndKey(childItem)
); )
} }
return item; return item
}, },
drawingItemDelete(index, parent) { drawingItemDelete(index, parent) {
parent.splice(index, 1); parent.splice(index, 1)
this.$nextTick(() => { this.$nextTick(() => {
const len = this.drawingList.length; const len = this.drawingList.length
if (len) { if (len) {
this.activeFormItem(this.drawingList[len - 1]); this.activeFormItem(this.drawingList[len - 1])
} }
}); })
}, },
generateCode() { generateCode() {
const { type } = this.generateConf; const { type } = this.generateConf
this.AssembleFormData(); this.AssembleFormData()
const script = vueScript(makeUpJs(this.formData, type)); const script = vueScript(makeUpJs(this.formData, type))
const html = vueTemplate(makeUpHtml(this.formData, type)); const html = vueTemplate(makeUpHtml(this.formData, type))
const css = cssStyle(makeUpCss(this.formData)); const css = cssStyle(makeUpCss(this.formData))
return beautifier.html(html + script + css, beautifierConf.html); return beautifier.html(html + script + css, beautifierConf.html)
}, },
download() { download() {
this.dialogVisible = true; this.dialogVisible = true
this.showFileName = true; this.showFileName = true
this.operationType = "download"; this.operationType = 'download'
}, },
run() { run() {
this.dialogVisible = true; this.dialogVisible = true
this.showFileName = false; this.showFileName = false
this.operationType = "run"; this.operationType = 'run'
}, },
copy() { copy() {
this.dialogVisible = true; this.dialogVisible = true
this.showFileName = false; this.showFileName = false
this.operationType = "copy"; this.operationType = 'copy'
}, },
tagChange(newTag) { tagChange(newTag) {
newTag = this.cloneComponent(newTag); newTag = this.cloneComponent(newTag)
newTag.vModel = this.activeData.vModel; newTag.vModel = this.activeData.vModel
newTag.formId = this.activeId; newTag.formId = this.activeId
newTag.span = this.activeData.span; newTag.span = this.activeData.span
delete this.activeData.tag; delete this.activeData.tag
delete this.activeData.tagIcon; delete this.activeData.tagIcon
delete this.activeData.document; delete this.activeData.document
Object.keys(newTag).forEach((key) => { Object.keys(newTag).forEach((key) => {
if ( if (
this.activeData[key] !== undefined && this.activeData[key] !== undefined &&
typeof this.activeData[key] === typeof newTag[key] typeof this.activeData[key] === typeof newTag[key]
) { ) {
newTag[key] = this.activeData[key]; newTag[key] = this.activeData[key]
} }
}); })
this.activeData = newTag; this.activeData = newTag
this.updateDrawingList(newTag, this.drawingList); this.updateDrawingList(newTag, this.drawingList)
}, },
updateDrawingList(newTag, list) { updateDrawingList(newTag, list) {
const index = list.findIndex((item) => item.formId === this.activeId); const index = list.findIndex((item) => item.formId === this.activeId)
if (index > -1) { if (index > -1) {
list.splice(index, 1, newTag); list.splice(index, 1, newTag)
} else { } else {
list.forEach((item) => { list.forEach((item) => {
if (Array.isArray(item.children)) if (Array.isArray(item.children)) { this.updateDrawingList(newTag, item.children) }
this.updateDrawingList(newTag, item.children); })
}); }
}
}
} }
},
},
};
</script> </script>
<style lang='scss'> <style lang='scss'>
@ -443,6 +442,7 @@ export default {
.right-scrollbar { .right-scrollbar {
.el-scrollbar__view { .el-scrollbar__view {
padding: 12px 18px 15px 15px; padding: 12px 18px 15px 15px;
} }
} }
.left-scrollbar .el-scrollbar__wrap { .left-scrollbar .el-scrollbar__wrap {

Loading…
Cancel
Save