From fd9f4569d2957e7842035f88548f0b7063dce311 Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Mon, 5 Feb 2024 15:25:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20(=E8=8D=89=E7=A8=BF)=E5=BF=AB=E9=80=9F?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E6=94=AF=E6=8C=81=E5=8E=BB=E6=8E=89=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E5=8F=AA=E8=AF=BB=E5=AD=97=E6=AE=B5=E7=9A=84=E7=81=B0?=
 =?UTF-8?q?=E5=BA=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/src/components/Readonly.vue          | 19 ++++++++++++++++
 .../src/components/SimpleFormItem.vue         | 22 ++++++++++++-------
 2 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Form/src/components/Readonly.vue

diff --git a/src/components/Form/src/components/Readonly.vue b/src/components/Form/src/components/Readonly.vue
new file mode 100644
index 0000000..07e8859
--- /dev/null
+++ b/src/components/Form/src/components/Readonly.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="field-readonly">{{ fieldValue }}</div>
+</template>
+
+<script setup>
+  import { ref, watch } from 'vue';
+
+  const props = defineProps({
+    value: String,
+    schema: Object,
+  });
+  const fieldValue = ref(props.value);
+  watch(
+    () => props.value,
+    (newValue) => {
+      fieldValue.value = newValue;
+    },
+  );
+</script>
diff --git a/src/components/SimpleForm/src/components/SimpleFormItem.vue b/src/components/SimpleForm/src/components/SimpleFormItem.vue
index 9f9014d..842d4e6 100644
--- a/src/components/SimpleForm/src/components/SimpleFormItem.vue
+++ b/src/components/SimpleForm/src/components/SimpleFormItem.vue
@@ -246,14 +246,19 @@
         :rules="rules"
         :validateTrigger="['blur', 'change']"
       >
-        <component
-          :is="defaultComponent(schema)"
-          :key="refreshFieldObj[schema.field]"
-          :disabled="getDisable"
-          :size="formProps?.size"
-          v-bind="getComponentsProps"
-          v-model:value="formModel![schema.field]"
-        />
+        <template v-if="getDisable && /Input/.test(schema.component)">
+          <readonly :schema="schema" :value="formModel![schema.field]" />
+        </template>
+        <template v-else>
+          <component
+            :is="defaultComponent(schema)"
+            :key="refreshFieldObj[schema.field]"
+            v-model:value="formModel![schema.field]"
+            :disabled="getDisable"
+            :size="formProps?.size"
+            v-bind="getComponentsProps"
+          />
+        </template>
       </FormItem>
     </template>
   </div>
@@ -274,6 +279,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import TableLayoutPreview from '/@/components/Form/src/components/TableLayoutPreview.vue';
   import { camelCaseString } from '/@/utils/event/design';
+  import Readonly from '/@/components/Form/src/components/Readonly.vue';
 
   const FormItem = Form.Item;