123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307 |
- import React, { Component } from "react";
- import { Form, Upload, Modal } from "antd";
- import AgreeButton from "./agreeButton.js";
- import Rizhi from "./rizhi.js";
- 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 ChangeDetail extends Component {
- constructor(props) {
- super(props);
- this.state = {
- previewVisible: false
- };
- this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
- }
- getOrgCodeUrl(e) {
- this.setState({
- orgCodeUrl: e
- });
- }
- 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: "***",
- labelB: "已收款(万元)",
- formItemLayoutB: formItemLayout,
- dataB: "***"
- },
- {
- labelA: "欠款(万元)",
- formItemLayoutA: formItemLayout,
- dataA: "***",
- labelB: "申请退款(万元)",
- formItemLayoutB: formItemLayout,
- dataB: "***"
- },
- {
- labelA: "备注",
- formItemLayoutA: formItemLayout,
- dataA: this.props.data.remarks
- }
- ];
- const planData = [
- {
- labelA: "项目进度",
- formItemLayoutA: formItemLayout,
- dataA: this.props.data.projectState,
- labelB: "发生成本费用(万元)",
- formItemLayoutB: formItemLayout,
- dataB: "***"
- },
- {
- labelA: "备注",
- formItemLayoutA: formItemLayout,
- dataA: this.props.data.zxsRemarks
- }
- ];
- const financeData = [
- {
- labelA: "收款时间",
- formItemLayoutA: formItemLayout,
- dataA: this.props.data.paymentTimes,
- labelB: "收款金额(万元)",
- formItemLayoutB: formItemLayout,
- dataB: "***"
- },
- {
- labelA: "开票时间",
- formItemLayoutA: formItemLayout,
- dataA: this.props.data.invoiceTimes,
- labelB: "已开票金额(万元)",
- formItemLayoutB: formItemLayout,
- dataB: "***"
- },
- {
- labelA: "发生成本(万元)",
- formItemLayoutA: formItemLayout,
- dataA: "***",
- labelB: "应退金额(万元)",
- formItemLayoutB: formItemLayout,
- dataB: "***"
- },
- {
- labelA: "补充资料/备注",
- formItemLayoutA: formItemLayout,
- dataA: this.props.data.cwRemarks
- }
- ];
- 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 });
- }}
- >
- <img
- alt=""
- style={{ width: "100%" }}
- src={this.state.previewImage || ""}
- />
- </Modal>
- <Rizhi changeId={this.props.data.id} />
- </Form.Item>
- {this.props.data.processState >= 3 ? (
- <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 ? (
- <div>
- <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
- 当前财务状态(财务填写)
- </h3>
- {financeData.map((item, index) => {
- return <Itemlist key={index} pageData={item} />;
- })}
- </div>
- ) : (
- ""
- )}
- {this.props.processState === this.props.data.processState ? (
- <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}
- />
- );
- })}
- </div>
- ) : (
- ""
- )}
- </div>
- );
- }
- }
- export { ChangeDetail };
|