添加排序功能
This commit is contained in:
huangdeliang
@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="关键词" prop="key">
|
||||
<el-input
|
||||
v-model.trim="queryParams.key"
|
||||
@ -16,12 +22,12 @@
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<el-option key="0" label="不展示" value="0"/>
|
||||
<el-option key="1" label="展示" value="1"/>
|
||||
<el-option key="0" label="不展示" value="0" />
|
||||
<el-option key="1" label="展示" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="视频类别" prop="cateId">
|
||||
<!-- <el-select v-model="queryParams.cateId" clearable filterable placeholder="请选择类别">
|
||||
<el-form-item label="视频类别" prop="cateId">
|
||||
<!-- <el-select v-model="queryParams.cateId" clearable filterable placeholder="请选择类别">
|
||||
<el-option
|
||||
v-for="classify in classifyList"
|
||||
:key="classify.id"
|
||||
@ -29,28 +35,41 @@
|
||||
:value="classify.id"
|
||||
/>
|
||||
</el-select>-->
|
||||
<treeselect
|
||||
v-model="queryParams.cateId"
|
||||
:options="classifyList"
|
||||
:normalizer="normalizer"
|
||||
:show-count="true"
|
||||
placeholder="选择分类"
|
||||
style="width:200px"
|
||||
/>
|
||||
<treeselect
|
||||
v-model="queryParams.cateId"
|
||||
:options="classifyList"
|
||||
:normalizer="normalizer"
|
||||
:show-count="true"
|
||||
placeholder="选择分类"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="视频权限" prop="payLevel">
|
||||
<el-select v-model="queryParams.payLevel" clearable filterable placeholder="请选择权限">
|
||||
<el-option
|
||||
v-for="dict in payVideoLevelList"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="parseInt(dict.dictValue)"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-select
|
||||
v-model="queryParams.payLevel"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择权限"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in payVideoLevelList"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="parseInt(dict.dictValue)"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
<el-button
|
||||
type="cyan"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
@ -62,7 +81,8 @@
|
||||
size="mini"
|
||||
@click="clickUploadVideo"
|
||||
v-hasPermi="['custom:nutritionalVideo:add']"
|
||||
>视频上传</el-button>
|
||||
>视频上传</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
@ -72,7 +92,8 @@
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['custom:nutritionalVideo:edit']"
|
||||
>修改</el-button>
|
||||
>修改</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
@ -82,7 +103,8 @@
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['custom:nutritionalVideo:remove']"
|
||||
>删除</el-button>
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
@ -91,7 +113,8 @@
|
||||
icon="el-icon-menu"
|
||||
@click="handleVideoClassify"
|
||||
v-hasPermi="['custom:videoClassify:list']"
|
||||
>视频分类管理</el-button>
|
||||
>视频分类管理</el-button
|
||||
>
|
||||
</el-col>
|
||||
<!--
|
||||
<el-col :span="1.5">
|
||||
@ -103,48 +126,80 @@
|
||||
v-hasPermi="['custom:nutritionalVideo:export']"
|
||||
>导出</el-button>
|
||||
</el-col>-->
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="nutritionalVideoList" @selection-change="handleSelectionChange">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="nutritionalVideoList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<!--<el-table-column label="视频分类ID" align="center" prop="cateId" />-->
|
||||
<el-table-column label="封面" align="center" prop="coverUrl" width="300">
|
||||
<template slot-scope="scope">
|
||||
<el-image
|
||||
style="width: 300px; height: 200px"
|
||||
:src="scope.row.coverUrl"
|
||||
:preview-src-list="coverImageList">
|
||||
style="width: 300px; height: 200px"
|
||||
:src="scope.row.coverUrl"
|
||||
:preview-src-list="coverImageList"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="标题" align="center" prop="title" width="200">
|
||||
<template slot-scope="scope" >
|
||||
<AutoHideMessage :data="scope.row.title == null ? '' : (scope.row.title+'')" :maxLength="20"></AutoHideMessage>
|
||||
<template slot-scope="scope">
|
||||
<AutoHideMessage
|
||||
:data="scope.row.title == null ? '' : scope.row.title + ''"
|
||||
:maxLength="20"
|
||||
></AutoHideMessage>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="描述" align="center" prop="description" >
|
||||
<template slot-scope="scope" >
|
||||
<AutoHideMessage :data="scope.row.description == null ? '' : (scope.row.description+'')" :maxLength="100"></AutoHideMessage>
|
||||
<el-table-column label="描述" align="center" prop="description">
|
||||
<template slot-scope="scope">
|
||||
<AutoHideMessage
|
||||
:data="
|
||||
scope.row.description == null ? '' : scope.row.description + ''
|
||||
"
|
||||
:maxLength="100"
|
||||
></AutoHideMessage>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--<el-table-column label="标签" align="center" prop="tags" width="100"/>-->
|
||||
<el-table-column label="分类" align="center" prop="cateName" width="100"/>
|
||||
<el-table-column label="权限等级" align="center" prop="payLevelName" width="100"/>
|
||||
<el-table-column label="展示状态" align="center" prop="showFlag" width="200">
|
||||
<template slot-scope="scope" >
|
||||
<el-table-column
|
||||
label="分类"
|
||||
align="center"
|
||||
prop="cateName"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
label="权限等级"
|
||||
align="center"
|
||||
prop="payLevelName"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
label="展示状态"
|
||||
align="center"
|
||||
prop="showFlag"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.wxShow"
|
||||
active-text="展示"
|
||||
inactive-text="不展示"
|
||||
@change="handleWxShow($event, scope.row)"
|
||||
>
|
||||
</el-switch>
|
||||
v-model="scope.row.wxShow"
|
||||
active-text="展示"
|
||||
inactive-text="不展示"
|
||||
@change="handleWxShow($event, scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" >
|
||||
<el-table-column label="创建时间" align="center" prop="createTime">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}") }}</span>
|
||||
<span>{{
|
||||
parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}")
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
@ -155,33 +210,34 @@
|
||||
icon="el-icon-edit"
|
||||
@click="getVideoPlayUrl(scope.row.id)"
|
||||
v-hasPermi="['custom:nutritionalVideo:query']"
|
||||
>播放</el-button>
|
||||
>播放</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['custom:nutritionalVideo:edit']"
|
||||
>修改</el-button>
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['custom:nutritionalVideo:remove']"
|
||||
>删除</el-button>
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:pageSizes="[5,10,15,20]"
|
||||
:pageSizes="[5, 10, 15, 20]"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
@ -189,27 +245,27 @@
|
||||
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="视频标题" prop="title">
|
||||
<el-input
|
||||
type="textarea"
|
||||
placeholder="请输入视频标题"
|
||||
v-model="form.title"
|
||||
maxlength="50"
|
||||
rows="1"
|
||||
show-word-limit
|
||||
/>
|
||||
<el-input
|
||||
type="textarea"
|
||||
placeholder="请输入视频标题"
|
||||
v-model="form.title"
|
||||
maxlength="50"
|
||||
rows="1"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="视频描述" prop="description">
|
||||
<el-input
|
||||
type="textarea"
|
||||
placeholder="请输入视频描述"
|
||||
v-model="form.description"
|
||||
maxlength="1000"
|
||||
rows="2"
|
||||
show-word-limit
|
||||
/>
|
||||
type="textarea"
|
||||
placeholder="请输入视频描述"
|
||||
v-model="form.description"
|
||||
maxlength="1000"
|
||||
rows="2"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="display:flex">
|
||||
<el-form-item label="视频类别" prop="cateId" style="width:300px">
|
||||
<div style="display: flex">
|
||||
<el-form-item label="视频类别" prop="cateId" style="width: 300px">
|
||||
<!--<el-select v-model="form.cateId" clearable filterable placeholder="请选择类别">
|
||||
<el-option
|
||||
v-for="classify in classifyList"
|
||||
@ -219,16 +275,25 @@
|
||||
/>
|
||||
</el-select>-->
|
||||
<treeselect
|
||||
v-model="form.cateId"
|
||||
:options="classifyList"
|
||||
:normalizer="normalizer"
|
||||
:show-count="true"
|
||||
placeholder="选择分类"
|
||||
style="width:200px"
|
||||
/>
|
||||
v-model="form.cateId"
|
||||
:options="classifyList"
|
||||
:normalizer="normalizer"
|
||||
:show-count="true"
|
||||
placeholder="选择分类"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="视频权限" prop="payLevel" style="margin-left:40px">
|
||||
<el-select v-model="form.payLevel" clearable filterable placeholder="请选择权限">
|
||||
<el-form-item
|
||||
label="视频权限"
|
||||
prop="payLevel"
|
||||
style="margin-left: 40px"
|
||||
>
|
||||
<el-select
|
||||
v-model="form.payLevel"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择权限"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in payVideoLevelList"
|
||||
:key="dict.dictValue"
|
||||
@ -237,21 +302,41 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="视频封面" prop="coverUrl">
|
||||
<UploadFile ref="uploadFile" v-if="open" :prefix="'videoCover'" :coverUrl="form.previewUrl" @callbackMethod="handleCoverUrl" :tips="''"></UploadFile>
|
||||
<el-button type="primary" size="small" icon="el-icon-film" @click="selectVideoCover" title="上传视频之后选择视频截图作为封面">选择封面</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="展示状态" prop="wxShow">
|
||||
<el-switch
|
||||
v-model="form.wxShow"
|
||||
active-text="展示"
|
||||
inactive-text="不展示">
|
||||
</el-switch>
|
||||
<div style="color:red">提示：开启展示之后客户可看到该视频，请保证内容正确再展示</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="视频封面" prop="coverUrl">
|
||||
<UploadFile
|
||||
ref="uploadFile"
|
||||
v-if="open"
|
||||
:prefix="'videoCover'"
|
||||
:coverUrl="form.previewUrl"
|
||||
@callbackMethod="handleCoverUrl"
|
||||
:tips="''"
|
||||
></UploadFile>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-film"
|
||||
@click="selectVideoCover"
|
||||
title="上传视频之后选择视频截图作为封面"
|
||||
>选择封面</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="priorityLevel">
|
||||
<el-input-number v-model="form.priorityLevel" :step="1" size="small" />
|
||||
</el-form-item>
|
||||
<el-form-item label="展示状态" prop="wxShow">
|
||||
<el-switch
|
||||
v-model="form.wxShow"
|
||||
active-text="展示"
|
||||
inactive-text="不展示"
|
||||
>
|
||||
</el-switch>
|
||||
<div style="color: red">
|
||||
提示：开启展示之后客户可看到该视频，请保证内容正确再展示
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
@ -261,281 +346,309 @@
|
||||
<UploadVideo ref="uploadVideoRef"></UploadVideo>
|
||||
|
||||
<!-- 视频分类管理 -->
|
||||
<el-dialog title="视频分类列表" :visible.sync="videoClassifyOpen" width="800px" append-to-body @closed="getAllVideoClassify();">
|
||||
<el-dialog
|
||||
title="视频分类列表"
|
||||
:visible.sync="videoClassifyOpen"
|
||||
width="800px"
|
||||
append-to-body
|
||||
@closed="getAllVideoClassify()"
|
||||
>
|
||||
<div style="height: 500px; overflow: auto">
|
||||
<VideoClassify ref="videoClassifyRef"></VideoClassify>
|
||||
<VideoClassify ref="videoClassifyRef"></VideoClassify>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 手动选择封面 -->
|
||||
<VideoSelectCover ref="videoSelectCoverRef"></VideoSelectCover>
|
||||
<VideoSelectCover ref="videoSelectCoverRef"></VideoSelectCover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listNutritionalVideo, getNutritionalVideo, delNutritionalVideo, addNutritionalVideo, updateNutritionalVideo, exportNutritionalVideo, updateWxShow,getVideoPlayUrlById } from "@/api/custom/nutritionalVideo";
|
||||
import {getAllClassify } from "@/api/custom/videoClassify";
|
||||
import UploadVideo from "@/components/UploadVideo";
|
||||
import UploadFile from "@/components/FileUpload/UploadFile";
|
||||
import VideoClassify from "../videoClassify";
|
||||
import AutoHideMessage from "@/components/AutoHideMessage";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import IconSelect from "@/components/IconSelect";
|
||||
import VideoSelectCover from "@/components/VideoSelectCover";
|
||||
export default {
|
||||
name: "NutritionalVideo",
|
||||
data() {
|
||||
import {
|
||||
listNutritionalVideo,
|
||||
getNutritionalVideo,
|
||||
delNutritionalVideo,
|
||||
addNutritionalVideo,
|
||||
updateNutritionalVideo,
|
||||
exportNutritionalVideo,
|
||||
updateWxShow,
|
||||
getVideoPlayUrlById,
|
||||
} from "@/api/custom/nutritionalVideo";
|
||||
import { getAllClassify } from "@/api/custom/videoClassify";
|
||||
import UploadVideo from "@/components/UploadVideo";
|
||||
import UploadFile from "@/components/FileUpload/UploadFile";
|
||||
import VideoClassify from "../videoClassify";
|
||||
import AutoHideMessage from "@/components/AutoHideMessage";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import IconSelect from "@/components/IconSelect";
|
||||
import VideoSelectCover from "@/components/VideoSelectCover";
|
||||
export default {
|
||||
name: "NutritionalVideo",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 营养视频表格数据
|
||||
nutritionalVideoList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
key: null,
|
||||
showFlag: null,
|
||||
cateId: null,
|
||||
payLevel: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
|
||||
cateId: [
|
||||
{ required: true, message: "视频类别不能为空", trigger: "blur" },
|
||||
],
|
||||
payLevel: [
|
||||
{ required: true, message: "视频权限不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
coverImageList: [],
|
||||
//分类列表
|
||||
classifyList: [],
|
||||
//所有分类
|
||||
allClassifyList: [],
|
||||
//权限等级列表
|
||||
payVideoLevelList: [],
|
||||
//视频分类弹窗显示标识
|
||||
videoClassifyOpen: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getAllVideoClassify();
|
||||
this.getDicts("video_pay_level").then((response) => {
|
||||
this.payVideoLevelList = response.data;
|
||||
});
|
||||
},
|
||||
components: {
|
||||
UploadVideo,
|
||||
UploadFile,
|
||||
VideoClassify,
|
||||
AutoHideMessage,
|
||||
Treeselect,
|
||||
IconSelect,
|
||||
VideoSelectCover,
|
||||
},
|
||||
methods: {
|
||||
/** 查询营养视频列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listNutritionalVideo(this.queryParams).then((response) => {
|
||||
response.rows.forEach((element) => {
|
||||
element.wxShow = element.showFlag == 1 ? true : false;
|
||||
});
|
||||
this.nutritionalVideoList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//获取所有分类
|
||||
getAllVideoClassify() {
|
||||
getAllClassify().then((response) => {
|
||||
if (response.code == 200) {
|
||||
this.allClassifyList = response.data;
|
||||
this.classifyList = [];
|
||||
const classify = { id: 0, cateName: "主分类", children: [] };
|
||||
classify.children = this.handleTree(response.data, "id");
|
||||
this.classifyList.push(classify);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
videoId: null,
|
||||
cateId: null,
|
||||
coverUrl: null,
|
||||
title: null,
|
||||
description: null,
|
||||
tags: null,
|
||||
payLevel: null,
|
||||
showFlag: null,
|
||||
wxShow: false,
|
||||
previewUrl: null,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
selectVideoCover() {
|
||||
this.$refs.videoSelectCoverRef.showDialog(this.form, (url) => {
|
||||
//console.log(url);
|
||||
this.form.previewUrl = url;
|
||||
this.form.coverUrl = url;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.id);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
clickUploadVideo() {
|
||||
this.$refs.uploadVideoRef.showDialog(this.allClassifyList, () => {
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
handleVideoClassify() {
|
||||
this.videoClassifyOpen = true;
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加营养视频";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids;
|
||||
getNutritionalVideo(id).then((response) => {
|
||||
response.data.wxShow = response.data.showFlag == 1 ? true : false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改营养视频";
|
||||
});
|
||||
},
|
||||
//获取播放地址
|
||||
getVideoPlayUrl(id) {
|
||||
getVideoPlayUrlById(id).then((response) => {
|
||||
let url = response.data.playUrl;
|
||||
if (url != undefined && url != null) {
|
||||
window.open(url, "_blank");
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 转换菜单数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 营养视频表格数据
|
||||
nutritionalVideoList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
key: null,
|
||||
showFlag: null,
|
||||
cateId: null,
|
||||
payLevel: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "标题不能为空", trigger: "blur" },
|
||||
],
|
||||
cateId:[
|
||||
{ required: true, message: "视频类别不能为空", trigger: "blur" },
|
||||
],
|
||||
payLevel:[
|
||||
{ required: true, message: "视频权限不能为空", trigger: "blur" },
|
||||
]
|
||||
},
|
||||
coverImageList:[],
|
||||
//分类列表
|
||||
classifyList:[],
|
||||
//所有分类
|
||||
allClassifyList:[],
|
||||
//权限等级列表
|
||||
payVideoLevelList:[],
|
||||
//视频分类弹窗显示标识
|
||||
videoClassifyOpen:false
|
||||
|
||||
id: node.id,
|
||||
label: node.cateName,
|
||||
children: node.children,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getAllVideoClassify();
|
||||
this.getDicts("video_pay_level").then((response) => {
|
||||
this.payVideoLevelList = response.data;
|
||||
});
|
||||
},
|
||||
components: {
|
||||
UploadVideo,UploadFile,VideoClassify,AutoHideMessage,Treeselect, IconSelect,VideoSelectCover
|
||||
},
|
||||
methods: {
|
||||
/** 查询营养视频列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listNutritionalVideo(this.queryParams).then(response => {
|
||||
response.rows.forEach(element => {
|
||||
element.wxShow = element.showFlag == 1 ? true : false;
|
||||
});
|
||||
this.nutritionalVideoList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//获取所有分类
|
||||
getAllVideoClassify(){
|
||||
getAllClassify().then(response => {
|
||||
if(response.code == 200){
|
||||
this.allClassifyList = response.data;
|
||||
this.classifyList = [];
|
||||
const classify = { id: 0, cateName: '主分类', children: [] };
|
||||
classify.children = this.handleTree(response.data, "id");
|
||||
this.classifyList.push(classify);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
videoId:null,
|
||||
cateId: null,
|
||||
coverUrl: null,
|
||||
title: null,
|
||||
description: null,
|
||||
tags: null,
|
||||
payLevel:null,
|
||||
showFlag: null,
|
||||
wxShow: false,
|
||||
previewUrl: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
selectVideoCover(){
|
||||
this.$refs.videoSelectCoverRef.showDialog(this.form,(url)=>{
|
||||
//console.log(url);
|
||||
this.form.previewUrl = url;
|
||||
this.form.coverUrl = url;
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.form.showFlag = this.form.wxShow ? 1 : 0;
|
||||
//视频分类不能选择主分类
|
||||
if (this.form.cateId == 0) {
|
||||
this.$message({
|
||||
message: "视频分类不能选择主分类",
|
||||
type: "warning",
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
clickUploadVideo(){
|
||||
this.$refs.uploadVideoRef.showDialog(this.allClassifyList, ()=>{
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
handleVideoClassify(){
|
||||
this.videoClassifyOpen = true;
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加营养视频";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getNutritionalVideo(id).then(response => {
|
||||
response.data.wxShow = response.data.showFlag == 1 ? true : false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改营养视频";
|
||||
});
|
||||
},
|
||||
//获取播放地址
|
||||
getVideoPlayUrl(id){
|
||||
getVideoPlayUrlById(id).then(response => {
|
||||
let url = response.data.playUrl;
|
||||
if(url != undefined && url != null){
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 转换菜单数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.cateName,
|
||||
children: node.children
|
||||
};
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.form.showFlag = this.form.wxShow ? 1 : 0;
|
||||
//视频分类不能选择主分类
|
||||
if(this.form.cateId == 0){
|
||||
this.$message({
|
||||
message: "视频分类不能选择主分类",
|
||||
type: "warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.form.id != null) {
|
||||
updateNutritionalVideo(this.form).then(response => {
|
||||
if (response.code === 200) {
|
||||
return;
|
||||
}
|
||||
if (this.form.id != null) {
|
||||
updateNutritionalVideo(this.form).then((response) => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
addNutritionalVideo(this.form).then(response => {
|
||||
if (response.code === 200) {
|
||||
} else {
|
||||
addNutritionalVideo(this.form).then((response) => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleWxShow(newWxshow, row){
|
||||
let param = {
|
||||
id: row.id,
|
||||
showFlag: newWxshow ? 1 : 0
|
||||
};
|
||||
updateWxShow(param);
|
||||
},
|
||||
handleCoverUrl(url){
|
||||
this.form.coverUrl = url;
|
||||
console.log(this.form.coverUrl);
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$confirm('是否确认删除营养视频编号为"' + ids + '"的数据项?', "警告", {
|
||||
}
|
||||
});
|
||||
},
|
||||
handleWxShow(newWxshow, row) {
|
||||
let param = {
|
||||
id: row.id,
|
||||
showFlag: newWxshow ? 1 : 0,
|
||||
};
|
||||
updateWxShow(param);
|
||||
},
|
||||
handleCoverUrl(url) {
|
||||
this.form.coverUrl = url;
|
||||
console.log(this.form.coverUrl);
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$confirm(
|
||||
'是否确认删除营养视频编号为"' + ids + '"的数据项?',
|
||||
"警告",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
type: "warning",
|
||||
}
|
||||
)
|
||||
.then(function () {
|
||||
return delNutritionalVideo(ids);
|
||||
}).then(() => {
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
}).catch(function() {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm('是否确认导出所有营养视频数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
this.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(function () {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm("是否确认导出所有营养视频数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(function () {
|
||||
return exportNutritionalVideo(queryParams);
|
||||
}).then(response => {
|
||||
})
|
||||
.then((response) => {
|
||||
this.download(response.msg);
|
||||
}).catch(function() {});
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
.catch(function () {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user