wangqing
5 years ago
8 changed files with 498 additions and 164 deletions
|
After Width: | Height: | Size: 8.4 KiB |
@ -1,134 +1,107 @@ |
|||||
<template> |
<template> |
||||
<div class="preview-form"> |
<div class="preview-container"> |
||||
<div class="" v-if="!formState"> |
<el-tabs type="card" v-if="projectConfig.projectKey"> |
||||
<el-row type="flex" justify="center" align="middle"> |
<el-tab-pane> |
||||
<el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center"> |
<span slot="label"><i class="el-icon-mobile"></i> |
||||
<h4 class="form-name-text"> |
手机 |
||||
{{formConf.title}}</h4> |
</span> |
||||
</el-col> |
<div class="preview-layer"> |
||||
</el-row> |
<div class="preview-bg"/> |
||||
<el-row type="flex" justify="center" align="middle"> |
<div class="preview-phone"> |
||||
<el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center"> |
<iframe id="preview-html" name="preview-html" class="preview-html" |
||||
<p class="form-name-text"> |
frameborder="0" |
||||
{{formConf.description}} |
src="http://localhost:8888/#/project/view?key=ec4dfaab04a94608a972845a5a459d3e" |
||||
</p> |
/> |
||||
</el-col> |
</div> |
||||
</el-row> |
</div> |
||||
<el-divider></el-divider> |
</el-tab-pane> |
||||
<parser v-if="formConf.fields.length" :form-conf="formConf" @submit="submitForm"/> |
<el-tab-pane> |
||||
</div> |
<span slot="label"><i class="el-icon-monitor"></i> |
||||
<div v-if="formState"> |
电脑 |
||||
<p style="text-align: center"> |
</span> |
||||
<i class="el-icon-check"/>您已完成本次问卷，感谢您的帮助与支持</p> |
<project-form :projectConfig="projectConfig" /> |
||||
</div> |
</el-tab-pane> |
||||
|
</el-tabs> |
||||
</div> |
</div> |
||||
|
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import Parser from '@/components/parser/Parser' |
import ProjectForm from './ProjectForm' |
||||
import {dbDataConvertForItemJson} from '@/utils/convert' |
|
||||
// 若parser是通过安装npm方式集成到项目中的，使用此行引入 |
|
||||
// import Parser from 'form-gen-parser' |
|
||||
window.onload = function() { |
|
||||
document.addEventListener('touchstart', function(event) { |
|
||||
if (event.touches.length > 1) { |
|
||||
event.preventDefault() |
|
||||
} |
|
||||
}) |
|
||||
document.addEventListener('gesturestart', function(event) { |
|
||||
event.preventDefault() |
|
||||
}) |
|
||||
} |
|
||||
export default { |
export default { |
||||
components: { |
name: 'PreView', |
||||
Parser |
props: { |
||||
}, |
projectConfig: { |
||||
props: {}, |
|
||||
data() { |
|
||||
return { |
|
||||
key2: +new Date(), |
|
||||
projectKey: '', |
projectKey: '', |
||||
formState: false,//是否填写 |
headImgUrl: '', |
||||
formConf: { |
color: '' |
||||
fields: [], |
|
||||
__methods__: { |
|
||||
clickTestButton1() { |
|
||||
console.log( |
|
||||
`%c【测试按钮1】点击事件里可以访问当前表单： |
|
||||
1) formModel='formData', 所以this.formData可以拿到当前表单的model |
|
||||
2) formRef='elForm', 所以this.$refs.elForm可以拿到当前表单的ref(vue组件) |
|
||||
`, |
|
||||
'color:#409EFF;font-size: 15px' |
|
||||
) |
|
||||
console.log('表单的Model：', this.formData) |
|
||||
console.log('表单的ref：', this.$refs.elForm) |
|
||||
} |
|
||||
}, |
|
||||
formRef: 'elForm', |
|
||||
formModel: 'formData', |
|
||||
size: 'small', |
|
||||
labelPosition: 'top', |
|
||||
labelWidth: 100, |
|
||||
formRules: 'rules', |
|
||||
gutter: 15, |
|
||||
disabled: false, |
|
||||
span: 24, |
|
||||
formBtns: true, |
|
||||
resetBtn: true , |
|
||||
unFocusedComponentBorder: true |
|
||||
} |
|
||||
} |
} |
||||
}, |
}, |
||||
computed: {}, |
data() { |
||||
watch: {}, |
return {} |
||||
created() { |
|
||||
this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small' |
|
||||
}, |
}, |
||||
mounted() { |
mounted() { |
||||
this.$api.get(`/user/project/query/details/${this.$route.query.key}`).then(res => { |
this.projectConfig = { |
||||
if (res.data) { |
headImgUrl: 'http://cdn1.wenjuan.com/appear-PC-防疫13.png', |
||||
let fields = res.data.projectItems.map(item => { |
projectKey: 'afd5c3562c924d20b7da67b1f192ce25' |
||||
return dbDataConvertForItemJson(item) |
|
||||
}) |
|
||||
this.formConf.fields = fields |
|
||||
this.formConf.title = res.data.project.name |
|
||||
this.formConf.description = res.data.project.describe |
|
||||
} |
|
||||
}) |
|
||||
this.projectKey = this.$route.query.key |
|
||||
}, |
|
||||
methods: { |
|
||||
fillFormData(form, data) { |
|
||||
form.fields.forEach(item => { |
|
||||
const val = data[item.__vModel__] |
|
||||
if (val) { |
|
||||
item.__config__.defaultValue = val |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
submitForm(data) { |
|
||||
this.$api.post('/user/project/result/create', {'projectKey': this.projectKey, 'collectData': data}).then(res => { |
|
||||
this.formState = true |
|
||||
}) |
|
||||
} |
} |
||||
|
}, |
||||
|
components: { |
||||
|
ProjectForm |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style scoped> |
||||
.preview-form { |
|
||||
margin: 15px auto; |
.preview-container { |
||||
width: 800px; |
margin: 0; |
||||
padding: 15px; |
padding: 0; |
||||
background-repeat: repeat; |
background-color: #f7f7f7; |
||||
background-color: rgba(229, 239, 247, 0.87); |
|
||||
} |
} |
||||
|
|
||||
@media screen and (max-width: 750px) { |
/deep/ .el-tabs__header { |
||||
.preview-form { |
width: 300px; |
||||
margin: 0px; |
margin: 0 auto; |
||||
width: 93% !important; |
border: none; |
||||
background-color: white; |
} |
||||
} |
|
||||
|
/deep/ .el-tabs--card > .el-tabs__header .el-tabs__item { |
||||
|
background-color: white; |
||||
|
border: 1px solid white; |
||||
|
} |
||||
|
|
||||
|
div.preview-layer { |
||||
|
width: 500px; |
||||
|
height: 100%; |
||||
|
margin: 10px auto; |
||||
|
right: 0; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
div.preview-layer .preview-bg { |
||||
|
width: 500px; |
||||
|
height: 100%; |
||||
|
margin: 20px auto; |
||||
|
z-index: 999; |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
|
||||
|
div.preview-layer .preview-phone { |
||||
|
width: 372px; |
||||
|
height: 744px; |
||||
|
background: url('~@/assets/images/appearset_bgc_big.png'); |
||||
|
background-size: 372px 744px; |
||||
|
z-index: 1000; |
||||
|
} |
||||
|
|
||||
|
.preview-html { |
||||
|
width: 318px !important; |
||||
|
height: 568px !important; |
||||
|
margin: 74px 0 0; |
||||
|
border-radius: 5px; |
||||
|
outline: none; |
||||
|
background-color: #fff; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,139 @@ |
|||||
|
<template> |
||||
|
<div class="preview-form"> |
||||
|
<div class="" v-if="!formState"> |
||||
|
<el-row type="flex" justify="center" align="middle"> |
||||
|
<el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center"> |
||||
|
<h4 class="form-name-text"> |
||||
|
{{formConf.title}}</h4> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row type="flex" justify="center" align="middle"> |
||||
|
<el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center"> |
||||
|
<p class="form-name-text"> |
||||
|
{{formConf.description}} |
||||
|
</p> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-divider></el-divider> |
||||
|
<parser v-if="formConf.fields.length" :form-conf="formConf" @submit="submitForm"/> |
||||
|
</div> |
||||
|
<div v-if="formState"> |
||||
|
<p style="text-align: center"> |
||||
|
<i class="el-icon-check"/>您已完成本次问卷，感谢您的帮助与支持</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Parser from '@/components/parser/Parser' |
||||
|
import {dbDataConvertForItemJson} from '@/utils/convert' |
||||
|
// 若parser是通过安装npm方式集成到项目中的，使用此行引入 |
||||
|
// import Parser from 'form-gen-parser' |
||||
|
window.onload = function() { |
||||
|
document.addEventListener('touchstart', function(event) { |
||||
|
if (event.touches.length > 1) { |
||||
|
event.preventDefault() |
||||
|
} |
||||
|
}) |
||||
|
document.addEventListener('gesturestart', function(event) { |
||||
|
event.preventDefault() |
||||
|
}) |
||||
|
} |
||||
|
export default { |
||||
|
components: { |
||||
|
Parser |
||||
|
}, |
||||
|
props: { |
||||
|
projectKey: '' |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
key2: +new Date(), |
||||
|
projectKey: '', |
||||
|
formState: false,//是否填写 |
||||
|
formConf: { |
||||
|
fields: [], |
||||
|
__methods__: { |
||||
|
clickTestButton1() { |
||||
|
console.log( |
||||
|
`%c【测试按钮1】点击事件里可以访问当前表单： |
||||
|
1) formModel='formData', 所以this.formData可以拿到当前表单的model |
||||
|
2) formRef='elForm', 所以this.$refs.elForm可以拿到当前表单的ref(vue组件) |
||||
|
`, |
||||
|
'color:#409EFF;font-size: 15px' |
||||
|
) |
||||
|
console.log('表单的Model：', this.formData) |
||||
|
console.log('表单的ref：', this.$refs.elForm) |
||||
|
} |
||||
|
}, |
||||
|
formRef: 'elForm', |
||||
|
formModel: 'formData', |
||||
|
size: 'small', |
||||
|
labelPosition: 'top', |
||||
|
labelWidth: 100, |
||||
|
formRules: 'rules', |
||||
|
gutter: 15, |
||||
|
disabled: false, |
||||
|
span: 24, |
||||
|
formBtns: true, |
||||
|
resetBtn: true, |
||||
|
unFocusedComponentBorder: true |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
watch: {}, |
||||
|
created() { |
||||
|
this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small' |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$api.get(`/user/project/query/details/${this.$route.query.key}`).then(res => { |
||||
|
if (res.data) { |
||||
|
let fields = res.data.projectItems.map(item => { |
||||
|
return dbDataConvertForItemJson(item) |
||||
|
}) |
||||
|
this.formConf.fields = fields |
||||
|
this.formConf.title = res.data.project.name |
||||
|
this.formConf.description = res.data.project.describe |
||||
|
} |
||||
|
}) |
||||
|
this.projectKey = this.$route.query.key |
||||
|
}, |
||||
|
methods: { |
||||
|
fillFormData(form, data) { |
||||
|
form.fields.forEach(item => { |
||||
|
const val = data[item.__vModel__] |
||||
|
if (val) { |
||||
|
item.__config__.defaultValue = val |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
submitForm(data) { |
||||
|
this.$api.post('/user/project/result/create', { |
||||
|
'projectKey': this.projectKey, |
||||
|
'collectData': data |
||||
|
}).then(res => { |
||||
|
this.formState = true |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.preview-form { |
||||
|
margin: 15px auto; |
||||
|
width: 800px; |
||||
|
padding: 15px; |
||||
|
background-repeat: repeat; |
||||
|
background-color: rgba(229, 239, 247, 0.87); |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 750px) { |
||||
|
.preview-form { |
||||
|
margin: 0px; |
||||
|
width: 93% !important; |
||||
|
background-color: white; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,136 @@ |
|||||
|
<template> |
||||
|
<div class="project-form"> |
||||
|
<div class=""> |
||||
|
<el-image |
||||
|
:src="projectConfig.headImgUrl" |
||||
|
fit="scale-down"></el-image> |
||||
|
<el-row type="flex" justify="center" align="middle"> |
||||
|
<el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center"> |
||||
|
<h4 class="form-name-text"> |
||||
|
{{formConf.title}}</h4> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row type="flex" justify="center" align="middle"> |
||||
|
<el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center"> |
||||
|
<p class="form-name-text"> |
||||
|
{{formConf.description}} |
||||
|
</p> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-divider> |
||||
|
</el-divider> |
||||
|
<parser v-if="formConf.fields.length" :form-conf="formConf" @submit="submitForm"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Parser from '@/components/parser/Parser' |
||||
|
import {dbDataConvertForItemJson} from '@/utils/convert' |
||||
|
|
||||
|
window.onload = function() { |
||||
|
document.addEventListener('touchstart', function(event) { |
||||
|
if (event.touches.length > 1) { |
||||
|
event.preventDefault() |
||||
|
} |
||||
|
}) |
||||
|
document.addEventListener('gesturestart', function(event) { |
||||
|
event.preventDefault() |
||||
|
}) |
||||
|
} |
||||
|
export default { |
||||
|
components: { |
||||
|
Parser |
||||
|
}, |
||||
|
props: { |
||||
|
projectConfig: { |
||||
|
headImgUrl: '', |
||||
|
color: '', |
||||
|
projectKey: '', |
||||
|
showBtn: false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
key2: +new Date(), |
||||
|
projectKey: '', |
||||
|
formConf: { |
||||
|
fields: [], |
||||
|
__methods__: {}, |
||||
|
formRef: 'elForm', |
||||
|
formModel: 'formData', |
||||
|
size: 'small', |
||||
|
labelPosition: 'top', |
||||
|
labelWidth: 100, |
||||
|
formRules: 'rules', |
||||
|
gutter: 15, |
||||
|
disabled: false, |
||||
|
span: 24, |
||||
|
formBtns: true, |
||||
|
resetBtn: true, |
||||
|
unFocusedComponentBorder: true |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
watch: {}, |
||||
|
created() { |
||||
|
//不存去路由中尝试获取 |
||||
|
if (!this.projectConfig) { |
||||
|
this.projectConfig = { |
||||
|
headImgUrl: '', |
||||
|
color: '', |
||||
|
projectKey: '', |
||||
|
showBtn: false |
||||
|
} |
||||
|
} |
||||
|
if (this.projectConfig && this.projectConfig.projectKey) { |
||||
|
this.projectKey = this.projectConfig.projectKey |
||||
|
} else if (this.$route.query.key) { |
||||
|
this.projectKey = this.$route.query.key |
||||
|
} |
||||
|
this.formConf.formBtns = this.projectConfig.showBtn |
||||
|
this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small' |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$api.get(`/user/project/query/details/${this.projectKey}`).then(res => { |
||||
|
if (res.data) { |
||||
|
let fields = res.data.projectItems.map(item => { |
||||
|
return dbDataConvertForItemJson(item) |
||||
|
}) |
||||
|
this.formConf.fields = fields |
||||
|
this.formConf.title = res.data.project.name |
||||
|
this.formConf.description = res.data.project.describe |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
submitForm(data) { |
||||
|
this.$api.post('/user/project/result/create', { |
||||
|
'projectKey': this.projectKey, |
||||
|
'collectData': data |
||||
|
}).then(res => { |
||||
|
this.formState = true |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.project-form { |
||||
|
margin: 15px auto; |
||||
|
width: 800px; |
||||
|
padding: 15px; |
||||
|
background-repeat: repeat; |
||||
|
background-color: rgba(229, 239, 247, 0.87); |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 750px) { |
||||
|
.project-form { |
||||
|
margin: 0px; |
||||
|
width: 93% !important; |
||||
|
background-color: white; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue