hujie123456 5 år sedan
förälder
incheckning
ea44cdbc56

+ 87 - 64
js/component/manageCenter/order/orderNew/changeComponent/changeDetailCwzj.js

@@ -1,8 +1,9 @@
 import React, { Component } from "react";
-import { Form, Upload, Modal, Input } from "antd";
+import { Form, Upload, Modal, Input, Button } from "antd";
 import AgreeButton from "./agreeButton.js";
 import Rizhi from "./rizhi.js";
 import { getProcessStatusNew } from "@/tools.js";
+import ReactToPrint from "react-to-print";
 
 const formItemLayout = {
   labelCol: { span: 8 },
@@ -77,7 +78,6 @@ class Itemlist extends Component {
   }
 }
 
-
 class ChangeDetail extends Component {
   constructor(props) {
     super(props);
@@ -247,58 +247,82 @@ class ChangeDetail extends Component {
     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 }}
+      <div className="clearfix">
+        <div
+          className="clearfix"
+          style={{ marginTop: 20 }}
+          ref={e => {
+            this.refs = e;
+          }}
         >
-          <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();
-              });
-            }}
+          <h2 style={{ textAlign: "center", marginBottom: 10 }}>
+            合同变更记录
+          </h2>
+          {pageData.map((item, index) => {
+            return <Itemlist key={index} pageData={item} />;
+          })}
+          <Form.Item
+            label="变更凭证"
+            labelCol={{ span: 4 }}
+            wrapperCol={{ span: 18 }}
           >
-            <img
-              alt=""
-              style={{ width: "100%" }}
-              src={this.state.previewImage || ""}
+            <Upload
+              className="demandDetailShow-upload"
+              listType="picture-card"
+              fileList={orgCodeUrl}
+              onPreview={file => {
+                this.setState({
+                  previewImage: file.url || file.thumbUrl,
+                  previewVisible: true
+                });
+              }}
             />
-          </Modal>
-          <Rizhi changeId={this.props.data.id} />
-        </Form.Item>
-        {this.props.data.type === 0 && this.props.data.processState >= 4 ? (
-          <div>
-            <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
-              当前项目进度(咨询师经理填写)
-            </h3>
-            {planData.map((item, index) => {
-              return <Itemlist key={index} pageData={item} />;
-            })}
-          </div>
-        ) : (
-          ""
-        )}
-        {this.props.data.type === 0 ? (
-          this.props.data.processState >= 5 ? (
+            <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 && this.props.data.processState >= 4 ? (
+            <div>
+              <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
+                当前项目进度(咨询师经理填写)
+              </h3>
+              {planData.map((item, index) => {
+                return <Itemlist key={index} pageData={item} />;
+              })}
+            </div>
+          ) : (
+            ""
+          )}
+          {this.props.data.type === 0 ? (
+            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.data.status === 4 ? (
             <div>
               <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
                 当前财务状态(财务填写)
@@ -309,19 +333,8 @@ class ChangeDetail extends Component {
             </div>
           ) : (
             ""
-          )
-        ) : this.props.data.status === 4 ? (
-          <div>
-            <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
-              当前财务状态(财务填写)
-            </h3>
-            {financeData.map((item, index) => {
-              return <Itemlist key={index} pageData={item} />;
-            })}
-          </div>
-        ) : (
-          ""
-        )}
+          )}
+        </div>
         {this.props.data.status !== 4 ? (
           this.state.buttonStatus ? (
             <div
@@ -347,6 +360,16 @@ class ChangeDetail extends Component {
         ) : (
           ""
         )}
+        <ReactToPrint
+          trigger={() => (
+            <div className="clearfix">
+              <Button type="primary" style={{ float: "right", marginTop: 10 }}>
+                打印
+              </Button>
+            </div>
+          )}
+          content={() => this.refs}
+        />
       </div>
     );
   }

+ 252 - 229
js/component/manageCenter/order/orderNew/changeComponent/changeDetailCwzy.js

@@ -1,9 +1,10 @@
 import React, { Component } from "react";
-import { Form, Upload, Modal, Input, DatePicker } from "antd";
+import { Form, Upload, Modal, Input, DatePicker, Button } from "antd";
 import AgreeButton from "./agreeButton.js";
 import Rizhi from "./rizhi.js";
 import moment from "moment";
 import { getProcessStatusNew } from "@/tools.js";
+import ReactToPrint from "react-to-print";
 
 const formItemLayout = {
   labelCol: { span: 8 },
@@ -342,240 +343,252 @@ class ChangeDetail extends Component {
     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 }}
+      <div className="clearfix">
+        <div
+          className="clearfix"
+          style={{ marginTop: 20 }}
+          ref={e => {
+            this.refs = e;
+          }}
         >
-          <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();
-              });
-            }}
+          <h2 style={{ textAlign: "center", marginBottom: 10 }}>
+            合同变更记录
+          </h2>
+          {pageData.map((item, index) => {
+            return <Itemlist key={index} pageData={item} />;
+          })}
+          <Form.Item
+            label="变更凭证"
+            labelCol={{ span: 4 }}
+            wrapperCol={{ span: 18 }}
           >
-            <img
-              alt=""
-              style={{ width: "100%" }}
-              src={this.state.previewImage || ""}
+            <Upload
+              className="demandDetailShow-upload"
+              listType="picture-card"
+              fileList={orgCodeUrl}
+              onPreview={file => {
+                this.setState({
+                  previewImage: file.url || file.thumbUrl,
+                  previewVisible: true
+                });
+              }}
             />
-          </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>
+            <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>
-              <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>
+              <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>
-        )}
+          ) : (
+            <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>
+          )}
+        </div>
         {!(
           (this.props.data.processState > 5 &&
             this.props.data.processState <= 8) ||
@@ -606,6 +619,16 @@ class ChangeDetail extends Component {
         ) : (
           ""
         )}
+        <ReactToPrint
+          trigger={() => (
+            <div className="clearfix">
+              <Button type="primary" style={{ float: "right", marginTop: 10 }}>
+                打印
+              </Button>
+            </div>
+          )}
+          content={() => this.refs}
+        />
       </div>
     );
   }

+ 134 - 111
js/component/manageCenter/order/orderNew/changeComponent/changeDetailJsjl.js

@@ -1,8 +1,9 @@
 import React, { Component } from "react";
-import { Form, Upload, Modal, Input } from "antd";
+import { Form, Upload, Modal, Input, Button } from "antd";
 import AgreeButton from "./agreeButton.js";
 import Rizhi from "./rizhi.js";
 import { getProcessStatusNew } from "@/tools.js";
+import ReactToPrint from "react-to-print";
 
 const formItemLayout = {
   labelCol: { span: 8 },
@@ -77,7 +78,6 @@ class Itemlist extends Component {
   }
 }
 
-
 class ChangeDetail extends Component {
   constructor(props) {
     super(props);
@@ -252,124 +252,137 @@ class ChangeDetail extends Component {
     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 }}
+      <div className="clearfix">
+        <div
+          className="clearfix"
+          style={{ marginTop: 20 }}
+          ref={e => {
+            this.refs = e;
+          }}
         >
-          <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 });
-            }}
+          <h2 style={{ textAlign: "center", marginBottom: 10 }}>
+            合同变更记录
+          </h2>
+          {pageData.map((item, index) => {
+            return <Itemlist key={index} pageData={item} />;
+          })}
+          <Form.Item
+            label="变更凭证"
+            labelCol={{ span: 4 }}
+            wrapperCol={{ span: 18 }}
           >
-            <img
-              alt=""
-              style={{ width: "100%" }}
-              src={this.state.previewImage || ""}
+            <Upload
+              className="demandDetailShow-upload"
+              listType="picture-card"
+              fileList={orgCodeUrl}
+              onPreview={file => {
+                this.setState({
+                  previewImage: file.url || file.thumbUrl,
+                  previewVisible: true
+                });
+              }}
             />
-          </Modal>
-          <Rizhi changeId={this.props.data.id} />
-        </Form.Item>
-        {this.props.data.processState >= 4 ? (
-          <div>
-            <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
-              当前项目进度(咨询师经理填写)
-            </h3>
-            {planData.map((item, index) => {
-              return <Itemlist key={index} pageData={item} />;
-            })}
-          </div>
-        ) : (
-          <div style={{ marginBottom: 10 }}>
-            <div className="clearfix">
+            <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 >= 4 ? (
+            <div>
               <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
                 当前项目进度(咨询师经理填写)
               </h3>
-              <Form.Item
-                className="half-item"
-                label="项目进度"
-                labelCol={{ span: 8 }}
-                wrapperCol={{ span: 14 }}
-              >
-                <Input
-                  style={{ width: 160 }}
-                  value={this.state.projectState}
-                  placeholder="请输入项目进度"
-                  onChange={e => {
-                    this.setState({
-                      projectState: e.target.value
-                    });
-                  }}
-                />
-              </Form.Item>
-              <Form.Item
-                className="half-item"
-                label="发生成本费用(万元)"
-                labelCol={{ span: 8 }}
-                wrapperCol={{ span: 14 }}
-              >
-                <Input
-                  style={{ width: 160 }}
-                  value={this.state.zxsCost}
-                  placeholder="请输入发生成本费用"
-                  onChange={e => {
-                    this.setState({
-                      zxsCost: e.target.value
-                    });
-                  }}
-                />
-              </Form.Item>
+              {planData.map((item, index) => {
+                return <Itemlist key={index} pageData={item} />;
+              })}
             </div>
+          ) : (
+            <div style={{ marginBottom: 10 }}>
+              <div className="clearfix">
+                <h3
+                  style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}
+                >
+                  当前项目进度(咨询师经理填写)
+                </h3>
+                <Form.Item
+                  className="half-item"
+                  label="项目进度"
+                  labelCol={{ span: 8 }}
+                  wrapperCol={{ span: 14 }}
+                >
+                  <Input
+                    style={{ width: 160 }}
+                    value={this.state.projectState}
+                    placeholder="请输入项目进度"
+                    onChange={e => {
+                      this.setState({
+                        projectState: e.target.value
+                      });
+                    }}
+                  />
+                </Form.Item>
+                <Form.Item
+                  className="half-item"
+                  label="发生成本费用(万元)"
+                  labelCol={{ span: 8 }}
+                  wrapperCol={{ span: 14 }}
+                >
+                  <Input
+                    style={{ width: 160 }}
+                    value={this.state.zxsCost}
+                    placeholder="请输入发生成本费用"
+                    onChange={e => {
+                      this.setState({
+                        zxsCost: e.target.value
+                      });
+                    }}
+                  />
+                </Form.Item>
+              </div>
+              <div>
+                <Form.Item
+                  label="备注"
+                  labelCol={{ span: 4 }}
+                  wrapperCol={{ span: 14 }}
+                >
+                  <Input.TextArea
+                    value={this.state.zxsRemarks}
+                    rows={4}
+                    placeholder="请输入备注"
+                    onChange={e => {
+                      this.setState({
+                        zxsRemarks: e.target.value
+                      });
+                    }}
+                  />
+                </Form.Item>
+              </div>
+            </div>
+          )}
+          {this.props.data.processState >= 5 ? (
             <div>
-              <Form.Item
-                label="备注"
-                labelCol={{ span: 4 }}
-                wrapperCol={{ span: 14 }}
-              >
-                <Input.TextArea
-                  value={this.state.zxsRemarks}
-                  rows={4}
-                  placeholder="请输入备注"
-                  onChange={e => {
-                    this.setState({
-                      zxsRemarks: e.target.value
-                    });
-                  }}
-                />
-              </Form.Item>
+              <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
+                当前财务状态(财务填写)
+              </h3>
+              {financeData.map((item, index) => {
+                return <Itemlist key={index} pageData={item} />;
+              })}
             </div>
-          </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>
-        ) : (
-          ""
-        )}
+          ) : (
+            ""
+          )}
+        </div>
         {this.props.processState === this.props.data.processState ? (
           this.state.buttonStatus ? (
             <div
@@ -396,6 +409,16 @@ class ChangeDetail extends Component {
         ) : (
           ""
         )}
+        <ReactToPrint
+          trigger={() => (
+            <div className="clearfix">
+              <Button type="primary" style={{ float: "right", marginTop: 10 }}>
+                打印
+              </Button>
+            </div>
+          )}
+          content={() => this.refs}
+        />
       </div>
     );
   }

+ 80 - 58
js/component/manageCenter/order/orderNew/changeComponent/changeDetailJsy.js

@@ -1,8 +1,9 @@
 import React, { Component } from "react";
-import { Form, Upload, Modal } from "antd";
+import { Form, Upload, Modal, Button } from "antd";
 import AgreeButton from "./agreeButton.js";
 import Rizhi from "./rizhi.js";
 import { getProcessStatusNew } from "@/tools.js";
+import ReactToPrint from "react-to-print";
 
 const formItemLayout = {
   labelCol: { span: 8 },
@@ -218,66 +219,77 @@ class ChangeDetail extends Component {
     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 }}
+      <div className="clearfix">
+        <div
+          className="clearfix"
+          style={{ marginTop: 20 }}
+          ref={e => {
+            this.refs = e;
+          }}
         >
-          <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 });
-            }}
+          <h2 style={{ textAlign: "center", marginBottom: 10 }}>
+            合同变更记录
+          </h2>
+          {pageData.map((item, index) => {
+            return <Itemlist key={index} pageData={item} />;
+          })}
+          <Form.Item
+            label="变更凭证"
+            labelCol={{ span: 4 }}
+            wrapperCol={{ span: 18 }}
           >
-            <img
-              alt=""
-              style={{ width: "100%" }}
-              src={this.state.previewImage || ""}
+            <Upload
+              className="demandDetailShow-upload"
+              listType="picture-card"
+              fileList={orgCodeUrl}
+              onPreview={file => {
+                this.setState({
+                  previewImage: file.url || file.thumbUrl,
+                  previewVisible: true
+                });
+              }}
             />
-          </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>
-        ) : (
-          ""
-        )}
+            <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>
+          ) : (
+            ""
+          )}
+        </div>
         {this.props.processState === this.props.data.processState ? (
           <div
             className="clearfix"
@@ -298,6 +310,16 @@ class ChangeDetail extends Component {
         ) : (
           ""
         )}
+        <ReactToPrint
+          trigger={() => (
+            <div className="clearfix">
+              <Button type="primary" style={{ float: "right", marginTop: 10 }}>
+                打印
+              </Button>
+            </div>
+          )}
+          content={() => this.refs}
+        />
       </div>
     );
   }

+ 80 - 62
js/component/manageCenter/order/orderNew/changeComponent/changeDetailJszj.js

@@ -1,8 +1,9 @@
 import React, { Component } from "react";
-import { Form, Upload, Modal, Input } from "antd";
+import { Form, Upload, Modal, Input, Button } from "antd";
 import AgreeButton from "./agreeButton.js";
 import Rizhi from "./rizhi.js";
 import { getProcessStatusNew } from "@/tools.js";
+import ReactToPrint from "react-to-print";
 
 const formItemLayout = {
   labelCol: { span: 8 },
@@ -126,7 +127,7 @@ class ChangeDetail extends Component {
     super(props);
     this.state = {
       previewVisible: false,
-      buttonStatus: true,
+      buttonStatus: true
     };
     this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
     this.changeButtonStatus = this.changeButtonStatus.bind(this);
@@ -286,70 +287,77 @@ class ChangeDetail extends Component {
     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 }}
+      <div className="clearfix">
+        <div
+          className="clearfix"
+          style={{ marginTop: 20 }}
+          ref={e => {
+            this.refs = e;
+          }}
         >
-          <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 });
-            }}
+          <h2 style={{ textAlign: "center", marginBottom: 10 }}>
+            合同变更记录
+          </h2>
+          {pageData.map((item, index) => {
+            return <Itemlist key={index} pageData={item} />;
+          })}
+          <Form.Item
+            label="变更凭证"
+            labelCol={{ span: 4 }}
+            wrapperCol={{ span: 18 }}
           >
-            <img
-              alt=""
-              style={{ width: "100%" }}
-              src={this.state.previewImage || ""}
+            <Upload
+              className="demandDetailShow-upload"
+              listType="picture-card"
+              fileList={orgCodeUrl}
+              onPreview={file => {
+                this.setState({
+                  previewImage: file.url || file.thumbUrl,
+                  previewVisible: true
+                });
+              }}
             />
-          </Modal>
-          <Rizhi changeId={this.props.data.id} />
-        </Form.Item>
-        {this.props.data.processState >= 4 ? (
-          <div>
-            <h3
-              style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}
+            <Modal
+              maskClosable={false}
+              footer={null}
+              visible={this.state.previewVisible}
+              onCancel={() => {
+                this.setState({ previewVisible: false });
+              }}
             >
-              当前项目进度(咨询师经理填写)
-            </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>
-        ) : (
-          ""
-        )}
+              <img
+                alt=""
+                style={{ width: "100%" }}
+                src={this.state.previewImage || ""}
+              />
+            </Modal>
+            <Rizhi changeId={this.props.data.id} />
+          </Form.Item>
+          {this.props.data.processState >= 4 ? (
+            <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>
+          ) : (
+            ""
+          )}
+        </div>
         {this.props.processState === this.props.data.processState ? (
           this.state.buttonStatus ? (
             <div
@@ -375,6 +383,16 @@ class ChangeDetail extends Component {
         ) : (
           ""
         )}
+        <ReactToPrint
+          trigger={() => (
+            <div className="clearfix">
+              <Button type="primary" style={{ float: "right", marginTop: 10 }}>
+                打印
+              </Button>
+            </div>
+          )}
+          content={() => this.refs}
+        />
       </div>
     );
   }

+ 85 - 61
js/component/manageCenter/order/orderNew/changeComponent/changeDetailYxgly.js

@@ -1,8 +1,9 @@
 import React, { Component } from "react";
-import { Form, Upload, Modal } from "antd";
+import { Form, Upload, Modal, Button } from "antd";
 import AgreeButton from "./agreeButton.js";
 import Rizhi from "./rizhi.js";
 import { getProcessStatusNew } from "../../../../tools.js";
+import ReactToPrint from "react-to-print";
 
 const formItemLayout = {
   labelCol: { span: 8 },
@@ -227,56 +228,80 @@ class ChangeDetail extends Component {
     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 }}
+      <div className="clearfix">
+        <div
+          className="clearfix"
+          style={{ marginTop: 20 }}
+          ref={e => {
+            this.refs = e;
+          }}
         >
-          <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 });
-            }}
+          <h2 style={{ textAlign: "center", marginBottom: 10 }}>
+            合同变更记录
+          </h2>
+          {pageData.map((item, index) => {
+            return <Itemlist key={index} pageData={item} />;
+          })}
+          <Form.Item
+            label="变更凭证"
+            labelCol={{ span: 4 }}
+            wrapperCol={{ span: 18 }}
           >
-            <img
-              alt=""
-              style={{ width: "100%" }}
-              src={this.state.previewImage || ""}
+            <Upload
+              className="demandDetailShow-upload"
+              listType="picture-card"
+              fileList={orgCodeUrl}
+              onPreview={file => {
+                this.setState({
+                  previewImage: file.url || file.thumbUrl,
+                  previewVisible: true
+                });
+              }}
             />
-          </Modal>
-          <Rizhi changeId={this.props.data.id} />
-        </Form.Item>
-        {this.props.data.type === 0 && this.props.data.processState >= 2 ? (
-          <div>
-            <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
-              当前项目进度(咨询师经理填写)
-            </h3>
-            {planData.map((item, index) => {
-              return <Itemlist key={index} pageData={item} />;
-            })}
-          </div>
-        ) : (
-          ""
-        )}
-        {this.props.data.type === 0 ? (
-          this.props.data.processState >= 5 ? (
+            <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.type === 0 && this.props.data.processState >= 2 ? (
+            <div>
+              <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
+                当前项目进度(咨询师经理填写)
+              </h3>
+              {planData.map((item, index) => {
+                return <Itemlist key={index} pageData={item} />;
+              })}
+            </div>
+          ) : (
+            ""
+          )}
+          {this.props.data.type === 0 ? (
+            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.data.status === 4 ? (
             <div>
               <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
                 当前财务状态(财务填写)
@@ -287,19 +312,8 @@ class ChangeDetail extends Component {
             </div>
           ) : (
             ""
-          )
-        ) : this.props.data.status === 4 ? (
-          <div>
-            <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
-              当前财务状态(财务填写)
-            </h3>
-            {financeData.map((item, index) => {
-              return <Itemlist key={index} pageData={item} />;
-            })}
-          </div>
-        ) : (
-          ""
-        )}
+          )}
+        </div>
         {this.props.processState === this.props.data.processState ? (
           this.state.buttonStatus ? (
             <div
@@ -325,6 +339,16 @@ class ChangeDetail extends Component {
         ) : (
           ""
         )}
+        <ReactToPrint
+          trigger={() => (
+            <div className="clearfix">
+              <Button type="primary" style={{ float: "right", marginTop: 10 }}>
+                打印
+              </Button>
+            </div>
+          )}
+          content={() => this.refs}
+        />
       </div>
     );
   }

+ 85 - 61
js/component/manageCenter/order/orderNew/changeComponent/changeDetailYxy.js

@@ -1,8 +1,9 @@
 import React, { Component } from "react";
-import { Form, Upload, Modal } from "antd";
+import { Form, Upload, Modal, Button } from "antd";
 import AgreeButton from "./agreeButton.js";
 import Rizhi from "./rizhi.js";
 import { getProcessStatusNew } from "@/tools.js";
+import ReactToPrint from "react-to-print";
 
 const formItemLayout = {
   labelCol: { span: 8 },
@@ -218,56 +219,80 @@ class ChangeDetail extends Component {
     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 }}
+      <div className="clearfix">
+        <div
+          className="clearfix"
+          style={{ marginTop: 20 }}
+          ref={e => {
+            this.refs = e;
+          }}
         >
-          <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 });
-            }}
+          <h2 style={{ textAlign: "center", marginBottom: 10 }}>
+            合同变更记录
+          </h2>
+          {pageData.map((item, index) => {
+            return <Itemlist key={index} pageData={item} />;
+          })}
+          <Form.Item
+            label="变更凭证"
+            labelCol={{ span: 4 }}
+            wrapperCol={{ span: 18 }}
           >
-            <img
-              alt=""
-              style={{ width: "100%" }}
-              src={this.state.previewImage || ""}
+            <Upload
+              className="demandDetailShow-upload"
+              listType="picture-card"
+              fileList={orgCodeUrl}
+              onPreview={file => {
+                this.setState({
+                  previewImage: file.url || file.thumbUrl,
+                  previewVisible: true
+                });
+              }}
             />
-          </Modal>
-          <Rizhi changeId={this.props.data.id} />
-        </Form.Item>
-        {this.props.data.type === 0 && this.props.data.processState >= 2 ? (
-          <div>
-            <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
-              当前项目进度(咨询师经理填写)
-            </h3>
-            {planData.map((item, index) => {
-              return <Itemlist key={index} pageData={item} />;
-            })}
-          </div>
-        ) : (
-          ""
-        )}
-        {this.props.data.type === 0 ? (
-          this.props.data.processState >= 5 ? (
+            <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.type === 0 && this.props.data.processState >= 2 ? (
+            <div>
+              <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
+                当前项目进度(咨询师经理填写)
+              </h3>
+              {planData.map((item, index) => {
+                return <Itemlist key={index} pageData={item} />;
+              })}
+            </div>
+          ) : (
+            ""
+          )}
+          {this.props.data.type === 0 ? (
+            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.data.status === 4 ? (
             <div>
               <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
                 当前财务状态(财务填写)
@@ -278,19 +303,8 @@ class ChangeDetail extends Component {
             </div>
           ) : (
             ""
-          )
-        ) : this.props.data.status === 4 ? (
-          <div>
-            <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
-              当前财务状态(财务填写)
-            </h3>
-            {financeData.map((item, index) => {
-              return <Itemlist key={index} pageData={item} />;
-            })}
-          </div>
-        ) : (
-          ""
-        )}
+          )}
+        </div>
         {this.props.processState === this.props.data.processState ? (
           <div
             className="clearfix"
@@ -310,6 +324,16 @@ class ChangeDetail extends Component {
         ) : (
           ""
         )}
+        <ReactToPrint
+          trigger={() => (
+            <div className="clearfix">
+              <Button type="primary" style={{ float: "right", marginTop: 10 }}>
+                打印
+              </Button>
+            </div>
+          )}
+          content={() => this.refs}
+        />
       </div>
     );
   }

+ 7 - 1
js/component/manageCenter/order/orderNew/changeComponent/orderDetail.js

@@ -10,6 +10,7 @@ import {
   getApprovedState,
   getProjectStatus
 } from "@/tools.js";
+import ReactToPrint from "react-to-print";
 
 const FormItem = Form.Item;
 class OrderDetail extends Component {
@@ -135,7 +136,12 @@ class OrderDetail extends Component {
     };
     const data = this.props.orderData;
     return (
-      <div className="clearfix">
+      <div
+        className="clearfix"
+        ref={e => {
+          this.refs = e;
+        }}
+      >
         <FormItem className="half-item" {...formItemLayout} label="订单编号">
           <span>{this.props.orderNo}</span>
         </FormItem>

+ 30 - 6
js/component/manageCenter/order/orderNew/changeComponent/rizhi.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { Modal, Table, Button, message, Spin } from "antd";
 import $ from "jquery/src/ajax";
 import "./table.less";
+import ReactToPrint from "react-to-print";
 
 const status = [
   {
@@ -47,7 +48,7 @@ class Rizhi extends Component {
           title: "创建时间",
           dataIndex: "createTimes",
           key: "createTimes",
-          width: 150
+          width: 180
         },
         {
           title: "操作人名称",
@@ -142,12 +143,35 @@ class Rizhi extends Component {
           }}
         >
           <Spin spinning={this.state.loading}>
-            <Table
-              columns={this.state.columns}
-              dataSource={this.state.dataSource}
-              pagination={false}
-            />
+            <div
+              ref={e => {
+                this.refs = e;
+              }}
+              style={{marginTop:20}}
+            >
+              <h2 style={{ textAlign: "center", marginBottom: 10 }}>
+                合同变更日志
+              </h2>
+              <Table
+                columns={this.state.columns}
+                dataSource={this.state.dataSource}
+                pagination={false}
+              />
+            </div>
           </Spin>
+          <ReactToPrint
+            trigger={() => (
+              <div className="clearfix">
+                <Button
+                  type="primary"
+                  style={{ float: "right", marginTop: 10 }}
+                >
+                  打印
+                </Button>
+              </div>
+            )}
+            content={() => this.refs}
+          />
         </Modal>
       </div>
     );

+ 1 - 0
package.json

@@ -40,6 +40,7 @@
     "less-loader": "^2.2.3",
     "react-hot-loader": "^1.3.1",
     "react-router": "^3.0.2",
+    "react-to-print": "^2.4.0",
     "style-loader": "^0.13.2",
     "url-loader": "^0.5.8",
     "webpack": "^2.2.1",