Skip to content

D
dzt-mobx
Commit d749edc2 by fukai
Options

第一波调整

parent 636e111f
Showing with 460 additions and 20 deletions
src/views/Business/FET/Fetopn/FetStore.js 0 → 100644
import {observable,action} from 'mobx'
export default class FetStore {
@observable
steps = ['概况','账务明细','面函报文','结售汇数据采集','反洗钱','附件','业务备注']
// steps = ['概况','背景信息','账务明细','外管信息','跨境人民币申报','面函报文','反洗钱','附件','业务备注']
@observable
current=0
@action
next()
{
if(this.current== this.steps.length-1)
return
this.current++
}
@action
prevous()
{
if(this.current == 0)
return
this.current--
}
}
\ No newline at end of file
src/views/Business/FET/Fetopn.js → src/views/Business/FET/Fetopn/FetopnTab1.js
import React, {Component, Fragment} from 'react'
import {Form, Input, Select, Row, Col, Button, notification, DatePicker} from 'antd'
import {formItemLayout, formSubBtnLayout} from '../../../config'
import {formItemLayout, formSubBtnLayout} from '../../../../config'
import fieldSet from './descriptor/fetopn'
import fieldSet from '../descriptor/fetopn'
import Api from '../../../service/api'
import Api from '../../../../service/api'
const FormItem = Form.Item
const FromCreate = Form.create;
......@@ -19,6 +19,7 @@ export default class Fetopn extends Component {
}
handleSubmit = (e) => {
this.props.store.next()
e.preventDefault();
this.props.form.validateFieldsAndScroll(async (err, values) => {
console.log(err)
......@@ -41,7 +42,7 @@ export default class Fetopn extends Component {
const maxCURSelector = getFieldDecorator('maxcur', {
initialValue: '',
})(
<Select placeholder="请选择币种" style={{ width: 70 }}>
<Select placeholder="请选择币种" style={{ width: '100%' }}>
<Option value="156">CNY</Option>
<Option value="840">USD</Option>
</Select>
......@@ -49,7 +50,7 @@ export default class Fetopn extends Component {
const amtCURSelector = getFieldDecorator('amtcur', {
initialValue: '',
})(
<Select placeholder="请选择币种" style={{ width: 70 }}>
<Select placeholder="请选择币种" style={{ width: '100%' }}>
<Option value="156">CNY</Option>
<Option value="840">USD</Option>
</Select>
......@@ -57,7 +58,7 @@ export default class Fetopn extends Component {
const accCURSelector = getFieldDecorator('acccur', {
initialValue: '',
})(
<Select placeholder="请选择币种" style={{ width: 70 }}>
<Select placeholder="请选择币种" style={{ width: '100%' }}>
<Option value="156">CNY</Option>
<Option value="840">USD</Option>
</Select>
......@@ -65,7 +66,7 @@ export default class Fetopn extends Component {
const acc2CURSelector = getFieldDecorator('acc2cur', {
initialValue: '',
})(
<Select placeholder="请选择币种" style={{ width: 70 }}>
<Select placeholder="请选择币种" style={{ width: '100%' }}>
<Option value="156">CNY</Option>
<Option value="840">USD</Option>
</Select>
......@@ -263,26 +264,62 @@ export default class Fetopn extends Component {
<FormItem
{...formItemLayout}
label="外币金额"
style={{marginBottom:0}}
>
{getFieldDecorator('max', {rules: fieldSet.max})(
<Input addonBefore={maxCURSelector} placeholder="请填写外币金额"/>
)}
<Row>
<Col span={6}>
<FormItem>
{maxCURSelector}
</FormItem>
</Col>
<Col span={18}>
<FormItem>
{getFieldDecorator('max', {rules: fieldSet.max})(
<Input placeholder="请填写外币金额"/>
)}
</FormItem>
</Col>
</Row>
</FormItem>
<FormItem
{...formItemLayout}
label="本币金额"
style={{marginBottom:0}}
>
{getFieldDecorator('amt', {rules: fieldSet.amt})(
<Input addonBefore={amtCURSelector} placeholder="请填写本币金额"/>
)}
<Row>
<Col span={6}>
<FormItem>
{amtCURSelector}
</FormItem>
</Col>
<Col span={18}>
<FormItem>
{getFieldDecorator('amt', {rules: fieldSet.amt})(
<Input placeholder="请填写本币金额"/>
)}
</FormItem>
</Col>
</Row>
</FormItem>
<FormItem
{/*<FormItem
{...formItemLayout}
label="外币账号"
style={{marginBottom:0}}
>
{getFieldDecorator('acc', {rules: fieldSet.acc})(
<Input addonBefore={accCURSelector} placeholder="请填写外币账号"/>
)}
<Row>
<Col span={6}>
<FormItem>
{accCURSelector}
</FormItem>
</Col>
<Col span={18}>
<FormItem>
{getFieldDecorator('acc', {rules: fieldSet.acc})(
<Input placeholder="请填写外币账号"/>
)}
</FormItem>
</Col>
</Row>
</FormItem>
<FormItem
{...formItemLayout}
......@@ -315,9 +352,9 @@ export default class Fetopn extends Component {
{getFieldDecorator('sumcod', {rules: fieldSet.sumcod})(
<Input maxLength={20} placeholder="请填写结售汇统计代码"/>
)}
</FormItem>
</FormItem>*/}
<FormItem {...formSubBtnLayout}>
<Button type="primary" htmlType="submit" loading={this.state.loading}>提交</Button>
<Button icon="arrow-right" type="primary" htmlType="submit" loading={this.state.loading}>下一步</Button>
</FormItem>
</Form>
</Fragment>
......
src/views/Business/FET/Fetopn/FetopnTab2.js 0 → 100644
import React, {Component, Fragment} from 'react'
import {Form, Input, Select, Row, Col, Button, notification, DatePicker,Table,Card} from 'antd'
import {formItemLayout, formSubBtnLayout} from '../../../../config'
import fieldSet from '../descriptor/fetopn'
import Api from '../../../../service/api'
const FormItem = Form.Item
const FromCreate = Form.create;
const {Option} = Select;
const Search = Input.Search;
const InputGroup = Input.Group;
@FromCreate()
export default class Fetopn extends Component {
constructor(props) {
super(props)
this.state = {loading: false}
}
curSumCols = [
{
title:'币种',
key:'cur',
dataIndex:'cur'
},
{
title:'合计金额',
key:'amt',
dataIndex:'amt'
}
]
sxfDetailCols=[
{
title:'承担方',
key:'rol',
},
{
title:'费用名称',
key:'feecod',
},
{
title:'所属业务号',
key:'efofscid'
},
{
title:'币种',
key:'cur',
},
{
title:'应收金额',
key:'beooramt',
},
{
title:'实收金额',
key:'amt',
},
{
title:'收取类型',
key:'dsp',
},
{
title:'收费方式',
key:'wrksrc'
},
{
title:'明细',
key:'det'
}
]
accDetailCols=[
{
key:'debcdtflg',
title:'借贷方向',
},
{
title:'原始币种',
key:'cur',
},
{
title:'原始金额',
key:'fmtamt',
},
{
title:'账户币种',
key:'acccur',
},
{
title:'账户金额',
key:'fmtaccamt',
},
{
title:'汇率',
key:'rat',
},
{
title:'账号',
key:'act',
},
{
title:'账户性质',
key:'cortyp',
},
{
title:'余额查询',
key:'cprbut',
},
{
title:'明细',
key:'det',
},
]
handleSubmit = (e) => {
this.props.store.next()
e.preventDefault();
this.props.form.validateFieldsAndScroll(async (err, values) => {
console.log(err)
if (!err) {
console.log('Received values of form: ', values);
this.setState({loading: true})
}
});
}
async componentWillMount() {
// //发起交易切换
// const data = await Api.post('pxiadd/init',{data:{}})
// console.log(data)
}
render() {
const {getFieldDecorator} = this.props.form;
return (
<Fragment>
<Card title="手续费明细">
<Table columns={this.sxfDetailCols} size="small" bordered={true} />
</Card>
<Card title="各收费币种合计" style={{marginTop:'2em'}}>
<Table columns={this.curSumCols} size="small" bordered={true} />
</Card>
<Card title="账户明细" style={{marginTop:'2em'}}>
<Table columns={this.accDetailCols} size="small" bordered={true} />
</Card>
<FormItem {...formSubBtnLayout}>
<Button icon="arrow-left" onClick={()=>this.props.store.prevous()}>上一步</Button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<Button icon="arrow-right" type="primary" onClick={()=>this.props.store.next()} >下一步</Button>
</FormItem>
</Fragment>
)
}
}
\ No newline at end of file
src/views/Business/FET/Fetopn/FetopnTab3.js 0 → 100644
import React, {Component, Fragment} from 'react'
import {Form, Input, Select, Row, Col, Button, notification, DatePicker,Table,Card} from 'antd'
import {formItemLayout, formSubBtnLayout} from '../../../../config'
import fieldSet from '../descriptor/fetopn'
import Api from '../../../../service/api'
const FormItem = Form.Item
const FromCreate = Form.create;
const {Option} = Select;
const Search = Input.Search;
const InputGroup = Input.Group;
@FromCreate()
export default class Fetopn extends Component {
constructor(props) {
super(props)
this.state = {loading: false}
}
curSumCols = [
{
title:'币种',
key:'cur',
dataIndex:'cur'
},
{
title:'合计金额',
key:'amt',
dataIndex:'amt'
}
]
sxfDetailCols=[
{
title:'承担方',
key:'rol',
},
{
title:'费用名称',
key:'feecod',
},
{
title:'所属业务号',
key:'efofscid'
},
{
title:'币种',
key:'cur',
},
{
title:'应收金额',
key:'beooramt',
},
{
title:'实收金额',
key:'amt',
},
{
title:'收取类型',
key:'dsp',
},
{
title:'收费方式',
key:'wrksrc'
},
{
title:'明细',
key:'det'
}
]
accDetailCols=[
{
key:'debcdtflg',
title:'借贷方向',
},
{
title:'原始币种',
key:'cur',
},
{
title:'原始金额',
key:'fmtamt',
},
{
title:'账户币种',
key:'acccur',
},
{
title:'账户金额',
key:'fmtaccamt',
},
{
title:'汇率',
key:'rat',
},
{
title:'账号',
key:'act',
},
{
title:'账户性质',
key:'cortyp',
},
{
title:'余额查询',
key:'cprbut',
},
{
title:'明细',
key:'det',
},
]
handleSubmit = (e) => {
this.props.store.next()
e.preventDefault();
this.props.form.validateFieldsAndScroll(async (err, values) => {
console.log(err)
if (!err) {
console.log('Received values of form: ', values);
this.setState({loading: true})
}
});
}
async componentWillMount() {
// //发起交易切换
// const data = await Api.post('pxiadd/init',{data:{}})
// console.log(data)
}
render() {
const {getFieldDecorator} = this.props.form;
return (
<Fragment>
<Card title="手续费明细">
<Table columns={this.sxfDetailCols} size="small" bordered={true} />
</Card>
<Card title="各收费币种合计" style={{marginTop:'2em'}}>
<Table columns={this.curSumCols} size="small" bordered={true} />
</Card>
<Card title="账户明细" style={{marginTop:'2em'}}>
<Table columns={this.accDetailCols} size="small" bordered={true} />
</Card>
<FormItem {...formSubBtnLayout}>
<Button icon="arrow-left" onClick={()=>this.props.store.prevous()}>上一步</Button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<Button icon="arrow-right" type="primary" onClick={()=>this.props.store.next()} >下一步</Button>
</FormItem>
</Fragment>
)
}
}
\ No newline at end of file
src/views/Business/FET/Fetopn/index.js 0 → 100644
import React, {Component, Fragment} from 'react'
import {Form, Input, Select, Row, Col, Button, notification, DatePicker,Steps,Affix,Breadcrumb,Icon} from 'antd'
import FetStore from './FetStore'
import FetopnTab1 from './FetopnTab1'
import FetopnTab2 from './FetopnTab2'
import { observer } from "mobx-react"
const Step = Steps.Step;
const store = new FetStore()
@observer
export default class Fetopn extends Component{
renderChild(code)
{
if(code == '概况')
return <FetopnTab2 store={store}/>
if(code == '账务明细')
return <FetopnTab2 store={store}/>
}
render()
{
return <React.Fragment>
<Row>
<Col span={20}>
<Breadcrumb>
<Breadcrumb.Item><Icon type="form" />结售汇</Breadcrumb.Item>
<Breadcrumb.Item>{store.steps[store.current]}</Breadcrumb.Item>
</Breadcrumb>
{this.renderChild(store.steps[store.current])}
</Col>
<Col span={4}>
<Affix offsetTop={100}>
<Steps size="small" current={store.current} direction="vertical">
{
store.steps.map((item,index)=>{
return <Step title={item} key={index} />
})
}
</Steps>
</Affix>
</Col>
</Row>
</React.Fragment>
}
}
\ No newline at end of file
src/views/Layout/index.js
import React,{Component} from 'react'
import { Switch, Route, Redirect } from 'react-router-dom';
import {Layout} from 'antd'
import {Layout,Card} from 'antd'
import HeaderCom from './Header'
import SideMenuCom from './SideMenu'
......@@ -38,6 +38,7 @@ export default class LayoutCom extends Component {
<Content className="xxx_content">
<ContainerCom>
{/*模块路由配置*/}
<Card>
<Switch>
<Route path="/home" component={Home} />
{/*模块路由插入开始*/}
......@@ -46,6 +47,7 @@ export default class LayoutCom extends Component {
{/*模块路由插入结束*/}
<Redirect path="/" to="/home" />
</Switch>
</Card>
</ContainerCom>
</Content>
</Layout>
......
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