使用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 (
<Form onSubmit={this.handleSearch} layout="inline" className="searchForm">
<Row>
<Col md={6}>
<FormItem label="过户编号" labelCol={{ span: 3 }}>
{getFieldDecorator('transferCode')(<Input/>)}
</FormItem>
</Col>
<Col md={6}>
<FormItem label="申请时间">
{getFieldDecorator('askDate')(<DateRange onRef={this.onRef}/>)}
</FormItem>
</Col>
<Col md={6}>
<FormItem label="订单编号">{getFieldDecorator('orderCode')(<Input/>)}</FormItem>
</Col>
<Col md={6}>
<FormItem label="品名">{getFieldDecorator('productName')(<Input/>)}</FormItem>
</Col>
</Row>
<Row>
<Col md={6}>
<FormItem label="仓库">{getFieldDecorator('license')(<Input/>)}</FormItem>
</Col>
<Col md={6}>
<FormItem label="钢厂">{getFieldDecorator('name')(<Input/>)}</FormItem>
</Col>
<Col md={6}>
<FormItem label="材质">{getFieldDecorator('material')(<Input/>)}</FormItem>
</Col>
<Col md={6}>
<FormItem label="规格">{getFieldDecorator('steel')(<Input/>)}</FormItem>
</Col>
</Row>
<div className="searchFormBtn" style={{ height: 0 }}>
<div style={{ position: 'relative', bottom: -21, textAlign: 'right' }}>
<Button type="primary" htmlType="submit">查询</Button>
<Button onClick={this.handleFormReset}>清空</Button>
<Button>导出</Button>
</div>
</div>
</Form>
);
}
}
const WrappedConditionInputForm = Form.create()(ConditionInputForm);
/*
表格
*/
function ListItems(props) {
const { list, tableHead } = props;
/*if(!list || list.length < 1){
return (
<div className="listNoData"><img src={require('../../../assets/datanone.png')}/>暂无内容</div>
)
}*/
return (
<div className={styles.list}>
<div className={styles.tableChildtable}>
<div className={styles.childtableThead}>
<ul>
{tableHead.map((item, index) => {
return (
<li key={index} style={{ width: item.width }}>
{item.title}
</li>
);
})}
</ul>
</div>
{list && list.length ? (
list.map((item, index) => {
return (
<div key={index} className={styles.childtableTbody}>
<div className={styles.childtableTbodyTop}>
<div className={`fl ${styles.fl}`}>
<div className={styles.topInner}>
<div className={styles.orderCode}>
订单编号：
<b className="blue">{item.orderCode}</b>
</div>
<div>
买家：
<b>{item.buyerName}</b>
</div>
<div>
联系人：
<b>{item.traderName} {item.traderMobile} </b>
</div>
<div>
<b></b>
</div>
</div>
<div className={styles.topInner}>
<div>
<label htmlFor="">过户编号：</label>
<b>{item.transferCode}</b>
</div>
<div>
<label htmlFor="">申请时间：</label>
<b>{new Date(item.askTime).format('yyyy-MM-dd HH:mm:ss')}</b>
</div>
<div>
<label htmlFor="" className="blue">备注：</label>
<b className="blue">{item.remark}</b>
</div>
</div>
</div>
<div className="fr">
<span className="brown">过户状态：{item.orderStateStr}</span>
</div>
</div>
<div className={styles.childtableTbodyMiddle}>
{item.detailList.map((itemInner, indexInner) => {
return (
<ul key={indexInner}>
{tableHead.map((itemHead, indexHead) => {
let arr = [];
let text = '';
itemHead.key.map((itemArr, indexArr) => {
if (itemArr === 'weight') {
text =
<span>{itemInner[itemArr] ? (Math.round(itemInner[itemArr] * 1000) / 1000).toFixed(3) : 0}</span>;
} else if (itemArr === 'price' || itemArr === 'money') {
text =
<span>￥{itemInner[itemArr] ? (Math.round(itemInner[itemArr] * 100) / 100).toFixed(2) : 0}</span>;
} else {
text = <span>{itemInner[itemArr]}</span>;
}
arr.push(text);
});
return (
<li
key={indexHead}
style={{ width: itemHead.width }}
className={classNames(
indexHead <= 0 ? styles.borderLeftNone : '',
)}
>
<div className={classNames('li-inner')}>
{arr.map((arrItem, arrIndex) => {
return <p key={arrIndex}> {arrItem}</p>;
})}
</div>
</li>
);
})}
</ul>
);
})}
</div>
{
<div className={styles.childtableTbodyBottom}>
<div className={`fl ${styles.fl}`}>
<div>
<b>总计</b>
</div>
<div className={styles.sumItemWrap}>
<div className={styles.sumItem}>
<span className={styles.sumItemInner}>
<span className="color9"> 数量：</span>
<span className="blue">9</span>件
</span>
<span className={styles.sumItemInner}>
<span className="color9">重量：</span>
<span className="blue">9.22</span>吨
</span>
<span className={styles.sumItemInner}>
<span className="color9">金额：</span>
<span className="blue">¥12192.00 </span>
</span>
</div>
<span className={styles.sumItemInner}>
<span className="color9"> 仓库名称：</span>
<span>上海百隆库</span>
</span>
</div>
</div>
<div className="fr">
<Button className="ghostButton">查看详情</Button>
<Button type="primary" style={{ marginLeft: 10 }}>填写实提</Button>
</div>
</div>
}
</div>
);
})
) : (
''
)}
</div>
<Pagination defaultCurrent={1} total={50} showQuickJumper className="page"/>
</div>
);
}
function TransferOrderList({ children, transferOrderList, dispatch, location, history }) {
const { list, conditions } = transferOrderList;
const listProps = {
list,
tableHead: [
{
title: '商品',
key: ['productProperty'],
width: '40%',
},
{
title: '数量',
key: ['num'],
width: '15%',
},
{
title: '重量',
key: ['weight'],
width: '15%',
},
{
title: '单价（元/吨）',
key: ['price'],
width: '15%',
},
{
title: '金额',
key: ['money'],
width: '15%',
},
],
};
const tabProps = {
tabContent: [
{
num: 20,
title: '全部',
orderState: -1,
content: <ListItems {...listProps} />,
},
{
num: 20,
title: '待打印',
orderState: 0,
content: <ListItems {...listProps} />,
},
{
num: 20,
title: '已打印',
orderState: 1,
content: '1',
},
{
num: 20,
title: '已取消',
orderState: 2,
content: <ListItems {...listProps} />,
},
],
};
return (
<div className={styles.waitSaleOrder}>
<WrappedConditionInputForm conditions={conditions}/>
<div style={{ padding: '0 10px' }}>
<Tab {...tabProps} />
</div>
</div>
);
}
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 (
<Tabs onChange={handleTagChange} activeKey={orderState?orderState.toString():'-1'}>
{
tabContent ?
tabContent.map((item) => {
return (
<TabPane tab={<span>{item.title}<b>（{item.num}）</b></span>} key={item.orderState}>
{
item.content
}
</TabPane>
);
}) : ''
}
</Tabs>
);
}
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 (
<span>
<DatePicker className={Styles.datePicker}
disabledDate={this.disabledStartDate}
value={startValue}
onChange={this.onStartChange}
onOpenChange={this.handleStartOpenChange}
allowClear={false}
suffixIcon/>~
<DatePicker className={Styles.datePicker}
disabledDate={this.disabledEndDate}
value={endValue}
onChange={this.onEndChange}
open={endOpen}
onOpenChange={this.handleEndOpenChange}
allowClear={false}
suffixIcon/>
</span>
);
}
}
export default DateRange;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;
}