配置元数据

{
    borderColor: "String",
    backgroundColor: "String",
    style: "object",
    title: "string | ReactNode | (data) => (string | ReactNode)",
    footer: "string | ReactNode | (data) => (string | ReactNode)",
    tableStyle: "object",
    tbodyStyle: "object",
    trStyle: "object",
    tdStyle: "object",
    labelStyle: "object",
    dataStyle: "object",
    columnCount: "number(>=1)"
    labelWidthPercent: "number(>0 and <1)"
    labelSuffix: "string | ReactNode",
    label: {
        name: "string | ReactNode | (value, key, data) => (value | ReactNode)",
        name: { label: "string | ReactNode | (value, key, data) => (string | ReactNode)", style: "object", hidden: "boolean" },
        ...
    },
    data: {
        key: "value",
        ...
    },
    dataTransform: {
        name: "array | ReactNode | (value, key, data) => (string | ReactNode)",
        name: { transform: "array | ReactNode | (value, key, data) => (string | ReactNode)", style: "object", columnCount: "number", hidden: "boolean" },
        ...
    },
}
组件参数
borderColor = "#e8e8e8",    // 边框颜色 rgb(216, 236, 252)
backgroundColor = "#fafafa",// label单元格背景颜色 #e7f1fa
style = {},                 // 组件样式
title,                      // 详情表格头部标题 "string | ReactNode | (data) => (string | ReactNode)"
footer,                     // 详情表格尾部     "string | ReactNode | (data) => (string | ReactNode)"
tableStyle = {},            // 表格样式
tbodyStyle = {},            // 表格body样式
trStyle = {},               // 表格行样式
tdStyle = {},               // 表格单元格样式
labelStyle = {},            // label单元格样式
dataStyle = {},             // data单元格样式
columnCount = 1,            // 数据行数
labelWidthPercent = 0.35,   // label单元格宽度百分比
labelSuffix = ":",          // label单元格后缀字符串
label = {},                 // label配置(决定显示字段和排序)
data = {},                  // 需要显示的数据
dataTransform = {},         // 数据转换配置
defaultLoadData = true,     // 是否默认加载数据
dataUrl,                    // 数据请求地址
requestMethod = "get",      // 请求提交 Method
requestOptions = {},        // 请求 fetch options(选项)
requestInterceptor,         // 请求之前的拦截 ({ url, options }) => (boolean | {url, options })
getData,                    // 请求响应josn中取数据 (resData, response) => (Object<data>)
dataJsonPath,               // 请求响应josn中取数据的JsonPath
requestError,               // 请求失败处理 (resData, response, error) => (Object<resData> | undefined | null)
requestSuccessful,          // 请求成功回调 (resData, response) => ()
spinProps = {},             // Spin自定义属性

TODO

  • 填充不足一行的单元格 OK
  • 行列合并配置 OK
  • label字体优化 OK
  • 支持远程数据加载
  • label宽度支持绝对宽度值 labelWidthPercent(使用calc(100% - ${width}px))
  • 使用Descriptions组件实现(目前使用<table />实现)

使用示例 Demo

组件截图

组件截图

组件截图

使用代码
data: {
  name: "freemenL",
  deptName: "技术研发部 xxx部门 xxx部门 xxx部门",
  dutyType: "早班",
  startTime: "9:00",
  endTime: "6:00",
  onRange: "9:00-9:30",
  offRange: "6:00-11:59",
  duration: "1小时",
  stats: 1,
},
label: {
  name: <span style={{ color: "#4A90E2" }}>班次名称</span>,
  deptName: "所属部门",
  dutyType: "班次类型",
  startTime: { label: "上班时间", style: { color: "red" } },
  endTime: "下班时间",
  onRange: "上班打卡时间范围",
  offRange: "下班打卡时间范围",
  duration: <span><Icon type="info-circle" /> 午休时间</span>,
  stats: "状态",
},
dataTransform: {
  endTime: { style: { color: "red" } },
  duration: (value, key, data) => {
    // eslint-disable-next-line no-console
    console.log("duration | ", data);
    return `${value} [${key}]`;
  },
  deptName: { columnCount: 2 },
  // startTime: { columnCount: 3 },
  stats: [{ value: 1, label: "成功" }, { value: 0, label: "失败" }]
},

<DetailForm
  style={{ width: "65%" }}
  // style={{ width: 800 }}
  title="表格标题"
  footer="表格尾部"
  tableStyle={{}}
  tbodyStyle={{}}
  columnCount={3}
  labelWidthPercent={0.45}
  labelSuffix=":"
  data={data}
  label={label}
  dataTransform={dataTransform}
/>
文档更新时间: 2019-08-14 18:32   作者:lizw