|
|
|
@ -1,6 +1,6 @@ |
|
|
|
<template> |
|
|
|
<div class="form-index-container"> |
|
|
|
<!-- <el-card class="header-container"> |
|
|
|
<div class="form-index-container"> |
|
|
|
<!-- <el-card class="header-container"> |
|
|
|
<el-row align="middle" type="flex" :gutter="5"> |
|
|
|
<i class="el-icon-back" @click="$router.back(-1)" /> |
|
|
|
<img class="header-logo" src="@/assets/images/indexLogo.svg" @click="$router.push({path:'/home'})"> |
|
|
|
@ -13,43 +13,39 @@ |
|
|
|
</el-button> |
|
|
|
</el-row> |
|
|
|
</el-card> --> |
|
|
|
<div class="main-container"> |
|
|
|
<div class="left-menu-container"> |
|
|
|
<el-menu :collapse="isCollapse" |
|
|
|
:default-active="defaultActiveMenu" |
|
|
|
class="el-menu-vertical" |
|
|
|
> |
|
|
|
<el-menu-item v-for="menuItem in menuItemList" |
|
|
|
:key="menuItem.key" |
|
|
|
:index="menuItem.route" |
|
|
|
@click="menuSelectHandle(menuItem.route,menuItem.key)" |
|
|
|
> |
|
|
|
<i :class="menuItem.icon" /> |
|
|
|
<span slot="title">{{ menuItem.title }}</span> |
|
|
|
</el-menu-item> |
|
|
|
</el-menu> |
|
|
|
<i v-if="!isCollapse" |
|
|
|
class="el-icon-d-arrow-left" |
|
|
|
@click="collapseHandle" |
|
|
|
/> |
|
|
|
<i v-else |
|
|
|
class="el-icon-d-arrow-right" |
|
|
|
@click="collapseHandle" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="right-content-container"> |
|
|
|
<router-view /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-dialog :visible.sync="previewDialogVisible" |
|
|
|
destroy-on-close |
|
|
|
fullscreen |
|
|
|
> |
|
|
|
<pre-view :key="previewKey" |
|
|
|
:preview-qrcode="true" |
|
|
|
/> |
|
|
|
</el-dialog> |
|
|
|
<div class="main-container"> |
|
|
|
<div class="left-menu-container"> |
|
|
|
<el-menu :collapse="isCollapse" |
|
|
|
:default-active="defaultActiveMenu" |
|
|
|
class="el-menu-vertical"> |
|
|
|
<el-menu-item v-for="menuItem in (publishStatus? menuItemList2:menuItemList)" |
|
|
|
:key="menuItem.key" |
|
|
|
:index="menuItem.route" |
|
|
|
@click="menuSelectHandle(menuItem.route,menuItem.key)"> |
|
|
|
|
|
|
|
<i :class="menuItem.icon" /> |
|
|
|
<span slot="title">{{ menuItem.title }}</span> |
|
|
|
|
|
|
|
</el-menu-item> |
|
|
|
</el-menu> |
|
|
|
<i v-if="!isCollapse" |
|
|
|
class="el-icon-d-arrow-left" |
|
|
|
@click="collapseHandle" /> |
|
|
|
<i v-else |
|
|
|
class="el-icon-d-arrow-right" |
|
|
|
@click="collapseHandle" /> |
|
|
|
</div> |
|
|
|
<div class="right-content-container"> |
|
|
|
<router-view /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-dialog :visible.sync="previewDialogVisible" |
|
|
|
destroy-on-close |
|
|
|
fullscreen> |
|
|
|
<pre-view :key="previewKey" |
|
|
|
:preview-qrcode="true" /> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
@ -57,104 +53,137 @@ import PreView from '@/views/form/preview' |
|
|
|
import { formConf } from '@/components/generator/config' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'NewIndex', |
|
|
|
components: { PreView }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
previewKey: +new Date(), |
|
|
|
previewDialogVisible: false, |
|
|
|
defaultActiveMenu: '', |
|
|
|
projectKey: null, |
|
|
|
isCollapse: false, |
|
|
|
menuItemList: [ |
|
|
|
{ |
|
|
|
key: 'edit', |
|
|
|
title: '编辑', |
|
|
|
icon: 'el-icon-edit', |
|
|
|
route: '/project/form/editor' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'logic', |
|
|
|
title: '逻辑', |
|
|
|
icon: 'el-icon-menu', |
|
|
|
route: '/project/form/logic' |
|
|
|
}, { |
|
|
|
key: 'view', |
|
|
|
title: '外观', |
|
|
|
icon: 'el-icon-view', |
|
|
|
route: '/project/form/theme' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'set', |
|
|
|
title: '设置', |
|
|
|
icon: 'el-icon-setting', |
|
|
|
route: '/project/form/setting' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'publish', |
|
|
|
title: '发布', |
|
|
|
icon: 'el-icon-video-play', |
|
|
|
route: '/project/form/publish' |
|
|
|
}, { |
|
|
|
key: 'static', |
|
|
|
title: '统计', |
|
|
|
icon: 'el-icon-data-line', |
|
|
|
route: '/project/form/statistics' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'preview', |
|
|
|
title: '预览', |
|
|
|
icon: 'el-icon-view' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'save', |
|
|
|
title: '保存', |
|
|
|
icon: 'el-icon-folder-add' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'back', |
|
|
|
title: '返回', |
|
|
|
icon: 'el-icon-edit' |
|
|
|
} |
|
|
|
] |
|
|
|
name: 'NewIndex', |
|
|
|
components: { PreView }, |
|
|
|
data () { |
|
|
|
return { |
|
|
|
publishStatus: false, |
|
|
|
previewKey: +new Date(), |
|
|
|
previewDialogVisible: false, |
|
|
|
defaultActiveMenu: '', |
|
|
|
projectKey: null, |
|
|
|
isCollapse: false, |
|
|
|
menuItemList: [ |
|
|
|
{ |
|
|
|
key: 'edit', |
|
|
|
title: '编辑', |
|
|
|
icon: 'el-icon-edit', |
|
|
|
route: '/project/form/editor' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'logic', |
|
|
|
title: '逻辑', |
|
|
|
icon: 'el-icon-menu', |
|
|
|
route: '/project/form/logic' |
|
|
|
}, { |
|
|
|
key: 'view', |
|
|
|
title: '外观', |
|
|
|
icon: 'el-icon-view', |
|
|
|
route: '/project/form/theme' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'set', |
|
|
|
title: '设置', |
|
|
|
icon: 'el-icon-setting', |
|
|
|
route: '/project/form/setting' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'publish', |
|
|
|
title: '发布', |
|
|
|
icon: 'el-icon-video-play', |
|
|
|
route: '/project/form/publish' |
|
|
|
}, { |
|
|
|
key: 'static', |
|
|
|
title: '统计', |
|
|
|
icon: 'el-icon-data-line', |
|
|
|
route: '/project/form/statistics' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'preview', |
|
|
|
title: '预览', |
|
|
|
icon: 'el-icon-view' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'save', |
|
|
|
title: '保存', |
|
|
|
icon: 'el-icon-folder-add' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'back', |
|
|
|
title: '返回', |
|
|
|
icon: 'el-icon-edit' |
|
|
|
} |
|
|
|
}, |
|
|
|
async created() { |
|
|
|
this.projectKey = this.$route.query.key |
|
|
|
this.defaultActiveMenu = this.$route.path |
|
|
|
this.isCollapse = this.$store.state.form.isCollapse |
|
|
|
], |
|
|
|
menuItemList2: [ |
|
|
|
{ |
|
|
|
key: 'static', |
|
|
|
title: '统计', |
|
|
|
icon: 'el-icon-data-line', |
|
|
|
route: '/project/form/statistics' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'preview', |
|
|
|
title: '预览', |
|
|
|
icon: 'el-icon-view' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'back', |
|
|
|
title: '返回', |
|
|
|
icon: 'el-icon-edit' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
async created () { |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
this.projectKey = this.$route.query.key |
|
|
|
this.defaultActiveMenu = this.$route.path |
|
|
|
this.isCollapse = this.$store.state.form.isCollapse |
|
|
|
|
|
|
|
menuSelectHandle(route, key) { |
|
|
|
this.getProjectStatus() |
|
|
|
|
|
|
|
if (key === 'preview') { |
|
|
|
this.previewDialogVisible = true |
|
|
|
} else if (key === 'save') { |
|
|
|
this.saveProjectAsTemplateHandle() |
|
|
|
} else if (key === 'back') { |
|
|
|
this.$router.back(-1) |
|
|
|
} else { this.$router.replace({ path: route, query: { key: this.projectKey } }) } |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
getProjectStatus () { |
|
|
|
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => { |
|
|
|
|
|
|
|
if (res.data.status == 1) { |
|
|
|
this.publishStatus = false |
|
|
|
} else { |
|
|
|
this.publishStatus = true |
|
|
|
|
|
|
|
}, |
|
|
|
openPreviewHandle() { |
|
|
|
this.previewKey = +new Date() |
|
|
|
this.previewDialogVisible = true |
|
|
|
}, |
|
|
|
saveProjectAsTemplateHandle() { |
|
|
|
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/template/save`, { key: this.projectKey }).then(() => { |
|
|
|
this.msgSuccess('保存成功') |
|
|
|
}) |
|
|
|
}, |
|
|
|
collapseHandle() { |
|
|
|
let isCollapse = !this.isCollapse |
|
|
|
this.$store.dispatch('form/setIsCollapse', isCollapse).then(() => { |
|
|
|
this.isCollapse = isCollapse |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
menuSelectHandle (route, key) { |
|
|
|
|
|
|
|
if (key === 'preview') { |
|
|
|
this.previewDialogVisible = true |
|
|
|
} else if (key === 'save') { |
|
|
|
this.saveProjectAsTemplateHandle() |
|
|
|
} else if (key === 'back') { |
|
|
|
this.$router.back(-1) |
|
|
|
} else { this.$router.replace({ path: route, query: { key: this.projectKey } }) } |
|
|
|
|
|
|
|
}, |
|
|
|
openPreviewHandle () { |
|
|
|
this.previewKey = +new Date() |
|
|
|
this.previewDialogVisible = true |
|
|
|
}, |
|
|
|
saveProjectAsTemplateHandle () { |
|
|
|
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/template/save`, { key: this.projectKey }).then(() => { |
|
|
|
this.msgSuccess('保存成功') |
|
|
|
}) |
|
|
|
}, |
|
|
|
collapseHandle () { |
|
|
|
let isCollapse = !this.isCollapse |
|
|
|
this.$store.dispatch('form/setIsCollapse', isCollapse).then(() => { |
|
|
|
this.isCollapse = isCollapse |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
|
13176889840
4 years ago