import React, { Component } from 'react' import { Form, Spin, Table, Modal, Col, Tag, Button, message, Row, Popconfirm, } from 'antd' import {getProjectStatus,} from '@/tools' import { getMaterialStatus, getUrgentStatus } from '@/tools' import ApplyPaymentModal from './applyPaymentModal'; import PayRecord from './payRecord'; import ImgList from '../../../common/imgList/index'; import './index.less' import $ from "jquery"; class CheckProject extends Component { constructor(props) { super(props) this.state = { value: '', loading: false, previewImage: '', previewVisible: false, payRecordVisible: false, orderPaymentsId: 0, previewPayVisible: false, type: 1,//1 申请付款 2 申请付官费 previewPayInfor: {}, //点击申请付款的第三方信息或者支付节点信息 nodeId: 0, // 专利 ContactsListsNew: [], //付款节点表头 PayNodeTableColunms: [], outsourceLogs: [],//审核日志 selectOrderPayments: [],//支付列表 } } componentDidMount() { if(this.props.tid){ setTimeout(()=>{ this.getSelectOutsourceLog(); this.getSelectOrderPayment(); this.projectTypeTabContent(this.props.projectType); },500) } } projectTypeTabContent(projectType) { this.setState({ //付款节点表头 PayNodeTableColunms: [ { title: '供应商名称', dataIndex: 'companyName', key: 'companyName', render: (text, record, index) => { if (text) { return <span>{text}</span> } }, }, { title: '付款科目', dataIndex: 'dunType', key: 'dunType', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '付款时间', dataIndex: 'partyTimes', key: 'partyTimes', render: (text, record) => { return <span>{text ? text : '/'}</span> }, }, { title: '数量', dataIndex: 'quantity', key: 'quantity', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '总价(万元)', dataIndex: 'totalAmount', key: 'totalAmount', render: (text, record) => { return <span>{text}</span> }, }, { title: '已付', dataIndex: 'partyAmount', key: 'partyAmount', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '操作', dataIndex: 'dels', key: 'dels', render: (text, record, index) => { return ( <div> {/*外包审核通过后,咨询师/咨询经理可申请付款*/} {/*存在支付节点时不显示第三方的申请付款*/} {/*0-待审核 ,1-审核通过,2-审核拒绝 true [NULL]*/} {/*this.props.startType 0外包 1供应商(不需要审核)*/} {/*record.status 0-未支付 1-待全款 ,2已全款 status=2的时候已经全款,按钮可以去掉了*/} <Button disabled={ !(this.props.isPreviewPay && (this.props.status === 1 || parseInt(this.props.startType) === 1) && record.status !==2 ) } type="primary" onClick={() => { this.setState({ previewPayVisible: true, previewPayInfor: record, }) }}> 申请付款 </Button> {this.props.status === 2 ? <Popconfirm title="是否删除?" onConfirm={() => { this.payNodeConfirmDeletNew(record) }} okText="删除" cancelText="不删除" > <Button disabled={this.props.status !== 2} onClick={(e) => { e.stopPropagation() }} style={{ marginLeft: '10px', color: '#ffffff', background: '#f00', border: 'none', }} > 删除 </Button> </Popconfirm> : <div/>} </div> ) }, }, ], }) if(projectType === 0 || !projectType){ //0正常 1专利 2软著 3审计 this.setState({ ContactsListsNew: [ { title: '供应商名称', dataIndex: 'companyName', key: 'companyName', render: (text, record, index) => { if (text) { return <span>{text}</span> } }, }, { title: '单价(万元)', dataIndex: 'unitPrice', key: 'unitPrice', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '数量', dataIndex: 'quantity', key: 'quantity', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '总价(万元)', dataIndex: 'totalAmount', key: 'totalAmount', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '备注', dataIndex: 'remarks', key: 'remarks', }, { title: '操作', dataIndex: 'action', key: 'action', render: (text, record) => { return ( <div> {/*外包审核通过后,咨询师/咨询经理可申请付款*/} {/*存在支付节点时不显示第三方的申请付款*/} {/*0-待审核 ,1-审核通过,2-审核拒绝 true [NULL]*/} {/*this.props.startType 0外包 1供应商(不需要审核)*/} <Button disabled={ !(this.props.isPreviewPay && (this.props.status === 1 || parseInt(this.props.startType) === 1) && this.props.dataSource.length === 0) } type="primary" onClick={() => { this.setState({ previewPayVisible: true, previewPayInfor: record, }) }}> 申请付款 </Button> {this.props.status === 2 ? <Popconfirm title="是否删除?" onConfirm={() => { this.confirmDeletNew(record) }} okText="删除" cancelText="不删除" > <Button disabled={this.props.status !== 2} onClick={(e) => { e.stopPropagation() }} style={{ marginLeft: '10px', color: '#ffffff', background: '#f00', border: 'none', }} > 删除 </Button> </Popconfirm> : <div/>} </div> ) }, }, ], }) }else if(projectType === 2){ //2软著 this.setState({ ContactsListsNew: [ { title: '供应商名称', dataIndex: 'companyName', key: 'companyName', render: (text, record, index) => { if (text) { return <span>{text}</span> } }, }, { title: '单价(万元)', dataIndex: 'unitPrice', key: 'unitPrice', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '数量', dataIndex: 'quantity', key: 'quantity', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '总价(万元)', dataIndex: 'totalAmount', key: 'totalAmount', render: (text, record) => { if (text) { return <span>***</span> } }, }, { title: '材料', dataIndex: 'material', key: 'material', render: (text, record) => { return getMaterialStatus(text) }, }, { title: '加急', dataIndex: 'urgent', key: 'urgent', render: (text, record) => { return getUrgentStatus(text) }, }, { title: '操作', dataIndex: 'action', key: 'action', render: (text, record) => { return ( <div> {/*外包审核通过后,咨询师/咨询经理可申请付款*/} {/*存在支付节点时不显示第三方的申请付款*/} {/*0-待审核 ,1-审核通过,2-审核拒绝 true [NULL]*/} { <Button disabled={ !(this.props.isPreviewPay && (this.props.status === 1 || parseInt(this.props.startType) === 1) && this.props.dataSource.length === 0) } type="primary" onClick={() => { this.setState({ previewPayVisible: true, previewPayInfor: record, }) }}> 申请付款 </Button> } {this.props.status === 2 ? <Popconfirm title="是否删除?" onConfirm={() => { this.confirmDeletNew(record) }} okText="删除" cancelText="不删除" > <Button disabled={this.props.status !== 2} onClick={(e) => { e.stopPropagation() }} style={{ marginLeft: '10px', color: '#ffffff', background: '#f00', border: 'none', }} > 删除 </Button> </Popconfirm> : <div/>} </div> ) }, }, ], }) }else if(projectType === 1){ //1专利 if(this.props.patentType === 0){ //专利申请 this.setState({ ContactsListsNew: [ { title: '供应商名称', dataIndex: 'companyName', key: 'companyName', render: (text, record, index) => { if (text) { return <span>{text}</span> } }, }, { title: '单价(万元)', dataIndex: 'unitPrice', key: 'unitPrice', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '数量', dataIndex: 'quantity', key: 'quantity', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: "官费", dataIndex: "officialCost", key: "officialCost", render: (text) => { return text === 1 ? '含官费' : '不含官费' }, }, { title: "费减", dataIndex: "costReduction", key: "costReduction", render: (text) => { return text === 1 ? '有费减' : '无费减' }, }, { title: '总价(万元)', dataIndex: 'totalAmount', key: 'totalAmount', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '备注', dataIndex: 'remarks', key: 'remarks', }, { title: '操作', dataIndex: 'action', key: 'action', render: (text, record) => { return ( <div> {/*外包审核通过后,咨询师/咨询经理可申请付款*/} {/*存在支付节点时不显示第三方的申请付款*/} {/*0-待审核 ,1-审核通过,2-审核拒绝 true [NULL]*/} <Button disabled={ !(this.props.isPreviewPay && (this.props.status === 1 || parseInt(this.props.startType) === 1) && this.props.dataSource.length === 0) } type="primary" onClick={() => { this.setState({ previewPayVisible: true, previewPayInfor: record, }) }}> 申请付款 </Button> {record.officialCost === 1? <Button type="primary" style={{ marginLeft: '10px', }} disabled={!(this.props.isPreviewPay && (this.props.status === 1 || parseInt(this.props.startType) === 1))} onClick={() => { this.setState({ previewPayVisible: true, previewPayInfor: record, type: 2, }) }}> 付官费 </Button> : <div/>} {this.props.status === 2 ? <Popconfirm title="是否删除?" onConfirm={() => { this.confirmDeletNew(record) }} okText="删除" cancelText="不删除" > <Button disabled={this.props.status !== 2} onClick={(e) => { e.stopPropagation() }} style={{ marginLeft: '10px', color: '#ffffff', background: '#f00', border: 'none', }} > 删除 </Button> </Popconfirm> : <div/>} </div> ) }, }, ], }) }else{ this.setState({ ContactsListsNew: [ { title: '供应商名称', dataIndex: 'companyName', key: 'companyName', render: (text, record, index) => { if (text) { return <span>{text}</span> } }, }, { title: '单价(万元)', dataIndex: 'unitPrice', key: 'unitPrice', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '数量', dataIndex: 'quantity', key: 'quantity', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '总价(万元)', dataIndex: 'totalAmount', key: 'totalAmount', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '备注', dataIndex: 'remarks', key: 'remarks', }, { title: '操作', dataIndex: 'action', key: 'action', render: (text, record) => { return ( <div> {/*外包审核通过后,咨询师/咨询经理可申请付款*/} {/*存在支付节点时不显示第三方的申请付款*/} {/*0-待审核 ,1-审核通过,2-审核拒绝 true [NULL]*/} { <Button disabled={ !(this.props.isPreviewPay && (this.props.status === 1 || parseInt(this.props.startType) === 1) && this.props.dataSource.length === 0) } type="primary" onClick={() => { this.setState({ previewPayVisible: true, previewPayInfor: record, }) }}> 申请付款 </Button> } {this.props.status === 2 ? <Popconfirm title="是否删除?" onConfirm={() => { this.confirmDeletNew(record) }} okText="删除" cancelText="不删除" > <Button disabled={this.props.status !== 2} onClick={(e) => { e.stopPropagation() }} style={{ marginLeft: '10px', color: '#ffffff', background: '#f00', border: 'none', }} > 删除 </Button> </Popconfirm> : <div/>} </div> ) }, }, ] }) } }else if(projectType === 3){ //3审计 this.setState({ ContactsListsNew: [ { title: '供应商名称', dataIndex: 'companyName', key: 'companyName', render: (text, record, index) => { if (text) { return <span>{text}</span> } }, }, { title: '单价(万元)', dataIndex: 'unitPrice', key: 'unitPrice', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '数量', dataIndex: 'quantity', key: 'quantity', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '总价(万元)', dataIndex: 'totalAmount', key: 'totalAmount', render: (text, record) => { if (text) { return <span>***</span> } }, }, { title: '审计', dataIndex: 'audit', key: 'audit', render: (text, record) => { if (text) { return <span>{text===0?'无审计':text===1?'年审':'专审'}</span> } }, }, { title: '公司资产(万元)', dataIndex: 'assets', key: 'assets', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '收入(万元)', dataIndex: 'income', key: 'income', render: (text, record) => { if (text) { return <span>{text}</span> } }, }, { title: '操作', dataIndex: 'action', key: 'action', render: (text, record) => { return ( <div> {/*外包审核通过后,咨询师/咨询经理可申请付款*/} {/*存在支付节点时不显示第三方的申请付款*/} {/*0-待审核 ,1-审核通过,2-审核拒绝 true [NULL]*/} { <Button disabled={ !(this.props.isPreviewPay && (this.props.status === 1 || parseInt(this.props.startType) === 1) && this.props.dataSource.length === 0) } type="primary" onClick={() => { this.setState({ previewPayVisible: true, previewPayInfor: record, }) }}> 申请付款 </Button> } {this.props.status === 2 ? <Popconfirm title="是否删除?" onConfirm={() => { this.confirmDeletNew(record) }} okText="删除" cancelText="不删除" > <Button disabled={this.props.status !== 2} onClick={(e) => { e.stopPropagation() }} style={{ marginLeft: '10px', color: '#ffffff', background: '#f00', border: 'none', }} > 删除 </Button> </Popconfirm> : <div/>} </div> ) }, }, ] }) } } onChange() { this.setState({ value: e.target.value, }) } tableRowClickOne(record) {} //点击付款节点详情 payNodeTableRowClickOne(record) {} //外包日志列表 getSelectOutsourceLog(){ $.ajax({ method: 'get', dataType: 'json', crossDomain: false, url: globalConfig.context + '/api/admin/outsourceOrg/selectOutsourceLog', data: { tid: this.props.tid, }, success: function (data) { if (data.error.length) { if (data.error && data.error.length) { message.warning(data.error[0].message); } } else { this.setState({ outsourceLogs: data.data }) } }.bind(this), }).always( function () { }.bind(this) ) } //支付列表 getSelectOrderPayment() { $.ajax({ method: 'get', dataType: 'json', crossDomain: false, url: globalConfig.context + '/api/admin/company/selectOrderPayment', data: { id: this.props.tid, }, success: function (data) { if (data.error.length) { if (data.error && data.error.length) { message.warning(data.error[0].message); } } else { this.setState({ selectOrderPayments: data.data }) } }.bind(this), }).always( function () { }.bind(this) ) } //0审核 1待支付 2驳回 3已支付 4取消 operationJudgmentName(id) { if(this.props.isAuditPayment){ //财务 return id === 0 ? '待审核' : id === 1 ? '待支付' : id === 2 ? '查看详情' : '查看详情' }else{ return id === 0 ? '待审核' : id === 1 ? '待支付' : id === 2 ? '查看详情' : '查看详情' } } // 删除供应商信息 confirmDeletNew(index) { this.setState({ loading: true, ThirdListVisible: false, }) $.ajax({ url: globalConfig.context + '/api/admin/company/deleteCompany', method: 'post', data: { id: index.id, }, }).done( function (data) { this.setState({ loading: false, }) if (!data.error.length) { message.success('删除成功!') this.props.onRefresh() } else { message.warning(data.error[0].message) } }.bind(this) ) } render() { return ( <div className="App"> <div className="projectType"> <div className="typeTitle"> <div>类型:</div> </div> { parseInt(this.props.startType) === 0 ? <div> <div>外包(外包派单,不走总部)</div> <div className="tipsText">提示高于总部价格,费用个人承担</div> </div> : <div>供应商信息(普通单)</div> } <div style={{marginLeft:'auto'}}> <span style={{color:'#58a3ff'}}>项目状态:</span>{getProjectStatus(this.props.projectStatus)} </div> </div> { this.props.projectType === 1? <div style={{ display:'flex', flexFlow:'row nowrap', alignItems:'center', padding:'0px 0px 10px 20px' }}> <div> 专利类型:<span style={{marginLeft:'15px'}}>{this.props.patentType === 0 ? '专利申请/变更/转让' : '专利买卖'}</span> </div> <div style={{paddingLeft:'100px'}}> 专利名称:<span style={{marginLeft:'15px'}}> { this.props.patentNameType === 0 ? '实用新型专利' : this.props.patentNameType === 1 ? '发明专利' : this.props.patentNameType === 2 ? '外观专利' : this.props.patentNameType === 3 ? this.props.patentName : '' } </span> </div> </div> : <div/> } <div className="thirdParty"> <div> <span className="title"> 第三方信息 </span> </div> <div className="clearfix" > <Spin spinning={this.state.loading}> <Form layout="horizontal"> <Table pagination={false} columns={this.state.ContactsListsNew} dataSource={this.props.thirdInfoList} onRowClick={this.tableRowClickOne} scroll={{ x: 'max-content', y: 0 }} bordered size="small" /> <Col span={24} offset={9} style={{ marginTop: '15px' }}/> </Form> </Spin> </div> </div> {/*如果是软著类或者专利类的专利申请,隐藏付款节点*/} {!((this.props.projectType === 1 && this.props.patentType === 0) || this.props.projectType === 2) ? <div className="thirdParty"> <div> <span className="title"> 付款节点 </span> </div> <div className="clearfix" > <Spin spinning={this.state.loading}> <Form layout="horizontal"> <Table pagination={false} columns={this.state.PayNodeTableColunms} dataSource={this.props.dataSource} onRowClick={this.payNodeTableRowClickOne} scroll={{ x: 'max-content', y: 0 }} bordered size="small" /> <Col span={24} offset={9} style={{ marginTop: '15px' }}/> </Form> </Spin> </div> </div> : <div/>} <div style={{ borderTop: '1px #000000 dashed', padding: '10px 20px 0px 20px', }} > <div> <div className="title">备注</div> <div style={{fontSize:'15px'}}> {this.props.outsourceRemarks} </div> </div> {this.props.fileList && this.props.fileList.length > 0 ? <div style={{paddingTop:'10px'}}> <div className="title">合同/协议扫描件</div> <div> <ImgList fileList={this.props.fileList} ItemWidth={'96px'}/> </div> {/*<Upload*/} {/* className="demandDetailShow-upload"*/} {/* listType="picture-card"*/} {/* fileList={this.props.fileList}*/} {/* onPreview={(file) => {*/} {/* this.setState({*/} {/* previewImage: file.url || file.thumbUrl,*/} {/* previewVisible: true,*/} {/* })*/} {/* }}*/} {/*/>*/} <Modal maskClosable={false} footer={null} visible={this.state.previewVisible} onCancel={() => { this.setState({ previewVisible: false }) }} > <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} /> </Modal> </div> : <div/>} </div> {parseInt(this.props.startType) !== 1 && this.state.outsourceLogs.length !== 0 ? <div className="outsourceLogConent"> <div className="title" style={{ paddingBottom: 0, }}>外包状态</div> <div className="outsourceLogList"> { this.state.outsourceLogs && this.state.outsourceLogs.map((value,index)=>( <div key={index} className="outsourceLogItem outsource"> <div style={{ display:'flex', flexFlow:'row nowrap', paddingBottom: '3px', paddingTop: '3px', }}> <div> {value.aname} </div> <div style={{paddingLeft:'5px'}}> { value.status === 0 ? <Tag color="#2db7f5">发起外包审核</Tag> : value.status === 1 ? <Tag color="#87d068">通过</Tag> : <Tag color="#f50">驳回</Tag> } </div> <div style={{ wordBreak: 'break-all', maxWidth:'67%', }}> {value.remarks} </div> <div style={{paddingLeft: '10px'}}> {value.createTimes} </div> </div> </div> )) } </div> </div> : <div/>} {this.state.selectOrderPayments.length !== 0 ? <div className="outsourceLogConent"> <div className="title">支付记录</div> <div className="outsourceLogItem" style={{ fontWeight: 'bold', }}> <Row gutter={16}> <Col className="gutter-row" span={2}> <div> 编号 </div> </Col> <Col className="gutter-row" span={5}> <div className="gutter-box"> 供应商名称 </div> </Col> <Col className="gutter-row" span={3}> <div className="gutter-box"> 支付类型 </div> </Col> <Col className="gutter-row" span={4}> <div className="gutter-box"> {this.props.projectType === 2 || (this.props.projectType === 1 && this.props.patentType === 0) ? '申请支付数量' : '申请支付金额(万元)'} </div> </Col> <Col className="gutter-row" span={4}> <div className="gutter-box"> 申请时间 </div> </Col> <Col className="gutter-row" span={6}> <div className="gutter-box"> 状态 </div> </Col> </Row> </div> <div className="outsourceLogList" style={{paddingTop:'5px'}}> { this.state.selectOrderPayments.map((value,index)=>( <div key={index} className="orderPayItem" onClick={()=>{ this.setState({ payRecordVisible: true, orderPaymentsId: value.id, }) }}> <Row gutter={16}> <Col className="gutter-row" span={2}> <div> {value.id} </div> </Col> <Col className="gutter-row" span={5}> <div className="gutter-box"> {value.companyName+'-'+value.tpcId} { value.companyName !== value.tpcName ? '('+value.tpcName+')' : '' } </div> </Col> <Col className="gutter-row" span={3}> <div className="gutter-box"> {/*0第三方 1催款 2官费*/} {value.chooseType === 0 ? '第三方' : value.chooseType === 1 ? '催款' : '官费'} </div> </Col> <Col className="gutter-row" span={4}> <div className="gutter-box"> { this.props.projectType === 2 || (this.props.projectType === 1 && this.props.patentType === 0) ? value.quantity: value.applicationAmount } </div> </Col> <Col className="gutter-row" span={4}> <div className="gutter-box"> {value.createTimes} </div> </Col> <Col className="operationItem" span={6}> <div className="gutter-box" style={{ width: '100%', display: 'flex', justifyContent: 'center', }}> <div className="operation"> { value.status === 0 ? '审核中' : value.status === 1 ? '审核通过' : value.status === 2 ? '已驳回' : value.status === 3 ? '支付完成' : '已取消' } </div> <Button type="primary" size='small' onClick={()=>{ this.setState({ payRecordVisible: true, orderPaymentsId: value.id, }) }}> {this.operationJudgmentName(value.status)} </Button> </div> </Col> </Row> </div> )) } </div> </div> : <div/>} {/* 申请付款 tid:项目id nodeId: 付款节点id previewPayInfor: 项目或者节点信息 */} {this.state.previewPayVisible ? <ApplyPaymentModal {...this.props} tid={this.props.tid} type={this.state.type} nodeId={this.state.nodeId} projectType={this.props.projectType} patentType={this.props.patentType} previewPayInfor={this.state.previewPayInfor} visible={this.state.previewPayVisible} onRefresh={()=>{ this.props.onRefresh(); this.getSelectOrderPayment(); }} changeVisible={()=>{ this.setState({ previewPayVisible: false, nodeId: 0, //付款节点id previewPayInfor: {}, type: 1 }) }}/> : <div/>} {/* 支付记录操作弹出 */} {this.state.payRecordVisible ? <PayRecord {...this.props} tid={this.props.tid} projectType={this.props.projectType} patentType={this.props.patentType} payId={this.state.orderPaymentsId} visible={this.state.payRecordVisible} isAuditPayment={this.props.isAuditPayment} onRefresh={()=>{ this.props.onRefresh(); this.getSelectOrderPayment(); }} changeVisible={()=>{ this.getSelectOrderPayment(); this.props.onRefresh && this.props.onRefresh(); this.setState({ payRecordVisible: false, }) }} /> : <div/>} </div> ) } } export default CheckProject