|
|
@@ -1,25 +1,475 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
- <div class="common-card">
|
|
|
- <div>这里是手动组卷</div>
|
|
|
- </div>
|
|
|
- <div class="common-card a-card-margin-top">
|
|
|
- <div>这里是内容</div>
|
|
|
- </div>
|
|
|
+ <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: 500px;"
|
|
|
+ :loading="loading"
|
|
|
+ >
|
|
|
+ <a-form-item
|
|
|
+ label="考试标题"
|
|
|
+ :label-col="labelCol"
|
|
|
+ :wrapper-col="wrapperCol"
|
|
|
+ >
|
|
|
+ <a-input
|
|
|
+ placeholder="请输入考试标题"
|
|
|
+ :maxLength="100"
|
|
|
+ v-decorator="[
|
|
|
+ 'name',
|
|
|
+ {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: 'Please input exam name!' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </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',
|
|
|
+ {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: 'Please select datetime!' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ style="width:100%;"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="考试时长"
|
|
|
+ :label-col="labelCol"
|
|
|
+ :wrapper-col="wrapperCol"
|
|
|
+ >
|
|
|
+ <ExamTimeLong
|
|
|
+ v-decorator="[
|
|
|
+ 'examTimeLong',
|
|
|
+ {
|
|
|
+ initialValue: {
|
|
|
+ hours: examLongTimeHours,
|
|
|
+ minutes: 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',
|
|
|
+ {
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: 'Please input exam description!',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="考试分类"
|
|
|
+ :label-col="labelCol"
|
|
|
+ :wrapper-col="wrapperCol"
|
|
|
+ >
|
|
|
+ <a-select
|
|
|
+ v-decorator="[
|
|
|
+ 'examTypeChooseValue',
|
|
|
+ {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: 'Please selete exam type!' },
|
|
|
+ ],
|
|
|
+ initialValue: examTypeChooseValue,
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <a-select-option
|
|
|
+ :value="item.code"
|
|
|
+ v-for="(item, index) in examTypeList"
|
|
|
+ :key="index"
|
|
|
+ >{{ item.title }}</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: 'Please selete engineering work!',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ initialValue: engineeringWorkChooseValue,
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <a-select-option
|
|
|
+ :value="item.code"
|
|
|
+ v-for="(item, index) in engineeringWorkList"
|
|
|
+ :key="index"
|
|
|
+ >{{ item.title }}</a-select-option
|
|
|
+ >
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item v-show="false">
|
|
|
+ <a-button
|
|
|
+ id="examManualVolumeFormationSubmit"
|
|
|
+ type="primary"
|
|
|
+ html-type="submit"
|
|
|
+ ref="submitBtn"
|
|
|
+ >提交</a-button
|
|
|
+ >
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ <!-- 当前题目列表 -->
|
|
|
+ <div class="common-card margin-top-all">
|
|
|
+ <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-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,
|
|
|
+ }"
|
|
|
+ :pagination="current_pagination"
|
|
|
+ @change="handleCurrentTableChangePage"
|
|
|
+ >
|
|
|
+ <template slot="questionType" slot-scope="text, record">
|
|
|
+ <span>{{ record.questionTypeTxt }}</span>
|
|
|
+ </template>
|
|
|
+ <template slot="engineeringWork" slot-scope="text, record">
|
|
|
+ <span>{{ record.engineeringWorkTxt }}</span>
|
|
|
+ </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>
|
|
|
+ <!-- 题库题目列表 -->
|
|
|
+ <div class="common-card margin-top-all">
|
|
|
+ <!-- 过滤条件栏目 -->
|
|
|
+ <div>
|
|
|
+ <div class="filter-condition-box">
|
|
|
+ <span>所属类目：</span>
|
|
|
+ <ul>
|
|
|
+ <li
|
|
|
+ :class="{
|
|
|
+ checkedExamQuestionType:
|
|
|
+ bank_checkedExamQuestionType === item.code,
|
|
|
+ }"
|
|
|
+ v-for="(item, index) in bank_examQuestionType"
|
|
|
+ :key="index"
|
|
|
+ @click="handleExamQuestionTypeFun(item)"
|
|
|
+ >
|
|
|
+ {{ item.title }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </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.code"
|
|
|
+ >{{ item.title }}</a-select-option
|
|
|
+ >
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 表单 -->
|
|
|
+ <div class="margin-top-all">
|
|
|
+ <!-- 清空、批量添加 -->
|
|
|
+ <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,
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ }"
|
|
|
+ :pagination="bank_pagination"
|
|
|
+ @change="handleBankTableChangePage"
|
|
|
+ >
|
|
|
+ <template slot="questionType" slot-scope="text, record">
|
|
|
+ <span>{{ record.questionTypeTxt }}</span>
|
|
|
+ </template>
|
|
|
+ <template slot="engineeringWork" slot-scope="text, record">
|
|
|
+ <span>{{ record.engineeringWorkTxt }}</span>
|
|
|
+ </template>
|
|
|
+ <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>
|
|
|
+ <div class="submit-row">
|
|
|
+ <a-button type="primary" @click="handleSubmitBtnFun">组卷</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-spin>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import {
|
|
|
+ ENGINEERING_WORK_LIST,
|
|
|
+ EXAM_TYPE,
|
|
|
+ EXAM_QUESTION_TYPE,
|
|
|
+} from '@/common/Constant';
|
|
|
+import { formateSeconds } from '@/filters';
|
|
|
+import { QUESTIONLISTRES } from '@/common/resData';
|
|
|
+// 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"
|
|
|
+ @change="handleNumberChange"
|
|
|
+ style="width: 35%; margin-right: 2%;"
|
|
|
+ />
|
|
|
+ <span style="margin-right: 2%;">小时</span>
|
|
|
+ <a-input
|
|
|
+ type='number'
|
|
|
+ :value="minutes"
|
|
|
+ @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: {
|
|
|
- // components: (reslove) => {
|
|
|
- // require(['', reslove]);
|
|
|
- // }
|
|
|
+ ExamTimeLong,
|
|
|
+ // ExamDateTime,
|
|
|
},
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ loading: false, // 是否展示加载动画
|
|
|
+ // 基础信息的表单
|
|
|
+ labelCol: { span: 6 }, // 表单行中label的占位
|
|
|
+ wrapperCol: { span: 18 }, // 表单行中内容的占位
|
|
|
+ loginForm: this.$form.createForm(this, {
|
|
|
+ name: 'examManualVolumeFormation',
|
|
|
+ }),
|
|
|
+ engineeringWorkList: [], // 工种数据列表
|
|
|
+ engineeringWorkChooseValue: '', // 所选工种
|
|
|
+ examTypeList: [], // 考试类型列表
|
|
|
+ examTypeChooseValue: '', // 所选考试类型
|
|
|
+ examDateTime: '', // 考试时间
|
|
|
+ examLongTimeHours: '', // 考试时长：小时
|
|
|
+ examLongTimeMinutes: '', // 考试时长：分钟
|
|
|
+ // 当前题目列表
|
|
|
+ current_columns: [], // form表单的列参数
|
|
|
+ current_tableData: [], // 表单数据
|
|
|
+ current_pagination: {
|
|
|
+ pageSize: 7,
|
|
|
+ current: 1,
|
|
|
+ total: 0,
|
|
|
+ }, // 分页参数
|
|
|
+ current_selectedRowKeys: [], // 多选的结果
|
|
|
+ current_tableGradesCount: 0, // 总分
|
|
|
+ // 题库列表
|
|
|
+ bank_examQuestionType: [], // 题目类型列表
|
|
|
+ bank_checkedExamQuestionType: '', // 所选题目类型
|
|
|
+ bank_engineeringWorkList: [], // 工种数据列表
|
|
|
+ bank_engineeringWorkChooseValue: '', // 所选工种
|
|
|
+ bank_columns: [], // form表单的列参数
|
|
|
+ bank_tableData: [], // 表单数据
|
|
|
+ bank_pagination: {
|
|
|
+ pageSize: 7,
|
|
|
+ current: 1,
|
|
|
+ total: 0,
|
|
|
+ }, // 分页参数
|
|
|
+ bank_selectedRowKeys: [], // 多选的结果
|
|
|
+ bank_tableGradesCount: 0, // 总分
|
|
|
+ disabledIdArr: [], // 不可选取的行数据Id
|
|
|
+ };
|
|
|
},
|
|
|
created() {
|
|
|
this.initDataFun(); //初始化数据
|
|
|
@@ -27,14 +477,488 @@ export default {
|
|
|
mounted() {},
|
|
|
beforeDestroy() {},
|
|
|
watch: {},
|
|
|
- computed: {},
|
|
|
+ computed: {
|
|
|
+ // 判断 当前题目 列表中是否有行被选择
|
|
|
+ currentHasSelected() {
|
|
|
+ return this.current_selectedRowKeys.length > 0;
|
|
|
+ },
|
|
|
+ // 判断 题库题目 列表中是否有行被选择
|
|
|
+ bankHasSelected() {
|
|
|
+ return this.bank_selectedRowKeys.length > 0;
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
//初始化数据
|
|
|
- initDataFun() {},
|
|
|
+ initDataFun() {
|
|
|
+ this.loading = true;
|
|
|
+ // 工种类别
|
|
|
+ this.engineeringWorkList = [...ENGINEERING_WORK_LIST];
|
|
|
+ this.engineeringWorkChooseValue = this.engineeringWorkList[0].code;
|
|
|
+ // 考试类型
|
|
|
+ this.examTypeList = [...EXAM_TYPE];
|
|
|
+ this.examTypeChooseValue = this.examTypeList[0].code;
|
|
|
+ this.initCurrentTableFun(); // 初始化当前题目列表相关数据
|
|
|
+ this.initBankTableFun(); // 初始化题库题目列表相关数据
|
|
|
+ },
|
|
|
+ // #region 当前题目列表
|
|
|
+ // 初始化当前题目列表
|
|
|
+ initCurrentTableFun() {
|
|
|
+ // 表单的列的配置参数
|
|
|
+ this.current_columns = [
|
|
|
+ {
|
|
|
+ title: '题目编号',
|
|
|
+ dataIndex: 'questionCode',
|
|
|
+ key: 'questionCode',
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '题目',
|
|
|
+ dataIndex: 'questionDescription',
|
|
|
+ key: 'questionDescription',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '题目类别',
|
|
|
+ dataIndex: 'questionType',
|
|
|
+ key: 'questionType',
|
|
|
+ scopedSlots: { customRender: 'questionType' },
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '工种',
|
|
|
+ dataIndex: 'engineeringWork',
|
|
|
+ key: 'engineeringWork',
|
|
|
+ scopedSlots: { customRender: 'engineeringWork' },
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '分值',
|
|
|
+ dataIndex: 'grade',
|
|
|
+ key: 'grade',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ key: 'action',
|
|
|
+ scopedSlots: { customRender: 'action' },
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.getCurrentQusetionsListFun(); // 查询：当前题目列表数据
|
|
|
+ },
|
|
|
+ // 查询：题目列表数据
|
|
|
+ getCurrentQusetionsListFun() {
|
|
|
+ // 列表数据
|
|
|
+ const resData = [];
|
|
|
+ setTimeout(() => {
|
|
|
+ resData.forEach((item) => {
|
|
|
+ EXAM_QUESTION_TYPE.forEach((it) => {
|
|
|
+ if (item.questionType === it.code) {
|
|
|
+ item.questionTypeTxt = it.title;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ ENGINEERING_WORK_LIST.forEach((it) => {
|
|
|
+ if (item.engineeringWork === it.code) {
|
|
|
+ item.engineeringWorkTxt = it.title;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.current_pagination.total = resData.length;
|
|
|
+ this.current_tableData = [...resData];
|
|
|
+ this.loading = false;
|
|
|
+ }, 1500);
|
|
|
+ },
|
|
|
+ // 查询：表格某页的数据
|
|
|
+ handleCurrentTableChangePage(pagination) {
|
|
|
+ const pager = { ...this.current_pagination };
|
|
|
+ pager.current = pagination.current;
|
|
|
+ this.current_pagination = pager;
|
|
|
+ // let params = {
|
|
|
+ // pagination: current_pagination,
|
|
|
+ // questionType: this.checkedExamQuestionType,
|
|
|
+ // engineeringWork: this.engineeringWorkChooseValue
|
|
|
+ // };
|
|
|
+ // this.$_http
|
|
|
+ // .get(this.$_API.INTERFACE_GET_USER_ADMIN_USERS, { params })
|
|
|
+ // .then((res) => {
|
|
|
+ // console.log(res);
|
|
|
+ // this.current_tableData = res.data;
|
|
|
+ // this.current_pagination.total = res.pagination.total;
|
|
|
+ // })
|
|
|
+ // .catch((err) => {
|
|
|
+ // console.log(err);
|
|
|
+ // })
|
|
|
+ // .finally(() => {
|
|
|
+ // this.loading = false;
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ // 操作：删除
|
|
|
+ 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_examQuestionType = [
|
|
|
+ { title: '全部', code: '' },
|
|
|
+ ...EXAM_QUESTION_TYPE,
|
|
|
+ ];
|
|
|
+ this.bank_checkedExamQuestionType = this.bank_examQuestionType[0].code;
|
|
|
+ // 工种类别
|
|
|
+ this.bank_engineeringWorkList = [
|
|
|
+ { title: '全部', code: '' },
|
|
|
+ ...ENGINEERING_WORK_LIST,
|
|
|
+ ];
|
|
|
+ this.bank_engineeringWorkChooseValue = this.bank_engineeringWorkList[0].code;
|
|
|
+ // 表单的列的配置参数
|
|
|
+ this.bank_columns = [
|
|
|
+ {
|
|
|
+ title: '题目编号',
|
|
|
+ dataIndex: 'questionCode',
|
|
|
+ key: 'questionCode',
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '题目',
|
|
|
+ dataIndex: 'questionDescription',
|
|
|
+ key: 'questionDescription',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '题目类别',
|
|
|
+ dataIndex: 'questionType',
|
|
|
+ key: 'questionType',
|
|
|
+ scopedSlots: { customRender: 'questionType' },
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '工种',
|
|
|
+ dataIndex: 'engineeringWork',
|
|
|
+ key: 'engineeringWork',
|
|
|
+ scopedSlots: { customRender: 'engineeringWork' },
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ key: 'action',
|
|
|
+ scopedSlots: { customRender: 'action' },
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.getBankQusetionsListFun(); // 查询：题目列表数据
|
|
|
+ },
|
|
|
+ // 查询：题目列表数据
|
|
|
+ getBankQusetionsListFun() {
|
|
|
+ // 列表数据
|
|
|
+ const resData = QUESTIONLISTRES.data;
|
|
|
+ setTimeout(() => {
|
|
|
+ resData.forEach((item) => {
|
|
|
+ item.disabled = false;
|
|
|
+ EXAM_QUESTION_TYPE.forEach((it) => {
|
|
|
+ if (item.questionType === it.code) {
|
|
|
+ item.questionTypeTxt = it.title;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ ENGINEERING_WORK_LIST.forEach((it) => {
|
|
|
+ if (item.engineeringWork === it.code) {
|
|
|
+ item.engineeringWorkTxt = it.title;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.bank_pagination.total = resData.length;
|
|
|
+ this.bank_tableData = [...resData];
|
|
|
+ this.loading = false;
|
|
|
+ }, 1500);
|
|
|
+ },
|
|
|
+ // 操作：选择某个题目类型
|
|
|
+ handleExamQuestionTypeFun(item) {
|
|
|
+ console.log('选择某个题目类型', item);
|
|
|
+ if (this.bank_checkedExamQuestionType === item.code) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.bank_checkedExamQuestionType = item.code;
|
|
|
+ },
|
|
|
+ // 操作：选择了某个工种
|
|
|
+ handleChangeEngineeringWorkValue() {
|
|
|
+ console.log('选择了某个工种', this.bank_engineeringWorkChooseValue);
|
|
|
+ },
|
|
|
+ // 查询：表格某页的数据
|
|
|
+ handleBankTableChangePage(pagination) {
|
|
|
+ this.loading = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ const pager = { ...this.bank_pagination };
|
|
|
+ pager.current = pagination.current;
|
|
|
+ this.bank_pagination = pager;
|
|
|
+ this.loading = false;
|
|
|
+ }, 1500);
|
|
|
+ // let params = {
|
|
|
+ // pagination: bank_pagination,
|
|
|
+ // questionType: this.checkedExamQuestionType,
|
|
|
+ // engineeringWork: this.engineeringWorkChooseValue
|
|
|
+ // };
|
|
|
+ // this.$_http
|
|
|
+ // .get(this.$_API.INTERFACE_GET_USER_ADMIN_USERS, { params })
|
|
|
+ // .then((res) => {
|
|
|
+ // console.log(res);
|
|
|
+ // this.bank_pagination = res.data;
|
|
|
+ // this.bank_pagination.total = res.pagination.total;
|
|
|
+ // })
|
|
|
+ // .catch((err) => {
|
|
|
+ // console.log(err);
|
|
|
+ // })
|
|
|
+ // .finally(() => {
|
|
|
+ // 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) {
|
|
|
+ console.log('查看某个试题的详情', record);
|
|
|
+ },
|
|
|
+ // #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('Please input hours and minutes & one than zero!');
|
|
|
+ },
|
|
|
+ // #endregion
|
|
|
+
|
|
|
+ // 操作：点击提交按钮
|
|
|
+ handleSubmitBtnFun() {
|
|
|
+ document.getElementById('examManualVolumeFormationSubmit').click();
|
|
|
+ },
|
|
|
+ // 操作：表单提交
|
|
|
+ handleSubmitFun(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ this.loginForm.validateFields((err, values) => {
|
|
|
+ if (!err) {
|
|
|
+ let params = {
|
|
|
+ name: values.name,
|
|
|
+ type: this.examTypeChooseValue,
|
|
|
+ content: values.content,
|
|
|
+ engineeringWorkChooseValue: values.engineeringWorkChooseValue,
|
|
|
+ // startTime: values.examDateTime.dateTime,
|
|
|
+ startTime: this.examDateTime,
|
|
|
+ duration: formateSeconds(
|
|
|
+ values.examTimeLong.hours,
|
|
|
+ values.examTimeLong.minutes
|
|
|
+ ),
|
|
|
+ };
|
|
|
+ this.httpQuestFun(params);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 表单提交请求
|
|
|
+ httpQuestFun(params) {
|
|
|
+ this.loading = true;
|
|
|
+ console.log(params);
|
|
|
+ setTimeout(() => {
|
|
|
+ this.loading = false;
|
|
|
+ }, 2000);
|
|
|
+ // this.$_http
|
|
|
+ // .post(this.$_API.INTERFACE_POST_EXAM_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></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>
|
yellowtaotao