|
@@ -0,0 +1,126 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ class="bar-code-check"
|
|
|
+ title="考场条码校验"
|
|
|
+ :visible.sync="modalIsShow"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ top="10vh"
|
|
|
+ width="500px"
|
|
|
+ append-to-body
|
|
|
+ @open="initData"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="modalFormComp"
|
|
|
+ :model="modalForm"
|
|
|
+ :rules="rules"
|
|
|
+ :key="modalForm.id"
|
|
|
+ label-width="120px"
|
|
|
+ >
|
|
|
+ <el-form-item label="考场起始条码:" prop="startCode">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="modalForm.startCode"
|
|
|
+ placeholder="请扫描考场起始条码"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="考场结束条码:" prop="endCode">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="modalForm.endCode"
|
|
|
+ placeholder="请扫描考场结束条码"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="tips-info">
|
|
|
+ <p>
|
|
|
+ 注:考场条码在条码枪扫描后会自动校验,校验通过后会自动清空输入框内容。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 继续扫下一袋条码进行校验,如果校验失败则需要手动删除输入框内容后再扫码。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button type="primary" :disabled="isSubmit" @click="submit"
|
|
|
+ >确认</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="cancel">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { updateBarCodeCheck } from "../api";
|
|
|
+
|
|
|
+const initModalForm = {
|
|
|
+ id: null,
|
|
|
+ semesterId: null,
|
|
|
+ examId: null,
|
|
|
+ startCode: "",
|
|
|
+ endCode: "",
|
|
|
+};
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "BarCodeCheck",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ modalIsShow: false,
|
|
|
+ isSubmit: false,
|
|
|
+ modalForm: { ...initModalForm },
|
|
|
+ rules: {
|
|
|
+ startCode: [
|
|
|
+ { required: true, message: "请扫描考场起始条码", trigger: "change" },
|
|
|
+ ],
|
|
|
+ endCode: [
|
|
|
+ { required: true, message: "请扫描考场结束条码", trigger: "change" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initData() {
|
|
|
+ this.modalForm = { ...initModalForm };
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.modalFormComp.clearValidate();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ open() {
|
|
|
+ this.modalIsShow = true;
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.modalIsShow = false;
|
|
|
+ this.$refs.modalFormComp.resetFields();
|
|
|
+ },
|
|
|
+ async submit() {
|
|
|
+ const valid = await this.$refs.modalFormComp.validate().catch(() => {});
|
|
|
+ if (!valid) return;
|
|
|
+
|
|
|
+ if (this.isSubmit) return;
|
|
|
+ this.isSubmit = true;
|
|
|
+ const res = await updateBarCodeCheck(this.modalForm).catch(() => {});
|
|
|
+ this.isSubmit = false;
|
|
|
+ if (!res) return;
|
|
|
+
|
|
|
+ this.$message.success("保存成功!");
|
|
|
+ this.cancel();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bar-code-check {
|
|
|
+ .bar-code-tips {
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ border-radius: 4px;
|
|
|
+ p {
|
|
|
+ margin: 5px 0;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|