Skip to content

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

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

parent 013540b4
Expand all Hide 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 { ...@@ -15,21 +15,27 @@ export default class MainHeader extends Component {
render() { render() {
const {breadcrumb, title} = this.props; const {breadcrumb, title, operation} = this.props;
return ( return (
<div className="main-header"> <div className="main-header">
<Row> <Row >
<Col span="8"> <Col span="8">
<Breadcrumb> <Breadcrumb>
{ breadcrumb.map((b, i)=><Breadcrumb.Item key={i}>{b}</Breadcrumb.Item>) } { breadcrumb.map((b, i)=><Breadcrumb.Item key={i}>{b}</Breadcrumb.Item>) }
</Breadcrumb> </Breadcrumb>
</Col> </Col>
</Row> </Row>
<Row> <Row type="flex" justify="space-around" align="middle">
<Col span="20"> <Col span="20">
<h1 className="tac">{title}</h1> <h1 className="tac">{title}</h1>
</Col> </Col>
{
operation &&
<Col span="4">
{operation}
</Col>
}
</Row> </Row>
</div> </div>
); );
......
src/components/ProductForm/BaseInfoForm.jsx
View file @ d9a87e8a
...@@ -49,12 +49,12 @@ export default class BaseInfoForm extends Component { ...@@ -49,12 +49,12 @@ export default class BaseInfoForm extends Component {
}; };
} }
componentWillMount(){ componentWillMount() {
const {itemPic} = this.props.product; const {itemPic} = this.props.product;
if (itemPic) { if (itemPic) {
this.setState({ this.setState({
fileList:[{ fileList: [{
uid: UUID(), uid: UUID(),
status: 'done', status: 'done',
url: itemPic, url: itemPic,
...@@ -104,11 +104,14 @@ export default class BaseInfoForm extends Component { ...@@ -104,11 +104,14 @@ export default class BaseInfoForm extends Component {
<Spin spinning={loading}> <Spin spinning={loading}>
<Form horizontal onSubmit={this.handleSubmit.bind(this)}> <Form horizontal onSubmit={this.handleSubmit.bind(this)}>
<Form.Item label="产品类目" {...smallFormItemLayout}> <Form.Item label="产品类目" {...smallFormItemLayout}>
<Cascader options={cates} placeholder="请选产品类目" {
{...getFieldProps('categoryId', { cates &&
initialValue: productCate <Cascader options={cates} placeholder="请选产品类目"
})} {...getFieldProps('categoryId', {
/> initialValue: productCate
})}
/>
}
</Form.Item> </Form.Item>
<Form.Item label="产品短标题" {...smallFormItemLayout}> <Form.Item label="产品短标题" {...smallFormItemLayout}>
<Input placeholder="产品短标题" <Input placeholder="产品短标题"
...@@ -234,7 +237,7 @@ export default class BaseInfoForm extends Component { ...@@ -234,7 +237,7 @@ export default class BaseInfoForm extends Component {
!this.props.isCreate && !this.props.isCreate &&
<Button onClick={e=>{e.preventDefault(); this.props.history.goBack();}} <Button onClick={e=>{e.preventDefault(); this.props.history.goBack();}}
style={{marginLeft:'1em'}}> style={{marginLeft:'1em'}}>
<Icon type="rollback" />返回 <Icon type="rollback"/>返回
</Button> </Button>
} }
</Form.Item> </Form.Item>
......
src/components/ProductForm/ShouyiYongjingForm.jsx
View file @ d9a87e8a
...@@ -86,7 +86,15 @@ export default class ShouyiYongjingForm extends Component { ...@@ -86,7 +86,15 @@ export default class ShouyiYongjingForm extends Component {
}; };
Object.keys(formData).forEach(key=> { Object.keys(formData).forEach(key=> {
if (/^[\d]+$/g.test(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 { } else {
data[key] = formData[key]; data[key] = formData[key];
} }
...@@ -141,10 +149,10 @@ export default class ShouyiYongjingForm extends Component { ...@@ -141,10 +149,10 @@ export default class ShouyiYongjingForm extends Component {
<Input {...getFieldProps(index + '.max', {initialValue: item.max})}/> <Input {...getFieldProps(index + '.max', {initialValue: item.max})}/>
</Col> </Col>
<Col span="5"> <Col span="5">
<Input {...getFieldProps(index + '.sy', {initialValue: item.sy})}/> <Input {...getFieldProps(index + '.sy', {initialValue: item.result && item.result.sy})}/>
</Col> </Col>
<Col span="5"> <Col span="5">
<Input {...getFieldProps(index + '.yj', {initialValue: item.yj})}/> <Input {...getFieldProps(index + '.yj', {initialValue: item.result && item.result.yj})}/>
</Col> </Col>
<Col span="4"> <Col span="4">
<Icon type="cross" onClick={this.handleRemoveYongjin.bind(this, index)}/> <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'; ...@@ -3,7 +3,7 @@ import {Router, Route, IndexRoute, Link} from 'react-router';
import Layout from '../../components/Layout/Layout'; import Layout from '../../components/Layout/Layout';
import {connect} from 'react-redux'; 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 Panel = Collapse.Panel;
const SubMenu = Menu.SubMenu; const SubMenu = Menu.SubMenu;
...@@ -53,20 +53,20 @@ export default class App extends Component { ...@@ -53,20 +53,20 @@ export default class App extends Component {
to: '/remittance/audits', to: '/remittance/audits',
cn: '报单审核', cn: '报单审核',
en: 'Remittance Audits' en: 'Remittance Audits'
},{ }, {
to: '/withdraw/audits', to: '/withdraw/audits',
cn: '提现审核', cn: '提现审核',
en: 'Withdraw Money' en: 'Withdraw Money'
} }
] ]
},{ }, {
title:'消息管理', title: '消息管理',
items:[ items: [
{ {
to: '/customMessages', to: '/customMessages',
cn: '消息列表', cn: '消息列表',
en: 'Messages' en: 'Messages'
},{ }, {
to: '/customMessages/create', to: '/customMessages/create',
cn: '推送消息', cn: '推送消息',
en: 'Send Message' en: 'Send Message'
...@@ -81,7 +81,16 @@ export default class App extends Component { ...@@ -81,7 +81,16 @@ export default class App extends Component {
return ( return (
<div className={styles.normal}> <div className={styles.normal}>
<div className={styles.head}> <div className={styles.head}>
<img className="page-logo" src={'/'+logo} title="枢纽科技" alt="枢纽科技"/> <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>
<div className={styles.content}> <div className={styles.content}>
<div className={styles.side}> <div className={styles.side}>
...@@ -105,7 +114,7 @@ export default class App extends Component { ...@@ -105,7 +114,7 @@ export default class App extends Component {
</SubMenu> </SubMenu>
<SubMenu key="sub2" title={<span><Icon type="folder" /><span>基本功能</span></span>}> <SubMenu key="sub2" title={<span><Icon type="folder" /><span>基本功能</span></span>}>
<Menu.Item> <Menu.Item>
<MenuItemContent to="/upload" cn="图片上传" en="Upload Images" /> <MenuItemContent to="/upload" cn="图片上传" en="Upload Images"/>
</Menu.Item> </Menu.Item>
</SubMenu> </SubMenu>
</Menu> </Menu>
......
src/containers/Product/AddItem.jsx
View file @ d9a87e8a
...@@ -86,7 +86,7 @@ export default class AddItem extends Component { ...@@ -86,7 +86,7 @@ export default class AddItem extends Component {
}; };
componentWillMount() { componentDidMount() {
const {cates} = this.props; const {cates} = this.props;
if (!cates || !cates.length) { if (!cates || !cates.length) {
this.fetchCates(); this.fetchCates();
......
src/containers/Product/List.jsx
View file @ d9a87e8a
import React, {Component, PropTypes} from 'react'; import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux'; 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 { import {
serialize, serialize,
formatDateTime, formatDateTime,
productStatusToString, productStatusToString,
productEnableCreateTrade productEnableCreateTrade,
UUID,
formItemLayout,
smallFormItemLayout,
footerFormSubmitLayout,
handleUpload,
filterFormItemLayout,
PRODUCT_STATUS
} from '../../utils'; } from '../../utils';
import {Link} from 'react-router'; import {Link} from 'react-router';
import Layout from '../../components/Layout/Layout'; import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader'; import MainHeader from '../../components/MainHeader';
const ProductStatus = Object.keys(PRODUCT_STATUS).filter(key=>key != -9);
const columns = [ const columns = [
{ {
...@@ -79,19 +88,27 @@ const columns = [ ...@@ -79,19 +88,27 @@ const columns = [
]; ];
@connect(state=>({ @connect(state=>({
cates: state.product.cates,
items: state.product.items, items: state.product.items,
loading: state.product.loading, loading: state.product.loading,
total: state.product.total total: state.product.total
})) }))
@Form.create()
export default class List extends Component { export default class List extends Component {
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
this.state = {
filterVisible: false
}
} }
componentDidMount() { componentDidMount() {
this.fetchList(this.props.location.query); this.fetchList(this.props.location.query);
const {cates} = this.props;
if (!cates || !cates.length) {
this.fetchCates();
}
}; };
fetchList(query) { fetchList(query) {
...@@ -101,14 +118,53 @@ export default class List extends Component { ...@@ -101,14 +118,53 @@ export default class List extends Component {
}); });
}; };
fetchCates() {
this.props.dispatch({
type: 'FETCH_PRODUCT_CATES'
});
};
handleRowClick({id}) { handleRowClick({id}) {
this.props.history.push('/products/' + 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() { 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 = { const pagination = {
...@@ -131,16 +187,76 @@ export default class List extends Component { ...@@ -131,16 +187,76 @@ export default class List extends Component {
} }
}; };
const header = (<MainHeader breadcrumb={['产品管理', '产品列表']} const operation = (
title="产品列表"/>); <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 ( return (
<Layout header={header}> <Layout header={header}>
<Table className="ant-table" columns={columns} <Table className="list-table" columns={columns}
dataSource={Array.isArray(items)?items:[]} dataSource={Array.isArray(items)?items:[]}
loading={loading} loading={loading}
pagination={pagination} pagination={pagination}
scroll={{ y: window.innerHeight-380 }} scroll={{ y: window.innerHeight-(this.state.filterVisible? 432 :380) }}
onRowClick={this.handleRowClick.bind(this)} onRowClick={this.handleRowClick.bind(this)}
/> />
</Layout> </Layout>
......
src/containers/Trade/List.jsx
View file @ d9a87e8a
import React, {Component, PropTypes} from 'react'; import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux'; 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 {Link} from 'react-router';
import {serialize, formatDateTime, tradeStatusToString} from '../../utils'; import {serialize, formatDateTime, tradeStatusToString} from '../../utils';
import Layout from '../../components/Layout/Layout'; import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
const columns = [ const columns = [
{ {
...@@ -127,24 +128,10 @@ export default class List extends Component { ...@@ -127,24 +128,10 @@ export default class List extends Component {
} }
}; };
const breadcrumb = ['订单管理', '订单列表'];
const header = ( const header = (<MainHeader breadcrumb={['订单管理', '订单列表']}
<div className="main-header"> title="订单列表"/>);
<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>
);
return ( return (
<Layout header={header}> <Layout header={header}>
......
src/entries/index.less
View file @ d9a87e8a
...@@ -22,8 +22,10 @@ ...@@ -22,8 +22,10 @@
.ant-btn { .ant-btn {
font-weight: 400 !important; font-weight: 400 !important;
} }
.ant-table { .ant-table{
font-size: 14px !important; font-size: 14px !important;
}
.list-table {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
......
src/reducers/product.js
View file @ d9a87e8a
...@@ -48,7 +48,7 @@ const product = handleActions({ ...@@ -48,7 +48,7 @@ const product = handleActions({
return {...state, loading: false, err: action.err}; return {...state, loading: false, err: action.err};
} }
}, { }, {
cates: [], //cates: [],
items: [], items: [],
loading: false, loading: false,
}); });
......
src/utils.js
View file @ d9a87e8a
...@@ -140,6 +140,11 @@ export const footerFormSubmitLayout = { ...@@ -140,6 +140,11 @@ export const footerFormSubmitLayout = {
wrapperCol: {span: 16, offset: 4} wrapperCol: {span: 16, offset: 4}
}; };
export const filterFormItemLayout = {
labelCol:{ span: 10 },
wrapperCol:{ span: 14 }
}
export function filterUploadSuccess(fileList) { export function filterUploadSuccess(fileList) {
return fileList.filter((file) => { 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