welfare-admin/src/views/mycourse/mycourseList/MyCourseList.vue

<template>
  <a-card :bordered="false" :loading="loading">
    <div class="table-page-search-wrapper">
      <SearchCom
        :form="queryParam"
        :list="queryOptions"
        @search="handleRefresh"
        @reset="
          () => {
            queryParam = {};
            handleRefresh();
          }
        "
      ></SearchCom>
    </div>
    <br />
    <s-table
      ref="table"
      :pageSize="5"
      :columns="columns"
      :data="loadData"
      :rowKey="record => record.id"
    >
      <span slot="index" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <template slot="courseName" slot-scope="text, record">
        <a-button @click="handlerDetail(record)" type="link">{{ record.courseName }}</a-button>
      </template>
      <span slot="trainType" slot-scope="text, record">
        <a-tag v-if="record.trainType === 1" color="red">必修课</a-tag>
        <a-tag v-if="record.trainType === 2" color="blue">选修课</a-tag>
      </span>
      <span slot="status" slot-scope="text, record">
        <a-tag v-if="record.status === 1" color="red">未开始</a-tag>
        <a-tag v-if="record.status === 2" color="blue">进行中</a-tag>
        <a-tag v-if="record.status === 3" color="green">已完成</a-tag>
      </span>
      <template slot="schedule" slot-scope="text, record">
        <a-progress v-if="record.schedule || record.schedule === 0" :percent="record.schedule" />
      </template>
      <template slot="learnHours" slot-scope="text, record">{{ record.learnHours }}小时</template>
      <span slot="action" slot-scope="text, record">
        <a-popconfirm
          v-if="record.status === 1"
          :title="`确定要添加${record.name}课程吗?`"
          ok-text="添加"
          cancel-text="取消"
          @confirm="handlerAddCourse(record)"
        >
          <a>添加课程</a>
        </a-popconfirm>
        <a v-if="record.status === 2" @click="handlerContinue(record)">继续学习</a>
        <a v-if="record.status === 3">已完成学习</a>
      </span>
    </s-table>
    <MycourseDetail ref="aycourseDetail"></MycourseDetail>
  </a-card>
</template>

<script>
import moment from 'moment'
import { reqMyCourseList } from '@/api/mycourse/index'
import { dictGet } from '@/api/project/project'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
import { dictToTree } from '@/utils/util'
import { STable, SearchCom } from '@/components'
import MycourseDetail from './MycourseDetail.vue'
export default {
  components: {
    STable,
    SearchCom,
    MycourseDetail
    // UserForm,
    // UserRoleForm
  },
  data () {
    return {
      loading: true,
      queryParam: {
        name: '', // 课程分类
        trainWay: ''
      },
      queryOptions: [
        { type: 'input', placeholder: '课程名称', key: 'name' },
        { type: 'select', placeholder: '课程类别', key: 'trainWay', options: [] },
        {
          type: 'select',
          placeholder: '课程状态',
          key: 'status',
          options: [
            { name: '未开始', value: 1, id: 1 },
            { name: '进行中', value: 2, id: 2 },
            { name: '已完成', value: 3, id: 3 },
            { name: '已结束', value: 4, id: 4 }
          ]
        }
      ],
      // 表头
      columns: [
        {
          title: '序号',
          width: '80px',
          scopedSlots: { customRender: 'index' },
          align: 'center'
        },
        {
          title: '课程名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '课程类别',
          dataIndex: 'trainType',
          scopedSlots: { customRender: 'trainType' }
        },
        {
          title: '开始时间',
          dataIndex: 'startDate',
          customRender: text => {
            if (!text) return '-'
            return moment(text).format('YYYY-MM-DD')
          }
        },
        {
          title: '课程状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          width: '120px'
        },
        {
          title: '课程进度',
          dataIndex: 'schedule',
          scopedSlots: { customRender: 'schedule' },
          width: '180px'
        },
        {
          title: '已休学时',
          dataIndex: 'learnHours',
          scopedSlots: { customRender: 'learnHours' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const { person } = this.$store.state.user
        const params = { ...parameter, ...this.queryParam, personId: person.id }
        return reqMyCourseList(params).then(res => {
          return res
        })
      },
      selectedRows: [], // 选中行的数据
      options: {}
    }
  },
  created () {
    this.dictionaryDropDown()
    this.columns.push({
      title: '操作',
      width: '150px',
      dataIndex: 'action',
      scopedSlots: { customRender: 'action' }
    })
  },
  methods: {
    // 点击详情
    handlerDetail () {
      this.$refs.aycourseDetail.visible = true
    },
    // 获取数据词典
    dictionaryDropDown () {
      dictGet({ type: 1 }).then(res => {
        this.queryOptions[1].options = res.data
        this.loading = false
      })
    },
    classificationChange (value) {
      this.queryParam.classification = value
    },
    // 获取列表
    handleRefresh () {
      this.$refs.table.refresh()
    },
    handleOk () {
      this.$refs.table.refresh()
    },
    // 添加课程
    handlerAddCourse (row) {
      console.log('row', row)
      const _this = this
      this.$emit('add', {
        row: row,
        callback: function () {
          _this.$refs.table.refresh()
        }
      })
    },
    // 继续学习
    handlerContinue (row) {
      // this.$emit('continue', { row: row })
      this.$router.push({
        path: '/mycourse/courseLearn',
        query: { courseId: row.id }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.table-operator {
  margin-bottom: 18px;
}
button {
  margin-right: 8px;
}
</style>