welfare-admin/src/views/course/CourseDetail.vue

<template>
  <a-card :bordered="false" title="课程详情">
    <a-descriptions layout="horizontal" bordered size="small" :column="1">
      <a-descriptions-item label="课程编号">{{ detailData.courseCode }}</a-descriptions-item>
      <a-descriptions-item label="课程名称">{{ detailData.courseName }}</a-descriptions-item>
      <a-descriptions-item label="课程类别">
        {{ getDictLabelByKey('dictCourseType', detailData.courseType) }}
      </a-descriptions-item>
      <a-descriptions-item label="课时">{{ detailData.hour }}</a-descriptions-item>
      <a-descriptions-item label="学习内容">{{ detailData.learningContent }}</a-descriptions-item>
      <a-descriptions-item label="题⽬数量">{{ detailData.questionCount }}</a-descriptions-item>
      <a-descriptions-item label="备注">{{ detailData.remark }}</a-descriptions-item>
      <a-descriptions-item label="课程封面图">
        <div v-if="detailData.imagePath">
          <img style="width:75px;height:75px" :src="detailData.imagePath" />
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="标签">
        <template v-if="detailData.courseTags && detailData.courseTags.length > 0">
          <a-tag color="blue" v-for="(item, index) in detailData.courseTags" :key="index">
            {{ getDictLabelByKey('dictCourseTag', item.dictValue) }}
          </a-tag>
        </template>
      </a-descriptions-item>
    </a-descriptions>
    <div class="buttonGroup">
      <a-button type="primary" @click="close">返回</a-button>
      <a-button type="primary" @click="edit">编辑</a-button>
    </div>
  </a-card>
</template>
<script>
import _ from 'lodash';
import { getCourseDetails } from '@/api/course/course';
import { dictionaryDropDown } from '@/api/sys/dictionaryItem';
export default {
  name: 'Details',
  components: {},
  data() {
    return {
      queryParam: { id: this.$route.query.id },
      detailData: {
        imagePath: '', // 图片路径
        coverPath: [],
      },
      dictCourseType: [],
      dictCourseTag: [],
      tags: [], // 用于存放标签
    };
  },
  created: function () {
    // 调用词典
    this.loadData();
    this.dictionaryDropDown();
    this.getTagName();
  },
  methods: {
    // 加载数据
    loadData() {
      const parameter = {};
      getCourseDetails(Object.assign(parameter, this.queryParam)).then(res => {
        this.detailData = res.data;

        this.detailData.coverPath = JSON.parse(res.data.coverPath);

        if (this.detailData.coverPath && this.detailData.coverPath.length != 0) {
          this.detailData.imagePath = this.detailData.coverPath[0].url;
        }
      });
    },

    close() {
      this.$router.push({ path: '/course/CourseList/' + this.$route.query.type, query: {} });
    },
    edit(record) {
      this.$router.push({
        path: '/course/CourseAdd',
        query: { id: this.queryParam.id, type: this.$route.query.type },
      });
    },
    getDictLabelByKey(name, value) {
      let result = '-';
      const list = this[name];
      if (Array.isArray(list)) {
        const item = _.find(list, ['value', value]);
        if (item) {
          result = item.name;
        }
      }
      return result;
    },
    // 获取数据字典
    dictionaryDropDown() {
      // 课程类别
      dictionaryDropDown({ dictionaryCode: '0006' }).then(res => {
        this.dictCourseType = res.data;

        // // 课程类别的value转换成字典name
        // for (let i = 0; i < this.dictCourseType.length; i++) {
        //   if (this.dictCourseType[i].value == this.detailData.courseType) {
        //     this.detailData.courseTypeName = this.dictCourseType[i].name
        //   }
        // }
      });
    },
    getTagName() {
      dictionaryDropDown({ dictionaryCode: '0008' }).then(res => {
        this.dictCourseTag = res.data;


        // const tags = []
        // for (let i = 0; i < this.dictCourseTag.length; i++) {
        //   for (let j = 0; j < this.detailData.courseTags.length; j++) {
        //     if (this.dictCourseTag[i].value == this.detailData.courseTags[j].dictValue) {
        //       tags.push(this.dictCourseTag[i].name)
        //     }
        //   }
        // }
        // console.log('tagagagaga', tags)
        // this.detailData.tags = tags
      });
    },
  },
};
</script>

<style>
.ant-descriptions-item-label {
  width: 100px;
  text-align: center;
}
.buttonGroup {
  width: 100%;
  height: auto;
  text-align: center;
  margin-top: 10px;
}
</style>