Commit dd63d0a0 authored by 王启林's avatar 王启林

对接问卷生成接口

parent bfbd457c
...@@ -4,6 +4,22 @@ ...@@ -4,6 +4,22 @@
<el-button class="backBtn" size="small" @click="$router.back()">返回上一级</el-button> <el-button class="backBtn" size="small" @click="$router.back()">返回上一级</el-button>
<el-tabs v-model="tabs"> <el-tabs v-model="tabs">
<el-tab-pane label="设计问卷" name="1"> <el-tab-pane label="设计问卷" name="1">
<div style="width: 800px;margin: 100px auto;" v-show="step">
<el-form :model="titleForm" :rules="titleRules" ref="titleForm">
<el-form-item label="问卷名称:" prop="title" label-width="125px">
<el-input placeholder="请输入问卷名称" v-model="titleForm.title"></el-input>
</el-form-item>
<el-form-item label="问卷说明:" label-width="125px">
<el-input type="textarea" placeholder="请输入问卷说明(不超过1000个汉字)" maxlength="1000"
v-model="titleForm.remake"></el-input>
</el-form-item>
<div style="text-align: center;">
<el-button size="small" @click="$router.back()">取消</el-button>
<el-button type="primary" size="small" @click="createForm('titleForm')">立即创建</el-button>
</div>
</el-form>
</div>
<div v-show="!step">
<fc-designer style="height: 79vh;" ref="designer"> <fc-designer style="height: 79vh;" ref="designer">
<template slot="handle"> <template slot="handle">
<ElButton style="margin-left: 10px;" icon="el-icon-upload" type="primary" size="small" <ElButton style="margin-left: 10px;" icon="el-icon-upload" type="primary" size="small"
...@@ -13,6 +29,8 @@ ...@@ -13,6 +29,8 @@
</ElButton> </ElButton>
</template> </template>
</fc-designer> </fc-designer>
</div>
<!-- <div class="tool"> <!-- <div class="tool">
<el-row> <el-row>
<el-button icon="el-icon-download" type="primary" size="small" @click="getFormJson()" <el-button icon="el-icon-download" type="primary" size="small" @click="getFormJson()"
...@@ -36,7 +54,7 @@ ...@@ -36,7 +54,7 @@
</el-drawer> </el-drawer>
<el-dialog title="问卷发布" :visible.sync="issueDialog" width="30%" top="25vh"> <el-dialog title="问卷发布" :visible.sync="issueDialog" width="30%" top="25vh">
<el-form :model="issueForm"> <el-form :model="issueForm" :rules="issueRules" ref="issueForm">
<el-form-item label="问卷封面:" label-width="125px"> <el-form-item label="问卷封面:" label-width="125px">
<div style="display: flex;align-items: center;"> <div style="display: flex;align-items: center;">
<img style="width:80px; height: 50px; margin-right: 10px;cursor: pointer;" <img style="width:80px; height: 50px; margin-right: 10px;cursor: pointer;"
...@@ -44,7 +62,7 @@ ...@@ -44,7 +62,7 @@
</div> </div>
<!-- <el-input v-model="issueForm.cover" autocomplete="off"></el-input> --> <!-- <el-input v-model="issueForm.cover" autocomplete="off"></el-input> -->
</el-form-item> </el-form-item>
<el-form-item label="反馈期限:" label-width="125px"> <el-form-item label="反馈期限:" label-width="125px" prop="time">
<el-date-picker v-model="issueForm.time" type="datetimerange" range-separator="至" <el-date-picker v-model="issueForm.time" type="datetimerange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"> start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker> </el-date-picker>
...@@ -54,7 +72,7 @@ ...@@ -54,7 +72,7 @@
</el-form-item> </el-form-item>
<div style="text-align: center;"> <div style="text-align: center;">
<el-button size="small" @click="issueDialog = false">取消</el-button> <el-button size="small" @click="issueDialog = false">取消</el-button>
<el-button type="primary" size="small" @click="issueFormBtn">发布</el-button> <el-button type="primary" size="small" @click="issueFormBtn('issueForm')">发布</el-button>
</div> </div>
</el-form> </el-form>
</el-dialog> </el-dialog>
...@@ -96,7 +114,17 @@ export default { ...@@ -96,7 +114,17 @@ export default {
data() { data() {
return { return {
step: 1,
tabs: '1', tabs: '1',
titleForm: {
title: '',
},
titleRules: {
title: [
{ required: true, message: '请输入问卷名称', trigger: 'blur' },
]
},
drawer: 0, drawer: 0,
Frule: [], Frule: [],
Fopthion: '', Fopthion: '',
...@@ -106,57 +134,29 @@ export default { ...@@ -106,57 +134,29 @@ export default {
title: '', title: '',
cover: [ cover: [
'http://sy.scsmile.cn/YX-JXgl/v1.0/HT/images/%E6%96%B0%E5%A2%9E%E5%8F%8D%E9%A6%88_%E7%AC%AC3%E6%AD%A5_/u26101.svg', 'http://sy.scsmile.cn/YX-JXgl/v1.0/HT/images/%E6%96%B0%E5%A2%9E%E5%8F%8D%E9%A6%88_%E7%AC%AC3%E6%AD%A5_/u26101.svg',
'http://sy.scsmile.cn/YX-JXgl/v1.0/HT/images/%E6%96%B0%E5%A2%9E%E5%8F%8D%E9%A6%88_%E7%AC%AC3%E6%AD%A5_/u26102.svg' ],
]
}, },
issueRules: {
time: [
{ required: true, message: '请输入选择反馈期限', trigger: 'blur' },
]
}
} }
}, },
mounted() { mounted() {
//配置表单基础样式以及按钮展示 this.formConfiguration()
const option = {
"form": {
"labelPosition": "top",
"size": "mini",
"labelWidth": "20%",
"hideRequiredAsterisk": false,
"showMessage": true,
"inlineMessage": false
}, },
"submitBtn": true, methods: {
"resetBtn": false, //创建问卷
createForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.step = 0;
} }
this.$refs.designer.setOption(option) });
//移除组件大类
this.$refs.designer.removeMenu('layout',)
//移除对应组件
this.$refs.designer.removeMenuItem('el-transfer')
this.$refs.designer.removeMenuItem('el-alert')
this.$refs.designer.removeMenuItem("colorPicker")
this.$refs.designer.removeMenuItem("cascader")
this.$refs.designer.removeMenuItem("rate")
this.$refs.designer.removeMenuItem("slider")
this.$refs.designer.removeMenuItem("datePicker")
this.$refs.designer.removeMenuItem("timePicker")
this.$refs.designer.removeMenuItem("switch")
this.$refs.designer.removeMenuItem("tree")
this.$refs.designer.removeMenuItem("inputNumber")
this.$refs.designer.removeMenuItem("select")
this.$refs.designer.removeMenuItem("fc-editor")
this.$refs.designer.removeMenuItem("el-button")
this.$refs.designer.removeMenuItem("el-divider")
//配置组件生成规则---直接配置显示在页面上
// const rule = [{
// "type": "span",
// "title": "请输入问卷名称",
// "native": false,
// "children": [],
// "_fc_drag_tag": "span",
// "hidden": false,
// "display": true
// }]
// this.$refs.designer.setRule(rule)
}, },
methods: {
//问卷发布 //问卷发布
issueBtn() { issueBtn() {
this.Frule = formCreate.parseJson(this.getFormJson()) this.Frule = formCreate.parseJson(this.getFormJson())
...@@ -194,10 +194,12 @@ export default { ...@@ -194,10 +194,12 @@ export default {
console.log(FcDesignerOptions) console.log(FcDesignerOptions)
return JSON.stringify(FcDesignerOptions) return JSON.stringify(FcDesignerOptions)
}, },
issueFormBtn() { issueFormBtn(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.issueForm) console.log(this.issueForm)
this.Frule.forEach(i => { this.Frule.forEach(i => {
i.feedbackId = i.field i.remake = i.field
i.questionType = formType(i.type) i.questionType = formType(i.type)
i.require = formatNum(i.$required) i.require = formatNum(i.$required)
i.content = i.info i.content = i.info
...@@ -207,28 +209,88 @@ export default { ...@@ -207,28 +209,88 @@ export default {
j.remark = j.label j.remark = j.label
}) })
} }
i.feedbackOptionList = { i.feedbackOptionList = i.options
...i.options
}
}) })
let sub = { let sub = {
id: '', id: '',
title: '', ...this.titleForm,
feedbackTimeStart: this.issueForm.time[0], feedbackTimeStart: this.issueForm.time[0],
feedbackTimeEnd: this.issueForm.time[1], feedbackTimeEnd: this.issueForm.time[1],
inviteNum: '', inviteNum: '',
formContent: JSON.stringify(this.Frule), formContent: JSON.stringify(this.Frule),
ruleContent: JSON.stringify(this.Fopthion),
feedbackQuestionList: [ feedbackQuestionList: [
...this.Frule ...this.Frule
] ]
} }
console.log(sub) console.log(sub)
this.$post('/feedback/save', sub).then(res => {
console.log(res)
if (res.code == 1) {
this.$message.success('新增表单成功');
}
setTimeout(() => {
this.$router.back()
}, 1000);
})
}
});
},
formConfiguration() {
//配置表单基础样式以及按钮展示
const option = {
"form": {
"labelPosition": "top",
"size": "mini",
"labelWidth": "20%",
"hideRequiredAsterisk": false,
"showMessage": true,
"inlineMessage": false
},
"submitBtn": true,
"resetBtn": false,
}
this.$refs.designer.setOption(option)
//移除组件大类
this.$refs.designer.removeMenu('layout',)
//移除对应组件
this.$refs.designer.removeMenuItem('el-transfer')
this.$refs.designer.removeMenuItem('el-alert')
this.$refs.designer.removeMenuItem("colorPicker")
this.$refs.designer.removeMenuItem("cascader")
this.$refs.designer.removeMenuItem("rate")
this.$refs.designer.removeMenuItem("slider")
this.$refs.designer.removeMenuItem("datePicker")
this.$refs.designer.removeMenuItem("timePicker")
this.$refs.designer.removeMenuItem("switch")
this.$refs.designer.removeMenuItem("tree")
this.$refs.designer.removeMenuItem("inputNumber")
this.$refs.designer.removeMenuItem("select")
this.$refs.designer.removeMenuItem("fc-editor")
this.$refs.designer.removeMenuItem("el-button")
this.$refs.designer.removeMenuItem("el-divider")
//配置组件生成规则---直接配置显示在页面上
// const rule = [{
// "type": "span",
// "title": "请输入问卷名称",
// "native": false,
// "children": [],
// "_fc_drag_tag": "span",
// "hidden": false,
// "display": true
// }]
// this.$refs.designer.setRule(rule)
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/deep/.el-textarea__inner {
height: 300px;
}
/deep/._fc-m-tools { /deep/._fc-m-tools {
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: flex-start; justify-content: flex-start;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment