fix: 关联表单完善

package.json

 {
     "name": "panda-xform",
-    "version": "1.5.6",
-    "description": "1.5.6: 增加地址以及设备二维码配置，台账选择器隐射字段默认设置",
+    "version": "1.5.7",
+    "description": "1.5.7: 关联表单完善",
     "keywords": [
         "panda-xform"
     ],

src/apis/process.js

@@ -250,6 +250,14 @@ export function GetTableConfigJson(paramas) {
   })
 }
 
+//获取台账的json
+export function GetTableJson(accountName) {
+  return request({
+    url: `/PandaWorkFlow/WorkFlow/AccountManage/GetTableJson?accountName=${accountName}`,
+    method: 'get',
+  })
+}
+
 //保存附加表信息，支持台账6.0
 export function saveTableConfig(data) {
   return request({

src/core/FormDesigner/config/settings.js

@@ -81,7 +81,6 @@ const layoutWidgets = [
     schema: {
       title: '分组名称',
       type: 'object',
-      collapsed: true,
       // theme: 'collapse:pure',
       // properties: {
       //   title: {
@@ -124,8 +123,8 @@ const textWidgets = [
       groupBase: {
         title: '基础信息',
         type: 'object',
-        collapsed: true,
-        properties: {}
+        properties: {},
+        default: null
       },
       $id: {
         title: '字段名称',
@@ -154,7 +153,6 @@ const textWidgets = [
       presetValue: {
         title: '默认值',
         type: 'string',
-        widget: 'InputDefault',
         displayType: 'row',
         labelWidth: 80,
       },
@@ -669,7 +667,6 @@ const selectWidgets = [
       groupBase: {
         title: '基础信息',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       $id: {
@@ -879,7 +876,6 @@ const selectWidgets = [
       groupBase: {
         title: '基础信息',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       $id: {
@@ -1045,7 +1041,6 @@ const selectWidgets = [
       groupBase: {
         title: '基础信息',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       $id: {
@@ -1204,7 +1199,6 @@ const selectWidgets = [
       groupBase: {
         title: '基础信息',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       $id: {
@@ -1309,7 +1303,6 @@ const selectWidgets = [
       groupBase: {
         title: '基础信息',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       $id: {
@@ -1432,7 +1425,6 @@ const selectWidgets = [
       groupBase: {
         title: '基础信息',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       $id: {
@@ -1467,7 +1459,6 @@ const selectWidgets = [
       gorupSoruce: {
         title: '数据来源',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       role: {
@@ -1560,7 +1551,6 @@ const selectWidgets = [
       groupBase: {
         title: '基础信息',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       $id: {
@@ -1670,7 +1660,6 @@ const selectWidgets = [
       groupBase: {
         title: '基础信息',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       $id: {
@@ -1705,7 +1694,6 @@ const selectWidgets = [
       gorupSoruce: {
         title: '数据来源',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       accountName: {
@@ -1810,7 +1798,6 @@ const dateWidgets = [
       groupBase: {
         title: '基础信息',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       $id: {
@@ -1945,7 +1932,6 @@ const dateWidgets = [
       groupBase: {
         title: '基础信息',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       $id: {
@@ -2215,7 +2201,6 @@ const mapWidgets = [
       groupBase: {
         title: '基础信息',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       $id: {
@@ -2302,7 +2287,6 @@ const mapWidgets = [
       groupBase: {
         title: '基础信息',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       $id: {
@@ -2389,7 +2373,6 @@ const mapWidgets = [
       groupBase: {
         title: '基础信息',
         type: 'object',
-        collapsed: true,
         properties: {}
       },
       $id: {
@@ -2471,7 +2454,7 @@ const advancedWidgets = [
     text: '关联表单',
     name: '关联表单',
     schema: {
-      title: '关联表单',
+      title: '',
       name: '关联表单',
       type: 'string',
       widget: 'RelationForm',
@@ -2491,10 +2474,11 @@ const advancedWidgets = [
         displayType: 'row',
         labelWidth: 80,
       },
-      title: {
+      titleShow: {
         title: '标题',
         type: 'string',
         widget: 'htmlInput',
+        default: '关联表单',
         displayType: 'row',
         labelWidth: 80,
       },
@@ -2550,12 +2534,13 @@ const advancedWidgets = [
         labelWidth: 80,
         required: true,
         default: [],
+        dependencies: ['accountName'],
       },
       defaultShow: {
         title: '默认显示',
         type: 'boolean',
         widget: 'BooleanSwitch',
-        default: false,
+        default: true,
         displayType: 'row',
         labelWidth: 80,
       },
@@ -2566,7 +2551,27 @@ const advancedWidgets = [
         labelWidth: 80,
         widget: 'ControlShow',
       },
-      ...groupStyle,
+      groupStyle: {
+        title: '控件样式',
+        type: 'object',
+        properties: {}
+      },
+      width: {
+        title: '元素宽度',
+        type: 'string',
+        widget: 'percentSlider',
+      },
+      labelWidth: {
+        title: '标签宽度',
+        description: '默认值10',
+        default: 10,
+        type: 'number',
+        widget: 'slider',
+        max: 400,
+        props: {
+          hideNumber: true,
+        },
+      },
     },
   },
   {

src/core/FormDesigner/index.js

-import React, { useRef, useEffect, useState, useContext, forwardRef, createContext, useMemo } from 'react'
+import React, { useRef, useEffect, useState, useContext, forwardRef, createContext, useMemo, useLayoutEffect } from 'react'
 import { ConfigProvider, message, Modal, Button } from 'antd'
 import Generator from 'fr-generator'
 import { settings, baseSettings, globalSettings } from './config'
@@ -30,27 +30,22 @@ const FormDesigner = (props, ref) => {
     return settingsParent
   }, [settings, tableName])
 
-  const getTableField = () => {
-    console.log('setSchema', settings)
-  }
-
-  const getTableConfig = async () => {
+  const getTableConfig = async (tableName) => {
     const { code, data, msg } = await GetTableConfigJson({ tableName })
     if (code === 0) {
-      if (typeof data === 'string') {
-        setTimeout(() => {
-          designerRef?.current?.setValue(JSON.parse(data))
-          // setSchema(JSON.parse(data))
-        }, 0)
+      if (data && typeof data === 'string') {
+        designerRef?.current?.setValue(JSON.parse(data))
       }
     } else {
       message.error(msg)
     }
   }
 
-  useEffect(() => {
-    getTableConfig()
-  }, [])
+  useLayoutEffect(() => {
+    if (tableName) {
+      getTableConfig(tableName)
+    }
+  }, [tableName])
 
   const extraButtons = [
     false,
@@ -87,10 +82,11 @@ const FormDesigner = (props, ref) => {
   ]
 
   const testSubmit = async () => {
-    const { formValue, errors } = await formRenderRef?.current?.getValues()
+    const { formValue, relationForm, errors } = await formRenderRef?.current?.getValues()
     if (errors.length) {
       return message.error('表单校验未通过!')
     }
+    console.log('获取数据', formValue, relationForm)
   }
 
   return (

src/core/FormRender/index.js

-import React, { useState, useContext, forwardRef, useImperativeHandle } from 'react'
+import React, { useState, useContext, forwardRef, useImperativeHandle, createContext } from 'react'
 import FormRender, { useForm } from 'form-render'
 import { ConfigProvider } from 'antd'
 import widgets from '../widgets'
 
+export const GlobalStore = createContext(null)
+
 const XRender = (props, ref) => {
 
   useImperativeHandle(ref, () => (
@@ -15,22 +17,22 @@ const XRender = (props, ref) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext)
   const prefixCls = getPrefixCls('pandaXform')
   const pandaXform = getPrefixCls()
-
   const form = useForm()
 
   const getValues = async () => {
     let { data, errors } = await form.submit()
-    // console.log('form', form, errorFields)
-    // form.formData()
     let formValue = []
     Object.keys(data).map((k) => {
-      Object.keys(data[k]).map((key) => {
-        formValue.push({ fieldName: key, fieldValue: data[k][key] + '' })
-      })
+      if (k !== 'relationForm') {
+        Object.keys(data[k]).map((key) => {
+          formValue.push({ fieldName: key, fieldValue: data[k][key] })
+        })
+      }
     })
     return {
       formValue,
       errors,
+      relationForm: data.relationForm
     }
   }
 

src/core/widgets/advanced/RelationForm/BaseForm/index.js

+import React, { useMemo, forwardRef, useContext, useImperativeHandle } from 'react'
+import { ConfigProvider } from 'antd'
+import FormRender, { useForm } from 'form-render'
+import widgets from './widgets'
+
+const isObject = (obj) => typeof obj === 'object'
+
+const BaseForm = (props, ref) => {
+
+  useImperativeHandle(ref, () => (
+    {
+      getValues
+    }
+  ))
+
+  const { schemaForm, config, formState } = props
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext)
+  const prefixCls = getPrefixCls('pandaXform')
+  const pandaXform = getPrefixCls()
+  const form = useForm()
+
+  //表单需要显示的字段
+  const field = useMemo(() => {
+    const { fieldGroup, editFieldGroup, addFieldGroup } = config
+    let field = []
+    if (formState === '详情') {
+      field = fieldGroup ? fieldGroup.split(',') : []
+    } else if (formState === '添加') {
+      field = addFieldGroup ? addFieldGroup.split(',') : []
+    } else if (formState === '编辑') {
+      field = editFieldGroup ? editFieldGroup.split(',') : []
+    }
+    return field
+  }, [config, formState])
+
+  const schema = useMemo(() => {
+    const { group, values } = schemaForm
+    let parent = group?.properties
+    let parentObj = {}
+    if (isObject(parent)) {
+      for (let v in parent) {
+        let child = parent[v]?.properties
+        let childObj = {}
+        if (isObject(child)) {
+          for (let s in child) {
+            if (field.includes(s)) {
+              let value = ''
+              values.forEach(v => {
+                if (v.fieldName === s) {
+                  value = v.fieldValue
+                }
+              })
+              childObj[s] = { ...child[s], presetValue: value || child[s].presetValue }
+            } else {
+
+            }
+          }
+        }
+        if (JSON.stringify(childObj) !== '{}') {
+          parentObj[v] = { ...parent[v], properties: childObj }
+        }
+      }
+    }
+    return { ...group, properties: parentObj }
+  }, [schemaForm, field, formState])
+
+  const getValues = async () => {
+    let { data, errors } = await form.submit()
+    let formValue = []
+    Object.keys(data).map((k) => {
+      Object.keys(data[k]).map((key) => {
+        formValue.push({ fieldName: key, fieldValue: data[k][key] + '' })
+      })
+    })
+    return {
+      formValue,
+      errors,
+    }
+  }
+
+  return (
+    <div className={prefixCls}>
+      <FormRender
+        configProvider={{ prefixCls: pandaXform }}
+        mapping={{
+          object: 'Header',
+        }}
+        form={form}
+        schema={schema}
+        widgets={widgets}
+      />
+    </div>
+  )
+
+}
+
+export default forwardRef(BaseForm)
\ No newline at end of file

src/core/widgets/advanced/RelationForm/BaseForm/widgets.js

+import Header from '../../../Header'
+import text from '../../../text'
+import date from '../../../date'
+import select from '../../../select'
+import file from '../../../file'
+import Signature from '../../Signature'
+
+const coord = {
+  Signature
+}
+
+const widgets = {
+  Header,
+  ...text,
+  ...date,
+  ...select,
+  ...file,
+  ...coord,
+}
+
+export default widgets
\ No newline at end of file

src/core/widgets/advanced/RelationForm/index.less

@@ -6,6 +6,7 @@
     height: 45px;
     line-height: 45px;
     position: relative;
+    text-align: center;
     // .account-header-title {
     //   width: 100%;
     //   text-align: center;

src/core/widgets/select/ComboBox/index.js

-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useEffect } from 'react'
 import { Select, message } from 'antd'
 import { GetSelectItemList, GetFieldValueFromTable, getStationListByUserID } from '../../../../apis/process'
 
@@ -13,13 +13,21 @@ const ComboBox = (props) => {
   const [tableData, setTableData] = useState([])
   const [site, setSite] = useState([])
 
+  useEffect(() => {
+    if (addons) {
+      addons.setValue(addons.dataPath, presetValue)
+    } else {
+      onChange(presetValue)
+    }
+  }, [presetValue])
+
   const valueShow = useMemo(() => {
     if (isMultiple || isEdit) {
-      return (value || presetValue) ? (value || presetValue).split(',') : []
+      return value ? value.split(',') : []
     } else {
-      return value || presetValue || null
+      return value || null
     }
-  }, [isEdit, isMultiple, presetValue, value])
+  }, [isEdit, isMultiple, value])
 
   const enums = useMemo(() => {
     switch (soruceType) {

src/core/widgets/select/PersonSelector/index.js

@@ -188,7 +188,7 @@ const PersonSelector = (props) => {
                             {
                               v.userList.map(s => {
                                 return (
-                                  <Col span={8} style={{ margin: '8px 0', display: s.noShow ? 'none' : 'block' }}>
+                                  <Col span={8} key={s.userID} style={{ margin: '8px 0', display: s.noShow ? 'none' : 'block' }}>
                                     <Checkbox
                                       value={s.userName}
                                     >

src/core/widgets/settings/groupBase/FieldNames/index.js

@@ -5,11 +5,16 @@ import { LoadTableFields, ReloadTableFields } from '../../../../../apis/process'
 const FieldNames = (props) => {
 
   const { value, onChange, addons } = props
-  const { tableNameParent } = addons.formData
+  const { tableNameParent, name } = addons.formData
 
   const [fieldName, setFieldName] = useState([])
 
   const selectChange = (value) => {
+    if (name !== '关联表单') {
+      addons.setValueByPath('title', value)
+    } else {
+      addons.setValueByPath('titleShow', value)
+    }
     onChange(value)
   }
 
@@ -21,7 +26,6 @@ const FieldNames = (props) => {
     if (Array.isArray(data.root)) {
       setFieldName(data.root)
     }
-    console.log('props', props)
   }
 
   useEffect(() => {

src/core/widgets/settings/groupSource/AccountName/index.js

@@ -22,10 +22,12 @@ const AccountName = (props) => {
   }
 
   const selectChange = (value) => {
-    onChange(value)
     if (name === '台账选择器') {
-      addons.setValues({ ...addons.formData, fieldshine: [] })
+      addons.setValueByPath('fieldshine', [])
+    } else if (name === '关联表单') {
+      addons.setValueByPath('mappedField', [])
     }
+    onChange(value)
   }
 
   return (

src/core/widgets/settings/groupSource/MappedField/index.js

-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Form, Space, TreeSelect, Button, Input, Modal, message } from 'antd'
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
 import styles from './index.less'
@@ -22,7 +22,6 @@ const MappedField = (props) => {
     const req1 = QueryFields(accountName)
     const req2 = ReloadTableFields({ tableName: tableNameParent })
     const [res1, res2] = await Promise.all([req1, req2])
-    console.log(res1, res2)
     if (res1.code === 0) {
       setToField(res1.data)
     } else {
@@ -33,6 +32,7 @@ const MappedField = (props) => {
     } else {
       message.error(res2.msg)
     }
+    form.setFieldsValue({ field: value })
     setVisible(true)
   }
 

src/core/widgets/text/RichText/index.js

-import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef, useMemo } from 'react'
+import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef, useMemo, useLayoutEffect } from 'react'
 import styles from './index.less'
 import { request } from '@wisdom-utils/utils'
 import { Editor, Toolbar } from '@wangeditor/editor-for-react'
@@ -41,7 +41,6 @@ const RichText = forwardRef(({ schema, onChange, value }, ref) => {
     }
   }, [editor])
 
-
   return (
     <div className={styles.richText} disabled={disabled}>
       {

src/core/widgets/text/TextInput/index.js

@@ -27,14 +27,6 @@ const TextInput = (props) => {
   const { value, onChange, schema, addons } = props
   const { title, disabled, placeholder, presetValue, addonBefore, addonAfter, maxLength, rules, uniqueVerify, tableName, fieldName } = schema
 
-  useEffect(() => {
-    if (addons) {
-      addons.setValue(addons.dataPath, presetValue)
-    } else {
-      onChange(presetValue)
-    }
-  }, [presetValue])
-
   const style = useMemo(() => {
     let paths = ['【本人姓名】', '【本人部门】']
     if (paths.includes(value)) {