Browse Source

修改直播视频添加字段搜索条件

yuhongqi 2 weeks ago
parent
commit
34bd41dade
2 changed files with 256 additions and 9 deletions
  1. 9 0
      src/api/live/liveVideo.js
  2. 247 9
      src/views/live/liveVideo/index.vue

+ 9 - 0
src/api/live/liveVideo.js

@@ -66,3 +66,12 @@ export function getLiveVideoByLiveIdAndType(liveId) {
     method: 'get'
   })
 }
+
+// 批量修改视频分类
+export function batchUpdateCategory(data) {
+  return request({
+    url: '/live/liveVideo/batchUpdateCategory',
+    method: 'put',
+    data: data
+  })
+}

+ 247 - 9
src/views/live/liveVideo/index.vue

@@ -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("批量修改失败");
+      });
     }
   }
 };