从前端视角看转转售后业务

"formInfo": [
  {
    "tip": "",// 提示信息
    "title": "收货状态",// 表单名称
    "placeholder": "",// placeholder信息
    "type": "",//组件类型（例如对于输入框需要区分是普通输入框还是textarea）
    "componentRef": "refname",// 组件ref值/表单key值（唯一）
    "componentName": "componentName",// 组件名（同一个表单可能会出现多个同名组件）
    "options": [
      {
        "id": "1",
        "name": "我已收到货",
        "nonRequiredComponentNames": "unlock", // // 联动信息：选择当前选项之后需要隐藏的组件（配置componentRef）
        "isDefault": "", // 是否是默认值
        "children": [], // 子组件
        "requiredFields": [// 联动组件ref以及option
          {
            "requiredRef": "reasonId",
            "requiredOptions": ""
          }
        ]
      }
    ],
    "rules": [   // 表单组件校验规则
      {
        "name": "isRequire",
        "value": "1",
        "message": "收货状态必填",
        "messageType": "alert"
      }
    ]
  }
]
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

<div v-for=“(formItemInfo, index) in formInfo” :key=“index”>
  // 通用组件手
  <form-item-action-sheet
    v-show="!formItemInfo.needHide"
    :key="formItemInfo.componentRef"
    :ref="formItemInfo.componentRef"
    :formItemInfo="formItemInfo"
    @change="onActionSheetChange"
  />
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

export default (requestApi, option = {}) => {
  const { title, filterConfig = [], wrapperParams = {}, getColumns, ...options } = option

  //  ......省略部分代码

  const getTableData = useCallback(
    (params, formData) => {
      const { current, pageSize, sorter: s = {}, filters: f = {} } = params
      // 处理getTableData返回的表格的属性和方法
      // 过滤掉筛选表单中的null、undefined空值，''和 0不会过滤
      const filterNullObj = objFilter(
        formData || {},
        (_, value) => value !== null && value !== undefined
      )

      //  ......省略部分代码

      return requestApi({
        ...wrapperParams,
        ...p,
        ...filterNullObj
      }).then((res = {}) => ({
        total: +res.totalCount || 0,
        list: res.dataList || res.ticketDownloadTasks || []
      }))
    },
    [requestApi, wrapperParams]
  )

  const result = useAntdTable(getTableData, {
    defaultPageSize: 5,
    form,
    ...options
  })
  const { refresh } = result
  const { submit } = result.search
  const columns = useMemo(() getColumns && getColumns(refresh, wrapperParams), [
    wrapperParams,
    refresh,
    getColumns
  ])

  result.search = {
    ...result.search,
    // 返回筛选框的配置信息
    filterConfig: typeof filterConfig === 'function' ? filterConfig(submit) : filterConfig,
    form
  }
  return result
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

const FastInput = React.forwardRef(({supportBatch, ...otherProps}, ref) => {
  const [mode, setMode] = useState('print') // print 打标机模式  edit 手动录入模式
  //  ......省略部分代码

  // 将当前输入框聚焦并选中
  const selectAll = usePersistFn(() {
    inputRef.current.focus({
      cursor: 'all'
    })
  })

  // 监听输入框是否可见，不可见-> 可见则需要聚焦且选中文本
  const inViewPort = useInViewport(wrapRef)

  const { run: printUpdateForm, flush, cancel } = useDebounceFn(
    (value) => {
      otherProps.onSubmit ? otherProps.onSubmit(value) : otherProps.onChange(value)
       //  在每次出发提交方法之后，再次全选，减少用户操作
      ;inputRef.current.focus({
        cursor: 'all'
      })
    },
    { wait: 200 }
  )

  // 手写模式，按回车才更新表单
  const editUpdateForm = (value) => {
   //  同上，调用提交方法，并选中
  //  ......省略部分代码
  }
  // 监听所在浏览器页签是否可见 -切换为所在页签自动聚焦并选中
  useEffect(() {
    inputRef.current.focus()
    const revalidate = () {
      if (!isDocumentVisible()) return
      selectAll()
    }
    if (typeof window !== 'undefined' && window.addEventListener){
      window.addEventListener('visibilitychange', revalidate, false)
    }
    return () {
      window.removeEventListener('visibilitychange', revalidate, false)
    }
  }, [selectAll])

  // 监听所在输入框时候位于可见区域，当移动到可见区域时，自动聚焦并选中
  useUpdateEffect(() {
    if (inViewPort) selectAll()
  }, [inViewPort])

  // 只有打标模式才通过防抖通知父元素
  const onChange = usePersistFn((e) => {
    //  ......省略部分代码
    if (mode === 'print') {
      printUpdateForm(values)
    }
  })

  // 监听 Enter键- 打标模式下当前防抖立即调用；输入模式下则直接通知父元素更新
  const onPressEnter = usePersistFn((e) => {
    if (mode === 'print') {
      flush()
    }
    if (mode === 'edit') {
      editUpdateForm(e.target.value)
    }
  })

  // 切换模式；取消当前防抖
  const transform = (mode) => {
    if (mode === 'print') {
      cancel()
    }
    inputRef.current.focus()
    setMode(mode)
  }
  return (
    <span ref={wrapRef}>
      <CompInput
        ref={inputRef}
        {...otherProps}
        notallow={onPressEnter}
        value={value}
        notallow={onChange}
        suffix={
          // 输入框后面的icon以及点击切换mode
          //  ......省略部分代码
        }
      />
    </span>
  )
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.