直播视频修改视频分类

src/views/live/liveVideo/index.vue

@@ -11,12 +11,20 @@
         />
       </el-form-item>
       <el-form-item label="分类" prop="category">
-        <el-input
+        <el-select
           v-model="queryParams.category"
-          placeholder="请输入分类"
+          placeholder="请选择分类"
           clearable
-          @keyup.enter.native="handleQuery"
-        />
+          filterable
+          style="width: 200px"
+        >
+          <el-option
+            v-for="item in categoryOptions"
+            :key="item.dictValue"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input
@@ -87,7 +95,7 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="编号" align="center" prop="videoId" />
       <el-table-column label="视频名称" align="center" prop="videoName" />
-      <el-table-column label="分类" align="center" prop="category" />
+      <el-table-column label="分类" align="center" prop="category" :formatter="categoryFormatter" />
       <el-table-column label="排序" align="center" prop="sort" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="视频地址" align="center" prop="videoUrl">
@@ -159,7 +167,19 @@
           <el-input v-model="form.videoName" placeholder="请输入视频名称" />
         </el-form-item>
         <el-form-item label="分类" prop="category">
-          <el-input v-model="form.category" placeholder="请输入分类" />
+          <el-select
+            v-model="form.category"
+            placeholder="请选择分类"
+            filterable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in categoryOptions"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
         </el-form-item>
         <el-form-item label="排序" prop="sort">
           <el-input-number v-model="form.sort" :min="0" placeholder="请输入排序号" />
@@ -207,7 +227,19 @@
           <el-input v-model="editVideoInfoForm.videoName" placeholder="请输入视频名称" />
         </el-form-item>
         <el-form-item label="分类" prop="category">
-          <el-input v-model="editVideoInfoForm.category" placeholder="请输入分类" />
+          <el-select
+            v-model="editVideoInfoForm.category"
+            placeholder="请选择分类"
+            filterable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in categoryOptions"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
         </el-form-item>
         <el-form-item label="排序" prop="sort">
           <el-input-number v-model="editVideoInfoForm.sort" :min="0" placeholder="请输入排序号" />
@@ -265,7 +297,19 @@
     <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-select
+            v-model="batchUpdateCategoryForm.category"
+            placeholder="请选择分类"
+            filterable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in categoryOptions"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -288,6 +332,7 @@ export default {
     return {
       //字典
       videoTypeOptions: [],
+      categoryOptions: [],
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -330,6 +375,9 @@ export default {
       },
       // 表单校验
       rules: {
+        category: [
+          { required: true, message: "分类不能为空", trigger: "change" }
+        ]
       },
       isPrivate:null,
       // 是否显示修改视频信息对话框
@@ -365,6 +413,9 @@ export default {
   created() {
     this.getList();
     this.getAllCompanyOptions();
+    this.getDicts("sys_live_video_category").then(response => {
+      this.categoryOptions = response.data;
+    });
   },
   mounted() {
     this.getAllCompanyOptions();
@@ -407,6 +458,9 @@ export default {
     videoTypeFormatter(row, column) {
       return this.selectDictLabel(this.videoTypeOptions, row.status);
     },
+    categoryFormatter(row, column) {
+      return this.selectDictLabel(this.categoryOptions, row.category);
+    },
     // 取消按钮
     cancel() {
       this.open = false;