|
|
@@ -4,38 +4,50 @@
|
|
|
<el-page-header @back="onCancel" :content="type == 'create' ? '添加问卷' : '修改问卷'"></el-page-header>
|
|
|
</h2>
|
|
|
<div class="m-core">
|
|
|
- <el-form ref="form" :model="form" label-width="80px">
|
|
|
- <el-form-item label="问卷名称" prop="name" :rules="[{ required: true, message: '请输入问卷名称', trigger: 'blur' }]">
|
|
|
- <el-input v-model="form.name"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div v-for="(item, index) in form.questionList" :key="index">
|
|
|
- <!-- <el-form-item :label="'商品' + (index + 1)"
|
|
|
- :label-width="formLabelWidth"
|
|
|
- style="display: inline-block;"
|
|
|
- :prop="'goodsList.' + index + '.id'"
|
|
|
- :rules="[{ required: true, message: '请选择商品', trigger: 'change' }]">
|
|
|
- </el-form-item> -->
|
|
|
- <!-- <div v-if="!addDisabled" style="display: inline-block;">
|
|
|
- <el-button icon="el-icon-minus"
|
|
|
- v-if="form.goodsList.length > 1"
|
|
|
- @click.prevent="removeGoodsList(goodsList)"
|
|
|
- circle></el-button>
|
|
|
- <el-button icon="el-icon-plus"
|
|
|
- @click.prevent="addGoodsList"
|
|
|
- circle
|
|
|
- style="margin-left: 5px;"></el-button>
|
|
|
- </div> -->
|
|
|
+ <el-row>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
|
|
|
+ <el-form ref="form" :model="form" label-width="80px">
|
|
|
+ <el-form-item label="问卷名称" prop="title" :rules="[{ required: true, message: '请输入问卷名称', trigger: 'blur' }]">
|
|
|
+ <el-input v-model="form.title" placeholder="请输入问卷名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18" v-for="(item, index) in form.questionnaireQuestionList" :key="index" style="padding: 22px; background-color: #eef4f9; margin-bottom: 10px;">
|
|
|
+ <el-row type="flex" align="middle" style="padding-bottom: 15px;">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="width: 80px; text-align: right;display: inline-block;">问题{{ index + 1 }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" style="text-align: right; padding-right: 15px;">
|
|
|
+ <el-tooltip class="item" effect="dark" content="向下移动" placement="top">
|
|
|
+ <el-button icon="el-icon-top" circle size="small" @click="moveDown(form.questionnaireQuestionList, index)" :disabled="index == 0"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip class="item" effect="dark" content="向下移动" placement="top">
|
|
|
+ <el-button icon="el-icon-bottom" circle size="small" @click="moveUp(form.questionnaireQuestionList, index)" :disabled="form.questionnaireQuestionList.length <= 1 || form.questionnaireQuestionList.length == (index + 1)"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip class="item" effect="dark" content="删除" placement="top">
|
|
|
+ <el-button icon="el-icon-delete" circle size="small" @click="onDelete(form.questionnaireQuestionList, index)" :disabled="form.questionnaireQuestionList.length <= 1"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
<question-list ref="questions" :form="item" />
|
|
|
- </div>
|
|
|
- <el-button type="primary" @click="onSubmit">立即创建</el-button>
|
|
|
- <el-button>取消</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="padding-bottom: 15px;">
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18" style="text-align: center;">
|
|
|
+ <el-button style="width: 100%" type="default" @click="addQuestionItem(form.questionnaireQuestionList)" icon="el-icon-plus">新增问题</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-button type="primary" @click="onSubmit">提交问卷</el-button>
|
|
|
+ <el-button @click="onReset">重置</el-button>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import questionList from './components/questionList'
|
|
|
+import { questionnaireTopicAdd, questionnaireTopicGetDetail, questionnaireTopicUpdate } from './api'
|
|
|
export default {
|
|
|
name: 'operationQuestion',
|
|
|
components: { questionList },
|
|
|
@@ -43,31 +55,107 @@ export default {
|
|
|
let query = this.$route.query
|
|
|
return {
|
|
|
type: query.type,
|
|
|
+ id: query.id,
|
|
|
form: {
|
|
|
- name: null,
|
|
|
- questionList: [{}],
|
|
|
+ title: null,
|
|
|
+ questionnaireQuestionList: [{questionnaireQuestionItemList: [{ }]}],
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- mounted () {
|
|
|
+ async mounted () {
|
|
|
+ if(this.type == 'update') {
|
|
|
+ try {
|
|
|
+ let res = await questionnaireTopicGetDetail({ id: this.id })
|
|
|
+ console.log(res)
|
|
|
+ this.form = res.data
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
getForms() {
|
|
|
const { $refs: refs } = this;
|
|
|
return [
|
|
|
refs.form,
|
|
|
- ...(refs.cycles || []),
|
|
|
+ ...(refs.questions || []),
|
|
|
].filter((item) => !!item).map((item) => item.$refs.form || item);
|
|
|
},
|
|
|
+ setResultSort() { // 给问答结果排序
|
|
|
+ let form = this.form
|
|
|
+ form.questionnaireQuestionList.forEach((item, index) => {
|
|
|
+ item.sort = index
|
|
|
+ let itemList = item.questionnaireQuestionItemList
|
|
|
+ if(item.type != 'textarea') {
|
|
|
+ itemList.forEach((child, index) => {
|
|
|
+ child.sort = index
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ itemList = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
onSubmit() {
|
|
|
- // console.log(this.)
|
|
|
const forms = this.getForms();
|
|
|
- console.log(forms)
|
|
|
- // this.$refs['form'].validate((valid) => {
|
|
|
- // if(valid) {
|
|
|
- // console.log(this.form)
|
|
|
- // }
|
|
|
- // })
|
|
|
+ Promise.all(forms.map(this.getFormPromise)).then(async (res) => {
|
|
|
+ const validateResult = res.every(item => !!item)
|
|
|
+ console.log(validateResult)
|
|
|
+ if(validateResult) {
|
|
|
+ this.setResultSort()
|
|
|
+ console.log(this.form)
|
|
|
+ try {
|
|
|
+ if(this.type == 'create') {
|
|
|
+ await questionnaireTopicAdd(this.form)
|
|
|
+ this.$message.success('添加成功')
|
|
|
+ } else {
|
|
|
+ await questionnaireTopicUpdate(this.form)
|
|
|
+ this.$message.success('修改成功')
|
|
|
+ }
|
|
|
+ this.onCancel()
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let isError = document.getElementsByClassName('is-error')
|
|
|
+ isError[0].scrollIntoView({
|
|
|
+ block: 'center',
|
|
|
+ behavior: 'smooth',
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getFormPromise(form) {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ form.validate(res => {
|
|
|
+ resolve(res);
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onReset() {
|
|
|
+ const forms = this.getForms();
|
|
|
+ for(let form of forms) {
|
|
|
+ form.resetFields()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加题目选项
|
|
|
+ addQuestionItem(questionnaireQuestionList) {
|
|
|
+ questionnaireQuestionList.push({questionnaireQuestionItemList: [{}]})
|
|
|
+ },
|
|
|
+ // 向上移动
|
|
|
+ moveUp(arr, index) {
|
|
|
+ arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
|
|
|
+ },
|
|
|
+ // 向下移动
|
|
|
+ moveDown(arr, index) {
|
|
|
+ arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
|
|
|
+
|
|
|
+ },
|
|
|
+ // 删除选项
|
|
|
+ onDelete(arr, index) {
|
|
|
+ arr.splice(index, 1)
|
|
|
},
|
|
|
onCancel () {
|
|
|
this.$store.dispatch('delVisitedViews', this.$route)
|
