fix: 字段名称处理

package.json

 {
     "name": "panda-xform",
-    "version": "1.5.4",
-    "description": "1.5.4: 样式更新",
+    "version": "1.5.5",
+    "description": "1.5.5: 字段名称处理",
     "keywords": [
         "panda-xform"
     ],

src/core/FormDesigner/config/settings.js

@@ -131,7 +131,7 @@ const textWidgets = [
         title: '字段名称',
         type: 'string',
         widget: 'FieldNames',
-        tableName: "{{console.log('1',rootValue)}}",
+        // tableName: "{{console.log('1',rootValue)}}",
         required: true,
         displayType: 'row',
         labelWidth: 80,
@@ -1314,7 +1314,7 @@ const selectWidgets = [
       placeholder: {
         title: '提示语',
         type: 'string',
-        // widget: 'Placeholder',
+        default: '点击下拉选择内容',
         displayType: 'row',
         labelWidth: 80,
       },

src/core/FormDesigner/index.js

 import React, { useRef, useEffect, useState, useContext, forwardRef, createContext, useMemo } from 'react'
-import { ConfigProvider, message, Modal } from 'antd'
+import { ConfigProvider, message, Modal, Button } from 'antd'
 import Generator from 'fr-generator'
 import { settings, baseSettings, globalSettings } from './config'
 import widgets from '../widgets'
@@ -17,6 +17,7 @@ const FormDesigner = (props, ref) => {
   const [visible, setVisible] = useState(false)
   const [schema, setSchema] = useState({})
   const designerRef = useRef(null)
+  const formRenderRef = useRef(null)
 
   const settingsParent = useMemo(() => {
     let settingsParent = []
@@ -39,7 +40,7 @@ const FormDesigner = (props, ref) => {
       if (typeof data === 'string') {
         setTimeout(() => {
           designerRef?.current?.setValue(JSON.parse(data))
-          setSchema(JSON.parse(data))
+          // setSchema(JSON.parse(data))
         }, 0)
       }
     } else {
@@ -67,10 +68,15 @@ const FormDesigner = (props, ref) => {
       text: '提交',
       onClick: async (value) => {
         const errors = designerRef.current.getErrorFields()
+        const json = designerRef.current.getValue()
         if (errors.length) {
           return message.error('请按照提示完善表单内容')
         }
-        const { code, data, msg } = await saveTableConfig(designerRef.current.getValue())
+        // console.log('json.properties', json.properties)
+        // if (json.properties && Object.keys(json.properties).includes(v => !v.includes('分组名称'))) {
+        //   return message.info('包含未分组形态!')
+        // }
+        const { code, data, msg } = await saveTableConfig(json)
         if (code === 0) {
           message.info('保存成功')
         } else {
@@ -80,12 +86,12 @@ const FormDesigner = (props, ref) => {
     }
   ]
 
-  const onChange = (value) => {
-    // console.log('value', value)
-  }
-
-  const onCanvasSelect = (schema) => {
-    // console.log('schema', schema)
+  const testSubmit = async () => {
+    const { formValue, errors } = await formRenderRef?.current?.getValues()
+    if (errors.length) {
+      return message.error('表单校验未通过!')
+    }
+    console.log('formValue', formValue)
   }
 
   return (
@@ -99,9 +105,7 @@ const FormDesigner = (props, ref) => {
           validation={true}
           ref={designerRef}
           extraButtons={extraButtons}
-          onChange={onChange}
           widgets={widgets}
-          onCanvasSelect={onCanvasSelect}
           settings={settingsParent}
           commonSettings={baseSettings}
           globalSettings={globalSettings}
@@ -113,9 +117,17 @@ const FormDesigner = (props, ref) => {
           onOk={() => setVisible(false)}
           onCancel={() => setVisible(false)}
           visible={visible}
+          getContainer={false}
           destroyOnClose
+          footer={
+            <div>
+              <Button onClick={() => setVisible(false)}>取消</Button>
+              <Button onClick={() => setVisible(false)}>确定</Button>
+              <Button onClick={testSubmit}>测试提交</Button>
+            </div>
+          }
         >
-          <FormRender schema={schema} />
+          <FormRender ref={formRenderRef} schema={schema} />
         </Modal>
       </div>
     </div>

src/core/FormRender/index.js

-import React, { useState, useContext, forwardRef, createContext } from 'react'
+import React, { useState, useContext, forwardRef, useImperativeHandle } from 'react'
 import FormRender, { useForm } from 'form-render'
 import { ConfigProvider } from 'antd'
 import widgets from '../widgets'
 
 const XRender = (props, ref) => {
 
-  const { schema } = props
+  useImperativeHandle(ref, () => (
+    {
+      getValues
+    }
+  ))
 
+  const { schema } = props
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext)
   const prefixCls = getPrefixCls('pandaXform')
   const pandaXform = getPrefixCls()
 
-  const [extraData, setExtraData] = useState({})
-  const [parseFormData, setParseFormData] = useState({})
-  const [listData, setListData] = useState([])
   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] + '' })
+      })
+    })
+    return {
+      formValue,
+      errors,
+    }
+  }
+
   return (
     <div className={prefixCls}>
       <FormRender
         configProvider={{ prefixCls: pandaXform }}
         form={form}
         schema={schema}
-        // onChange={form.setValues}
         mapping={{
           object: 'Header',
         }}
@@ -33,5 +50,4 @@ const XRender = (props, ref) => {
 
 }
 
-
 export default forwardRef(XRender)

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

@@ -4,8 +4,8 @@ import city from '../../../../constant/city'
 
 const CascadeSelector = (props) => {
 
-  const { value, onChange, schema } = props
-  const { presetValue, disabled, soruceType, options, dictionary } = schema
+  const { value, onChange, schema, addons } = props
+  const { presetValue, disabled, placeholder, soruceType, } = schema
 
   const enums = useMemo(() => {
     if (soruceType === '城市数据') {
@@ -64,10 +64,10 @@ const CascadeSelector = (props) => {
     }
     findCityData(city)
     // 分发监听
-    const cityValue = result.map(item => {
-      return item.label;
-    })
-    onChange && onChange(cityValue.join('/'));
+    const cityValue = result.map(v => v.label)
+    if (addons) {
+      onChange(cityValue.join('/'))
+    }
   }
 
   useEffect(() => {
@@ -76,6 +76,8 @@ const CascadeSelector = (props) => {
 
   return (
     <Cascader
+      allowClear
+      placeholder={placeholder}
       value={value ? getDefaultValue(value) : []}
       onChange={cascaderChange}
       disabled={disabled}

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

@@ -93,22 +93,25 @@ const PersonSelector = (props) => {
 
   const selectChange = (value) => {
     if (addons) {
-      addons.setValue(addons.dataPath, isMultiple ? value.join(',') : value)
+      onChange(isMultiple ? value.join(',') : value)
+      // addons.setValue(addons.dataPath, isMultiple ? value.join(',') : value)
     }
   }
 
   const inputFocus = async () => {
-    setVisible(true)
-    setLoading(true)
-    const { code, data, msg } = await getUserListForRole({})
-    if (code === 0) {
-      if (Array.isArray(data)) {
-        setGroupPerson(data)
+    if (addons) {
+      setVisible(true)
+      setLoading(true)
+      const { code, data, msg } = await getUserListForRole({})
+      if (code === 0) {
+        if (Array.isArray(data)) {
+          setGroupPerson(data)
+        }
+      } else {
+        message.error(msg)
       }
-    } else {
-      message.error(msg)
+      setLoading(false)
     }
-    setLoading(false)
   }
 
   const getCount = (v) => {
@@ -243,12 +246,6 @@ const PersonSelector = (props) => {
     )
   }
 
-  // if (interactiveType === '树形模态') {
-  //   return (
-
-  //   )
-  // }
-
   return (
     <Select
       mode={isMultiple ? 'multiple' : null}

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

-import React, { useContext, useMemo, useState } from 'react'
+import React, { useContext, useEffect, useMemo, useState } from 'react'
 import { Input, Select, message } from 'antd'
 import { LoadTableFields, ReloadTableFields } from '../../../../../apis/process'
 
@@ -9,7 +9,8 @@ const FieldNames = (props) => {
 
   const [fieldName, setFieldName] = useState([])
 
-  const change = (value) => {
+  const selectChange = (value) => {
+    console.log('value', value)
     onChange(value)
   }
 
@@ -21,13 +22,23 @@ const FieldNames = (props) => {
     if (Array.isArray(data.root)) {
       setFieldName(data.root)
     }
+    console.log('props', props)
   }
 
+  useEffect(() => {
+    if (value && value.includes('#/')) {
+      let array = value.split('/')
+      if (array.length === 3) {
+        onChange(array[2])
+      }
+    }
+  }, [value])
+
   return (
     <Select
       onFocus={onFocus}
-      onChange={change}
-      style={{ maxWidth: '208px' }}
+      onChange={selectChange}
+      style={{ width: '100%' }}
       showSearch
       optionFilterProp='children'
       value={value}