feat: (草稿)快速表单支持去掉部分只读字段的灰底

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>

src/components/SimpleForm/src/components/SimpleFormItem.vue

@@ -246,14 +246,19 @@
         :rules="rules"
         :validateTrigger="['blur', 'change']"
       >
+        <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"
-          v-model:value="formModel![schema.field]"
           />
+        </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;