kede-client/js/component/manageCenter/project/task/patentSchedule.jsx

import React,{ Component } from 'react';
import {Button, DatePicker, Select, Table, Input, Modal, Spin, message} from "antd";
import moment from "moment";
import $ from "jquery";

const { Option } = Select;
const confirm = Modal.confirm;

class PatentSchedule extends Component{
    constructor(props) {
        super(props);
        this.state={
            columns: [
                {
                    title: '批次',
                    dataIndex: 'key',
                    key: 'key',
                    render: (text, record,index) => {
                        return index+1;
                    }
                },
                {
                    title: props.bpType === 6 ? '商标号' : '专利号',
                    dataIndex: 'patentNo',
                    key: 'patentNo',
                    render: (text, record,index) => {
                        return !record.isChange ? text : <Input
                            value={text}
                            size={'small'}
                            style={{
                                width: '100px'
                            }}
                            onChange={(e)=>{
                            this.changeEvidence(e.target.value,index,'patentNo')
                        }}/>
                    }
                },
                {
                    title: props.bpType === 6 ? '商标名称' : '专利名称',
                    dataIndex: 'patentName',
                    key: 'patentName',
                    render: (text, record,index) => {
                        return !record.isChange ? text : <Input
                            value={text}
                            style={{width: '100px'}}
                            size={'small'}
                            onChange={(e)=>{
                                this.changeEvidence(e.target.value,index,'patentName')
                        }}/>
                    }
                },
                {
                    title: '受理时间',
                    dataIndex: 'acceptTimes',
                    key: 'acceptTimes',
                    render: (text, record,index) => {
                        return !record.isChange ? text : <DatePicker
                            value={
                                text ? moment(text) : null
                            }
                            size={'small'}
                            style={{
                                marginTop: '4px',
                                width: '100px'
                            }}
                            showTime
                            format="YYYY-MM-DD"
                            onChange={(data, dataString) => {
                                this.changeEvidence(dataString,index,'acceptTimes')
                            }}
                        />
                    }
                },
                {
                    title: '下证时间',
                    dataIndex: 'licenceTimes',
                    key: 'licenceTimes',
                    render: (text, record,index) => {
                        return !record.isChange ? text : <DatePicker
                            value={
                                text ? moment(text) : null
                            }
                            size={'small'}
                            style={{
                                marginTop: '4px',
                                width: '100px'
                            }}
                            showTime
                            format="YYYY-MM-DD"
                            onChange={(data, dataString) => {
                                this.changeEvidence(dataString,index,'licenceTimes')
                            }}
                        />
                    }
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                    render: (text, record,index) => {
                        return !record.isChange ? text === 0 ? '待审核' : text === 1 ? '通过' : '驳回' : <Select style={{width:'80px'}} value={text} size={'small'} onChange={(v)=>{
                            this.changeEvidence(v,index,'status')
                        }}>
                            <Option value={0}>待审核</Option>
                            <Option value={1}>通过</Option>
                            <option value={2}>驳回</option>
                        </Select>
                    }
                },
                {
                    title: '操作',
                    dataIndex: 'h',
                    key: 'h',
                    render: (text, record,index) => {
                        return (
                            !props.readOnly ? <span>
                                <Button
                                    size={'small'}
                                    style={{
                                        marginRight:'10px',
                                        color: '#ffffff',
                                        background: '#f00',
                                        border: 'none',
                                    }}
                                    loading={this.state.loading}
                                    onClick={()=>{
                                        let _this = this;
                                        if(record.isChange){
                                            this.state.dataSource.splice(index,1)
                                            this.setState({
                                                dataSource: this.state.dataSource
                                            })
                                        }else{
                                            confirm({
                                                title: '提醒',
                                                content: '确定要删除吗?',
                                                onOk() {
                                                    _this.delectTaskProgress(record.id)
                                                }
                                            })
                                        }
                                    }}
                                >
                                    删除
                                </Button>
                                {record.id && !record.isChange && <Button size={'small'} type='primary' onClick={()=>{
                                    this.state.dataSource[index]['isChange'] = true
                                    this.setState({
                                        dataSource: this.state.dataSource
                                    })
                                }}>修改</Button>}
                                {record.isChange &&<Button
                                    size={'small'}
                                    loading={this.state.loading}
                                    style={{
                                        marginLeft:'10px',
                                        color: '#ffffff',
                                        background: '#4ad028',
                                        border: 'none',
                                }} onClick={()=>{
                                    if(record.id){
                                        this.changeTaskProgress(record);
                                    }else{
                                        this.createTaskProgress(record);
                                    }
                                }}>保存</Button> }
                            </span> : null
                        )
                    }
                }
            ],
            dataSource: [],
            visible: false,
            columnsA: [
                {
                    title: '时间',
                    dataIndex: 'createTime',
                    key: 'createTime',
                },
                {
                    title: '操作类型',
                    dataIndex: 'status',
                    key: 'status',
                    render: (text, record) => {
                        return text === 0 ? '新增' : text === 1 ? '删除' : '修改'
                    }
                },
                {
                    title: '专利号',
                    dataIndex: 'patentName',
                    key: 'patentName',
                }
            ],
            dataSourceA: [],
            progressLogLoading: false,
            acceptCount: props.acceptCount || 0,
            certificatesCount: props.certificatesCount || 0,
            rejectCount: props.rejectCount || 0,
        };
        this.changeEvidence = this.changeEvidence.bind(this);
        this.createTaskProgress = this.createTaskProgress.bind(this);
        this.selectTaskProgressLog = this.selectTaskProgressLog.bind(this);
        this.delectTaskProgress = this.delectTaskProgress.bind(this);
        this.changeTaskProgress = this.changeTaskProgress.bind(this);
        this.loaduserss = this.loaduserss.bind(this);
    }

    changeEvidence(value,index,key){
        this.state.dataSource[index][key] = value;
        this.setState({
            dataSource: this.state.dataSource
        })
    }

    //新增申报进度
    createTaskProgress(record) {
        if(!record.patentNo){
            message.warning('请填写专利号');
            return;
        }
        if(!record.patentName){
            message.warning('请填写专利名称');
            return;
        }
        if(typeof record.status !== 'number'){
            message.warning('请选择状态');
            return;
        }
        this.setState({
            loading: true,
        })
        let _this = this;
        let data = Object.assign({},record);
        delete data.isChange;
        delete data.key;
        data.taskId = this.props.taskId;
        data.alreadyNumber = 1;
        data.type = this.props.bpType === 1 ? 1 : this.props.bpType === 6 ? 2 : '';//0软著 1专利 2商标
        $.ajax({
            method: 'post',
            dataType: 'json',
            crossDomain: false,
            url: globalConfig.context + '/api/admin/orderProject/createTaskProgress',
            data: data,
            success: function (data) {
                if (data.error.length) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message)
                    }
                }else{
                    message.success('添加成功');
                    delete record.isChange;
                    delete record.key;
                    _this.props.refresh && _this.props.refresh();
                    _this.loaduserss();
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                })
            }.bind(this)
        )
    }

    //申报进度日志
    selectTaskProgressLog() {
        this.setState({
            loading: true,
        })
        $.ajax({
            method: 'get',
            dataType: 'json',
            crossDomain: false,
            url: globalConfig.context + '/api/admin/orderProject/selectTaskProgressLog',
            data: {
                tid: this.props.taskId,
            },
            success: function (data) {
                let theArr = []
                if (data.error.length || data.data.list === '') {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message)
                    }
                } else {
                    for (let i = 0; i < data.data.length; i++) {
                        let thisdata = data.data[i];
                        thisdata.key = i;
                        theArr.push(thisdata)
                    }
                }
                this.setState({
                    dataSourceA: theArr,
                })
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                })
            }.bind(this)
        )
    }

    //修改申报进度
    changeTaskProgress(record) {
        if(!record.patentNo){
            message.warning('请填写专利号');
            return;
        }
        if(!record.patentName){
            message.warning('请填写专利名称');
            return;
        }
        if(typeof record.status !== 'number'){
            message.warning('请选择状态');
            return;
        }
        this.setState({
            loading: true,
        })
        let _this = this;
        let data = Object.assign({},record);
        delete data.isChange;
        delete data.key;
        data.taskId = this.props.taskId;
        data.alreadyNumber = 1;
        data.type = this.props.bpType === 1 ? 1 : this.props.bpType === 6 ? 2 : '';//0软著 1专利 2商标
        for(let i in data){
            if(typeof data[i] === 'object'){
                delete data[i]
            }
        }
        $.ajax({
            method: 'post',
            dataType: 'json',
            crossDomain: false,
            url: globalConfig.context + '/api/admin/orderProject/updateTaskProgress',
            data: data,
            success: function (data) {
                if (data.error.length) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message)
                    }
                }else{
                    message.success('修改成功');
                    delete record.isChange;
                    delete record.key;
                    _this.props.refresh && _this.props.refresh();
                    _this.loaduserss();
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                })
            }.bind(this)
        )
    }

    // 删除申报进度
    delectTaskProgress(id) {
        this.setState({
            loading: true,
        })
        let _this = this;
        $.ajax({
            method: 'post',
            dataType: 'json',
            crossDomain: false,
            url: globalConfig.context + '/api/admin/orderProject/delectTaskProgress',
            data: {
                id
            },
            success: function (data) {
                if (data.error.length) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message)
                    }
                }else{
                    message.success('删除成功');
                    _this.loaduserss();
                    _this.props.refresh && this.props.refresh();
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                })
            }.bind(this)
        )
    }

    //查看下证信息
    loaduserss() {
        this.setState({
            progressLogLoading: true,
        })
        $.ajax({
            method: 'get',
            dataType: 'json',
            crossDomain: false,
            url: globalConfig.context + '/api/admin/orderProject/selectTaskProgress',
            data: {
                tid: this.props.taskId,
            },
            success: function (data) {
                let thisData = []
                if (!thisData) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message)
                    }
                } else {
                    this.setState({
                        dataSource: data.data,
                    })
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    progressLogLoading: false,
                })
            }.bind(this)
        )
    }

    componentDidMount() {
        this.loaduserss();
        if(this.props.bpType === 1){
            this.state.columns.splice(-2,0,{
                title: '授权时间',
                dataIndex: 'authorizeTimes',
                key: 'authorizeTimes',
                render: (text, record,index) => {
                    return !record.isChange ? text : <DatePicker
                        size={'small'}
                        style={{
                            marginTop: '4px',
                            width: '100px'
                        }}
                        value={
                            text ? moment(text) : null
                        }
                        showTime
                        format="YYYY-MM-DD"
                        onChange={(data, dataString) => {
                            this.changeEvidence(dataString,index,'authorizeTimes')
                        }}
                    />
                }
            });
            this.setState({
                columns:this.state.columns
            })
        }
    }

    render() {
        return (
            <div>
                <div style={{
                    display:'flex',
                    alignItems:'center',
                    paddingLeft: '3%',
                    paddingRight: '10%',
                    color: '#000',
                    fontWeight: 400,
                }}>
                    <div style={{paddingRight:'10px'}}>派单项目数:{this.props.commodityQuantity}</div>
                    <div style={{paddingRight:'10px'}}>
                        受理数:
                        {this.props.readOnly ?
                            this.props.acceptCount:
                            <Input type='number' defaultValue={this.props.acceptCount || 0} value={this.state.acceptCount} style={{width:'70px'}} onChange={(e)=>{
                                this.setState({
                                    acceptCount:e.target.value
                                })
                                this.props.onChange('acceptCount',e.target.value);
                            }}/>
                        }
                    </div>
                    <div style={{paddingRight:'10px'}}>
                        下证数(即授权数):
                        {this.props.readOnly ?
                            this.props.certificatesCount:
                            <Input type='number' defaultValue={this.props.certificatesCount || 0} value={this.state.certificatesCount || (this.props.certificatesCount || 0)} style={{width:'70px'}} onChange={(e)=>{
                                this.setState({
                                    certificatesCount:e.target.value
                                })
                                this.props.onChange('certificatesCount',e.target.value);
                            }}/>
                        }
                    </div>
                    <div>
                        驳回数:
                        {this.props.readOnly ?
                            this.props.rejectCount:
                            <Input type='number' defaultValue={this.props.rejectCount || 0} value={this.state.rejectCount || (this.props.rejectCount || 0)} style={{width:'70px'}} onChange={(e)=>{
                                this.setState({
                                    rejectCount:e.target.value
                                })
                                this.props.onChange('rejectCount',e.target.value);
                            }}/>
                        }
                    </div>
                    <div style={{display:'flex',alignItems:'center',marginLeft:'auto'}}>
                        {!this.props.readOnly ? <Button
                            type="primary"
                            style={{ marginRight: '15px' }}
                            onClick={()=>{
                                let arr = this.state.dataSource.filter((v)=>v.isChange)
                                if(arr.length > 0){
                                    message.warning('已存在未保存项,请先保存!')
                                    return;
                                }
                                this.state.dataSource.push({
                                    key: this.state.dataSource.length+1,
                                    isChange: true,
                                })
                                this.setState({
                                    dataSource: this.state.dataSource
                                })
                            }}
                        >
                            {/* bpType: 0 正常 1专利 2软著 3审计 4双软 5高新 6商标*/}
                            {this.props.bpType === 1 ? '增加专利信息' : this.props.bpType === 6 ? '增加商标信息' : ''}
                        </Button> : null}
                        <Button
                            type="primary"
                            onClick={()=>{
                                this.selectTaskProgressLog();
                                this.setState({
                                    visible: true
                                })
                            }}
                        >
                            操作日志
                        </Button>
                    </div>
                </div>
                <div style={{
                    paddingTop:'10px'
                }}>
                    <Spin spinning={this.state.progressLogLoading}>
                        <Table
                            columns={this.state.columns}
                            scroll={{ x: 'max-content', y: 0 }}
                            dataSource={this.state.dataSource}
                            pagination={false}
                            bordered
                            size={'small'}
                        />
                    </Spin>
                </div>
                {this.state.visible ? <Modal
                    maskClosable={false}
                    width="800px"
                    visible={this.state.visible}
                    onCancel={()=>{
                        this.setState({
                            visible: false
                        })
                    }}
                    title="操作日志"
                    footer=""
                    className="admin-desc-content"
                >
                    <div className="patent-table patent-table-center">
                        <Spin spinning={this.state.loading}>
                            <Table
                                columns={this.state.columnsA}
                                dataSource={this.state.dataSourceA}
                                pagination={false}
                                bordered
                                size="small"
                            />
                        </Spin>
                    </div>
                </Modal> : null}
            </div>
        )
    }
}

export default PatentSchedule;