使用Antd组件在React中写列表样式
一、页面预览
二、代码
1.mock数据
{
list: [{
id:0,
detailList: [{
detailId:0,
productProperty: "普卷 Q235B 5.75*1500*C 鞍钢 H2559855",
num: "10",
weight: "10",
price: "10",
money: "10"
},{
detailId:1,
productProperty: "普卷 Q235B 5.75*1500*C 鞍钢 H2559855",
num: "10",
weight: "10",
price: "10",
money: "10"
}],
orderCode: "1234567890",
buyerName: "王路飞",
traderName: "哪里托",
traderMobile: "15112341234",
transferCode: "GH1234567890",
askTime: "Wed Mar 27 2019 10:03:15 GMT+0800",
remark: "备注备注备注备注",
orderStateStr: "打印中"
},
{
id:1,
detailList: [{
detailId:0,
productProperty: "普卷 Q235B 5.75*1500*C 鞍钢 H2559855",
num: "10",
weight: "10",
price: "10",
money: "10"
},{
detailId:1,
productProperty: "普卷 Q235B 5.75*1500*C 鞍钢 H2559855",
num: "10",
weight: "10",
price: "10",
money: "10"
}],
orderCode: "1234567890",
buyerName: "王路飞",
traderName: "哪里托",
traderMobile: "15112341234",
transferCode: "GH1234567890",
askTime: "Wed Mar 27 2019 10:03:15 GMT+0800",
remark: "备注备注备注备注",
orderStateStr: "打印中"
}],
}2.List.js
import React from 'react';
import withRouter from 'umi/withRouter';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Button, DatePicker, Pagination, Modal, Table } from 'antd';
import classNames from 'classnames';
import { Layout } from 'components';
import _ from 'lodash';
import styles from '../app.less';
const FormItem = Form.Item;
const dispatch = window.g_app._store.dispatch;
const { PopTab, DateRange } = Layout;
const confirm = Modal.confirm;
/*
搜索区域
*/
class ConditionInputForm extends React.Component {
/*查询*/
handleSearch = (e) => {
e.preventDefault();
const { form } = this.props;
form.validateFields((err, fieldsValue) => {
if (err) {
return;
}
console.log(fieldsValue);
});
};
/*重置查询条件*/
handleFormReset = () => {
const { form } = this.props;
form.resetFields();
};
onRef = (ref) => {
this.child = ref;
};
render() {
const { getFieldDecorator } = this.props.form;
return (
);
}
}
const WrappedConditionInputForm = Form.create()(ConditionInputForm);
/*
表格
*/
function ListItems(props) {
const { list, tableHead } = props;
/*if(!list || list.length < 1){
return (
}/)
暂无内容
)
}*/
return (
{tableHead.map((item, index) => {
return (
-
{item.title}
);
})}
{list && list.length ? (
list.map((item, index) => {
return (
订单编号：
{item.orderCode}
买家：
{item.buyerName}
联系人：
{item.traderName} {item.traderMobile}
{item.transferCode}
{new Date(item.askTime).format('yyyy-MM-dd HH:mm:ss')}
{item.remark}
过户状态：{item.orderStateStr}
{item.detailList.map((itemInner, indexInner) => {
return (
{tableHead.map((itemHead, indexHead) => {
let arr = [];
let text = '';
itemHead.key.map((itemArr, indexArr) => {
if (itemArr === 'weight') {
text =
{itemInner[itemArr] ? (Math.round(itemInner[itemArr] * 1000) / 1000).toFixed(3) : 0};
} else if (itemArr === 'price' || itemArr === 'money') {
text =
￥{itemInner[itemArr] ? (Math.round(itemInner[itemArr] * 100) / 100).toFixed(2) : 0};
} else {
text = {itemInner[itemArr]};
}
arr.push(text);
});
return (
-
{arr.map((arrItem, arrIndex) => {
return
{arrItem}
;
})}
);
})}
);
})}
{
总计
数量：
9件
重量：
9.22吨
金额：
¥12192.00
仓库名称：
上海百隆库
}
);
})
) : (
''
)}
);
}
export default withRouter(connect((transferOrderList) => transferOrderList)(TransferOrderList));
3.自定义组件
（1）Tab.js
import React from 'react';
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
function Tab(props) {
const { tabContent, orderState, handleTagChange } = props;
return (
{
tabContent ?
tabContent.map((item) => {
return (
{item.title}（{item.num}）} key={item.orderState}>
{
item.content
}
);
}) : ''
}
);
}
export default Tab;
（2）DateRange.js
import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
import Styles from './DateRange.less';
class DateRange extends React.Component {
state = {
startValue: moment().subtract(1, 'months'),
endValue: moment(),
};
componentDidMount = () => {
this.props.onRef(this);
this.props.onChange(this.state)
};
/*重置查询条件*/
resetDate = () => {
const that = this;
this.setState({
startValue: moment().subtract(1, 'months'),
endValue: moment(),
},function() {
this.props.onChange(that.state);
});
};
disabledStartDate = (startValue) => {
const endValue = this.state.endValue;
if (!startValue || !endValue) {
return false;
}
return startValue.valueOf() > moment().valueOf();
//return startValue.valueOf() < moment(endValue).subtract(6, 'months').valueOf() || startValue.valueOf() > endValue.valueOf();
};
disabledEndDate = (endValue) => {
const startValue = this.state.startValue;
if (!endValue || !startValue) {
return false;
}
if(moment(startValue).subtract(-6, 'months') > moment()){
return endValue.valueOf() < startValue.valueOf() || endValue.valueOf() > moment().valueOf();
}
return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() > moment(startValue).subtract(-6, 'months').valueOf();
};
onChange = (field, value) => {
this.setState({
[field]: value,
}, () => {
this.props.onChange(this.state);
});
};
onStartChange = (value) => {
this.onChange('startValue', value);
};
onEndChange = (value) => {
this.onChange('endValue', value);
};
handleStartOpenChange = (open) => {
if (!open) {
this.setState({ endOpen: true });
}
};
handleEndOpenChange = (open) => {
this.setState({ endOpen: open });
};
render() {
let { startValue, endValue, endOpen } = this.state;
return (
4.样式
（1）app.less
.waitSaleOrder{
background: #fff;
padding: 10px 0 30px;
}
.list {
.tableChildtable {
background: #fff;
box-sizing: border-box;
color: #333;
text-align: center;
.childtableThead,
.childtableTbodyMiddle {
ul {
display: table;
width: 100%;
table-layout: fixed;
&.more {
li {
width: 100%;
text-align: left;
padding-left: 10px;
line-height: 40px;
height: 40px;
}
}
li {
display: table-cell;
// float: left;
width: 8%;
height: 35px;
line-height: 35px;
border-left: 1px solid#E3E3E3;;
border-top: 1px solid#E3E3E3;;
margin-left: -1px;
margin-top: -1px;
padding-left: 5px;
}
}
}
.childtableThead {
background: #fafafa;
border: 1px solid #E3E3E3;
margin-bottom: 10px;
ul li {
border: 0;
height:34px;
line-height:34px;
}
}
.childtableTbody {
// border: 1px solid #eae2e2;
margin: -1px 0 15px;
border: 1px solid #eae2e2;
ul li {
min-height: 40px;
line-height: 40px;
&.borderLeftNone {
border-left: 0;
}
&.borderTopNone {
border-top: 0;
}
.li-inner {
vertical-align: middle;
display: inline-block;
line-height: 1;
text-align: left;
&.contact {
cursor: pointer;
}
&.li-inner-action {
padding-top: 10px;
}
button {
margin-bottom: 10px;
min-width: 116px;
}
}
span {
line-height: 20px;
vertical-align: middle;
display: inline-block;
width: 100%;
word-break: break-all;
}
}
.childtableTbodyTop,
.childtableTbodyBottom {
overflow: hidden;
width: 100%;
line-height: 28px;
padding:7px 10px;
display: flex;
.sumItemWrap{
flex: 1;
>div{
float: left;
}
}
}
.childtableTbodyTop {
background: #F2F2F2;
.fl{
flex:1;
}
.topInner>div {
min-width:24%;
padding-right: 1%;
text-align: left;
float: left;
&.orderCode {
color: #333;
b{
text-decoration: underline;
}
.radius {
width: 4px;
height: 4px;
display: inline-block;
background: #333;
border-radius: 100%;
vertical-align: middle;
margin-right: 5px;
}
}
}
}
.childtableTbodyMiddle {
// background: #f7f7f7;
// border: 1px solid #eae2e2;
}
.childtableTbodyBottom {
border-top: 1px solid#E3E3E3;
//min-height: 47px;
//line-height: 47px;
text-align: left;
.fl{
// width:calc(100% - 180px);
flex:1;
display: flex;
}
.sumItem{
margin-right: 20px;
.sumItemInner{
margin-right: 25px;
}
}
}
}
}
}
.page {
float: right;
}
（2）DateRange.less
.datePicker{
width:47% !important;
}