wangqing
5 years ago
21 changed files with 838 additions and 620 deletions
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
@ -1,56 +0,0 @@ |
|||||
// import api from '@/api'
|
|
||||
|
|
||||
const state = { |
|
||||
token: localStorage.token, |
|
||||
failuretime: localStorage.failuretime |
|
||||
} |
|
||||
|
|
||||
const getters = { |
|
||||
isLogin: state => { |
|
||||
return state.token |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const actions = { |
|
||||
login({ |
|
||||
commit |
|
||||
}) { |
|
||||
return new Promise(resolve => { |
|
||||
// 模拟登录成功，写入 token 信息
|
|
||||
commit('setData', { |
|
||||
token: '1234567890', |
|
||||
failuretime: Date.parse(new Date()) / 1000 + 24 * 60 * 60 |
|
||||
}) |
|
||||
resolve() |
|
||||
}) |
|
||||
} |
|
||||
// login({
|
|
||||
// commit
|
|
||||
// }, data) {
|
|
||||
// return new Promise((resolve, reject) => {
|
|
||||
// api.post('member/login', data).then(res => {
|
|
||||
// commit('setData', res.data)
|
|
||||
// resolve(res)
|
|
||||
// }).catch(error => {
|
|
||||
// reject(error)
|
|
||||
// })
|
|
||||
// })
|
|
||||
// }
|
|
||||
} |
|
||||
|
|
||||
const mutations = { |
|
||||
setData(state, data) { |
|
||||
localStorage.setItem('token', data.token) |
|
||||
localStorage.setItem('failuretime', data.failuretime) |
|
||||
state.token = data.token |
|
||||
state.failuretime = data.failuretime |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export default { |
|
||||
namespaced: true, |
|
||||
state, |
|
||||
actions, |
|
||||
getters, |
|
||||
mutations |
|
||||
} |
|
||||
@ -1,13 +0,0 @@ |
|||||
<template> |
|
||||
<div id="console" style="height: 690px; /* 开发时请将此样式移除 */"> |
|
||||
控制台 |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'Console', |
|
||||
data() { |
|
||||
return { } |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -0,0 +1,388 @@ |
|||||
|
<template> |
||||
|
<div class="container"> |
||||
|
<div class="left-board"> |
||||
|
<el-scrollbar class="left-scrollbar"> |
||||
|
<div class="components-list"> |
||||
|
<div v-for="(item, listIndex) in leftComponents" :key="listIndex"> |
||||
|
<div class="components-title"> |
||||
|
<svg-icon name="component"/> |
||||
|
{{ item.title }} |
||||
|
</div> |
||||
|
<draggable |
||||
|
class="components-draggable" |
||||
|
:list="item.list" |
||||
|
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" |
||||
|
:clone="cloneComponent" |
||||
|
draggable=".components-item" |
||||
|
:sort="false" |
||||
|
@end="onEnd" |
||||
|
> |
||||
|
<div |
||||
|
v-for="(element, index) in item.list" |
||||
|
:key="index" |
||||
|
class="components-item" |
||||
|
@click="addComponent(element)" |
||||
|
> |
||||
|
<div class="components-body"> |
||||
|
<svg-icon :name="element.__config__.tagIcon"/> |
||||
|
{{ element.__config__.label }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</draggable> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-scrollbar> |
||||
|
</div> |
||||
|
<div class="center-board"> |
||||
|
|
||||
|
<el-scrollbar class="center-scrollbar"> |
||||
|
<el-row class="center-board-row" :gutter="formConf.gutter"> |
||||
|
<el-row type="flex" justify="center" align="middle"> |
||||
|
<el-col :span="20" style="text-align: center"> |
||||
|
<h4 class="form-name-text" contenteditable="true" |
||||
|
@blur="(event)=>{ |
||||
|
formConf.title=event.target.innerText; |
||||
|
this.saveProjectInfo()}"> |
||||
|
{{formConf.title}}</h4> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row type="flex" justify="center" align="middle"> |
||||
|
<el-col :span="20" style="text-align: center"> |
||||
|
<p class="form-name-text" contenteditable="true" |
||||
|
@blur="(event)=>{ |
||||
|
formConf.description=event.target.innerText; |
||||
|
this.saveProjectInfo()}"> |
||||
|
{{formConf.description}} |
||||
|
</p> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-divider></el-divider> |
||||
|
<el-form |
||||
|
:size="formConf.size" |
||||
|
:label-position="formConf.labelPosition" |
||||
|
:disabled="formConf.disabled" |
||||
|
:label-width="formConf.labelWidth + 'px'" |
||||
|
> |
||||
|
<draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup" @end="onItemEnd"> |
||||
|
<draggable-item |
||||
|
v-for="(item, index) in drawingList" |
||||
|
:key="item.renderKey" |
||||
|
:drawing-list="drawingList" |
||||
|
:current-item="item" |
||||
|
:index="index" |
||||
|
:active-id="activeId" |
||||
|
:form-conf="formConf" |
||||
|
@activeItem="activeFormItem" |
||||
|
@changeLabel="changeLabel" |
||||
|
@copyItem="drawingItemCopy" |
||||
|
@deleteItem="drawingItemDelete" |
||||
|
/> |
||||
|
</draggable> |
||||
|
<div v-show="!drawingList.length" class="empty-info"> |
||||
|
从左侧拖入或点选组件进行表单设计 |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</el-row> |
||||
|
</el-scrollbar> |
||||
|
</div> |
||||
|
<right-panel |
||||
|
v-if="activeData" |
||||
|
:active-data="activeData" |
||||
|
:form-conf="formConf" |
||||
|
:show-field="!!drawingList.length" |
||||
|
@tag-change="tagChange" |
||||
|
@data-change="updateProjectItemInfo" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import draggable from 'vuedraggable' |
||||
|
import {debounce} from 'throttle-debounce' |
||||
|
import render from '@/components/render/render' |
||||
|
import RightPanel from './RightPanel' |
||||
|
|
||||
|
import { |
||||
|
inputComponents, selectComponents, formConf |
||||
|
} from '@/components/generator/config' |
||||
|
import { |
||||
|
exportDefault, beautifierConf, isNumberStr, titleCase, deepClone |
||||
|
} from '@/utils/index' |
||||
|
import {formItemConvertData} from '@/utils/convert' |
||||
|
import drawingDefalut from '@/components/generator/drawingDefalut' |
||||
|
import DraggableItem from './DraggableItem' |
||||
|
import { |
||||
|
getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf |
||||
|
} from '@/utils/db' |
||||
|
|
||||
|
let oldActiveId |
||||
|
let tempActiveData |
||||
|
let drawingListInDB |
||||
|
let formConfInDB |
||||
|
let idGlobal |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
draggable, |
||||
|
render, |
||||
|
RightPanel, |
||||
|
DraggableItem |
||||
|
}, |
||||
|
props:{ |
||||
|
projectKey:'' |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
idGlobal, |
||||
|
formConf, |
||||
|
inputComponents, |
||||
|
selectComponents, |
||||
|
labelWidth: 100, |
||||
|
drawingList: drawingDefalut, |
||||
|
drawingData: {}, |
||||
|
activeId: drawingDefalut.length != 0 ? drawingDefalut[0].formId : 0, |
||||
|
formData: {}, |
||||
|
dialogVisible: false, |
||||
|
generateConf: null, |
||||
|
showFileName: false, |
||||
|
activeData: drawingDefalut ? drawingDefalut[0] : null, |
||||
|
saveDrawingListDebounce: debounce(340, saveDrawingList), |
||||
|
saveIdGlobalDebounce: debounce(340, saveIdGlobal), |
||||
|
leftComponents: [ |
||||
|
{ |
||||
|
title: '输入型组件', |
||||
|
list: inputComponents |
||||
|
}, |
||||
|
{ |
||||
|
title: '选择型组件', |
||||
|
list: selectComponents |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
watch: { |
||||
|
// eslint-disable-next-line func-names |
||||
|
'activeData.__config__.label': function(val, oldVal) { |
||||
|
if ( |
||||
|
this.activeData.placeholder === undefined |
||||
|
|| !this.activeData.__config__.tag |
||||
|
|| oldActiveId !== this.activeId |
||||
|
) { |
||||
|
return |
||||
|
} |
||||
|
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val |
||||
|
}, |
||||
|
activeId: { |
||||
|
handler(val) { |
||||
|
oldActiveId = val |
||||
|
}, |
||||
|
immediate: true |
||||
|
}, |
||||
|
drawingList: { |
||||
|
handler(val) { |
||||
|
this.saveDrawingListDebounce(val, this.projectKey) |
||||
|
if (val.length === 0) this.idGlobal = 100 |
||||
|
}, |
||||
|
deep: true |
||||
|
}, |
||||
|
idGlobal: { |
||||
|
handler(val) { |
||||
|
if (val) { |
||||
|
this.saveIdGlobalDebounce(val, this.projectKey) |
||||
|
} |
||||
|
}, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
//项目key |
||||
|
let projectKey = this.projectKey |
||||
|
//表单内容 如果表单为空 使用默认表单 |
||||
|
drawingListInDB = getDrawingList(projectKey) |
||||
|
if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) { |
||||
|
this.drawingList = drawingListInDB |
||||
|
} else { |
||||
|
this.drawingList = drawingDefalut |
||||
|
} |
||||
|
if (this.drawingList.length) { |
||||
|
this.activeFormItem(this.drawingList[0]) |
||||
|
} |
||||
|
//获取表单配置 |
||||
|
// formConfInDB = getFormConf(projectKey) |
||||
|
// if (formConfInDB) { |
||||
|
// this.formConf = formConfInDB |
||||
|
// } |
||||
|
//获取后台数据 |
||||
|
this.$api.get(`/user/project/query/${projectKey}`).then(res => { |
||||
|
this.formConf.title = res.data.name |
||||
|
this.formConf.description = res.data.describe |
||||
|
}) |
||||
|
//全局组件Id |
||||
|
if (getIdGlobal(projectKey)) { |
||||
|
this.idGlobal = getIdGlobal(projectKey) |
||||
|
} |
||||
|
this.projectKey = projectKey |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
saveProjectInfo: debounce(430, true, function() { |
||||
|
this.$api.post('/user/project/update', { |
||||
|
'key': this.projectKey, |
||||
|
'name': this.formConf.title, |
||||
|
'describe': this.formConf.description |
||||
|
}).then((res) => { |
||||
|
|
||||
|
}) |
||||
|
}), |
||||
|
updateProjectItemInfo(val) { |
||||
|
let data = formItemConvertData(val, this.projectKey) |
||||
|
this.$api.post('/user/project/item/update', data).then((res) => { |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
deleteProjectItemInfo(val) { |
||||
|
console.log(val) |
||||
|
let data = formItemConvertData(val, this.projectKey) |
||||
|
this.$api.post('/user/project/item/delete', data).then((res) => { |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
saveProjectItemInfo(item) { |
||||
|
let params = formItemConvertData(item, this.projectKey) |
||||
|
this.$api.post('/user/project/item/create', params).then(res => { |
||||
|
item.sort = res.data.sort |
||||
|
}) |
||||
|
}, |
||||
|
activeFormItem(currentItem) { |
||||
|
this.activeData = currentItem |
||||
|
this.activeId = currentItem.__config__.formId |
||||
|
}, |
||||
|
changeLabel(currentItem, value) { |
||||
|
console.log(currentItem) |
||||
|
console.log(value) |
||||
|
}, |
||||
|
onEnd(obj) { |
||||
|
if (obj.from !== obj.to) { |
||||
|
this.activeData = tempActiveData |
||||
|
this.activeId = this.idGlobal |
||||
|
} |
||||
|
}, |
||||
|
onItemEnd(obj){ |
||||
|
console.log(obj) |
||||
|
let params={'projectKey':this.projectKey} |
||||
|
if(this.drawingList[obj.newIndex-1]){ |
||||
|
let sort1=this.drawingList[obj.newIndex-1].sort |
||||
|
params.beforePosition=sort1 |
||||
|
} |
||||
|
if(this.drawingList[obj.newIndex+1]){ |
||||
|
let sort2= this.drawingList[obj.newIndex+1].sort |
||||
|
params.afterPosition=sort2 |
||||
|
} |
||||
|
params.formItemId=this.drawingList[obj.newIndex].__config__.formId |
||||
|
this.$api.post('/user/project/item/sort', params).then(res => { |
||||
|
this.drawingList[obj.newIndex].sort = res.data.sort |
||||
|
}) |
||||
|
}, |
||||
|
addComponent(item) { |
||||
|
const clone = this.cloneComponent(item) |
||||
|
this.drawingList.push(clone) |
||||
|
this.activeFormItem(clone) |
||||
|
}, |
||||
|
cloneComponent(origin,save=true) { |
||||
|
const clone = deepClone(origin) |
||||
|
const config = clone.__config__ |
||||
|
config.span = this.formConf.span // 生成代码时，会根据span做精简判断 |
||||
|
this.createIdAndKey(clone) |
||||
|
clone.placeholder !== undefined && (clone.placeholder += config.label) |
||||
|
tempActiveData = clone |
||||
|
if(save){ |
||||
|
this.saveProjectItemInfo(clone) |
||||
|
} |
||||
|
return tempActiveData |
||||
|
}, |
||||
|
createIdAndKey(item) { |
||||
|
const config = item.__config__ |
||||
|
config.formId = ++this.idGlobal |
||||
|
config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件 |
||||
|
if (config.layout === 'colFormItem') { |
||||
|
item.__vModel__ = `field${this.idGlobal}` |
||||
|
} else if (config.layout === 'rowFormItem') { |
||||
|
config.componentName = `row${this.idGlobal}` |
||||
|
!Array.isArray(config.children) && (config.children = []) |
||||
|
delete config.label // rowFormItem无需配置label属性 |
||||
|
} |
||||
|
if (Array.isArray(config.children)) { |
||||
|
config.children = config.children.map(childItem => this.createIdAndKey(childItem)) |
||||
|
} |
||||
|
return item |
||||
|
}, |
||||
|
empty() { |
||||
|
this.$confirm('确定要清空所有组件吗？', '提示', {type: 'warning'}) |
||||
|
.then( |
||||
|
() => { |
||||
|
this.drawingList = [] |
||||
|
this.idGlobal = 100 |
||||
|
} |
||||
|
) |
||||
|
}, |
||||
|
drawingItemCopy(item, list) { |
||||
|
let clone = deepClone(item) |
||||
|
clone = this.createIdAndKey(clone) |
||||
|
list.push(clone) |
||||
|
this.activeFormItem(clone) |
||||
|
this.saveProjectItemInfo(clone) |
||||
|
}, |
||||
|
drawingItemDelete(index, list) { |
||||
|
let item = list[index] |
||||
|
list.splice(index, 1) |
||||
|
this.$nextTick(() => { |
||||
|
const len = this.drawingList.length |
||||
|
if (len) { |
||||
|
this.activeFormItem(this.drawingList[len - 1]) |
||||
|
} |
||||
|
}) |
||||
|
this.deleteProjectItemInfo(item) |
||||
|
}, |
||||
|
tagChange(newTag) { |
||||
|
newTag = this.cloneComponent(newTag,false) |
||||
|
const config = newTag.__config__ |
||||
|
newTag.__vModel__ = this.activeData.__vModel__ |
||||
|
newTag.sort=this.activeData.sort |
||||
|
config.formId = this.activeId |
||||
|
config.span = this.activeData.__config__.span |
||||
|
this.activeData.__config__.tag = config.tag |
||||
|
this.activeData.__config__.tagIcon = config.tagIcon |
||||
|
this.activeData.__config__.document = config.document |
||||
|
this.activeData.typeId=newTag.typeId |
||||
|
if (typeof this.activeData.__config__.defaultValue === typeof config.defaultValue) { |
||||
|
config.defaultValue = this.activeData.__config__.defaultValue |
||||
|
} |
||||
|
Object.keys(newTag) |
||||
|
.forEach(key => { |
||||
|
if (this.activeData[key] !== undefined) { |
||||
|
newTag[key] = this.activeData[key] |
||||
|
} |
||||
|
}) |
||||
|
this.activeData = newTag |
||||
|
this.updateProjectItemInfo(newTag) |
||||
|
this.updateDrawingList(newTag, this.drawingList) |
||||
|
}, |
||||
|
updateDrawingList(newTag, list) { |
||||
|
const index = list.findIndex(item => item.__config__.formId === this.activeId) |
||||
|
if (index > -1) { |
||||
|
list.splice(index, 1, newTag) |
||||
|
} else { |
||||
|
list.forEach(item => { |
||||
|
if (Array.isArray(item.__config__.children)) this.updateDrawingList(newTag, item.__config__.children) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss'> |
||||
|
@import '@/assets/styles/home'; |
||||
|
@import '@/assets/styles/index'; |
||||
|
</style> |
||||
@ -0,0 +1,133 @@ |
|||||
|
<template xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"> |
||||
|
<div class="theme-container"> |
||||
|
<el-row> |
||||
|
<el-col :span="8" :offset="1"> |
||||
|
<div class="left-container"> |
||||
|
<p class="theme-title">外观主题</p> |
||||
|
<el-row> |
||||
|
<el-col :span="3"> |
||||
|
<span class="theme-prompt-text">风格</span> |
||||
|
</el-col> |
||||
|
<el-col :span="3" v-for="item in styleList"> |
||||
|
<span class="style-btn">{{item.label}}</span> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="3"> |
||||
|
<span class="theme-prompt-text">颜色</span> |
||||
|
</el-col> |
||||
|
<el-col v-bind:style="{backgroundColor: c}" class="color-btn" :span="3" v-for="c in colorList"> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
|
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
外观设置 |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'theme', |
||||
|
data() { |
||||
|
return { |
||||
|
styleList: [ |
||||
|
{'label': '节日', 'key': 'festival'}, |
||||
|
{'label': '亲子', 'key': 'parent_child'}, |
||||
|
{'label': '风景', 'key': 'scenery'}, |
||||
|
{'label': '职业', 'key': 'occupation'}, |
||||
|
{'label': '校园', 'key': 'school'}, |
||||
|
{'label': '商务', 'key': 'commerce'}, |
||||
|
{'label': '其他', 'key': 'others'}, |
||||
|
{'label': '餐饮', 'key': 'catering'}, |
||||
|
{'label': '防疫', 'key': 'fangyi'} |
||||
|
], |
||||
|
colorList: [ |
||||
|
'#FF6D56', |
||||
|
'#F8E71C', |
||||
|
'#00BF6F', |
||||
|
'#2672FF ', |
||||
|
'#7464FF', |
||||
|
'#484848', |
||||
|
'#EAEAEA', |
||||
|
'#804000' |
||||
|
] |
||||
|
} |
||||
|
}, methods: { |
||||
|
tet() { |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.theme-container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow-y: hidden; |
||||
|
background-color: #f7f7f7; |
||||
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; |
||||
|
} |
||||
|
|
||||
|
.left-container { |
||||
|
width: 341px; |
||||
|
height: 845px; |
||||
|
line-height: 20px; |
||||
|
border-radius: 7px; |
||||
|
text-align: center; |
||||
|
padding: 30px; |
||||
|
border: 1px solid rgba(255, 255, 255, 100); |
||||
|
background-color: white; |
||||
|
} |
||||
|
|
||||
|
.style-btn { |
||||
|
line-height: 25px; |
||||
|
border-radius: 4px; |
||||
|
padding: 2px; |
||||
|
color: rgba(16, 16, 16, 100); |
||||
|
font-size: 14px; |
||||
|
margin: 3px; |
||||
|
text-align: center; |
||||
|
font-family: Arial; |
||||
|
border: 1px solid rgba(187, 187, 187, 100); |
||||
|
} |
||||
|
|
||||
|
.theme-title { |
||||
|
color: rgba(16, 16, 16, 100); |
||||
|
font-size: 24px; |
||||
|
text-align: left; |
||||
|
font-family: SourceHanSansSC-regular; |
||||
|
} |
||||
|
|
||||
|
.theme-prompt-text { |
||||
|
color: rgba(16, 16, 16, 100); |
||||
|
font-size: 14px; |
||||
|
line-height: 20px; |
||||
|
text-align: left; |
||||
|
font-family: SourceHanSansSC-regular; |
||||
|
} |
||||
|
|
||||
|
.color-btn { |
||||
|
width: 40px; |
||||
|
height: 22px; |
||||
|
line-height: 20px; |
||||
|
border-radius: 4px; |
||||
|
background-color: rgba(11, 141, 213, 100); |
||||
|
color: rgba(16, 16, 16, 100); |
||||
|
font-size: 14px; |
||||
|
text-align: center; |
||||
|
font-family: Arial; |
||||
|
margin: 3px; |
||||
|
border: 1px solid rgba(255, 255, 255, 100); |
||||
|
} |
||||
|
|
||||
|
.color-btn:hover, |
||||
|
.style-btn:hover { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
</style> |
||||
@ -1,5 +1,5 @@ |
|||||
<template> |
<template> |
||||
<div id="enterprise" style="height: 690px; /* 开发时请将此样式移除 */"> |
<div id="enterprise"> |
||||
企业部署 |
企业部署 |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
@ -0,0 +1,121 @@ |
|||||
|
<template> |
||||
|
<div id="welcome"> |
||||
|
<div class="header-container"> |
||||
|
<el-row type="flex" align="middle"> |
||||
|
<el-col class="header-col" :span="3" :offset="3"> |
||||
|
<div> |
||||
|
<img src="@/assets/images/indexLogo.png" class="header-logo" |
||||
|
@click="$router.push({path:'/home'})" |
||||
|
> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col class="header-col" :span="10" :offset="3"> |
||||
|
<el-menu :default-active="menuIndex" mode="horizontal" :router="true" text-color="#205BB5" |
||||
|
active-text-color="#205BB5" |
||||
|
> |
||||
|
<el-menu-item v-for="(item, index) in menuRouters" :key="index" :index="item.routerPath" |
||||
|
:route="item.routerPath" class="menu-item" |
||||
|
> |
||||
|
{{ item.title }} |
||||
|
</el-menu-item> |
||||
|
</el-menu> |
||||
|
</el-col> |
||||
|
<el-col class="header-col" :span="3"> |
||||
|
<el-button v-if="isLogin" class="header-btn" @click="$router.push({path:'/home'})">控 制 台</el-button> |
||||
|
<el-button v-if="!isLogin&&this.$route.path!='/login' " class="header-btn" @click="$router.push({path:'/login'})">登 录</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<el-row> |
||||
|
<router-view /> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import store from '@/store/index.js' |
||||
|
|
||||
|
export default { |
||||
|
name: 'Official', |
||||
|
data() { |
||||
|
return { |
||||
|
menuIndex: null, |
||||
|
menuRouters: [ |
||||
|
{ |
||||
|
routerPath: '/proposal', |
||||
|
title: '提出建议' |
||||
|
}, |
||||
|
{ |
||||
|
routerPath: '/sources', |
||||
|
title: '开源版本' |
||||
|
}, |
||||
|
{ |
||||
|
routerPath: '/enterprise', |
||||
|
title: '企业部署' |
||||
|
}, |
||||
|
{ |
||||
|
routerPath: '/', |
||||
|
title: '首页' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
getStore() { |
||||
|
return store |
||||
|
}, |
||||
|
isLogin() { |
||||
|
return this.getStore.getters['token/isLogin'] |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
$route(to) { |
||||
|
this.menuIndex = to.path |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.menuIndex = this.$route.path |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.header-col, |
||||
|
.body-col { |
||||
|
border: solid thin white; |
||||
|
} |
||||
|
.header-container { |
||||
|
background-color: white; |
||||
|
width: 100%; |
||||
|
top: 0; |
||||
|
z-index: 100; |
||||
|
} |
||||
|
.header-container .header-col .el-menu--horizontal { |
||||
|
border: none; |
||||
|
} |
||||
|
.header-logo { |
||||
|
float: left; |
||||
|
cursor: pointer; |
||||
|
height: 60px; |
||||
|
padding: 25px 0 20px 0; |
||||
|
} |
||||
|
.menu-item { |
||||
|
line-height: 110px; |
||||
|
height: 110px; |
||||
|
font-size: 18px; |
||||
|
font-weight: 900; |
||||
|
float: right; |
||||
|
} |
||||
|
.header-btn { |
||||
|
margin: 35px 0 35px 20px; |
||||
|
float: right; |
||||
|
color: #205bb5; |
||||
|
border-color: #205bb5; |
||||
|
} |
||||
|
.header-btn:focus, |
||||
|
.header-btn:hover { |
||||
|
border-color: #205bb5; |
||||
|
color: #205bb5; |
||||
|
} |
||||
|
.view_container_content p { |
||||
|
color: #205bb5; |
||||
|
} |
||||
|
</style> |
||||
@ -1,5 +1,5 @@ |
|||||
<template> |
<template> |
||||
<div id="proposal" style="height: 690px; /* 开发时请将此样式移除 */"> |
<div id="proposal"> |
||||
提出建议 |
提出建议 |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
@ -1,5 +1,5 @@ |
|||||
<template> |
<template> |
||||
<div id="sources" style="height: 690px; /* 开发时请将此样式移除 */"> |
<div id="sources"> |
||||
开源版本 |
开源版本 |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
Loading…
Reference in new issue