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

<template>
  <div class="app-container">
    <div class="common-card exam-question-create-body">
      <a-spin :spinning="loading">
        <a-form
          :form="loginForm"
          @submit="handleLoginFun"
          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="20"
              v-decorator="[
                'content',
                {
                  rules: [{ required: true, message: 'Please input content!' }],
                },
              ]"
            />
          </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 > 2"
              class="question-option-list-row-delete"
              @click="questionOptionDeleteFun(index)"
              >删除</span
            >
            <a-form-item
              :label="index | formatQuestionIndex"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input
                placeholder="选项内容"
                :maxLength="200"
                v-decorator="[
                  `answers-${index}`,
                  {
                    rules: [
                      { required: true, message: 'Please input content!' },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </div>
          <a-form-item
            label="正确答案"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <!-- <a-input
              placeholder="答案格式为大写字母"
              :maxLength="200"
              v-decorator="[
                'finalAnswer',
                {
                  rules: [{ required: true, message: 'Please input content!' }],
                },
              ]"
            /> -->
            <a-select
              mode="multiple"
              v-decorator="[
                'finalAnswerIndexs',
                {
                  rules: [{ required: true, message: 'Please input content!' }],
                },
              ]"
            >
              <a-select-option
                v-for="(item, index) in optionsList"
                :key="index"
                :value="index"
              >
                {{ index | formatQuestionIndex }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="必学日期"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-date-picker
              @change="onDateChange"
              placeholder="请选择日期"
              v-decorator="[
                'studyDate',
                {
                  rules: [{ required: true, message: 'Please selete date!' }],
                },
              ]"
            />
          </a-form-item>
          <a-form-item
            label="工种类别"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-select
              v-decorator="[
                'engineeringWorkChooseValue',
                {
                  rules: [
                    {
                      required: false,
                      message: 'Please selete engineering work!',
                    },
                  ],
                  initialValue: engineeringWorkChooseValue,
                },
              ]"
            >
              <a-select-option
                :value="item.code"
                v-for="(item, index) in engineeringWorkList"
                :key="index"
              >
                {{ 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 { ENGINEERING_WORK_LIST } from '@/common/Constant';
import { formatQuestionIndex } from '@/filters';
export default {
  name: 'examQusetionCreateMultiple',
  props: {},
  components: {},
  data() {
    return {
      loading: false, // 是否显示加载动画
      labelCol: { span: 6 }, // 表单行中label的占位
      wrapperCol: { span: 18 }, // 表单行中内容的占位
      loginForm: this.$form.createForm(this, {
        name: 'examQusetionAddDuoXuan',
      }),
      questionType: 'DuoXuan', // 题目类型：多选题
      optionsList: [{ value: '' }, { value: '' }], // 选项列表
      engineeringWorkList: [], // 工种数据列表
      engineeringWorkChooseValue: '', // 所选工种
      studyDate: '', // 开考时间
    };
  },
  created() {
    this.initDataFun(); // 初始化数据
  },
  mounted() {},
  beforeDestroy() {},
  watch: {},
  computed: {},
  methods: {
    // 初始化数据
    initDataFun() {
      // 工种类别
      this.engineeringWorkList = [
        { name: '不限工种', code: '' },
        ...ENGINEERING_WORK_LIST,
      ];
      this.engineeringWorkChooseValue = this.engineeringWorkList[0].code;
    },
    // 操作：新增选项
    questionOptionAddFun() {
      this.optionsList.push({ value: '' });
    },
    // 操作：删除选项
    questionOptionDeleteFun(index) {
      this.optionsList.splice(index, 1);
    },
    // 操作：选择答案
    handleChange(values) {
      console.log(values);
    },
    // 操作：选择日期
    onDateChange(date, dateString) {
      if (date) {
        this.studyDate = dateString;
      } else {
        this.studyDate = '';
      }
    },
    // 操作：表单提交
    handleLoginFun(e) {
      e.preventDefault();
      this.loginForm.validateFields((err, values) => {
        if (!err) {
          let params = {
            type: this.questionType,
            content: values.content,
            engineeringWorkChooseValue: values.engineeringWorkChooseValue,
            studyDate: this.studyDate,
            finalAnswer: this.formatQuestionFinalAnswerArr(
              values.finalAnswerIndexs
            ),
            answers: this.formatQuestionAnswersArr(values),
          };
          this.httpQuestFun(params);
        }
      });
    },
    // 把答案下标转换为大写英文字母放入一个数组中
    formatQuestionFinalAnswerArr(indexs) {
      let arr = '';
      indexs.forEach((item) => {
        arr += formatQuestionIndex(item);
      });
      return [arr];
    },
    // 把选项放入一个数组中
    formatQuestionAnswersArr(values) {
      let arr = [];
      for (let key in values) {
        if (key.includes('answers-')) {
          arr.push(values[key]);
        }
      }
      return arr;
    },
    // 表单提交请求
    httpQuestFun(params) {
      this.loading = true;
      console.log(params);
      setTimeout(() => {
        this.loading = false;
      }, 2000);
      // this.$_http
      //   .post(this.$_API.INTERFACE_POST_EXAMS_QUESTION_ADD, params)
      //   .then((res) => {
      //     console.log(res);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   })
      //   .finally(() => {
      //     this.loading = false;
      //   });
    },
  },
};
</script>

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

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