dy-admin-manager/src/views/setQuestions/components/questionList.vue

<template>
<el-form :model="form" ref="form" label-width="100px" class="question">
    <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="题目类型" prop="type" :rules="[{ required: true, message: '请选择题目类型', trigger: 'change' }]">
                    <el-select v-model="form.type" placeholder="请选择题目类型">
                        <el-option label="单选" value="radio"></el-option>
                        <el-option label="多选" value="checkbox"></el-option>
                        <el-option label="问答" value="textarea"></el-option>
                    </el-select>
                </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="是否必填" prop="isRequire" :rules="[{ required: true, message: '请选择是否必填', trigger: 'change' }]">
                <el-select v-model="form.isRequire" placeholder="请选择是否必填">
                    <el-option label="是" :value="1"></el-option>
                    <el-option label="否" :value="0"></el-option>
                </el-select>
            </el-form-item>
        </el-col>
    </el-row>
    <el-form-item label="题目" prop="content" :rules="[{ required: true, message: '请输入题目', trigger: 'blur' }]">
        <el-input type="textarea" placeholder="请输入题目" v-model="form.content" show-word-limit maxlength="200" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
    </el-form-item>

    <template v-if="form.type != 'textarea'">
        <div v-for="(questionnaireQuestionItemList, index) in form.questionnaireQuestionItemList" :key="index">
            <el-form-item :label="'选项' + (index + 1)"
                style="display: inline-block;"
                :prop="'questionnaireQuestionItemList.' + index + '.answerValue'"
                :rules="[{ required: true, message: '请输入选项内容', trigger: 'change' }]">
                <el-input type="text" placeholder="请输入选项内容" v-model="questionnaireQuestionItemList.answerValue"></el-input>
            </el-form-item>
            <el-form-item label="是否终止答题"
                style="display: inline-block;"
                label-width="120px"
                :prop="'questionnaireQuestionItemList.' + index + '.isOver'"
                :rules="[{ required: true, message: '请选择是否终止答题', trigger: 'change' }]">
                <el-radio-group v-model="questionnaireQuestionItemList.isOver" style="margin-right: 20px">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <div style="display: inline-block;">
                <el-tooltip class="item" effect="dark" content="向下移动" placement="top">
                    <el-button icon="el-icon-top" circle size="small" @click="moveDown(form.questionnaireQuestionItemList, 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.questionnaireQuestionItemList, index)" :disabled="form.questionnaireQuestionItemList.length <= 1 || form.questionnaireQuestionItemList.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.questionnaireQuestionItemList, index)" :disabled="form.questionnaireQuestionItemList.length <= 1"></el-button>
                </el-tooltip>
            </div>
        </div>
        <el-form-item>
            <el-button style="width: 200px" type="default" icon="el-icon-plus" :disabled="form.questionnaireQuestionItemList.length >= 10" @click="addQuestionItem(form.questionnaireQuestionItemList)">新增选项</el-button>
        </el-form-item>
    </template>
</el-form>
</template>
<script>
export default {
    props: ['form'],
    data () {
        return {
        }
    },
    mounted () {
    },
    methods: {
        // 添加题目选项
        addQuestionItem(questionnaireQuestionItemLists) {
            questionnaireQuestionItemLists.push({})
        },
        // 向上移动
        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)
        }
    }
}
</script>
<style lang="scss" scoped>
.question .el-select {
    width: 100% !important;
}
</style>