kd-aiot-frontend-ehs/src/views/safetyTraining/myTraining/detail.vue

<template>
  <ele-modal
    :visible.sync="visible"
    title="查看详情"
    width="60vw"
    append-to-body
    :close-on-click-modal="false"
    :maxable="true"
    @close="cancel"
  >
    <div class="detail-box">
      <el-row class="detail-row">
        <el-col :span="12" class="detail-item">
          <span class="detail-label">培训名称：</span>
          <span class="detail-value">{{ form.trainingName || '-' }}</span>
        </el-col>
        <el-col :span="12" class="detail-item">
          <span class="detail-label">培训计划状态：</span>
          <span class="detail-value">{{ form.planStatusName || '-' }}</span>
        </el-col>
      </el-row>
      <el-row class="detail-row">
        <el-col :span="12" class="detail-item">
          <span class="detail-label">培训讲师：</span>
          <span class="detail-value">{{ form.trainingLecturer || '-' }}</span>
        </el-col>
        <el-col :span="12" class="detail-item">
          <span class="detail-label">讲师资质：</span>
          <span class="detail-value">{{
            form.lecturerQualification || '-'
          }}</span>
        </el-col>
      </el-row>
      <el-row class="detail-row">
        <el-col :span="12" class="detail-item">
          <span class="detail-label">培训开始时间：</span>
          <span class="detail-value">{{ form.trainingStartTime || '-' }}</span>
        </el-col>
        <el-col :span="12" class="detail-item">
          <span class="detail-label">要求完成时间：</span>
          <span class="detail-value">{{
            form.requiredCompleteTime || '-'
          }}</span>
        </el-col>
      </el-row>
      <el-row class="detail-row">
        <el-col :span="12" class="detail-item">
          <span class="detail-label">培训学时：</span>
          <span class="detail-value">{{ form.trainingHours || '-' }}</span>
        </el-col>
        <el-col :span="12" class="detail-item">
          <span class="detail-label">课程时长(分钟)：</span>
          <span class="detail-value">{{
            form.courseDurationMinutes || '-'
          }}</span>
        </el-col>
      </el-row>
      <el-row class="detail-row">
        <el-col :span="12" class="detail-item">
          <span class="detail-label">学习状态：</span>
          <span class="detail-value">{{ form.statusName || '-' }}</span>
        </el-col>
        <el-col :span="12" class="detail-item">
          <span class="detail-label">是否已逾期：</span>
          <span class="detail-value">{{ form.overdue ? '是' : '否' }}</span>
        </el-col>
      </el-row>
      <el-row class="detail-row">
        <el-col :span="12" class="detail-item">
          <span class="detail-label">已完成时长(分钟)：</span>
          <span class="detail-value">{{
            form.completedDurationMinutes || '-'
          }}</span>
        </el-col>
        <el-col :span="12" class="detail-item">
          <span class="detail-label">完成时间：</span>
          <span class="detail-value">{{ form.completeTime || '-' }}</span>
        </el-col>
      </el-row>
      <el-row class="detail-row">
        <el-col :span="24" class="detail-item">
          <span class="detail-label">相关培训资料：</span>
          <span class="detail-value">{{
            form.trainingMaterialNames || '-'
          }}</span>
        </el-col>
      </el-row>
      <el-row class="detail-row">
        <el-col :span="24" class="detail-item">
          <span class="detail-label">资料学习进度：</span>
          <span class="detail-value"
            >{{ form.materialCompletedCount || 0 }}/{{
              form.materialTotalCount || 0
            }}</span
          >
        </el-col>
      </el-row>
      <el-row v-if="form.examName" class="detail-row">
        <el-col :span="12" class="detail-item">
          <span class="detail-label">考试名称：</span>
          <span class="detail-value">{{ form.examName }}</span>
        </el-col>
        <el-col :span="12" class="detail-item">
          <span class="detail-label">考试类型：</span>
          <span class="detail-value">{{ examTypeText }}</span>
        </el-col>
      </el-row>
      <el-row v-if="form.examName" class="detail-row">
        <el-col :span="12" class="detail-item">
          <span class="detail-label">考试地点：</span>
          <span class="detail-value">{{ form.examPlace || '-' }}</span>
        </el-col>
        <el-col :span="12" class="detail-item">
          <span class="detail-label">考试时长(分钟)：</span>
          <span class="detail-value">{{
            form.examDurationMinutes || '-'
          }}</span>
        </el-col>
      </el-row>
      <el-row v-if="form.examName" class="detail-row">
        <el-col :span="12" class="detail-item">
          <span class="detail-label">合格分数：</span>
          <span class="detail-value">{{ form.passScore || '-' }}</span>
        </el-col>
      </el-row>
    </div>

    <template v-slot:footer>
      <el-button @click="cancel">关闭</el-button>
    </template>
  </ele-modal>
</template>

<script>
  import { EXAM_TYPE_MAP } from '../constants';

  const defForm = {
    trainingName: '',
    planStatus: '',
    planStatusName: '',
    trainingLecturer: '',
    lecturerQualification: '',
    trainingStartTime: '',
    requiredCompleteTime: '',
    trainingHours: '',
    courseDurationMinutes: '',
    status: '',
    statusName: '',
    overdue: false,
    completedDurationMinutes: '',
    completeTime: '',
    trainingMaterialNames: '',
    materialCompletedCount: '',
    materialTotalCount: '',
    examName: '',
    examType: '',
    examPlace: '',
    examDurationMinutes: '',
    passScore: ''
  };

  export default {
    data() {
      return {
        visible: false,
        form: JSON.parse(JSON.stringify(defForm))
      };
    },
    computed: {
      examTypeText() {
        return EXAM_TYPE_MAP[this.form.examType] || this.form.examType || '-';
      }
    },
    methods: {
      open(row) {
        this.visible = true;
        this.form = JSON.parse(JSON.stringify({ ...defForm, ...(row || {}) }));
      },
      cancel() {
        this.form = JSON.parse(JSON.stringify(defForm));
        this.visible = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .detail-box {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding: 10px 20px;
  }

  .detail-row {
    border-bottom: 1px solid #ebeef5;
    padding: 14px 0;

    &:last-child {
      border-bottom: none;
    }
  }

  .detail-item {
    display: flex;
    align-items: flex-start;
    line-height: 22px;
  }

  .detail-label {
    flex-shrink: 0;
    width: 120px;
    text-align: right;
    color: #606266;
  }

  .detail-value {
    flex: 1;
    color: #303133;
    word-break: break-all;
  }
</style>