kede-client/js/component/manageCenter/project/task/businessManagement/checkInfor.jsx

import React, { Component } from 'react';
import { Button, Form, Input, message, Modal, Radio, Select, Spin } from "antd";
import {
  getboutique,
} from "@/tools";
import $ from "jquery";

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 14 }
};

const FormItem = Form.Item;

class checkInfor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      patentType: props.infor ? props.infor.patentType : '',
      officialCost: props.infor ? props.infor.officialCost : '',
      costReduction: props.infor ? props.infor.costReduction : '',

      patentTypeList: [],
    }
    this.onChange = this.onChange.bind(this);
    this.getpatentTypeList = this.getpatentTypeList.bind(this);
  }

  componentDidMount() {
    this.getpatentTypeList();
  }

  onChange() {
    this.setState({
      loading: true,
    });
    if (this.state.patentType === null) {
      message.warning('请选择专利类型')
      return
    }
    if ((this.state.patentType === 0 || this.state.patentType === 2) && isNaN(parseInt(this.state.costReduction))) {
      message.warning('请选择是否有费减')
      return;
    }
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/newOrder/updateOrderTask",
      data: {
        id: this.props.infor.id, //项目ID
        officialCost: this.state.officialCost, //是否有官费
        costReduction: (this.state.patentType === 0 || this.state.patentType === 2) ? this.state.costReduction : 0, //是否有费减
        patentType: this.state.patentType, //专利类型
      },
    }).done(
      function (data) {
        this.setState({
          loading: false,
        });
        if (!data.error.length) {
          message.success("保存成功！");
          this.props.onCancel();
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  }

  getpatentTypeList() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/orderProject/getPatentType',
      success: function (data) {
        if (data.error.length === 0) {
          this.setState({
            patentTypeList: data.data
          })
        } else {
          message.warning(data.error[0].message);
        };
      }.bind(this)
    });
  }

  render() {
    const {
      commodityName,
      commodityQuantity,
      officialCost,
      costReduction,
      commodityPrice,
      main,
      taskComment,
      ifCertificationFee,//是否包含认证费
      declarationBatch,//批次
      type,//项目类型  0 正常 1专利 2软著 3审计 4双软 5高新 6商标
      patentType,//项目类型
      patentTypeName,//项目类型名称
    } = this.props.infor;
    return (
      <Modal
        maskClosable={false}
        visible={this.props.visible}
        onOk={this.props.onCancel}
        onCancel={this.props.onCancel}
        width="800px"
        title="项目任务详情"
        footer=""
        className="admin-desc-content"
      >
        <Form layout="horizontal" id="demand-form">
          <div className="clearfix">
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="项目名称"
            >
              <span>{commodityName}</span>
            </FormItem>
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="项目数量"
            >
              <span>{commodityQuantity}</span>
            </FormItem>
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="金额(万元)"
            >
              <span>{commodityPrice}</span>
            </FormItem>
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="主要项目"
            >
              <span>{getboutique(String(main))}</span>
            </FormItem>
            {type === 5 && <FormItem
              className="half-item"
              {...formItemLayout}
              label="企业申报批次"
            >
              <span>
                {
                  declarationBatch === 1 ? '第一批' :
                    declarationBatch === 2 ? '第二批' :
                      declarationBatch === 3 ? '第三批' :
                        declarationBatch === 4 ? '第四批' : '未知'
                }
              </span>
            </FormItem>}
            <div className="clearfix">
              <FormItem
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 16 }}
                label="服务说明"
              >
                <span>{taskComment}</span>
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="专利类型"
              >
                <Select
                  placeholder="请选择专利类型"
                  style={{ width: "200px" }}
                  value={this.state.patentType}
                  onChange={(e) => {
                    this.setState({ patentType: e });
                    if (e !== 0 && e !== 2) {
                      this.setState({
                        costReduction: ''
                      })
                    }
                  }}
                >
                  {this.state.patentTypeList.map(function (v, k) {
                    return (
                      <Select.Option key={k} value={v.id}>{v.name}</Select.Option>
                    );
                  })}
                </Select>
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="官费"
                style={{ display: this.state.displayFees }}
              >
                <Radio.Group
                  value={this.state.officialCost}
                  onChange={(e) => {
                    this.setState({ officialCost: e.target.value });
                    if (e.target.value === 0) {
                      this.setState({
                        costReduction: ''
                      })
                    }
                  }}
                >
                  <Radio value={1}>含官费</Radio>
                  <Radio value={0}>不含官费</Radio>
                </Radio.Group>
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="费减"
                style={{ display: this.state.displayFees }}
              >
                <Radio.Group
                  disabled={this.state.patentType !== 0 && this.state.patentType !== 2}
                  value={this.state.costReduction}
                  onChange={(e) => {
                    this.setState({ costReduction: e.target.value });
                  }}
                >
                  <Radio value={1}>有费减</Radio>
                  <Radio value={0}>无费减</Radio>
                </Radio.Group>
              </FormItem>
            </div>
          </div>
          <div style={{ color: '#f00', paddingLeft: '67px', paddingBottom: '10px' }}>
            注意:技术员已发起二次确认,请核对本次费用情况,填写有误,将影响到成本支付情况
          </div>
          <div style={{ display: 'flex', justifyContent: "center" }}>
            <Button type='primary' onClick={() => {
              this.onChange();
            }}>确认核对</Button>
          </div>
        </Form>
      </Modal>
    );
  }
}

export default checkInfor;