import React,{Component} from 'react'; import {Button, Form, Input, message, Modal, Spin} from "antd"; import $ from "jquery/src/ajax"; const layout = { labelCol: { span: 8, }, wrapperCol: { span: 16, }, }; const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 }, }; class PayRecord extends Component{ constructor(props) { super(props); this.state={ loading: false, paymentLogs: [], paymentDetails: {}, financialPaymentList: [], } this.examineOperation = this.examineOperation.bind(this); this.noExamineOperation = this.noExamineOperation.bind(this); } componentDidMount() { this.getSelectPaymentLog(); //付款日志 this.getPaymentDetails(); //支付详情 this.getSelectfinancialPayment(); //财务付款列表 } //付款日志 getSelectPaymentLog(){ this.setState({ loading: true }); $.ajax({ type: 'get', cache: false, url: globalConfig.context + "/api/admin/company/selectPaymentLog", dataType: "json", data: { id: this.props.payId }, success: function (data) { this.setState({ loading: false }); if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { this.setState({ paymentLogs: data.data }) }; }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); } //支付详情 getPaymentDetails(){ this.setState({ loading: true }); $.ajax({ type: 'get', cache: false, url: globalConfig.context + "/api/admin/company/OrderPaymentDetails", dataType: "json", data: { id: this.props.payId }, success: function (data) { this.setState({ loading: false }); if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { this.setState({ paymentDetails: data.data }) }; }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); } //财务付款列表 getSelectfinancialPayment(){ this.setState({ loading: true }); $.ajax({ type: 'get', cache: false, url: globalConfig.context + "/api/admin/company/selectfinancialPayment", dataType: "json", data: { id: this.props.payId }, success: function (data) { this.setState({ loading: false }); if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { this.setState({ financialPaymentList: data.data }) }; }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); } handleSubmit(e,status = 0){ e.preventDefault(); this.props.form.validateFieldsAndScroll((err, values) => { if (err) { return; } const { paymentDetails } = this.state; this.setState({ loading: true }) let data = { id: this.props.payId, paymentAmount: paymentDetails.paymentAmount, paymentStatus: paymentDetails.paymentStatus, status: status,//0 发起 1通过 2驳回(0重新发起,1通过审核,2驳回) } Object.assign(data,values) $.ajax({ type: 'post', url: globalConfig.context + "/api/admin/company/updateOrderPayment", dataType: "json", data: data, }).done((res) => { if (res.error && res.error.length) { message.error(res.error[0].message); } else { message.success("重新申请成功"); } }).always(() => { this.setState({ loading: false }) }); }) } //新增财务付款 addfinancialPayment(e) { e.preventDefault(); this.props.form.validateFieldsAndScroll((err, values) => { if (err) { return; } const { paymentDetails } = this.state; this.setState({ loading: true }) let data = { pid: this.props.payId, partyAmount: values.partyAmount, paymentTimes: values.paymentTimes } $.ajax({ type: 'post', url: globalConfig.context + "/api/admin/company/addfinancialPayment", dataType: "json", data: data, }).done((res) => { if (res.error && res.error.length) { message.error(res.error[0].message); } else { message.success("新增成功"); } }).always(() => { this.setState({ loading: false }) }); }) } //0审核 1驳回 2待支付 3已支付 4取消 noExamineOperation(){ return ( this.state.paymentDetails.status === 1 ? <Form.Item> <Button type="primary" htmlType="submit"> 重新发起申请 </Button> </Form.Item> : <div/> ) } examineOperation() { const { getFieldDecorator } = this.props.form; return ( this.state.paymentDetails.status === 0 ? <Form.Item> {getFieldDecorator('remarks', { rules: [{ required: true, message: '请输入备注!' }], })( <Input style={{ width: '200px' }} placeholder="请输入备注" type={'textarea'}/> )} <Button type="primary" onClick={(e)=>{ this.handleSubmit(e,2); }}> 驳回 </Button> <Button type="primary" onClick={(e)=>{ this.handleSubmit(e,1); }}> 通过 </Button> </Form.Item> : this.state.paymentDetails.status === 2 ? <div> <Form.Item label="付款时间:"> {getFieldDecorator('remarks', { rules: [{ required: true, message: '请输入付款时间!' }], })( <Input style={{ width: '100px' }} placeholder="请输入付款时间" type={'number'}/> )} </Form.Item> <Form.Item label="付款金额(万元):"> {getFieldDecorator('remarks', { rules: [{ required: true, message: '请输入付款金额!' }], })( <Input style={{ width: '100px' }} placeholder="请输入付款金额" type={'time'}/> )} </Form.Item> <Button type="primary" onClick={(e)=>{ this.addfinancialPayment(e) }}> 保存 </Button> </div> : <div/> ) } render() { const { getFieldDecorator } = this.props.form; const { paymentLogs,paymentDetails,financialPaymentList } = this.state; return( <Modal maskClosable={false} footer={null} visible={this.props.visible} onCancel={() => { this.props.changeVisible(); }} > <Spin spinning={this.state.loading}> <div> <div>申请支付外包费用</div> <Form {...layout} name="basic" initialValues={{ remember: true, }} onSubmit={(e)=>{ this.handleSubmit(e) }} > <Form.Item {...formItemLayout} style={{ display:'flex' }} label="付款单位/个人:" > <div>{paymentDetails.companyName}</div> </Form.Item> <Form.Item {...formItemLayout} style={{ display:'flex' }} label="单价(万元):" > <div>{paymentDetails.nodeUnitPrice}</div> </Form.Item> <Form.Item {...formItemLayout} style={{ display:'flex' }} label="数量:" > {getFieldDecorator('quantity', { initialValue: parseInt(paymentDetails.quantity), rules: [{ required: false, message: '请输入數量!' }], })( <Input disabled={paymentDetails.quantity <= 1 || this.state.paymentDetails.status > 1} style={{ width: '200px' }} placeholder="请输入數量" type={'number'}/> )} </Form.Item> <Form.Item {...formItemLayout} style={{ display:'flex' }} label="总价(万元):" > <div>{paymentDetails.nodeTotalAmount}</div> </Form.Item> <Form.Item {...formItemLayout} style={{ display:'flex' }} label="已付(万元):" > <div>{paymentDetails.nodePartyAmount}</div> </Form.Item> <Form.Item {...formItemLayout} style={{ display:'flex' }} label="本次申请支付金额(万元):" > {getFieldDecorator('applicationAmount', { initialValue: paymentDetails.applicationAmount, rules: [{ required: true, message: '请输入本次申请支付金额!' }], })( <Input disabled={this.state.paymentDetails.status > 1} style={{ width: '200px' }} placeholder="请输入本次申请支付金额" type={'number'}/> )} </Form.Item> <Form.Item {...formItemLayout} style={{ display:'flex' }} label="备注:" > <div>{paymentDetails.remarks}</div> </Form.Item> <div className='payStateList'> <div className='listTitle'> 支付状态 </div> <div className='payList'> { paymentLogs.map((value,key)=>( <div key={key} className='payitem' style={{color:key === 0 ? '#f00' : '#000'}}> {value.aname+':'} { value.status === 0 ? '(发起)'+value.remarks : value.status === 1 ? '(通过)'+value.remarks : '(驳回)'+value.remarks } { value.createTimes } </div> )) } </div> </div> {paymentDetails.status === 2 || paymentDetails.status === 3 || paymentDetails.status === 4 ?<div className='payStateList'> <div className='listTitle' style={{display:'block',fontSize:'15px'}}> 上传付费凭证-财务 <span style={{fontSize:'10px',paddingLeft:'10px'}}>实际付款(万元): {paymentDetails.paymentAmount}</span> </div> <div className='payList'> { financialPaymentList.map((value,key)=>( <div key={key} className='payitem' style={{color:key === 0 ? '#f00' : '#000'}}> 付款时间: {value.paymentTimes} <span style={{paddingLeft:'25px'}}>付款金额(万元): {value.partyAmount}</span> </div> )) } </div> </div> : <div/>} { this.props.isAuditPayment ? this.examineOperation() : this.noExamineOperation() } </Form> </div> </Spin> </Modal> ) } } const WrappedNormalLoginForm = Form.create()(PayRecord); export default WrappedNormalLoginForm