kede-client/js/component/manageCenter/project/patent/patentDetails.jsx

import React,{Component} from "react";
import {
    Modal,
    Form,
    Row,
    Col,
    Table,
    Spin,
    message,
    Button,
    Input,
    Select,
    DatePicker,
    Popconfirm,
    Tooltip
} from "antd";
import $ from "jquery/src/ajax";
import moment from 'moment';
import ReminderLog from "../../customer/NEW/crm/reminderLog";

import {getPatentType} from "@/tools.js";

import { patentTypeList} from '@/dataDic.js';

const FormItem = Form.Item;

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

class PatentDetails extends Component{
    constructor(props) {
        super(props);
        this.state={
            columns:[
                {
                    title: "序号",
                    dataIndex: "key",
                    key: "key",
                    width:'50px'
                },
                {
                    title: "费用种类",
                    dataIndex: "years",
                    key: "years",
                    width:'150px',
                    render:(text)=>(
                        <span>
                            {getPatentType(this.props.detailsInfor.type)}
                            第
                            {text}
                            年年费
                        </span>
                    )
                },
                {
                    title: "金额",
                    dataIndex: "patentAmount",
                    key: "patentAmount",
                    width:'100px'
                },
                {
                    title: "缴费日",
                    dataIndex: "endDate",
                    key: "endDate",
                    width:'100px',
                    render:(text)=>(
                        moment(text).format('YYYY-MM-DD')
                    )
                },
            ],
            dataSource:[],
            loading:false,
            detailsInfor:{},
        }
        this.payLoadData = this.payLoadData.bind(this);
        this.onChange = this.onChange.bind(this);
    }

    componentDidMount() {
        this.payLoadData();
        const {detailsInfor, readOnly} = this.props;
        if (!readOnly) {
            this.setState({
                patentNo: detailsInfor.patentNo,
                tid: detailsInfor.tid,
                email:detailsInfor.email,
                name: detailsInfor.name,
                type: detailsInfor.type,
                holders: detailsInfor.holders,
                inventor: detailsInfor.inventor,
                applyDates: detailsInfor.applyDates,
                authorizationDates: detailsInfor.authorizationDates,
                annualFeeStatus: detailsInfor.annualFeeStatus,
                delayingAmount: detailsInfor.delayingAmount,
                recoveryAmount: detailsInfor.recoveryAmount,
            })
        }
    }

    payLoadData() {
        this.setState({
            loading: true,
        });
        const {detailsInfor} = this.props;
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/patentNew/patentPaymentDetails",
            data: {
                id:detailsInfor.id
            },
            success: function (data) {
                if(data.error.length === 0){
                    for(let i =0;i<data.data.length;i++){
                        data.data[i].key = i+1;
                    }
                    this.setState({
                        dataSource: data.data,
                    });
                }else{
                    message.warning(data.error[0].message);
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    }

    onChange(){
        if(!this.state.patentNo){
            message.warning('请输入专利号')
            return;
        }
        if(!this.state.name){
            message.warning('请输入专利名称')
            return;
        }
        if(isNaN(parseInt(this.state.type))){
            message.warning('请选择专利类型')
            return;
        }
        if(!this.state.applyDates){
            message.warning('请选择申请日期')
            return;
        }
        if(!isNaN(parseInt(this.state.delayingAmount)) && this.state.delayingAmount < 0){
            message.warning('滞纳金不能小于零')
            return;
        }
        if(!isNaN(parseInt(this.state.recoveryAmount))  && this.state.recoveryAmount < 0){
            message.warning('权利恢复费不能小于零')
            return;
        }
        this.setState({
            loading: true,
        });
        const {detailsInfor} = this.props;
        $.ajax({
            method: "POST",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/patentNew/updatePatentNew",
            data: {
                id:detailsInfor.id,
                patentNo: this.state.patentNo,
                name: this.state.name,
                type: this.state.type,
                applyDates: this.state.applyDates,

                tid: this.state.tid || undefined,
                email: this.state.email || undefined,
                holders: this.state.holders || undefined,
                inventor: this.state.inventor || undefined,
                authorizationDates: this.state.authorizationDates || undefined,
                annualFeeStatus: isNaN(parseInt(this.state.annualFeeStatus)) ? undefined : this.state.annualFeeStatus,
                delayingAmount: isNaN(parseInt(this.state.delayingAmount)) ? undefined : this.state.delayingAmount,
                recoveryAmount: isNaN(parseInt(this.state.recoveryAmount)) ? undefined : this.state.recoveryAmount,
            },
            success: function (data) {
                if(data.error.length === 0){
                    message.success('修改成功');
                    this.props.onRefresh();
                    this.props.onCancel();
                }else{
                    message.warning(data.error[0].message);
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    }

    render() {
        const {detailsInfor,readOnly} = this.props;
        return (
            <Modal
                title='年费数据'
                className='payRecordComponent'
                width={800}
                maskClosable={false}
                footer={null}
                visible={this.props.visible}
                onCancel={this.props.onCancel}
            >
                <Button
                    onClick={()=>{
                        this.setState({
                            visible:true,
                            id:detailsInfor.id
                        })
                    }}
                    style={{
                        position: 'absolute',
                        top: '9px',
                        right: '49px',
                    }}
                    type='primary'>
                    查看专利日志
                </Button>
                <Form layout="horizontal">
                    <Row gutter={40}>
                        <Col span={8}>
                            <FormItem
                                required
                                {...formItemLayout}
                                label='专利号'
                            >
                                {
                                    readOnly ? detailsInfor.patentNo :
                                        <Input
                                            value={this.state.patentNo}
                                            onChange={(e)=>{
                                                this.setState({
                                                    patentNo:e.target.value
                                                })
                                            }}
                                        />
                                }
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='专利名称'
                                required
                            >
                                {
                                    readOnly ? detailsInfor.name :
                                        <Input
                                            value={this.state.name}
                                            onChange={(e)=>{
                                                this.setState({
                                                    name:e.target.value
                                                })
                                            }}
                                        />
                                }
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='专利类型'
                                required
                            >
                                {
                                    readOnly ?
                                    getPatentType(detailsInfor.type) :
                                    <Select
                                        placeholder="请选择专利类型"
                                        style={{paddingTop: '5px'}}
                                        value={getPatentType(this.state.type)}
                                        onChange={e => {
                                            this.setState({ type: e });
                                        }}
                                    >
                                        {patentTypeList.map(function(item) {
                                            return (
                                                <Select.Option key={item.value}>
                                                    {item.key}
                                                </Select.Option>
                                            );
                                        })}
                                    </Select>
                                }
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='申请日期'
                                required
                            >
                                {
                                    readOnly ? detailsInfor.applyDates:
                                        <DatePicker
                                            value={this.state.applyDates ? moment(this.state.applyDates) : ''}
                                            format='YYYY-MM-DD'
                                            onChange={(date)=>{
                                                this.setState({
                                                    applyDates:date ? moment(date).format('YYYY-MM-DD') : '',
                                                })
                                            }}
                                        />
                                }
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='项目编号'
                            >
                                {
                                    readOnly ? detailsInfor.tid :
                                        <Input
                                            value={this.state.tid}
                                            onChange={(e)=>{
                                                this.setState({
                                                    tid:e.target.value
                                                })
                                            }}
                                        />
                                }
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='授权日期'
                            >
                                {
                                    readOnly ? detailsInfor.authorizationDates:
                                        <DatePicker
                                            value={this.state.authorizationDates ? moment(this.state.authorizationDates) : ''}
                                            format='YYYY-MM-DD'
                                            onChange={(date)=>{
                                                this.setState({
                                                    authorizationDates:date ? moment(date).format('YYYY-MM-DD') : '',
                                                })
                                            }}
                                        />
                                }
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='Email'
                            >
                                {
                                    readOnly ?
                                        <Tooltip placement="topLeft" title={detailsInfor.email}>
                                            <div style={{
                                                width:'100%',
                                                overflow: 'hidden',
                                                whiteSpace: 'nowrap',
                                                textOverflow: 'ellipsis',
                                            }}>
                                                {detailsInfor.email}
                                            </div>
                                        </Tooltip>:
                                        <Input
                                            value={this.state.email}
                                            onChange={(e)=>{
                                                this.setState({
                                                    email:e.target.value
                                                })
                                            }}
                                        />
                                }
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='滞纳金'
                            >
                                {
                                    readOnly ? detailsInfor.delayingAmount :
                                        <Input
                                            style={{paddingTop: '5px'}}
                                            type='number'
                                            value={this.state.delayingAmount}
                                            onChange={(e)=>{
                                                this.setState({
                                                    delayingAmount:e.target.value
                                                })
                                            }}
                                        />
                                }
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='权利恢复费'
                            >
                                {
                                    readOnly ? detailsInfor.recoveryAmount :
                                        <Input
                                            style={{paddingTop: '5px'}}
                                            type='number'
                                            value={this.state.recoveryAmount}
                                            onChange={(e)=>{
                                                this.setState({
                                                    recoveryAmount:e.target.value
                                                })
                                            }}
                                        />
                                }
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='年费状态'
                            >
                                {
                                    readOnly ? (
                                            detailsInfor.annualFeeStatus === 0 ? '待缴费' :
                                                detailsInfor.annualFeeStatus === 1 ? '已缴费' : ''
                                        ) :
                                        <Select style={{paddingTop: '5px'}} value={this.state.annualFeeStatus} onSelect={(e)=>{this.setState({annualFeeStatus:e})}}>
                                            <Select.Option value={0}>待缴费</Select.Option>
                                            <Select.Option value={1}>已缴费</Select.Option>
                                        </Select>
                                }
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='权利人'
                            >
                                {
                                    readOnly ? <Tooltip title={detailsInfor.holders}>
                                        <div style={{
                                            maxWidth:'120px',
                                            overflow:'hidden',
                                            textOverflow: "ellipsis",
                                            whiteSpace:'nowrap',
                                        }}>{detailsInfor.holders}</div>
                                    </Tooltip> :
                                        <Input
                                            value={this.state.holders}
                                            onChange={(e)=>{
                                                this.setState({
                                                    holders:e.target.value
                                                })
                                            }}
                                        />
                                }
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='发明人'
                            >
                                {
                                    readOnly ? <Tooltip title={detailsInfor.inventor}>
                                        <div style={{
                                            maxWidth:'120px',
                                            overflow:'hidden',
                                            textOverflow: "ellipsis",
                                            whiteSpace:'nowrap',
                                        }}>{detailsInfor.inventor}</div>
                                    </Tooltip> :
                                        <Input
                                            value={this.state.inventor}
                                            onChange={(e)=>{
                                                this.setState({
                                                    inventor:e.target.value
                                                })
                                            }}
                                        />
                                }
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='年费'
                            >
                                {detailsInfor.patentAmount}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='费减状态'
                            >
                                {detailsInfor.tid ? (detailsInfor.costReduction === 1 ? '有费减' : detailsInfor.costReduction === 0 ? '无费减' : '') : '无'}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='通知'
                            >
                                <div style={{display:'flex',alignItems:'center'}}>
                                    {
                                        detailsInfor.salesmanRemind === 0 ? '未通知' :
                                            detailsInfor.salesmanRemind === 1 ? '已通知' : ''
                                    }
                                </div>
                            </FormItem>
                        </Col>
                    </Row>
                    {!readOnly ?
                        <div style={{
                            margin:'30px',
                            display:'flex',
                            justifyContent:'center'
                        }}>
                            <Popconfirm placement="top" title="确定提交吗?" onConfirm={(e)=>{
                                e.stopPropagation();
                                this.onChange();
                            }} okText="确定" cancelText="取消">
                                <Button
                                    loading={this.state.loading}
                                    size='large'
                                    type="primary"
                                    onClick={(e)=>{
                                        e.stopPropagation();
                                    }}
                                >
                                    确定提交
                                </Button>
                            </Popconfirm>
                        </div>
                        : null}
                </Form>
                <Spin spinning={this.state.loading}>
                    <Table
                        scroll={{ y: 320 }}
                        columns={this.state.columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                        bordered
                        size="small"
                    />
                </Spin>
                {this.state.visible ? <ReminderLog
                    id={this.state.id}
                    visible={this.state.visible}
                    cancel={()=>{
                        this.setState({
                            visible:false,
                            id:undefined
                        })
                    }}
                /> : null}
            </Modal>
        )
    }
}

export default PatentDetails;