Skip to content

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

update theme

parent 65f4fa22
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1034 additions and 618 deletions
.idea/workspace.xml
View file @ 1bb7d019
This diff is collapsed.
dist/index.css
View file @ 1bb7d019
This diff is collapsed.
dist/index.js
View file @ 1bb7d019
This diff is collapsed.
src/components/Layout/Layout.less
View file @ 1bb7d019
......@@ -4,8 +4,19 @@
flex-direction: column;
height: 100%;
overflow: hidden;
align-items: center;
& > .content {
flex: 1;
overflow: auto;
width: 100%;
& > div {
height: 100%;
& > :global(.ant-spin-container) {
height: 100%;
& > :global(.ant-form-horizontal) {
height: 100%;
}
}
}
}
}
src/components/MainHeader.jsx → src/components/MainHeader/MainHeader.jsx
View file @ 1bb7d019
......@@ -17,27 +17,24 @@ export default class MainHeader extends Component {
const {breadcrumb, title, operation} = this.props;
const styles = require('./MainHeader.less');
return (
<div className="main-header">
<Row >
<Col span="8">
<div className={styles.MainHeader}>
<Row className={styles.header} type="flex" justify="space-around" align="middle">
<Col span="16" style={{paddingLeft: 20}}>
<h1>{title}</h1>
<Breadcrumb>
{ breadcrumb.map((b, i)=><Breadcrumb.Item key={i}>{b}</Breadcrumb.Item>) }
</Breadcrumb>
</Col>
</Row>
<Row type="flex" justify="space-around" align="middle">
<Col span="20">
<h1 className="tac">{title}</h1>
</Col>
{
operation &&
<Col span="4">
<Col span="8">
{operation}
</Col>
}
</Row>
{ this.props.children }
</div>
);
}
}
src/components/MainHeader/MainHeader.less 0 → 100644
View file @ 1bb7d019
@import "../../variable";
.MainHeader {
width: 100%;
& > .header {
.borderBottom;
padding-bottom: 5px;
& > div {
&:first-child {
padding-left: 20px;
}
&:last-child {
padding-right: 20px;
}
}
h1 {
font-size: 18px;
margin-top: 5px;
}
:global {
.ant-breadcrumb {
color: #ccc;
font-weight: 300;
& > span:last-child {
color: #aaa;
}
}
}
}
& > :global(.filterForm) {
padding: 10px 20px;
.borderBottom;
}
}
src/containers/Announcement/AddItem.jsx
View file @ 1bb7d019
......@@ -21,7 +21,7 @@ import {
} from 'antd';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
import {formItemLayout, footerFormSubmitLayout} from '../../utils';
......@@ -48,17 +48,32 @@ export default class AddItem extends Component {
render = ()=> {
const {loading, form:{getFieldProps}, location:{query}} = this.props;
const header = (<MainHeader breadcrumb={['产品管理', '产品详情', '添加公告']}
title={(query.title ? query.title + ' - ' : '') + '添加公告'}/>);
const operation = (
<div style={{textAlign:'right'}}>
<Button.Group>
<Button type="ghost" onClick={e=>{e.preventDefault(); this.props.history.goBack();}}>
<Icon type="rollback"/>
</Button>
</Button.Group>
</div>
);
const header = (
<MainHeader breadcrumb={['产品管理', '产品详情', '添加公告']}
title={(query.title ? query.title + ' - ' : '') + '添加公告'}
operation={operation}
/>
);
return (
<Layout header={header}>
<Spin spinning={loading}>
<Form horizontal onSubmit={this.handleSubmit.bind(this)}>
<Form className="main-form" horizontal onSubmit={this.handleSubmit.bind(this)}>
<Form.Item label="标题" {...formItemLayout}>
<Input placeholder="公告标题" {...getFieldProps('title')} />
</Form.Item>
<Form.Item label="内容" {...formItemLayout}>
<Input placeholder="公告内容" type="textarea" autosize={{minRows:5, maxRows:20}} {...getFieldProps('announcement')} />
<Input placeholder="公告内容" type="textarea"
autosize={{minRows:5, maxRows:20}} {...getFieldProps('announcement')} />
</Form.Item>
<Form.Item {...footerFormSubmitLayout} style={{marginTop:30}}>
<Button type="primary" htmlType="submit" loading={loading}><Icon type="save"/>创建</Button>
......
src/containers/Announcement/EditItem.jsx
View file @ 1bb7d019
......@@ -21,7 +21,7 @@ import {
} from 'antd';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
import {formItemLayout, footerFormSubmitLayout} from '../../utils';
......@@ -61,15 +61,29 @@ export default class EditItem extends Component {
render() {
const {announcement, loading, form:{getFieldProps}, location:{query}} = this.props;
const header = (<MainHeader breadcrumb={['产品管理', '产品详情', '修改公告']}
title={(query && query.title ? query.title + ' - ' : '') + '修改公告'}/>);
const operation = (
<div style={{textAlign:'right'}}>
<Button.Group>
<Button type="ghost" onClick={e=>{e.preventDefault(); this.props.history.goBack();}}>
<Icon type="rollback"/>
</Button>
</Button.Group>
</div>
);
const header = (
<MainHeader breadcrumb={['产品管理', '产品详情', '修改公告']}
title={(query && query.title ? query.title + ' - ' : '') + '修改公告'}
operation={operation}
/>
);
return (
<Layout header={header}>
<Spin spinning={loading}>
{
announcement &&
<Form horizontal onSubmit={this.handleSubmit.bind(this)}>
<Form className="main-form" horizontal onSubmit={this.handleSubmit.bind(this)}>
<Form.Item label="标题" {...formItemLayout}>
<Input placeholder="公告标题"
{...getFieldProps('title', {
......
src/containers/Announcement/List.jsx
View file @ 1bb7d019
......@@ -4,7 +4,7 @@ import {Table, Icon, Button, Switch, Form} from 'antd';
import {serialize, formatDateTime, productStatusToString, footerFormSubmitLayout} from '../../utils';
import {Link} from 'react-router';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
@connect(state=>({
......@@ -16,7 +16,9 @@ export default class List extends Component {
constructor(props, context) {
super(props, context);
this.state = {
filterVisible: false
}
}
componentDidMount() {
......@@ -34,6 +36,9 @@ export default class List extends Component {
this.props.history.push('/announcement/' + id + '/edit');
}
handleFilterVisible() {
}
render() {
......@@ -69,13 +74,15 @@ export default class List extends Component {
title: '标题',
dataIndex: 'title',
key: 'title',
width: 200,
}, {
title: '内容',
dataIndex: 'announcement',
key: 'announcement',
width: 200,
render: (announcement, record)=>(
<span title={announcement}>
{announcement && (announcement.length > 20 ? announcement.substr(0,20)+'...' : announcement)}
{announcement && (announcement.length > 20 ? announcement.substr(0, 20) + '...' : announcement)}
</span>
)
}, {
......@@ -113,32 +120,67 @@ export default class List extends Component {
}
];
const header = (<MainHeader breadcrumb={['产品管理', '产品详情', '公告列表']}
title={(query.title ? query.title + ' - ' : '') + '公告列表'}/>);
const operation = (
<div style={{textAlign:'right'}}>
<Button.Group>
<Button type="ghost">
<Link to={'/announcement/create?itemId='+ query.itemId + '&title='+ query.title}>
<Icon type="plus"/>
</Link>
</Button>
<Button type="ghost" onClick={this.handleFilterVisible.bind(this)}>
<Icon type="filter"/>
</Button>
<Button type="ghost" onClick={e=>{e.preventDefault(); this.props.history.goBack();}}>
<Icon type="rollback"/>
</Button>
</Button.Group>
</div>
);
const header = (
<MainHeader breadcrumb={['产品管理', '产品详情', '公告列表']}
title={(query.title ? query.title + ' - ' : '') + '公告列表'}
operation={operation}
/>
);
const footer = (
<div style={{margin:'10px 0'}}>
<Link to={'/announcement/create?itemId='+ query.itemId + '&title='+ query.title}>
<Button type="primary">
<Icon type="plus"/>添加
</Button>
</Link>
<Button style={{margin:'0 1em'}} type="ghost" onClick={e=>{e.preventDefault(); this.props.history.goBack();}}>
<Icon type="rollback"/>返回
</Button>
</div>
);
return (
<Layout header={header}>
<Form horizontal>
<Table className="ant-table" columns={columns}
<Layout header={header} >
<Table className="list-table" columns={columns}
dataSource={Array.isArray(items)?items:[]}
loading={loading}
pagination={pagination}
scroll={{ y: window.innerHeight-(this.state.filterVisible? 203 :150) }}
onRowClick={this.handleRowClick.bind(this)}
/>
<Form.Item {...footerFormSubmitLayout} style={{marginTop:30}}>
<Link to={'/announcement/create?itemId='+ query.itemId + '&title='+ query.title}>
<Button size="large"><Icon type="plus"/>添加</Button>
</Link>
<Button onClick={e=>{e.preventDefault(); this.props.history.goBack();}}
style={{marginLeft:'1em'}}>
<Icon type="rollback"/>返回
</Button>
</Form.Item>
</Form>
</Layout>
);
}
}
// <Form.Item {...footerFormSubmitLayout} style={{marginTop:30}}>
// <Link to={'/announcement/create?itemId='+ query.itemId + '&title='+ query.title}>
// <Button size="large"><Icon type="plus"/>添加</Button>
// </Link>
// <Button onClick={e=>{e.preventDefault(); this.props.history.goBack();}}
// style={{marginLeft:'1em'}}>
// <Icon type="rollback"/>返回
// </Button>
// </Form.Item>
src/containers/App/App.jsx
View file @ 1bb7d019
......@@ -79,22 +79,12 @@ export default class App extends Component {
const logo = require('./images/logo.png');
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}>
<header>
<img className="page-logo" src={'/'+logo} title="枢纽科技" alt="枢纽科技"/>
</header>
<section>
<Menu mode="inline" defaultOpenKeys={['sub1']}>
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>业务管理</span></span>}>
{
......@@ -118,15 +108,15 @@ export default class App extends Component {
</Menu.Item>
</SubMenu>
</Menu>
</section>
<footer>
杭州枢纽科技有限公司
</footer>
</div>
<div className={styles.main}>
{user && user.token && this.props.children}
</div>
</div>
<div className={styles.foot}>
杭州枢纽科技有限公司 荣誉出品 <a href="mailto:bainx@vip.qq.com">问题反馈</a>
</div>
</div>
);
}
}
......@@ -152,17 +142,25 @@ class MenuItemContent extends Component {
}
// <div className={styles.head}>
// <Row type="flex" justify="space-around" align="middle" style={{height:'100%'}}>
// <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.foot}>
// 杭州枢纽科技有限公司 荣誉出品 <a href="mailto:bainx@vip.qq.com">问题反馈</a>
// </div>
//<div className={styles.normal}></div>
......
src/containers/App/App.less
View file @ 1bb7d019
@import '../../variable';
.normal {
.content {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
}
.head {
background: #fff;
height: 75px;
padding: 8px;
color: #364171;
border-bottom: 1px solid #e0e0e0;
:global {
.page-logo {
margin: 20px 0 0 30px;
.side {
min-width: 220px;
max-width: 300px;
color: #eee;
background-color: #4D394B;
display: flex;
flex-direction: column;
height: 100%;
& > header {
padding: 20px;
img {
margin: 0 auto;
display: block;
}
}
}
.content {
& > footer {
text-align: center;
padding: 10px 0;
color: #aaa;
}
& > section {
flex: 1;
display: flex;
background-color: #e9ecf3;
padding: 20px 30px 0;
}
}
.side {
/**/
width: 250px;
//min-width: 250px;
//max-width: 300px;
background: #fff;
border-right: 1px solid #e9e9e9;
margin-right: 0px;
padding: 30px 0 0;
border-radius: 5px 0 0 5px;
:global {
.ant-menu {
background-color: transparent;
color: #fff;
}
.ant-menu-item > a {
color: #fff;
}
.ant-menu-item-group-title {
color: #aaa;
}
.ant-menu-inline,
.ant-menu-vertical {
border-right: 0;
}
.ant-menu-item:hover,
.ant-menu-item-active,
.ant-menu-submenu-active,
.ant-menu-submenu-title:hover {
background-color: @primary-color;
}
.ant-menu-inline .ant-menu-selected, .ant-menu-inline .ant-menu-item-selected {
border-right: 1px solid @primary-color;
background-color: @primary-color;
}
.ant-menu-vertical,
.ant-menu-inline,
.ant-menu-item-group-list {
& > .ant-menu-item,
& > .ant-menu-submenu > .ant-menu-submenu-title {
.cn {
font-size: 12px;
}
.en {
font-size: 10px;
margin-left: .5em;
opacity: .45;
font-style: italic;
font-weight: 300;
}
}
}
}
}
......@@ -49,100 +82,36 @@
display: flex;
flex-direction: column;
height: 100%;
padding: 10px 20px;
flex: 1 0 auto;
overflow: hidden;
background: #fff;
border-radius: 0 5px 5px 0;
h1 {
font-size: 24px;
color: #404040;
font-weight: 400;
line-height: 40px;
margin-bottom: 24px;
margin-top: 8px;
font-family: lato, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
font-size: 18px;
color: #444;
font-weight: 700;
line-height: 36px;
margin-top: 10px;
}
h2 {
font-size: 22px;
color: #505050;
font-weight: 400;
line-height: 36px;
font-size: 16px;
color: #666;
font-weight: 500;
line-height: 30px;
margin-top: 6px;
}
h3 {
font-size: 18px;
color: #606060;
font-size: 14px;
color: #888;
font-weight: 400;
line-height: 30px;
}
//& > section {
// display: flex;
// flex-direction: column;
// height: 100%;
// overflow: auto;
// & > header {
// h1 {
// line-height: 30px;
// margin: 0;
// }
// :global {
// .ant-breadcrumb {
// & > span {
// line-height: 42px;
// }
// }
// }
// }
// & > * {
// &:nth-child(2){
// flex: 1;
// overflow: auto;
// display: flex;
// flex-direction: column;
// :global{
// .content{
// flex:1;
// }
// }
//
// }
// }
//}
:global {
.tac {
text-align: center !important;
}
.main-header {
border-bottom: 1px solid #eaeaea;
margin-bottom: 20px;
h1 {
margin-bottom: 10px;
}
line-height: 26px;
margin-top: 2px;
}
& > div {
height: 100%;
flex: 1 0 auto;
}
}
.foot {
//background: #fafafa;
//border-top: 1px solid #e0e0e0;
padding: 8px;
font-size: 12px;
text-align: center;
a {
margin-left: .5em;
opacity: .8;
}
}
:global {
.img-priview-dialog {
.ant-modal-content {
background-color: transparent;
img {
margin: auto;
display: block;
}
:global {
.main-form {
padding-top: 24px;
}
}
}
......
src/containers/BaseFunction/BaseUpload.jsx
View file @ 1bb7d019
......@@ -24,7 +24,7 @@ import {
import Copy from '../../components/CopyToClipboard/CopyToClipboard';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
import {
handleUpload
......
src/containers/CustomMessage/AddItem.jsx
View file @ 1bb7d019
......@@ -21,7 +21,7 @@ import {
} from 'antd';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
import {formItemLayout, footerFormSubmitLayout} from '../../utils';
......@@ -33,8 +33,8 @@ export default class AddItem extends Component {
constructor(props, content) {
super(props, content);
this.state = {
redirectName: '请选择',
sendName: '请选择'
redirectName: undefined,
sendName: undefined
}
}
......@@ -55,16 +55,19 @@ export default class AddItem extends Component {
render = ()=> {
const {loading, form:{getFieldProps}, location:{query}} = this.props;
const header = (<MainHeader breadcrumb={['消息管理', '推送消息']}
title="推送消息"/>);
const header = (
<MainHeader breadcrumb={['消息管理', '推送消息']} title="推送消息"/>
);
const redirectNamePlaceholder = {0: '无需填写', 1: '请输入一个产品ID', 2: '请输入消息跳转指定的URL地址'};
const sendNamePlaceholder = {1: '无需填写', 2: '请输入一个产品ID', 3: '请输入接收消息的人员的手机号码'};
const redirectNamePlaceholder = {0:'无需填写', 1:'请输入一个产品ID', 2:'请输入消息跳转指定的URL地址'};
const sendNamePlaceholder = {1:'无需填写', 2:'请输入一个产品ID', 3:'请输入接收消息的人员的手机号码'};
return (
<Layout header={header}>
<Spin spinning={loading}>
<Form horizontal onSubmit={this.handleSubmit.bind(this)}>
<Form className="main-form" horizontal onSubmit={this.handleSubmit.bind(this)}>
<Form.Item label="推送渠道" {...formItemLayout}>
<Row>
<Col span="6">
......
src/containers/CustomMessage/Item.jsx
View file @ 1bb7d019
......@@ -9,7 +9,7 @@ import {
} from '../../utils';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
@connect(state=>({
loading: state.customMessage.loading,
......
src/containers/CustomMessage/List.jsx
View file @ 1bb7d019
......@@ -4,7 +4,7 @@ import {Table, Icon, Button, Switch, Form} from 'antd';
import {serialize, formatDateTime, productStatusToString, footerFormSubmitLayout} from '../../utils';
import {Link} from 'react-router';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
@connect(state=>({
......@@ -16,7 +16,9 @@ export default class List extends Component {
constructor(props, context) {
super(props, context);
this.state = {
filterVisible: false
}
}
componentDidMount() {
......@@ -93,11 +95,11 @@ export default class List extends Component {
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? 203 :150) }}
onRowClick={this.handleRowClick.bind(this)}
/>
</Layout>
......
src/containers/Product/AddItem.jsx
View file @ 1bb7d019
......@@ -27,7 +27,7 @@ import ElementForm from '../../components/ProductForm/ElementForm';
import DateTimeStatusForm from '../../components/ProductForm/DateTimeStatusForm';
import DocumentsForm from '../../components/ProductForm/DocumentsForm';
import ContactForm from '../../components/ProductForm/ContactForm';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
import Layout from '../../components/Layout/Layout';
......
src/containers/Product/EditItem.jsx
View file @ 1bb7d019
......@@ -28,7 +28,7 @@ import ElementForm from '../../components/ProductForm/ElementForm';
import DateTimeStatusForm from '../../components/ProductForm/DateTimeStatusForm';
import DocumentsForm from '../../components/ProductForm/DocumentsForm';
import ContactForm from '../../components/ProductForm/ContactForm';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
import Layout from '../../components/Layout/Layout';
@connect(state=>({
......
src/containers/Product/List.jsx
View file @ 1bb7d019
......@@ -17,7 +17,7 @@ import {
import {Link} from 'react-router';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
const ProductStatus = Object.keys(PRODUCT_STATUS).filter(key=>key != -9);
......@@ -147,13 +147,13 @@ export default class List extends Component {
this.fetchList(searchQuery);
}
handleResetFilterForm(e){
handleResetFilterForm(e) {
e.preventDefault();
this.props.form.setFieldsValue({
id:undefined,
id: undefined,
status: undefined,
categoryId:undefined,
title:undefined
categoryId: undefined,
title: undefined
});
}
......@@ -189,9 +189,11 @@ export default class List extends Component {
const operation = (
<div style={{textAlign:'right'}}>
<Button size="small" type="ghost" onClick={this.handleFilterVisible.bind(this)}>
<Button.Group>
<Button type="ghost" onClick={this.handleFilterVisible.bind(this)}>
<Icon type="filter"/>
</Button>
</Button.Group>
</div>
);
......@@ -199,17 +201,15 @@ export default class List extends Component {
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 className="filterForm" inline onSubmit={this.handleFilterSubmit.bind(this)}>
<Form.Item label="ID">
<Input placeholder="请输入搜索ID" {...searchStyle} {...getFieldProps('id')}/>
</Form.Item>
......@@ -247,7 +247,7 @@ export default class List extends Component {
</Form.Item>
</Form>
}
</div>
</MainHeader>
);
return (
......@@ -256,7 +256,7 @@ export default class List extends Component {
dataSource={Array.isArray(items)?items:[]}
loading={loading}
pagination={pagination}
scroll={{ y: window.innerHeight-(this.state.filterVisible? 432 :380) }}
scroll={{ y: window.innerHeight-(this.state.filterVisible? 203 :150) }}
onRowClick={this.handleRowClick.bind(this)}
/>
</Layout>
......
src/containers/Product/Product.less
View file @ 1bb7d019
......@@ -19,13 +19,20 @@
.tablist {
}
//.ant-tabs-vertical.ant-tabs-left > .ant-tabs-content {
// padding-left: 5px;
// padding-top: 24px;
//}
.ant-tabs-content {
flex: 1;
height: 100%;
padding-left:0 !important;
.ant-tabs-tabpane {
height: 100%;
overflow: auto;
padding-top:24px;
}
}
}
}
src/containers/Remittance/List.jsx
View file @ 1bb7d019
......@@ -4,7 +4,7 @@ import {Table, Icon} from 'antd';
import {Link} from 'react-router';
import {serialize, formatDateTime, remittanceAuditStatusToString} from '../../utils';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
const columns = [
{
......@@ -75,7 +75,9 @@ export default class List extends Component {
constructor(props, context) {
super(props, context);
this.state = {
filterVisible: false
}
}
componentDidMount() {
......@@ -122,11 +124,11 @@ export default class List extends Component {
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? 203 :150) }}
onRowClick={this.handleRowClick.bind(this)}
/>
</Layout>
......
src/containers/Remittance/PassItem.jsx
View file @ 1bb7d019
......@@ -21,7 +21,7 @@ import {
} from 'antd';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
import {
formatDateTime,
......
src/containers/Trade/AddItem.jsx
View file @ 1bb7d019
......@@ -18,7 +18,7 @@ import {
} from 'antd';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
import {
formatDateTime,
......@@ -122,7 +122,7 @@ export default class AddItem extends Component {
return (
<Layout header={header}>
<Spin spinning={loading}>
<Form horizontal onSubmit={this.handleSubmit.bind(this)} style={{height:'100%'}}>
<Form className="main-form" horizontal onSubmit={this.handleSubmit.bind(this)}>
<Form.Item {...smallFormItemLayout} label="理财师手机号" help="请准确核对理财师手机号码">
<Input {...getFieldProps('user.mobile')} />
</Form.Item>
......@@ -160,7 +160,7 @@ export default class AddItem extends Component {
{...getFieldProps('remittance.remittanceTime')}
/>
</Form.Item>
<Form.Item {...formItemLayout} label="投资人银行卡开户行">
<Form.Item {...smallFormItemLayout} label="投资人银行卡开户行">
<Input placeholder="中国工商银行杭州文一西路支行" {...getFieldProps('remittance.bankBranch')} />
</Form.Item>
<Form.Item {...formItemLayout} label="投资人银行卡照片">
......
src/containers/Trade/Commission.jsx
View file @ 1bb7d019
......@@ -29,7 +29,7 @@ import {
} from '../../utils';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
@connect(state=>({
item: state.trade.item,
......
src/containers/Trade/Contract.jsx
View file @ 1bb7d019
......@@ -29,7 +29,7 @@ import {
} from '../../utils';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
@connect(state=>({
loading: state.contract.loading,
......
src/containers/Trade/Item.jsx
View file @ 1bb7d019
......@@ -9,7 +9,7 @@ import {
} from '../../utils';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
@connect(state=>({
loading: state.trade.loading,
......
src/containers/Trade/List.jsx
View file @ 1bb7d019
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {Table, Icon, Breadcrumb, Row, Col, Input} from 'antd';
import {Table, Icon, Row, Col, Button, Form, Input, Cascader, Select} from 'antd';
import {Link} from 'react-router';
import {serialize, formatDateTime, tradeStatusToString} from '../../utils';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
const columns = [
{
......@@ -82,11 +82,14 @@ const columns = [
loading: state.trade.loading,
total: state.trade.total,
}))
@Form.create()
export default class List extends Component {
constructor(props, context) {
super(props, context);
this.state = {
filterVisible: false,
}
}
componentWillMount() {
......@@ -104,9 +107,45 @@ export default class List extends Component {
this.props.history.push('/trades/' + 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,
items,
loading,
history:{replace},
form:{getFieldProps},
location:{pathname, query}
} = this.props;
const pagination = {
total: total,
......@@ -128,18 +167,66 @@ export default class List extends Component {
}
};
const operation = (
<div style={{textAlign:'right'}}>
<Button.Group>
<Button type="ghost" onClick={this.handleFilterVisible.bind(this)}>
<Icon type="filter"/>
</Button>
</Button.Group>
</div>
);
const header = (<MainHeader breadcrumb={['订单管理', '订单列表']}
title="订单列表"/>);
const header = (
<MainHeader breadcrumb={['订单管理', '订单列表']}
operation={operation}
title="订单列表">
{
this.state.filterVisible &&
<Form className="filterForm" inline onSubmit={this.handleFilterSubmit.bind(this)}>
<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>
</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>
}
</MainHeader>
);
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? 203 :150) }}
onRowClick={this.handleRowClick.bind(this)}
/>
</Layout>
......
src/containers/Withdraw/List.jsx
View file @ 1bb7d019
......@@ -5,7 +5,7 @@ import {Link} from 'react-router';
import {serialize, formatDateTime, remittanceAuditStatusToString} from '../../utils';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
const columns = [
{
......@@ -17,6 +17,7 @@ const columns = [
title: '提款人',
dataIndex: 'bankCard',
key: 'bankCard',
width:150,
render: (bankCard, record)=>(<span>{bankCard.userName}</span>)
}, {
title: '提现金额',
......@@ -69,6 +70,9 @@ export default class List extends Component {
constructor(props, context) {
super(props, context);
this.state = {
filterVisible: false
}
}
......@@ -116,11 +120,11 @@ export default class List extends Component {
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? 203 :150) }}
onRowClick={this.handleRowClick.bind(this)}
/>
</Layout>
......
src/containers/Withdraw/PassItem.jsx
View file @ 1bb7d019
......@@ -21,7 +21,7 @@ import {
} from 'antd';
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader';
import MainHeader from '../../components/MainHeader/MainHeader';
import {
formatDateTime,
......
src/entries/index.less
View file @ 1bb7d019
@import '../variable';
:global {
html, body, #root {
height: 100vh !important;
height: 100%;
font-size: 14px;
background-color: #e9ecf3;
}
//input[type="text"][readonly],
//textarea[readonly]{
// background-color: #fafafa !important;
//}
//.ant-cascader-input[type="text"][readonly]{
// background-color: #fff !important;
//}
label,
.ant-form-item {
font-size: 14px !important;
.ant-form-explain {
font-size: 12px;
#root {
display: flex;
flex-direction: column;
.ant-btn,
.ant-btn-ghost,
.ant-pagination-item,
.ant-pagination-prev,
.ant-pagination-next {
&:focus,
&:hover {
color: @primary-color;
border-color: @primary-color;
}
}
.ant-btn-primary,
.ant-pagination-item-active {
background-color: @primary-color;
border-color: @primary-color;
&:hover {
color: #fff;
}
}
.ant-input,
.ant-select-selection {
&:focus,
&:hover {
border-color: @primary-color;
}
&:focus {
box-shadow: 0 0 0 2px rgba(76, 150, 137, 0.2);
}
}
.ant-btn-group {
.ant-btn-primary {
&:last-child:not(:first-child),
& + .ant-btn {
border-left-color: @primary-color;
}
}
.ant-btn {
font-weight: 400 !important;
}
.ant-table{
font-size: 14px !important;
.ant-pagination-prev:hover,
.ant-pagination-next:hover,
.ant-pagination-item:hover {
a {
color: @primary-color;
}
}
.ant-pagination-item-active:hover {
a {
color: #fff;
}
}
.ant-pagination-disabled:hover {
border-color: #d9d9d9;
a {
color: #ccc;
}
}
.ant-table {
th, td {
padding: 10px 5px;
}
}
.ant-form-item-with-help {
margin-bottom: 10px;
}
.ant-tabs-vertical {
.ant-tabs-nav {
padding-top: 14px;
}
}
.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab {
margin: 5px 0;
}
.list-table {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
& > div {
align-items: center;
.ant-table-header,
.ant-table {
&, table {
border-radius: 0;
}
}
.ant-table {
th, td {
&:first-child {
flex: 1
padding-left: 20px;
}
&:last-child {
padding-right: 20px;
}
}
th {
background-color: #eee;
.borderBottom;
}
tr {
&:nth-child(2n) {
background-color: #fcfcfc;
}
}
}
.ant-menu-vertical,
.ant-menu-inline,
.ant-menu-item-group-list {
& > .ant-menu-item,
& > .ant-menu-submenu > .ant-menu-submenu-title {
.cn {
font-size: 14px;
& > div {
&:first-child {
flex: 1;
width: 100%;
}
}
.ant-table-pagination {
margin: 10px 0;
}
.en {
font-size: 10px;
margin-left: .5em;
opacity: .45;
font-style: italic;
font-weight: 300;
}
.tac {
text-align: center !important;
}
.img-priview-dialog {
.ant-modal-content {
background-color: transparent;
img {
margin: auto;
display: block;
}
}
}
}
}
src/variable.less 0 → 100644
View file @ 1bb7d019
@primary-color : #4c9689;
@info-color : #4c9689;
@success-color : #87d068;
@error-color : #f50;
@warning-color : #fa0;
.borderBottom() {
border-bottom: 1px solid #e2e2e2;
}
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