import React from 'react'; import { Icon, Table, Modal, message, Spin, Input, Select, Button, Form ,Upload,Popconfirm,DatePicker} from 'antd'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import '../../userMangagement.less'; import {} from '../../../../dataDic.js'; import {getOrderType ,getOrderChannel , getOrderState ,getProjectState,getPaymentState ,getApprovedState,getTransactionChannel,getTransactionProject } from '../../../../tools.js'; import moment from 'moment'; const MyBillDetaile = Form.create()(React.createClass({ getInitialState() { return { loading: false, visible: false, seeOrderVisible:false }; }, //查看基本详情基本信息 loaduser(record){ if(record){ this.setState({ loading:true }) $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/order/selectBillDetail', data: { billNo: record.billNo }, success: function (data) { let thisData = data.data; if (!thisData) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; thisData = {}; }; this.setState({ orderList:thisData, billNoId:record.billNo, financialPayNo:thisData.financialPayNo, financialPayTime:thisData.financialPayTime?moment(thisData.financialPayTime,'YYYY-MM-DD HH:mm:ss'):undefined, remarks:thisData.remarks, }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); } }, //保存确认流水 handleSubmit(state){ if(this.state.selTime==undefined){ message.warning('请选择财务流水时间'); return false; }; this.setState({ loading: true }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/order/confrimBill', data: { confirm:state?'1':'0', billNo:this.state.billNoId, orderNo:this.props.datauser.orderNo, financialPayNo:this.state.financialPayNo, financialPayTime:this.state.selTime, remarks:this.state.remarks } }).done(function(data) { this.setState({ loading: false }); if(!data.error.length) { message.success('已确认!'); this.handleOk() } else { message.warning(data.error[0].message); } }.bind(this)); }, //时间选择 selTime(e,index){ this.setState({ financialPayTime:e, selTime:index }) }, //确认流水 toVoidCancel(){ this.handleSubmit(true) }, //作废流水 toVoid(){ this.handleSubmit(false) }, handleOk(e) { this.setState({ visible: false, }); this.props.closeDesc(false, true); }, handleCancel(e) { this.setState({ visible: false, }); this.props.closeDesc(false); }, componentWillMount() { }, nextCancel() { this.setState({ addnextVisible: false }) }, //查看订单 seeOrder(){ this.setState({ seeOrderVisible:true }) this.seeOrderList() }, seeOrderCancel(){ this.setState({ seeOrderVisible:false }) }, seeOrderList(){ this.state.lookOrderList=[]; $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/order/getServiceOrderDetail', data: { orderNo: this.props.datauser.orderNo }, success: function (data) { let thisData = data.data; if (!thisData) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; thisData = {}; }; this.setState({ id:thisData.id, lookOrderList:thisData, }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, componentWillReceiveProps(nextProps) { //props改变时触发 this.state.visible = nextProps.showDesc; if(nextProps.userDetaile && nextProps.showDesc ) { this.loaduser(nextProps.datauser); }; }, render() { const FormItem = Form.Item const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 }, }; const orderDetaiel=this.state.orderList || []; const seeOrderDetaiel=this.state.lookOrderList || []; return( <div> <Modal maskClosable={false} visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} width='1000px' title='流水详情' footer='' className="admin-desc-content"> <Form layout="horizontal" id="demand-form" style={{paddingBottom:'40px'}}> <Spin spinning={this.state.loading}> <div className="clearfix"> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="平台流水号" > <span>{orderDetaiel.billNo}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="平台流水时间" > <span>{orderDetaiel.createTime}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="流水金额" > <span>{orderDetaiel.transactionAmount+'万元'}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="流水科目" > <span>{getTransactionProject(orderDetaiel.transactionSubject)}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="流水状态" > <span>{orderDetaiel.confirmSign?'已确认':'待确认'}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="付款人名称" > <span>{orderDetaiel.payerName}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="收款人名称" > <span>{orderDetaiel.payeeName}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="交易外联" > <span>{getTransactionChannel(orderDetaiel.transactionChannel)}</span> </FormItem> <div className='clearfix'> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label="附言" > <span>{orderDetaiel.postscript}</span> </FormItem> </div> <div className='clearfix'> <FormItem className="half-item" {...formItemLayout} label="订单编号" > <span>{orderDetaiel.orderNo}</span> <Button style={{float:'right'}} onClick={this.seeOrder}>查看订单</Button> </FormItem> </div> <div className='clearfix'> <FormItem className="half-item" {...formItemLayout} label="订单负责人" > <span>{orderDetaiel.salesmanName}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="财务负责人" > <span>{orderDetaiel.financeName}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="流水确认时间" > <span>{orderDetaiel.confirmTime}</span> </FormItem> </div> {!this.props.rowClick?<div className='clearfix'> <FormItem className="half-item" {...formItemLayout} label="财务流水号" > <Input value={this.state.financialPayNo} style={{width:'240px'}} placeholder="请输入财务流水号" onChange={(e)=>{this.setState({financialPayNo:e.target.value})}} required="required" /> </FormItem> <FormItem className="half-item" {...formItemLayout} label="财务流水时间" > <DatePicker style={{marginTop:'0',width:'200px',height:'27px'}} showTime format="YYYY-MM-DD HH:mm:ss" placeholder="选择时间" value={this.state.financialPayTime} onChange={(e,time)=>{this.selTime(e,time)}} /> <span className="mandatory">*</span> </FormItem> </div>:<div className='clearfix'> <FormItem className="half-item" {...formItemLayout} label="财务流水号" > <span>{orderDetaiel.financialPayNo}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="财务流水时间" > <span>{orderDetaiel.financialPayTime}</span> </FormItem> </div>} {!this.props.rowClick?<div className='clearfix'> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label="财务备注" > <Input type="textarea" placeholder="请输入财务备注" rows={4} value={this.state.remarks} onChange={(e)=>{this.setState({remarks:e.target.value})}}/> </FormItem> </div>:<div className='clearfix'> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label="财务备注" > <span>{orderDetaiel.remarks}</span> </FormItem> </div>} {!this.props.rowClick?<div className='btnSave'> <Button className="setSave" type="primary" onClick={this.toVoidCancel}>确认流水</Button> <Button className="toVoid" type="danger" onClick={this.toVoid}>作废流水</Button> <Button className="cancel" type="ghost" onClick={this.handleCancel}>返回</Button> </div>:''} </div> </div> </Spin> </Form > </Modal> <Modal maskClosable={false} visible={this.state.seeOrderVisible} onOk={this.seeOrderCancel} onCancel={this.seeOrderCancel} width='1000px' title= '查看订单' footer='' className="admin-desc-content"> <Form layout="horizontal" id="demand-form"> <Spin spinning={this.state.loading}> <div className="clearfix"> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="订单编号" > <span>{seeOrderDetaiel.orderNo}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="下单时间" > <span>{seeOrderDetaiel.createTime}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="客户名称" > <span>{seeOrderDetaiel.buyerName}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="订单类型" > <span>{getOrderType(seeOrderDetaiel.orderType)}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="订单外联" > <span>{getOrderChannel(seeOrderDetaiel.orderChannel)}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="订单状态" > <span>{getOrderState(seeOrderDetaiel.orderStatus)}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="已收款项" > <span>{seeOrderDetaiel.actuallyTotalAmount+'万元'}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="结算状态" > <span>{getPaymentState(seeOrderDetaiel.liquidationStatus)}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="市价订单金额" > <span>{seeOrderDetaiel.orderAmount+'万元'}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="市价首款金额" > <span>{seeOrderDetaiel.firstPayment+'万元'}</span> </FormItem> <div className='clearfix'> <FormItem className="half-item" {...formItemLayout} label="实签订单金额" > <span>{seeOrderDetaiel.signTotalAmount+'万元'}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="实签首款金额" > <span>{seeOrderDetaiel.signFirstPayment+'万元'}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="特批立项" > <span>{getApprovedState(seeOrderDetaiel.approval)}</span> </FormItem> <div className='clearfix'> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label="订单留言" > <span>{seeOrderDetaiel.orderRemarks}</span> </FormItem> </div> </div> </div> <div className='clearfix'> <FormItem className="half-item" {...formItemLayout} label="订单负责人" > <span>{seeOrderDetaiel.salesmanName}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="意向时间" > <span>{seeOrderDetaiel.createTime}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="签单时间" > <span>{seeOrderDetaiel.signTime}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="财务负责人" > <span>{seeOrderDetaiel.financeName}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="项目负责人" > <span>{seeOrderDetaiel.technicianName}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="立项时间" > <span>{seeOrderDetaiel.setUpTime}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="项目状态" > <span>{getProjectState(seeOrderDetaiel.projectStage)}</span> </FormItem> </div> </div> </Spin> </Form > </Modal> </div> ) } })); export default MyBillDetaile;