|
|
@@ -1,6 +1,53 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
|
|
|
+ <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form-item label="视频名称" prop="videoName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.videoName"
|
|
|
+ placeholder="请输入视频名称"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分类" prop="category">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.category"
|
|
|
+ placeholder="请输入分类"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.remark"
|
|
|
+ placeholder="请输入备注"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="可见公司" prop="companyId">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.companyId"
|
|
|
+ placeholder="请选择可见公司"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ style="width: 200px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="company in allCompanyOptions"
|
|
|
+ :key="company.companyId"
|
|
|
+ :label="company.companyName"
|
|
|
+ :value="company.companyId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" 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>
|
|
|
+
|
|
|
<el-row :gutter="10" class="mb8">
|
|
|
<el-col :span="1.5">
|
|
|
<el-button
|
|
|
@@ -23,13 +70,26 @@
|
|
|
v-hasPermi="['live:liveVideo:remove']"
|
|
|
>删除</el-button>
|
|
|
</el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ plain
|
|
|
+ icon="el-icon-edit"
|
|
|
+ size="mini"
|
|
|
+ :disabled="multiple"
|
|
|
+ @click="handleBatchUpdateCategory"
|
|
|
+ >批量修改分类</el-button>
|
|
|
+ </el-col>
|
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
</el-row>
|
|
|
|
|
|
<el-table border v-loading="loading" :data="liveVideoList" @selection-change="handleSelectionChange">
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
<el-table-column label="编号" align="center" prop="videoId" />
|
|
|
- <el-table-column label="视频名称" align="center" prop="remark" />
|
|
|
+ <el-table-column label="视频名称" align="center" prop="videoName" />
|
|
|
+ <el-table-column label="分类" align="center" prop="category" />
|
|
|
+ <el-table-column label="排序" align="center" prop="sort" />
|
|
|
+ <el-table-column label="备注" align="center" prop="remark" />
|
|
|
<el-table-column label="视频地址" align="center" prop="videoUrl">
|
|
|
<template slot-scope="scope">
|
|
|
<video
|
|
|
@@ -49,8 +109,14 @@
|
|
|
<el-tag v-else>---</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
|
|
|
<template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="handleUpdateVideoInfo(scope.row)"
|
|
|
+ >修改</el-button>
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
type="text"
|
|
|
@@ -89,6 +155,18 @@
|
|
|
ref="videoUpload"
|
|
|
append-to-body
|
|
|
/>
|
|
|
+ <el-form-item label="视频名称" prop="videoName">
|
|
|
+ <el-input v-model="form.videoName" placeholder="请输入视频名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分类" prop="category">
|
|
|
+ <el-input v-model="form.category" placeholder="请输入分类" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排序" prop="sort">
|
|
|
+ <el-input-number v-model="form.sort" :min="0" placeholder="请输入排序号" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="公司列表" prop="companyIds">
|
|
|
<div style="margin-bottom: 10px;">
|
|
|
<el-button size="mini" type="text" @click="selectAllCompanies">全选</el-button>
|
|
|
@@ -122,11 +200,33 @@
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
|
|
|
+ <!-- 修改视频信息对话框 -->
|
|
|
+ <el-dialog title="修改视频信息" :visible.sync="editVideoInfoDialog" width="800px" append-to-body>
|
|
|
+ <el-form ref="editVideoInfoForm" :model="editVideoInfoForm" label-width="120px">
|
|
|
+ <el-form-item label="视频名称" prop="videoName">
|
|
|
+ <el-input v-model="editVideoInfoForm.videoName" placeholder="请输入视频名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分类" prop="category">
|
|
|
+ <el-input v-model="editVideoInfoForm.category" placeholder="请输入分类" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排序" prop="sort">
|
|
|
+ <el-input-number v-model="editVideoInfoForm.sort" :min="0" placeholder="请输入排序号" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="editVideoInfoForm.remark" type="textarea" placeholder="请输入备注" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitEditVideoInfo">确 定</el-button>
|
|
|
+ <el-button @click="cancelEditVideoInfo">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
<!-- 修改公司范围对话框 -->
|
|
|
<el-dialog title="修改公司范围" :visible.sync="editCompanyIdsDialog" width="800px" append-to-body>
|
|
|
<el-form ref="editCompanyIdsForm" :model="editCompanyIdsForm" label-width="120px">
|
|
|
<el-form-item label="视频名称">
|
|
|
- <el-input v-model="editCompanyIdsForm.remark" :disabled="true" />
|
|
|
+ <el-input v-model="editCompanyIdsForm.videoName" :disabled="true" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="公司列表" prop="companyIds">
|
|
|
<div style="margin-bottom: 10px;">
|
|
|
@@ -160,11 +260,24 @@
|
|
|
<el-button @click="cancelEditCompanyIds">取 消</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <!-- 批量修改分类对话框 -->
|
|
|
+ <el-dialog title="批量修改分类" :visible.sync="batchUpdateCategoryDialog" width="500px" append-to-body>
|
|
|
+ <el-form ref="batchUpdateCategoryForm" :model="batchUpdateCategoryForm" label-width="100px">
|
|
|
+ <el-form-item label="分类" prop="category">
|
|
|
+ <el-input v-model="batchUpdateCategoryForm.category" placeholder="请输入分类" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitBatchUpdateCategory">确 定</el-button>
|
|
|
+ <el-button @click="cancelBatchUpdateCategory">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { listLiveVideo, getLiveVideo, delLiveVideo, addLiveVideo, updateLiveVideo, exportLiveVideo } from "@/api/live/liveVideo";
|
|
|
+import { listLiveVideo, getLiveVideo, delLiveVideo, addLiveVideo, updateLiveVideo, exportLiveVideo, batchUpdateCategory } from "@/api/live/liveVideo";
|
|
|
import { getCompanyList } from "@/api/company/company";
|
|
|
import LiveVideoUpload from "@/components/LiveVideoUpload/index.vue";
|
|
|
|
|
|
@@ -203,6 +316,10 @@ export default {
|
|
|
videoUrl: null,
|
|
|
videoType: -1,
|
|
|
sort: null,
|
|
|
+ videoName: null,
|
|
|
+ remark: null,
|
|
|
+ category: null,
|
|
|
+ companyId: null,
|
|
|
},
|
|
|
// 表单参数
|
|
|
form: {
|
|
|
@@ -215,14 +332,30 @@ export default {
|
|
|
rules: {
|
|
|
},
|
|
|
isPrivate:null,
|
|
|
+ // 是否显示修改视频信息对话框
|
|
|
+ editVideoInfoDialog: false,
|
|
|
+ // 修改视频信息表单
|
|
|
+ editVideoInfoForm: {
|
|
|
+ videoId: null,
|
|
|
+ videoName: '',
|
|
|
+ category: '',
|
|
|
+ sort: null,
|
|
|
+ remark: ''
|
|
|
+ },
|
|
|
// 是否显示修改公司范围对话框
|
|
|
editCompanyIdsDialog: false,
|
|
|
// 修改公司范围表单
|
|
|
editCompanyIdsForm: {
|
|
|
videoId: null,
|
|
|
- remark: '',
|
|
|
+ videoName: '',
|
|
|
companyIds: []
|
|
|
},
|
|
|
+ // 是否显示批量修改分类对话框
|
|
|
+ batchUpdateCategoryDialog: false,
|
|
|
+ // 批量修改分类表单
|
|
|
+ batchUpdateCategoryForm: {
|
|
|
+ category: ''
|
|
|
+ },
|
|
|
// 所有公司选项(用于下拉选择)
|
|
|
allCompanyOptions: [],
|
|
|
// 公司选项加载状态
|
|
|
@@ -233,6 +366,9 @@ export default {
|
|
|
this.getList();
|
|
|
this.getAllCompanyOptions();
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.getAllCompanyOptions();
|
|
|
+ },
|
|
|
methods: {
|
|
|
handleVideoDuration(duration) {
|
|
|
this.form.duration = duration;
|
|
|
@@ -283,6 +419,8 @@ export default {
|
|
|
liveId: null,
|
|
|
videoUrl: null,
|
|
|
videoType: null,
|
|
|
+ videoName: null,
|
|
|
+ category: null,
|
|
|
sort: null,
|
|
|
createTime: null,
|
|
|
createBy: null,
|
|
|
@@ -303,7 +441,18 @@ export default {
|
|
|
},
|
|
|
/** 重置按钮操作 */
|
|
|
resetQuery() {
|
|
|
- this.resetForm("queryForm");
|
|
|
+ this.queryParams = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ liveId: -1,
|
|
|
+ videoUrl: null,
|
|
|
+ videoType: -1,
|
|
|
+ sort: null,
|
|
|
+ videoName: null,
|
|
|
+ remark: null,
|
|
|
+ category: null,
|
|
|
+ companyId: null,
|
|
|
+ };
|
|
|
this.handleQuery();
|
|
|
},
|
|
|
// 多选框选中数据
|
|
|
@@ -389,6 +538,57 @@ export default {
|
|
|
const selectedIds = this.editCompanyIdsForm.companyIds || [];
|
|
|
this.editCompanyIdsForm.companyIds = allIds.filter(id => !selectedIds.includes(id));
|
|
|
},
|
|
|
+ /** 打开修改视频信息对话框 */
|
|
|
+ handleUpdateVideoInfo(row) {
|
|
|
+ const videoId = row.videoId;
|
|
|
+ getLiveVideo(videoId).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.editVideoInfoForm = {
|
|
|
+ videoId: response.data.videoId,
|
|
|
+ videoName: response.data.videoName || '',
|
|
|
+ category: response.data.category || '',
|
|
|
+ sort: response.data.sort || null,
|
|
|
+ remark: response.data.remark || ''
|
|
|
+ };
|
|
|
+ this.editVideoInfoDialog = true;
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.msgError("获取数据失败");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 取消修改视频信息 */
|
|
|
+ cancelEditVideoInfo() {
|
|
|
+ this.editVideoInfoDialog = false;
|
|
|
+ this.editVideoInfoForm = {
|
|
|
+ videoId: null,
|
|
|
+ videoName: '',
|
|
|
+ category: '',
|
|
|
+ sort: null,
|
|
|
+ remark: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ /** 提交修改视频信息 */
|
|
|
+ submitEditVideoInfo() {
|
|
|
+ const data = {
|
|
|
+ videoId: this.editVideoInfoForm.videoId,
|
|
|
+ videoName: this.editVideoInfoForm.videoName,
|
|
|
+ category: this.editVideoInfoForm.category,
|
|
|
+ sort: this.editVideoInfoForm.sort,
|
|
|
+ remark: this.editVideoInfoForm.remark
|
|
|
+ };
|
|
|
+
|
|
|
+ updateLiveVideo(data).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.editVideoInfoDialog = false;
|
|
|
+ this.getList();
|
|
|
+ } else {
|
|
|
+ this.msgError(response.msg || "修改失败");
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.msgError("修改失败");
|
|
|
+ });
|
|
|
+ },
|
|
|
/** 打开修改公司范围对话框 */
|
|
|
handleUpdateCompanyIds(row) {
|
|
|
const videoId = row.videoId;
|
|
|
@@ -396,7 +596,7 @@ export default {
|
|
|
if (response.code === 200) {
|
|
|
this.editCompanyIdsForm = {
|
|
|
videoId: response.data.videoId,
|
|
|
- remark: response.data.remark || '',
|
|
|
+ videoName: response.data.videoName || '',
|
|
|
companyIds: []
|
|
|
};
|
|
|
|
|
|
@@ -422,7 +622,7 @@ export default {
|
|
|
this.editCompanyIdsDialog = false;
|
|
|
this.editCompanyIdsForm = {
|
|
|
videoId: null,
|
|
|
- remark: '',
|
|
|
+ videoName: '',
|
|
|
companyIds: []
|
|
|
};
|
|
|
},
|
|
|
@@ -453,7 +653,12 @@ export default {
|
|
|
if (valid) {
|
|
|
this.form.videoType = -1;
|
|
|
this.form.liveId = -1;
|
|
|
- this.form.remark = this.form.fileName;
|
|
|
+ if (!this.form.videoName) {
|
|
|
+ this.form.videoName = this.form.fileName;
|
|
|
+ }
|
|
|
+ if (!this.form.remark) {
|
|
|
+ this.form.remark = this.form.fileName;
|
|
|
+ }
|
|
|
if(this.form.videoUrl == null || this.form.videoUrl == "") {
|
|
|
this.msgError("请上传视频");
|
|
|
return;
|
|
|
@@ -515,6 +720,39 @@ export default {
|
|
|
this.download(response.msg);
|
|
|
this.exportLoading = false;
|
|
|
}).catch(() => {});
|
|
|
+ },
|
|
|
+ /** 批量修改分类 */
|
|
|
+ handleBatchUpdateCategory() {
|
|
|
+ if (this.ids.length === 0) {
|
|
|
+ this.msgWarning("请选择要修改的视频");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.batchUpdateCategoryForm.category = '';
|
|
|
+ this.batchUpdateCategoryDialog = true;
|
|
|
+ },
|
|
|
+ /** 取消批量修改分类 */
|
|
|
+ cancelBatchUpdateCategory() {
|
|
|
+ this.batchUpdateCategoryDialog = false;
|
|
|
+ this.batchUpdateCategoryForm.category = '';
|
|
|
+ },
|
|
|
+ /** 提交批量修改分类 */
|
|
|
+ submitBatchUpdateCategory() {
|
|
|
+ const data = {
|
|
|
+ videoIds: this.ids,
|
|
|
+ category: this.batchUpdateCategoryForm.category
|
|
|
+ };
|
|
|
+
|
|
|
+ batchUpdateCategory(data).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("批量修改成功");
|
|
|
+ this.batchUpdateCategoryDialog = false;
|
|
|
+ this.getList();
|
|
|
+ } else {
|
|
|
+ this.msgError(response.msg || "批量修改失败");
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.msgError("批量修改失败");
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
};
|