pro/src/components/x-form/utils/index.tsx

import { XFormTypes } from '@/types/x-form/model'
import { ProColumns } from '@ant-design/pro-components'
import Switch from '@/components/switch'
import { Checkbox, DatePicker, Input, Radio, Select, TreeSelect } from 'antd'
import request from '@/request'
import { convertToBool, genProTableColumnWidthProps } from '@/utils'


const getValueType = (column: XFormTypes.IColumn) => {
  switch (column.type) {
    case 'input':
      return 'text'
    case 'select':
      return 'select'
    case 'date':
      return 'date'
    case 'switch':
      return 'switch'
    case 'radio':
      return 'radio'
    case 'checkbox':
      return 'checkbox'
    case 'textarea':
      return 'textarea'
    case 'tree':
      return 'treeSelect'
    default:
      return 'text'
  }
}

//根据type返回对应的组件
const getComponent = (column: XFormTypes.IColumn) => {
  const type = getValueType(column) as any
  switch (type) {
    case 'input':
      return Input
    case 'select':
      return Select
    case 'date':
      return DatePicker
    case 'switch':
      return Switch
    case 'radio':
      return Radio
    case 'checkbox':
      return Checkbox
    case 'textarea':
      return Input.TextArea
    case 'tree':
    case 'treeSelect':
      return TreeSelect
    default:
      return Input
  }
}


export const transformAntdTableProColumns = (columns: XFormTypes.IColumn[], overwriteColumns?: ProColumns[]) => {

  const overwriteKeys = [] as string[]

  return (columns || []).map(item => {
    const { value, props, multiple, checkStrictly } = item

    const { width, fieldProps: _fieldProps } = genProTableColumnWidthProps(item.width)
    const fieldProps: ProColumns['fieldProps'] = {
      dataFiledNames: props,
      ...(multiple ? { multiple: true } : {}),
      ...(checkStrictly ? { treeCheckStrictly: true } : {}),
      ..._fieldProps,
    }

    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const formItemProps: ProColumns['formItemProps'] = (_form, _config) => {

      return {
        rules: item.rules?.map(i => {
          return {
            required: i.required,
            message: i.message
          }
        }),
        ...(value ? { valuePropName: value } : {})
      }
    }

    const rowProps = item.gutter ? { gutter: item.gutter } : { gutter: [ 16, 0 ], }
    const colProps = item.span ? { span: item.span } : {}

    const type = getValueType(item)

    const overwrite = overwriteColumns?.find(i => i.dataIndex === item.prop)
    if (overwrite) {
      overwriteKeys.push(item.prop)
    }

    return {
      title: item.label,
      dataIndex: item.prop,
      key: item.prop,
      width,
      valueType: type,
      hideInSearch: !item.search,
      hideInTable: item.hide,
      fieldProps,
      formItemProps,
      colProps,
      rowProps,
      request: item.dicUrl ? async (params, props) => {
        const { fieldProps: { dataFiledNames } } = props
        const { value, res: resKey, label } = dataFiledNames || {}
        const url = `/${item.dicUrl.replace(/^:/, '/')}`
        return request[item.dicMethod || 'get'](url, params).then(res => {
          return (res.data?.[resKey] || res.data || []).map((i: any) => {
            // console.log(i)
            const disabled = 'disabled' in i ? i.disabled :
                    ('status' in i ? !convertToBool(i.status) : false)
            return {
              title: i[label || 'label'],
              label: i[label || 'label'],
              value: i[value || 'id'],
              disabled,
              data: i
            }
          })
        })
      } : undefined,
      renderFormItem: (_scheam, config) => {
        const Component = getComponent(item) as any
        const { options, ...props } = config as any

        if ([ 'tree', 'treeSelect' ].includes(_scheam.valueType as string)) {
          return <Component {...props} treeData={options}/>
        }
        if (_scheam.valueType as string === 'select') {
          return <Select {...props} options={options}/>
        }

        return <Component {...config} />
      },
      render: (text: any, record: any) => {
        if (type === 'switch' || type === 'checkbox' || type === 'radio') {
          return <Switch size={'small'} value={record[item.prop]}/>
        }
        if (item.colorFormat) {
          return <span style={{ color: item.colorFormat }}>{text}</span>
        }
        return text
      },
      ...overwrite
    } as ProColumns
  }).concat(overwriteColumns?.filter(i => !overwriteKeys.includes(i.dataIndex)) || [])

}