teachcloud-print-web/src/modules/target/components/course-outline/AuditCourseOutlineDialog.vue

<template>
  <el-dialog
    class="page-dialog audit-course-outline-dialog"
    :visible.sync="modalIsShow"
    :title="title"
    fullscreen
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @open="visibleChange"
    @close="dialogClose"
  >
    <div class="report-page">
      <h1>{{ reportTitle }}</h1>
      <!-- 课程基本信息 -->
      <div v-if="courseBasicInfo" class="page-part">
        <h3>课程基本信息</h3>
        <el-form label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item prop="courseCode" label="课程编码：">
                <el-input
                  v-model.trim="courseBasicInfo.courseCode"
                  placeholder="请输入课程编码"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="courseName" label="课程名称：">
                <el-input
                  v-model.trim="courseBasicInfo.courseName"
                  placeholder="请输入课程名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="semester" label="授课学期：">
                <el-input
                  v-model.trim="courseBasicInfo.semester"
                  placeholder="请输入授课学期"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="professional" label="适用专业：">
                <el-input
                  v-model.trim="courseBasicInfo.professional"
                  placeholder="请输入适用专业"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="period" label="学时：">
                <el-input-number
                  v-model="courseBasicInfo.period"
                  placeholder="请输入学时"
                  :min="0"
                  :max="999"
                  :controls="false"
                  class="width-full"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="credit" label="学分：">
                <el-input-number
                  v-model="courseBasicInfo.credit"
                  placeholder="请录入学分"
                  size="small"
                  :min="0"
                  :max="999"
                  :controls="false"
                  class="width-full"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="clazz" label="授课班级：">
                <el-input
                  v-model.trim="courseBasicInfo.clazz"
                  placeholder="请输入授课班级"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="teacher" label="授课教师：">
                <el-input
                  v-model.trim="courseBasicInfo.teacher"
                  placeholder="请输入授课教师"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 课程目标情况 -->
      <div
        v-if="courseTargetInfo && courseTargetInfo.courseEvaluateList"
        class="page-part"
      >
        <h3>课程目标情况</h3>
        <table class="table">
          <tr>
            <th rowspan="2"></th>
            <th colspan="3">过程性评价</th>
            <th colspan="3">终结性评价</th>
          </tr>
          <tr>
            <th>形式与内容</th>
            <th>观测点</th>
            <th>分值</th>
            <th>形式与内容</th>
            <th>观测点</th>
            <th>分值</th>
          </tr>
          <template
            v-for="(item, index) in courseTargetInfo.courseEvaluateList"
          >
            <tr
              v-for="(evaluate, eindex) in item.procedureEvaluateList"
              :key="`${index}-${eindex}`"
            >
              <td v-if="eindex === 0" :rowspan="item.colspan">
                {{ item.name }}
              </td>
              <td>{{ evaluate.content }}</td>
              <td>{{ evaluate.point }}</td>
              <td>{{ evaluate.score }}</td>
              <template v-if="eindex === 0">
                <td :rowspan="item.colspan">
                  {{ item.finalityEvaluateList[0]?.content }}
                </td>
                <td :rowspan="item.colspan">
                  {{ item.finalityEvaluateList[0]?.point }}
                </td>
                <td :rowspan="item.colspan">
                  {{ item.finalityEvaluateList[0]?.score }}
                </td>
              </template>
            </tr>
          </template>
          <tr>
            <td>总目标分值</td>
            <td colspan="3">{{ courseTargetInfo.proceduralTotalScore }}</td>
            <td colspan="3">{{ courseTargetInfo.finalityTotalScore }}</td>
          </tr>
          <tr>
            <td colspan="7">
              <el-row>
                <el-col :span="12">
                  <span class="info-label">课程负责人：</span>
                  <el-input
                    v-model="courseTargetInfo.courseManager"
                    placeholder="请输入"
                    clearable
                    style="width: 200px"
                  ></el-input>
                </el-col>
                <el-col :span="12">
                  <span class="info-label">填写日期：</span>
                  <el-date-picker
                    v-model="courseTargetInfo.date"
                    type="date"
                    value-format="timestamp"
                    style="width: 200px"
                  >
                  </el-date-picker>
                </el-col>
              </el-row>
            </td>
          </tr>
        </table>
      </div>

      <!-- 合理性评价 -->
      <div v-if="rationalityEvaluation" class="page-part">
        <h3>合理性评价 <span class="tips">（请在对应结论处打√）</span></h3>
        <table class="table">
          <tr>
            <th></th>
            <th>评价内容</th>
            <th>合理</th>
            <th>较合理</th>
            <th>不合理</th>
          </tr>
          <tr
            v-for="(
              item, index
            ) in rationalityEvaluation.rationalityEvaluationDetailList"
            :key="index"
          >
            <td>{{ item.index || "" }}</td>
            <td>{{ item.content }}</td>
            <td style="text-align: center">
              <el-checkbox
                v-model="item.reasonable"
                @change="() => evaluationChange(item, 'reasonable')"
              ></el-checkbox>
            </td>
            <td style="text-align: center">
              <el-checkbox
                v-model="item.middle"
                @change="() => evaluationChange(item, 'middle')"
              ></el-checkbox>
            </td>
            <td style="text-align: center">
              <el-checkbox
                v-model="item.unreasonable"
                @change="() => evaluationChange(item, 'unreasonable')"
              ></el-checkbox>
            </td>
          </tr>
          <tr>
            <td colspan="5">存在的问题及建议：</td>
          </tr>
          <tr>
            <td colspan="5">
              <el-input
                v-model.trim="rationalityEvaluation.questionAndAdvice"
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 5 }"
                placeholder="请输入存在的问题及建议"
                maxlength="999"
                show-word-limit
              ></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="5">
              <el-row>
                <el-col :span="12">
                  <span class="info-label">专业负责人：</span>
                  <el-input
                    v-model="rationalityEvaluation.professionalManager"
                    placeholder="请输入"
                    clearable
                    style="width: 200px"
                  ></el-input>
                </el-col>
                <el-col :span="12">
                  <span class="info-label">评价日期：</span>
                  <el-date-picker
                    v-model="rationalityEvaluation.evaluateDate"
                    type="date"
                    value-format="timestamp"
                    style="width: 200px"
                  >
                  </el-date-picker>
                </el-col>
              </el-row>
            </td>
          </tr>
          <tr>
            <td colspan="5">
              <el-form label-width="100px">
                <el-row>
                  <el-col :span="12">
                    <span class="info-label">审核人：</span>
                    <el-input
                      v-model="rationalityEvaluation.auditor"
                      placeholder="请输入"
                      clearable
                      style="width: 200px"
                    ></el-input>
                  </el-col>
                  <el-col :span="12">
                    <span class="info-label">审核日期：</span>
                    <el-date-picker
                      v-model="rationalityEvaluation.auditDate"
                      type="date"
                      value-format="timestamp"
                      style="width: 200px"
                    >
                    </el-date-picker>
                  </el-col>
                </el-row>
              </el-form>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <div class="report-footer">
      <el-button type="primary" :loading="loading" @click="toSubmit"
        >提交</el-button
      >
    </div>

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

<script>
import {
  courseOutlineAuditReport,
  courseOutlineAuditRationalityReport,
  courseOutlineAuditSave,
} from "../../api";

export default {
  name: "audit-course-outline-dialog",
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      loading: false,
      courseBasicInfo: null,
      courseTargetInfo: null,
      rationalityEvaluation: null,
      evaluationKeys: ["reasonable", "middle", "unreasonable"],
      audit: this.checkPrivilege("link", "audit"),
      auditRationality: this.checkPrivilege("link", "AuditAndRationality"),
    };
  },
  computed: {
    reportTitle() {
      return this.auditRationality
        ? "课程目标达成情况评价依据合理性审核表"
        : "课程目标达成情况评价依据审核表";
    },
    title() {
      return `${this.rowData.outlineName} ${this.reportTitle}`;
    },
  },
  methods: {
    visibleChange() {
      this.initData();
    },
    async initData() {
      const func = this.auditRationality
        ? courseOutlineAuditRationalityReport
        : courseOutlineAuditReport;
      const res = await func(this.rowData.id);

      const { courseBasicInfo, courseTargetInfo, rationalityEvaluation } =
        res || {};

      if (courseBasicInfo) {
        courseBasicInfo.credit = courseBasicInfo.credit || undefined;
        courseBasicInfo.period = courseBasicInfo.period || undefined;
      }

      this.courseBasicInfo = courseBasicInfo;

      this.rationalityEvaluation = rationalityEvaluation;

      if (courseTargetInfo && courseTargetInfo.courseEvaluateList) {
        courseTargetInfo.courseEvaluateList =
          courseTargetInfo.courseEvaluateList.filter(
            (item) =>
              item.procedureEvaluateList.length ||
              item.finalityEvaluateList.length
          );
        courseTargetInfo.courseEvaluateList.forEach((item) => {
          if (item.procedureEvaluateList.length === 0) {
            item.procedureEvaluateList = [
              { content: "", point: null, score: null },
            ];
          }

          item.colspan = Math.max(
            item.procedureEvaluateList.length,
            item.finalityEvaluateList.length
          );
        });
      }
      // console.log(courseTargetInfo);

      this.courseTargetInfo = courseTargetInfo;
    },
    evaluationChange(evaluate, type) {
      if (!evaluate[type]) return;

      this.evaluationKeys
        .filter((k) => k !== type)
        .forEach((k) => {
          evaluate[k] = false;
        });
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    dialogClose() {
      this.courseBasicInfo = null;
      this.courseTargetInfo = null;
      this.rationalityEvaluation = null;
    },
    checkData() {
      let valid = true;
      if (this.courseBasicInfo) {
        valid = Object.keys(this.courseBasicInfo).every(
          (k) => this.courseBasicInfo[k]
        );

        if (!valid) {
          this.$message.error("请完成课程基本信息");
          return valid;
        }
      }

      if (this.courseTargetInfo) {
        valid =
          this.courseTargetInfo.courseManager && this.courseTargetInfo.date;
        if (!valid) {
          this.$message.error("课程目标情况");
          return valid;
        }
      }

      if (this.rationalityEvaluation) {
        valid =
          this.rationalityEvaluation.rationalityEvaluationDetailList.every(
            (item) => {
              return this.evaluationKeys.some((k) => item[k]);
            }
          );

        const keys = [
          "professionalManager",
          "evaluateDate",
          "auditor",
          "auditDate",
        ];
        valid = valid && keys.every((k) => this.rationalityEvaluation[k]);

        if (!valid) {
          this.$message.error("合理性评价");
          return valid;
        }
      }

      return valid;
    },
    async toSubmit() {
      if (!this.checkData()) return;

      if (this.loading) return;
      this.loading = true;

      const res = await courseOutlineAuditSave({
        courseOutlineId: this.rowData.id,
        courseBasicInfo: this.courseBasicInfo,
        courseTargetInfo: this.courseTargetInfo,
        rationalityEvaluation: this.rationalityEvaluation,
      }).catch(() => {});
      this.loading = false;
      if (!res) return;
      this.$message.success("提交成功！");
      this.cancel();
    },
  },
};
</script>