直播视频 添加可见公司范围字段

src/components/VideoUpload/index.vue

@@ -19,17 +19,17 @@
           <!-- 仅当showControl为true时显示视频库选取按钮 -->
           <el-button v-if="showControl" style="margin-left: 10px;" size="small" type="success" @click="openVideoLibrary">视频库选取</el-button>
           <!-- 线路一 -->
-          <div class="progress-container">
-            <span class="progress-label">线路一</span>
-            <el-progress
-              style="margin-top: 5px;"
-              class="progress"
-              :text-inside="true"
-              :stroke-width="18"
-              :percentage="txProgress"
-              status="success">
-            </el-progress>
-          </div>
+<!--          <div class="progress-container">-->
+<!--            <span class="progress-label">线路一</span>-->
+<!--            <el-progress-->
+<!--              style="margin-top: 5px;"-->
+<!--              class="progress"-->
+<!--              :text-inside="true"-->
+<!--              :stroke-width="18"-->
+<!--              :percentage="txProgress"-->
+<!--              status="success">-->
+<!--            </el-progress>-->
+<!--          </div>-->
 
           <!-- 线路二 -->
 <!--          <div class="progress-container">-->
@@ -44,7 +44,7 @@
 <!--            </el-progress>-->
 <!--          </div>-->
           <div slot="tip" class="el-upload__tip">只能上传mp4文件，且不超过500M</div>
-        </el-upload>
+<!--        </el-upload>-->
       </div>
     </el-form-item>
     <el-form-item label="视频播放">

src/views/live/liveVideo/index.vue

@@ -49,6 +49,16 @@
           <el-tag v-else>---</el-tag>
         </template>
       </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdateCompanyIds(scope.row)"
+          >修改公司范围</el-button>
+        </template>
+      </el-table-column>
     </el-table>
 
     <pagination
@@ -60,7 +70,7 @@
     />
 
     <!-- 添加或修改直播视频对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <live-video-upload
           :type = "1"
@@ -79,18 +89,83 @@
           ref="videoUpload"
           append-to-body
         />
-
+        <el-form-item label="公司列表" prop="companyIds">
+          <div style="margin-bottom: 10px;">
+            <el-button size="mini" type="text" @click="selectAllCompanies">全选</el-button>
+            <el-button size="mini" type="text" @click="unselectAllCompanies">全不选</el-button>
+            <el-button size="mini" type="text" @click="reverseSelectCompanies">反选</el-button>
+            <span style="margin-left: 20px; color: #909399; font-size: 12px;">
+              已选择 {{ form.companyIds ? form.companyIds.length : 0 }} 个公司
+            </span>
+          </div>
+          <el-select
+            v-model="form.companyIds"
+            multiple
+            filterable
+            placeholder="请选择公司"
+            style="width: 100%"
+            collapse-tags
+            :loading="companyOptionsLoading"
+          >
+            <el-option
+              v-for="company in allCompanyOptions"
+              :key="company.companyId"
+              :label="company.companyName"
+              :value="company.companyId"
+            />
+          </el-select>
+        </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>
       </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-form-item>
+        <el-form-item label="公司列表" prop="companyIds">
+          <div style="margin-bottom: 10px;">
+            <el-button size="mini" type="text" @click="selectAllCompaniesForEdit">全选</el-button>
+            <el-button size="mini" type="text" @click="unselectAllCompaniesForEdit">全不选</el-button>
+            <el-button size="mini" type="text" @click="reverseSelectCompaniesForEdit">反选</el-button>
+            <span style="margin-left: 20px; color: #909399; font-size: 12px;">
+              已选择 {{ editCompanyIdsForm.companyIds ? editCompanyIdsForm.companyIds.length : 0 }} 个公司
+            </span>
+          </div>
+          <el-select
+            v-model="editCompanyIdsForm.companyIds"
+            multiple
+            filterable
+            placeholder="请选择公司"
+            style="width: 100%"
+            collapse-tags
+            :loading="companyOptionsLoading"
+          >
+            <el-option
+              v-for="company in allCompanyOptions"
+              :key="company.companyId"
+              :label="company.companyName"
+              :value="company.companyId"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitEditCompanyIds">确 定</el-button>
+        <el-button @click="cancelEditCompanyIds">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { listLiveVideo, getLiveVideo, delLiveVideo, addLiveVideo, updateLiveVideo, exportLiveVideo } from "@/api/live/liveVideo";
+import { getCompanyList } from "@/api/company/company";
 import LiveVideoUpload from "@/components/LiveVideoUpload/index.vue";
 
 export default {
@@ -133,16 +208,30 @@ export default {
       form: {
         uploadType: 1,
         isTranscode:0,
-        transcodeFileKey:null
+        transcodeFileKey:null,
+        companyIds: []
       },
       // 表单校验
       rules: {
       },
       isPrivate:null,
+      // 是否显示修改公司范围对话框
+      editCompanyIdsDialog: false,
+      // 修改公司范围表单
+      editCompanyIdsForm: {
+        videoId: null,
+        remark: '',
+        companyIds: []
+      },
+      // 所有公司选项（用于下拉选择）
+      allCompanyOptions: [],
+      // 公司选项加载状态
+      companyOptionsLoading: false
     };
   },
   created() {
     this.getList();
+    this.getAllCompanyOptions();
   },
   methods: {
     handleVideoDuration(duration) {
@@ -199,7 +288,11 @@ export default {
         createBy: null,
         updateBy: null,
         updateTime: null,
-        remark: null
+        remark: null,
+        uploadType: 1,
+        isTranscode: 0,
+        transcodeFileKey: null,
+        companyIds: []
       };
       this.resetForm("form");
     },
@@ -235,10 +328,125 @@ export default {
       const videoId = row.videoId || this.ids
       getLiveVideo(videoId).then(response => {
         this.form = response.data;
+
+        // 处理companyIds，可能是字符串或数组
+        if (response.data.companyIds) {
+          if (typeof response.data.companyIds === 'string') {
+            this.form.companyIds = response.data.companyIds
+              ? response.data.companyIds.split(',').map(Number)
+              : [];
+          } else if (Array.isArray(response.data.companyIds)) {
+            this.form.companyIds = response.data.companyIds.map(Number);
+          }
+        } else {
+          this.form.companyIds = [];
+        }
+
         this.open = true;
         this.title = "修改直播视频";
       });
     },
+    /** 获取所有公司选项 */
+    getAllCompanyOptions() {
+      this.companyOptionsLoading = true;
+      getCompanyList().then(response => {
+        if (response.code === 200 && response.data) {
+          this.allCompanyOptions = response.data || [];
+        } else {
+          this.allCompanyOptions = [];
+        }
+        this.companyOptionsLoading = false;
+      }).catch(() => {
+        this.allCompanyOptions = [];
+        this.companyOptionsLoading = false;
+      });
+    },
+    /** 全选公司 */
+    selectAllCompanies() {
+      this.form.companyIds = this.allCompanyOptions.map(item => item.companyId);
+    },
+    /** 全不选公司 */
+    unselectAllCompanies() {
+      this.form.companyIds = [];
+    },
+    /** 反选公司 */
+    reverseSelectCompanies() {
+      const allIds = this.allCompanyOptions.map(item => item.companyId);
+      const selectedIds = this.form.companyIds || [];
+      this.form.companyIds = allIds.filter(id => !selectedIds.includes(id));
+    },
+    /** 全选公司（修改公司范围） */
+    selectAllCompaniesForEdit() {
+      this.editCompanyIdsForm.companyIds = this.allCompanyOptions.map(item => item.companyId);
+    },
+    /** 全不选公司（修改公司范围） */
+    unselectAllCompaniesForEdit() {
+      this.editCompanyIdsForm.companyIds = [];
+    },
+    /** 反选公司（修改公司范围） */
+    reverseSelectCompaniesForEdit() {
+      const allIds = this.allCompanyOptions.map(item => item.companyId);
+      const selectedIds = this.editCompanyIdsForm.companyIds || [];
+      this.editCompanyIdsForm.companyIds = allIds.filter(id => !selectedIds.includes(id));
+    },
+    /** 打开修改公司范围对话框 */
+    handleUpdateCompanyIds(row) {
+      const videoId = row.videoId;
+      getLiveVideo(videoId).then(response => {
+        if (response.code === 200) {
+          this.editCompanyIdsForm = {
+            videoId: response.data.videoId,
+            remark: response.data.remark || '',
+            companyIds: []
+          };
+
+          // 处理companyIds，可能是字符串或数组
+          if (response.data.companyIds) {
+            if (typeof response.data.companyIds === 'string') {
+              this.editCompanyIdsForm.companyIds = response.data.companyIds
+                ? response.data.companyIds.split(',').map(Number)
+                : [];
+            } else if (Array.isArray(response.data.companyIds)) {
+              this.editCompanyIdsForm.companyIds = response.data.companyIds.map(Number);
+            }
+          }
+
+          this.editCompanyIdsDialog = true;
+        }
+      }).catch(() => {
+        this.msgError("获取数据失败");
+      });
+    },
+    /** 取消修改公司范围 */
+    cancelEditCompanyIds() {
+      this.editCompanyIdsDialog = false;
+      this.editCompanyIdsForm = {
+        videoId: null,
+        remark: '',
+        companyIds: []
+      };
+    },
+    /** 提交修改公司范围 */
+    submitEditCompanyIds() {
+      const data = {
+        videoId: this.editCompanyIdsForm.videoId,
+        companyIds: Array.isArray(this.editCompanyIdsForm.companyIds)
+          ? this.editCompanyIdsForm.companyIds
+          : []
+      };
+
+      updateLiveVideo(data).then(response => {
+        if (response.code === 200) {
+          this.msgSuccess("修改成功");
+          this.editCompanyIdsDialog = false;
+          this.getList();
+        } else {
+          this.msgError(response.msg || "修改失败");
+        }
+      }).catch(() => {
+        this.msgError("修改失败");
+      });
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
@@ -251,12 +459,30 @@ export default {
             return;
           }
           this.form.videoUrl = this.form.videoUrl.replace('.mp4', '.m3u8');
-          addLiveVideo(this.form).then(response => {
-            this.msgSuccess("新增成功");
-            this.open = false;
-            this.getList();
-            this.reset();
-          });
+
+          // 确保companyIds是数组
+          const submitData = {
+            ...this.form,
+            companyIds: Array.isArray(this.form.companyIds) ? this.form.companyIds : []
+          };
+
+          if (this.form.videoId != null) {
+            // 修改
+            updateLiveVideo(submitData).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+              this.reset();
+            });
+          } else {
+            // 新增
+            addLiveVideo(submitData).then(response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+              this.reset();
+            });
+          }
 
         }
       });