kede-rd-library/js/component/manageCenter/index/contacts/detail.jsx

import React from "react";
import { Spin, message, Modal, Button, DatePicker, Input, Icon } from "antd";
import ajax from "jquery/src/ajax/xhr.js";
import $ from "jquery/src/ajax";
import './detail.less';
import moment from "moment";
import ReactToPrint from "react-to-print";
import { getPdf } from "../../../../utils/tools";

const { RangePicker } = DatePicker;

const detail = React.createClass({
  getInitialState() {
    return {
      loading: false,
      change: false,
      data: {},
      num: 0,
    };
  },

  // 获取详情
  getInfo() {
    this.setState({
      loading: true,
    })
    $.ajax({
      method: 'get',
      dataType: 'json',
      crossDomain: false,
      url: globalConfig.context + '/api/admin/RD/details',
      data: {
        id: this.props.rowdata.id,
      },
      success: function (data) {
        this.setState({
          data: data.data,
        })
        this.state.num == 0 && this.addBrowse()
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        })
      }.bind(this)
    )
  },
  // 浏览+1
  addBrowse() {
    let i = 20
    this.timer = setInterval(() => {
      i--;
      if (i == 0) {
        clearInterval(this.timer);
        $.ajax({
          method: 'post',
          dataType: 'json',
          crossDomain: false,
          url: globalConfig.context + '/api/admin/RD/addBrowse',
          data: {
            id: this.props.rowdata.id,
          },
          success: function (data) {
            this.setState({
              num: 1
            })
          }.bind(this),
        }).always(
          function () {

          }.bind(this)
        )
      }
    }, 1000)

  },
  // 下载+1
  addDownload() {
    $.ajax({
      method: 'post',
      dataType: 'json',
      crossDomain: false,
      url: globalConfig.context + '/api/admin/RD/addDownload',
      data: {
        id: this.props.rowdata.id,
      },
      success: function (data) {
        this.state.data.downloadCount++
        this.setState({ data: this.state.data });
        // this.getInfo()
      }.bind(this),
    }).always(
      function () {

      }.bind(this)
    )
  },
  // PDF下载
  pdfDownload() {
    message.loading("下载中...");
    window.location.href = globalConfig.context + `/api/admin/RD/downloadDetailsPDF?id=${this.props.rowdata.id}`;
    // getPdf(this.state.data.rdName, "pdf")
    this.addDownload()
  },
  // Word下载
  wordDownload() {
    message.loading("下载中...");
    window.location.href = globalConfig.context + `/api/admin/RD/downloadDetailsWord?id=${this.props.rowdata.id}`;
    this.addDownload()
  },
  // 修改详情
  update() {
    const { data } = this.state
    // if (!data.userName) {
    //   message.warning("公司名称不能为空！");
    //   return
    // }
    // if (!data.consultantName) {
    //   message.warning("项目负责人不能为空！");
    //   return
    // }
    // if (!data.technicalField) {
    //   message.warning("技术领域不能为空！");
    //   return
    // }
    // if (!data.technologySource) {
    //   message.warning("技术来源不能为空！");
    //   return
    // }
    // if (!data.totalAmount) {
    //   message.warning("研发费用总预计不能为空！");
    //   return
    // }
    // if (!data.rdObjective) {
    //   message.warning("研发目的/立项目的/实施方式不能为空！");
    //   return
    // }
    // if (!data.coreTechnology) {
    //   message.warning("核心技术/创新点不能为空！");
    //   return
    // }
    // if (!data.achieveResults) {
    //   message.warning("成果不能为空！");
    //   return
    // }
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/RD/update",
      data:
      {
        id: data.id,
        ipNo: data.ipNo,
        rdNo: data.rdNo,
        rdStartStr: data.rdStartStr,
        rdEndStr: data.rdEndStr,
        userName: data.userName,
        consultantName: data.consultantName,
        technicalField: data.technicalField,
        technologySource: data.technologySource,
        totalAmount: data.totalAmount,
        rdObjective: data.rdObjective,
        coreTechnology: data.coreTechnology,
        achieveResults: data.achieveResults,
      },
    }).done(
      function (data) {
        this.setState({
          loading: false,
        });
        if (!data.error.length) {
          this.getInfo();
          message.success("保存成功！");
          this.setState({
            change: false
          })
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  },


  componentWillMount() {
    this.getInfo();
  },

  componentWillUnmount() {
    clearInterval(this.timer)
  },

  render() {
    const { data, change } = this.state
    return (
      <Modal
        title={null}
        visible={this.props.visible}
        onCancel={this.props.onCancel}
        footer={null}
        width={874}
        maskClosable={false}
      >
        <div
          style={{
            float: "right",
            marginTop: 10,
            position: "absolute",
            top: 0,
            right: 60,
            zIndex: 9,
          }}
        >
          {/* <ReactToPrint
            trigger={() => (
              <Button
                type="primary"
                style={{ marginRight: 20 }}
              >
                打印
              </Button>
            )}
            content={() => this.refs.all}
          /> */}
          <Button
            disabled={change}
            type="primary"
            style={{ marginLeft: 0 }}
            onClick={this.wordDownload.bind(this)}
          >
            <Icon type="download" />
            WORD下载
          </Button>
          <Button
            disabled={change}
            type="primary"
            style={{ marginLeft: 20 }}
            onClick={this.pdfDownload.bind(this)}
          >
            <Icon type="download" />
            PDF下载
          </Button>
          <div style={{ color: "#58A3FF" }}>已下载次数：{data.downloadCount}</div>
        </div>
        <Spin spinning={this.state.loading}>
          <div
            className="pdfcount"
            id="pdf"
            ref={(e) => {
              this.refs.all = e;
            }}
          >
            <h1 style={{ textAlign: "center", marginBottom: 30 }}>{data.rdName}</h1>
            <div className="formitem">项目起止时间：
              {
                change ?
                  <RangePicker
                    allowClear={false}
                    style={{ width: 200 }}
                    value={[
                      data.rdStartStr ? moment(data.rdStartStr) : null,
                      data.rdEndStr ? moment(data.rdEndStr) : null,
                    ]}
                    onChange={(datas, dataString) => {
                      this.setState({
                        data: Object.assign(data, {
                          rdStartStr: dataString[0],
                          rdEndStr: dataString[1],
                        }),
                      });
                    }}
                  />
                  :
                  <span>{!data.rdStartStr ? "" : (data.rdStartStr + "～" + data.rdEndStr)}</span>
              }
            </div>
            <div className="formitems">公司名称：
              {
                change ?
                  <Input
                    placeholder=""
                    value={data.userName}
                    onChange={(e) => {
                      data.userName = e.target.value
                      this.setState({ data });
                    }}
                  />
                  : <span>{data.userName}</span>
              }
            </div>
            <div className="formitems">项目负责人：
              {
                change ?
                  <Input
                    placeholder=""
                    value={data.consultantName}
                    onChange={(e) => {
                      data.consultantName = e.target.value
                      this.setState({ data });
                    }}
                  />
                  : <span>{data.consultantName}</span>
              }
            </div>
            <div className="formitems">技术领域：
              {
                change ?
                  <Input
                    placeholder=""
                    value={data.technicalField}
                    onChange={(e) => {
                      data.technicalField = e.target.value
                      this.setState({ data });
                    }}
                  />
                  : <span>{data.technicalField}</span>
              }
            </div>
            <div className="formitems">技术来源：
              {
                change ?
                  <Input
                    placeholder=""
                    value={data.technologySource}
                    onChange={(e) => {
                      data.technologySource = e.target.value
                      this.setState({ data });
                    }}
                  />
                  : <span>{data.technologySource}</span>
              }
            </div>
            <div className="formitem">研发费用总预计：
              {
                change ?
                  <Input
                    type='number'
                    placeholder=""
                    value={data.totalAmount}
                    style={{ width: 80 }}
                    onChange={(e) => {
                      data.totalAmount = e.target.value
                      this.setState({ data });
                    }}
                  />
                  : <span>{data.totalAmount}</span>
              }
              &nbsp;&nbsp;{"万元"}
            </div>
            <div className="formitem">研发目的/立项目的/实施方式
              {
                change ?
                  <Input
                    type="textarea"
                    placeholder=""
                    autosize={{ minRows: 4 }}
                    value={data.rdObjective}
                    onChange={(e) => {
                      data.rdObjective = e.target.value
                      this.setState({ data });
                    }}
                  />
                  : <p>{data.rdObjective}</p>
              }
            </div>
            <div className="formitem">核心技术/创新点
              {
                change ?
                  <Input
                    type="textarea"
                    placeholder=""
                    autosize={{ minRows: 4 }}
                    value={data.coreTechnology}
                    onChange={(e) => {
                      data.coreTechnology = e.target.value
                      this.setState({ data });
                    }}
                  />
                  : <p>{data.coreTechnology}</p>
              }
            </div>
            <div className="formitem">成果
              {
                change ?
                  <Input
                    type="textarea"
                    placeholder=""
                    autosize={{ minRows: 4 }}
                    value={data.achieveResults}
                    onChange={(e) => {
                      data.achieveResults = e.target.value
                      this.setState({ data });
                    }}
                  />
                  : <p>{data.achieveResults}</p>
              }
            </div>
          </div>
        </Spin>
        {
          change
            ? <div
              style={{
                position: "absolute",
                bottom: 10,
                right: 60,
                zIndex: 9,
              }}
            >
              <Button
                type="primary"
                style={{ marginLeft: 20 }}
                onClick={() => { this.setState({ change: false }) }}
              >
                取消
              </Button>
              <Button
                type="primary"
                style={{ marginLeft: 20 }}
                onClick={this.update.bind(this)}
              >
                保存
              </Button>
            </div>
            : <Button
              type="primary"
              style={{
                position: "absolute",
                bottom: 10,
                right: 60,
                zIndex: 9,
              }}
              onClick={() => { this.setState({ change: true }) }}
            >
              编辑
            </Button>
        }
      </Modal>
    );
  },
});

export default detail;