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 === 0 || this.state.patentType === 2) && isNaN(parseInt(this.state.costReduction)) && this.state.officialCost === 1){
            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.officialCost === 1 ?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>
                        <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>
                        <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>
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="费减"
                            style={{ display: this.state.displayFees }}
                        >
                            <Radio.Group
                                disabled={this.state.officialCost === 0 || (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 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;