fix: 修改详情页列展示组件

src/components/CustomizeColumn/index.tsx

-/**
- * 详情页分裂显示，
- * 这里类似table 组件， 同样有column
+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-11 10:46:57
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-11 15:46:24
+ * @Description: 申请单基础信息
  */
-import React from 'react';
+import React, { CSSProperties } from 'react';
+import { Descriptions } from 'antd';
 import MellowCard, { MellowCardProps } from '@/components/MellowCard';
 import styles from './index.less';
-import cx from 'classnames';
 
-type ColumnType = {
-  dataIndex: string,
-  title: string,
-  render?: (value?: any, record?: any, dataIndex?: string) => React.ReactNode
+export interface ColumnProps {
+  span?: number,
+  contentStyle?: CSSProperties,
+  labelStyle?: CSSProperties,
 }
 
-interface Iprops extends MellowCardProps {
+export interface DataItem {
   /**
-   * 列
+   * 标题
    */
-  columns: { [key: string]: ColumnType[] },
+  title: React.ReactNode,
   /**
-   * 数据
+   * 值
+   */
+  value: React.ReactNode,
+  /**
+   * DescriptionItem props
    */
-  dataSource: {
-    [key: string]: any
-  }
+  columnProps?: ColumnProps,
 }
 
-const CustomizeColumn: React.FC<Iprops> = (props: Iprops) => {
-  const { columns, dataSource, ...rest } = props;
+interface IProps extends MellowCardProps {
+  /**
+   * 数据
+   */
+  data: DataItem[],
+  /**
+   * column
+   */
+  column: number
+};
+
+const defaultColumnProps: ColumnProps = {
+  labelStyle: {
+    width: 104,
+  },
+};
 
+const CustomizeColumn: React.FC<IProps> = (props: IProps) => {
+  const { data, column, ...rest } = props;
   return (
-    <MellowCard {...rest}>
-      <div className={styles.container}>
-        {
-          Object.keys(columns).map((_item) => {
-            return (
-              <div className={styles.col} key={_item}>
-                {
-                  columns[_item].map((_row, index) => {
-                    const length = columns[_item].length;
-                    return (
-                      <div className={cx(styles.row, { [styles.lastRow]: index === length - 1 })} key={_row.dataIndex}>
-                        <span className={styles.title}>{_row.title}</span>
-                        {
-                          _row.render && (_row.render(dataSource[_row.dataIndex], dataSource, _row.dataIndex))
-                          || (<span>{dataSource[_row.dataIndex]}</span>)
-                        }
-                      </div>
-                    )
-                  })
-                }
-              </div>
-            )
-          })
-        }
-      </div>
+    <MellowCard
+      bodyStyle={{
+        paddingBottom: 0,
+      }}
+      // className={styles.basicInfo}
+      {...rest}
+    >
+      <Descriptions column={column}>
+        {data.map((item, index) => (
+          <Descriptions.Item
+            key={index}
+            label={item.title}
+            {...({...defaultColumnProps, ...item.columnProps} || defaultColumnProps)}
+          >
+            {item.value}
+          </Descriptions.Item>
+        ))}
+      </Descriptions>
     </MellowCard>
-  )
-}
+  );
+};
 
-export default CustomizeColumn
+export default CustomizeColumn;