JingTieXueTang.Web/src/views/examManagement/examManualVolumeFormation.vue

<template>
  <div class="app-container">
    <a-spin :spinning="loading">
      <!-- 基础信息 -->
      <div class="common-card basic-information-box">
        <div class="basic-information-title">基本信息</div>
        <a-form
          :form="loginForm"
          @submit="handleSubmitFun"
          style="width: 515px;"
          :loading="loading"
        >
          <a-form-item
            label="考试名称"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-input
              placeholder="请输入考试标题"
              :maxLength="100"
              v-decorator="[
                'name',
                {
                  initialValue: examDetailData.name,
                  rules: [{ required: true, message: '请输入考试名称！' }],
                },
              ]"
            />
          </a-form-item>
          <a-form-item
            label="考试时间"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <!-- <ExamDateTime
              v-decorator="[
                'examDateTime',
                {
                  initialValue: { dateTime: examDateTime },
                  rules: [
                    {
                      required: true,
                      validator: checkExamDateTime,
                    },
                  ],
                },
              ]"
            />-->
            <a-date-picker
              showTime
              placeholder="请选择日期 + 时间"
              @change="onDateChange"
              v-decorator="[
                'examDateTime',
                {
                  initialValue: examDetailData.startTime,
                  rules: [
                    { required: true, message: '请选择考试日期 + 时间！' },
                  ],
                },
              ]"
              style="width:100%;"
            />
          </a-form-item>
          <a-form-item
            label="考试时长"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <ExamTimeLong
              v-decorator="[
                'examTimeLong',
                {
                  initialValue: {
                    hours: examDetailData.examLongTimeHours,
                    minutes: examDetailData.examLongTimeMinutes,
                  },
                  rules: [
                    {
                      required: true,
                      validator: checkExamTimeLong,
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
          <a-form-item
            label="考试描述"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-textarea
              placeholder="请输入考试描述"
              :auto-size="{ minRows: 3, maxRows: 5 }"
              :maxLength="200"
              v-decorator="[
                'content',
                {
                  initialValue: examDetailData.description,
                  rules: [
                    {
                      required: true,
                      message: '请输入考试描述！',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
          <a-form-item
            label="考试类别"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-select
              v-decorator="[
                'examTypeChooseValue',
                {
                  rules: [{ required: true, message: '请选择考试类别！' }],
                  initialValue: examDetailData.examCategory,
                },
              ]"
            >
              <a-select-option
                :value="item.code"
                v-for="(item, index) in examTypeList"
                :key="index"
                >{{ 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: true,
                      message: '请选择工种类别！',
                    },
                  ],
                  initialValue: examDetailData.engineeringWork,
                },
              ]"
            >
              <a-select-option
                :value="item.id"
                v-for="(item, index) in engineeringWorkList"
                :key="index"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item v-show="false">
            <a-button
              id="examManualVolumeFormationSubmit"
              type="primary"
              html-type="submit"
              >提交</a-button
            >
          </a-form-item>
        </a-form>
        <div></div>
      </div>
      <!-- 当前试题列表 -->
      <div class="common-card a-card-margin-top">
        <div class="flex-between">
          <div class="current-table-title">当前试题</div>
          <div class="current-table-title">
            总分：{{ current_tableGradesCount }}
          </div>
        </div>
        <!-- 清空、批量删除 -->
        <div class="exam-question-edit-row a-card-margin-top">
          <a-button
            type="primary"
            :disabled="!currentHasSelected"
            @click="clearCurrentTableSelectDataFun"
            >清空所选</a-button
          >
          <span
            v-if="currentHasSelected"
            class="exam-question-edit-checkedtxt"
            >{{ `已选择 ${current_selectedRowKeys.length} 项` }}</span
          >
          <a-button
            class="exam-question-edit-delete"
            type="primary"
            :disabled="!currentHasSelected"
            @click="deleteCurrentTableSelectDataFun"
            >批量删除</a-button
          >
        </div>
        <!-- 表单 -->
        <a-table
          :columns="current_columns"
          :data-source="current_tableData"
          :row-key="(record) => record.id"
          :row-selection="{
            selectedRowKeys: current_selectedRowKeys,
            onChange: onCurrentTableSelectChange,
          }"
          :loading="loading"
          :pagination="current_pagination"
          @change="handleCurrentTableChangePage"
        >
          <template slot="grade" slot-scope="text, record">
            <a-input
              :value="record.grade"
              type="number"
              placeholder="输入分值"
              :maxLength="3"
              @change="
                (e) => {
                  handleCurrentGradeChange(e, record);
                }
              "
            />
          </template>
          <template slot="action" slot-scope="text, record">
            <a @click="toQuestionDetailFun(record)">详情</a>
            <a-divider type="vertical" />
            <a @click="deleteCurrentTableQuestionFun(record)">删除</a>
          </template>
        </a-table>
        <!-- 分页 -->
        <!-- <div class="a-pagination-display">
          <a-pagination
            v-model="current_pagination.current"
            :pageSize="current_pagination.pageSize"
            :total.sync="current_pagination.total"
            show-less-items
            show-quick-jumper
            @change="getCurrentQusetionsListFun"
          />
        </div> -->
      </div>
      <!-- 题库试题列表 -->
      <div class="common-card a-card-margin-top">
        <!-- 过滤条件栏目 -->
        <div>
          <div class="filter-condition-box">
            <span>所属类别：</span>
            <ul>
              <li
                :class="{
                  checkedExamQuestionType:
                    bank_checkedQuestionType === item.code,
                }"
                v-for="(item, index) in bank_questionType"
                :key="index"
                @click="handleExamQuestionTypeFun(item)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="filter-condition-box a-card-margin-top flexCenter">
            <span>所属类型：</span>
            <div class="create-select-row">
              <div class="create-select-item">
                <span>父类</span>
                <a-select
                  v-model="bank_checkedQuestionTypeConditionParent"
                  @change="selectTypeConditionParent"
                >
                  <a-select-option
                    v-for="(item, index) in bank_questionTypeConditionParent"
                    :key="index"
                    :value="item.id"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </div>
              <div class="create-select-item">
                <span>子类</span>
                <a-select
                  v-model="bank_checkedQuestionTypeConditionChildren"
                  :disabled="!bank_checkedQuestionTypeConditionParent"
                  @change="selectTypeConditionChildren"
                >
                  <a-select-option
                    v-for="(item, index) in bank_questionTypeConditionChildren"
                    :key="index"
                    :value="item.id"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </div>
            </div>
          </div>
          <div class="border-line"></div>
          <div class="filter-other-box">
            <span class="filter-other-title">其它选项：</span>
            <span class="filter-other-item-title">工种：</span>
            <a-select
              v-model="bank_engineeringWorkChooseValue"
              @change="handleChangeEngineeringWorkValue"
            >
              <a-select-option
                v-for="(item, index) in bank_engineeringWorkList"
                :key="index"
                :value="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </div>
        </div>
        <!-- 表单 -->
        <div class="a-card-margin-top">
          <!-- 清空、批量添加 -->
          <div class="exam-question-edit-row">
            <a-button
              type="primary"
              :disabled="!bankHasSelected"
              @click="clearBankTableSelect"
              >清空所选</a-button
            >
            <span
              v-if="bankHasSelected"
              class="exam-question-edit-checkedtxt"
              >{{ `已选择 ${bank_selectedRowKeys.length} 项` }}</span
            >
            <a-button
              class="exam-question-edit-delete"
              type="primary"
              :disabled="!bankHasSelected"
              @click="bankTableAddSelectData"
              >批量添加</a-button
            >
          </div>
          <!-- 表单 -->
          <a-table
            :columns="bank_columns"
            :data-source="bank_tableData"
            :row-key="(record) => record.id"
            :row-selection="{
              selectedRowKeys: bank_selectedRowKeys,
              onChange: onBankTableSelectChange,
              getCheckboxProps: (record) => ({
                props: {
                  disabled: record.disabled,
                },
              }),
            }"
            :loading="loading"
            :pagination="false"
          >
            <template slot="action" slot-scope="text, record">
              <a @click="toQuestionDetailFun(record)">详情</a>
              <a-divider type="vertical" />
              <a
                :class="{ disabledBtn: record.disabled }"
                @click="bankTableAddQuestion(record)"
                >添加</a
              >
            </template>
          </a-table>
          <!-- 分页 -->
          <div class="a-pagination-display">
            <a-pagination
              v-model="bank_pagination.current"
              :pageSize="bank_pagination.pageSize"
              :total.sync="bank_pagination.total"
              show-less-items
              show-quick-jumper
              @change="getBankQusetionsListFun"
            />
          </div>
        </div>
        <div class="submit-row">
          <a-button type="primary" @click="handleSubmitBtnFun">组卷</a-button>
        </div>
      </div>
    </a-spin>
    <div class="company-info">
      <span>
        copyright © 浮游科技有限公司出品
      </span>
    </div>
  </div>
</template>

<script>
import { EXAM_TYPE, EXAM_QUESTION_TYPE } from '@/common/Constant';
import {
  formateSeconds,
  formateUrlParams,
  formatePathParams,
  formateDateTimeToAfter,
  formatTimeHoursMinuteSecondsFun,
} from '@/filters';
import { mapGetters } from 'vuex';
// const ExamDateTime = {
//   props: ['value'],
//   template: `
//     <span>
//       <a-date-picker
//               placeholder="请选择日期"
//               showTime
//         @change="handleDateChange"
//         style="width:100%;"
//             />
//     </span>
//   `,
//   data() {
//     const value = this.value || {};
//     return {
//       dateTime: value.dateTime || null,
//     };
//   },
//   methods: {
//     handleDateChange(dates, datesString) {
//       if (dates) {
//         this.dateTime = datesString;
//       } else {
//         this.dateTime = null;
//       }
//       this.triggerChange({ dateTime: this.dateTime });
//     },
//     triggerChange(changedValue) {
//       // Should provide an event to pass value to Form.
//       this.$emit('change', Object.assign({}, this.$data, changedValue));
//     },
//   },
// };
const ExamTimeLong = {
  props: ['value'],
  template: `
    <span>
      <a-input
        type='number'
        :value="hours"
        :maxLength="2"
        @change="handleNumberChange"
        style="width: 35%; margin-right: 2%;"
      />
      <span style="margin-right: 2%;">小时</span>
      <a-input
        type='number'
        :value="minutes"
        :maxLength="2"
        @change="handleCurrencyChange"
        style="width: 35%; margin-right: 2%;"
      />
      <span>分钟</span>
    </span>
  `,
  data() {
    const value = this.value || {};
    return {
      hours: value.hours || '',
      minutes: value.minutes || '',
    };
  },
  watch: {
    value(val = {}) {
      this.hours = val.hours || '';
      this.minutes = val.minutes || '';
    },
  },
  methods: {
    handleNumberChange(e) {
      const hours = parseInt(e.target.value);
      if (isNaN(hours)) {
        return;
      }
      this.triggerChange({ hours });
    },
    handleCurrencyChange(e) {
      const minutes = parseInt(e.target.value);
      if (isNaN(minutes)) {
        return;
      }
      this.triggerChange({ minutes });
    },
    triggerChange(changedValue) {
      // Should provide an event to pass value to Form.
      this.$emit('change', Object.assign({}, this.$data, changedValue));
    },
  },
};
export default {
  name: 'examManualVolumeFormation',
  props: {},
  components: {
    ExamTimeLong,
    // ExamDateTime,
  },
  data() {
    return {
      loading: false, // 是否展示加载动画
      // 基础信息的表单
      labelCol: { span: 6 }, // 表单行中label的占位
      wrapperCol: { span: 18 }, // 表单行中内容的占位
      loginForm: this.$form.createForm(this, {
        name: 'examManualVolumeFormation',
      }),
      engineeringWorkList: [], // 工种数据列表
      examTypeList: [], // 考试类型列表
      examDateTime: '', // 考试时间
      examDetailData: {
        id: '',
        name: '', // 考试名称
        startTime: '', // 考试开始日期时间
        examLongTimeHours: '', // 考试时长：小时
        examLongTimeMinutes: '', // 考试时长：分钟
        description: '', // 考试描述
        examCategory: '', // 考试类型
        engineeringWork: '', // 工种类别
      }, // 考试详情
      // 当前试题列表
      current_columns: [], // form表单的列参数
      current_tableData: [], // 表单数据
      current_pagination: {
        pageSize: 7,
        current: 1,
        total: 0,
      }, // 分页参数
      current_selectedRowKeys: [], // 多选的结果
      // 题库列表
      bank_questionType: [], // 试题类别列表
      bank_checkedQuestionType: '', // 所选试题类别
      bank_questionTypeConditionParent: [], // 试题类型列表-父类
      bank_checkedQuestionTypeConditionParent: '', // 所选试题类型-父类
      bank_questionTypeConditionChildren: [], // 试题类型列表-子类
      bank_checkedQuestionTypeConditionChildren: '', // 所选试题类型-子类
      bank_engineeringWorkList: [], // 工种数据列表
      bank_engineeringWorkChooseValue: '', // 所选工种
      bank_columns: [], // form表单的列参数
      bank_tableData: [], // 表单数据
      bank_pagination: {
        pageSize: 7,
        current: 1,
        total: 0,
      }, // 分页参数
      bank_selectedRowKeys: [], // 多选的结果
      disabledIdArr: [], // 当前试题中已有的试题ID（即题库列表中不可选取的行数据Id）
    };
  },
  created() {
    this.initDataFun(); //初始化数据
  },
  mounted() {},
  beforeDestroy() {},
  watch: {},
  computed: {
    ...mapGetters([
      'GET_ENGINEERING_WORK_LIST',
      'GET_EXAM_QUESTION_TYPE_CONDITION_PARENT',
    ]),
    // 判断 当前试题 列表中是否有行被选择
    currentHasSelected() {
      return this.current_selectedRowKeys.length > 0;
    },
    // 判断 题库试题 列表中是否有行被选择
    bankHasSelected() {
      return this.bank_selectedRowKeys.length > 0;
    },
    // 计算：当前题目列表的总分
    current_tableGradesCount() {
      let that = this;
      let totalGrades = 0;
      that.current_tableData.forEach((item) => {
        if (item.grade) {
          totalGrades = totalGrades + item.grade;
        }
      });
      return totalGrades;
    },
  },
  methods: {
    //初始化数据
    initDataFun() {
      // 考试类型
      this.examTypeList = [...EXAM_TYPE];
      this.examDetailData.examCategory = this.examTypeList[0].code;
      // 工种类别
      this.engineeringWorkList = this.GET_ENGINEERING_WORK_LIST;
      this.examDetailData.engineeringWork = this.engineeringWorkList[0].id;
      this.initCurrentTableFun(); // 初始化当前试题列表相关数据
      this.initBankTableFun(); // 初始化题库试题列表相关数据
    },
    // #region 当前试题列表
    // 初始化当前试题列表
    initCurrentTableFun() {
      // 表单的列的配置参数
      this.current_columns = [
        {
          title: '试题编号',
          dataIndex: 'id',
          key: 'id',
          width: 240,
        },
        {
          title: '试题',
          dataIndex: 'content',
          key: 'content',
        },
        {
          title: '试题类别',
          dataIndex: 'typeTxt',
          key: 'typeTxt',
          scopedSlots: { customRender: 'typeTxt' },
          width: 100,
        },
        {
          title: '试题父类',
          dataIndex: 'parentId',
          key: 'parentId',
          scopedSlots: { customRender: 'parentId' },
          width: 150,
        },
        {
          title: '试题子类',
          dataIndex: 'categoryid',
          key: 'categoryid',
          scopedSlots: { customRender: 'categoryid' },
          width: 150,
        },
        {
          title: '工种',
          dataIndex: 'engineerTypeTxt',
          key: 'engineerTypeTxt',
          scopedSlots: { customRender: 'engineerTypeTxt' },
          width: 100,
        },
        {
          title: '分值',
          dataIndex: 'grade',
          key: 'grade',
          scopedSlots: { customRender: 'grade' },
          width: 150,
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          width: 150,
        },
      ];
      // // 参数存在即编辑
      // if (this.$route.query.id) {
      //   this.getExamDetailFun(this.$route.query.id);
      //   this.getCurrentQusetionsListFun(
      //     this.$route.query.id,
      //     this.$route.query.questionNum
      //   ); // 查询：当前试题列表数据
      // }
    },
    // 查询：考试详情
    getExamDetailFun(examId) {
      this.loading = true;
      let params = {
        examId: examId,
      };
      this.$_http
        .get(formatePathParams(this.$_API.INTERFACE_GET_EXAM_DETAIL, params))
        .then((res) => {
          let resData = res.data;
          // 考试时长
          let tarTime = formatTimeHoursMinuteSecondsFun(resData.duration);
          // 工种
          if (
            resData.engineerTypes &&
            resData.engineerTypes[0] &&
            resData.engineerTypes[0].id
          ) {
            resData.engineeringWork = resData.engineerTypes[0].id;
          } else {
            resData.engineerTypeTxt = '不限';
          }
          this.examDetailData = {
            id: resData.id || '',
            name: resData.name || '', // 考试名称
            startTime: resData.startTime || '', // 考试开始日期时间
            examLongTimeHours: tarTime.hours || '', // 考试时长：小时
            examLongTimeMinutes: tarTime.minutes || '', // 考试时长：分钟
            description: resData.description || '', // 考试描述
            examCategory:
              resData.examCategory || this.engineeringWorkList[0].id, // 考试类型
            engineeringWork:
              resData.engineeringWork || this.examTypeList[0].code, // 工种类别
          };
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 查询：试题列表数据
    getCurrentQusetionsListFun(id, questionNum) {
      if (!id || !questionNum) {
        this.$message.error('数据异常，请重新进入当前页面');
        return;
      }
      this.loading = true;
      let paramsPath = {
        examId: id,
      };
      let params = {
        page: 0,
        size: questionNum,
      };
      this.$_http
        .get(
          formatePathParams(
            this.$_API.INTERFACE_GET_EXAM_QUESTIONS_LIST,
            paramsPath
          ),
          { params }
        )
        .then((res) => {
          let resData = res.data.content;
          resData.forEach((item) => {
            // 试题类别
            this.bank_questionType.forEach((it) => {
              if (item.type === it.code) {
                item.typeTxt = it.name;
              }
            });
            // 工种
            if (
              item.engineerTypes &&
              item.engineerTypes[0] &&
              item.engineerTypes[0].id
            ) {
              item.engineerTypeTxt = item.engineerTypes[0].name;
            } else {
              item.engineerTypeTxt = '不限';
            }
          });
          this.current_tableData = resData;
          this.current_pagination.total = res.data.totalElements; // 总条数
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 切换：表格页码
    handleCurrentTableChangePage(pagination) {
      const pager = { ...this.current_pagination };
      pager.current = pagination.current;
      this.current_pagination = pager;
    },
    // 操作：修改分值
    handleCurrentGradeChange(e, record) {
      for (let i = 0; i < this.current_tableData.length; i++) {
        if (this.current_tableData[i].id === record.id) {
          this.$set(this.current_tableData[i], 'grade', Number(e.target.value));
          break;
        }
      }
    },
    // 操作：删除
    deleteCurrentTableQuestionFun(record) {
      let that = this;
      this.$confirm({
        title: '删除',
        content: `确认删除编号为 ${record.questionCode} 的试题吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk() {
          that.loading = true;
          that.removeDataFromCurrentTable([record.id], that);
          that.current_selectedRowKeys = that.current_selectedRowKeys.filter(
            (id) => {
              if (id !== record.id) {
                return id;
              }
            }
          );
          that.loading = false;
        },
        onCancel() {},
      });
    },
    // 操作：清空选择
    clearCurrentTableSelectDataFun() {
      this.current_selectedRowKeys = [];
    },
    // 操作：多选变化时
    onCurrentTableSelectChange(selectedRowKeys) {
      this.current_selectedRowKeys = selectedRowKeys;
    },
    // 操作：批量删除
    deleteCurrentTableSelectDataFun() {
      let that = this;
      this.$confirm({
        title: '批量删除',
        content: `确认批量删除吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk() {
          that.loading = true;
          that.removeDataFromCurrentTable(that.current_selectedRowKeys, that);
          // 置空选择结果
          that.current_selectedRowKeys = [];
          that.loading = false;
        },
        onCancel() {},
      });
    },
    // 移除当前试题列表中要删除的数据
    removeDataFromCurrentTable(ids = [], that) {
      // 移出当前试题
      that.current_tableData = that.current_tableData.filter((currentItem) => {
        if (!ids.includes(currentItem.id)) {
          return currentItem;
        }
      });
      // 禁用状态去除
      that.bank_tableData.forEach((banItem) => {
        if (ids.includes(banItem.id)) {
          banItem.disabled = false;
        }
      });
      that.bank_tableData = [...that.bank_tableData];
    },
    // #endregion

    //#region 题库试题列表
    initBankTableFun() {
      // 试题类别
      this.bank_questionType = [
        { name: '全部', code: '' },
        ...EXAM_QUESTION_TYPE,
      ];
      // 试题类型
      this.bank_questionTypeConditionParent = [
        { name: '全部', id: '' },
        ...this.GET_EXAM_QUESTION_TYPE_CONDITION_PARENT,
      ];
      // 工种类别
      this.bank_engineeringWorkList = [
        { name: '全部', id: '' },
        ...this.GET_ENGINEERING_WORK_LIST,
      ];
      // 表单的列的配置参数
      this.bank_columns = [
        {
          title: '试题编号',
          dataIndex: 'id',
          key: 'id',
          width: 240,
        },
        {
          title: '试题',
          dataIndex: 'content',
          key: 'content',
        },
        {
          title: '试题类别',
          dataIndex: 'typeTxt',
          key: 'typeTxt',
          scopedSlots: { customRender: 'typeTxt' },
          width: 100,
        },
        {
          title: '试题父类',
          dataIndex: 'parentId',
          key: 'parentId',
          scopedSlots: { customRender: 'parentId' },
          width: 150,
        },
        {
          title: '试题子类',
          dataIndex: 'categoryid',
          key: 'categoryid',
          scopedSlots: { customRender: 'categoryid' },
          width: 150,
        },
        {
          title: '工种',
          dataIndex: 'engineerTypeTxt',
          key: 'engineerTypeTxt',
          scopedSlots: { customRender: 'engineerTypeTxt' },
          width: 100,
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          width: 150,
        },
      ];
      this.getBankQusetionsListFun(); // 查询：试题列表数据
    },
    // 查询：试题列表数据
    getBankQusetionsListFun() {
      this.loading = true;
      let params = {
        page: this.bank_pagination.current - 1,
        size: this.bank_pagination.pageSize,
        type: this.bank_checkedQuestionType,
        categoryid: this.bank_checkedQuestionTypeConditionChildren,
        engineertypeid: this.bank_engineeringWorkChooseValue,
      };
      this.$_http
        .get(this.$_API.INTERFACE_GET_EXAMS_QUESTION_LIST, { params })
        .then((res) => {
          let resData = res.data.content;
          resData.forEach((item) => {
            // 试题类别---注意之后从engineertypes中拿
            this.bank_questionType.forEach((it) => {
              if (item.type === it.code) {
                item.typeTxt = it.name;
              }
            });
            // 工种---注意之后从engineertypes中拿
            // this.bank_engineeringWorkList.forEach((it) => {
            //   if (item.engineerTypes === it.id) {
            //     item.engineerTypeTxt = it.name;
            //   }
            // });
            if (
              item.engineerTypes &&
              item.engineerTypes[0] &&
              item.engineerTypes[0].id
            ) {
              item.engineerTypeTxt = item.engineerTypes[0].name;
            } else {
              item.engineerTypeTxt = '不限';
            }
          });
          this.bank_pagination.total = res.data.totalElements; // 总条数
          this.bank_tableData = [...resData];
          if (this.current_tableData.length > 0) {
            this.formateBankTableDisabledRowFun(); // 禁用
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 初始化分页参数
    initPagination() {
      this.bank_pagination.current = 1;
      this.bank_pagination.pageSize = 7;
      this.bank_pagination.total = 0;
    },
    // 操作：选择某个试题类型
    handleExamQuestionTypeFun(item) {
      if (this.bank_checkedQuestionType === item.code) {
        return;
      }
      this.bank_checkedQuestionType = item.code;
      this.initPagination(); // 初始化分页参数
      this.getBankQusetionsListFun(); // 查询：试题列表数据
    },
    // 操作：选择了某个工种
    handleChangeEngineeringWorkValue() {
      this.initPagination(); // 初始化分页参数
      this.getBankQusetionsListFun(); // 查询：试题列表数据
    },
    // 操作：选择了父类
    selectTypeConditionParent() {
      this.getTableChildrenListFun(); // 查询：试题类型列表-子类
    },
    // 操作：选择了子类
    selectTypeConditionChildren() {
      this.initPagination(); // 初始化分页参数
      this.getBankQusetionsListFun(); // 查询：试题列表数据
    },
    // 查询：试题类型列表-子类
    getTableChildrenListFun() {
      if (!this.bank_checkedQuestionTypeConditionParent) {
        this.bank_checkedQuestionTypeConditionChildren = '';
        this.bank_questionTypeConditionChildren = [];
        this.initPagination(); // 初始化分页参数
        this.getBankQusetionsListFun(); // 查询：试题列表数据
        return;
      }
      this.loading = true;
      let params = {
        categoryId: this.bank_checkedQuestionTypeConditionParent,
      };
      this.$_http
        .get(
          formatePathParams(
            this.$_API.INTERFACE_GET_EXAMS_QUESTION_TYPE_CONDITION_CHILDRENS,
            params
          )
        )
        .then((res) => {
          this.bank_questionTypeConditionChildren = res.data;
          this.bank_checkedQuestionTypeConditionChildren = this.bank_questionTypeConditionChildren[0].id;
          this.loading = false;
          this.initPagination(); // 初始化分页参数
          this.getBankQusetionsListFun(); // 查询：试题列表数据
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 操作：添加
    bankTableAddQuestion(record) {
      // 加入当前试题列表
      for (let i = 0; i < this.bank_tableData.length; i++) {
        let bankItem = this.bank_tableData[i];
        if (bankItem.id === record.id) {
          this.current_tableData.push({ ...bankItem });
          break;
        }
      }
      this.current_pagination.total = this.current_tableData.length;
      this.current_pagination.current = 1;
      this.formateBankTableDisabledRowFun(); // 禁用
      this.bank_selectedRowKeys = this.bank_selectedRowKeys.filter((id) => {
        if (id !== record.id) {
          return id;
        }
      });
    },
    // 操作：批量添加
    bankTableAddSelectData() {
      let that = this;
      this.$confirm({
        title: '批量添加',
        content: `确认批量添加吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk() {
          // 加入当前试题列表
          let arr = [];
          that.bank_tableData.forEach((bankItem) => {
            that.bank_selectedRowKeys.forEach((id) => {
              if (bankItem.id === id) {
                arr.push({ ...bankItem });
              }
            });
          });
          that.current_tableData = [
            ...new Set([...that.current_tableData, ...arr]),
          ];
          that.current_pagination.total = that.current_tableData.length;
          that.current_pagination.current = 1;
          that.formateBankTableDisabledRowFun(); // 禁用
          // 清空选项
          that.bank_selectedRowKeys = [];
        },
        onCancel() {},
      });
    },
    // 操作：多选变化时
    onBankTableSelectChange(selectedRowKeys) {
      this.bank_selectedRowKeys = selectedRowKeys;
    },
    // 操作：清空选择
    clearBankTableSelect() {
      // 清空选项
      this.bank_selectedRowKeys = [];
    },
    // 过滤：是否禁止选择
    formateBankTableDisabledRowFun() {
      this.disabledIdArr = this.current_tableData.map((currentItem) => {
        return currentItem.id;
      });
      this.bank_tableData.forEach((bankItem) => {
        if (this.disabledIdArr.includes(bankItem.id)) {
          bankItem.disabled = true;
        } else {
          bankItem.disabled = false;
        }
        return bankItem;
      });
      this.bank_tableData = [...this.bank_tableData];
    },
    // #endregion
    // 操作：详情
    toQuestionDetailFun(record) {
      if (!record || !record.id) {
        this.$message.error('数据异常，请重新进入当前页面');
        return;
      }
      switch (record.type) {
        case EXAM_QUESTION_TYPE[0].code:
          this.$router.push({
            path: '/examQuestionManagement/create/singleChoice',
            query: { id: record.id },
          });
          break;
        case EXAM_QUESTION_TYPE[1].code:
          this.$router.push({
            path: '/examQuestionManagement/create/multipleChoice',
            query: { id: record.id },
          });
          break;
        case EXAM_QUESTION_TYPE[2].code:
          this.$router.push({
            path: '/examQuestionManagement/create/trueOrFalse',
            query: { id: record.id },
          });
          break;
        case EXAM_QUESTION_TYPE[3].code:
          this.$router.push({
            path: '/examQuestionManagement/create/gapFilling',
            query: { id: record.id },
          });
          break;
        default:
          this.$message.error('试题类别异常，无法查看详情');
          break;
      }
    },

    // #region 基础信息变更
    // 操作：选择日期、时间
    onDateChange(date, dateString) {
      if (date) {
        this.examDateTime = dateString;
      } else {
        this.examDateTime = '';
      }
    },
    // // 校验：考试时间
    // checkExamDateTime(rule, value, callback) {
    //   if (value.dateTime) {
    //     callback();
    //     return;
    //   }
    //   callback('Please select datetime!');
    // },
    // 校验：考试时长
    checkExamTimeLong(rule, value, callback) {
      if (
        value.hours !== '' &&
        value.hours >= 0 &&
        value.minutes !== '' &&
        value.minutes >= 0
      ) {
        callback();
        return;
      }
      callback('请输入时间，至少有一个大于0！');
    },
    // #endregion

    // 操作：点击提交按钮
    handleSubmitBtnFun() {
      document.getElementById('examManualVolumeFormationSubmit').click();
    },
    // 操作：表单提交
    handleSubmitFun(e) {
      e.preventDefault();
      this.loginForm.validateFields((err, values) => {
        if (!err) {
          let engineerTypeInfo = this.formatEngineeringWorkChooseValue(
            values.engineeringWorkChooseValue
          ); // 获取工种信息 typeConditionParentValue
          let urlParams = {
            engineertypeid: values.engineeringWorkChooseValue, // 工种
          };
          let params = {
            name: values.name, // 考试名称
            description: values.content, // 内容
            duration: formateSeconds(
              values.examTimeLong.hours,
              values.examTimeLong.minutes
            ), // 考试持续时间
            startTime: this.examDateTime.replace(' ', 'T'), // 开始日期
            deadline: formateDateTimeToAfter(
              this.examDateTime,
              values.examTimeLong.hours,
              values.examTimeLong.minutes
            ).replace(' ', 'T'), // 结束日期
            tages: [],
            engineerTypes: [engineerTypeInfo], // 信息集合：工种
            examCategory: values.examTypeChooseValue, // 考试类别
            totalPoints: this.current_tableGradesCount, // 总分
          };
          if (this.examDetailData.id) {
            params.id = this.examDetailData.id;
          }
          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;
    },
    // 表单提交请求：基础信息
    httpQuestFun(urlParams, params) {
      this.loading = true;
      this.$_http
        .post(
          formateUrlParams(this.$_API.INTERFACE_POST_EXAM_ADD_INFO, urlParams),
          params
        )
        .then((res) => {
          this.loading = false;
          if (res.data.id) {
            this.httpQuestAddQuestionsFun(res.data.id); // 表单提交请求：题目
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 表单提交请求：题目
    httpQuestAddQuestionsFun(examId) {
      if (!examId) {
        return;
      }
      this.loading = true;
      let dataArr = [];
      this.current_tableData.forEach((item) => {
        let obj = {
          examId: examId,
          questionId: item.id,
          grade: item.grade,
        };
        dataArr.push(obj);
      });
      this.$_http
        .post(
          formatePathParams(this.$_API.INTERFACE_POST_EXAM_ADD_QUESTIONS, {
            examId,
          }),
          dataArr
        )
        .then(() => {
          this.$message.success('添加考试成功');
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

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

<style lang="less" scoped>
@import '~@/styles/common/variable.less';
.app-container {
  overflow-y: auto;
  .basic-information-box {
    display: flex;
    justify-content: space-between;
    .basic-information-title {
      font-size: 18px;
      font-weight: bold;
      color: @mainColorBlack65;
    }
  }
  .current-table-title {
    font-size: 18px;
    color: @mainColorBlack65;
  }
  .disabledBtn {
    color: #a6a6a6;
    cursor: no-drop !important;
  }
  .submit-row {
    width: 100%;
    padding: @paddingMarginVal 0 @navTopHight;
    display: flex;
    justify-content: center;
  }
}
</style>