kede-client/js/component/common/orderDetail/gxczx.jsx

import React, { Component } from "react";
import { Form, Button, Radio, Modal, Input, message, Switch } from "antd";
import { knowledgeList, auditList, addDeductionList, } from "@/dataDic.js";

/**
 * 高新纯咨询合同说明添加和详情
 */

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const radioStyle = {
  display: 'block',
  height: '30px',
  lineHeight: '30px',
};

let num = 1;

const FormItem = Form.Item;
class Gxczx extends Component {
  constructor(props) {
    super(props);
    this.state = {
      gxczx: "", //高新纯咨询合同说明弹窗
      knowledgeOther: "",
      auditOther: "",
      addDeductionOther: "",
    }
  }


  componentDidMount() {
  }

  componentWillUnmount() {
    num = 1
  }

  componentWillReceiveProps(nextProps) {
    const { knowledgeServices, auditServices, addDeductionServices,
      knowledgeOther, auditOther, addDeductionOther, isCreat = false } = this.props
    if (knowledgeServices != null && auditServices != null && addDeductionServices != null) {
      if (isCreat) {
        // 防止刷新进入，只能第一次渲染的时候触发   选择未签会让值变成-1（除了1，其他都归-1） 导致找不到label
        if (num == 1 && this.state.gxczx == "") {
          if (knowledgeServices != -1 && auditServices != -1 && addDeductionServices != -1) {
            this.setState({
              knowledgeText: knowledgeServices == 0
                ? knowledgeOther
                : knowledgeList.find(v => { return v.value == knowledgeServices }).label,
              auditText: auditServices == 0
                ? auditOther
                : auditList.find(v => { return v.value == auditServices }).label,
              addDeductionText: addDeductionServices == 0
                ? addDeductionOther
                : addDeductionList.find(v => { return v.value == addDeductionServices }).label,
              zscq: knowledgeServices == null
                ? null
                : (knowledgeServices != 1 ? -1 : 1),
              sjfw: auditServices == null
                ? null
                : (auditServices != 1 ? -1 : 1),
              jjkc: addDeductionServices == null
                ? null
                : (addDeductionServices != 1 ? -1 : 1),
            }, () => {
              num++
            })
          }
        }
      } else {
        this.setState({
          knowledgeText: knowledgeServices == 0
            ? knowledgeOther
            : knowledgeList.find(v => { return v.value == knowledgeServices }).label,
          auditText: auditServices == 0
            ? auditOther
            : auditList.find(v => { return v.value == auditServices }).label,
          addDeductionText: addDeductionServices == 0
            ? addDeductionOther
            : addDeductionList.find(v => { return v.value == addDeductionServices }).label,
        })
      }
    }


  }




  render() {
    const { knowledgeServices, auditServices, addDeductionServices, isCreat = false, isShow } = this.props
    return (
      <div>
        {
          // 是否可编辑
          isCreat ?
            <div>
              <h3
                style={{
                  marginLeft: 10,
                  fontWeight: 800,
                  marginBottom: 10,
                }}
              >
                高新纯咨询合同说明 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                <Switch checkedChildren="开" unCheckedChildren="关" checked={isShow}
                  onChange={e => { this.props.onSwitch(e) }} />
              </h3>
              {
                isShow &&
                <div>
                  <FormItem
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 19 }}
                    label={<span><strong style={{ color: "#f00" }}>*</strong>知识产权</span>}
                  >
                    <RadioGroup
                      value={this.state.zscq}
                      onChange={e => {
                        num = 2
                        this.setState({
                          knowledgeServices: e.target.value == 1 ? 1 : undefined,
                          zscq: e.target.value,
                          gxczx: e.target.value == -1 ? "zscq" : "",
                        })
                        this.props.selknowledge({ knowledgeServices: e.target.value })
                      }}>
                      <RadioButton value={1}>已签</RadioButton>
                      <RadioButton value={-1}>未签</RadioButton>
                    </RadioGroup>
                    <span style={{ marginLeft: 19 }}>
                      {this.props.knowledgeServices == 1 ? "" : this.state.knowledgeText}
                    </span>
                  </FormItem>
                  <FormItem
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 19 }}
                    label={<span><strong style={{ color: "#f00" }}>*</strong>审计服务</span>}
                  >
                    <RadioGroup
                      value={this.state.sjfw}
                      onChange={e => {
                        num = 2
                        this.setState({
                          auditServices: e.target.value == 1 ? 1 : undefined,
                          sjfw: e.target.value,
                          gxczx: e.target.value == -1 ? "sjfw" : "",
                        })
                        this.props.selaudit({ auditServices: e.target.value })
                      }}>
                      <RadioButton value={1}>已签</RadioButton>
                      <RadioButton value={-1}>未签</RadioButton>
                    </RadioGroup>
                    <span style={{ marginLeft: 19 }}>
                      {this.props.auditServices == 1 ? "" : this.state.auditText}
                    </span>
                  </FormItem>
                  <FormItem
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 19 }}
                    label={<span><strong style={{ color: "#f00" }}>*</strong>加计扣除服务</span>}
                  >
                    <RadioGroup
                      value={this.state.jjkc}
                      onChange={e => {
                        num = 2
                        this.setState({
                          addDeductionServices: e.target.value == 1 ? 1 : undefined,
                          jjkc: e.target.value,
                          gxczx: e.target.value == -1 ? "jjkc" : ""
                        })
                        this.props.seladdDeduction({ addDeductionServices: e.target.value })
                      }}>
                      <RadioButton value={1}>已签</RadioButton>
                      <RadioButton value={-1}>未签</RadioButton>
                    </RadioGroup>
                    <span style={{ marginLeft: 19 }}>
                      {this.props.addDeductionServices == 1 ? "" : this.state.addDeductionText}
                    </span>
                  </FormItem>
                </div>
              }
            </div> :
            <div>
              {
                (knowledgeServices == null || auditServices == null || addDeductionServices == null)
                  ? null :
                  <div>
                    <h3
                      style={{
                        marginLeft: 10,
                        fontWeight: 800,
                        marginBottom: 10,
                      }}
                    >
                      高新纯咨询合同说明
                    </h3>
                    <div>
                      <FormItem
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 19 }}
                        label="知识产权"
                      >
                        {<Button type="primary" size="default">{knowledgeServices == 1 ? "已签" : "未签"}</Button>}
                        <span style={{ marginLeft: 19 }}>
                          {knowledgeServices == 1 ? "" : this.state.knowledgeText}
                        </span>
                      </FormItem>
                      <FormItem
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 19 }}
                        label="审计服务"
                      >
                        {<Button type="primary" size="default">{auditServices == 1 ? "已签" : "未签"}</Button>}
                        <span style={{ marginLeft: 19 }}>
                          {auditServices == 1 ? "" : this.state.auditText}
                        </span>
                      </FormItem>
                      <FormItem
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 19 }}
                        label="加计扣除服务"
                      >
                        {<Button type="primary" size="default">{addDeductionServices == 1 ? "已签" : "未签"}</Button>}
                        <span style={{ marginLeft: 19 }}>
                          {addDeductionServices == 1 ? "" : this.state.addDeductionText}
                        </span>
                      </FormItem>
                    </div>
                  </div>
              }
            </div>
        }
        {
          this.state.gxczx != "" &&
          <Modal
            title="请选择"
            visible={this.state.gxczx != ""}
            closable={false}
            footer={[
              <Button type="primary" key="submit"
                onClick={() => {
                  let reason = ""
                  if (this.state.gxczx == "zscq") {
                    if (this.state.knowledgeServices == undefined) {
                      message.warn("请选择原因！")
                      return
                    }
                    reason = this.state.knowledgeServices == 0
                      ? this.state.knowledgeOther
                      : knowledgeList.find(v => { return v.value == this.state.knowledgeServices }).label
                    this.setState({
                      knowledgeText: reason
                    })
                    this.props.selknowledge({ knowledgeServices: this.state.knowledgeServices, knowledgeOther: this.state.knowledgeOther })

                  } else if (this.state.gxczx == "sjfw") {
                    if (this.state.auditServices == undefined) {
                      message.warn("请选择原因！")
                      return
                    }
                    reason = this.state.auditServices == 0
                      ? this.state.auditOther
                      : auditList.find(v => { return v.value == this.state.auditServices }).label
                    this.setState({
                      auditText: reason
                    })
                    this.props.selaudit({ auditServices: this.state.auditServices, auditOther: this.state.auditOther })

                  } else if (this.state.gxczx == "jjkc") {
                    if (this.state.addDeductionServices == undefined) {
                      message.warn("请选择原因！")
                      return
                    }
                    reason = this.state.addDeductionServices == 0
                      ? this.state.addDeductionOther
                      : addDeductionList.find(v => { return v.value == this.state.addDeductionServices }).label
                    this.setState({
                      addDeductionText: reason
                    })
                    this.props.seladdDeduction({ addDeductionServices: this.state.addDeductionServices, addDeductionOther: this.state.addDeductionOther })
                  }
                  if (!reason) {
                    message.warn("请填写原因！")
                    return
                  }
                  if (!reason.replace(/\s+/g, '')) {
                    message.warn("请填写原因！")
                    return
                  }
                  this.setState({
                    gxczx: "",
                  })
                }}
              >确定</Button>
            ]
            }
          >
            {
              this.state.gxczx == "zscq" ?
                <RadioGroup onChange={e => { this.setState({ knowledgeServices: e.target.value }) }} value={this.state.knowledgeServices}>
                  {
                    knowledgeList.map(item =>
                      item.value != 1 &&
                      <Radio style={radioStyle} value={item.value}>{item.label}
                        {(this.state.knowledgeServices === 0 && item.value == 0) ?
                          <Input
                            placeholder="请填写原因"
                            style={{ width: 400, marginLeft: 10 }}
                            value={this.state.knowledgeOther}
                            onChange={e => {
                              this.setState({
                                knowledgeOther: e.target.value
                              })
                            }}
                          /> : null}
                      </Radio>
                    )
                  }
                </RadioGroup> :
                this.state.gxczx == "sjfw" ?
                  <RadioGroup onChange={e => { this.setState({ auditServices: e.target.value }) }} value={this.state.auditServices}>
                    {
                      auditList.map(item =>
                        item.value != 1 &&
                        <Radio style={radioStyle} value={item.value}>{item.label}
                          {(this.state.auditServices === 0 && item.value == 0) ?
                            <Input
                              placeholder="请填写原因"
                              style={{ width: 400, marginLeft: 10 }}
                              value={this.state.auditOther}
                              onChange={e => {
                                this.setState({
                                  auditOther: e.target.value
                                })
                              }}
                            /> : null}
                        </Radio>
                      )
                    }
                  </RadioGroup> :
                  this.state.gxczx == "jjkc" &&
                  <RadioGroup onChange={e => { this.setState({ addDeductionServices: e.target.value }) }} value={this.state.addDeductionServices}>
                    {
                      addDeductionList.map(item =>
                        item.value != 1 &&
                        <Radio style={radioStyle} value={item.value}>{item.label}
                          {(this.state.addDeductionServices === 0 && item.value == 0) ?
                            <Input
                              placeholder="请填写原因"
                              style={{ width: 400, marginLeft: 10 }}
                              value={this.state.addDeductionOther}
                              onChange={e => {
                                this.setState({
                                  addDeductionOther: e.target.value
                                })
                              }}
                            /> : null}
                        </Radio>
                      )
                    }
                  </RadioGroup>
            }
          </Modal >
        }
      </div >
    );
  }
}

export default Gxczx;