lu-lowcode-package-form 0.10.80 → 0.10.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.10.80",
+  "version": "0.10.81",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@dnd-kit/core": "^6.1.0",

package/src/App.jsx

@@ -3,7 +3,7 @@ import './App.css';
 import { Button, Input, Select } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
 import Draggable from 'react-draggable';
-import { throttle , debounce} from 'lodash';
+import { throttle, debounce } from 'lodash';
 import { SortList } from "./components"
 import { TinyMCEEditor } from './components'
 import { PrinterOutlined } from '@ant-design/icons';
@@ -81,16 +81,16 @@ function App() {
   const [testCalcHidden, setTestCalcHidden] = useState(false);
   const [readonly, setReadonly] = useState(true);
 
-  const testdebounce = useCallback( debounce((param1,param2)=>{
-    console.log("testdebounce param1",param1)
-    console.log("testdebounce param2",param2)
-  },200))
+  const testdebounce = useCallback(debounce((param1, param2) => {
+    console.log("testdebounce param1", param1)
+    console.log("testdebounce param2", param2)
+  }, 200))
 
 
   useEffect(() => {
-    testdebounce(1,2)
-    testdebounce(11,22)
-    testdebounce(111,222)
+    testdebounce(1, 2)
+    testdebounce(11, 22)
+    testdebounce(111, 222)
     // console.log("testRef //////", testRef.current)
   }, [testRef.current])
   const [cols, setCols] = React.useState(3);
@@ -196,40 +196,75 @@ function App() {
 
           <FormContainerWrapper cols={cols} className="" ref={formRef} >
 
-          <Field.WithSingleSelect
-                ref={testRef}
-                request={async (params) => {
-                  console.log("request params", params)
-                  return {
-                    code: 0, data: {
-                      list:
-                        [
-                          { label: '选项1', value: '1', table_fill: [{ fill_tianchong1:{ label: '选项1', value: '1'}, fill_tianchong2:{ label: '选项2', value: '2'} }] },
-                          { label: '选项2', value: '2' },
-                          { label: '选项3', value: '3' }
-                        ]
-                    }
+            <Field.RadioGroup
+              buttonStyle="solid"
+              optionType="button"
+              label="菜单类型"
+              __id="routeType"
+              options={[{ label: "菜单分组", value: 999 }, { label: "URL", value: 1 }, { label: "绑定表单", value: 2 }]} />
+
+            <Field.Select label="绑定表单"
+              option_label={"formTitle"}
+              __id="menuFormTemplateId"
+              withIds={["routeType"]}
+              withFunc={(fieldsValue) => {
+                const result = fieldsValue?.routeType == 2 ? true : false
+                // console.log("withFunc menuFormTemplateId", fieldsValue)
+                // console.log("withFunc menuFormTemplateId result", result)
+                return result
+              }} />
+
+
+
+            <Field.Input label="菜单URL" __id="route"
+              withIds={["routeType"]}
+              withFunc={(fieldsValue) => {
+                const result = fieldsValue?.routeType == 1 ? true : false
+                // console.log("withFunc route", fieldsValue)
+                // console.log("withFunc route result", result)
+                return result
+              }} />
+            <Field.TextArea label="备注" __id="remark"
+              withIds={["routeType"]}
+              withFunc={(fieldsValue) => {
+                return fieldsValue?.routeType != 999 ? true : false
+              }}
+            />
+
+            <Field.WithSingleSelect
+              ref={testRef}
+              request={async (params) => {
+                console.log("request params", params)
+                return {
+                  code: 0, data: {
+                    list:
+                      [
+                        { label: '选项1', value: '1', table_fill: [{ fill_tianchong1: { label: '选项1', value: '1' }, fill_tianchong2: { label: '选项2', value: '2' } }] },
+                        { label: '选项2', value: '2' },
+                        { label: '选项3', value: '3' }
+                      ]
                   }
-                }}
-                option_label="label"
-                option_value="value"
-                fillRules={[
-                  {
-                    "id": "636d3924-0298-4e9b-809a-26d4a10d7b19",
-                    "type": 1,
-                    "source": "table_fill",
-                    "target": "table_fill",
-                    "subRules": [
-                      {
-                        "id": "636d3924-0298-4e9b-809a-26d4a10d7b11",
-                        "type": 0,
-                        "source": "fill_tianchong1",
-                        "target": "fill_tianchong1",
-                      },
-                    ]
-                  },
+                }
+              }}
+              option_label="label"
+              option_value="value"
+              fillRules={[
+                {
+                  "id": "636d3924-0298-4e9b-809a-26d4a10d7b19",
+                  "type": 1,
+                  "source": "table_fill",
+                  "target": "table_fill",
+                  "subRules": [
+                    {
+                      "id": "636d3924-0298-4e9b-809a-26d4a10d7b11",
+                      "type": 0,
+                      "source": "fill_tianchong1",
+                      "target": "fill_tianchong1",
+                    },
+                  ]
+                },
 
-                ]} label="子表填充数据源" __id="fill_datasource1" />
+              ]} label="子表填充数据源" __id="fill_datasource1" />
             <Layout.FormRow layout={'1'}>
               <Field.Table label="测试主子表填充" __id="table_fill" isAllowAdd={true} isAllowCopy={false} >
 
@@ -370,7 +405,7 @@ function App() {
 
               ]} label="发票类型" options={[{ label: '选项1', value: '1', shuilv: 15, }, { label: '选项2', value: '2', shuilv: 50 }, { label: '选项3', value: '3', shuilv: 2 }]} __id="fapiaoleixing" />
 
-            <Field.Number label="税率（%）" __id="shuilv"  />
+            <Field.Number label="税率（%）" __id="shuilv" />
 
             <Field.WithSingleSelect ref={testRef} fillRules={[
               {
@@ -468,7 +503,7 @@ function App() {
             <Layout.FormRow layout={'1'}>
               <Field.Table label="子表格" __id="table" isAllowAdd={true} isAllowCopy={false} >
 
-                <Field.Number label="税率（%）"  __id="shuilv_table" withIds={[
+                <Field.Number label="税率（%）" __id="shuilv_table" withIds={[
                   "shuilv"
                 ]}
                   withFill={{

package/src/components/form-container/index.jsx

@@ -158,6 +158,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
     // 初始化字段的级联关系
     const initializeFieldVisibility = (reloadFields = false) => {
+        console.log("initializeFieldVisibility")
         const fieldValues = form.getFieldsValue();
         for (let key of dependencyMap.current.keys()) {
             handleFieldsWith(key, fieldValues, true);
@@ -183,10 +184,14 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 handleFillRules(identifier, parentIdentifier, fieldValues, dependent?.fillRules)
             }
             dependentChildren.forEach(child => {
-                if (child.component.props.withFunc && typeof child.component.props.withFunc === 'function') {
-                    needRefresh = handleFieldsVisible(fieldValues, child, parentIdentifier)
+                if (child.component.props.withVisibleFunc && typeof child.component.props.withVisibleFunc === 'function') {
+                    let needRefresh_ = handleFieldsVisibleFunc(fieldValues, child, parentIdentifier)
+                    needRefresh = needRefresh || needRefresh_
                 }
 
+                if (child.component.props.withVisible)
+                    handleFieldsVisible(fieldValues, child, parentIdentifier, dependent?.componentName)
+                
                 if (!init && child.component.props.withFill)
                     handleFieldsWithFill(fieldValues, child, parentIdentifier, dependent?.componentName)
 
@@ -305,9 +310,9 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
     }
     // 处理级联显示隐藏 @return {boolean} 是否需要重新渲染表单的字段
-    const handleFieldsVisible = (fieldValues, child, parentIdentifier) => {
+    const handleFieldsVisibleFunc = (fieldValues, child, parentIdentifier) => {
         let needRefresh = false;
-        const childShouldBeVisible = child?.component?.props?.withFunc(fieldValues);
+        const childShouldBeVisible = child?.component?.props?.withVisibleFunc(fieldValues);
         const childIdentifier = child?.identifier;
         if (dependencyMap.current.has(childIdentifier)) {
             const childData = dependencyMap.current.get(childIdentifier);
@@ -319,6 +324,99 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         }
         return needRefresh
     }
+    // 处理级联显示隐藏
+    const handleFieldsVisible = async (fieldValues, child, parentIdentifier, componentName) => {
+        let needRefresh = false;
+        const withFill = child?.component?.props.withVisible;
+        const withDataFetch = child?.component?.props.withDataFetch;
+        let withFillIndex = 0
+        let withFillGroup = ""
+        let childIdentifier = child.identifier;
+
+        if (parentIdentifier && Array.isArray(parentIdentifier) && parentIdentifier.length > 1) {
+            withFillGroup = parentIdentifier.filter(item => typeof item == "string").join(".")
+            withFillIndex = parentIdentifier[parentIdentifier.length - 1]
+            if (childIdentifier.startsWith(`${withFillGroup}.`)) {
+                childIdentifier = [...parentIdentifier, childIdentifier.replace(`${withFillGroup}.`, "")]
+            }
+        }
+        // 被依赖字段不是子表字段，依赖字段是子表字段的情况
+        else if (childIdentifier.indexOf(".") >= 0) {
+            childIdentifier = childIdentifier.split(".")
+            let table_values = getParamValue("fieldsValue", childIdentifier[0], fieldValues, [])
+            if (Array.isArray(table_values) && table_values.length > 0)
+                for (let index = 0; index < table_values.length; index++) {
+                    await handleFieldsVisible(fieldValues, child, [childIdentifier[0], index], componentName)
+                }
+            return
+        }
+        let withDatas = [];
+        // 先处理依赖数据
+        if (withFill?.withData && withFill?.withData.length > 0 && withDataFetch && typeof withDataFetch === 'function') {
+            for (let index = 0; index < withFill?.withData.length; index++) {
+                const element = withFill?.withData[index];
+                let params = {}
+                params.tableName = element.withTable.table_name
+                params.filter = {}
+                for (let index = 0; index < element.withCondition.length; index++) {
+                    const { value: condition_value, column: condition_column } = element.withCondition[index];
+                    let filter_value = getParamValue(condition_value.group_key, condition_value.field_key, fieldValues, withDatas)
+                    if (Array.isArray(filter_value)) {
+                        if (Array.isArray(childIdentifier) && filter_value.length > withFillIndex) {
+                            filter_value = filter_value[withFillIndex]
+                        }
+                    }
+                    if (componentName == "Field.WithSingleSelect" && filter_value && filter_value?.value) filter_value = filter_value.value
+                    params.filter[condition_column.column_name] = filter_value
+                }
+
+                // 访问接口获取数据
+                const response = await withDataFetch(params)
+                if (response.code === 0 && response.data.list) {
+                    withDatas.push({
+                        id: element.id,
+                        data: response.data.list
+                    })
+                }
+            }
+        }
+
+        // 构造计算公式
+        let formula;
+        if (withFill.value && withFill.value.length > 0) {
+            formula = withFill.value.map(item => {
+                let result = "";
+                const { insert, attributes } = item
+                if (typeof insert !== "string") {
+                    if (insert?.span && attributes && attributes.tagKey && attributes.id) {
+                        result = getParamValue(attributes.tagKey, attributes.id, fieldValues, withDatas)
+                        if (Array.isArray(result)) {
+                            if (Array.isArray(childIdentifier) && result.length > withFillIndex) {
+                                result = result[withFillIndex]
+                            }
+                            else result = JSON.stringify(result)
+                        }
+                        else if (result.length > 0) result = `"${result}"`
+                    }
+                }
+                else result = insert
+                return result
+            })
+        }
+        if (dependencyMap.current.has(childIdentifier)) {
+            const childData = dependencyMap.current.get(childIdentifier);
+            if (formula && formula.length > 0) {
+                console.log(`${childIdentifier} 计算公式:`, formula)
+                const formulaResult = evalFormula(formula);
+                if (childData.show != formulaResult) {
+                    childData.show = formulaResult;
+                    dependencyMap.current.set(childIdentifier, childData);
+                    needRefresh = true;
+                }
+            }
+        }
+        return needRefresh
+    }
     // 处理级联数据源
     // 处理级联填充
     const handleFieldsWithFill = async (fieldValues, child, parentIdentifier, componentName) => {
@@ -449,7 +547,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
         timeoutRef.current = setTimeout(() => {
             const fieldValues = form.getFieldsValue();
-            const lockStatus_ = lockStatus.current; 
+            const lockStatus_ = lockStatus.current;
             lockStatus.current = 0
             let needRefresh = false;
             if (!lastFormValues.current) lastFormValues.current = {}
@@ -458,6 +556,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 let field = changedFieldsState.current[key];
                 if (!isEqual(field.value || "", getLastFieldValue(field.name) || "")) {
                     if (lockStatus_ != 1) {
+                        console.log("handleFieldsWith field.name", field.name)
                         needRefresh = handleFieldsWith(field.name, fieldValues);
                     }
                     lastFormValues.current[field.name] = field.value;
@@ -560,7 +659,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
                     let childComponent
                     if (isTable || isLayoutComponent) {
-                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, getTableWithIds, onTableRemoveRow: handleTableRemoveRow,removeLastFieldsValues, form: form, fieldName: identifier, onCustomChange, initializeFormRender, mode, recordFieldsChange })
+                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, getTableWithIds, onTableRemoveRow: handleTableRemoveRow, removeLastFieldsValues, form: form, fieldName: identifier, onCustomChange, initializeFormRender, mode, recordFieldsChange })
                     }
                     else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect" || componentName === "Show.WithTable") {
                         childComponent = <Form.Item
@@ -594,7 +693,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                             {({ getFieldsValue }) => {
                                 const fieldsValue = getFieldsValue();
                                 let element = React.cloneElement(child, {
-                                    onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow,removeLastFieldsValues, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender, recordFieldsChange,
+                                    onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, removeLastFieldsValues, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender, recordFieldsChange,
                                     shouldUpdateKey: shouldUpdateKey.current[identifier],
                                 })
                                 return componentName === "show.WithTable" ? <>{element}</> : <Form.Item
@@ -615,7 +714,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                             name={identifier}
                             rules={rules}
                         >
-                            {React.cloneElement(child, { form: form, fieldName: identifier, onCustomChange, initializeFormRender, recordFieldsChange,removeLastFieldsValues })}
+                            {React.cloneElement(child, { form: form, fieldName: identifier, onCustomChange, initializeFormRender, recordFieldsChange, removeLastFieldsValues })}
                         </Form.Item>
                     }
                     return (