✨feat(split): restore selected files for each split screen on load

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

@@ -7,11 +7,11 @@
       <div class="w-1/3 p-2 border-r">示意图</div>
       <!-- 中间 Table -->
       <div class="w-1/3 p-2 border-r table-container">
-        <el-radio-group v-model="screenNum" @change="screenChange">
-          <el-radio-button label="第一屏" value="1" v-if="splitScreen !== 4" />
-          <el-radio-button label="第二屏" value="2" v-if="splitScreen !== 4" />
-          <el-radio-button label="第三屏" value="3" v-if="splitScreen === 3" />
-          <el-radio-button label="播放框" value="4" v-if="splitScreen === 4" />
+        <el-radio-group v-model="screenNum" @change="screenChange" :key="splitScreen">
+          <el-radio-button label="第一屏" :key="'screen1'" value="1" v-if="splitScreen !== 4" />
+          <el-radio-button label="第二屏" :key="'screen2'" value="2" v-if="splitScreen !== 4" />
+          <el-radio-button label="第三屏" :key="'screen3'" value="3" v-if="splitScreen === 3" />
+          <el-radio-button label="播放框" :key="'screen4'" value="4" v-if="splitScreen === 4" />
         </el-radio-group>
         <el-table :data="minioDataList" ref="minioTable"
           @selection-change="handleSelectionFile"
@@ -29,7 +29,9 @@
           <el-table-column label="时长" align="center" prop="duration" />
           <el-table-column label="截图" align="center" prop="screenshot">
             <template #default="scope">
-              <image-preview :src="scope.row.screenshot" style="width: 40px; height: 40px; cursor: pointer" />
+              <template v-if="scope.row.screenshot">
+                <image-preview :src="scope.row.screenshot" style="width: 40px; height: 40px; cursor: pointer" />
+              </template>
             </template>
           </el-table-column>
         </el-table>
@@ -46,7 +48,7 @@
           </div>
           <draggable v-model="selectedFiles1" item-key="id" @end="onSelectedFilesDragEnd('1')" :animation="200" tag="div">
             <template #item="{ element, index }">
-              <div class="draggable-row" :draggable="true" style="display: flex; align-items: center; border-bottom: 1px solid #eee; min-height: 48px; cursor: move">
+              <div class="draggable-row" :draggable="true" :key="String(element.id)" style="display: flex; align-items: center; border-bottom: 1px solid #eee; min-height: 48px; cursor: move">
                 <span class="order-number" style="width: 80px; text-align: center">{{ index + 1 }}</span>
                 <span style="flex: 1; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle;">{{ element.name }}</span>
                 <el-input-number v-model="element.duration" :min="1" :max="300" style="width: 120px; margin-left: 8px" />
@@ -173,7 +175,7 @@ const getParamItemId = () => {
 
 const getItemInfo = async () => {
   const res = await splitItemInfo(itemId.value);
-  console.log(res.data);
+  console.log('分屏详情:', res.data);
   itemSplitVo.value = res.data;
   splitScreen.value = res.data.splitScreen;
   if (splitScreen.value === 4) {
@@ -181,6 +183,36 @@ const getItemInfo = async () => {
   } else {
     screenNum.value = '1';
   }
+  // 回显每个分屏的已选文件
+  await restoreSelectedFiles();
+  // 查询第一页文件资源
+  await getFileList();
+};
+
+const restoreSelectedFiles = async () => {
+  // 针对 fileIdList1~4 分别处理
+  for (let n = 1; n <= 4; n++) {
+    const fileIdList = itemSplitVo.value?.[`fileIdList${n}`];
+    const selectedFilesRef = [null, selectedFiles1, selectedFiles2, selectedFiles3, selectedFiles4][n];
+    if (Array.isArray(fileIdList) && fileIdList.length) {
+      const fileRes = await listMinioData({ ids: fileIdList });
+      selectedFilesRef.value = fileIdList.map((id: string | number, idx: number) => {
+        const file = fileRes.rows.find((f: any) => String(f.id) === String(id));
+        return file
+          ? {
+              id: file.id,
+              name: file.originalName,
+              type: file.type,
+              duration: file.type === 1 ? 10 : Number(file.duration),
+              order: idx + 1
+            }
+          : null;
+      }).filter(Boolean);
+      console.log(`fileIdList${n}:`, fileIdList, `selectedFiles${n}:`, selectedFilesRef.value);
+    } else {
+      selectedFilesRef.value = [];
+    }
+  }
 };
 
 // 多选框选中文件数据（与 index.vue 保持一致，支持增量、去重、排序）
@@ -238,29 +270,29 @@ const handleSelectAll = (selection: MinioDataVO[]) => {
 };
 /** 查询文件资源列表 */
 const getFileList = async () => {
+  console.log('分页参数:', dialogQueryParams.value);
   const res = await listMinioData(dialogQueryParams.value);
   minioDataList.value = res.rows.map((data) => ({
     ...data,
     size: (parseFloat(data.size) / 1024).toFixed(3) + 'MB'
   }));
   fileTotal.value = res.total;
-  // 加载后自动恢复选中（与 index.vue 保持一致）
-  nextTick(() => {
-    let selectedFilesRef;
-    if (screenNum.value === '1') selectedFilesRef = selectedFiles1;
-    if (screenNum.value === '2') selectedFilesRef = selectedFiles2;
-    if (screenNum.value === '3') selectedFilesRef = selectedFiles3;
-    if (screenNum.value === '4') selectedFilesRef = selectedFiles4;
-    if (!selectedFilesRef) return;
-    if (selectedFilesRef.value?.length) {
-      const selectedIds = new Set(selectedFilesRef.value.map((f) => f.id));
-      minioDataList.value.forEach((row) => {
-        if (selectedIds.has(row.id)) {
-          minioTable.value?.toggleRowSelection(row, true);
-        }
-      });
-    }
-  });
+  await nextTick();
+  // 高亮当前分屏
+  let selectedFilesRef;
+  if (screenNum.value === '1') selectedFilesRef = selectedFiles1;
+  if (screenNum.value === '2') selectedFilesRef = selectedFiles2;
+  if (screenNum.value === '3') selectedFilesRef = selectedFiles3;
+  if (screenNum.value === '4') selectedFilesRef = selectedFiles4;
+  if (selectedFilesRef?.value?.length) {
+    const selectedIds = new Set(selectedFilesRef.value.map((f) => f.id));
+    minioDataList.value.forEach((row) => {
+      if (selectedIds.has(row.id)) {
+        minioTable.value?.toggleRowSelection(row, true);
+      }
+    });
+    console.log('本页高亮选中:', [...selectedIds]);
+  }
 };
 
 /** 提交按钮 */
@@ -293,7 +325,6 @@ const onSelectedFilesDragEnd = (screen: string) => () => {
 
 onMounted(() => {
   getParamItemId();
-  getFileList();
 });
 </script>
 <style scoped>