rt-sim-training-client/src/views/approval/lesson/detail.vue

<template>
  <el-dialog
    :title="this.$t('approval.courseDetails')"
    :visible.sync="showDetail"
    top="20px"
    width="90%"
    :before-do-close="doClose"
    :close-on-click-modal="false"
  >
    <div>
      <el-card v-loading="loading">
        <div slot="header" style="text-align: center;">
          <b>{{ $t('global.courseName') }}: {{ lessonName }}</b>
        </div>
        <div style="margin:50px">
          <p style="font-size: 14px; margin-bottom: 20px"> {{ $t('approval.courseDescription') }}:
            <span style="color: #808080 !important;">{{ lessonRemark }}</span>
          </p>
        </div>
      </el-card>
      <el-card v-loading="loading">
        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: height -60 + 'px'}">
          <el-table
            :data="tableData"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column
              prop="name"
              border
              :label="this.$t('approval.chapterTrainingName')"
            />
            <el-table-column
              prop="remarks"
              border
              :label="this.$t('approval.instructions')"
            />
          </el-table>
        </el-scrollbar>
      </el-card>
    </div>
  </el-dialog>

</template>

<script>
import {reviewLessonDetail} from '@/api/designPlatform';

export default {
    name: 'LessonApprovalDetail',
    components: {

    },
    data() {
        return {
            loading: false,
            tableData: [],
            lessonName: '',
            lessonRemark: '',
            showDetail: false
        };
    },
    computed: {
        height() {
            return this.$store.state.app.height - 260;
        }
    },
    methods: {
        show(lessonId) {
            this.showDetail = true;
            this.loadInitData(lessonId);
        },
        loadInitData(lessonId) {
            this.loading = true;
            reviewLessonDetail(lessonId).then(response =>{
                this.tableData = response.data[0].children;
                this.lessonName = response.data[0].name;
                this.lessonRemark = response.data[0].remarks;
                this.loading = false;
            }).catch(()=>{
                this.$messageBox(this.$t('approval.failedToGetCourseData'));
            });
        },
        doClose() {
        }
    }
};
</script>