表单

src/components/DDComponents/TableField/index.js

@@ -1,73 +1,84 @@
+import React, { useMemo, useState, useEffect } from 'react';
 import { Button } from 'antd';
-import React, { useMemo } from 'react';
 import DDComponents from '../index';
 import style from './index.less';
 
 function TableField(props) {
-  const { item, value, onChange } = props;
+  const { item, onChange } = props;
+  const [value, setValue] = useState([]);
 
   const getEmptyValue = () => {
-    return item.children.map(children => ({
+    let data = item.children.map(children => ({
       name: children.props.id,
       value: '',
     }));
+    data.id = Math.random();
+    return data;
   };
   const getChildren = (item, data) => {
     let cur = data.find(d => d.name == item.props.id);
     const childrenChange = value => {
       cur.value = value;
-      onChange(JSON.stringify(localValue));
+      onChange(JSON.stringify(value));
     };
     return DDComponents({ item, onChange: childrenChange, value: cur.value });
   };
 
-  const localValue = useMemo(() => {
-    let v = [];
-    try {
-      v = JSON.parse(value);
-    } catch (error) {}
-    if (v.length == 0) {
-      let data = getEmptyValue();
-      v.push(data);
-    }
-    return v;
-  }, [value]);
+  // const localValue = useMemo(() => {
+  //   let v = [];
+  //   try {
+  //     v = JSON.parse(value);
+  //   } catch (error) {}
+  //   if (v.length == 0) {
+  //     let data = getEmptyValue();
+  //     v.push(data);
+  //   }
+  //   return v;
+  // }, [value]);
 
   const addRow = () => {
-    let newValue = [...localValue, getEmptyValue()];
-
+    let newValue = [...value, getEmptyValue()];
+    setValue(newValue);
     onChange(JSON.stringify(newValue));
   };
 
   const removeRow = index => {
-    let newValue = [...localValue];
+    let newValue = [...value];
     newValue.splice(index, 1);
 
+    setValue(newValue);
     onChange(JSON.stringify(newValue));
   };
+  useEffect(() => {
+    setValue([getEmptyValue()]);
+  }, []);
 
   return (
     <div>
       <table className={style.table}>
-        <tr>
-          <th></th>
-          {item.children.map(item => (
-            <th>{item.props.label}</th>
-          ))}
-          <th>操作</th>
-        </tr>
-        {localValue.map((curItem, index) => (
+        <thead>
           <tr>
-            <td>{index + 1}</td>
+            <th></th>
             {item.children.map(item => (
-              <td>{getChildren(item, curItem)}</td>
+              <th>{item.props.label}</th>
             ))}
-            <td>
-              {localValue.length > 1 && <a onClick={() => removeRow(index)}>删除</a>}
-              {/* <a>复制</a> */}
-            </td>
+            <th>操作</th>
           </tr>
-        ))}
+        </thead>
+        <tbody>
+          {value.map((curItem, index) => (
+            <tr key={curItem.id}>
+              <td>{index + 1}</td>
+              {item.children.map(item => (
+                <td>{getChildren(item, curItem)}</td>
+              ))}
+              <td>
+                {value.length > 1 && <a onClick={() => removeRow(index)}>删除</a>}
+                {/* <a>复制</a> */}
+              </td>
+            </tr>
+          ))}
+        </tbody>
       </table>
       <Button style={{ marginTop: 20 }} onClick={addRow}>
         {item.props.actionName}

src/components/DDComponents/index.js

@@ -46,27 +46,37 @@ export default function DDComponents(props) {
   let component = null;
   switch (item.componentName) {
     case 'TextField': //单行输入
-      component = <Input disabled={disabled} placeholder={placeholder} onChange={onChange} />;
+      component = (
+        <Input
+          disabled={disabled}
+          placeholder={placeholder}
+          onChange={e => onChange?.(e.target.value)}
+        />
+      );
       break;
     case 'TextareaField': //多行输入
       component = (
-        <Input.TextArea disabled={disabled} placeholder={placeholder} onChange={onChange} />
+        <Input.TextArea
+          disabled={disabled}
+          placeholder={placeholder}
+          onChange={e => onChange?.(e.target.value)}
+        />
       );
       break;
     case 'NumberField': //数字输入
-      component = <NumberField disabled={disabled} unit={unit} />;
+      component = <NumberField disabled={disabled} unit={unit} onChange={onChange} />;
       break;
     case 'DDSelectField': //单选框
       component = <DDSelectField options={options} onChange={onChange} disabled={disabled} />;
       break;
     case 'DDMultiSelectField': //多选框
-      component = <DDMultiSelectField disabled={disabled} options={options} />;
+      component = <DDMultiSelectField disabled={disabled} options={options} onChange={onChange} />;
       break;
     case 'DDDateField': //日期控件
-      component = <DDDateField format={format} disabled={disabled} />;
+      component = <DDDateField format={format} disabled={disabled} onChange={onChange} />;
       break;
     case 'DDDateRangeField': //时间区间控件
-      component = <DDDateRangeField format={format} disabled={disabled} />;
+      component = <DDDateRangeField format={format} disabled={disabled} onChange={onChange} />;
       break;
     case 'TextNote': //文本说明控件
       console.info('文本说明控件!');
@@ -97,7 +107,7 @@ export default function DDComponents(props) {
       component = <InnerContactField onChange={onChange}></InnerContactField>;
       break;
     case 'DepartmentField': //部门控件
-      component = <DepartmentField />;
+      component = <DepartmentField onChange={onChange} />;
       break;
     case 'RelateField': //关联审批单
       console.info('关联审批单控件未渲染!');

src/pages/PurchaseAdmin/PurchaseList/Detail/AuditDetailed.js

@@ -18,17 +18,24 @@ const AuditDetailed = props => {
 
   const behavior = useMemo(() => {
     let data = {};
-    let watchList = {};
     items.forEach(d => {
       const item = d.props;
       if (item.behaviorLinkage) {
         const key = item.id;
+        const options = item.options.map(o => {
+          let data;
+          try {
+            data = JSON.parse(o);
+          } catch (error) {
+            data = { key: o, value: o };
+          }
+          return data;
+        });
         item.behaviorLinkage.forEach(b => {
           const value = b.value;
           b.targets.forEach(t => {
-            data[t.fieldId] = { key, value };
+            data[t.fieldId] = { key, value: options.find(o => o.key == value)?.value };
           });
-          watchList[key] = true;
         });
       }
     });
@@ -73,6 +80,9 @@ const AuditDetailed = props => {
     if (behavior[id]) {
       const { key, value } = behavior[id];
       let currentValue = form.getFieldValue(key);
+      try {
+        currentValue = JSON.parse(currentValue);
+      } catch (error) {}
       // 判断是否需要渲染
       if (currentValue instanceof Array) {
         if (currentValue?.indexOf(value) == -1) return null;
@@ -80,20 +90,17 @@ const AuditDetailed = props => {
         if (currentValue != value) return null;
       }
     }
-    const formLabel = useMemo(() => {
-      let formLabel = '';
-      if (bizAlias) {
-        formLabel = bizAlias;
-      } else {
-        try {
-          // 判断label是否为JSON数组
-          formLabel = JSON.parse(label).join(',');
-        } catch (error) {
-          formLabel = label;
-        }
+    let formLabel;
+    if (bizAlias) {
+      formLabel = bizAlias;
+    } else {
+      try {
+        // 判断label是否为JSON数组
+        formLabel = JSON.parse(label).join(',');
+      } catch (error) {
+        formLabel = label;
       }
-      return formLabel;
-    }, []);
+    }
 
     const component = DDComponents({ item });
     if (!component) return null;