fix: 新增控件转化功能

package.json

 {
   "name": "panda-xform",
-  "version": "5.9.4",
-  "description": "5.9.4 关联表单必填逻辑问题",
+  "version": "5.9.5",
+  "description": "5.9.5 新增控件转化功能",
   "keywords": [
     "panda-xform"
   ],

src/core/FormDesigner/config/settings.js

@@ -917,7 +917,6 @@ const selectWidgets = [
       name: '单选框',
       type: 'string',
       widget: 'RadioButton',
-      require: true,
     },
     setting: {
       widget: {
@@ -1032,7 +1031,6 @@ const selectWidgets = [
       name: '复选框',
       type: 'string',
       widget: 'CheckBox',
-      require: true,
     },
     setting: {
       widget: {
@@ -2530,7 +2528,7 @@ const advancedWidgets = [
       widget: 'IDCard',
       width: '100%',
       preview: true,
-      showField:['身份号码','姓名', '名族', '住址','出生','性别', '失效日期', '签发机关','签发日期'],
+      showField: ['身份号码', '姓名', '名族', '住址', '出生', '性别', '失效日期', '签发机关', '签发日期'],
     },
     setting: {
       widget: {
@@ -2555,10 +2553,10 @@ const advancedWidgets = [
         title: '字段说明',
         type: 'string',
       },
-      showField:{
+      showField: {
         title: '身份信息',
         type: 'array',
-        widget:'CheckBoxGroup',
+        widget: 'CheckBoxGroup',
       },
       // hiddenCondition: {
       //   title: '隐藏条件',

src/core/FormDesigner/index.js

-import React, { useRef, useState, forwardRef, useImperativeHandle, useMemo, useLayoutEffect } from 'react'
+import React, { useRef, useState, forwardRef, useImperativeHandle, useMemo, useLayoutEffect, useEffect } from 'react'
 import { message, Modal, Button, Popover } from 'antd'
 import { ExclamationCircleOutlined } from '@ant-design/icons'
 import QRcode from 'qrcode.react'
@@ -114,6 +114,10 @@ const FormDesigner = (props, ref) => {
     }
   }
 
+  useEffect(() => {
+    window.designerRef = designerRef
+  }, [designerRef])
+
   useLayoutEffect(() => {
     if (tableName) {
       getTableConfig(tableName)

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

-import React, { useMemo } from 'react'
-import { Select } from 'antd'
+import React, { useEffect, useMemo, useState } from 'react'
+import { Select, Radio, Space } from 'antd'
 import { widgetData, getStyles } from '../../../../../constant'
+import styles from './index.less'
+import { isObject } from '../../../../../utils'
+import Drag from '../../../../components/Drag'
+
+const getNewSchema = (schema, { fieldName, widget }) => {
+  let parent = schema?.properties
+  if (isObject(parent)) {
+    Object.keys(parent).forEach(keys => {
+      let child = parent[keys]?.properties
+      if (isObject(child)) {
+        Object.keys(child).forEach(k => {
+          if (k === fieldName) {
+            let info = {
+              tableNameParent: child[k].tableNameParent,
+            }
+            if (widget === 'TextInput') {
+              child[k] = { title: '文本', type: 'string', widget: 'TextInput', placeholder: '', ...info, }
+            }
+            if (widget === 'TextArea') {
+              child[k] = { title: '多行文本', type: 'string', widget: 'TextArea', placeholder: '', width: '100%', rows: 5, ...info, }
+            }
+            if (widget === 'ComboBox') {
+              child[k] = {
+                title: '下拉框',
+                type: 'string',
+                widget: 'ComboBox',
+                sourceType: '手动输入',
+                options: [{ value: '选项一' }],
+                ...info,
+              }
+            }
+            if (widget === 'RadioButton') {
+              child[k] = {
+                title: '单选框',
+                name: '单选框',
+                type: 'string',
+                widget: 'RadioButton',
+                sourceType: '手动输入',
+                options: [{ value: '选项一' }],
+                ...info,
+              }
+            }
+            if (widget === 'CheckBox') {
+              child[k] = {
+                title: '复选框',
+                name: '复选框',
+                type: 'string',
+                widget: 'CheckBox',
+                sourceType: '手动输入',
+                options: [{ value: '选项一' }],
+                ...info,
+              }
+            }
+          }
+        })
+      }
+    })
+  }
+  return schema
+}
 
 const WidgetType = (props) => {
 
-  const { value, onChange } = props
+  const { value, onChange, addons } = props
+  const [visible, setVisible] = useState(false)
+  const [radioValue, setRadioValue] = useState(value)
+
+  const transform = () => {
+    if (value === radioValue) {
+      return
+    }
+    let { $id } = addons?.formData
+    let schema = window?.designerRef?.current.getValue()
+    let newSchema = getNewSchema(schema, { fieldName: $id, widget: radioValue })
+    window?.designerRef?.current.setValue(newSchema)
+    setVisible(false)
+  }
+
+  const radioChange = (e) => {
+    setRadioValue(e.target.value)
+  }
+
+  useEffect(() => {
+    if (visible) {
+      setRadioValue(value)
+    }
+  }, [visible])
 
   return (
-    <span
-      style={{
-        borderRadius: '5px',
-        padding: '0 7px',
-        border: '1px solid',
-        ...getStyles(widgetData[value]?.type)
-      }}>
-      {widgetData[value]?.name}
-    </span>
+    <div className={styles.widgetType}>
+      <span
+        className={styles.tag}
+        style={getStyles(widgetData[value]?.type)}>
+        {widgetData[value]?.name}
+      </span>
+      <span
+        className={styles.text}
+        onClick={() => setVisible(true)}
+      >
+        转化为其他控件
+      </span>
+      <Drag
+        width={300}
+        title='转化为其他控件'
+        visible={visible}
+        bodyStyle={{ height: '200px', overflow: 'auto' }}
+        onOk={transform}
+        onCancel={() => setVisible(false)}
+        getContainer={false}
+        destroyOnClose
+      >
+        <Radio.Group
+          onChange={radioChange}
+          value={radioValue}
+        >
+          <Space direction="vertical">
+            <Radio value={'TextInput'}>文本</Radio>
+            <Radio value={'TextArea'}>多行文本</Radio>
+            <Radio value={'ComboBox'}>下拉框</Radio>
+            <Radio value={'RadioButton'}>单选框</Radio>
+            <Radio value={'CheckBox'}>复选框</Radio>
+          </Space>
+        </Radio.Group>
+      </Drag>
+    </div>
   )
 
 }

src/core/widgets/settings/groupBase/WidgetType/index.less

+.widgetType {
+  display: flex;
+  .tag {
+    border-radius: 5px;
+    padding: 0 7px;
+    border: 1px solid;
+  }
+  .text {
+    font-size: 12px;
+    margin-left: 10px;
+    position: relative;
+    bottom: -4px;
+    color: #2b9dff;
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+}
\ No newline at end of file