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> |
|||
<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 class="preview-container"> |
|||
<el-tabs type="card" v-if="projectConfig.projectKey"> |
|||
<el-tab-pane> |
|||
<span slot="label"><i class="el-icon-mobile"></i> |
|||
手机 |
|||
</span> |
|||
<div class="preview-layer"> |
|||
<div class="preview-bg"/> |
|||
<div class="preview-phone"> |
|||
<iframe id="preview-html" name="preview-html" class="preview-html" |
|||
frameborder="0" |
|||
src="http://localhost:8888/#/project/view?key=ec4dfaab04a94608a972845a5a459d3e" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</el-tab-pane> |
|||
<el-tab-pane> |
|||
<span slot="label"><i class="el-icon-monitor"></i> |
|||
电脑 |
|||
</span> |
|||
<project-form :projectConfig="projectConfig" /> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</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() |
|||
}) |
|||
} |
|||
import ProjectForm from './ProjectForm' |
|||
|
|||
export default { |
|||
components: { |
|||
Parser |
|||
}, |
|||
props: {}, |
|||
data() { |
|||
return { |
|||
key2: +new Date(), |
|||
name: 'PreView', |
|||
props: { |
|||
projectConfig: { |
|||
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 |
|||
} |
|||
headImgUrl: '', |
|||
color: '' |
|||
} |
|||
}, |
|||
computed: {}, |
|||
watch: {}, |
|||
created() { |
|||
this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small' |
|||
data() { |
|||
return {} |
|||
}, |
|||
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 |
|||
}) |
|||
this.projectConfig = { |
|||
headImgUrl: 'http://cdn1.wenjuan.com/appear-PC-防疫13.png', |
|||
projectKey: 'afd5c3562c924d20b7da67b1f192ce25' |
|||
} |
|||
}, |
|||
components: { |
|||
ProjectForm |
|||
} |
|||
} |
|||
</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); |
|||
<style scoped> |
|||
|
|||
.preview-container { |
|||
margin: 0; |
|||
padding: 0; |
|||
background-color: #f7f7f7; |
|||
} |
|||
|
|||
@media screen and (max-width: 750px) { |
|||
.preview-form { |
|||
margin: 0px; |
|||
width: 93% !important; |
|||
background-color: white; |
|||
} |
|||
/deep/ .el-tabs__header { |
|||
width: 300px; |
|||
margin: 0 auto; |
|||
border: none; |
|||
} |
|||
|
|||
/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> |
|||
|
|||
@ -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