welfare-admin/src/views/project/ProjectDetail.vue

<template>
  <a-card :bordered="false" title="项目详情">
    <template slot="extra">
      <a-button size="small" @click="goBack">返回</a-button>
    </template>
    <a-card :bordered="false" title="项目基本信息">
      <a-descriptions size="middle" :column="1" :bordered="true">
        <a-descriptions-item label="项目名称">{{projectBasicInfo.projectName}}</a-descriptions-item>
        <a-descriptions-item label="培训类型">{{projectBasicInfo.trainType == 1 ? '必修课':'选修课'}}</a-descriptions-item>
        <a-descriptions-item label="培训种类">{{projectBasicInfo.trainClassName}}</a-descriptions-item>
        <a-descriptions-item label="培训方式">{{projectBasicInfo.trainWayName}}</a-descriptions-item>
        <a-descriptions-item v-if="projectBasicInfo.trainSdate != null" label="培训时间">{{projectBasicInfo.trainSdate + ' - ' + projectBasicInfo.trainEdate}}</a-descriptions-item>
        <a-descriptions-item v-if="projectBasicInfo.practiceSdate != null" label="练习时间">{{projectBasicInfo.practiceSdate + ' - ' + projectBasicInfo.practiceEdate}}</a-descriptions-item>
        <a-descriptions-item v-if="projectBasicInfo.examSdate != null" label="考试时间">{{projectBasicInfo.examSdate + ' - ' + projectBasicInfo.examEdate}}</a-descriptions-item>
        <a-descriptions-item label="考试次数">{{projectBasicInfo.examNumber + '次'}}</a-descriptions-item>
        <a-descriptions-item label="模拟考试">{{projectBasicInfo.mockExam == 1 ? '允许':'不允许'}}</a-descriptions-item>
        <a-descriptions-item label="备注">{{projectBasicInfo.remark}}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card :bordered="false" title="课程信息">
      <a-table :columns="courseColumns" :data-source="projectBasicInfo.courseLists" size="small" :pagination="false" />
    </a-card>
    <a-card :bordered="false" title="人员信息">
      <a-table :columns="personColumns" :data-source="projectBasicInfo.projectPersonLists" size="small" :pagination="false" />
    </a-card>
    <a-card :bordered="false" title="组卷信息">
      <p>总分 : {{projectBasicInfo.totalScore}}分</p>
      <a-table :columns="testColumns" :data-source="projectBasicInfo.testPaperTactics" size="small" :pagination="false" />
    </a-card>
  </a-card>
</template>

<script>
import { getProjectDetail } from '@/api/project/project';
import { STable } from '@/components'
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    STable,
  },
  props: {},
  data() {
    // 这里存放数据
    return {
      projectId: this.$route.query.projectId || '',  //项目id
      projectBasicInfo: {}, //项目基本信息
      unitTable: [],
      courseTable: [], //课程列表
      personTable: [], //人员列表

      courseColumns: [ //课程列
        { title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
        { title: '课程编号', dataIndex: 'courseCode', key: 'courseCode' },
        { title: '课程名称', dataIndex: 'courseName', key: 'courseName', },
        { title: '课时', key: 'courseHours', dataIndex: 'courseHours', customRender: (text) => text + '小时' },
        { title: '学时要求', dataIndex: 'learnHours', key: 'learnHours', customRender: (text) => text + '小时' },
        { title: '题量', dataIndex: 'topicNumber', key: 'topicNumber' }
      ],

      personColumns: [ //人员列
        { title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
        { title: '姓名', dataIndex: 'name', key: 'name' },
        // { title: '受训角色', dataIndex: 'role', key: 'role', },
        { title: '单位信息', key: 'company', dataIndex: 'company', },
        { title: '部门信息', dataIndex: 'department', key: 'department', },
      ],

      testColumns: [ //组卷列
        { title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
        { title: '题型', dataIndex: 'topicType', key: 'topicType', customRender: (text) => {
            if (text == 1) return '单选题'
            if (text == 2) return '多选题'
            if (text == 3) return '判断题'
            if (text == 4) return '简答题'
            if (text == 5) return '填空题'
          }
        },
        { title: '考试题量', key: 'topicNum', dataIndex: 'topicNum',customRender: (text) => text + '题' },
        { title: '单题分值', dataIndex: 'topicScore', key: 'topicScore', customRender: (text) => text + '分/题'},
      ],
    };
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //获取数据
    getData() {
      getProjectDetail({ id: this.projectId }).then((res) => {
        this.projectBasicInfo = res.data
      })
    },

    //返回
    goBack() {
      this.$router.push({
        path: '/project/list/' + this.$route.query.t,
        query: {
          projectPageNum: this.$route.query.projectPageNum
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getData();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  // 生命周期 - 创建之前
  beforeCreate() { },
  // 生命周期 - 挂载之前
  beforeMount() { },
  // 生命周期 - 更新之前
  beforeUpdate() { },
  // 生命周期 - 更新之后
  updated() { },
  // 生命周期 - 销毁之前
  beforeDestroy() { },
  // 生命周期 - 销毁完成
  destroyed() { },
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
};

</script>
<style scoped>
/* 中国共产党宜昌裕波旭光纺织有限公司委员会,中共湖北省楚天视讯网络有限公司长阳分公司委员会 */
</style>