添加视频鉴赏
This commit is contained in:
闵宪瑞
parent
8a63422688
commit
766e21aa1c
62
src/api/video.js
Normal file
62
src/api/video.js
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增EbVideo
|
||||||
|
* @param pram
|
||||||
|
*/
|
||||||
|
export function EbVideoCreateApi(data) {
|
||||||
|
return request({
|
||||||
|
url: 'admin/video/save',
|
||||||
|
method: 'POST',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ebvideo更新
|
||||||
|
* @param pram
|
||||||
|
*/
|
||||||
|
export function ebvideoUpdateApi(data) {
|
||||||
|
return request({
|
||||||
|
url: 'admin/video/update',
|
||||||
|
method: 'POST',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ebvideo详情
|
||||||
|
* @param pram
|
||||||
|
*/
|
||||||
|
export function ebvideoDetailApi(id) {
|
||||||
|
return request({
|
||||||
|
url: `admin/video/info/${id}`,
|
||||||
|
method: 'GET'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ebvideo删除
|
||||||
|
* @param pram
|
||||||
|
*/
|
||||||
|
export function ebvideoDeleteApi(id) {
|
||||||
|
return request({
|
||||||
|
url: `admin/video/delete/${id}`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ebvideo列表
|
||||||
|
* @param pram
|
||||||
|
*/
|
||||||
|
export function ebvideoListApi(params) {
|
||||||
|
return request({
|
||||||
|
url: 'admin/video/list',
|
||||||
|
method: 'GET',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
@ -38,6 +38,15 @@ const contentRouter = {
|
|||||||
title: '文章分类',
|
title: '文章分类',
|
||||||
icon: 'clipboard'
|
icon: 'clipboard'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'video',
|
||||||
|
name: 'video',
|
||||||
|
component: () => import('@/views/content/video/index'),
|
||||||
|
meta: {
|
||||||
|
title: '视频鉴赏',
|
||||||
|
icon: 'clipboard'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
231
src/views/content/video/index.vue
Normal file
231
src/views/content/video/index.vue
Normal file
@ -0,0 +1,231 @@
|
|||||||
|
<template>
|
||||||
|
<div class="divBox">
|
||||||
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||||
|
<el-form-item>
|
||||||
|
<el-input v-model="dataForm.key" placeholder="查询参数" clearable></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="getDataList()">查询</el-button>
|
||||||
|
<el-button v-hasPermi="['admin:video:save']" type="primary" @click="addOrUpdateHandle()">新增数据</el-button>
|
||||||
|
<el-button v-hasPermi="['admin:video:delete']" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-table
|
||||||
|
:data="dataList"
|
||||||
|
v-loading="dataListLoading"
|
||||||
|
@selection-change="selectionChangeHandle"
|
||||||
|
style="width: 100%;">
|
||||||
|
<el-table-column
|
||||||
|
type="selection"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
width="50">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="id"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="ID">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="title"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="视频标题">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="author"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="视频作者">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="authorType"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="作者类型：1管理员，2游客">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="imageInput"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="视频图片">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="synopsis"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="视频简介">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="shareTitle"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="视频分享标题">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="shareSynopsis"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="视频分享简介">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="visit"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="浏览次数">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="sort"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="排序">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="url"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="原文链接">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="status"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="状态：0无效，1有效">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="hide"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="是否隐藏 0不隐藏，1隐藏">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="productId"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="商品关联id">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="isHot"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="是否热门(小程序)">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="isBanner"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="是否轮播图(小程序)">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="content"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="视频详细内容">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="createTime"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="创建时间">
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
fixed="right"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
width="150"
|
||||||
|
label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
|
||||||
|
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
@size-change="sizeChangeHandle"
|
||||||
|
@current-change="currentChangeHandle"
|
||||||
|
:current-page="pageIndex"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:total="totalPage"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper">
|
||||||
|
</el-pagination>
|
||||||
|
<!-- 表单弹窗, 新增数据和修改数据 -->
|
||||||
|
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import AddOrUpdate from '@/views/content/video/video-add-and-update.vue'
|
||||||
|
import * as api from '@/api/video'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
dataForm: {
|
||||||
|
key: ''
|
||||||
|
},
|
||||||
|
dataList: [],
|
||||||
|
pageIndex: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
totalPage: 0,
|
||||||
|
dataListLoading: false,
|
||||||
|
dataListSelections: [],
|
||||||
|
addOrUpdateVisible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
AddOrUpdate
|
||||||
|
},
|
||||||
|
activated () {
|
||||||
|
this.getDataList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取数据列表
|
||||||
|
getDataList () {
|
||||||
|
this.dataListLoading = true
|
||||||
|
api.ebvideoListApi().then(res => {
|
||||||
|
// TODO 获取数据列表
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 每页数
|
||||||
|
sizeChangeHandle (val) {
|
||||||
|
this.pageSize = val
|
||||||
|
this.pageIndex = 1
|
||||||
|
this.getDataList()
|
||||||
|
},
|
||||||
|
// 当前页
|
||||||
|
currentChangeHandle (val) {
|
||||||
|
this.pageIndex = val
|
||||||
|
this.getDataList()
|
||||||
|
},
|
||||||
|
// 多选
|
||||||
|
selectionChangeHandle (val) {
|
||||||
|
this.dataListSelections = val
|
||||||
|
},
|
||||||
|
// 新增 / 修改
|
||||||
|
addOrUpdateHandle (id) {
|
||||||
|
this.addOrUpdateVisible = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.addOrUpdate.init(id)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// // 删除
|
||||||
|
// deleteHandle (id) {
|
||||||
|
// var ids = id ? [id] : this.dataListSelections.map(item => {
|
||||||
|
// return item.id
|
||||||
|
// })
|
||||||
|
// this.$confirm(`您确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
|
||||||
|
// confirmButtonText: '确定',
|
||||||
|
// cancelButtonText: '取消',
|
||||||
|
// type: 'warning'
|
||||||
|
// }).then(() => {
|
||||||
|
// api.ebvideoDeleteApi(id).then(res => {
|
||||||
|
// // TODO 处理删除
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
184
src/views/content/video/video-add-and-update.vue
Normal file
184
src/views/content/video/video-add-and-update.vue
Normal file
@ -0,0 +1,184 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 基于 Element UI 新增和修改弹窗 -->
|
||||||
|
<el-dialog
|
||||||
|
:title="!dataForm.id ? '添加' : '修改'"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
:visible.sync="visible">
|
||||||
|
<!-- 新增和创建表单表单 -->
|
||||||
|
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="100px">
|
||||||
|
<el-form-item label="视频标题" prop="title">
|
||||||
|
<el-input v-model="dataForm.title" placeholder="视频标题"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="视频作者" prop="author">-->
|
||||||
|
<!-- <el-input v-model="dataForm.author" placeholder="视频作者"></el-input>-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<!-- <el-form-item label="作者类型：1管理员，2游客" prop="authorType">-->
|
||||||
|
<!-- <el-input v-model="dataForm.authorType" placeholder="作者类型：1管理员，2游客"></el-input>-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<el-form-item label="视频图片" prop="imageInput">
|
||||||
|
<el-input v-model="dataForm.imageInput" placeholder="视频图片"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="视频简介" prop="synopsis">
|
||||||
|
<el-input v-model="dataForm.synopsis" placeholder="视频简介"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="视频分享标题" prop="shareTitle">-->
|
||||||
|
<!-- <el-input v-model="dataForm.shareTitle" placeholder="视频分享标题"></el-input>-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<!-- <el-form-item label="视频分享简介" prop="shareSynopsis">-->
|
||||||
|
<!-- <el-input v-model="dataForm.shareSynopsis" placeholder="视频分享简介"></el-input>-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <el-form-item label="原文链接" prop="url">-->
|
||||||
|
<!-- <el-input v-model="dataForm.url" placeholder="原文链接"></el-input>-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<!-- <el-form-item label="是否隐藏" prop="hide">-->
|
||||||
|
<!-- <el-select v-model="dataForm.hide" placeholder="是否隐藏">-->
|
||||||
|
<!-- <el-option label="是" :value=1></el-option>-->
|
||||||
|
<!-- <el-option label="否" :value=0></el-option>-->
|
||||||
|
<!-- </el-select>-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<el-form-item label="商品关联id" prop="productId">
|
||||||
|
<el-input v-model="dataForm.productId" placeholder="商品关联id"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否热门" prop="isHot">
|
||||||
|
<el-select v-model="dataForm.isHot" placeholder="是否热门">
|
||||||
|
<el-option label="是" :value=1></el-option>
|
||||||
|
<el-option label="否" :value=0></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否轮播图" prop="isBanner">
|
||||||
|
<el-select v-model="dataForm.isBanner" placeholder="是否轮播图">
|
||||||
|
<el-option label="是" :value=1></el-option>
|
||||||
|
<el-option label="否" :value=0></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="详细内容" prop="content">
|
||||||
|
|
||||||
|
<Tinymce v-model="dataForm.content"></Tinymce>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="排序" prop="sort">
|
||||||
|
<el-input-number v-model="dataForm.sort" :min="0" :max="9999" label="排序"></el-input-number>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
</el-form>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="visible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="dataSubmit()">确定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/video'
|
||||||
|
import Tinymce from '@/components/Tinymce/index'
|
||||||
|
export default {
|
||||||
|
components: {Tinymce },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
dataForm: {
|
||||||
|
id: 0,
|
||||||
|
title: '',
|
||||||
|
author: '',
|
||||||
|
authorType: '',
|
||||||
|
imageInput: '',
|
||||||
|
synopsis: '',
|
||||||
|
shareTitle: '',
|
||||||
|
shareSynopsis: '',
|
||||||
|
visit: '',
|
||||||
|
sort: '',
|
||||||
|
url: '',
|
||||||
|
status: '',
|
||||||
|
hide: '',
|
||||||
|
productId: '',
|
||||||
|
isHot: '',
|
||||||
|
isBanner: '',
|
||||||
|
content: '',
|
||||||
|
|
||||||
|
},
|
||||||
|
dataRule: {
|
||||||
|
title: [
|
||||||
|
{required: true, message: '视频标题 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
author: [
|
||||||
|
{required: true, message: '视频作者 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
authorType: [
|
||||||
|
{required: true, message: '作者类型：1管理员，2游客 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
imageInput: [
|
||||||
|
{required: true, message: '视频图片 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
synopsis: [
|
||||||
|
{required: true, message: '视频简介 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
shareTitle: [
|
||||||
|
{required: true, message: '视频分享标题 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
shareSynopsis: [
|
||||||
|
{required: true, message: '视频分享简介 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
visit: [
|
||||||
|
{required: true, message: '浏览次数 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
sort: [
|
||||||
|
{required: true, message: '排序 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
url: [
|
||||||
|
{required: true, message: '原文链接 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
status: [
|
||||||
|
{required: true, message: '状态：0无效，1有效 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
hide: [
|
||||||
|
{required: true, message: '是否隐藏 0不隐藏，1隐藏 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
productId: [
|
||||||
|
{required: true, message: '商品关联id 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
isHot: [
|
||||||
|
{required: true, message: '是否热门(小程序) 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
isBanner: [
|
||||||
|
{required: true, message: '是否轮播图(小程序) 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
content: [
|
||||||
|
{required: true, message: '视频详细内容 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
createTime: [
|
||||||
|
{required: true, message: '创建时间 为必填项', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
updateTime: [
|
||||||
|
{required: true, message: '更新时间 为必填项', trigger: 'blur'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init(id) { // 初始化表单验证规则
|
||||||
|
this.dataForm.id = id || 0
|
||||||
|
this.visible = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs['dataForm'].resetFields()
|
||||||
|
if (this.dataForm.id) {
|
||||||
|
api.ebvideoDetailApi(id).then(res => {
|
||||||
|
this.dataForm = res;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 表单数据提交
|
||||||
|
dataSubmit() {
|
||||||
|
this.$refs['dataForm'].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
api.EbVideoCreateApi().then(res => {
|
||||||
|
// TODO 保存数据
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user