增加人员选择器

examples/base/test.js

@@ -3508,23 +3508,8 @@ window.globalConfig = {
 
 const Test = (props) => {
 
-  const [schema, setSchema] = useState({})
-
-  const changeSchema = (value) => {
-    setSchema(value)
-  }
-
   return (
-    <div style={{ width: '100%' }}>
-      <Tabs>
-        <Tabs.TabPane tab="编辑" key="item-1">
-          <FormDesigner setSchema={changeSchema} tableName='' />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="渲染" key="item-2">
-          <FormRender schema={schema} />
-        </Tabs.TabPane>
-      </Tabs>
-    </div>
+    <FormDesigner tableName='事件_测试02' />
   )
 
 }

package.json

 {
     "name": "panda-xform",
-    "version": "1.4.6",
-    "description": "1.4.6: 增加台账选择器",
+    "version": "1.4.7",
+    "description": "1.4.7: 增加人员选择器",
     "keywords": [
         "panda-xform"
     ],
@@ -31,8 +31,8 @@
         "@wisdom-utils/utils": "0.0.46",
         "antd": "4.20.7",
         "antd-img-crop": "^3.14.1",
-        "form-render": "1.6.7",
-        "fr-generator": "^2.8.3",
+        "form-render": "^1.14.7",
+        "fr-generator": "^2.8.4",
         "http-proxy-middleware": "^1.0.6",
         "moment": "^2.29.1",
         "qrcode.react": "^1.0.1",

src/apis/process.js

@@ -39,9 +39,9 @@ export function getStationListByUserID(id, sysType, isAll) {
 }
 
 // 人员选择器查询
-export function getUserListForRole() {
+export function getUserListForRole(params) {
   return request({
-    url: `${BASEURL}/GetUserListForRole`,
+    url: `${BASEURL}/GetUserListForRole${params.roleName ? `?roleName=${params.roleName}` : ''}`,
     method: 'get',
   });
 }

src/core/FormDesigner/config/settings.js

@@ -1315,11 +1315,118 @@ const selectWidgets = [
       name: '人员选择器',
       type: 'string',
       widget: 'PersonSelector',
-      require: true,
     },
     setting: {
-
-
+      groupBase: {
+        title: '基础信息',
+        type: 'object',
+        collapsed: true,
+        properties: {}
+      },
+      $id: {
+        title: '字段名称',
+        type: 'string',
+        widget: 'FieldNames',
+        required: true,
+        displayType: 'row',
+        labelWidth: 80,
+      },
+      title: {
+        title: '标题',
+        required: true,
+        type: 'string',
+        widget: 'htmlInput',
+        displayType: 'row',
+        labelWidth: 80,
+      },
+      placeholder: {
+        title: '提示语',
+        type: 'string',
+        default: '点击选择人员',
+        displayType: 'row',
+        labelWidth: 80,
+      },
+      presetValue: {
+        title: '默认值',
+        type: 'string',
+        displayType: 'row',
+        labelWidth: 80,
+      },
+      gorupSoruce: {
+        title: '数据来源',
+        type: 'object',
+        collapsed: true,
+        properties: {}
+      },
+      role: {
+        title: '机构角色',
+        type: 'string',
+        displayType: 'row',
+        labelWidth: 80,
+        required: "{{formData.interactiveType === '下拉框'}}",
+      },
+      groupSetting: {
+        title: '控件设置',
+        type: 'object',
+        properties: {}
+      },
+      disabled: {
+        title: '只读',
+        type: 'boolean',
+        widget: 'checkbox',
+        default: false,
+        width: '25%',
+      },
+      hidden: {
+        title: '隐藏',
+        type: 'boolean',
+        widget: 'checkbox',
+        default: false,
+        width: '25%',
+      },
+      emphasis: {
+        title: '强调',
+        type: 'boolean',
+        widget: 'checkbox',
+        default: false,
+        width: '25%',
+      },
+      isMultiple: {
+        title: '多选',
+        type: 'boolean',
+        widget: 'checkbox',
+        default: false,
+        width: '25%',
+      },
+      groupStyle: {
+        title: '控件样式',
+        type: 'object',
+        properties: {}
+      },
+      interactiveType: {
+        title: '交互方式',
+        type: 'string',
+        enum: ['下拉框', '分组模态'],
+        default: '下拉框',
+        enumNames: ['下拉框', '分组模态'],
+        widget: 'radio',
+      },
+      width: {
+        title: '元素宽度',
+        type: 'string',
+        widget: 'percentSlider',
+      },
+      labelWidth: {
+        title: '标签宽度',
+        description: '默认值110',
+        default: 110,
+        type: 'number',
+        widget: 'slider',
+        max: 400,
+        props: {
+          hideNumber: true,
+        },
+      },
     }
   },
   {

src/core/FormDesigner/index.js

-import React, { useRef, useMemo, useEffect, useState, useContext, createContext } from 'react'
-import { ConfigProvider, message } from 'antd'
+import React, { useRef, useEffect, useState, useContext } from 'react'
+import { ConfigProvider, message, Modal } from 'antd'
 import Generator, { defaultCommonSettings, defaultGlobalSettings, defaultSettings } from 'fr-generator'
 import { settings, baseSettings, globalSettings } from './config'
 import widgets from '../widgets'
 import { saveTableConfig, GetTableConfigJson } from '../../apis/process'
-
-export const GlobalStore = createContext(null)
+import FormRender from '../FormRender'
 
 const FormDesigner = (props) => {
 
@@ -13,30 +12,21 @@ const FormDesigner = (props) => {
 
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext)
   const prefixCls = getPrefixCls('pandaXform')
-  const pandaXform = getPrefixCls()
-
-  const [table, setTable] = useState()
+  const [visible, setVisible] = useState(false)
+  const [schema, setSchema] = useState({})
   const ref = useRef(null)
 
   const getTableField = () => {
     console.log('setSchema', settings)
   }
 
-  const getTableInfo = () => {
-
-  }
-
-  const getTable = () => {
-
-  }
-
   const getTableConfig = async () => {
-    const { code, data } = await GetTableConfigJson({ tableName: '事件_测试02' })
+    const { code, data } = await GetTableConfigJson({ tableName })
     if (code === 0) {
-      console.log(ref, data)
       if (typeof data === 'string') {
         setTimeout(() => {
           ref && ref.current && ref.current.setValue && ref.current.setValue(JSON.parse(data))
+          setSchema(JSON.parse(data))
         }, 0)
       }
     } else {
@@ -49,11 +39,21 @@ const FormDesigner = (props) => {
   }, [])
 
   const extraButtons = [
+    false,
+    true,
+    true,
+    true,
+    {
+      text: '预览',
+      onClick: (e) => {
+        setVisible(true)
+        setSchema(ref.current.getValue())
+      }
+    },
     {
       text: '提交',
       onClick: async (value) => {
         const errors = ref.current.getErrorFields()
-        props.setSchema(ref.current.getValue())
         if (errors.length) {
           return message.error('请按照提示完善表单内容')
         }
@@ -76,15 +76,9 @@ const FormDesigner = (props) => {
   }
 
   return (
-    <GlobalStore.Provider
-      value={{
-        extraData: 123,
-        setExtraData: '123'
-      }}
-    >
     <div className={prefixCls} style={{ height: '750px' }}>
       <Generator
-          configProvider={{ prefixCls: pandaXform }}
+        configProvider={{ prefixCls: prefixCls }}
         mapping={{
           object: 'Header',
         }}
@@ -98,8 +92,18 @@ const FormDesigner = (props) => {
         commonSettings={baseSettings}
         globalSettings={globalSettings}
       />
+      <Modal
+        title={tableName}
+        width='80%'
+        bodyStyle={{ height: '700px', overflow: 'auto' }}
+        onOk={() => setVisible(false)}
+        onCancel={() => setVisible(false)}
+        visible={visible}
+      >
+        <FormRender schema={schema} />
+      </Modal>
     </div>
-    </GlobalStore.Provider>
+
   )
 
 }

src/core/FormRender/index.js

-import React, { useState, useEffect, useRef, useContext, createContext, forwardRef, useImperativeHandle, useMemo } from 'react'
+import React, { useState, useContext, forwardRef } 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, () => ({
-  //   form,
-  //   getFormValues,
-  //   setListData
-  // }))
-
   const { schema } = props
 
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext)
@@ -29,15 +21,6 @@ const XRender = (props, ref) => {
   }
 
   return (
-    <GlobalStore.Provider
-      value={{
-        extraData,
-        setExtraData,
-        parseFormData,
-        setParseFormData,
-        listData,
-        setParseFormData,
-      }}>
     <div className={prefixCls} onClick={() => onClick()}>
       <FormRender
         configProvider={{ prefixCls: pandaXform }}
@@ -50,8 +33,8 @@ const XRender = (props, ref) => {
         widgets={widgets}
       />
     </div>
-    </GlobalStore.Provider>
-  );
+  )
+
 }
 
 

src/core/widgets/date/Time/index.js

@@ -5,10 +5,10 @@ import style from '../../style'
 
 const Time = (props) => {
 
+  console.log('props', props)
+
   const { value, onChange, schema, addons } = props
   const { presetValue } = schema
-  const { groupStyle } = addons.formData
-  console.log('groupStyle', schema)
 
   const valueShow = useMemo(() => {
     return (value || presetValue) ? moment(value || presetValue, 'HH:mm:ss') : null

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

@@ -9,10 +9,7 @@ const AccountSelector = (props) => {
 
   const userID = window?.globalConfig?.userInfo?.OID
   const { value, onChange, schema, addons } = props
-  const { disabled, config, fieldName, accountName, fieldshine, siteJurisdiction, sql, isMultiple } = schema
-  // const { form } = useContext(GlobalStore)
-
-  console.log('props', props)
+  const { disabled, config, fieldName, accountName, fieldshine, siteJurisdiction, sql, isMultiple, presetValue } = schema
 
   const [params, setParams] = useState({ info: '', total: 0, pageIndex: 1, pageSize: 20 })
   const [loading, setLoading] = useState(false)
@@ -143,8 +140,12 @@ const AccountSelector = (props) => {
   }
 
   useEffect(() => {
-    onChange(schema.default)
-  }, [schema.default])
+    if (addons) {
+      addons.setValue(addons.dataPath, presetValue)
+    } else {
+      onChange(presetValue)
+    }
+  }, [presetValue])
 
   const addonAfter = <SnippetsOutlined onClick={() => iconClick()} style={{ color: 'rgba(0, 0, 0, 0.25)' }} />
 

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

-import React from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
+import { Select, Input, message, Modal, Spin, Checkbox, Row, Col, Radio } from 'antd'
+import { UserAddOutlined } from '@ant-design/icons'
+import { getMenTreeByRole, getUserListForRole } from '../../../../apis/process'
+import styles from './index.less'
 
 const PersonSelector = (props) => {
 
-  const { value, onChange, schema } = props
+  const userID = window?.globalConfig?.userInfo?.OID || 1
+  const { value, onChange, schema, addons } = props
+  const { disabled, interactiveType, isMultiple, placeholder, presetValue, role } = schema
+  const [pullDown, setPullDown] = useState([])
+  const [groupPerson, setGroupPerson] = useState([])
+  const [visible, setVisible] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [check, setCheck] = useState([])
+  const [radio, setRadio] = useState(null)
+  const [search, setSearch] = useState(null)
 
+  const groupPersonShow = useMemo(() => {
+    if (search) {
+      let array = []
+      groupPerson.forEach(v => {
+        let userList = []
+        let noShowParent = !v.ouName.includes(search)
+        console.log(noShowParent, v.ouName, search)
+        v.userList.forEach(s => {
+          let noShow = !s.userName.includes(search)
+          if (!noShow) {
+            noShowParent = false
+          }
+          userList.push({ ...s, noShow: !noShowParent ? noShowParent : noShow })
+        })
+        array.push({ ...v, userList, noShow: noShowParent })
+      })
+      return array
+    }
+    return groupPerson
+  }, [search, groupPerson])
+
+  const onOk = () => {
+    if (addons) {
+      addons.setValue(addons.dataPath, isMultiple ? check.join(',') : radio)
+    }
+    setVisible(false)
+  }
+
+  const inputChange = (value) => {
+    setSearch(value)
+  }
+
+  const checkChange = (value) => {
+    setCheck(value)
+  }
+
+  const radioChange = (e) => {
+    setRadio(e.target.value)
+  }
+
+  const checkGroup = (v, type) => {
+    let array = v.userList.map(v => v.userName)
+    if (type === 'true') {
+      setCheck(check.filter(v => !array.includes(v)))
+    } else {
+      setCheck(Array.from(new Set([...check, ...array])))
+    }
+  }
+
+  const getGorupType = (v, checkCount) => {
+    if (checkCount === 0) {
+      return 'false'
+    } else if (v.userList.length === checkCount) {
+      return 'true'
+    }
+    return 'other'
+  }
+
+  const selectFocus = async () => {
+    if (!role) {
+      return message.error('请配置机构角色!')
+    }
+    const { code, data, msg } = await getMenTreeByRole({ userID, role: role })
+    if (code === 0) {
+      if (data && data.childNodes) {
+        setPullDown(data.childNodes)
+      } else {
+        setPullDown([])
+      }
+    } else {
+      message.info(msg)
+    }
+  }
+
+  const selectChange = (value) => {
+    if (addons) {
+      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)
+      }
+    } else {
+      message.error(msg)
+    }
+    setLoading(false)
+  }
+
+  const getCount = (v) => {
+    let array = v.userList.filter(s => check.includes(s.userName))
+    if (Array.isArray(array)) {
+      return array.length
+    }
+    return 0
+  }
+
+  useEffect(() => {
+    if (addons) {
+      addons.setValue(addons.dataPath, presetValue)
+    } else {
+      onChange(presetValue)
+    }
+  }, [presetValue])
+
+  useEffect(() => {
+    if (isMultiple) {
+      setCheck(value ? value.split(',') : [])
+    } else {
+      setRadio(value)
+    }
+  }, [isMultiple, value])
+
+  if (interactiveType === '分组模态') {
+    return (
+      <div className={styles.personGroup}>
+        <Input
+          disabled={disabled}
+          value={isMultiple ? (value ? value.split(',') : []) : value}
+          placeholder={disabled ? null : placeholder}
+          onClick={inputFocus}
+          addonAfter={disabled ? null : <UserAddOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} onClick={inputFocus} />}
+          style={{ width: '100%' }}
+        />
+        <Modal
+          title='人员选择器'
+          visible={visible}
+          bodyStyle={{ height: 450 }}
+          onCancel={() => setVisible(false)}
+          onOk={onOk}
+          getContainer={false}
+        >
+          <Spin
+            spinning={loading}
+          >
+            <Input.Search
+              placeholder='请输入姓名'
+              allowClear
+              enterButton
+              value={search}
+              onChange={(e) => inputChange(e.target.value)}
+            />
+            {
+              isMultiple ?
+                <Checkbox.Group
+                  style={{ width: '100%', height: '400px', overflow: 'auto', marginTop: '10px' }}
+                  value={check}
+                  onChange={checkChange}
+                >
+                  {
+                    groupPersonShow.map(v => {
+                      let checkCount = getCount(v)
+                      let type = getGorupType(v, checkCount)
+                      return (
+                        <div className={styles.groupUser} style={{ display: v.noShow ? 'none' : 'block' }}>
+                          <div className={styles.groupName} onClick={() => checkGroup(v, type)}>
+                            <span className={styles.groupCheck} type={type}></span>
+                            <span>{v.ouName + `${checkCount}/${v.userList.length}`}</span>
+                          </div>
+                          <Row style={{ paddingLeft: '40px' }}>
+                            {
+                              v.userList.map(s => {
+                                return (
+                                  <Col span={8} style={{ margin: '8px 0', display: s.noShow ? 'none' : 'block' }}>
+                                    <Checkbox
+                                      value={s.userName}
+                                    >
+                                      <div>{s.userName}</div>
+                                    </Checkbox>
+                                  </Col>
+                                )
+                              })
+                            }
+                          </Row>
+                        </div>
+                      )
+                    })
+                  }
+                </Checkbox.Group>
+                :
+                <Radio.Group
+                  value={radio}
+                  onChange={radioChange}
+                  style={{ width: '100%', height: '400px', overflow: 'auto', marginTop: '10px' }}
+                >
+                  {
+                    groupPersonShow.map(v => {
+                      let checkCount = getCount(v)
+                      let type = getGorupType(v, checkCount)
+                      return (
+                        <div className={styles.groupUser} style={{ display: v.noShow ? 'none' : 'block' }} key={v.ouid}>
+                          <div className={styles.groupName}>
+                            <span style={{ fontSize: '14px', fontWeight: 'bold' }}>{v.ouName}</span>
+                          </div>
+                          <Row style={{ paddingLeft: '40px' }}>
+                            {
+                              v.userList.map(s => {
+                                return (
+                                  <Col span={8} style={{ margin: '8px 0', display: s.noShow ? 'none' : 'block' }} key={s.userID}>
+                                    <Radio
+                                      value={s.userName}
+                                    >
+                                      <div>{s.userName}</div>
+                                    </Radio>
+                                  </Col>
+                                )
+                              })
+                            }
+                          </Row>
+                        </div>
+                      )
+                    })
+                  }
+                </Radio.Group>
+            }
+          </Spin>
+        </Modal>
+      </div>
+    )
+  }
+
+  // if (interactiveType === '树形模态') {
+  //   return (
+
+  //   )
+  // }
 
   return (
-    <div>人员选择器</div>
+    <Select
+      mode={isMultiple ? 'multiple' : null}
+      placeholder={disabled ? null : placeholder}
+      value={isMultiple ? (value ? value.split(',') : []) : value}
+      disabled={disabled}
+      showArrow={!disabled}
+      showSearch={true}
+      style={{ width: '100%' }}
+      onFocus={selectFocus}
+      onChange={selectChange}
+    >
+      {pullDown.map(v => <Select.Option key={v.value} value={v.value}>{v.text}</Select.Option>)}
+    </Select>
   )
 
 }

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

+@import '~antd/es/style/themes/variable.less';
+.personGroup {
+  .groupUser {
+    .groupName {
+      margin-top: 10px;
+      background: #f1f8ff;
+      padding: 5px 10px;
+      font-weight: bold;
+      &:hover {
+        cursor: pointer;
+      }
+      .groupCheck {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        border-radius: 2px;
+        border: 1px solid #d9d9d9;
+        background: white;
+        margin-right: 5px;
+        position: relative;
+        top: 2px;
+        transition: all 0.5s;
+        &:hover {
+          border: 1px solid @primary-color;
+        }
+        &[type="true"] {
+          background: @primary-color;
+          &::after {
+            position: absolute;
+            display: table;
+            transform: rotate(45deg) scale(1) translate(-50%, -50%);
+            opacity: 1;
+            transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+            width: 5.7px;
+            height: 9.1px;
+            left: 20%;
+            top: 50%;
+            border: 2px solid #fff;
+            border-top: 0;
+            border-left: 0;
+            content: ' ';
+          }
+        }
+        &[type="other"] {
+          &::after {
+            width: 8px;
+            height: 8px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            background: @primary-color;
+            transform: translate(-50%, -50%) scale(1);
+            opacity: 1;
+            content: " ";
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

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

-import React, { useState, useEffect } from 'react';
-import { Select } from 'antd';
-import { getSelectName } from '../../../../apis/process';
-
-const { Option } = Select;
-
-const SelectTree = ({ value, onChange, schema }) => {
-
-  const { disabled, placeholder } = schema
-  const [selectList, setSelectList] = useState([]);
-  const [mode, setMode] = useState('');
-  // 判断当前时单选还是多选
-  const _configArray = schema.config.split('.');
-  const isMultiple = !!(_configArray[2] && _configArray[2] === 'n');
-
-  const val = value || schema.default;
-
-  const handleChange = value => {
-    onChange(value);
-  };
-
-  const getData = () => {
-    const arr = schema.config.split('.');
-    if (!arr.length) return false;
-    // 区别于搜索选择器
-    const dictionaryName = arr[1] || arr[0];
-    if (isMultiple) {
-      setMode('multiple');
-    } else {
-      setMode('');
-    }
-    getSelectName(dictionaryName).then(res => {
-      if (res.code === 0) {
-        let _list = res.data;
-        if (schema.filterKey) _list = _list.filter(item => item.nodeName === schema.filterKey);
-        setSelectList(_list);
-      } else {
-        onChange('请求错误');
-      }
-    });
-  };
-
-  useEffect(() => {
-    const handleInitData = Object.prototype.toString.call(val) === '[object String]' && val ? val.split(',') : val;
-    let _val = isMultiple ? handleInitData : val;
-    onChange(_val);
-  }, []);
-
-  return (
-    <Select
-      disabled={disabled}
-      mode={mode}
-      showSearch
-      optionFilterProp="children"
-      value={null}
-      onChange={handleChange}
-      onFocus={() => getData()}
-      placeholder={placeholder}
-      style={{ width: '100%' }}
-    >
-      {selectList.map((item, index) => {
-        return (
-          <Option value={item.nodeValue} key={index}>
-            {item.nodeValue}
-          </Option>
-        );
-      })}
-    </Select>
-  )
-
-}
-
-export default SelectTree

src/core/widgets/select/index.js

@@ -2,15 +2,15 @@ import ComboBox from './ComboBox'
 import RadioButton from './RadioButton'
 import CheckBox from './CheckBox'
 import CascadeSelector from './CascadeSelector'
-import CitySelect from './CitySelect'
+import PersonSelector from './PersonSelector'
 import AccountSelector from './AccountSelector'
 
 const select = {
   ComboBox,
   RadioButton,
   CheckBox,
+  PersonSelector,
   CascadeSelector,
-  CitySelect,
   AccountSelector,
 }
 

src/core/widgets/settings/form/TableNames/index.js

@@ -4,16 +4,9 @@ import { LoadUnattachedTables } from '../../../../../apis/process'
 
 const TableNames = (props) => {
 
-  // console.log('表名', props)
   const { value, schema, onChange } = props
   const [options, setOptions] = useState([])
 
-  // useEffect(() => {
-  //   if (options.length && !value) {
-  //     onChange(options[0].text)
-  //   }
-  // }, [options])
-
   const onFocus = async () => {
     const { data } = await LoadUnattachedTables()
     if (Array.isArray(data.root)) {
@@ -27,9 +20,10 @@ const TableNames = (props) => {
 
   return (
     <Select
-      // disabled={true}
+      disabled={true}
       onFocus={onFocus}
       showSearch
+      showArrow={false}
       value={value}
       onChange={onSelect}
       optionFilterProp="children"

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

@@ -4,6 +4,8 @@ import { LoadLedgers } from '../../../../../apis/process'
 
 const AccountName = (props) => {
 
+  console.log('props', props)
+
   const { value, onChange } = props
   const [options, setOptions] = useState([])
 

src/core/widgets/settings/groupSource/Fieldshine/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'
@@ -8,6 +8,8 @@ const { TreeNode } = TreeSelect
 
 const Fieldshine = (props) => {
 
+  console.log('props', props)
+
   const { addons, onChange, value } = props
   const { accountName } = addons.formData
 
@@ -46,10 +48,14 @@ const Fieldshine = (props) => {
     setVisible(true)
   }
 
+  // useEffect(() => {
+  //   addons.setValue(addons.dataPath, [])
+  // }, [accountName])
+
   return (
     <div className={styles.fieldshine}>
       <Input
-        value={value.length ? JSON.stringify(value) : null}
+        value={value && value.length ? JSON.stringify(value) : null}
         onClick={inputClick}
       />
       <Modal
@@ -62,9 +68,9 @@ const Fieldshine = (props) => {
       >
         <Form name="dynamic_form_nest_item" form={form} autoComplete="off">
           <Form.List name="field">
-            {(fields, { add, remove }) => (
+            {(value, { add, remove }) => (
               <>
-                {fields.map(({ key, name, ...restField }) => (
+                {value.map(({ key, name, ...restField }) => (
                   <Space
                     key={key}
                     style={{

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

@@ -13,7 +13,6 @@ const TextArea = ({ value, onChange, schema }) => {
     onChange(e.target.value)
   }
 
-
   return (
     <Input.TextArea
       maxLength={maxLength}