Skip to content

S
shuniu-admin-react
Commit d9a87e8a authored by superman's avatar superman
Browse files
Options

产品列表页面增加筛选表单

parent 013540b4
Expand all Show whitespace changes
Inline Side-by-side
Showing with 595 additions and 246 deletions
.idea/workspace.xml
View file @ d9a87e8a
This diff is collapsed.
src/components/MainHeader.jsx
View file @ d9a87e8a
......@@ -15,21 +15,27 @@ export default class MainHeader extends Component {
render() {
const {breadcrumb, title} = this.props;
const {breadcrumb, title, operation} = this.props;
return (
<div className="main-header">
<Row>
<Row >
<Col span="8">
<Breadcrumb>
{ breadcrumb.map((b, i)=><Breadcrumb.Item key={i}>{b}</Breadcrumb.Item>) }
</Breadcrumb>
</Col>
</Row>
<Row>
<Row type="flex" justify="space-around" align="middle">
<Col span="20">
<h1 className="tac">{title}</h1>
</Col>
{
operation &&
<Col span="4">
{operation}
</Col>
}
</Row>
</div>
);
......
src/components/ProductForm/BaseInfoForm.jsx
View file @ d9a87e8a
......@@ -49,12 +49,12 @@ export default class BaseInfoForm extends Component {
};
}
componentWillMount(){
componentWillMount() {
const {itemPic} = this.props.product;
if (itemPic) {
this.setState({
fileList:[{
fileList: [{
uid: UUID(),
status: 'done',
url: itemPic,
......@@ -104,11 +104,14 @@ export default class BaseInfoForm extends Component {
<Spin spinning={loading}>
<Form horizontal onSubmit={this.handleSubmit.bind(this)}>
<Form.Item label="产品类目" {...smallFormItemLayout}>
{
cates &&
<Cascader options={cates} placeholder="请选产品类目"
{...getFieldProps('categoryId', {
initialValue: productCate
})}
/>
}
</Form.Item>
<Form.Item label="产品短标题" {...smallFormItemLayout}>
<Input placeholder="产品短标题"
......@@ -234,7 +237,7 @@ export default class BaseInfoForm extends Component {
!this.props.isCreate &&
<Button onClick={e=>{e.preventDefault(); this.props.history.goBack();}}
style={{marginLeft:'1em'}}>
<Icon type="rollback" />返回
<Icon type="rollback"/>返回
</Button>
}
</Form.Item>
......
src/components/ProductForm/ShouyiYongjingForm.jsx
View file @ d9a87e8a
......@@ -86,7 +86,15 @@ export default class ShouyiYongjingForm extends Component {
};
Object.keys(formData).forEach(key=> {
if (/^[\d]+$/g.test(key)) {
commissionAlg.push(formData[key]);
const d = formData[key];
commissionAlg.push({
min:d.min,
max:d.max,
result:{
yj:d.yj,
sy:d.sy
}
});
} else {
data[key] = formData[key];
}
......@@ -141,10 +149,10 @@ export default class ShouyiYongjingForm extends Component {
<Input {...getFieldProps(index + '.max', {initialValue: item.max})}/>
</Col>
<Col span="5">
<Input {...getFieldProps(index + '.sy', {initialValue: item.sy})}/>
<Input {...getFieldProps(index + '.sy', {initialValue: item.result && item.result.sy})}/>
</Col>
<Col span="5">
<Input {...getFieldProps(index + '.yj', {initialValue: item.yj})}/>
<Input {...getFieldProps(index + '.yj', {initialValue: item.result && item.result.yj})}/>
</Col>
<Col span="4">
<Icon type="cross" onClick={this.handleRemoveYongjin.bind(this, index)}/>
......
src/containers/App/App.jsx
View file @ d9a87e8a
......@@ -3,7 +3,7 @@ import {Router, Route, IndexRoute, Link} from 'react-router';
import Layout from '../../components/Layout/Layout';
import {connect} from 'react-redux';
import {Collapse, Menu, Icon, Upload} from 'antd';
import {Collapse, Menu, Icon, Upload, Row, Col} from 'antd';
const Panel = Collapse.Panel;
const SubMenu = Menu.SubMenu;
......@@ -53,20 +53,20 @@ export default class App extends Component {
to: '/remittance/audits',
cn: '报单审核',
en: 'Remittance Audits'
},{
}, {
to: '/withdraw/audits',
cn: '提现审核',
en: 'Withdraw Money'
}
]
},{
title:'消息管理',
items:[
}, {
title: '消息管理',
items: [
{
to: '/customMessages',
cn: '消息列表',
en: 'Messages'
},{
}, {
to: '/customMessages/create',
cn: '推送消息',
en: 'Send Message'
......@@ -81,7 +81,16 @@ export default class App extends Component {
return (
<div className={styles.normal}>
<div className={styles.head}>
<Row type="flex" justify="space-around" align="middle">
<Col span="12">
<img className="page-logo" src={'/'+logo} title="枢纽科技" alt="枢纽科技"/>
</Col>
<Col span="12">
<div style={{float:'right', marginRight:30}}>
{user.username}
</div>
</Col>
</Row>
</div>
<div className={styles.content}>
<div className={styles.side}>
......@@ -105,7 +114,7 @@ export default class App extends Component {
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="folder" /><span>基本功能</span></span>}>
<Menu.Item>
<MenuItemContent to="/upload" cn="图片上传" en="Upload Images" />
<MenuItemContent to="/upload" cn="图片上传" en="Upload Images"/>
</Menu.Item>
</SubMenu>
</Menu>
......
src/containers/Product/AddItem.jsx
View file @ d9a87e8a
......@@ -86,7 +86,7 @@ export default class AddItem extends Component {
};
componentWillMount() {
componentDidMount() {
const {cates} = this.props;
if (!cates || !cates.length) {
this.fetchCates();
......
src/containers/Product/List.jsx
View file @ d9a87e8a
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {Table, Icon, Breadcrumb, Row, Col, Pagination} from 'antd';
import {Table, Icon, Row, Col, Button, Form, Input, Cascader, Select} from 'antd';
import {
serialize,
formatDateTime,
productStatusToString,
productEnableCreateTrade
productEnableCreateTrade,
UUID,
formItemLayout,
smallFormItemLayout,
footerFormSubmitLayout,
handleUpload,
filterFormItemLayout,
PRODUCT_STATUS
} from '../../utils';
import {Link} from 'react-router';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
const ProductStatus = Object.keys(PRODUCT_STATUS).filter(key=>key != -9);
const columns = [
{
......@@ -79,19 +88,27 @@ const columns = [
];
@connect(state=>({
cates: state.product.cates,
items: state.product.items,
loading: state.product.loading,
total: state.product.total
}))
@Form.create()
export default class List extends Component {
constructor(props, context) {
super(props, context);
this.state = {
filterVisible: false
}
}
componentDidMount() {
this.fetchList(this.props.location.query);
const {cates} = this.props;
if (!cates || !cates.length) {
this.fetchCates();
}
};
fetchList(query) {
......@@ -101,14 +118,53 @@ export default class List extends Component {
});
};
fetchCates() {
this.props.dispatch({
type: 'FETCH_PRODUCT_CATES'
});
};
handleRowClick({id}) {
this.props.history.push('/products/' + id);
}
handleFilterVisible() {
this.setState({
filterVisible: !this.state.filterVisible
});
}
handleFilterSubmit(e) {
e.preventDefault();
const formData = this.props.form.getFieldsValue();
if (formData.categoryId && formData.categoryId[1]) {
formData.categoryId = formData.categoryId[1];
}
const searchQuery = {...this.props.location.query, ...formData};
console.log(searchQuery);
this.props.history.replace(this.props.location.pathname + '?' + serialize(searchQuery));
this.fetchList(searchQuery);
}
handleResetFilterForm(e){
e.preventDefault();
this.props.form.setFieldsValue({
id:undefined,
status: undefined,
categoryId:undefined,
title:undefined
});
}
render() {
const {total, items, loading, history:{replace}, location:{pathname, query}} = this.props;
const {
total, cates, items, loading,
form:{getFieldProps},
history:{replace},
location:{pathname, query}
} = this.props;
const pagination = {
......@@ -131,16 +187,76 @@ export default class List extends Component {
}
};
const header = (<MainHeader breadcrumb={['产品管理', '产品列表']}
title="产品列表"/>);
const operation = (
<div style={{textAlign:'right'}}>
<Button size="small" type="ghost" onClick={this.handleFilterVisible.bind(this)}>
<Icon type="filter"/>
</Button>
</div>
);
const searchStyle = {
size: 'default',
style: {width: 100}
}
//horizontal
const header = (
<div>
<MainHeader breadcrumb={['产品管理', '产品列表']}
title="产品列表"
operation={operation}
/>
{
this.state.filterVisible &&
<Form inline onSubmit={this.handleFilterSubmit.bind(this)} style={{marginBottom:20}}
className="tac">
<Form.Item label="ID">
<Input placeholder="请输入搜索ID" {...searchStyle} {...getFieldProps('id')}/>
</Form.Item>
<Form.Item label="类目">
{
cates &&
<Cascader options={cates} placeholder="请选产品类目" {...searchStyle}
{...getFieldProps('categoryId')}
/>
}
</Form.Item>
<Form.Item label="标题">
<Input placeholder="请输入搜索标题" {...searchStyle} {...getFieldProps('title')}/>
</Form.Item>
<Form.Item label="状态">
<Select placeholder="请选择状态" {...searchStyle} {...getFieldProps('status')}>
<Select.Option key="status-option-default"
value={null}>请选择</Select.Option>
{
ProductStatus.map((status, index)=>
<Select.Option key={status} data-value={status}
value={status}>{PRODUCT_STATUS[status]}</Select.Option>
)
}
</Select>
</Form.Item>
<Form.Item>
<Button.Group size="default">
<Button type="primary" size="default" htmlType="submit" loading={loading}><Icon
type="search"/>筛选</Button>
<Button type="ghost" size="default" htmlType="reset"
onClick={this.handleResetFilterForm.bind(this)}><Icon
type="cross-circle-o"/>清空</Button>
</Button.Group>
</Form.Item>
</Form>
}
</div>
);
return (
<Layout header={header}>
<Table className="ant-table" columns={columns}
<Table className="list-table" columns={columns}
dataSource={Array.isArray(items)?items:[]}
loading={loading}
pagination={pagination}
scroll={{ y: window.innerHeight-380 }}
scroll={{ y: window.innerHeight-(this.state.filterVisible? 432 :380) }}
onRowClick={this.handleRowClick.bind(this)}
/>
</Layout>
......
src/containers/Trade/List.jsx
View file @ d9a87e8a
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {Table, Icon, Breadcrumb, Row, Col} from 'antd';
import {Table, Icon, Breadcrumb, Row, Col, Input} from 'antd';
import {Link} from 'react-router';
import {serialize, formatDateTime, tradeStatusToString} from '../../utils';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
const columns = [
{
......@@ -127,24 +128,10 @@ export default class List extends Component {
}
};
const breadcrumb = ['订单管理', '订单列表'];
const header = (
<div className="main-header">
<Row>
<Col span="8">
<Breadcrumb>
{ breadcrumb.map((b, i)=><Breadcrumb.Item key={i}>{b}</Breadcrumb.Item>) }
</Breadcrumb>
</Col>
</Row>
<Row>
<Col span="20">
<h1 className="tac">订单列表</h1>
</Col>
</Row>
</div>
);
const header = (<MainHeader breadcrumb={['订单管理', '订单列表']}
title="订单列表"/>);
return (
<Layout header={header}>
......
src/entries/index.less
View file @ d9a87e8a
......@@ -22,8 +22,10 @@
.ant-btn {
font-weight: 400 !important;
}
.ant-table {
.ant-table{
font-size: 14px !important;
}
.list-table {
display: flex;
flex-direction: column;
height: 100%;
......
src/reducers/product.js
View file @ d9a87e8a
......@@ -48,7 +48,7 @@ const product = handleActions({
return {...state, loading: false, err: action.err};
}
}, {
cates: [],
//cates: [],
items: [],
loading: false,
});
......
src/utils.js
View file @ d9a87e8a
......@@ -140,6 +140,11 @@ export const footerFormSubmitLayout = {
wrapperCol: {span: 16, offset: 4}
};
export const filterFormItemLayout = {
labelCol:{ span: 10 },
wrapperCol:{ span: 14 }
}
export function filterUploadSuccess(fileList) {
return fileList.filter((file) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment