style: 轮播组配置弹窗优化，支持视频的预览，字段列对其

smsb-plus-ui/src/views/smsb/item/index.vue

@@ -126,6 +126,10 @@
         </el-table>
       </div>
     </el-dialog>
+    <!-- 用于展示播放的视频 -->
+    <el-dialog v-model="videoDialogVisible" v-if="videoDialogVisible" title="视频预览" append-to-body>
+      <VideoPlayer :url="videoUrl" />
+    </el-dialog>
     <!-- 添加或修改轮播组对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="1400px" append-to-body @close="onDialogClose">
       <div class="dialog-container">
@@ -136,19 +140,25 @@
 
           <el-table v-loading="dialogLoading" ref="fileTable" :data="minioDataList" reserve-selection row-key="id"
             @selection-change="handleSelectionFile" @select="handleSelect" @select-all="handleSelectAll">
-            <el-table-column type="selection" width="55" header-align="center" />
-            <el-table-column label="类型" header-align="center" prop="type" width="80">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="类型" align="center" prop="type" width="80">
               <template #default="scope">
                 <dict-tag :options="smsb_source_type" :value="scope.row.type" />
               </template>
             </el-table-column>
-            <el-table-column label="原名" header-align="left" prop="originalName" width="150"
-              :show-overflow-tooltip="true" />
-            <el-table-column label="大小" header-align="center" prop="size" />
-            <el-table-column label="时长" header-align="center" prop="duration" />
-            <el-table-column label="截图" header-align="center" prop="screenshot">
+            <el-table-column label="原名" align="left" prop="originalName" :show-overflow-tooltip="true" />
+            <el-table-column label="大小" align="center" prop="size" width="120"/>
+            <el-table-column label="时长" align="center" prop="duration" width="100"/>
+            <el-table-column label="截图" align="center" prop="screenshot" width="120">
               <template #default="scope">
-                <image-preview :src="scope.row.screenshot" style="width: 40px; height: 40px; cursor: pointer" />
+                <div v-if="scope.row.type === 1">
+                  <image-preview :src="scope.row.screenshot" style="width: 40px; height: 40px; cursor: pointer" />
+                </div>
+                <div v-else-if="scope.row.type === 2">
+                  <el-icon class="VideoPlay" @click="viewVideo(scope.row.screenshot)" size="40" style="cursor: pointer">
+                    <VideoPlay />
+                  </el-icon>
+                </div>
               </template>
             </el-table-column>
           </el-table>
@@ -174,7 +184,7 @@
                 <el-tooltip effect="dark" :content="element.name" placement="top">
                   <span style="
                       flex: 1;
-                      max-width: 380px;
+                      max-width: 340px;
                       overflow: hidden;
                       text-overflow: ellipsis;
                       white-space: nowrap;
@@ -456,6 +466,8 @@ const itemFormRef = ref<ElFormInstance>();
 const fileTable = ref<InstanceType<typeof ElTable>>();
 const minioDataList = ref<MinioDataVO[]>([]);
 const dateRangeCreateTime = ref<[DateModelType, DateModelType]>(['', '']);
+const videoDialogVisible = ref(false);
+const videoUrl = ref('');
 
 // 选中的文件
 const selectedFiles = ref<{ id: number; name: string; duration: number; order: number; type: number }[]>([]);
@@ -506,7 +518,10 @@ const dialogQueryParams = ref({
   pageSize: 10,
   params: {}
 });
-
+const viewVideo = (url: string) => {
+  videoUrl.value = url;
+  videoDialogVisible.value = true;
+};
 /** 查询节目管理列表 */
 const getList = async () => {
   mainLoading.value = true;
@@ -586,6 +601,7 @@ const cancel = () => {
   reset();
   dialog.visible = false;
   splitDialog.visible = false;
+  videoDialogVisible.value = false;
   onDialogClose();
 };