Skip to content

A
attendance-performance-platform
Commit dd63d0a0 authored by 王启林's avatar 王启林
Browse files
Options

对接问卷生成接口

parent bfbd457c
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 83 deletions
attendance-performance-manager-ui/admin/src/views/feedback/addQuestion/list.vue
View file @ dd63d0a0
...@@ -4,15 +4,33 @@ ...@@ -4,15 +4,33 @@
<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">
<fc-designer style="height: 79vh;" ref="designer"> <div style="width: 800px;margin: 100px auto;" v-show="step">
<template slot="handle"> <el-form :model="titleForm" :rules="titleRules" ref="titleForm">
<ElButton style="margin-left: 10px;" icon="el-icon-upload" type="primary" size="small" <el-form-item label="问卷名称：" prop="title" label-width="125px">
@click="issueBtn" round>问卷发布 <el-input placeholder="请输入问卷名称" v-model="titleForm.title"></el-input>
</ElButton> </el-form-item>
<ElButton icon="el-icon-view" type="success" size="small" @click="showDrawer" round>手机模拟预览 <el-form-item label="问卷说明：" label-width="125px">
</ElButton> <el-input type="textarea" placeholder="请输入问卷说明（不超过1000个汉字）" maxlength="1000"
</template> v-model="titleForm.remake"></el-input>
</fc-designer> </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">
<template slot="handle">
<ElButton style="margin-left: 10px;" icon="el-icon-upload" type="primary" size="small"
@click="issueBtn" round>问卷发布
</ElButton>
<ElButton icon="el-icon-view" type="success" size="small" @click="showDrawer" round>手机模拟预览
</ElButton>
</template>
</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,
"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)
}, },
methods: { methods: {
//创建问卷
createForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.step = 0;
}
});
},
//问卷发布 //问卷发布
issueBtn() { issueBtn() {
this.Frule = formCreate.parseJson(this.getFormJson()) this.Frule = formCreate.parseJson(this.getFormJson())
...@@ -194,41 +194,103 @@ export default { ...@@ -194,41 +194,103 @@ export default {
console.log(FcDesignerOptions) console.log(FcDesignerOptions)
return JSON.stringify(FcDesignerOptions) return JSON.stringify(FcDesignerOptions)
}, },
issueFormBtn() { issueFormBtn(formName) {
console.log(this.issueForm) this.$refs[formName].validate((valid) => {
this.Frule.forEach(i => { if (valid) {
i.feedbackId = i.field console.log(this.issueForm)
i.questionType = formType(i.type) this.Frule.forEach(i => {
i.require = formatNum(i.$required) i.remake = i.field
i.content = i.info i.questionType = formType(i.type)
if (formType(i.type) == 1 || formType(i.type) == 2) { i.require = formatNum(i.$required)
i.options.forEach(j => { i.content = i.info
j.content = j.value if (formType(i.type) == 1 || formType(i.type) == 2) {
j.remark = j.label i.options.forEach(j => {
j.content = j.value
j.remark = j.label
})
}
i.feedbackOptionList = i.options
})
let sub = {
id: '',
...this.titleForm,
feedbackTimeStart: this.issueForm.time[0],
feedbackTimeEnd: this.issueForm.time[1],
inviteNum: '',
formContent: JSON.stringify(this.Frule),
ruleContent: JSON.stringify(this.Fopthion),
feedbackQuestionList: [
...this.Frule
]
}
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);
}) })
} }
i.feedbackOptionList = { });
...i.options
} },
}) formConfiguration() {
let sub = { //配置表单基础样式以及按钮展示
id: '', const option = {
title: '', "form": {
feedbackTimeStart: this.issueForm.time[0], "labelPosition": "top",
feedbackTimeEnd: this.issueForm.time[1], "size": "mini",
inviteNum: '', "labelWidth": "20%",
formContent: JSON.stringify(this.Frule), "hideRequiredAsterisk": false,
feedbackQuestionList: [ "showMessage": true,
...this.Frule "inlineMessage": false
] },
"submitBtn": true,
"resetBtn": false,
} }
console.log(sub) 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