From 8836149607362e67accd1c23e35f5431d00d3499 Mon Sep 17 00:00:00 2001
From: zhangdaiscott <zhangdaiscott@163.com>
Date: Tue, 18 Jul 2023 17:21:03 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90QQYUN-5777=E3=80=91=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BCradio=E5=8F=98=E6=88=90=E4=BA=86checkbox?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CustomSelectHeader.vue     | 16 +++++-
 .../Table/src/hooks/useCustomSelection.tsx    | 53 +++++++++++++++++--
 2 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/src/components/Table/src/components/CustomSelectHeader.vue b/src/components/Table/src/components/CustomSelectHeader.vue
index 3a5fafc..5467ba4 100644
--- a/src/components/Table/src/components/CustomSelectHeader.vue
+++ b/src/components/Table/src/components/CustomSelectHeader.vue
@@ -1,11 +1,19 @@
 <!-- 自定义选择列，表头实现部分 -->
 <template>
-  <a-checkbox :checked="checked" :indeterminate="isHalf" @update:checked="onChange" />
+  <template v-if="isRadio">
+    <!-- radio不存在全选，所以放个空标签 -->
+    <span></span>
+  </template>
+  <a-checkbox v-else :checked="checked" :indeterminate="isHalf" @update:checked="onChange" />
 </template>
 <script setup lang="ts">
   import { computed } from 'vue';
 
   const props = defineProps({
+    isRadio: {
+      type: Boolean,
+      required: true,
+    },
     selectedLength: {
       type: Number,
       required: true,
@@ -20,11 +28,17 @@
 
   // 是否全选
   const checked = computed(() => {
+    if (props.isRadio) {
+      return false;
+    }
     return props.selectedLength > 0 && props.selectedLength >= props.pageSize;
   });
 
   // 是否半选
   const isHalf = computed(() => {
+    if (props.isRadio) {
+      return false;
+    }
     return props.selectedLength > 0 && props.selectedLength < props.pageSize;
   });
 
diff --git a/src/components/Table/src/hooks/useCustomSelection.tsx b/src/components/Table/src/hooks/useCustomSelection.tsx
index b069188..cce9161 100644
--- a/src/components/Table/src/hooks/useCustomSelection.tsx
+++ b/src/components/Table/src/hooks/useCustomSelection.tsx
@@ -4,7 +4,7 @@ import type { BasicTableProps, PaginationProps, TableRowSelection } from '/@/com
 import { computed, nextTick, onUnmounted, ref, toRaw, unref, watch, watchEffect } from 'vue';
 import { omit } from 'lodash-es';
 import { throttle } from 'lodash-es';
-import { Checkbox } from 'ant-design-vue';
+import { Checkbox, Radio } from 'ant-design-vue';
 import { isFunction } from '/@/utils/is';
 import { findNodeAll } from '/@/utils/helper/treeHelper';
 import { ROW_KEY } from '/@/components/Table/src/const';
@@ -61,6 +61,11 @@ export function useCustomSelection(
     };
   });
 
+  // 是否是单选
+  const isRadio = computed(() => {
+    return getRowSelectionRef.value?.type === 'radio';
+  });
+
   const getAutoCreateKey = computed(() => {
     return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
   });
@@ -95,11 +100,23 @@ export function useCustomSelection(
   const selectHeaderProps = computed(() => {
     return {
       onSelectAll,
+      isRadio: isRadio.value,
       selectedLength: flattedData.value.filter((data) => selectedKeys.value.includes(getRecordKey(data))).length,
       pageSize: currentPageSize.value,
     };
   });
 
+  // 监听传入的selectedRowKeys
+  watch(
+    () => unref(propsRef)?.rowSelection?.selectedRowKeys,
+    (val: string[]) => {
+      if (Array.isArray(val)) {
+        setSelectedRowKeys(val);
+      }
+    },
+    { immediate: true }
+  );
+
   // 当任意一个变化时，触发同步检测
   watch([selectedKeys, selectedRows], () => {
     nextTick(() => {
@@ -233,6 +250,11 @@ export function useCustomSelection(
 
   function updateSelected(record, checked) {
     const recordKey = getRecordKey(record);
+    if (isRadio.value) {
+      selectedKeys.value = [recordKey];
+      selectedRows.value = [record];
+      return;
+    }
     const index = selectedKeys.value.findIndex((key) => key === recordKey);
     if (checked) {
       if (index === -1) {
@@ -290,10 +312,22 @@ export function useCustomSelection(
   }
 
   // 自定义渲染Body
-  function bodyCustomRender({ record, index }) {
+  function bodyCustomRender(params) {
+    const { index } = params;
     if (!recordIsShow(index)) {
       return '';
     }
+    if (isRadio.value) {
+      return renderRadioComponent(params);
+    } else {
+      return renderCheckboxComponent(params);
+    }
+  }
+
+  /**
+   * 渲染checkbox组件
+   */
+  function renderCheckboxComponent({ record }) {
     const recordKey = getRecordKey(record);
     // 获取用户自定义checkboxProps
     const checkboxProps = ((getCheckboxProps) => {
@@ -309,7 +343,20 @@ export function useCustomSelection(
     return (
       <Checkbox
         {...checkboxProps}
-        data-index={index}
+        key={'j-select__' + recordKey}
+        checked={selectedKeys.value.includes(recordKey)}
+        onUpdate:checked={(checked) => onSelect(record, checked)}
+      />
+    );
+  }
+
+  /**
+   * 渲染radio组件
+   */
+  function renderRadioComponent({ record }) {
+    const recordKey = getRecordKey(record);
+    return (
+      <Radio
         key={'j-select__' + recordKey}
         checked={selectedKeys.value.includes(recordKey)}
         onUpdate:checked={(checked) => onSelect(record, checked)}