fix: 代客下单添加商品数量锚点统计

src/components/FormDetailHeader/index.tsx

@@ -105,9 +105,11 @@ const FormDetailHeader: React.FC<FormDetailHeaderProps> = ({
                     <Anchor onClick={(e) => e.preventDefault()} showInkInFixed={false} targetOffset={200}>
                       {
                         schema['properties'] && Object.values(schema['properties']).map((item: itemProps, index) => {
-                          const {id, title} = item['x-component-props']
+                          const { countAmountMap } = ctx.formContext
+                          const { id, title, showTotal = false } = item['x-component-props']
                           if(id && title) {
-                            return (<Link key={index} href={`#${id}`} title={title} />)
+                            const _title = showTotal ? ( countAmountMap ? `${title}(${countAmountMap[id]})` : `${title}(0)` ) : title
+                            return (<Link key={index} href={`#${id}`} title={_title} />)
                           }
                         })
                       }

src/formSchema/effects/useFormDetail.tsx

@@ -21,6 +21,9 @@ export const useFormDetail = () => {
   // 用于收集 schema表单内置组件Form表单的校验error
   const [innerFormErrors, setInnerFormErrors] = useState<number>(0)
 
+  // 需要统计条目数和对应schema title的映射
+  const [countAmountMap, setCountAmountMap] = useState<any>()
+
    useEffect(() => {
      if(amount > 0) {
        setFormProcess(() => (inputAmount/amount).toFixed(2))
@@ -32,48 +35,74 @@ export const useFormDetail = () => {
    * 若需要统计表单有效字段完成度，需要把此函数注入到NiceForm的effects里面
    * @param ctx FormActions
    */
-   const useAttachmentChangeForContext = (ctx: ISchemaFormActions | ISchemaFormAsyncActions) => {
-     FormEffectHooks.onFormMount$().subscribe(() => {
-       setFormProcess(0) // 表单初始化至0
-       const fieldTree = ctx.getFormGraph()
-       let fieldAmount = 0
-       for(let item in fieldTree) {
-         const value = fieldTree[item]
-         if(value['displayName'] === "FieldState" && value['visible'] && value['display']) {
-           ++fieldAmount
-           effectFields.push(value['name'])
-         }
-       }
-       setAomunt(fieldAmount)
-     })
+  const useAttachmentChangeForContext = (ctx: ISchemaFormActions | ISchemaFormAsyncActions) => {
+    FormEffectHooks.onFormMount$().subscribe(() => {
+      setFormProcess(0) // 表单初始化至0
+      const fieldTree = ctx.getFormGraph()
+      let fieldAmount = 0
+      for(let item in fieldTree) {
+        const value = fieldTree[item]
+        if(value['displayName'] === "FieldState" && value['visible'] && value['display']) {
+          ++fieldAmount
+          effectFields.push(value['name'])
+        }
+      }
+      setAomunt(fieldAmount)
+    })
+
+    FormEffectHooks.onFormValuesChange$().subscribe(values => {
+      // @todo 若输入再清除 其实表单值存在 只不过为''或者undefined
+      // 编辑的时候 初始值可能会有很多 过滤有效字段数
+      setInputAomunt(() => {
+        let inputNumber = 0
+        Object.keys(values.values).forEach(item => {
+          if(effectFields.includes(item)) {
+            ++inputNumber
+          }
+        })
+        return inputNumber
+      })
+    })
+  }
 
-     FormEffectHooks.onFormValuesChange$().subscribe(values => {
-       // @todo 若输入再清除 其实表单值存在 只不过为''或者undefined
-       // 编辑的时候 初始值可能会有很多 过滤有效字段数
-       setInputAomunt(() => {
-         let inputNumber = 0
-         Object.keys(values.values).forEach(item => {
-           if(effectFields.includes(item)) {
-             ++inputNumber
-           }
-         })
-         return inputNumber
-       })
-     })
+  /**
+   * 收集表单数组类型数据长度，生成长度数值和crad title字字符映射
+   * 若需要统计表单数组类型数据长度，同时把长度值更新至Anchor title上面，则需要把此函数注入到NiceForm的effects里面
+   * @param ctx FormActions
+   * @param keys String[]
+   */
+  const useAnchorCountChangeForContext = (ctx: ISchemaFormActions | ISchemaFormAsyncActions, keys: string[]) => {
+    if(Array.isArray(keys)) {
+      keys.forEach(element => {
+        FormEffectHooks.onFieldValueChange$(element).subscribe(state => {
+          // 过滤出title字符串
+          const _graphKeys = Object.keys(ctx.getFormGraph())
+          const _hasKeyIndex = _graphKeys.findIndex(item => item.indexOf('products') !== -1)
+          if(_hasKeyIndex >= 0) {
+            setCountAmountMap(() => ({
+              ...countAmountMap,
+              [_graphKeys[_hasKeyIndex].split('.')[0]]: state['value']['length']
+            }))
+          }
+        })
+      })
+    }
+  }
 
-   }
 
   // 需共享的状态
   const formContext = {
     data: formData,
     formProcess,
     innerFormErrors,
+    countAmountMap,
     ctl: {
       setFormData,
       setFormProcess,
       setInnerFormErrors
     },
     useAttachmentChangeForContext,
+    useAnchorCountChangeForContext
   }
 
   return {

src/pages/transaction/saleOrder/agentOrder/index.tsx

@@ -554,6 +554,9 @@ const AgentOrderDetail: React.FC<AgentOrderDetailProps> = (props) => {
             // 注入表单完成进度
             formContext.useAttachmentChangeForContext(ctx)
 
+            // 注入表单数组类型数据长度值同步至Anchor
+            formContext.useAnchorCountChangeForContext(ctx, ['products'])
+
           }}
           expressionScope={{
             paymentColumns: paymentEditColumns,

src/pages/transaction/saleOrder/agentOrder/schema/index.ts

@@ -151,13 +151,14 @@ const basicInfo: ISchema = {
 }
 
 // 订单商品
-export const orderProduct: ISchema = {
+export const orderProducts: ISchema = {
   "x-index": 2,
   type: 'object',
   "x-component": 'MellowCard',
   "x-component-props": {
     title: getIntl().formatMessage({id: 'purchaseOrder.orderCollect.schema.title2'}),
-    id: 'orderProducts'
+    id: 'orderProducts',
+    showTotal: true,
   },
   properties: {
     products: {
@@ -413,7 +414,7 @@ export const orderAddSchema: ISchema = {
     properties: {
       basicInfo,
       submitInfo,
-      orderProduct,
+      orderProducts,
       payInfo,
       invoiceInfo,
       otherInfo,