Skip to content

dev / trimble-admin-pro

Go to a project
Toggle navigation
Toggle navigation pinning
83d217e5 by qingxiao
Options

添加教育教学

1 parent cebc7e0e
Inline Side-by-side
Showing 5 changed files with 643 additions and 0 deletions
......@@ -149,6 +149,30 @@ export const constantRouterMap = [{
}
}]
},
{
path: '/live',
component: Layout,
children: [
{
path: 'index',
name: 'Live',
component: () => import('@/views/live/index'),
meta: { title: '直播课程', icon: 'form' }
}
]
},
{
path: '/public',
component: Layout,
children: [
{
path: 'index',
name: 'public',
component: () => import('@/views/public/index'),
meta: { title: '公开课', icon: 'form' }
}
]
},
// {
......
<template>
<div>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
:before-close="handleCloseDialog">
<el-form :model="liveForm" ref="liveForm" :rules="liveRules" label-width="130px">
<el-form-item label="时间：" prop="liveTime">
<el-date-picker
v-model="liveForm.liveTime"
type="datetime"
value-format="timestamp"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="内容：" prop="liveContent">
<el-input type="textarea" v-model="liveForm.liveContent" maxlength="500" show-word-limit></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm('liveForm')">提交</el-button>
<el-button @click="handleCloseDialog">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { request } from '@/api/fetch-api'
let urls = {
liveSaveUrl: '/tianbao_edu_api/admin/live/save',
}
export default {
props: ['dialogVisible', 'title', 'liveTemp'],
data() {
return {
title: '',
liveForm:{},
liveRules:{
liveTime: [
{required: true, message: '请选择时间', trigger: 'blur'}
],
liveContent: [
{required: true, message: '请输入内容', trigger: 'blur'}
],
}
}
},
methods: {
handleCloseDialog() {
this.$emit('closedialog', false)
},
init(){
if (JSON.parse(JSON.stringify(this.liveTemp)) == null) {
this.title='创建'
} else {
this.title="修改"
this.liveForm = JSON.parse(JSON.stringify(this.liveTemp))
}
},
submitForm(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
request.post(urls.liveSaveUrl, this.liveForm).then(response => {
this.$emit('initLive')
this.$emit('closedialog', false)
this.$message.success("保存成功")
}).catch(() => {
})
} else {
console.log('error submit!!')
return false
}
})
}
},
created() {
this.init()
}
}
</script>
<style scoped>
</style>
<template>
<div class="app-container">
<el-header height>
<el-button type="primary" @click="createLive">创建</el-button>
</el-header>
<el-main>
<el-table
:data="liveList"
style="width: 100%"
stripe
highlight-current-row
v-loading="loading"
>
<el-table-column label="时间" prop="liveTime">
<template slot-scope="scope">
{{timestampToTime(scope.row.liveTime)}}
</template>
</el-table-column>
<el-table-column label="直播内容" prop="liveContent"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-link type="primary" @click="editLive(scope.row)">编辑 &nbsp;</el-link>
<el-link type="primary" @click="deleteLive(scope.row.liveCode)">删除</el-link>
</template>
</el-table-column>
</el-table>
</el-main>
<el-footer height>
<div style="text-align:right;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryForm.page"
:page-size="queryForm.size"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
</el-footer>
<live-save-dialog
v-if="dialogVisible"
:dialog-visible="dialogVisible"
:live-temp="liveTemp"
@closedialog="closedialog"
@initLive="initLive">
</live-save-dialog>
</div>
</template>
<script>
import {request} from '@/api/fetch-api'
import liveSaveDialog from './components/liveSaveDialog'
let urls = {
liveListUrl: '/tianbao_edu_api/admin/live/list',
liveSaveUrl: '/tianbao_edu_api/admin/live/save',
liveDelUrl:'/tianbao_edu_api/admin/live/delete'
}
export default {
components: {liveSaveDialog},
data() {
return {
liveList: [],
total: 0,
loading: false,
queryForm: {
page: 1,
size: 10
},
dialogVisible:false,
liveTemp:{},
}
},
methods: {
initLive() {
this.loading = true
request.get(urls.liveListUrl, this.queryForm).then(data => {
this.loading = false
this.liveList = data.content.list
this.total = data.content.total
}).catch(() => {
})
},
editLive(row){
this.liveTemp=row
this.dialogVisible=true
},
createLive(){
this.liveTemp=null
this.dialogVisible=true
},
closedialog() {
this.dialogVisible = false
},
deleteLive(code){
this.$confirm('是否永远删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
request.post(urls.liveDelUrl, {liveCode: code}).then(data => {
this.$message.success("删除成")
this.initLive()
}).catch(() => {
})
}).catch(() => {
})
},
timestampToTime(row) {
if (row === 0) {
return ''
}
var date = new Date(row)
var Y = date.getFullYear() + '-'
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
return Y + M + D + h + m + s
},
/*分页*/
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.queryForm.size = val
this.queryForm.page = 1
this.initLive()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.queryForm.page = val
this.initLive()
},
},
created() {
this.initLive()
}
}
</script>
<style scoped>
</style>
<template>
<div>
<el-dialog
:title="title2"
:visible.sync="dialogVisible"
:before-close="handleCloseDialog">
<el-form :model="publicForm" ref="publicForm" :rules="publicRules" label-width="130px">
<el-form-item label="标题：" prop="title">
<el-input v-model="publicForm.title" maxlength="50" show-word-limit></el-input>
</el-form-item>
<el-form-item label="开始日期：" prop="startDate">
<el-date-picker
v-model="publicForm.startDate"
type="date"
placeholder="选择日期（必填）"
format="yyyy年MM月dd日"
value-format="yyyy年MM月dd日"
:picker-options="pickerOptionsStart">
</el-date-picker>
<el-time-picker
v-model="publicForm.startTime"
format="HH:mm:ss"
value-format="HH:mm:ss"
placeholder="选择时间">
</el-time-picker>
</el-form-item>
<el-form-item label="结束时间：" prop="endDate">
<el-date-picker
v-model="publicForm.endDate"
type="date"
placeholder="选择日期（必填）"
format="yyyy年MM月dd日"
value-format="yyyy年MM月dd日"
:picker-options="pickerOptionsEnd"
>
</el-date-picker>
<el-time-picker
v-model="publicForm.endTime"
format="HH:mm:ss"
value-format="HH:mm:ss"
placeholder="选择时间">
</el-time-picker>
</el-form-item>
<el-form-item label="地点：" prop="city">
<el-row :gutter="5">
<el-col :span="7">
<el-select
v-model="publicForm.province"
filterable
placeholder="省"
@change="provinceSelectChangeHandler"
>
<el-option
v-for="(item,index) in provinceList"
:key="index"
:label="item.areaName"
:value="item.areaName"
></el-option>
</el-select>
</el-col>
<el-col :span="7">
<el-select
v-model="publicForm.city"
filterable
placeholder="市"
>
<el-option
v-for="(item,index) in cityList"
:key="index"
:label="item.areaName"
:value="item.areaName"
></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="报名：" prop="enroll">
<el-input v-model="publicForm.enroll" maxlength="200"
show-word-limit></el-input>
</el-form-item>
<el-form-item label="内容：" prop="content">
<el-input v-model="publicForm.content" type="textarea" maxlength="500"
show-word-limit></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm('publicForm')">提交</el-button>
<el-button @click="handleCloseDialog">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {request} from '@/api/fetch-api'
let urls = {
publicSaveUrl: '/tianbao_edu_api/admin/public/save',
areaUrl: 'https://api.k.wxpai.cn/bizproxy/kdapi/area',
}
export default {
props: ['dialogVisible', 'publicTemp'],
data() {
return {
title2: '',
publicForm: {},
publicRules: {
title: [{required: true, message: '请输入标题', trigger: 'blur'}],
startDate: [{required: true, message: '请选择开始时间', trigger: 'blur'}],
endDate: [{required: false, message: '请选择结束时间', trigger: 'blur'}],
enroll: [{required: true, message: '请填写报名', trigger: 'blur'}],
city: [{required: true, message: '请选择省市', trigger: 'blur'}],
content: [{required: true, message: '请输入内容', trigger: 'blur'}],
},
provinceList: [],
cityList: [],
pickerOptionsStart: {
disabledDate: time => {
let endDateVal = this.publicForm.endDate;
if (endDateVal) {
return time.getTime() >= new Date(endDateVal).getTime();
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
let beginDateVal = this.publicForm.startDate;
if (beginDateVal) {
return (
time.getTime() < new Date(beginDateVal).getTime()-24*60*60*1000
);
}
},
},
}
},
methods: {
handleCloseDialog() {
this.$emit('closedialog', false)
},
init() {
if (JSON.parse(JSON.stringify(this.publicTemp)) == null) {
this.title2 = '创建'
} else {
this.title2 = "修改"
this.publicForm = JSON.parse(JSON.stringify(this.publicTemp))
}
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
request.post(urls.publicSaveUrl, this.publicForm).then(response => {
this.$emit('initPublic')
this.$emit('closedialog', false)
this.$message.success("保存成功")
}).catch(() => {
})
} else {
console.log('error submit!!')
return false
}
})
},
getProvince() {
request.post(urls.areaUrl, {}).then(res => {
this.provinceList = res.content
})
},
provinceSelectChangeHandler(province) {
this.cityList = null
let areaId = this.findAreaId(
this.provinceList,
province
)
request.post(urls.areaUrl, {parentId: areaId}).then(res => {
this.cityList = res.content
})
},
findAreaId(areaList, name) {
let areaId = ''
areaList.forEach(element => {
if (element.areaName == name) {
areaId = element.areaId
}
})
return areaId
},
changeStart() {
this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
// 可通过箭头函数的方式访问到this
disabledDate: (time) => {
var times = '';
times = this.publicForm.endDate < time.getTime() || time.getTime() < new Date(new Date().toLocaleDateString())
.getTime();
return times
}
})
},
//开始时间 控制结束时间
changeEnd() {
this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
disabledDate: (time) => {
return time.getTime() > this.publicForm.startDate
}
})
},
},
created() {
this.init()
this.getProvince()
}
}
</script>
<style scoped>
</style>
<template>
<div class="app-container">
<el-header height>
<el-button type="primary" @click="createPublic">创建</el-button>
</el-header>
<el-main>
<el-table
:data="publicList"
style="width: 100%"
stripe
highlight-current-row
v-loading="loading"
>
<el-table-column label="活动标题" prop="title"></el-table-column>
<el-table-column label="地点" prop="province">
<template slot-scope="scope">
{{scope.row.province}}-{{scope.row.city}}
</template>
</el-table-column>
<el-table-column label="报名" prop="enroll"></el-table-column>
<el-table-column label="开始时间">
<template slot-scope="scope">
{{scope.row.startDate}} &nbsp; {{scope.row.startTime}}
</template>
</el-table-column>
<el-table-column label="结束时间">
<template slot-scope="scope">
{{scope.row.endDate}} &nbsp; {{scope.row.endTime}}
</template>
</el-table-column>
<el-table-column label="直播内容" prop="content"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-link type="primary" @click="editPublic(scope.row)">编辑&nbsp;</el-link>
<el-link type="primary" @click="deletePublic(scope.row.publicCode)">删除</el-link>
</template>
</el-table-column>
</el-table>
</el-main>
<el-footer height>
<div style="text-align:right;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryForm.page"
:page-size="queryForm.size"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
</el-footer>
<public-save-dialog
v-if="dialogVisible"
:dialog-visible="dialogVisible"
:public-temp="publicTemp"
@closedialog="closedialog"
@initPublic="initPublic">
</public-save-dialog>
</div>
</template>
<script>
import {request} from '@/api/fetch-api'
import publicSaveDialog from './components/publicSaveDialog'
let urls = {
publicListUrl: '/tianbao_edu_api/admin/public/list',
publicSaveUrl: '/tianbao_edu_api/admin/public/save',
publicDelUrl: '/tianbao_edu_api/admin/public/delete'
}
export default {
components: {publicSaveDialog},
data() {
return {
publicList: [],
total: 0,
loading: false,
queryForm: {
page: 1,
size: 10
},
dialogVisible: false,
publicTemp: {},
}
},
methods: {
initPublic() {
this.loading = true
request.get(urls.publicListUrl, this.queryForm).then(data => {
this.loading = false
this.publicList = data.content.list
this.total = data.content.total
}).catch(() => {
})
},
editPublic(row) {
this.publicTemp = row
this.dialogVisible = true
},
createPublic() {
this.publicTemp = null
this.dialogVisible = true
},
closedialog() {
this.dialogVisible = false
},
deletePublic(code) {
this.$confirm('是否永远删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
request.post(urls.publicDelUrl, {publicCode: code}).then(data => {
this.$message.success("删除成")
this.initPublic()
}).catch(() => {
})
}).catch(() => {
})
},
timestampToTime(row) {
if (row === 0) {
return ''
}
var date = new Date(row)
var Y = date.getFullYear() + '-'
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
return Y + M + D + h + m + s
},
/*分页*/
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.queryForm.size = val
this.queryForm.page = 1
this.initPublic()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.queryForm.page = val
this.initPublic()
},
},
created() {
this.initPublic()
}
}
</script>
<style scoped>
</style>