开发场次功能

src/modules/examwork/view/stageSpecialSettings.vue

@@ -9,17 +9,33 @@
       >
         <!-- 表单 -->
         <el-form inline :model="formSearch">
-          <el-form-item label="学生ID">
-            <el-input
-              placeholder="学生ID"
-              v-model="formSearch.studentId"
-            ></el-input>
+          <el-form-item label="时间范围">
+            <el-date-picker
+              class="input"
+              v-model="startExamDatetimeRange2Edit"
+              type="datetimerange"
+              start-placeholder="开始时间"
+              range-separator="至"
+              end-placeholder="结束时间"
+              value-format="yyyy/MM/dd HH:mm:ss"
+              :clearable="false"
+              size="small"
+              @change="changeStartExamDatetimeRange"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item label="场次号">
+            <el-input-number
+              placeholder="场次号"
+              :controls="false"
+              v-model="formSearch.stageOrder"
+            ></el-input-number>
           </el-form-item>
-          <el-form-item label="身份证号">
-            <el-input
-              placeholder="身份证号"
-              v-model="formSearch.identityNumber"
-            ></el-input>
+          <el-form-item label="状态">
+            <el-radio-group v-model="formSearch.enable">
+              <el-radio label>全部</el-radio>
+              <el-radio :label="true">启用</el-radio>
+              <el-radio :label="false">禁用</el-radio>
+            </el-radio-group>
           </el-form-item>
           <el-form-item>
             <el-button
@@ -27,17 +43,15 @@
               type="primary"
               icon="el-icon-search"
               @click="handleSearchBtn"
+              >查询</el-button
             >
-              查询
-            </el-button>
             <el-button
               size="small"
               type="primary"
               icon="el-icon-arrow-left"
               @click="back"
+              >返回</el-button
             >
-              返回
-            </el-button>
           </el-form-item>
         </el-form>
 
@@ -50,20 +64,93 @@
           stripe
           style="width: 100%;"
         >
-          <el-table-column prop="studentId" width="180" label="学生ID">
-          </el-table-column>
-          <el-table-column prop="identityNumber" label="学生身份证">
-          </el-table-column>
-          <el-table-column width="180" prop="beginTime" label="考试开始时间">
+          <el-table-column
+            prop="stageOrder"
+            width="180"
+            label="场次号"
+          ></el-table-column>
+          <el-table-column
+            width="180"
+            prop="startTime"
+            label="开始时间"
+          ></el-table-column>
+          <el-table-column
+            width="180"
+            prop="endTime"
+            label="结束时间"
+          ></el-table-column>
+          <el-table-column
+            width="180"
+            prop="creationTime"
+            label="创建时间"
+          ></el-table-column>
+          <el-table-column
+            width="180"
+            prop="modifyTime"
+            label="修改时间"
+          ></el-table-column>
+          <el-table-column width="50" label="状态">
+            <span slot-scope="scope">
+              <span v-if="scope.row.enable">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="启用"
+                  placement="left"
+                >
+                  <i class="el-icon-success" style="color:green;"></i>
+                </el-tooltip>
+              </span>
+              <span v-else>
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="禁用"
+                  placement="left"
+                >
+                  <i class="el-icon-error" style="color:red;"></i>
+                </el-tooltip>
+              </span>
+            </span>
           </el-table-column>
-          <el-table-column width="180" prop="endTime" label="考试结束时间">
-          </el-table-column>
-          <el-table-column width="120" label="是否禁止考试">
-            <template slot-scope="scope">
-              <div>
-                <span>{{ getYesNo(scope.row.examLimit) }}</span>
-              </div>
-            </template>
+          <el-table-column width="190" label="操作">
+            <div slot-scope="scope">
+              <el-button
+                v-if="!scope.row.enable"
+                size="mini"
+                type="primary"
+                plain
+                @click="modifyStageEnable(scope.row)"
+                icon="el-icon-check"
+                >启用</el-button
+              >
+              <el-button
+                v-if="scope.row.enable"
+                size="mini"
+                type="danger"
+                @click="modifyStageEnable(scope.row)"
+                icon="el-icon-close"
+                >禁用</el-button
+              >&nbsp;
+              <el-dropdown>
+                <el-button type="primary" plain size="mini">
+                  更多
+                  <i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item>
+                    <el-button
+                      size="mini"
+                      type="primary"
+                      plain
+                      @click="editStage(scope.row)"
+                      icon="el-icon-edit"
+                      >编辑</el-button
+                    >
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
           </el-table-column>
         </el-table>
         <div class="page pull-right">
@@ -79,6 +166,246 @@
           />
         </div>
       </div>
+
+      <!-- 添加场次弹出框 -->
+      <el-dialog title="场次新增" width="450px" :visible.sync="addStageVisible">
+        <el-form
+          :inline="true"
+          inline-message
+          :model="addStageForm"
+          ref="addStageForm"
+          label-position="right"
+          label-width="120px"
+        >
+          <el-row>
+            <el-form-item label="创建方式">
+              <el-radio-group
+                class="pull_right_sm"
+                v-model="addStageForm.createType"
+              >
+                <el-radio label="simple">简单创建</el-radio>
+                <el-radio label="loop">循环创建</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-row>
+          <template v-if="addStageForm.createType == 'simple'">
+            <el-row>
+              <el-form-item label="增加数量">
+                <el-input-number
+                  @change="handleDailyNumChange"
+                  v-model="addStageForm.num"
+                  :min="1"
+                  :max="20"
+                  label="描述文字"
+                ></el-input-number>
+              </el-form-item>
+            </el-row>
+
+            <el-row
+              v-for="(item, index) in addStageForm.addTimeRangeArr"
+              :key="'tr' + index"
+            >
+              <el-form-item :label="index + '.'">
+                <el-date-picker
+                  class="input"
+                  v-model="item.timeRange"
+                  type="datetimerange"
+                  start-placeholder="开始时间"
+                  range-separator="至"
+                  end-placeholder="结束时间"
+                  value-format="yyyy/MM/dd HH:mm:ss"
+                  :clearable="false"
+                  size="small"
+                  @change="changeStartExamDatetimeRange2Add"
+                ></el-date-picker>
+              </el-form-item>
+            </el-row>
+          </template>
+          <template v-if="addStageForm.createType != 'simple'">
+            <el-row>
+              <el-form-item label="选择日期范围">
+                <el-date-picker
+                  v-model="addStageForm.timeRange0"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                ></el-date-picker>
+              </el-form-item>
+            </el-row>
+            <el-row>
+              <el-form-item label="每日场次数量">
+                <el-input-number
+                  @change="handleDailyNumChange"
+                  v-model="addStageForm.num"
+                  :min="1"
+                  :max="20"
+                  label="描述文字"
+                ></el-input-number>
+              </el-form-item>
+            </el-row>
+
+            <el-row
+              v-for="(item, index) in addStageForm.addTimeRangeArr"
+              :key="'tr' + index"
+            >
+              <el-form-item :label="index + '.'">
+                <el-time-picker
+                  is-range
+                  v-model="item.timeRange"
+                  range-separator="至"
+                  start-placeholder="开始时间"
+                  end-placeholder="结束时间"
+                  placeholder="选择时间范围"
+                ></el-time-picker>
+              </el-form-item>
+            </el-row>
+          </template>
+          <el-row class="d-flex justify-content-center">
+            <el-button type="primary" @click="saveAddStage">保 存</el-button>
+            <el-button @click="addStageVisible = false">取 消</el-button>
+          </el-row>
+        </el-form>
+      </el-dialog>
+
+      <!-- 修改场次弹出框 -->
+      <el-dialog
+        title="编辑场次"
+        width="450px"
+        :visible.sync="editStageVisible"
+      >
+        <el-form
+          :inline="true"
+          inline-message
+          :model="editStageForm"
+          ref="editStageForm"
+          :rules="editStageRules"
+          label-position="right"
+          label-width="120px"
+        >
+          <el-row>
+            <el-form-item label="ID">
+              <el-input
+                class="input_width_lg"
+                v-model="editStageForm.id"
+                :disabled="true"
+              />
+            </el-form-item>
+          </el-row>
+          <el-row>
+            <el-form-item label="场次号">
+              <el-input
+                class="input_width_lg"
+                v-model="editStageForm.stageOrder"
+                :disabled="true"
+              />
+            </el-form-item>
+          </el-row>
+          <el-row>
+            <el-form-item label="开考时间" prop="startExamDatetimeRange2Edit">
+              <el-date-picker
+                class="input"
+                v-model="startExamDatetimeRange2Edit"
+                type="datetimerange"
+                start-placeholder="开始时间"
+                range-separator="至"
+                end-placeholder="结束时间"
+                value-format="yyyy/MM/dd HH:mm:ss"
+                :clearable="false"
+                size="small"
+                @change="changeStartExamDatetimeRange2Edit"
+              ></el-date-picker>
+            </el-form-item>
+          </el-row>
+          <el-row>
+            <el-form-item label="特殊设置">
+              <el-radio-group
+                class="pull_right_sm"
+                v-model="editStageForm.specialSetting"
+              >
+                <el-radio label="false">通用设置</el-radio>
+                <el-radio label="true">特殊设置</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-row>
+          <el-row v-if="editStageForm.specialSetting">
+            <el-form-item label="收卷设置">
+              <el-radio-group
+                class="pull_right_sm"
+                v-model="editStageForm.submitType"
+              >
+                <el-radio label="NORMAL">正常交卷</el-radio>
+                <el-radio label="TIMING_END">定点交卷</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-row>
+          <el-row v-if="editStageForm.submitType == 'TIMING_END'">
+            <el-form-item label="统一交卷时间">
+              <el-input v-model="editStageForm.submitDuration">
+                <template slot="prepend">开考后</template>
+                <template slot="append">分钟</template>
+              </el-input>
+            </el-form-item>
+          </el-row>
+          <el-row class="d-flex justify-content-center">
+            <el-button type="primary" @click="saveEditStageCommonSetting"
+              >保 存</el-button
+            >
+            <el-button @click="editStageVisible = false">取 消</el-button>
+          </el-row>
+        </el-form>
+      </el-dialog>
+
+      <!-- 通用设置弹出框 -->
+      <el-dialog
+        title="收卷设置"
+        width="450px"
+        :visible.sync="editStageCommonSettingVisible"
+      >
+        <el-form
+          :inline="true"
+          inline-message
+          :model="editStageCommonSettingForm"
+          ref="editStageCommonSettingForm"
+          label-position="right"
+          label-width="120px"
+        >
+          <el-row>
+            <el-form-item label="考试ID">
+              <el-input
+                class="input_width_lg"
+                v-model="editStageCommonSettingForm.examId"
+                :disabled="true"
+              />
+            </el-form-item>
+          </el-row>
+          <el-row>
+            <el-form-item label="收卷设置">
+              <el-radio-group
+                class="pull_right_sm"
+                v-model="editStageCommonSettingForm.submitType"
+              >
+                <el-radio label="NORMAL">正常交卷</el-radio>
+                <el-radio label="TIMING_END">定点交卷</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-row>
+          <el-row>
+            <el-form-item label="统一交卷时间">
+              <el-input v-model="editStageCommonSettingForm.submitDuration">
+                <template slot="prepend">开考后</template>
+                <template slot="append">分钟</template>
+              </el-input>
+            </el-form-item>
+          </el-row>
+          <el-row class="d-flex justify-content-center">
+            <el-button type="primary" @click="saveEditStage">保 存</el-button>
+            <el-button @click="editStageCommonSettingVisible = false"
+              >取 消</el-button
+            >
+          </el-row>
+        </el-form>
+      </el-dialog>
     </div>
   </section>
 </template>
@@ -86,26 +413,77 @@
 import { EXAM_WORK_API } from "@/constants/constants.js";
 import { mapState } from "vuex";
 
+let _this = null;
 export default {
   name: "StudentSpecialSettings",
   data() {
+    let validateExamDatetimeRange = (rule, value, callback) => {
+      let examDatetimeRange = _this.startExamDatetimeRange2Edit;
+      if (!examDatetimeRange) {
+        callback(new Error("考试时间不允许为空"));
+      } else {
+        callback();
+      }
+    };
     return {
       loading: false,
+      startExamDatetimeRange: [],
+      startExamDatetimeRange2Edit: [],
       paginationShow: false,
-      yesNoList: [
-        {
-          value: true,
-          label: "是"
-        },
-        {
-          value: false,
-          label: "否"
-        }
-      ],
+      addStageVisible: false,
+      editStageVisible: false,
+      editStageCommonSettingVisible: false,
       formSearch: {
         examId: null,
-        studentId: null,
-        identityNumber: null
+        startTime: null,
+        endTime: null,
+        stageOrder: null,
+        enable: true
+      },
+      addStageForm: {
+        timeRange0: [],
+        createType: "simple",
+        num: 1,
+        addTimeRangeArr: [{ timeRange: [] }]
+      },
+      editStageForm: {
+        id: null,
+        stageOrder: null,
+        startTime: null,
+        endTime: null,
+        specialSetting: false,
+        submitType: "NORMAL",
+        submitDuration: null
+      },
+      editStageCommonSettingForm: {
+        examId: null,
+        submitType: "NORMAL",
+        submitDuration: null
+      },
+      addStageRules: {
+        startTime: [
+          {
+            required: true,
+            message: "开始时间不允许为空",
+            trigger: "blur"
+          }
+        ],
+        endTime: [
+          {
+            required: true,
+            message: "结束时间不允许为空",
+            trigger: "blur"
+          }
+        ]
+      },
+      editStageRules: {
+        startExamDatetimeRange2Edit: [
+          {
+            required: true,
+            validator: validateExamDatetimeRange,
+            trigger: "blur"
+          }
+        ]
       },
       tableData: [],
       currentPage: 1,
@@ -120,13 +498,142 @@ export default {
     }
   },
   methods: {
-    getYesNo(val) {
-      for (let temv of this.yesNoList) {
-        if (temv.value == val) {
-          return temv.label;
+    handleDailyNumChange(value) {
+      if (value) {
+        this.addTimeRangeArr = [];
+        for (let i = 0; i < value; i++) {
+          this.addTimeRangeArr.push({ timeRange: [] });
         }
       }
     },
+    changeStartExamDatetimeRange(e) {
+      if (e && e.length > 0) {
+        this.formSearch.startTime = e[0];
+        this.formSearch.endTime = e[1];
+      } else {
+        this.formSearch.startTime = "";
+        this.formSearch.endTime = "";
+      }
+    },
+    changeStartExamDatetimeRange2Edit(e) {
+      if (e && e.length > 0) {
+        this.editStageForm.startTime = e[0];
+        this.editStageForm.endTime = e[1];
+      } else {
+        this.editStageForm.startTime = "";
+        this.editStageForm.endTime = "";
+      }
+    },
+    changeStartExamDatetimeRange2Add(e) {
+      console.log(e);
+      debugger;
+    },
+    modifyStageEnable(row) {
+      let confirmMsg;
+      let enable;
+      if (row.enable == "true") {
+        confirmMsg = "是否禁用该场次？";
+        enable = false;
+      } else {
+        confirmMsg = "是否启用该场次？";
+        enable = true;
+      }
+      this.$confirm(confirmMsg, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "error"
+      }).then(() => {
+        var url =
+          EXAM_WORK_API +
+          "/examStage/modifyStageEnable?examStageIds=" +
+          row.id +
+          "&enabled=" +
+          enable;
+        this.$httpWithMsg.put(url, {}).then(() => {
+          this.$notify({
+            type: "success",
+            message: "操作成功！"
+          });
+          this.this.searchForm();
+        });
+      });
+    },
+    editStage(row) {
+      this.editStageForm.id = row.id;
+      this.editStageForm.stageOrder = row.stageOrder;
+      this.editStageVisible = true;
+    },
+    saveAddStage() {
+      let examStages = [];
+      if (this.addStageForm.createType == "simple") {
+        //按数量创建
+        for (let i = 0; i < this.addStageForm.addTimeRangeArr.length; i++) {
+          let startTime = this.addStageForm.addTimeRangeArr[i].timeRange[0];
+          let endTime = this.addStageForm.addTimeRangeArr[i].timeRange[1];
+          examStages.push({
+            stageOrder: i + 1,
+            startTime: startTime,
+            endTime: endTime
+          });
+        }
+      } else {
+        //按天创建
+        let st0 = this.addStageForm.timeRange0[0];
+        let et0 = this.addStageForm.timeRange0[1];
+        let days = this.getDays(st0, et0) + 1;
+        let order = 0;
+        for (let i = 0; i < days; i++) {
+          //日期
+          let dt = this.addDays(st0, i);
+          for (let tr of this.addStageForm.addTimeRangeArr) {
+            let st = dt + " " + tr.timeRange[0];
+            let et = dt + " " + tr.timeRange[0];
+            order++;
+            examStages.push({
+              stageOrder: order,
+              startTime: st,
+              endTime: et
+            });
+          }
+        }
+      }
+      let url = EXAM_WORK_API + "/examStage/batchAddStage";
+      this.$httpWithMsg.post(url, examStages).then(() => {
+        this.$notify({
+          type: "success",
+          message: "保存成功"
+        });
+        this.addStageVisible = false;
+      });
+    },
+    saveEditStage() {
+      var url = EXAM_WORK_API + "/examStage/modifyStage";
+      this.$refs.editStageForm.validate(valid => {
+        if (valid) {
+          this.$httpWithMsg.put(url, this.editStageForm).then(() => {
+            this.$notify({
+              type: "success",
+              message: "保存成功"
+            });
+            this.editStageCommonSettingVisible = false;
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    saveEditStageCommonSetting() {
+      var url = EXAM_WORK_API + "/examStage/saveStageSetting";
+      this.$httpWithMsg.put(url, this.editStageCommonSettingForm).then(() => {
+        this.$notify({
+          type: "success",
+          message: "保存成功"
+        });
+        this.handleSearchBtn();
+        this.editStageVisible = false;
+      });
+    },
+
     back() {
       this.$router.push({ path: "/examwork/examInfo" });
     },
@@ -145,23 +652,12 @@ export default {
     },
     //查询
     searchForm() {
-      let regx = /^\d*$/;
-      if (this.formSearch.studentId && !regx.test(this.formSearch.studentId)) {
-        this.$notify({
-          title: "警告",
-          message: "学生ID只能输入数字",
-          type: "warning"
-        });
-        return false;
-      }
       this.loading = true;
       let temParams = Object.assign({}, this.formSearch);
-      if (!temParams.identityNumber) {
-        delete temParams.identityNumber;
-      }
+
       var url =
         EXAM_WORK_API +
-        "/exam/getStudentSpecialSettingsList/" +
+        "/examStage/queryPage/" +
         (this.currentPage - 1) +
         "/" +
         this.pageSize;
@@ -177,12 +673,32 @@ export default {
           });
         })
         .finally(() => (this.loading = false));
+    },
+    //获取两个日期相差天数
+    getDays(strDateStart, strDateEnd) {
+      var strSeparator = "-"; //日期分隔符
+      var oDate1;
+      var oDate2;
+      var iDays;
+      oDate1 = strDateStart.split(strSeparator);
+      oDate2 = strDateEnd.split(strSeparator);
+      var strDateS = new Date(oDate1[0], oDate1[1] - 1, oDate1[2]);
+      var strDateE = new Date(oDate2[0], oDate2[1] - 1, oDate2[2]);
+      iDays = parseInt(Math.abs(strDateS - strDateE) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
+      return iDays;
+    },
+    //日期添加指定天数
+    addDays(date, days) {
+      let dt = new Date(date);
+      dt.setDate(dt.getDate() + days);
+      return dt.getFullYear() + "-" + dt.getMonth() + "-" + dt.getDate();
     }
   },
   //初始化查询
   created() {
     this.formSearch.examId = this.$route.params.id;
     this.searchForm();
+    _this = this;
   }
 };
 </script>