//initialUnitPrice 即是单价也可是官费 import React,{Component} from 'react'; import {Button, DatePicker, Form, Input, message, Modal, Spin} from "antd"; import $ from "jquery/src/ajax"; import moment from "moment"; const layout = { labelCol: { span: 8, }, wrapperCol: { span: 16, }, }; const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 }, }; const confirm = Modal.confirm; 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); this.handleSubmit = this.handleSubmit.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){ //0审核 1待支付 2驳回 3已支付 4取消(0重新发起,1通过审核,2驳回) e.preventDefault(); this.props.form.validateFieldsAndScroll((err, values) => { if (err) { // console.log(err) return; } if(values.quantity !== undefined && (isNaN(parseFloat(values.quantity)) || values.quantity<=0)){ message.warning('申请支付数量不能小于等于零'); return; } const { paymentDetails } = this.state; this.setState({ loading: true }) let data = { id: this.props.payId, paymentAmount: paymentDetails.paymentAmount, // paymentStatus: paymentDetails.paymentStatus, //支付状态 0半款 1全款 status: status,//0 发起 1通过 2驳回(0重新发起,1通过审核,2驳回) } if(paymentDetails.chooseType === 2){ data.paymentAmount = values.applicationAmount } 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( status === 0 ? "重新申请成功" : status === 1 ? "通过审核操作成功" : status === 2 ? "驳回操作成功" : status === 3 ? "支付操作成功" : status === 4 ? "取消操作成功" :'' ); this.props.changeVisible(); } }).always(() => { this.setState({ loading: false }) }); }) } //新增财务付款 addfinancialPayment(e,index) { e.preventDefault(); let financialPaymentList = this.state.financialPaymentList.concat(); if(!financialPaymentList[index].partyAmount){ message.error('请填写正确的付款金额 '); return; } if(!financialPaymentList[index].paymentTimes){ message.error('请选择时间 '); return; } let time = moment(financialPaymentList[index].paymentTimes).format('YYYY-MM-DD HH:mm:ss'); this.setState({ loading: true }) let data = { pid: this.props.payId, partyAmount: financialPaymentList[index]['partyAmount'], paymentTimes: time, } $.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("新增成功"); let arr = this.state.financialPaymentList.concat(); arr[index].isSave= true; arr[index].id= res.data; this.setState({ financialPaymentList: arr }); // this.getSelectfinancialPayment(); } }).always(() => { this.setState({ loading: false }) }); } //删除财务付款 deleteFinancialPayment(e,index){ e.preventDefault(); if(!this.state.financialPaymentList[index]['id']){ let arr = this.state.financialPaymentList.concat(); arr.splice(index,1); this.setState({ financialPaymentList: arr }); return; } this.setState({ loading: true }) $.ajax({ type: 'post', url: globalConfig.context + "/api/admin/company/deleteFinancialPayment", dataType: "json", data: { id: this.state.financialPaymentList[index]['id'] }, }).done((res) => { if (res.error && res.error.length) { message.error(res.error[0].message); } else { let arr = this.state.financialPaymentList.concat(); arr.splice(index,1); this.setState({ financialPaymentList: arr }); message.success("删除成功"); } }).always(() => { this.setState({ loading: false }) }); } //0审核 1驳回 2待支付 3已支付 4取消 noExamineOperation(){ const { getFieldDecorator } = this.props.form; return ( this.state.paymentDetails.status === 2 ? <Form.Item> {getFieldDecorator('auditNotes', { rules: [{ required: true, message: '请输入重新发起说明!' }], })( <Input style={{ width: '200px' }} placeholder="请输入重新发起说明" type={'textarea'}/> )} <Button type="primary" htmlType="submit" style={{marginLeft:'15px'}}> 重新发起申请 </Button> <Button type="danger" style={{float:'right'}} onClick={(e)=>{ let _this = this; confirm({ title: '删除提醒?', content: '您确定要删除它吗?', onOk() { _this.handleSubmit(e,4); }, onCancel() {}, }); }}> 删除 </Button> </Form.Item> : <div/> ) } examineOperation() { const { getFieldDecorator } = this.props.form; return ( this.state.paymentDetails.status === 0 ? <Form.Item> {getFieldDecorator('auditNotes', { rules: [{ required: true, message: '请输入备注!' }], })( <Input style={{ width: '200px' }} placeholder="请输入备注" type={'textarea'}/> )} <Button type="primary" style={{marginLeft:'15px'}} onClick={(e)=>{ this.handleSubmit(e,2); }}> 驳回 </Button> <Button type="primary" style={{marginLeft:'15px'}} onClick={(e)=>{ this.handleSubmit(e,1); }}> 通过 </Button> </Form.Item> : this.state.paymentDetails.status === 1 ? this.state.financialPaymentList.map((value,index)=>( <div key={index} style={{display:'flex',flexFlow:'row nowrap',alignItems:'center',paddingTop:'15px'}}> <Form.Item label="付款时间:" style={{marginBottom:'0px !important',display:'flex',flexFlow:'row nowrap',alignItems:'center'}}> <DatePicker showTime disabled={value.isSave || value.id} format="YYYY-MM-DD HH:mm:ss" style={{ width: '200px' }} placeholder="请选择付款时间" value={value.paymentTimes && moment(value.paymentTimes, 'YYYY-MM-DD HH:mm:ss')} defaultValue={value.paymentTimes && moment(value.paymentTimes, 'YYYY-MM-DD HH:mm:ss')} onChange={(value)=>{ let arr = this.state.financialPaymentList.concat(); arr[index].paymentTimes = value; this.setState({ financialPaymentList:arr }) }} /> </Form.Item> <Form.Item label="付款金额(万元):" style={{paddingLeft:'20px',marginBottom:'0px !important',display:'flex',flexFlow:'row nowrap',alignItems:'center'}}> <Input disabled={value.isSave || value.id} style={{ width: '100px' }} placeholder="请输入付款金额" type={'number'} value={value.partyAmount && value.partyAmount} defaultValue={value.partyAmount && value.partyAmount} onChange={(e)=>{ let arr = this.state.financialPaymentList.concat(); arr[index].partyAmount = e.target.value; this.setState({ financialPaymentList:arr }) }} /> </Form.Item> {value.id ? false : !value.isSave ? <Button style={{marginLeft:'20px',}} type="primary" onClick={(e)=>{ this.addfinancialPayment(e,index) }}> 保存 </Button> : <div/>} <Button type="primary" style={{marginLeft:'20px',}} onClick={(e)=>{ this.deleteFinancialPayment(e,index); }}> 删除 </Button> </div> )) : <div/> ) } render() { const { getFieldDecorator } = this.props.form; const { paymentLogs,paymentDetails,financialPaymentList } = this.state; return( <Modal title={paymentDetails.status !== 4 ? (paymentDetails.chooseType === 0 ? '申请支付第三方' : paymentDetails.chooseType === 1 ? '申请支付催款' : paymentDetails.chooseType === 2 ? '申请支付官费' : '') : '支付详情'} className='payRecordComponent' width={700} maskClosable={false} footer={null} visible={this.props.visible} onCancel={() => { this.props.changeVisible(); }} > <Spin spinning={this.state.loading}> <div> {/*0第三方 1催款 2官费*/} <Form {...layout} name="basic" initialValues={{ remember: true, }} onSubmit={(e)=>{ this.handleSubmit(e) }} > {paymentDetails.status !== 4 ? <div> <Form.Item {...formItemLayout} className='formItemStyle' label="付款单位/个人:" > <div>{paymentDetails.companyName}</div> </Form.Item> {/*0第三方 1催款 2官费*/} {paymentDetails.chooseType !== 2 ? <Form.Item {...formItemLayout} className='formItemStyle' label={'单价(万元):'} > <div> {/* projectType 0正常 1专利 2软著 3审计*/} {/* isAuditPayment 是否为财务*/} {/* isAuditPaymentGLY 是否为财务经理或者为财务管理员*/} {/* chooseType 0第三方 1催款 2官费*/} {/*{*/} {/* (paymentDetails.chooseType === 2 || this.props.projectType === 2 || (this.props.projectType === 3 && this.props.patentType === 0) ) && !this.props.isAuditPayment?*/} {/* '***':*/} {/* paymentDetails.initialUnitPrice*/} {/*}*/} {isNaN(parseFloat(paymentDetails.initialUnitPrice)) ? paymentDetails.initialUnitPrice : parseFloat(paymentDetails.initialUnitPrice)} </div> </Form.Item> : null} <Form.Item {...formItemLayout} className='formItemStyle' label="数量:" > {getFieldDecorator('initialQuantity', { initialValue: parseInt(paymentDetails.initialQuantity), rules: [{ required: false, message: '请输入數量!' }], })( <Input disabled={true} style={{ width: '200px' }} placeholder="请输入數量" type={'number'}/> )} </Form.Item> <Form.Item {...formItemLayout} className='formItemStyle' label="总价(万元):" > <div>{isNaN(parseFloat(paymentDetails.initialTotalAmount)) ? paymentDetails.initialTotalAmount : parseFloat(paymentDetails.initialTotalAmount)}</div> </Form.Item> {/*官费不显示已付*/} {paymentDetails.chooseType !== 2 ? <Form.Item {...formItemLayout} className='formItemStyle' label="已付(万元):" > <div>{isNaN(parseFloat(paymentDetails.initialPaymentAmount)) ? paymentDetails.initialPaymentAmount : parseFloat(paymentDetails.initialPaymentAmount)}</div> </Form.Item> : <div/>} {/*0第三方 1催款 2官费*/} {/* projectType 0正常 1专利 2软著 3审计*/} { paymentDetails.chooseType === 2 || this.props.projectType === 1 || this.props.projectType === 2 ? <div style={{ marginBottom:'8px', marginTop:'8px' }}> <Form.Item {...formItemLayout} className='formItemStyle' label="本次申请支付数量:" > {getFieldDecorator('quantity', { initialValue: paymentDetails.quantity, rules: [{ required: true, message: '请输入本次申请支付数量!' }], })( <Input type={'number'} style={{ width: '200px' }} disabled={this.props.isAuditPaymentGLY ? this.props.isAuditPaymentGLY : ( this.props.isAuditPayment ? true : this.state.paymentDetails.status !== 2)} placeholder="请输入本次申请支付数量" onChange={(e)=>{ if(!isNaN(parseFloat(paymentDetails.initialUnitPrice))){ this.props.form.setFieldsValue({ applicationAmount: ((parseFloat(paymentDetails.initialUnitPrice) * 1000000) * e.target.value) / 1000000, }) } }} /> )} </Form.Item> </div> : <div/> } <Form.Item {...formItemLayout} className='formItemStyle' label="本次申请支付金额(万元):" > {getFieldDecorator('applicationAmount', { initialValue: parseFloat(paymentDetails.applicationAmount), rules: [ { required: !(this.props.isAuditPayment ? this.state.paymentDetails.status !== 0 : this.state.paymentDetails.status !== 2), message: '请输入本次申请支付金额!' } ], })( <Input type={'number'} style={{ width: '200px' }} disabled={this.props.isAuditPaymentGLY ? this.props.isAuditPaymentGLY : paymentDetails.chooseType === 2 || (this.props.isAuditPayment ? this.state.paymentDetails.status !== 0 : this.state.paymentDetails.status !== 2)} placeholder="请输入本次申请支付金额"/> )} </Form.Item> <Form.Item {...formItemLayout} className='formItemStyle' label="备注:" > { (!this.props.isAuditPaymentGLY && !this.props.isAuditPayment && this.state.paymentDetails.status === 2) ? getFieldDecorator('remarks', { initialValue: paymentDetails.remarks, rules: [{ required: true, message: '请输入备注!' }], })( <Input style={{ width: '200px' }} placeholder="请输入备注" type={'textarea'}/> ) : <div>{paymentDetails.remarks}</div> } </Form.Item> </div> : null} <div className='payStateList' style={{borderTop:paymentDetails.status !== 4? '1px #000 dashed' : '0'}}> <div className='listTitle' style={{color:'#F00'}}> 支付状态: <span style={{paddingLeft:'20px'}}> { //0审核 1待支付 2驳回 3已支付 4取消 paymentDetails.status === 0 ? '待'+paymentDetails.financeName+'审核' : paymentDetails.status === 1 ? '待'+paymentDetails.financeName+'支付' : paymentDetails.status === 2 ? '待重新提交' : paymentDetails.status === 3 ? '已完成支付' : paymentDetails.status === 4 ?'已取消' : '' } </span> </div> <div className='payList'> { paymentLogs.map((value,key)=>( <div key={key} style={{ paddingBottom: '2px', }}> <span style={{paddingRight:'8px'}}>{value.aname+':'}</span> {value.createTimes} <span style={{ paddingLeft:'8px', wordBreak: 'break-all' }}> { value.status === 0 ? '(发起)' : value.status === 1 ? '(通过)': value.status === 2 ? '(驳回)' : value.status === 3 ? '(完成)' : value.status === 4 ? '(取消)' :'' } {value.remarks} </span> </div> )) } </div> </div> {paymentDetails.status === 1 || paymentDetails.status === 3 || paymentDetails.status === 4 ?<div style={{ borderTop: '1px #000 dashed'}}> <div className='listTitle' style={{display:'block',fontSize:'15px'}}> 上传付费凭证-财务 <span style={{fontSize:'10px',paddingLeft:'10px'}}>实际付款(万元): {paymentDetails.paymentAmount}</span> {paymentDetails.status === 1 && this.props.isAuditPayment ? <Button style={{marginLeft:'20px'}} type="primary" onClick={()=>{ let arr = this.state.financialPaymentList.concat(); arr.push({}); this.setState({ financialPaymentList: arr }) }}> 增加付款凭证 </Button> : <div/> } </div> {!(paymentDetails.status === 1 && (this.props.isAuditPayment || this.props.isAuditPaymentGLY)) ? <div className='payList'> { financialPaymentList.map((value,key)=>( <div key={key} className='payitem'> 付款时间: {value.paymentTimes} <span style={{paddingLeft:'25px'}}>付款金额(万元): {value.partyAmount}</span> </div> )) } </div> : <div/>} </div> : <div/>} { this.props.isAuditPaymentGLY ? "" : (this.props.isAuditPayment ? this.examineOperation() : this.noExamineOperation()) } {this.props.isAuditPayment && paymentDetails.status === 1 ? <Button style={{marginLeft:'20px'}} type="primary" onClick={(e)=>{ this.handleSubmit(e,3); }}> 完成支付 </Button> : <div/>} </Form> </div> </Spin> </Modal> ) } } const WrappedNormalLoginForm = Form.create()(PayRecord); export default WrappedNormalLoginForm