表单跌打

src/components/Form/src/BasicForm.vue

@@ -12,6 +12,7 @@
       <slot name="formHeader"></slot>
       <template v-for="schema in getSchema" :key="schema.field">
         <FormItem
+          v-if="!getProps.readonly"
           :is-advanced="fieldsIsAdvancedMap[schema.field]"
           :table-action="tableAction"
           :form-action-type="formActionType"
@@ -25,8 +26,16 @@
             <slot :name="item" v-bind="data || {}"></slot>
           </template>
         </FormItem>
+        <FormItemOnlyread
+          v-else
+          :table-action="tableAction"
+          :form-action-type="formActionType"
+          :schema="schema"
+          :form-props="getProps"
+          :form-model="formModel"
+        >
+        </FormItemOnlyread>
       </template>
-
       <FormAction
         v-bind="getFormActionBindProps"
         @toggle-advanced="handleToggleAdvanced"
@@ -51,6 +60,7 @@
   import { defineComponent, reactive, ref, computed, unref, onMounted, watch, nextTick } from 'vue'
   import { Form, Row } from 'ant-design-vue'
   import FormItem from './components/FormItem.vue'
+  import FormItemOnlyread from './components/FormItemOnlyread.vue'
   import FormAction from './components/FormAction.vue'
 
   import { dateItemType } from './helper'
@@ -74,7 +84,7 @@
 
   export default defineComponent({
     name: 'BasicForm',
-    components: { FormItem, Form, Row, FormAction },
+    components: { FormItem, Form, Row, FormAction, FormItemOnlyread },
     props: basicProps,
     emits: ['advanced-change', 'reset', 'submit', 'register', 'field-value-change'],
     setup(props, { emit, attrs }) {
@@ -125,7 +135,10 @@
 
       const getSchema = computed((): FormSchema[] => {
         const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any)
+        const isReadonly = unref(propsRef).readonly
         for (const schema of schemas) {
+          // 如果表单包含只读属性。处理每个item增加是否可编辑
+          if (isReadonly) schema['isEdit'] = 1
           const { defaultValue, component, isHandleDateDefaultValue = true } = schema
           // handle date type
           if (isHandleDateDefaultValue && defaultValue && dateItemType.includes(component)) {

src/components/Form/src/components/FormitemOnlyread.vue

@@ -0,0 +1,10 @@
+<!--
+ * @Desc: 
+ * @Author: lijj
+ * @Date: 2024-09-14 09:31:23
+-->
+<template>
+  <div>111111111</div>
+</template>
+
+

src/components/Form/src/props.ts

@@ -67,6 +67,8 @@ export const basicProps = {
 
   // 是否显示操作按钮
   showActionButtonGroup: propTypes.bool.def(true),
+  // 默认条件下表单为可编辑
+  readonly: propTypes.bool.def(false),
   // 操作列Col配置
   actionColOptions: Object as PropType<Partial<ColEx>>,
   // 显示重置按钮

src/components/Form/src/types/form.ts

@@ -127,7 +127,9 @@ export interface FormProps {
   resetFunc?: () => Promise<void>
   submitFunc?: () => Promise<void>
   transformDateFunc?: (date: any) => string
-  colon?: boolean
+  colon?: boolean,
+  // 表单是否初始状态是只读属性
+  readonly: boolean
 }
 export interface FormSchema {
   // Field name

src/views/baseinfo/infoclient/index.vue

@@ -113,11 +113,10 @@
         p.isSupplier = 1
       }
       console.log(p)
-
       return formatParams(
         p,
         ['isCustomer', 'isSupplier'],
-        ['contactInfo', 'isContractExpired', 'clientTag'],
+        ['contactInfo', 'isContractExpired', 'clientTag']
       )
     },
     columns,
@@ -152,7 +151,6 @@
     const addNum = Math.round(Math.random() * 1000)
     go(`${route.fullPath}Detail?addNum=${addNum}`)
   }
-
   // 删除
   async function handleDel() {
     let ids: any = []

src/views/operation/paidApply/detail/index.vue

@@ -77,6 +77,7 @@
   const [registerForm, { validate, getFieldsValue, setFieldsValue }] = useForm({
     labelWidth: 150,
     schemas: formSchema,
+    readonly: true,
     showActionButtonGroup: false
   })
   // 业务表loading