Bladeren bron

✨ feat(split): enhance file selection with incremental selection and persistence

Shinohara Haruna 6 maanden geleden
bovenliggende
commit
839f36d16c
1 gewijzigde bestanden met toevoegingen van 75 en 36 verwijderingen
  1. 75 36
      smsb-plus-ui/src/views/smsb/item/split.vue

+ 75 - 36
smsb-plus-ui/src/views/smsb/item/split.vue

@@ -13,7 +13,10 @@
           <el-radio-button label="第三屏" value="3" v-if="splitScreen === 3" />
           <el-radio-button label="播放框" value="4" v-if="splitScreen === 4" />
         </el-radio-group>
-        <el-table :data="minioDataList" ref="minioTable" @selection-change="handleSelectionFile"
+        <el-table :data="minioDataList" ref="minioTable"
+          @selection-change="handleSelectionFile"
+          @select="handleSelect"
+          @select-all="handleSelectAll"
           style="margin-top: 20px">
           <el-table-column type="selection" width="55" align="center" />
           <el-table-column label="原名" align="left" prop="originalName" width="150" :show-overflow-tooltip="true" />
@@ -191,48 +194,84 @@ const getItemInfo = async () => {
   }
 };
 
+// 多选框选中文件数据(与 index.vue 保持一致,支持增量、去重、排序)
 const handleSelectionFile = (selection: MinioDataVO[]) => {
-  if (screenNum.value === '1') {
-    selectedFiles1.value = selection.map((item: any, index: number) => ({
-      id: item.id,
-      name: item.originalName,
-      duration: 10, // 默认播放时长 10s
-      order: index + 1 // 默认排序号
-    }));
-  }
-  if (screenNum.value === '2') {
-    selectedFiles2.value = selection.map((item: any, index: number) => ({
-      id: item.id,
-      name: item.originalName,
-      duration: 10, // 默认播放时长 10s
-      order: index + 1 // 默认排序号
-    }));
-  }
-  if (screenNum.value === '3') {
-    selectedFiles3.value = selection.map((item: any, index: number) => ({
-      id: item.id,
-      name: item.originalName,
-      duration: 10, // 默认播放时长 10s
-      order: index + 1 // 默认排序号
-    }));
-  }
-  if (screenNum.value === '4') {
-    selectedFiles4.value = selection.map((item: any, index: number) => ({
-      id: item.id,
-      name: item.originalName,
-      duration: 10, // 默认播放时长 10s
-      order: index + 1 // 默认排序号
-    }));
+  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;
+
+  selection.forEach((item) => {
+    if (!selectedFilesRef.value.some((f) => String(f.id) === String(item.id))) {
+      selectedFilesRef.value.push({
+        id: item.id,
+        name: item.originalName,
+        type: item.type,
+        duration: item.type === 1 ? 10 : item.duration,
+        order: 0
+      });
+    }
+  });
+  // 重新排序
+  selectedFilesRef.value = selectedFilesRef.value.map((f, idx) => ({ ...f, order: idx + 1 }));
+};
+
+// 取消单个选中
+const handleSelect = (selection: MinioDataVO[], row: MinioDataVO) => {
+  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 (!selection.some((item) => String(item.id) === String(row.id))) {
+    selectedFilesRef.value = selectedFilesRef.value.filter((f) => String(f.id) !== String(row.id));
+    selectedFilesRef.value = selectedFilesRef.value.map((f, idx) => ({ ...f, order: idx + 1 }));
   }
 };
+
+// 取消全选
+const handleSelectAll = (selection: MinioDataVO[]) => {
+  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;
+
+  const currentPageIds = new Set(minioDataList.value.map((item) => String(item.id)));
+  const selectedIds = new Set(selection.map((item) => String(item.id)));
+  selectedFilesRef.value = selectedFilesRef.value.filter((f) => !currentPageIds.has(String(f.id)) || selectedIds.has(String(f.id)));
+  selectedFilesRef.value = selectedFilesRef.value.map((f, idx) => ({ ...f, order: idx + 1 }));
+};
 /** 查询文件资源列表 */
 const getFileList = async () => {
   const res = await listMinioData(dialogQueryParams.value);
-  minioDataList.value = res.rows;
-  minioDataList.value.forEach((data) => {
-    data.size = parseFloat(data.size / 1024).toFixed(3) + 'MB';
-  });
+  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);
+        }
+      });
+    }
+  });
 };
 
 /** 提交按钮 */