xlyErp / xlyUmi

import React from 'react';
import { Table } from 'antd';
import type { TableProps } from 'antd';
import * as commonUtils from '@/utils/utils';

import style from './index.less';


interface PropsType {
  data: TableProps['dataSource'];
  headerColumn: TableProps['columns'];
}

const TableNew: React.FC<PropsType> = (props) => {
  const tableProps = {
    columns: TableHeader(props),
    dataSource: TableData(props),
    scroll: {
      // x: 'max-content',
      y: '100%',
    }
  };

  return (
    <div className={style.tableNew}>
      <Table<TableProps> {...tableProps} />
    </div>
  );
};


// 处理数据
const TableData = (props: PropsType): PropsType['data'] => {
  const { data = [] } = props;
  return data;
}

// 处理表头
const TableHeader = (props: PropsType): PropsType['headerColumn'] => {
  const { headerColumn = [], data = [] } = props;

  return headerColumn.map((colunm) => {
    colunm.ellipsis = true;
    // colunm.textWrap = 'word-break',
    if (!('dataIndex' in colunm)) return colunm;
    const { dataIndex } = colunm;
    if (dataIndex === 'sPartNameStatus') {
      interface TextJsonItem {
        sProcessName: string;
        sState: number;
      }
      return {
        ...colunm,
        render: (text: string, record: object) => {
          const textJson: TextJsonItem[] = commonUtils.convertStrToObj(text.replace(",]", ']'), []) as TextJsonItem[];
          console.log('=====xxx', text, textJson);
          return textJson.map(item => item.sProcessName).join('->');
        },
      };
    }
    return colunm;
  });
}

export default TableNew;