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;
		}
	},
	watch: {

	},
	created() {
	},
	mounted() {
		// this.loadInitData();
	},
	beforeDestroy() {

	},
	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>