JingTieXueTang.Web/src/views/examQuestionManagement/examQusetionCreateGapFilling.vue

<template>
  <div class="app-container">
    <div class="common-card exam-question-create-body">
      <a-spin :spinning="loading">
        <a-form
          :form="aquestionAddForm"
          @submit="handleSubmitForm"
          style="width: 500px;"
          :loading="loading"
        >
          <a-form-item
            label="试题内容"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-textarea
              placeholder="试题内容"
              :auto-size="{ minRows: 3, maxRows: 5 }"
              :maxLength="500"
              v-decorator="[
                'content',
                {
                  rules: [{ required: true, message: '请输入试题内容！' }],
                },
              ]"
            />
          </a-form-item>
          <div class="question-option">
            <span class="question-option-title">正确答案：</span>
            <span class="question-option-add" @click="questionOptionAddFun"
              >新增填空</span
            >
          </div>
          <div
            class="question-option-list-row"
            v-for="(item, index) in optionsList"
            :key="index"
          >
            <span
              v-if="optionsList.length > 1"
              class="question-option-list-row-delete"
              @click="questionOptionDeleteFun(index)"
              >删除</span
            >
            <a-form-item
              label=" "
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input
                placeholder="填空需与试题一一对应"
                :maxLength="100"
                v-decorator="[
                  `answers-${index}`,
                  {
                    rules: [{ required: true, message: '请输入填空答案！' }],
                  },
                ]"
              />
            </a-form-item>
          </div>
          <a-form-item
            label="试题类型"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-select
              v-decorator="[
                'typeCondition',
                {
                  rules: [
                    {
                      required: false,
                    },
                  ],
                  initialValue: typeCondition,
                },
              ]"
            >
              <a-select-option
                v-for="(item, index) in typeConditionList"
                :key="index"
                :value="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="工种类别"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-select
              v-decorator="[
                'engineeringWorkChooseValue',
                {
                  rules: [
                    {
                      required: false,
                    },
                  ],
                  initialValue: engineeringWorkChooseValue,
                },
              ]"
            >
              <a-select-option
                v-for="(item, index) in engineeringWorkList"
                :key="index"
                :value="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button
              class="qusetionSubmitBtn"
              type="primary"
              html-type="submit"
              >提交</a-button
            >
          </a-form-item>
        </a-form>
      </a-spin>
    </div>
  </div>
</template>

<script>
import { formateUrlParams } from '@/filters';
import { mapGetters } from 'vuex';
export default {
  name: 'examQusetionCreateGapFilling',
  props: {},
  components: {},
  data() {
    return {
      loading: false, // 是否显示加载动画
      labelCol: { span: 6 }, // 表单行中label的占位
      wrapperCol: { span: 18 }, // 表单行中内容的占位
      aquestionAddForm: this.$form.createForm(this, {
        name: 'examQusetionAddDuoXuan',
      }),
      questionType: 'TianKong', // 试题类型：填空题
      optionsList: [{ value: '' }], // 选项列表
      typeConditionList: [], // 试题类型列表
      typeCondition: '', // 所选试题类型
      engineeringWorkList: [], // 工种数据列表
      engineeringWorkChooseValue: '', // 所选工种
      finalAnswerIndexs: undefined, // 正确答案下标
    };
  },
  created() {
    this.initDataFun(); // 初始化数据
  },
  mounted() {},
  beforeDestroy() {},
  watch: {},
  computed: {
    ...mapGetters([
      'GET_ENGINEERING_WORK_LIST',
      'GET_EXAM_QUESTION_TYPE_CONDITION',
    ]),
  },
  methods: {
    // 初始化数据
    initDataFun() {
      // 试题类型
      this.typeConditionList = [
        { name: '不限', id: '' },
        ...this.GET_EXAM_QUESTION_TYPE_CONDITION,
      ];
      // 工种类别
      this.engineeringWorkList = [
        { name: '不限', id: '' },
        ...this.GET_ENGINEERING_WORK_LIST,
      ];
    },
    // 操作：新增选项
    questionOptionAddFun() {
      this.optionsList.push({ value: '' });
    },
    // 操作：删除选项
    questionOptionDeleteFun(index) {
      this.optionsList.splice(index, 1);
    },
    // 操作：表单提交
    handleSubmitForm(e) {
      e.preventDefault();
      this.aquestionAddForm.validateFields((err, values) => {
        if (!err) {
          console.log(values);
          let engineerTypeInfo = this.formatEngineeringWorkChooseValue(
            values.engineeringWorkChooseValue
          ); // 获取工种信息
          // 需要拼接到请求地址后面的参数
          let urlParams = {
            categoryid: this.questionType, // 试题类别ID
            engineertypeid: values.engineeringWorkChooseValue, // 工种ID
          };
          // 接口Body参数
          let params = {
            content: values.content, // 内容
            finalAnswer: this.formatQuestionAnswersArr(values), // 正确答案
            engineerTypes: [engineerTypeInfo], // 工种信息集合
            type: this.questionType, // 试题类型ID
            answers: [], // 选项
          };
          this.httpQuestFun(urlParams, params);
        }
      });
    },
    // 获取工种信息
    formatEngineeringWorkChooseValue(id) {
      let seleteItem = {};
      for (let i = 0; i < this.engineeringWorkList.length; i++) {
        let item = this.engineeringWorkList[i];
        if (item.id === id) {
          seleteItem = item;
          break;
        }
      }
      return seleteItem;
    },
    // 把答案放入一个数组中
    formatQuestionAnswersArr(values) {
      let arr = [];
      for (let key in values) {
        if (key.includes('answers-')) {
          arr.push(values[key]);
        }
      }
      return arr;
    },
    // 表单提交请求
    httpQuestFun(urlParams, params) {
      this.loading = true;
      this.$_http
        .post(
          formateUrlParams(
            this.$_API.INTERFACE_POST_EXAMS_QUESTION_ADD,
            urlParams
          ),
          params
        )
        .then(() => {
          this.loading = false;
          this.$message.success('添加填空题成功');
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
@import '~@/styles/common/variable.less';
</style>