fix: 增加一键布局功能

package.json

 {
     "name": "panda-xform",
-    "version": "2.9.4",
-    "description": "2.9.4: 时间传参问题，数值校验问题",
+    "version": "2.9.5",
+    "description": "2.9.5: 增加一键布局功能",
     "keywords": [
         "panda-xform"
     ],

src/core/FormDesigner/config/settings.js

@@ -46,6 +46,10 @@ const layoutWidgets = [
         required: true,
         disabled: '{{formData.title === "物联数据"}}',
       },
+      // description: {
+      //   title: '分组说明',
+      //   type: 'string',
+      // },
     },
   },
 ]
@@ -772,7 +776,6 @@ const selectWidgets = [
         title: '',
         name: '选项',
         type: 'array',
-        required: '{{formData.sourceType === "手动输入"}}',
         hidden: '{{formData.sourceType !== "手动输入"}}',
         default: [{ value: '选项一' }],
         widget: 'simpleList',
@@ -805,7 +808,6 @@ const selectWidgets = [
       dictionary: {
         title: '{{formData.sourceType}}',
         name: '{{formData.sourceType}}',
-        required: '{{formData.sourceType === "数据字典"}}',
         hidden: '{{formData.sourceType !== "数据字典"}}',
         type: 'string',
         widget: 'Dictionary',
@@ -815,7 +817,6 @@ const selectWidgets = [
       tableName: {
         title: '表名',
         name: '表名',
-        required: '{{formData.sourceType === "表数据"}}',
         hidden: '{{formData.sourceType !== "表数据"}}',
         type: 'string',
         widget: 'TableName',
@@ -824,8 +825,6 @@ const selectWidgets = [
       fieldName: {
         title: '字段名',
         name: '字段名',
-        required: true,
-        required: '{{formData.sourceType === "表数据"}}',
         hidden: '{{formData.sourceType !== "表数据"}}',
         type: 'string',
         widget: 'FieldName',
@@ -833,7 +832,6 @@ const selectWidgets = [
       },
       isMySite: {
         title: '仅显示本人所属的站点',
-        required: true,
         default: false,
         hidden: '{{formData.sourceType !== "站点"}}',
         type: 'boolean',
@@ -972,7 +970,6 @@ const selectWidgets = [
         title: '',
         name: '选项',
         type: 'array',
-        required: '{{formData.sourceType === "手动输入"}}',
         hidden: '{{formData.sourceType !== "手动输入"}}',
         default: [{ value: '选项一' }],
         widget: 'simpleList',
@@ -1003,7 +1000,6 @@ const selectWidgets = [
       dictionary: {
         title: '{{formData.sourceType}}',
         name: '{{formData.sourceType}}',
-        required: '{{formData.sourceType === "数据字典"}}',
         hidden: '{{formData.sourceType !== "数据字典"}}',
         type: 'string',
         widget: 'Dictionary',
@@ -1109,7 +1105,6 @@ const selectWidgets = [
         title: '',
         name: '选项',
         type: 'array',
-        required: '{{formData.sourceType === "手动输入"}}',
         hidden: '{{formData.sourceType !== "手动输入"}}',
         default: [{ value: '选项一' }],
         widget: 'simpleList',
@@ -1139,7 +1134,6 @@ const selectWidgets = [
       dictionary: {
         title: '{{formData.sourceType}}',
         name: '{{formData.sourceType}}',
-        required: '{{formData.sourceType === "数据字典"}}',
         hidden: '{{formData.sourceType !== "数据字典"}}',
         type: 'string',
         widget: 'Dictionary',

src/core/FormDesigner/index.js

@@ -6,7 +6,7 @@ import { settings, baseSettings, globalSettings } from './config'
 import widgets from '../widgets'
 import { saveTableConfig, GetTableConfigJson, ReloadTableFields } from '../../apis/process'
 import FormRender from '../FormRender'
-import { isObject } from '../../utils'
+import { isObject, getVerify, setFieldJson, getNanoid } from '../../utils'
 import Drag from '../components/Drag'
 import styles from '../../main.less'
 
@@ -43,6 +43,7 @@ const FormDesigner = (props, ref) => {
   }, [settings, tableName])
 
   const getJSON = (json, fieldName) => {
+    let nanoid = getNanoid()
     let properties = json?.properties
     let parent = {}
     let paths = []
@@ -69,30 +70,30 @@ const FormDesigner = (props, ref) => {
               child[s].tableNameParent = tableName
               child[s].tableTypeParent = json.tableType
               child[s].IsSystemField = IsSystemField
-              if (v === '(未分组)') {
-                ungroupedChild[s] = child[s]
-              }
+              // if (v === '(未分组)') {
+              //   ungroupedChild[s] = child[s]
+              // }
             }
           }
         } else {
           ungroupedChild[v] = {
             ...properties[v],
+            tableTypeParent: json.tableType,
             tableNameParent: tableName
           }
         }
       }
     }
     if (JSON.stringify(ungroupedChild) !== '{}') {
-      parent['(未分组)'] = {
+      parent[nanoid] = {
         title: title,
-        type: "object",
+        type: 'object',
         collapsed: false,
-        groupBase: {},
         properties: {
           ...ungroupedChild
         }
       }
-      paths.push('(未分组)')
+      paths.push(nanoid)
     }
     return {
       ...json,
@@ -150,11 +151,14 @@ const FormDesigner = (props, ref) => {
     if (errors.length) {
       return message.error('请按照提示完善表单内容')
     }
-    setVisible(true)
     let json = getJSON(designerRef.current.getValue(), fieldName)
+    let verify = getVerify(json)
+    if (verify === true) {
+      setVisible(true)
       setSchema(json)
       designerRef.current.setValue(json)
     }
+  }
 
   const submit = async () => {
     const errors = designerRef.current.getErrorFields()
@@ -162,10 +166,8 @@ const FormDesigner = (props, ref) => {
       return message.error('请按照提示完善表单内容')
     }
     let json = getJSON(designerRef.current.getValue(), fieldName)
-    // let groups = Object.keys(json.properties)
-    // if (groups.some(v => v.includes('_'))) {
-    //   return message.error('分组包含重复字段!')
-    // }
+    let verify = getVerify(json)
+    if (verify === true) {
       designerRef.current.setValue(json)
       const { code, data, msg } = await saveTableConfig(json)
       if (code === 0) {
@@ -174,6 +176,31 @@ const FormDesigner = (props, ref) => {
         message.error(msg)
       }
     }
+  }
+
+  const initLayout = () => {
+    const errors = designerRef.current.getErrorFields()
+    if (errors.length) {
+      return message.error('请按照提示完善表单内容')
+    }
+    let json = getJSON(designerRef.current.getValue(), fieldName)
+    let verify = getVerify(json)
+    if (verify === true) {
+      Modal.confirm({
+        title: '是否确定使用剩余附加字段一键生成表单?',
+        icon: <ExclamationCircleOutlined />,
+        centered: true,
+        cancelText: '取消',
+        okText: '确定',
+        onCancel: () => {
+          console.log('取消一键生成')
+        },
+        onOk: () => {
+          designerRef.current.setValue(setFieldJson(json, fieldName))
+        }
+      })
+    }
+  }
 
   const extraButtons = useMemo(() => {
     if (extra) {
@@ -186,6 +213,10 @@ const FormDesigner = (props, ref) => {
           text: '清空',
           onClick: clear
         },
+        {
+          text: '一键布局',
+          onClick: initLayout,
+        },
         {
           text: '预览',
           onClick: preview
@@ -193,8 +224,8 @@ const FormDesigner = (props, ref) => {
         {
           text: '提交',
           type: 'primary',
-          onClick: submit
-        }
+          onClick: submit,
+        },
       ]
     }
     return [false, false, false, false]

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

@@ -21,9 +21,9 @@ const CheckBox = (props) => {
 
   useEffect(() => {
     if (addons) {
-      addons.setValue(addons.dataPath, presetValue)
+      addons.setValue(addons.dataPath, presetValue || '')
     } else {
-      onChange(presetValue)
+      onChange(presetValue || '')
     }
   }, [presetValue])
 

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

@@ -15,9 +15,9 @@ const ComboBox = (props) => {
 
   useEffect(() => {
     if (addons) {
-      addons.setValue(addons.dataPath, presetValue)
+      addons.setValue(addons.dataPath, presetValue || '')
     } else {
-      onChange(presetValue)
+      onChange(presetValue || '')
     }
   }, [presetValue])
 
@@ -58,11 +58,11 @@ const ComboBox = (props) => {
     return children
   }, [sourceType, enums, isStoreID])
 
-  const handleChange = value => {
+  const handleChange = (value) => {
     if (isMultiple || isEdit) {
-      onChange(value.join(','))
+      onChange(value.join(',') || '')
     } else {
-      onChange(value)
+      onChange(value || '')
     }
   }
 

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

@@ -10,7 +10,7 @@ const RadioButton = (props) => {
 
   useEffect(() => {
     if (addons) {
-      addons.setValue(addons.dataPath, presetValue)
+      addons.setValue(addons.dataPath, presetValue || '')
     }
   }, [presetValue])
 

src/utils/index.js

 import React, { useState } from 'react';
+import { message } from 'antd';
 
 export function downloadFunc(url, name, target = '_self') {
   const a = document.createElement('a');
@@ -124,3 +125,99 @@ export const debounce = (fn) => {
     }, 500)
   }
 }
+
+//生成随机ID
+export function getNanoid(len = 6) {
+  var orgStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let returnStr = "";
+  for (var i = 0; i < len; i++) {
+    returnStr += orgStr.charAt(Math.floor((Math.random() * orgStr.length)));
+  }
+  return `分组名称_${returnStr}`
+}
+
+//手动校验配置信息
+export const getVerify = (json) => {
+  if (isObject(json)) {
+    let properties = json?.properties
+    if (isObject(properties)) {
+      for (let v in properties) {
+        // if (properties[v].title === '(未分组)') {
+        //   return message.error(`包含未分组字段,请将分组命名`)
+        // }
+        let child = properties[v]?.properties
+        if (isObject(child)) {
+          for (let s in child) {
+            const { widget, sourceType, options } = child[s]
+            if (['ComboBox', 'RadioButton', 'CheckBox'].includes(widget)) {
+              if (sourceType === '手动输入' && !options.length) {
+                return message.error(`字段【${s}】配置,选项值必填!`)
+              }
+              if (sourceType === '数据字典' && !dictionary) {
+                return message.error(`字段【${s}】配置,数据字典必填!`)
+              }
+              if (sourceType === '表数据' && !tableName && !fieldName) {
+                return message.error(`字段【${s}】配置,表名与字段名!`)
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  return true
+}
+
+const getInputSetting = ({ title, tableName, tableType }) => {
+  return {
+    "title": title,
+    "type": "string",
+    "widget": "TextInput",
+    "placeholder": "请输入内容",
+    "tableNameParent": tableName,
+    tableTypeParent: tableType,
+    "maxLength": 200,
+    "rules": [],
+    "uniqueVerify": null,
+    "required": false,
+    "disabled": false,
+    "isStoreID": false,
+    "isQRCode": false,
+    "groupStyle": {},
+    "labelWidth": 110
+  }
+}
+
+//将字段设置
+export const setFieldJson = (json, fieldName) => {
+  let properties = json?.properties
+  let keys = []
+  let parent = {}
+  let extaObj = {}
+  Object.keys(properties).forEach(v => {
+    parent[v] = properties[v]
+    let child = properties[v]?.properties
+    if (isObject(child)) {
+      Object.keys(child).forEach(s => {
+        keys.push(s)
+      })
+    }
+  })
+  fieldName.forEach(j => {
+    if (!keys.includes(j.name)) {
+      extaObj[j.name] = getInputSetting({ ...json, title: j.name })
+    }
+  })
+  if (JSON.stringify(extaObj) !== '{}') {
+    parent[getNanoid()] = {
+      title: '(未分组)',
+      type: "object",
+      collapsed: false,
+      properties: extaObj
+    }
+  }
+  return {
+    ...json,
+    properties: parent,
+  }
+}
\ No newline at end of file