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 :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 { reqMyCourseList } from '@/api/mycourse/index'
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-dic-tree', placeholder: '课程类别', key: 'trainWay', options: [] }
      ],
      // 表头
      columns: [
        {
          title: '序号',
          width: '80px',
          scopedSlots: { customRender: 'index' },
          align: 'center'
        },
        {
          title: '课程名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '课程类别',
          dataIndex: 'trainType',
          scopedSlots: { customRender: 'trainType' }
        },
        {
          title: '开始时间',
          dataIndex: 'startDate'
        },
        {
          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 () {
      dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
        this.queryOptions[1].options = dictToTree(res.data, [], 0)
				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>