|
@@ -0,0 +1,130 @@
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.search-box p {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ padding: 5px 10px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+<template>
|
|
|
|
+ <a-row :gutter="10">
|
|
|
|
+ <a-col :sm="24" style="margin-bottom: 20px;z-index: 10">
|
|
|
|
+ <a-card class="search-box">
|
|
|
|
+ <p
|
|
|
|
+ :style="active == item.value ? 'color:cornflowerblue;background:#f2f2f2' : ''"
|
|
|
|
+ v-for="(item, index) of timeList"
|
|
|
|
+ :key="index"
|
|
|
|
+ @click="getAdd(item.value)"
|
|
|
|
+ >
|
|
|
|
+ {{ item.label }}
|
|
|
|
+ </p>
|
|
|
|
+ </a-card>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :sm="24" style="margin-bottom: 20px;z-index: 10">
|
|
|
|
+ <a-card class="search-box">
|
|
|
|
+ <div v-if="data.length > 0">
|
|
|
|
+ <a-list :grid="{ gutter: 16, column: 4 }" :dataSource="data">
|
|
|
|
+ <a-list-item slot="renderItem" slot-scope="item">
|
|
|
|
+ <a-card :title="item.title" @click="lookDetail(item)">时间</a-card>
|
|
|
|
+ </a-list-item>
|
|
|
|
+ </a-list>
|
|
|
|
+ <a-pagination
|
|
|
|
+ size="small"
|
|
|
|
+ :showTotal="ipagination.showTotal"
|
|
|
|
+ style="float:right"
|
|
|
|
+ v-if="dataSource.length > 0"
|
|
|
|
+ showQuickJumper
|
|
|
|
+ :pageSize.sync="ipagination.pageSize"
|
|
|
|
+ :total="ipagination.total"
|
|
|
|
+ v-model="ipagination.current"
|
|
|
|
+ @change="getDataSource"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <a-empty v-else />
|
|
|
|
+ </a-card>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-modal title="课程详情" v-model="visibleDetail" width="70%"> </a-modal>
|
|
|
|
+ </a-row>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { getAction } from '@/api/manage'
|
|
|
|
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
|
|
+import moment from 'moment'
|
|
|
|
+import $ from 'jquery'
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: 'online-training-list',
|
|
|
|
+ mixins: [JeecgListMixin],
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ visibleDetail: false,
|
|
|
|
+ timeList: [
|
|
|
|
+ { label: '分类1', value: 1, show: true },
|
|
|
|
+ { label: '分类2', value: 2, show: true },
|
|
|
|
+ { label: '分类3', value: 3, show: true },
|
|
|
|
+ { label: '分类4', value: 4, show: true },
|
|
|
|
+ { label: '分类5', value: 5, show: true },
|
|
|
|
+ { label: '分类6', value: 6, show: true },
|
|
|
|
+ { label: '分类7', value: 7, show: true },
|
|
|
|
+ { label: '分类8', value: 8, show: true }
|
|
|
|
+ ],
|
|
|
|
+ active: 1,
|
|
|
|
+ data: [
|
|
|
|
+ {
|
|
|
|
+ title: '素材库-脚本库视频'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '素材库-脚本库文档'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '素材库-视频库操作视频'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '素材库-视频库操作文档'
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ url: {
|
|
|
|
+ list: '/ctop/materialInfo/list'
|
|
|
|
+ },
|
|
|
|
+ startList: true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ components: {},
|
|
|
|
+ methods: {
|
|
|
|
+ getDataSource(page, pageSize) {
|
|
|
|
+ this.ipagination.current = page
|
|
|
|
+ this.loadData()
|
|
|
|
+ },
|
|
|
|
+ getAdd(checked) {
|
|
|
|
+ this.active = checked
|
|
|
|
+ if (checked == 5) {
|
|
|
|
+ this.data = []
|
|
|
|
+ } else {
|
|
|
|
+ this.data = [
|
|
|
|
+ {
|
|
|
|
+ title: 'Title 1'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: 'Title 2'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: 'Title 3'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: 'Title 4'
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ lookDetail(item) {
|
|
|
|
+ this.visibleDetail = true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ // /modules/onlineTraining/onlineTrainingList
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|