fc-caiwu-billdetail

安装包

npm install fc-caiwu-billdetail --save

注意

由于使用了antd-image-slide组件，需安装 npm install antd-image-slide并引入swiper

<link rel="stylesheet" href="http://public.fuyoukache.com/web/swiper.4.3.3.css" />
<script src="http://public.fuyoukache.com/web/swiper-4.4.6.rotate.min.js"></script>

webpack 配置

externals: {
  "Swiper": "Swiper",
  'antd-image-slide': 'antd-image-slide',
}

参数格式示例

dataMap 详情内容

属性	说明	类型	值
title	label 文字	string
dataIndex	数据中对应的 key	string
type	数据的类型	string/不传	file/image
render	生成复杂数据的渲染函数	function/不传

tableMap 表格内容

属性	说明	类型	值
title	label 文字	string
dataIndex	数据中对应的 key	string
type	数据的类型	string/不传	time/money/image
render	生成复杂数据的渲染函数	function/不传

detailData

属性	说明	类型	值
title	标题文字	string
showType	展示格式	string	board/table
dataMap	数据配置项
dataSource	数据数组	[]

const dataMap = [
  {
    title: "附件",
    dataIndex: "proofName",
    type: "file", // type: file/image 文件下载/截图展示
    render: (text, record) => {
      return `${text}-${record.paymentAccountName}`;
    }
  }
];

const tableMap = [
  {
    title: "发票金额",
    dataIndex: "invoiceMoneyD",
    type: "money", // type: time/money/image 时间/金额/截图展示
    // format: 'YYY-MM-DD',  // type为time时可配置时间格式，默认 YYYY-MM-DD HH:mm:ss
    render: (text, record) => {
      return `${record.operatorD}-${record.operatorNameD}`;
    }
  }
];

const detailData = [
  {
    title: "页面详情",
    showType: "board",
    dataMap: dataMap,
    dataSource: data
  },
  {
    title: "日志表格",
    showType: "table",
    dataMap: tableMap,
    dataSource: tableData
  }
];

接口附件格式：'[{name: 'xxx.xxx', url: 'xxx.xxxx.xxx'}, {name: '', url: ''}]'

示例

import BillDetail from "fc-caiwu-billdetail";
import {detailData} from "./data"; // detailData 格式见根目录 data.js

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className='App'>
        <title>详情</title>
        <BillDetail detailData={detailData}></BillDetail>
      </div>
    );
  }
}

演示

演示