312 lines
12 KiB
HTML
312 lines
12 KiB
HTML
<!--#
|
||
layout("/layouts/platform.html"){
|
||
#-->
|
||
|
||
<style>
|
||
.avatar-uploader .el-upload {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.avatar-uploader .el-upload:hover {
|
||
border-color: #409EFF;
|
||
}
|
||
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 178px;
|
||
height: 178px;
|
||
line-height: 178px;
|
||
text-align: center;
|
||
}
|
||
|
||
.avatar {
|
||
width: 178px;
|
||
height: 178px;
|
||
display: block;
|
||
}
|
||
|
||
.el-popover {
|
||
text-align: center;
|
||
}
|
||
|
||
.descriptionContainer {
|
||
|
||
}
|
||
|
||
</style>
|
||
|
||
<div id="app" v-cloak>
|
||
<guava ref="guava">
|
||
<el-card shadow="never">
|
||
<div class="btn-group tool-button mt5">
|
||
<el-input placeholder="请输入内容" v-model="pageForm.searchKeyword" clearable
|
||
@keyup.enter.native="doSearch">
|
||
<el-select v-model="pageForm.searchName" slot="prepend" placeholder="查询类型"
|
||
style="width: 120px;">
|
||
<el-option label="标题" value="tea.title"></el-option>
|
||
</el-select>
|
||
</el-input>
|
||
</div>
|
||
|
||
<div class="btn-group tool-button mt5">
|
||
<el-select v-model="pageForm.typeId" clearable>
|
||
<el-option v-for="item in videoTypeList" :label="item.typeName"
|
||
:value="item.id"></el-option>
|
||
</el-select>
|
||
</div>
|
||
|
||
<div class="btn-group tool-button mt5">
|
||
<el-button type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
|
||
</div>
|
||
|
||
<div class="pull-right offscreen-right mt5">
|
||
<el-button type="primary" @click="openAdd">
|
||
<i class="ti-plus"></i>
|
||
新增专辑
|
||
</el-button>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card shadow="never" class="mt10">
|
||
<table-tool label="专辑列表" :app="this"></table-tool>
|
||
<el-table :data="tableData" :size="tableSize" style="width: 100%">
|
||
<el-table-column type="index" label="序号" width="80px"></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
header-align="center"
|
||
v-for="column in tableColumns"
|
||
show-overflow-tooltip
|
||
:label="column.label"
|
||
:prop="column.prop"
|
||
:sortable="column.sortable"
|
||
>
|
||
<template v-if="column.prop==='cover'" scope="{row}">
|
||
<el-popover
|
||
placement="top-start"
|
||
width="100"
|
||
trigger="hover">
|
||
<el-image
|
||
style="height: 100px;width: 100px"
|
||
:src="APP_DOMAIN+FILE_STREAM_PREVIEW_ADDRESS+'?id='+row.cover"
|
||
fit="cover">
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
<el-image
|
||
slot="reference"
|
||
style="height: 30px;width: 30px"
|
||
:src="APP_DOMAIN+FILE_STREAM_PREVIEW_ADDRESS+'?id='+row.cover"
|
||
fit="cover">
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
</el-popover>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" header-align="center" label="操作" width="250">
|
||
<template scope="{row}">
|
||
<el-button size="small" @click="openView(row)">查看</el-button>
|
||
<el-button size="small" type="primary" @click="openEdit(row)">编辑</el-button>
|
||
<el-button size="small" type="danger" @click="doDelete(row.id)">删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!--#include("/layouts/pagination.html"){}#-->
|
||
</el-card>
|
||
|
||
<template #edit>
|
||
<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px"
|
||
>
|
||
<el-form-item label="专辑标题" prop="title">
|
||
<el-input v-model="formData.title" maxlength="30"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="专辑类型" prop="typeId">
|
||
<el-select v-model="formData.typeId">
|
||
<el-option v-for="item in videoTypeList" :label="item.typeName"
|
||
:value="item.id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="专辑简介" prop="description">
|
||
<!-- <el-input type="textarea" :rows="3" v-model="formData.description"></el-input>-->
|
||
<div id="descriptionEditor"></div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="封面图片" prop="cover">
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
:action="FILE_UPLOAD_ADDRESS"
|
||
:show-file-list="false"
|
||
:on-success="handleAvatarSuccess"
|
||
:before-upload="beforeAvatarUpload">
|
||
<img v-if="formData.cover"
|
||
:src="APP_DOMAIN+FILE_STREAM_PREVIEW_ADDRESS+'?id='+formData.cover"
|
||
class="avatar">
|
||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item class="text-right">
|
||
<el-button type="primary" @click="doHandle">确定</el-button>
|
||
<el-button @click="$refs.guava.index()">取消</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
|
||
<template #view>
|
||
<el-form label-width="100px" label-suffix="：">
|
||
<el-form-item label="专辑标题">
|
||
<span>
|
||
{{viewData.title}}
|
||
</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="专辑类型">
|
||
<span>{{viewData.typeName}}</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="专辑简介">
|
||
<div v-html="viewData.description" class="descriptionContainer"></div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="封面图片" prop="cover">
|
||
<file-upload :files="viewFiles" view></file-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
|
||
</guava>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
|
||
<!--#include("/platform/trainEdu/include/include.js"){}#-->
|
||
|
||
let descriptionEditor = null
|
||
|
||
var vue = new Vue({
|
||
el: '#app',
|
||
mixins: [initTableMixins],
|
||
data() {
|
||
return {
|
||
viewFiles: [],
|
||
pageForm: {
|
||
searchName: 'tea.title'
|
||
},
|
||
formData: {
|
||
cover: null,
|
||
title: null,
|
||
description: null,
|
||
typeId: null
|
||
},
|
||
tableColumns: [
|
||
{prop: 'title', label: '标题'},
|
||
{prop: 'cover', label: '封面'},
|
||
{prop: 'videoCount', label: '视频数量'},
|
||
{prop: 'typeName', label: '专辑类型'},
|
||
],
|
||
rules: {
|
||
title: [{required: true, message: '请输入标题', trigger: ['change', 'blur']}],
|
||
description: [{required: true, message: '请输入简介', trigger: ['change', 'blur']}],
|
||
cover: [{required: true, message: '请上传封面图片', trigger: ['change', 'blur']}],
|
||
typeId: [{required: true, message: '请选择专辑类型', trigger: ['change', 'blur']}],
|
||
},
|
||
videoTypeList: [],
|
||
viewData: {}
|
||
}
|
||
},
|
||
methods: {
|
||
openAdd() {
|
||
this.$refs['guava'].edit()
|
||
this.$refs['ruleForm'].resetFields()
|
||
this.formData.id = undefined
|
||
this.$nextTick(() => {
|
||
$("#descriptionEditor").html("")
|
||
descriptionEditor = new wangEditor("#descriptionEditor")
|
||
descriptionEditor.config.onchange = (html) => {
|
||
this.formData.description = html
|
||
}
|
||
descriptionEditor.config.uploadImgShowBase64 = true
|
||
descriptionEditor.create()
|
||
descriptionEditor.txt.html()
|
||
})
|
||
},
|
||
async handleAvatarSuccess(res, file) {
|
||
this.$set(this.formData, 'cover', res.data.id)
|
||
await this.$refs['ruleForm'].validate()
|
||
},
|
||
beforeAvatarUpload(file) {
|
||
const allow = ['image/jpeg', 'image/png']
|
||
if (!allow.includes(file.type)) {
|
||
this.$message.error('上传头像图片只能是 JPG、PNG 格式!')
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
async doHandle() {
|
||
const valid = await this.$refs['ruleForm'].validate()
|
||
if (valid) {
|
||
const methodName = typeof this.formData.id === 'undefined' ? '/doAdd' : '/doEdit'
|
||
const resp = await $.post(loc() + methodName, this.formData)
|
||
if (resp.code === 0) {
|
||
this.notifySuccess(resp.msg)
|
||
this.doSearch()
|
||
this.$refs['guava'].index()
|
||
} else {
|
||
this.notifyError(resp.msg)
|
||
}
|
||
}
|
||
},
|
||
openView(row) {
|
||
this.viewData = {...row}
|
||
this.viewFiles = [{id: row.cover, filename: row.cover + '.jpg'}]
|
||
this.$refs.guava.view()
|
||
},
|
||
openEdit(row) {
|
||
this.$refs['guava'].edit()
|
||
this.formData = JSON.parse(JSON.stringify(row))
|
||
this.$nextTick(() => {
|
||
$("#descriptionEditor").html("")
|
||
descriptionEditor = new wangEditor("#descriptionEditor")
|
||
descriptionEditor.config.onchange = (html) => {
|
||
this.formData.description = html
|
||
}
|
||
descriptionEditor.config.uploadImgShowBase64 = true
|
||
descriptionEditor.create()
|
||
descriptionEditor.txt.html(row.description)
|
||
})
|
||
},
|
||
async doDelete(id) {
|
||
const confirm = await this.$confirm('确定删除吗?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
if (confirm === 'confirm') {
|
||
const resp = await $.post(loc() + '/doDelete', {id})
|
||
if (resp.code === 0) {
|
||
this.$notify.success(resp.msg)
|
||
this.doSearch()
|
||
}
|
||
}
|
||
},
|
||
},
|
||
async created() {
|
||
this.videoTypeList = await getVideoType()
|
||
this.pageData()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<!--#
|
||
}
|
||
#--> |