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

<template>
  <el-dialog
    class="page-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="part-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"
                ></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"
                ></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" 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 courseEvaluateList">
            <tr
              v-for="(evaluate, eindex) in item.procedureEvaluateList"
              :key="`${index}-${eindex}`"
            >
              <td
                v-if="eindex === 0"
                :rowspan="item.procedureEvaluateList.length"
              >
                {{ item.name }}
              </td>
              <td>{{ evaluate.content }}</td>
              <td>{{ evaluate.point }}</td>
              <td>{{ evaluate.score }}</td>
              <template v-if="eindex === 0">
                <td :rowspan="item.procedureEvaluateList.length">
                  {{ item.finalityEvaluateList[0]?.content }}
                </td>
                <td :rowspan="item.procedureEvaluateList.length">
                  {{ item.finalityEvaluateList[0]?.point }}
                </td>
                <td :rowspan="item.procedureEvaluateList.length">
                  {{ 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>课程负责人：</span>
                  <el-input
                    v-model="courseTargetInfo.courseManager"
                    placeholder="请输入"
                    clearable
                  ></el-input>
                </el-col>
                <el-col :span="12">
                  <span>填写日期：</span>
                  <el-date-picker
                    v-model="courseTargetInfo.date"
                    type="date"
                    value-format="timestamp"
                  >
                  </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>
              <el-checkbox
                v-model="item.reasonable"
                @change="() => evaluationChange(item, 'reasonable')"
              ></el-checkbox>
            </td>
            <td>
              <el-checkbox
                v-model="item.middle"
                @change="() => evaluationChange(item, 'reasonable')"
              ></el-checkbox>
            </td>
            <td>
              <el-checkbox
                v-model="item.unreasonable"
                @change="() => evaluationChange(item, 'reasonable')"
              ></el-checkbox>
            </td>
          </tr>
          <tr>
            <td colspan="5">存在的问题及建议：</td>
          </tr>
          <tr>
            <td colspan="5"></td>
          </tr>
          <tr>
            <td colspan="5">
              <el-row>
                <el-col :span="12">
                  <span>课程负责人：</span>
                  <el-input
                    v-model="courseTargetInfo.courseManager"
                    placeholder="请输入"
                    clearable
                  ></el-input>
                </el-col>
                <el-col :span="12">
                  <span>填写日期：</span>
                  <el-date-picker
                    v-model="courseTargetInfo.date"
                    type="date"
                    value-format="timestamp"
                  >
                  </el-date-picker>
                </el-col>
              </el-row>
            </td>
          </tr>
          <tr>
            <td colspan="5">
              <el-row>
                <el-col :span="12">
                  <span>课程负责人：</span>
                  <el-input
                    v-model="courseTargetInfo.courseManager"
                    placeholder="请输入"
                    clearable
                  ></el-input>
                </el-col>
                <el-col :span="12">
                  <span>填写日期：</span>
                  <el-date-picker
                    v-model="courseTargetInfo.date"
                    type="date"
                    value-format="timestamp"
                  >
                  </el-date-picker>
                </el-col>
              </el-row>
            </td>
          </tr>
        </table>
      </div>
    </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,
      audit: this.checkPrivilege("link", "audit"),
      auditRationality: this.checkPrivilege("link", "auditRationality"),
    };
  },
  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 || {};

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

      const keys = ["reasonable", "middle", "unreasonable"];
      keys
        .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;
    },
  },
};
</script>