teachcloud-print-web/src/modules/exam/components/ModifyTaskApply.vue

<template>
  <el-dialog
    class="modify-task-apply"
    :visible.sync="modalIsShow"
    :title="title"
    top="10px"
    width="900px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @open="visibleChange"
  >
    <div class="part-box part-box-pad part-box-border">
      <el-form class="form-info" label-width="130px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="课程（代码）：">
              <span
                >{{ modalForm.courseName }}（{{ modalForm.courseCode }}）</span
              >
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="适用专业（方向）：">
              <span>{{ modalForm.specialty | defaultFieldFilter }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="试卷编号：">
              <span>{{ modalForm.paperNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="命题时间：">
              <span>
                {{ modalForm.startTime | timestampFilter }} 至
                {{ modalForm.endTime | timestampFilter }}</span
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="题卡规则：">
              <span>{{ modalForm.cardRuleName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="命题老师：">
              <span>{{ modalForm.userName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="审核状态：">
              <span>{{ modalForm.auditStatus | auditStatusFilter }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="审核结果：">
              <span>{{ modalForm.reviewStatus | reviewStatusFilter }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="mb-4">
      <el-steps align-center>
        <el-step
          v-for="(step, index) in steps"
          :key="index"
          :title="step.title"
          :description="step.desc"
          :status="step.status"
        ></el-step>
      </el-steps>
    </div>

    <div class="mb-2" v-if="needReview">
      <el-button
        v-for="item in menus"
        :key="item.id"
        :type="item.id == curMenu.id ? 'primary' : 'default'"
        @click="selectMenu(item)"
        >{{ item.name }}</el-button
      >
    </div>
    <div class="part-box part-box-pad part-box-border">
      <apply-content
        v-if="modalIsShow"
        v-show="curMenu.id === '1'"
        ref="ApplyContent"
        :exam-task="modalForm"
        :edit-type="editType"
        :exam-rule="examRule"
        @cancel="cancel"
        @modified="modified"
      ></apply-content>
      <apply-audit-history
        v-if="needReview"
        v-show="curMenu.id === '2'"
        ref="ApplyAuditHistory"
        :exam-task-id="modalForm.id"
      ></apply-audit-history>
    </div>

    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import ApplyContent from "./ApplyContent";
import ApplyAuditHistory from "./ApplyAuditHistory";
import { examRuleDetail } from "../../base/api";

const initModalForm = {
  id: null,
  courseCode: "",
  courseName: "",
  specialty: "",
  paperNumber: "",
  startTime: "",
  endTime: "",
  cardRuleId: "",
  cardRuleName: "",
  userId: "",
  userName: "",
  auditStatus: "",
  reviewStatus: ""
};

const STEPS = [
  {
    title: "提交申请",
    status: {
      wait: {
        desc: "待进行",
        range: []
      },
      process: {
        desc: "进行中",
        range: ["NEW", "READY", "STAGE"]
      },
      success: {
        desc: "已完成",
        range: ["SUBMIT", "FINISH"]
      }
    }
  },
  {
    title: "审核",
    status: {
      wait: {
        desc: "待进行",
        range: ["NEW", "READY", "STAGE"]
      },
      process: {
        desc: "进行中",
        range: ["SUBMIT"]
      },
      success: {
        desc: "已完成",
        range: ["FINISH"]
      }
    }
  },
  {
    title: "入库",
    status: {
      wait: {
        desc: "待进行",
        range: ["NEW", "READY", "STAGE", "SUBMIT"]
      },
      process: {
        desc: "进行中",
        range: []
      },
      success: {
        desc: "已完成",
        range: ["FINISH"]
      }
    }
  }
];

export default {
  name: "modify-task-apply",
  components: { ApplyContent, ApplyAuditHistory },
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      }
    },
    editType: {
      type: String,
      default: "APPLY",
      validator: val => ["APPLY", "PREVIEW", "AUDIT"].includes(val)
    }
  },
  computed: {
    title() {
      const names = {
        APPLY: "提交入库申请",
        PREVIEW: "入库申请详情",
        AUDIT: "审核入库申请"
      };
      return names[this.editType];
    }
  },
  data() {
    return {
      modalIsShow: false,
      modalForm: {},
      needReview: false,
      examRule: {},
      steps: [],
      actStep: "",
      menus: [
        { id: "1", name: "命题处理", component: "apply-content" },
        { id: "2", name: "审核意见", component: "apply-audit-history" }
      ],
      curMenu: {}
    };
  },
  created() {
    this.getExamRule();
  },
  methods: {
    async getExamRule() {
      const examRule = await examRuleDetail();
      this.examRule = examRule || {};
      this.needReview = examRule && examRule.review;
    },
    initData(val) {
      this.modalForm = this.$objAssign(initModalForm, val);
      this.modalForm.includePaper = this.examRule.includePaper;
      this.modalForm.review = this.examRule.review;
      this.modalForm.customCard = this.examRule.customCard;
      this.buildSteps();
    },
    buildSteps() {
      const curStatus = this.instance.status;
      // 构建steps
      const stepList = this.needReview ? STEPS : [STEPS[0], STEPS[2]];
      this.steps = stepList.map(step => {
        const validStepStatus = Object.keys(step.status).find(key =>
          step.status[key].range.includes(curStatus)
        );

        return {
          title: step.title,
          status: validStepStatus,
          desc: step.status[validStepStatus].desc
        };
      });
    },
    visibleChange() {
      this.initData(this.instance);
      this.curMenu = this.menus[0];
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    selectMenu(item) {
      this.curMenu = item;
    },
    modified() {
      this.cancel();
      this.$emit("modified");
    }
  }
};
</script>