fix: 增加显示打印组件

package.json

 {
   "name": "panda-xform",
-  "version": "4.1.5",
-  "description": "4.1.5 文本默认值只读不显示问题，下拉框标签颜色显示问题",
+  "version": "4.1.6",
+  "description": "4.1.6 增加显示打印组件",
   "keywords": [
     "panda-xform"
   ],

src/core/FormRender/components/PrintXform/index.js

+import React, { useMemo } from 'react'
+import styles from './index.less'
+
+const PrintXform = (props) => {
+
+  const { schemaForm, form } = props
+
+  const formTable = useMemo(() => {
+    const { column, properties } = schemaForm
+    let hiddenFields = Object.keys(form.getHiddenValues()).map(v => v?.split('.')?.[1])
+    let formValue = {}
+    Object.keys(form.formData).map(v => {
+      if (isObject(form.formData[v])) {
+        Object.keys(form.formData[v]).forEach(s => {
+          formValue[s] = form.formData[v][s]
+        })
+      }
+    })
+    let array = []
+    Object.keys(properties).map(v => {
+      let childObj = properties[v]?.properties || {}
+      let child = []
+      let num = 0
+      Object.keys(childObj).forEach(s => {
+        if (!hiddenFields.includes(s)) {
+          let width = childObj[s].width || ((100 / column).toFixed(2) + '%')
+          if (width !== '100%') {
+            num++
+          }
+          child.push({
+            title: childObj[s].title,
+            fieldName: s,
+            fieldValue: formValue[s],
+            width: width,
+            labelWidth: childObj[s].labelWidth || 120
+          })
+        }
+      })
+      if (num % column !== 0 && child[child.length - 1] !== '100%') {
+        child[child.length - 1].width = ((100 / column) * (column + 1 - num % column)).toFixed(2) + '%'
+      }
+      array.push({
+        title: properties[v].title,
+        fieldName: v,
+        fieldValue: null,
+        child,
+      })
+    })
+    return array
+  }, [schemaForm, form])
+
+  return (
+    <div className={styles.printXform}>
+      {
+        formTable.map(v => {
+          return (
+            <div className={styles.printGroup}>
+              <div className={styles.groupName}>{v.title}</div>
+              <div className={styles.boxs}>
+                {
+                  v.child.map(s => {
+                    return (
+                      <div className={styles.box} style={{ width: s.width }}>
+                        <div className={styles.itemLeft} style={{ width: s.labelWidth }}>{s.title}</div>
+                        <div className={styles.itemRight}>{s.fieldValue}</div>
+                      </div>
+                    )
+                  })
+                }
+              </div>
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+
+}
+
+export default PrintXform
\ No newline at end of file

src/core/FormRender/components/PrintXform/index.less

+.printXform {
+  width: 100%;
+  .printGroup {
+    width: 100%;
+    &:nth-last-child(1) {
+      border-bottom: 1px solid #aaa;
+    }
+    .groupName {
+      width: 100%;
+      padding: 0 10px;
+      height: 33px;
+      line-height: 33px;
+      font-weight: bold;
+      border: 1px solid #aaa;
+    }
+    .boxs {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      .box {
+        display: flex;
+        height: 33px;
+        line-height: 33px;
+        border: 1px solid #aaa;
+        .itemLeft {
+          overflow: hidden;
+          padding: 0 10px;
+          width: 200px;
+          border-right: 1px solid #aaa;
+        }
+        .itemRight {
+          flex: 1;
+          padding: 0 10px;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/core/FormRender/index.js

@@ -11,18 +11,18 @@ import widgets from '../widgets'
 import { isObject } from '../../utils'
 import { getWatch } from './watch'
 import styles from '../../main.less'
+import PrintXform from './components/PrintXform'
 
 const XRender = (props, ref) => {
 
   useImperativeHandle(ref, () => (
     {
       getValues,
-      exportForm,
       form,
     }
   ))
 
-  const { schemaValues, disabledFields, disabled, codes } = props
+  const { schemaValues, disabledFields, disabled, codes, print } = props
   window.pandaXform = { codes }
 
   const { formJson, values } = schemaValues
@@ -106,29 +106,6 @@ const XRender = (props, ref) => {
     }
   }
 
-  const exportForm = () => {
-    console.log('form', form)
-    const { properties } = schemaForm
-    let array = []
-    let hiddenFields = Object.keys(form.getHiddenValues()).map(v => v?.split('.')?.[1])
-    // console.log('hiddenFields', Object.keys(form.getHiddenValues()), hiddenFields)
-    Object.keys(properties).map(v => {
-      let childObj = properties[v]?.properties || {}
-      let child = []
-      Object.keys(childObj).forEach(v => {
-          if (hiddenFields.includes(v) ) {
-
-          }
-      })
-      array.push({
-        title: properties[v].title,
-        type: properties[v].type,
-        child,
-      })
-    })
-    // console.log('form', form.getHiddenValues())
-  }
-
   //初始化时存储外部传的额外数据
   const onMount = () => {
     setTimeout(() => {
@@ -137,6 +114,10 @@ const XRender = (props, ref) => {
     // form.setValueByPath('extraData', extraData || { codes: { '事件编号': '12312' } })
   }
 
+  if (print) {
+    return <PrintXform schemaForm={schemaForm} form={form} />
+  }
+
   return (
     <div className={styles.pandaXform}>
       <Spin spinning={loading} tip="Loading...">
@@ -148,8 +129,6 @@ const XRender = (props, ref) => {
           mapping={{
             object: 'Header',
           }}
-          // scrollToFirstError
-          // removeHiddenData={false}
           widgets={widgets}
           watch={watch}
           onMount={onMount}