Forráskód Böngészése

refactor(tournaments): 重构盲注结构选择功能

- 将多选改为单选,使用 el-radio 组件
- 优化选中项的处理逻辑,简化代码
- 添加 watch 监听,实时更新选中项
fugui001 6 hónapja
szülő
commit
4019b91aa0
1 módosított fájl, 27 hozzáadás és 12 törlés
  1. 27 12
      src/views/system/business/tournaments/index.vue

+ 27 - 12
src/views/system/business/tournaments/index.vue

@@ -134,11 +134,15 @@
                 border
                 ref="assignTable"
                 :data="assignList"
-                @selection-change="handleAssignSelectionChange"
+
                 :row-key="'blindStructuresId'"
                 style="width: 100%"
               >
-                <el-table-column type="selection" width="55" align="center" />
+                <el-table-column label="操作" align="center" width="55">
+                  <template #default="{ row }">
+                    <el-radio v-model="selectedRadio" :label="row.blindStructuresId">&nbsp;</el-radio>
+                  </template>
+                </el-table-column>
 <!--                <el-table-column label="blindStructuresId" align="center" prop="blindStructuresId" width="100" show-overflow-tooltip />-->
                 <el-table-column prop="blindStructuresName" label="盲注结构名称" align="center" width="150" show-overflow-tooltip />
                 <el-table-column prop="blindDescription" label="盲注结构描述" align="center" width="200" show-overflow-tooltip />
@@ -215,6 +219,9 @@ const assignForm = reactive({
   selectedIds: [] as number[]
 });
 
+// 单选控制变量(用于绑定 el-radio)
+const selectedRadio = ref<number | null>(null);
+
 const assignList = ref<TournamentsBindStructuresVO[]>([]);
 const assignSelectedList = ref<TournamentsBindStructuresVO[]>([]);
 const assignTotal = ref(0);
@@ -382,7 +389,7 @@ async function openAssignDialog(row: TournamentsVO) {
   assignForm.tournamentId = Number(row.id);
   assignQuery.tournamentId = Number(row.id); // 这里明确转成 number
   // 加载盲注列表
-/*  await getAssignList();*/
+
   assignDialog.visible = true;
   // 请求分配盲注结构列表
   getAssignList().then(() => {
@@ -402,7 +409,7 @@ async function submitAssign() {
     proxy?.$modal.msgError('请选择至少一个盲注结构');
     return;
   }
-
+  debugger;
   buttonLoading.value = true;
   try {
     await assignTournamentBlindStructures({
@@ -423,14 +430,11 @@ const assignTable = ref(); // 对应 el-table 的 ref
 
 // 初始化选中行
 function initSelectedRows() {
-  const selected = assignList.value.filter((item) => item.allocationStatus === 1);
-  selected.forEach((item) => {
-    const row = assignList.value.find((r) => r.blindStructuresId === item.blindStructuresId);
-    if (row) {
-      assignTable.value?.toggleRowSelection(row, true);
-    }
-  });
-  assignForm.selectedIds = selected.map((item) => item.blindStructuresId);
+  const selected = assignList.value.find((item) => item.allocationStatus === 1);
+  if (selected) {
+    selectedRadio.value = selected.blindStructuresId;
+    assignForm.selectedIds = [selected.blindStructuresId];
+  }
 }
 
 watch(
@@ -444,4 +448,15 @@ watch(
   },
   { deep: true, immediate: true }
 );
+
+watch(
+  () => selectedRadio.value,
+  (newVal) => {
+    if (newVal !== null) {
+      assignForm.selectedIds = [newVal];
+    } else {
+      assignForm.selectedIds = [];
+    }
+  }
+);
 </script>