Commit cafac2e2 authored by liuyang's avatar liuyang

添加课程管理 暂存

parent cb2badf9
/******************
* 课程管理
*****************/
// 导入请求公用方法
import {
request
} from '../../utils/axiosFun';
export const fetchList = (query) => {
return request('post','/api/mgr/course/list',query)
}
......@@ -39,6 +39,18 @@ const routes = [{
},
]
},
{
path: '/edu',
name: 'deu',
component: () => import ('@/views/index'),
children: [
{
path: 'biz/course/detail',
name: '课程详情',
component: () => import('@/views/biz/course/detail')
}
]
}
]
......
<template>
<div>课程详情</div>
</template>
<script>
export default {
// 创建完毕
created() {
console.log(this.$route.query.id)
},
// 即将更新渲染
beforeUpdate() {
},
}
</script>
<style>
</style>
\ No newline at end of file
<template>
<div class="template_content">
<!-- 搜索 -->
<div class="search_box">
<a-form layout="inline">
<a-form-item label="课程名称">
<a-input v-model="searchPage.name" allowClear></a-input>
</a-form-item>
<a-form-item label="系列名称">
<a-input v-model="searchPage.seriesName" allowClear></a-input>
</a-form-item>
<a-form-item label="付费模式">
<a-select
allowClear
v-model="searchPage.chargeModel"
style="width: 120px"
>
<a-select-option v-for="item in chargeModeList" :key="item.key">{{item.label}}</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="状态">
<a-select
allowClear
v-model="searchPage.status"
style="width: 120px"
>
<a-select-option v-for="item in statusList" :key="item.key">{{item.label}}</a-select-option>
</a-select>
</a-form-item>
<a-form-item>
<a-button type="primary" icon="search" @click="handlSearch">查询</a-button>
</a-form-item>
</a-form>
</div>
<!-- 表格内容 -->
<div class="content_box">
<!-- 表格操作 -->
<div class="table_top">
<a-button
icon="plus"
type="primary"
class="btn_right_margin"
@click="navigateDetailPage('')"
>添加</a-button>
</div>
<a-table
:columns="columns"
:dataSource="data"
:loading="loading"
:pagination="pagination"
bordered
size="small"
@change="handleTableChange"
rowKey="id"
>
<!-- 收费模式 -->
<div slot="chargeModel" slot-scope="text, record">
<span>{{chargeModeList.filter(e => e.key == record.chargeMode).map(e => e.label)}}</span>
</div>
<!-- 标签 -->
<div slot="tags" slot-scope="text, record">
<a-tag v-for="(item,index) in record.tags" :key="index" color="blue">{{item}}</a-tag>
</div>
<!-- 状态 -->
<div slot="status" slot-scope="text, record">
<span>{{statusList.filter(e => e.key == record.statusList).map(e => e.label)}}</span>
</div>
<!-- 操作 -->
<template slot="action" slot-scope="text, record">
<a-button
icon="edit"
type="primary"
class="btn_margin"
@click="navigateDetailPage(record)"
>编辑</a-button>
<a-button
icon="edit"
type="primary"
class="btn_margin"
@click="changeStatus(record)"
>{{record.status == 'UP' ? '下架' : '上架'}}</a-button>
</template>
</a-table>
</div>
</div>
</template>
<script>
import {fetchList} from '@/api/biz/course'
import { disposereq,timestampToTime } from '@/utils/util'
let columns = [
{
title: '谭程名称',
dataIndex: 'name',
align: 'center',
},
{
title: '系列名称',
dataIndex: 'seriesName',
align: 'center',
},
{
title: '所属讲师',
dataIndex: 'teacherName',
align: 'center',
},
{
title: '收费模式',
dataIndex: 'chargeModel',
align: 'center',
scopedSlots: {customRender: 'chargeModel'}
},
{
title: '标签',
dataIndex: 'tags',
align: 'center',
scopedSlots: {customRender: 'tags'}
},
{
title: '状态',
dataIndex: 'status',
align: 'center',
scopedSlots: {customRender: 'status'}
},
{
title: '操作',
key: "action",
scopedSlots: { customRender: "action" },
align: "center"
}
]
export default {
data(){
return {
columns: columns,
data: [],
searchPage: {
pageIndex: 1,
pageSize: 10,
name: '',
seriesName: '',
chargeModel: null,
status: null
},
pagination: {
showQuickJumper: true,
showSizeChanger: true
},
loading: false,
chargeModeList: [
{
key: 'FREE',
label: '免费'
},
{
key: 'VIP_FREE',
label: '会员免费'
},
{
key: 'PAY',
label: '付费点播'
}
],
statusList: [
{
key: 'UP',
label: '上架'
},
{
key: 'DOWN',
label: '下架'
}
]
}
},
// 创建完毕
created() {
this.getList(this.searchPage);
},
// 即将更新渲染
beforeUpdate() {
},
methods: {
getList(query){
this.loading = true;
fetchList(query).then(res => {
if(res.code == 200){
this.data = res.data
let paper = {...this.pagination}
paper.current = query.pageIndex
paper.total = res.count
this.pagination = paper
}else{
this.$message.info(res.resp_msg)
}
this.loading = false;
}).catch(err => {
this.loading = false;
disposereq(this,err)
})
},
handlSearch(){
let queryParam = {...this.searchPage}
this.getList(queryParam)
},
handleTableChange(){
let queryParam = {...this.searchPage}
queryParam.pageIndex = pagination.current
queryParam.pageSize = pagination.pageSize
this.getList(queryParam)
},
navigateDetailPage(row){
let id = null;
if(row){
id = row.id
}
this.$router.push({path:'/edu/biz/course/detail',query:{id:id}})
},
changeStatus(row){
}
}
}
</script>
<style>
.template_content {
background-color: #f0f2f5;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.search_box {
width: 100%;
box-sizing: border-box;
padding: 14px;
background-color: #fff;
}
.content_box {
width: 100%;
background-color: #fff;
margin-top: 10px;
padding: 14px;
}
.table_top {
padding-bottom: 14px;
}
.btn_margin {
margin: 0px 5px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment