import React, { Component } from "react"; import { Form, Upload, Modal, Input, DatePicker } from "antd"; import AgreeButton from "./agreeButton.js"; import Rizhi from "./rizhi.js"; import moment from "moment"; import { getProcessStatusNew } from "@/tools.js"; const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } }; const changeType = [ { value: "0", key: "退单退款" }, { value: "1", key: "项目及金额变更" }, { value: "2", key: "仅项目变更" }, { value: "3", key: "仅金额变更" }, { value: "4", key: "重报" }, { value: "5", key: "赠送" } ]; const getChangeType = function(e) { if (e || e == 0) { let str = e.toString(); let theType = ""; changeType.map(function(item) { if (item.value == str) { theType = item.key; } }); return theType; } }; class Itemlist extends Component { constructor(props) { super(props); } render() { let pageData = this.props.pageData; return ( <div className="clearfix"> <Form.Item label={pageData.labelA} {...pageData.formItemLayoutA} className="half-item" > <span>{pageData.dataA}</span> </Form.Item> <Form.Item label={pageData.labelB} {...pageData.formItemLayoutB} className="half-item" > <span>{pageData.dataB}</span> </Form.Item> </div> ); } } class ItemInput extends Component { constructor(props) { super(props); this.state = { valueA: "", valueB: "" }; } componentWillReceiveProps(nextProps) { if (!nextProps.reset) { this.reset(); } } reset() { this.setState({ valueA: "", valueB: "" }); } render() { let pageData = this.props.pageData; return ( <div className="clearfix"> <Form.Item label={pageData.labelA} {...pageData.formItemLayoutA} className="half-item" > <Input value={this.state.valueA} placeholder={"请输入" + pageData.labelA} style={{ width: 160 }} onChange={e => { this.setState({ valueA: e.target.value }); pageData.onChangeA(e.target.value); }} /> </Form.Item> <Form.Item label={pageData.labelB} {...pageData.formItemLayoutB} className="half-item" > {pageData.mark ? ( <Input value={this.state.valueB} placeholder={"请输入" + pageData.labelB} style={{ width: 160 }} onChange={e => { this.setState({ valueB: e.target.value }); pageData.onChangeB(e.target.value); }} /> ) : ( "" )} </Form.Item> </div> ); } } class ChangeDetail extends Component { constructor(props) { super(props); this.state = { previewVisible: false, buttonStatus: true, changeType: 2 }; this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this); this.changeButtonStatus = this.changeButtonStatus.bind(this); this.reset = this.reset.bind(this); } componentWillReceiveProps(nextProps) { this.setState({ paymentTimes: nextProps.data.paymentTimes, paymentAmount: nextProps.data.paymentAmount, invoiceTimes: nextProps.data.invoiceTimes, invoiceAmount: nextProps.data.invoiceAmount, cwCost: nextProps.data.cwCost, refundableAmount: nextProps.data.refundableAmount, cwRemarks: nextProps.data.cwRemarks }); if (!nextProps.reset) { this.reset(); } } reset() { this.setState({ paymentTimes: null, paymentAmount: "", invoiceTimes: null, invoiceAmount: "", cwCost: "", refundableAmount: "", cwRemarks: "" }); } getOrgCodeUrl(e) { this.setState({ orgCodeUrl: e }); } //同意拒绝按钮的有无 changeButtonStatus() { this.setState({ buttonStatus: !this.state.buttonStatus }); } onRef(ref) { this.fun = ref; } render() { const pageData = [ { labelA: "客户名称", formItemLayoutA: formItemLayout, dataA: this.props.data.userName, labelB: "合同编号", formItemLayoutB: formItemLayout, dataB: this.props.data.contractNo }, { labelA: "时间", formItemLayoutA: formItemLayout, dataA: this.props.data.createTimes, labelB: "发起人", formItemLayoutB: formItemLayout, dataB: this.props.data.applicant }, { labelA: "当前进度", formItemLayoutA: formItemLayout, dataA: this.props.data.status !== 4 ? getProcessStatusNew(this.props.data.processState) + "审核中" : getProcessStatusNew(this.props.data.processState) + "已完成", labelB: "变更类型", formItemLayoutB: formItemLayout, dataB: getChangeType(this.props.data.type) }, { labelA: "合同额(万元)", formItemLayoutA: formItemLayout, dataA: this.props.data.totalAmount, labelB: "已收款(万元)", formItemLayoutB: formItemLayout, dataB: this.props.data.settlementAmount }, { labelA: "欠款(万元)", formItemLayoutA: formItemLayout, dataA: this.props.data.arrears, labelB: "申请退款(万元)", formItemLayoutB: formItemLayout, dataB: this.props.data.changeAmount }, { labelA: "备注", formItemLayoutA: formItemLayout, dataA: this.props.data.remarks } ]; const planData = [ { labelA: "项目进度", formItemLayoutA: formItemLayout, dataA: this.props.data.projectState, onChangeA: value => { this.setState({ projectState: value }); }, labelB: "发生成本费用(万元)", formItemLayoutB: formItemLayout, dataB: this.props.data.zxsCost, onChangeB: value => { this.setState({ zxsCost: value }); } }, { labelA: "备注", formItemLayoutA: formItemLayout, dataA: this.props.data.zxsRemarks, onChangeA: value => { this.setState({ zxsRemarks: value }); } } ]; const financeData = [ { labelA: "发生成本(万元)", formItemLayoutA: formItemLayout, dataA: this.props.data.cwCost, onChangeA: value => { this.setState({ cwCost: value }); }, labelB: "应退金额(万元)", formItemLayoutB: formItemLayout, dataB: this.props.data.refundableAmount, onChangeB: value => { this.setState({ refundableAmount: value }); }, mark: true }, { labelA: "补充资料/备注", formItemLayoutA: formItemLayout, dataA: this.props.data.cwRemarks, onChangeA: value => { this.setState({ cwRemarks: value }); }, mark: false } ]; const buttonData = [ { name: "同意", title: "理由", placeholder: "请输入理由", type: "primary", status: 2, onChange: value => { this.setState({ remarks: value }); } }, { name: "拒绝", title: "理由", placeholder: "请输入理由", type: "danger", status: 3, onChange: value => { this.setState({ remarks: value }); } } ]; const orgCodeUrl = this.props.pictureUrl; return ( <div> {pageData.map((item, index) => { return <Itemlist key={index} pageData={item} />; })} <Form.Item label="变更凭证" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} > <Upload className="demandDetailShow-upload" listType="picture-card" fileList={orgCodeUrl} 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 }, () => { this.foo.reset(); }); }} > <img alt="" style={{ width: "100%" }} src={this.state.previewImage || ""} /> </Modal> <Rizhi changeId={this.props.data.id} /> </Form.Item> {this.props.data.type === 0 ? ( <div> <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}> 当前项目进度(咨询师经理填写) </h3> {planData.map((item, index) => { return <Itemlist key={index} pageData={item} />; })} </div> ) : ( "" )} {(this.props.data.processState > 5 && this.props.data.processState <= 8) || (this.props.data.processState === 9 && this.props.data.status === 4) ? ( <div> <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}> 当前财务状态(财务填写) </h3> <div className="clearfix"> <Form.Item className="half-item" label="收款时间" labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} > <span>{this.props.data.paymentTimes}</span> </Form.Item> <Form.Item className="half-item" label="收款金额(万元)" labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} > <span>{this.props.data.paymentAmount}</span> </Form.Item> </div> <div className="clearfix"> <Form.Item className="half-item" label="开票时间" labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} > <span>{this.props.data.invoiceTimes}</span> </Form.Item> <Form.Item className="half-item" label="开票金额(万元)" labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} > <span>{this.props.data.invoiceAmount}</span> </Form.Item> </div> {financeData.map((item, index) => { return <Itemlist key={index} pageData={item} />; })} </div> ) : ( <div style={{ marginBottom: 10 }}> <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}> 当前财务状态(财务填写) </h3> <div className="clearfix"> <Form.Item className="half-item" label="收款时间" labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} > <DatePicker style={{ width: 160 }} value={ this.state.paymentTimes ? moment(this.state.paymentTimes) : null } onChange={(_data, dataString) => { this.setState({ paymentTimes: dataString }); }} /> </Form.Item> <Form.Item className="half-item" label="收款金额(万元)" labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} > <Input style={{ width: 160 }} value={this.state.paymentAmount} placeholder="请输入收款金额" onChange={e => { this.setState({ paymentAmount: e.target.value }); }} /> </Form.Item> </div> <div className="clearfix"> <Form.Item className="half-item" label="开票时间" labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} > <DatePicker style={{ width: 160 }} value={ this.state.invoiceTimes ? moment(this.state.invoiceTimes) : null } onChange={(_data, dataString) => { this.setState({ invoiceTimes: dataString }); }} /> </Form.Item> <Form.Item className="half-item" label="开票金额(万元)" labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} > <Input style={{ width: 160 }} value={this.state.invoiceAmount} placeholder="请输入开票金额" onChange={e => { this.setState({ invoiceAmount: e.target.value }); }} /> </Form.Item> <Form.Item className="half-item" label="发生成本(万元)" labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} > <Input style={{ width: 160 }} value={this.state.cwCost} placeholder="请输入发生成本" onChange={e => { this.setState({ cwCost: e.target.value }); }} /> </Form.Item> <Form.Item className="half-item" label="应退金额(万元)" labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} > <Input style={{ width: 160 }} value={this.state.refundableAmount} placeholder="请输入应退金额" onChange={e => { this.setState({ refundableAmount: e.target.value }); }} /> </Form.Item> </div> <div> <Form.Item label="补充资料/备注" labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} > <Input.TextArea rows={4} value={this.state.cwRemarks} placeholder="请输入补充资料/备注" onChange={e => { this.setState({ cwRemarks: e.target.value }); }} /> </Form.Item> </div> </div> )} {!( (this.props.data.processState > 5 && this.props.data.processState <= 8) || (this.props.data.processState === 9 && this.props.data.status === 4) ) ? ( this.state.buttonStatus ? ( <div className="clearfix" style={{ display: "flex", justifyContent: "space-around" }} > {buttonData.map((item, index) => { return ( <AgreeButton data={item} key={index} backData={this.props.data} processState={this.props.processState} visible={this.changeButtonStatus} ajaxData={this.state} loadData={this.props.loadData} /> ); })} </div> ) : ( "" ) ) : ( "" )} </div> ); } } export { ChangeDetail };