From 7b1449f1d7369380206c6f62adea69d73261ed51 Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <80892890+shaohuzhang1@users.noreply.github.com>
Date: Tue, 3 Dec 2024 18:52:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=80=89=E9=A1=B9?=
 =?UTF-8?q?=E5=8D=A1=E6=8F=90=E4=BA=A4=E5=90=8E=E8=AE=BE=E7=BD=AE=E4=B8=BA?=
 =?UTF-8?q?=E7=A6=81=E7=94=A8=20(#1748)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dynamics-form/items/radio/RadioCard.vue    | 18 ++++++++++++++++--
 .../dynamics-form/items/radio/RadioRow.vue     | 14 ++++++++++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/dynamics-form/items/radio/RadioCard.vue b/ui/src/components/dynamics-form/items/radio/RadioCard.vue
index 5894fbe08..720df2f8f 100644
--- a/ui/src/components/dynamics-form/items/radio/RadioCard.vue
+++ b/ui/src/components/dynamics-form/items/radio/RadioCard.vue
@@ -5,8 +5,8 @@
       :key="item.value"
       class="item"
       shadow="never"
-      :class="[modelValue == item[valueField] ? 'active' : '']"
-      @click="selected(item[valueField])"
+      :class="[inputDisabled ? 'is-disabled' : '', modelValue == item[valueField] ? 'active' : '']"
+      @click="inputDisabled ? () => {} : selected(item[valueField])"
     >
       {{ item[textField] }}
     </el-card>
@@ -15,6 +15,9 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import type { FormField } from '@/components/dynamics-form/type'
+import { useFormDisabled } from 'element-plus'
+const inputDisabled = useFormDisabled()
+
 const props = defineProps<{
   formValue?: any
   formfieldList?: Array<FormField>
@@ -24,6 +27,7 @@ const props = defineProps<{
   view?: boolean
   // 选中的值
   modelValue?: any
+  disabled?: boolean
 }>()
 
 const selected = (activeValue: string | number) => {
@@ -66,6 +70,16 @@ const option_list = computed(() => {
   flex-wrap: wrap;
   justify-content: flex-start;
   width: 100%;
+
+  .is-disabled {
+    border: 1px solid var(--el-card-border-color);
+    background-color: var(--el-fill-color-light);
+    color: var(--el-text-color-placeholder);
+    cursor: not-allowed;
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
   .active {
     border: 1px solid var(--el-color-primary);
     color: var(--el-color-primary);
diff --git a/ui/src/components/dynamics-form/items/radio/RadioRow.vue b/ui/src/components/dynamics-form/items/radio/RadioRow.vue
index f0c00bf6f..68c46c7e4 100644
--- a/ui/src/components/dynamics-form/items/radio/RadioRow.vue
+++ b/ui/src/components/dynamics-form/items/radio/RadioRow.vue
@@ -4,7 +4,7 @@
       v-for="item in option_list"
       :key="item.value"
       class="item"
-      :class="[modelValue == item[valueField] ? 'active' : '']"
+      :class="[inputDisabled ? 'is-disabled' : '', modelValue == item[valueField] ? 'active' : '']"
       @click="selected(item[valueField])"
     >
       {{ item[textField] }}
@@ -14,6 +14,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import type { FormField } from '@/components/dynamics-form/type'
+import { useFormDisabled } from 'element-plus'
+const inputDisabled = useFormDisabled()
 const props = defineProps<{
   formValue?: any
   formfieldList?: Array<FormField>
@@ -54,7 +56,15 @@ const option_list = computed(() => {
   padding: 3px 4px;
   box-sizing: border-box;
   white-space: nowrap;
-
+  .is-disabled {
+    border: 1px solid var(--el-card-border-color);
+    background-color: var(--el-fill-color-light);
+    color: var(--el-text-color-placeholder);
+    cursor: not-allowed;
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
   .active {
     border-radius: 4px;
     background: var(--el-color-primary-light-9);