wangqing
4 years ago
45 changed files with 1279 additions and 1011 deletions
@ -0,0 +1,50 @@ |
|||
export default [ |
|||
{ |
|||
path: '/project', |
|||
meta: {requireLogin: true}, |
|||
component: () => import(/* webpackChunkName: 'root' */ '@/views/home'), |
|||
children: [ |
|||
{ |
|||
path: 'my', |
|||
meta: {requireLogin: true}, |
|||
component: () => import(/* webpackChunkName: 'root' */ '@/views/project/my/index') |
|||
}, |
|||
{ |
|||
path: 'recycle', |
|||
meta: {requireLogin: true}, |
|||
component: () => import(/* webpackChunkName: 'root' */ '@/views/project/recycle/index') |
|||
}, |
|||
{ |
|||
path: 'template', |
|||
meta: {requireLogin: true}, |
|||
component: () => import(/* webpackChunkName: 'root' */ '@/views/project/template/index') |
|||
}, |
|||
|
|||
{ |
|||
path: 'template/preview', |
|||
meta: {requireLogin: true}, |
|||
component: () => import(/* webpackChunkName: 'root' */ '@/views/project/template/preview.vue') |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/project/view', |
|||
meta: {requireLogin: false}, |
|||
component: () => import(/* webpackChunkName: 'root' */ '@/views/form/preview/ProjectForm.vue') |
|||
}, |
|||
{ |
|||
path: '/project/public/result', |
|||
meta: {requireLogin: false}, |
|||
component: () => import(/* webpackChunkName: 'root' */ '@/views/form/statistics/public') |
|||
}, |
|||
{ |
|||
path: '/s/:key', |
|||
meta: {requireLogin: false}, |
|||
component: () => import(/* webpackChunkName: 'root' */ '@/views/form/write') |
|||
}, |
|||
{ |
|||
path: '/project/write', |
|||
meta: {requireLogin: false}, |
|||
component: () => import(/* webpackChunkName: 'root' */ '@/views/form/write') |
|||
} |
|||
] |
|||
@ -1,85 +1,165 @@ |
|||
<template> |
|||
<div class="container" style="overflow-y: hidden !important;"> |
|||
<el-row type="flex" align="middle" justify="justify"> |
|||
<el-col :offset="1" :span="4"> |
|||
<el-button size="mini" round @click="$router.back(-1)"> |
|||
<i class="el-icon-arrow-left" /> |
|||
返回 |
|||
</el-button> |
|||
</el-col> |
|||
<el-col :span="10" :offset="3"> |
|||
<el-menu :default-active="activeTab" style="background-color: transparent;" mode="horizontal" |
|||
@select="handleSelect" |
|||
<div class="form-index-container"> |
|||
<el-card class="header-container"> |
|||
<el-row align="middle" type="flex"> |
|||
<el-col :span="2"> |
|||
<i class="el-icon-back" @click="$router.back(-1)" /> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<img class="header-logo" src="@/assets/images/indexLogo.png" @click="$router.push({path:'/home'})"> |
|||
</el-col> |
|||
<el-col :span="1"> |
|||
<el-button type="primary">编辑</el-button> |
|||
</el-col> |
|||
<el-col :span="2"> |
|||
<el-button type="success">保存为模板</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
<div class="main-container"> |
|||
<div class="left-menu-container"> |
|||
<el-menu :collapse="isCollapse" class="el-menu-vertical" |
|||
:default-active="defaultActiveMenu" |
|||
@select="menuSelectHandle" |
|||
> |
|||
<el-menu-item index="editor">编辑</el-menu-item> |
|||
<el-menu-item index="logic">逻辑</el-menu-item> |
|||
<el-menu-item index="theme">外观</el-menu-item> |
|||
<el-menu-item index="setting">设置</el-menu-item> |
|||
<el-menu-item index="publish">发布</el-menu-item> |
|||
<el-menu-item index="statistics">统计</el-menu-item> |
|||
<el-menu-item v-for="menuItem in menuItemList" :key="menuItem.route" :index="menuItem.route"> |
|||
<i :class="menuItem.icon" /> |
|||
<span slot="title">{{ menuItem.title }}</span> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
</el-col> |
|||
</el-row> |
|||
<div v-if="projectKey"> |
|||
<editor v-if="activeTab=='editor'" :project-key="projectKey" :is-edit="isEdit" /> |
|||
<logic v-if="activeTab=='logic'" :project-key="projectKey" /> |
|||
<theme v-if="activeTab=='theme'" :project-key="projectKey" /> |
|||
<setting v-if="activeTab=='setting'" :project-key="projectKey" /> |
|||
<publish v-if="activeTab=='publish'" :project-key="projectKey" /> |
|||
<statistics v-if="activeTab=='statistics'" :project-key="projectKey" /> |
|||
<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> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import editor from './editor' |
|||
import theme from './theme' |
|||
import setting from './setting' |
|||
import publish from './publish' |
|||
import statistics from './statistics' |
|||
import logic from './logic' |
|||
|
|||
export default { |
|||
components: { |
|||
editor, |
|||
theme, |
|||
setting, |
|||
publish, |
|||
statistics, |
|||
logic |
|||
}, |
|||
name: 'NewIndex', |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
activeTab: 'editor', |
|||
isEdit: false, |
|||
projectKey: '' |
|||
defaultActiveMenu: 'editor', |
|||
projectKey: null, |
|||
isCollapse: false, |
|||
menuItemList: [ |
|||
{ |
|||
title: '编辑', |
|||
icon: 'el-icon-edit', |
|||
route: '/project/form/editor' |
|||
}, |
|||
{ |
|||
title: '逻辑', |
|||
icon: 'el-icon-menu', |
|||
route: '/project/form/logic' |
|||
}, { |
|||
title: '外观', |
|||
icon: 'el-icon-view', |
|||
route: '/project/form/theme' |
|||
}, |
|||
{ |
|||
title: '设置', |
|||
icon: 'el-icon-setting', |
|||
route: '/project/form/setting' |
|||
}, |
|||
{ |
|||
title: '发布', |
|||
icon: 'el-icon-video-play', |
|||
route: '/project/form/publish' |
|||
}, { |
|||
title: '统计', |
|||
icon: 'el-icon-data-line', |
|||
route: '/project/form/statistics' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
computed: {}, |
|||
watch: {}, |
|||
mounted() { |
|||
created() { |
|||
this.projectKey = this.$route.query.key |
|||
this.isEdit = !!this.$route.query.active |
|||
if (this.$route.query.active) { |
|||
this.activeTab = this.$route.query.active |
|||
} |
|||
this.defaultActiveMenu = this.$route.path |
|||
this.isCollapse = this.$store.state.form.isCollapse |
|||
}, |
|||
methods: { |
|||
handleSelect(type) { |
|||
if (type) { |
|||
this.activeTab = type |
|||
this.$router.replace({path: '/project/form', query: {key: this.projectKey, active: type}}) |
|||
} |
|||
menuSelectHandle(index) { |
|||
this.$router.replace({path: index, query: {key: this.projectKey}}) |
|||
}, |
|||
collapseHandle() { |
|||
let isCollapse = !this.isCollapse |
|||
this.$store.dispatch('form/setIsCollapse', isCollapse).then(() => { |
|||
this.isCollapse = isCollapse |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
.container { |
|||
position: relative; |
|||
width: 100%; |
|||
<style lang="scss" scoped> |
|||
.form-index-container { |
|||
height: 100%; |
|||
//overflow-y: hidden; |
|||
width: 100%; |
|||
} |
|||
::v-deep .el-card__body { |
|||
padding: 0; |
|||
} |
|||
::v-deep .el-menu { |
|||
border: none; |
|||
background-color: transparent; |
|||
} |
|||
.header-container { |
|||
width: 100%; |
|||
height: 60px; |
|||
.el-icon-back { |
|||
font-size: 22px; |
|||
font-weight: 550; |
|||
cursor: pointer; |
|||
color: #000; |
|||
margin-left: 40px; |
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
} |
|||
.header-logo { |
|||
height: 60px; |
|||
width: 200px; |
|||
} |
|||
} |
|||
.main-container { |
|||
width: 100vw; |
|||
height: calc(100vh - 60px); |
|||
display: flex; |
|||
flex-direction: row; |
|||
.right-content-container { |
|||
width: calc(100vw - 100px); |
|||
height: calc(100vh - 60px); |
|||
} |
|||
} |
|||
.left-menu-container { |
|||
max-width: 100px; |
|||
text-align: center; |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
border-right: solid 1px #e6e6e6; |
|||
.el-menu-vertical:not(.el-menu--collapse) { |
|||
width: 100px; |
|||
min-height: 400px; |
|||
} |
|||
.el-icon-d-arrow-left, |
|||
.el-icon-d-arrow-right { |
|||
font-size: 19px; |
|||
cursor: pointer; |
|||
font-weight: 550; |
|||
color: #000; |
|||
margin-bottom: 100px; |
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -1,165 +0,0 @@ |
|||
<template> |
|||
<div class="form-index-container"> |
|||
<el-card class="header-container"> |
|||
<el-row align="middle" type="flex"> |
|||
<el-col :span="2"> |
|||
<i class="el-icon-back" @click="$router.back(-1)" /> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<img class="header-logo" src="@/assets/images/indexLogo.png" @click="$router.push({path:'/home'})"> |
|||
</el-col> |
|||
<el-col :span="1"> |
|||
<el-button type="primary">编辑</el-button> |
|||
</el-col> |
|||
<el-col :span="2"> |
|||
<el-button type="success">保存为模板</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
<div class="main-container"> |
|||
<div class="left-menu-container"> |
|||
<el-menu :collapse="isCollapse" class="el-menu-vertical" |
|||
:default-active="defaultActiveMenu" |
|||
@select="menuSelectHandle" |
|||
> |
|||
<el-menu-item v-for="menuItem in menuItemList" :key="menuItem.route" :index="menuItem.route"> |
|||
<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> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'NewIndex', |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
defaultActiveMenu: 'editor', |
|||
projectKey: null, |
|||
isCollapse: false, |
|||
menuItemList: [ |
|||
{ |
|||
title: '编辑', |
|||
icon: 'el-icon-edit', |
|||
route: '/project/form/editor' |
|||
}, |
|||
{ |
|||
title: '逻辑', |
|||
icon: 'el-icon-menu', |
|||
route: '/project/form/logic' |
|||
}, { |
|||
title: '外观', |
|||
icon: 'el-icon-view', |
|||
route: '/project/form/theme' |
|||
}, |
|||
{ |
|||
title: '设置', |
|||
icon: 'el-icon-setting', |
|||
route: '/project/form/setting' |
|||
}, |
|||
{ |
|||
title: '发布', |
|||
icon: 'el-icon-video-play', |
|||
route: '/project/form/publish' |
|||
}, { |
|||
title: '统计', |
|||
icon: 'el-icon-data-line', |
|||
route: '/project/form/statistics' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
created() { |
|||
this.projectKey = this.$route.query.key |
|||
this.defaultActiveMenu = this.$route.path |
|||
this.isCollapse = this.$store.state.form.isCollapse |
|||
}, |
|||
methods: { |
|||
menuSelectHandle(index) { |
|||
this.$router.replace({path: index, query: {key: this.projectKey}}) |
|||
}, |
|||
collapseHandle() { |
|||
let isCollapse = !this.isCollapse |
|||
this.$store.dispatch('form/setIsCollapse', isCollapse).then(() => { |
|||
this.isCollapse = isCollapse |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.form-index-container { |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
::v-deep .el-card__body { |
|||
padding: 0; |
|||
} |
|||
::v-deep .el-menu { |
|||
border: none; |
|||
background-color: transparent; |
|||
} |
|||
.header-container { |
|||
width: 100%; |
|||
height: 60px; |
|||
.el-icon-back { |
|||
font-size: 22px; |
|||
font-weight: 550; |
|||
cursor: pointer; |
|||
color: #000; |
|||
margin-left: 40px; |
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
} |
|||
.header-logo { |
|||
height: 60px; |
|||
width: 200px; |
|||
} |
|||
} |
|||
.main-container { |
|||
width: 100vw; |
|||
height: calc(100vh - 60px); |
|||
display: flex; |
|||
flex-direction: row; |
|||
.right-content-container { |
|||
width: calc(100vw - 100px); |
|||
height: calc(100vh - 60px); |
|||
} |
|||
} |
|||
.left-menu-container { |
|||
max-width: 100px; |
|||
text-align: center; |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
border-right: solid 1px #e6e6e6; |
|||
.el-menu-vertical:not(.el-menu--collapse) { |
|||
width: 100px; |
|||
min-height: 400px; |
|||
} |
|||
.el-icon-d-arrow-left, |
|||
.el-icon-d-arrow-right { |
|||
font-size: 19px; |
|||
cursor: pointer; |
|||
font-weight: 550; |
|||
color: #000; |
|||
margin-bottom: 100px; |
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,85 @@ |
|||
<!--<template>--> |
|||
<!-- <div class="container" style="overflow-y: hidden !important;">--> |
|||
<!-- <el-row type="flex" align="middle" justify="justify">--> |
|||
<!-- <el-col :offset="1" :span="4">--> |
|||
<!-- <el-button size="mini" round @click="$router.back(-1)">--> |
|||
<!-- <i class="el-icon-arrow-left" />--> |
|||
<!-- 返回--> |
|||
<!-- </el-button>--> |
|||
<!-- </el-col>--> |
|||
<!-- <el-col :span="10" :offset="3">--> |
|||
<!-- <el-menu :default-active="activeTab" style="background-color: transparent;" mode="horizontal"--> |
|||
<!-- @select="handleSelect"--> |
|||
<!-- >--> |
|||
<!-- <el-menu-item index="editor">编辑</el-menu-item>--> |
|||
<!-- <el-menu-item index="logic">逻辑</el-menu-item>--> |
|||
<!-- <el-menu-item index="theme">外观</el-menu-item>--> |
|||
<!-- <el-menu-item index="setting">设置</el-menu-item>--> |
|||
<!-- <el-menu-item index="publish">发布</el-menu-item>--> |
|||
<!-- <el-menu-item index="statistics">统计</el-menu-item>--> |
|||
<!-- </el-menu>--> |
|||
<!-- </el-col>--> |
|||
<!-- </el-row>--> |
|||
<!-- <div v-if="projectKey">--> |
|||
<!-- <editor v-if="activeTab=='editor'" :project-key="projectKey" :is-edit="isEdit" />--> |
|||
<!-- <logic v-if="activeTab=='logic'" :project-key="projectKey" />--> |
|||
<!-- <theme v-if="activeTab=='theme'" :project-key="projectKey" />--> |
|||
<!-- <setting v-if="activeTab=='setting'" :project-key="projectKey" />--> |
|||
<!-- <publish v-if="activeTab=='publish'" :project-key="projectKey" />--> |
|||
<!-- <statistics v-if="activeTab=='statistics'" :project-key="projectKey" />--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
<!--</template>--> |
|||
|
|||
<!--<script>--> |
|||
<!--import editor from './editor'--> |
|||
<!--import theme from './theme'--> |
|||
<!--import setting from './setting'--> |
|||
<!--import publish from './publish'--> |
|||
<!--import statistics from './statistics'--> |
|||
<!--import logic from './logic'--> |
|||
|
|||
<!--export default {--> |
|||
<!-- components: {--> |
|||
<!-- editor,--> |
|||
<!-- theme,--> |
|||
<!-- setting,--> |
|||
<!-- publish,--> |
|||
<!-- statistics,--> |
|||
<!-- logic--> |
|||
<!-- },--> |
|||
<!-- data() {--> |
|||
<!-- return {--> |
|||
<!-- activeTab: 'editor',--> |
|||
<!-- isEdit: false,--> |
|||
<!-- projectKey: ''--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- computed: {},--> |
|||
<!-- watch: {},--> |
|||
<!-- mounted() {--> |
|||
<!-- this.projectKey = this.$route.query.key--> |
|||
<!-- this.isEdit = !!this.$route.query.active--> |
|||
<!-- if (this.$route.query.active) {--> |
|||
<!-- this.activeTab = this.$route.query.active--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- methods: {--> |
|||
<!-- handleSelect(type) {--> |
|||
<!-- if (type) {--> |
|||
<!-- this.activeTab = type--> |
|||
<!-- this.$router.replace({path: '/project/form', query: {key: this.projectKey, active: type}})--> |
|||
<!-- }--> |
|||
<!-- }--> |
|||
<!-- }--> |
|||
<!--}--> |
|||
<!--</script>--> |
|||
|
|||
<!--<style lang='scss'>--> |
|||
<!--.container {--> |
|||
<!-- position: relative;--> |
|||
<!-- width: 100%;--> |
|||
<!-- height: 100%;--> |
|||
<!-- //overflow-y: hidden;--> |
|||
<!--}--> |
|||
<!--</style>--> |
|||
@ -0,0 +1,55 @@ |
|||
<template> |
|||
<div> |
|||
<div v-if="projectItemData.type=='UPLOAD'"> |
|||
<div v-if="getItemValue['files']"> |
|||
<el-link |
|||
v-for="file in getItemValue['files']" |
|||
|
|||
:key="file" |
|||
:href="file.url" target="_blank" |
|||
type="primary" |
|||
> |
|||
<span> {{ file.fileName }}</span> |
|||
</el-link> |
|||
</div> |
|||
<span v-else>/</span> |
|||
</div> |
|||
<div v-else> |
|||
{{ getItemValue ? getItemValue : '/' }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ResultItem', |
|||
props: { |
|||
projectItemData: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
resultData: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
fieldItemId: { |
|||
type: Number, |
|||
default: 0 |
|||
} |
|||
}, |
|||
computed: { |
|||
processData() { |
|||
return this.resultData ? this.resultData['processData'] : {} |
|||
}, |
|||
getItemValue() { |
|||
return this.processData[`field${this.fieldItemId}`] ? this.processData[`field${this.fieldItemId}`] : '' |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
@ -0,0 +1,185 @@ |
|||
<template> |
|||
<el-container> |
|||
<el-header class="el-page-header"> |
|||
<h5 v-if="projectData">{{ projectData.name }}</h5> |
|||
<el-button type="primary" @click="openFormHandle">访问表单</el-button> |
|||
</el-header> |
|||
<el-main> |
|||
<el-table |
|||
:data="projectResultList" |
|||
class="public-result-table" |
|||
> |
|||
<el-table-column type="expand"> |
|||
<template slot-scope="props"> |
|||
<el-form class="public-table-expand" label-position="left"> |
|||
<el-form-item v-for="item in projectItemList" :key="item.id" :label="item.label"> |
|||
<result-item :field-item-id="item.formItemId" :project-item-data="item" |
|||
:result-data="props.row" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="提交序号" |
|||
prop="serialNumber" |
|||
/> |
|||
<el-table-column |
|||
label="提交地址" |
|||
prop="submitAddress" |
|||
/> |
|||
<el-table-column |
|||
label="提交时间" |
|||
prop="createTime" |
|||
/> |
|||
</el-table> |
|||
</el-main> |
|||
</el-container> |
|||
</template> |
|||
|
|||
<script> |
|||
import _ from 'lodash' |
|||
import ResultItem from './item' |
|||
|
|||
export default { |
|||
name: 'StatisticsPublic', |
|||
components: { |
|||
ResultItem |
|||
}, |
|||
metaInfo: { |
|||
title: '反馈结果', |
|||
meta: [ |
|||
{ |
|||
name: 'viewport', |
|||
content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' |
|||
} |
|||
] |
|||
}, |
|||
data() { |
|||
return { |
|||
projectResultList: [], |
|||
projectItemList: [], |
|||
projectData: null, |
|||
projectItemColumns: {}, |
|||
// 查询条件 |
|||
queryConditions: { |
|||
current: 1, |
|||
size: 10, |
|||
projectKey: '', |
|||
beginDateTime: '', |
|||
endDateTime: '' |
|||
}, |
|||
projectKey: null, |
|||
tableData: [{ |
|||
id: '12987122', |
|||
name: '好滋好味鸡蛋仔', |
|||
category: '江浙小吃、小吃零食', |
|||
desc: '荷兰优质淡奶，奶香浓而不腻', |
|||
address: '上海市普陀区真北路', |
|||
shop: '王小虎夫妻店', |
|||
shopId: '10333' |
|||
}, { |
|||
id: '12987123', |
|||
name: '好滋好味鸡蛋仔', |
|||
category: '江浙小吃、小吃零食', |
|||
desc: '荷兰优质淡奶，奶香浓而不腻', |
|||
address: '上海市普陀区真北路', |
|||
shop: '王小虎夫妻店', |
|||
shopId: '10333' |
|||
}, { |
|||
id: '12987125', |
|||
name: '好滋好味鸡蛋仔', |
|||
category: '江浙小吃、小吃零食', |
|||
desc: '荷兰优质淡奶，奶香浓而不腻', |
|||
address: '上海市普陀区真北路', |
|||
shop: '王小虎夫妻店', |
|||
shopId: '10333' |
|||
}, { |
|||
id: '12987126', |
|||
name: '好滋好味鸡蛋仔', |
|||
category: '江浙小吃、小吃零食', |
|||
desc: '荷兰优质淡奶，奶香浓而不腻', |
|||
address: '上海市普陀区真北路', |
|||
shop: '王小虎夫妻店', |
|||
shopId: '10333' |
|||
}] |
|||
} |
|||
}, |
|||
created() { |
|||
this.projectKey = this.$route.query.projectKey |
|||
this.queryConditions.projectKey = this.projectKey |
|||
this.queryProjectResult() |
|||
this.queryProjectItems() |
|||
this.queryProject() |
|||
}, |
|||
methods: { |
|||
openFormHandle() { |
|||
this.$router.replace({path: `/s/${this.projectKey}`}) |
|||
}, |
|||
queryProject() { |
|||
this.$api.get(`/user/project/${this.projectKey}`).then(res => { |
|||
this.projectData = res.data |
|||
}) |
|||
}, |
|||
queryProjectResult() { |
|||
this.$api.get('/user/project/result/public/page', {params: this.queryConditions}).then(res => { |
|||
let {records, total, size} = res.data |
|||
this.projectResultList = records |
|||
this.total = total |
|||
this.queryConditions.size = size |
|||
}) |
|||
}, |
|||
queryProjectItems() { |
|||
this.$api.get('/user/project/item/list', {params: {key: this.projectKey}}).then(res => { |
|||
if (res.data) { |
|||
res.data.map(item => { |
|||
_.set(this.projectItemColumns, `field${item.formItemId}`, item.label) |
|||
}) |
|||
} |
|||
this.projectItemList = res.data |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
|
|||
.el-header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
.el-button { |
|||
height: 50%; |
|||
} |
|||
} |
|||
.el-main { |
|||
background-color: $backgroundColor; |
|||
height: calc(100vh - 60px); |
|||
} |
|||
@media screen and (max-width: 750px) { |
|||
.public-result-table { |
|||
width: 100% !important; |
|||
} |
|||
.el-header { |
|||
justify-content: space-between !important; |
|||
} |
|||
} |
|||
.public-result-table { |
|||
width: 60%; |
|||
margin: 0 auto; |
|||
} |
|||
.public-table-expand { |
|||
font-size: 0; |
|||
label { |
|||
width: 90px; |
|||
color: #99a9bf; |
|||
} |
|||
.el-form-item { |
|||
margin-right: 0; |
|||
margin-bottom: 0; |
|||
width: 50%; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -1,271 +0,0 @@ |
|||
<template> |
|||
<div class="home-container"> |
|||
<el-container> |
|||
<el-header class="header-container" height="38"> |
|||
<div> |
|||
<img class="header-logo-img" src="@/assets/images/indexLogo.png" |
|||
@click="$router.push({path:'/'})" |
|||
> |
|||
</div> |
|||
<div class="right-header"> |
|||
<el-link href="https://doc.tduckapp.com/" target="_blank">帮助文档</el-link> |
|||
<el-popover |
|||
placement="bottom-end" |
|||
trigger="click" |
|||
width="150" |
|||
> |
|||
<div class="user-person-menu"> |
|||
<div> |
|||
<p v-if="getUserInfo" class="nick-name">{{ getUserInfo.name }}</p> |
|||
</div> |
|||
<el-divider /> |
|||
<div> |
|||
<p class="person-menu-item" @click="$router.push({path: '/home/member'})"> |
|||
<font-icon class="fab fa-get-pocket" /> |
|||
我的账户 |
|||
</p> |
|||
<el-divider /> |
|||
<p class="person-menu-item" @click="logoutHandle"> |
|||
<font-icon class="fas fa-sign-out" /> |
|||
退出登录 |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<div slot="reference"> |
|||
<img v-if="getUserInfo" :src="getUserInfo.avatar" class="user-avatar"> |
|||
</div> |
|||
</el-popover> |
|||
</div> |
|||
</el-header> |
|||
<!-- <div class="banner-container">--> |
|||
<!-- <el-carousel height="60px">--> |
|||
<!-- <el-carousel-item v-for="item in 4" :key="item">--> |
|||
<!-- <img style="height: 60px;" src="https://static.wenjuan.pub/1620698916041_333.jpg">--> |
|||
<!-- </el-carousel-item>--> |
|||
<!-- </el-carousel>--> |
|||
<!-- </div>--> |
|||
<el-container> |
|||
<el-aside width="280px"> |
|||
<el-card> |
|||
<el-button class="width90" type="primary" @click="createBlankTemplate">新建项目</el-button> |
|||
<div class="menu-view"> |
|||
<div v-for="menu in menuList" :key="menu.route" |
|||
:class="defaultActiveMenu==menu.route?'menu-item-active menu-item':'menu-item'" |
|||
@click="menuClickHandle(menu)" |
|||
> |
|||
<font-icon :class="menu.icon" /> |
|||
<span>{{ menu.name }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="text-center"> |
|||
<h5>加入社群</h5> |
|||
<el-image |
|||
fit="fill" |
|||
src="https://oss.smileyi.top/static/wx-qrcode.png" |
|||
style="width: 200px; height: 200px;" |
|||
/> |
|||
</div> |
|||
</el-card> |
|||
</el-aside> |
|||
<el-container> |
|||
<el-main> |
|||
<router-view /> |
|||
</el-main> |
|||
<el-footer> |
|||
<div class="about-container"> |
|||
<font-icon class="fas fa-user" /> |
|||
<span class="desc-text">关于填鸭</span> |
|||
</div> |
|||
</el-footer> |
|||
</el-container> |
|||
</el-container> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {formConf} from '@/components/generator/config' |
|||
import store from '@/store' |
|||
import router from '@/router' |
|||
|
|||
export default { |
|||
name: 'NewIndex', |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
defaultActiveMenu: '', |
|||
menuList: [ |
|||
{ |
|||
route: '/home', |
|||
name: '工作台', |
|||
icon: 'fas fa-laptop' |
|||
}, |
|||
{ |
|||
route: '/home/template', |
|||
name: '模板中心', |
|||
icon: 'fas fa-clipboard' |
|||
}, { |
|||
route: '/home/recycle', |
|||
name: '回收站', |
|||
icon: 'fas fa-user' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
getStore() { |
|||
return store |
|||
}, |
|||
getUserInfo() { |
|||
let user = JSON.parse(this.getStore.getters['user/userInfo']) |
|||
return user |
|||
} |
|||
}, |
|||
created() { |
|||
this.defaultActiveMenu = this.$route.path |
|||
}, |
|||
methods: { |
|||
menuClickHandle(menu) { |
|||
this.$router.replace({path: menu.route}) |
|||
}, |
|||
createBlankTemplate() { |
|||
this.$api.post('/user/project/create', { |
|||
'describe': formConf.description, |
|||
'name': formConf.title |
|||
}).then(res => { |
|||
console.log(res) |
|||
this.$router.push({path: '/project/form', query: {key: res.data}}) |
|||
}) |
|||
}, |
|||
logoutHandle() { |
|||
this.$confirm('您确定要退出登录吗？', '退出确认', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.$store.dispatch('user/logout').then(() => { |
|||
router.push({ |
|||
path: '/login', |
|||
query: { |
|||
redirect: router.currentRoute.fullPath |
|||
} |
|||
}) |
|||
}) |
|||
}).catch(() => { |
|||
|
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.home-container { |
|||
background-color: rgba(247, 247, 247, 90); |
|||
display: flex; |
|||
height: 100%; |
|||
width: 100%; |
|||
flex-direction: column; |
|||
} |
|||
.header-container { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
background-color: #fff; |
|||
line-height: 38px; |
|||
height: 38px; |
|||
min-width: 1024px; |
|||
.header-logo-img { |
|||
width: 120px; |
|||
height: 35px; |
|||
float: left; |
|||
} |
|||
.right-header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
> * { |
|||
margin: 0 20px; |
|||
} |
|||
} |
|||
.user-avatar { |
|||
width: 35px; |
|||
height: 35px; |
|||
border-radius: 100px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.menu-view { |
|||
margin-top: 20px; |
|||
height: 501px; |
|||
background-color: rgba(255, 255, 255, 100); |
|||
padding: 20px; |
|||
.menu-item-active { |
|||
color: $menuActiveText !important; |
|||
} |
|||
.menu-item { |
|||
color: #333; |
|||
font-size: 16px; |
|||
text-align: left; |
|||
line-height: 25px; |
|||
&:hover { |
|||
cursor: pointer; |
|||
color: $menuActiveText; |
|||
} |
|||
& .fas:hover { |
|||
color: $menuActiveText; |
|||
} |
|||
.fas { |
|||
display: inline-block; |
|||
width: 20px; |
|||
height: 20px; |
|||
margin: 5px; |
|||
} |
|||
span { |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
} |
|||
.banner-container { |
|||
height: 60px; |
|||
} |
|||
.el-aside { |
|||
padding: 0; |
|||
margin: 0; |
|||
.el-card { |
|||
height: 100%; |
|||
} |
|||
} |
|||
.user-person-menu { |
|||
.nick-name { |
|||
height: 16px; |
|||
color: rgba(70, 70, 70, 86); |
|||
font-size: 14px; |
|||
line-height: 16px; |
|||
text-align: left; |
|||
} |
|||
.person-menu-item { |
|||
color: rgba(70, 70, 70, 86); |
|||
font-size: 14px; |
|||
text-align: left; |
|||
&:hover { |
|||
cursor: pointer; |
|||
color: $menuActiveText; |
|||
} |
|||
} |
|||
.el-divider { |
|||
margin: 5px 0; |
|||
} |
|||
.person-menu-divider { |
|||
background-color: rgba(210, 210, 210, 78); |
|||
border: 1px solid rgba(210, 210, 210, 78); |
|||
} |
|||
} |
|||
.about-container { |
|||
text-align: center; |
|||
.fa-user { |
|||
font-size: 19px; |
|||
color: rgba(172, 172, 172, 100); |
|||
margin: 1px; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,205 @@ |
|||
<template> |
|||
<div> |
|||
<el-container> |
|||
<el-header height="92" class="home-header-view"> |
|||
<el-row type="flex" align="middle" justify="center"> |
|||
<el-col :span="4" :offset="1"> |
|||
<img src="@/assets/images/indexLogo.png" class="header-logo-img" |
|||
@click="$router.push({path:'/'})" |
|||
> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-menu :default-active="menuIndex" mode="horizontal" |
|||
text-color="#205BB5" |
|||
active-text-color="#205BB5" |
|||
@select="activeMenuHandle" |
|||
> |
|||
<el-menu-item v-for="(item, index) in menuRouters" |
|||
:key="oldIndex" |
|||
:index="item.routerPath" |
|||
class="menu-item" |
|||
> |
|||
{{ item.title }} |
|||
</el-menu-item> |
|||
</el-menu> |
|||
</el-col> |
|||
<el-col :span="1"> |
|||
<!-- <el-button round>升级</el-button>--> |
|||
</el-col> |
|||
<el-col :span="1"> |
|||
<div style="display: flex; |
|||
align-items: center; |
|||
justify-content: center;" |
|||
> |
|||
<!-- <svg-icon name="loginWx" style="width: 24px; height: 24px;" />--> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="1"> |
|||
<el-link href="https://gitee.com/TDuckApp/tduck-platform/wikis/%E6%9C%AC%E5%9C%B0%E8%BF%90%E8%A1%8C?sort_id=3681729" target="_blank">帮助</el-link> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<el-popover |
|||
placement="bottom-end" |
|||
width="200" |
|||
trigger="click" |
|||
> |
|||
<div class="user-person-menu"> |
|||
<div> |
|||
<p v-if="getUserInfo" class="nick-name">{{ getUserInfo.name }}</p> |
|||
</div> |
|||
<div class="person-menu-divider" /> |
|||
<div> |
|||
<p class="person-menu-item" @click="$router.push({path: '/home/member'})"> |
|||
<font-icon class="fab fa-get-pocket" /> |
|||
我的账户 |
|||
</p> |
|||
<div class="person-menu-divider" /> |
|||
<p class="person-menu-item" @click="logoutHandle"> |
|||
<font-icon class="fas fa-sign-out" /> |
|||
退出登录 |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<div slot="reference" style="display: flex; align-items: center; justify-content: center;"> |
|||
<img v-if="getUserInfo" :src="getUserInfo.avatar" class="user-avatar"> |
|||
</div> |
|||
</el-popover> |
|||
</el-col> |
|||
</el-row> |
|||
</el-header> |
|||
<el-main class="home-main-view"> |
|||
<router-view /> |
|||
</el-main> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import store from '@/store/index.js' |
|||
import FontIcon from '@/components/FontIcon' |
|||
import router from '@/router' |
|||
import {openUrl, checkIsUrl} from '@/utils/index' |
|||
|
|||
export default { |
|||
name: 'Home', |
|||
components: {FontIcon}, |
|||
data() { |
|||
return { |
|||
menuIndex: null, |
|||
menuRouters: [ |
|||
{ |
|||
routerPath: 'https://gitee.com/TDuckApp/tduck-platform?time=1', |
|||
title: '免费模板' |
|||
}, |
|||
{ |
|||
routerPath: 'https://gitee.com/TDuckApp/tduck-platform', |
|||
title: '开源项目' |
|||
}, |
|||
{ |
|||
routerPath: 'https://gitee.com/TDuckApp/tduck-platform/issues', |
|||
title: '提出建议' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
getStore() { |
|||
return store |
|||
}, |
|||
getUserInfo() { |
|||
let user = JSON.parse(this.getStore.getters['user/userInfo']) |
|||
return user |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.menuIndex = this.$route.path |
|||
}, |
|||
methods: { |
|||
activeMenuHandle(routerPath) { |
|||
if (checkIsUrl(routerPath)) { |
|||
openUrl(routerPath) |
|||
} else { |
|||
this.menuIndex = routerPath |
|||
} |
|||
}, |
|||
logoutHandle() { |
|||
this.$confirm('您确定要退出登录吗？', '退出确认', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.$store.dispatch('user/logout').then(() => { |
|||
router.push({ |
|||
path: '/login', |
|||
query: { |
|||
redirect: router.currentRoute.fullPath |
|||
} |
|||
}) |
|||
}) |
|||
}).catch(() => { |
|||
|
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
|
|||
.menu-item { |
|||
line-height: 80px; |
|||
height: 80px; |
|||
text-align: left; |
|||
font-weight: 550; |
|||
color: rgba(32, 91, 181, 100); |
|||
font-size: 20px; |
|||
&:hover { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.el-menu.el-menu--horizontal { |
|||
border-bottom: none; |
|||
} |
|||
.home-header-view { |
|||
line-height: 92px; |
|||
height: 92px; |
|||
min-width: 1024px; |
|||
background-color: rgba(255, 255, 255, 100); |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 14px; |
|||
text-align: center; |
|||
.header-logo-img { |
|||
width: 90%; |
|||
height: 90%; |
|||
float: left; |
|||
} |
|||
} |
|||
.user-person-menu { |
|||
.nick-name { |
|||
height: 16px; |
|||
color: rgba(70, 70, 70, 86); |
|||
font-size: 14px; |
|||
line-height: 16px; |
|||
text-align: left; |
|||
} |
|||
.person-menu-item { |
|||
color: rgba(70, 70, 70, 86); |
|||
font-size: 14px; |
|||
text-align: left; |
|||
} |
|||
.person-menu-item:hover { |
|||
cursor: pointer; |
|||
color: rgba(32, 91, 181, 100); |
|||
} |
|||
} |
|||
.user-avatar { |
|||
width: 50px; |
|||
height: 50px; |
|||
border-radius: 100px; |
|||
cursor: pointer; |
|||
} |
|||
.home-main-view { |
|||
height: calc(100vh - 92px); |
|||
min-width: 1024px; |
|||
background-color: #f7f7f7; |
|||
padding: 0; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue