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="请选择题目类型"
            :disabled="disabled"
          >
            <el-option label="单选" value="radio"></el-option>
            <el-option label="多选" value="checkbox"></el-option>
            <el-option label="问答" value="textarea"></el-option>
            <el-option label="附件" value="file"></el-option>
            <el-option label="图片" value="image"></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="请选择是否必填"
            :disabled="disabled"
          >
            <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="请输入题目"
        :disabled="disabled"
        v-model="form.content"
        show-word-limit
        maxlength="200"
        :autosize="{ minRows: 2, maxRows: 4 }"
      ></el-input>
    </el-form-item>

    <template v-if="form.type == 'radio' || form.type == 'checkbox'">
      <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="请输入选项内容"
            :disabled="disabled"
            maxlength="100"
            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"
            :disabled="disabled"
            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
              
              @click="moveDown(form.questionnaireQuestionItemList, index)"
              :disabled="index == 0 || disabled"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="向下移动"
            placement="top"
          >
            <el-button
              icon="el-icon-bottom"
              circle
              
              @click="moveUp(form.questionnaireQuestionItemList, index)"
              :disabled="
                form.questionnaireQuestionItemList.length <= 1 ||
                form.questionnaireQuestionItemList.length == index + 1 ||
                disabled
              "
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button
              icon="el-icon-delete"
              circle
              
              @click="onDelete(form.questionnaireQuestionItemList, index)"
              :disabled="
                form.questionnaireQuestionItemList.length <= 1 || disabled
              "
            ></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 || disabled
          "
          @click="addQuestionItem(form.questionnaireQuestionItemList)"
          >新增选项</el-button
        >
      </el-form-item>
    </template>
  </el-form>
</template>
<script>
export default {
  props: ["form", "type", "disabled"],
  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) {
      if (this.type == "update") {
        if (this.form.delQuestionnaireQuestionItemIdList) {
          this.form.delQuestionnaireQuestionItemIdList.push(arr[index].id);
        } else {
          this.form.delQuestionnaireQuestionItemIdList = [arr[index].id];
        }
      }
      arr.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
.question .el-select {
  width: 100% !important;
}
</style>