kede-client/js/component/common/nowProjectStatus/index.jsx

import React,{Component} from 'react';
import {Button, DatePicker, Input, message, Modal, Radio} from "antd";
import {
    highTechColumns,//高新
    highTechColumnsVIP,//高新会员
    science,//科技
    patent,//专利
    currency,//软著和通用
} from './type';
import moment from "moment";
import $ from "jquery";
import {splitUrl} from '@/tools'
import ImgList from "../imgList";

class NowProjectStatus extends Component{
    constructor(props) {
        super(props);
        this.state={
            projectStatus: parseInt(props.projectStatus),
            list:
                props.cSort === 3 ? science :
                props.cSort === 6 ? highTechColumnsVIP :
                props.projectType === 0 || props.projectType === 2 || props.projectType === 3 || props.projectType === 4 || props.projectType === 6?
                    currency:
                props.projectType === 1 ?
                    patent:
                props.projectType === 5 ?
                    highTechColumns :
                    [],//projectType  0 正常 1专利 2软著 3审计 4双软 5高新 6商标   cSort: 3 科技项目  6: 会员
            dataInfor:Object.assign({},props.projectTypeJSON),
            loading: false,
            fileList:[],
        }
    }

    updateProjectStatus(){
        let arr = this.state.list.filter(v=>v.id === this.state.projectStatus);
        let dataInforLength  = this.state.dataInfor[this.state.projectStatus] ? Object.keys(this.state.dataInfor[this.state.projectStatus]).length : 0;
        if(this.state.dataInfor[this.state.projectStatus] && this.state.dataInfor[this.state.projectStatus]['title']){
            dataInforLength -= 1;
        }
        if(this.state.dataInfor[this.state.projectStatus] && this.state.dataInfor[this.state.projectStatus]['suspendImg']){
            dataInforLength -= 1;
        }
        if(arr.length !== 0 && arr[0]['valueType'] && dataInforLength !== arr[0]['valueType'].length){
            arr[0]['valueType'].map((v)=>{
                if(!this.state.dataInfor[this.state.projectStatus][v]){
                    if(v === 'date'){
                        message.warning('请将'+arr[0]['name']+'时间补充完整')
                    }
                    if(v === 'certificateNumber'){
                        message.warning('请将'+arr[0]['name']+'的证书编号补充完整')
                    }
                    if(v === 'setUpAmount'){
                        message.warning('请将'+arr[0]['name']+'的立项金额补充完整')
                    }
                    if(v === 'appropriation'){
                        message.warning('请将'+arr[0]['name']+'的拨款金额补充完整')
                    }
                    return false;
                }
            })
            return false;
        }
        if((this.state.projectStatus === 2 || this.state.projectStatus === 3) && this.state.fileList.length === 0){
            message.warning('暂停附件未上传,请上传后保存!')
            return false;
        }
        this.setState({
            loading: true,
        })
        if((this.state.projectStatus === 2 || this.state.projectStatus === 3)){
            if (this.state.fileList.length) {
                let picArr = []
                this.state.fileList.map(function (item) {
                    if (item.response && item.response.data && item.response.data.length) {
                        picArr.push(item.response.data)
                    }
                })
                if(!this.state.dataInfor[2]){
                    this.state.dataInfor[2] = {};
                }
                if(!this.state.dataInfor[3]){
                    this.state.dataInfor[3] = {};
                }
                this.state.dataInfor[2]['suspendImg'] = picArr.join(',');
                this.state.dataInfor[3]['suspendImg'] = picArr.join(',');
            }
        }
        let data = Object.assign({},this.state.dataInfor);
        Object.keys(data).map(v=>{
            if(Object.keys(data[v]).length === 0){
                delete data[v];
            }
        })
        if(data[this.state.projectStatus]){
            data[this.state.projectStatus]['title'] =arr[0]['label'] || arr[0]['name'];
        }
        let obj = {
            tid:this.props.tid,
            projectStatus: this.state.projectStatus,
            timeRecord: JSON.stringify(data)
        }
        if(arr[0]['valueType']){
            //证书编号
            let type = arr[0]['valueType'].filter(v=>v==='certificateNumber');
            if(type.length > 0){
                obj.certificateNumber = this.state.dataInfor[this.state.projectStatus]['certificateNumber']
            }
            //立项金额
            let type1 = arr[0]['valueType'].filter(v=>v==='setUpAmount');
            if(type1.length > 0){
                obj.setUpAmount = this.state.dataInfor[this.state.projectStatus]['setUpAmount']
            }
        }
        $.ajax({
            url: globalConfig.context + '/api/admin/orderProject/updateProjectStatus',
            method: 'post',
            data: obj,
        }).done(
            function (data) {
                this.setState({
                    loading: false,
                })
                if (!data.error.length) {
                    message.success('保存成功！');
                    this.props.onPreservation(this.state.projectStatus);
                } else {
                    message.warning(data.error[0].message)
                }
            }.bind(this)
        )
    }

    componentDidMount() {
        /*旧数据处理
        * endDate           完成时间      对应已提交时间     4
        * acceptDate        受理时间      对应已推荐时间     6
        * publicityDate     公示时间      对应已拟公示时间   8
        * licenceDate       发证时间      对应已下证时间     10
        * setUpAmount       立项金额                      15
        * */
        const {endDate,acceptDate,publicityDate,licenceDate,setUpAmount} = this.props.oldData;
        if((!this.props.projectTypeJSON[4]) && endDate){
            this.state.dataInfor[4]={title:'完成时间'};
            this.state.dataInfor[4]['date'] = endDate;
        }
        if((!this.props.projectTypeJSON[6]) && acceptDate){
            this.state.dataInfor[6]={title:'受理时间'};
            this.state.dataInfor[6]['date'] = acceptDate;
        }
        if((!this.props.projectTypeJSON[8]) && publicityDate){
            this.state.dataInfor[8]={title:'公示时间'};
            this.state.dataInfor[8]['date'] = publicityDate;
        }
        if((!this.props.projectTypeJSON[10]) && licenceDate){
            this.state.dataInfor[10]={title:'发证时间'};
            this.state.dataInfor[10]['date'] = licenceDate;
        }
        // if((!this.props.projectTypeJSON[15]) && setUpAmount){
        //     this.state.dataInfor[15]={title:'立项金额'};
        //     this.state.dataInfor[15]['setUpAmount'] = setUpAmount;
        // }
        //图片
        if(this.props.projectTypeJSON[2] && this.props.projectTypeJSON[2]['suspendImg']){
            this.setState({
                fileList: splitUrl(
                    this.props.projectTypeJSON[2]['suspendImg'],
                    ',',
                    globalConfig.avatarHost + '/upload'
                )
            })
        }else{
            this.setState({
                fileList: []
            })
        }
        this.setState({
            dataInfor: this.state.dataInfor,
        })

    }

    render() {
        return(
            <Modal
                className="customeDetails"
                footer=""
                title=""
                width="700px"
                visible={this.props.visible}
                onOk={()=>{
                    this.props.onCancel();
                }}
                onCancel={()=>{
                    this.props.onCancel();
                }}
            >
                <div>
                    <div style={{
                        paddingBottom: '15px',
                        fontSize:'18px',
                        fontWeight:"bolder",
                    }}>
                        项目状态:
                    </div>
                    <div>
                        <Radio.Group
                            style={{
                                dispaly:'flex',
                                flexRow:'column'
                            }}
                            value={parseInt(this.state.projectStatus)}
                            onChange={(e) => {
                                if(!this.state.dataInfor[e.target.value]){
                                    this.state.dataInfor[e.target.value] = {};
                                }
                                this.state.dataInfor[this.state.projectStatus] = this.props.projectTypeJSON[this.state.projectStatus] || {};
                                this.setState({
                                    projectStatus: e.target.value,
                                    dataInfor:this.state.dataInfor,
                                });
                            }}
                        >
                            {
                                this.state.list.map((v,k)=>(
                                    <div key={k} style={{paddingBottom:'15px'}}>
                                        <Radio value={v.id}>{v.name}</Radio>
                                        {
                                            (v.valueType || []).map(d=>(
                                                parseInt(this.state.projectStatus) !== parseInt(v.id) ?
                                                    <span style={{marginRight:'15px'}}>
                                                        {
                                                            d === 'appropriation' ? '拨款金额(万元):' :
                                                                d === 'certificateNumber' ? '已出高新证书编号,编号:' :
                                                                    d === 'setUpAmount' ? '立项金额(万元):' : ''
                                                        }
                                                        {
                                                            this.state.dataInfor[v.id] && this.state.dataInfor[v.id][d]
                                                        }
                                                    </span>
                                                :d === 'date' ?
                                                <DatePicker
                                                    style={{ marginRight: '5px',width:'120px' }}
                                                    showTime
                                                    format="YYYY-MM-DD"
                                                    onOk={() => {}}
                                                    value={
                                                        this.state.dataInfor[v.id] && this.state.dataInfor[v.id][d] ? moment(this.state.dataInfor[v.id][d]) : null
                                                    }
                                                    onChange={(data, dataString) => {
                                                        console.log(dataString)
                                                        if(!this.state.dataInfor[v.id]){
                                                            this.state.dataInfor[v.id] = {};
                                                        }
                                                        if(!dataString && this.state.dataInfor[v.id][d]){
                                                            delete this.state.dataInfor[v.id][d];
                                                        }else{
                                                            this.state.dataInfor[v.id][d] = dataString;
                                                        }
                                                        this.setState({
                                                            dataInfor:this.state.dataInfor,
                                                        })
                                                    }}
                                                /> :
                                                    d === 'setUpAmount' || d === 'certificateNumber' || d === 'appropriation' ? <span>
                                                        <span>
                                                            {
                                                                d === 'appropriation' ? '拨款金额(万元)' :
                                                                    d === 'certificateNumber' ? '已出高新证书编号,编号' :
                                                                        d === 'setUpAmount' ? '立项金额(万元)' : ''
                                                            }
                                                        </span>
                                                        <Input
                                                            placeholder={v.placeholder}
                                                            value={this.state.dataInfor[v.id] ? this.state.dataInfor[v.id][d] : ''}
                                                            style={{ width: '120px',marginRight: '5px', }}
                                                            onChange={(e) => {
                                                                if(!this.state.dataInfor[v.id]){
                                                                    this.state.dataInfor[v.id] = {};
                                                                }
                                                                if(!e.target.value && this.state.dataInfor[v.id][d]){
                                                                    delete this.state.dataInfor[v.id][d];
                                                                }else{
                                                                    this.state.dataInfor[v.id][d] = e.target.value;
                                                                }
                                                                this.setState({
                                                                    dataInfor:this.state.dataInfor,
                                                                })
                                                            }}
                                                        />
                                                    </span> : null
                                            ))
                                        }
                                        <span style={{color:'#f00',marginLeft:'15px'}}>{v.explain}</span>
                                    </div>
                                ))
                            }
                        </Radio.Group>
                        {
                            (this.state.projectStatus === 2 || this.state.projectStatus === 3 || this.state.fileList.length > 0) &&
                                <div>
                                    <div style={{
                                        paddingTop:'20px',
                                        paddingBottom:'10px'
                                    }}>
                                        <div>暂停附件:</div>
                                        <div style={{color:'#f00'}}>(请上传截图证明)</div>
                                    </div>
                                    <div style={{
                                        display:(this.state.projectStatus === 2 || this.state.projectStatus === 3) ? 'block':'none'
                                    }}>
                                        <ImgList
                                            domId='nowProjectStatus'
                                            uploadConfig={{
                                                action:globalConfig.context + "/api/admin/orderProject/uploadOrderTaskFile",
                                                data:{ 'sign': "order_task_file"},
                                                multiple:true,
                                                listType:"picture-card",
                                            }}
                                            onChange={(info)=>{
                                                let fileList = info.fileList;
                                                this.setState({ fileList });
                                            }}
                                            fileList={this.state.fileList}
                                        />
                                    </div>
                                     <div style={{
                                         display:(this.state.projectStatus === 2 || this.state.projectStatus === 3) ? 'none':'block'
                                     }}>
                                         <ImgList
                                             domId='nowProjectStatus1'
                                             fileList={this.state.fileList}
                                         />
                                     </div>
                                </div>
                        }
                        <div style={{
                            display:'flex',
                            justifyContent:'center',
                            paddingTop:'20px',
                            paddingBottom: '20px',
                        }}>
                            <Button
                                loading={this.state.loading}
                                className="cancel"
                                type="ghost"
                                onClick={()=>{
                                    this.updateProjectStatus();
                                }}
                            >
                                保存
                            </Button>
                        </div>
                        <div style={{textAlign:'center',color:'#f00'}}>注:请根据实际项目情况填写</div>
                    </div>
                </div>
            </Modal>
        )
    }
}

export default NowProjectStatus;