kede-client/js/component/manageCenter/project/task/payApplyReject/detailsModal/index.js

import React,{Component} from 'react';
import {message, Modal, Tabs} from "antd";
import { cuiJieDian } from '@/dataDic.js'
import ProjectOverview from './projectOverview'
import {splitUrl} from '@/tools'
import CheckProject from "../../../../components/checkProject";
import $ from "jquery";
import OrderItemStatus from "../../../../../common/orderItemStatus";

const { TabPane } = Tabs

class DetailsModal extends Component{
    constructor(props) {
        super(props);
        this.state={
            loading: false,
            activeKey:'1',
            paySubject: [],
            orderDtails: {},
            containOfficialFees:0,//官费缴费情况
        }
        this.visitCancel = this.visitCancel.bind(this);
        this.getCsortData = this.getCsortData.bind(this);
    }

    async componentDidMount() {
        if(this.props.tid){
            this.waiDetail();
            this.thirdTable(this.props.tid);
            this.getOrderNewDetail();
            await this.xiangqing(this.props.tid);
            await this.getCsortData(this.state.sort)
            await this.payNodeTable(this.props.tid);

        }
    }

    // 获取csort下的数据
    getCsortData(cSort) {
        return cuiJieDian.map((item) => {
            if (item.value == cSort) {
                this.setState({
                    paySubject: item.children,
                })
            }
        })
    }

    visitOk(){
        this.setState({
            oldInfor: {}
        });
    }

    visitCancel(){
        this.setState({
            oldInfor: {}
        });
        this.props.visitCancel();
    }

    waiDetail() {
        let url = window.location.href.substring(7)
        this.setState({
            loading: true,
        })
        $.ajax({
            method: 'get',
            dataType: 'json',
            crossDomain: false,
            url:
                globalConfig.context + '/api/admin/outsourceOrg/orderOutsourceDtails',
            data: {
                tid: this.props.tid,
                orderNo: this.props.orderNo,
            },
        }).done(
            function (data) {
                this.setState({
                    loading: false,
                })
                if (!data.error.length && data.data) {
                    if(data.data.unitNumber){
                        this.setState({
                            oldInfor: {
                                companyName:data.data.companyName,
                                unitPrice:data.data.unitPrice,
                                unitNumber:data.data.unitNumber,
                                amount:data.data.amount,
                                outsourceRemarks:data.data.outsourceRemarks,
                                refundStatus: data.data.refundStatus,
                                pictureUrl: data.data.pictureUrl
                                    ? splitUrl(
                                        data.data.pictureUrl,
                                        ',',
                                        globalConfig.avatarHost + '/upload',
                                        url
                                    )
                                    : [], //图片地址
                            }
                        })
                    }else{
                        this.setState({
                            oldInfor: {}
                        })
                    }
                    this.setState({
                        containOfficialFees: data.data.actualOfficial,//官费类型  0实际已缴费  1实际未缴费
                        orderDtails: data.data,
                        startType: data.data.startType, //类型
                        mid: data.data.id,
                        outsourceRemarks: data.data.outsourceRemarks,
                        refundStatus: data.data.refundStatus,
                        pictureUrl: data.data.pictureUrl
                            ? splitUrl(
                                data.data.pictureUrl,
                                ',',
                                globalConfig.avatarHost + '/upload',
                                url
                            )
                            : [], //图片地址
                    })
                } else if (data.error && data.error.length) {
                    message.warning(data.error[0].message)
                } else if (!data.data) {
                    this.setState({
                        refundStatus: undefined,
                    })
                }
            }.bind(this)
        )
    }

    //查看第三方信息表格
    thirdTable(id) {
        this.setState({
            loadData: true,
        })
        $.ajax({
            method: 'get',
            dataType: 'json',
            crossDomain: false,
            url: globalConfig.context + '/api/admin/company/selectCompany',
            data: {
                tid: id,
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message)
                } else {
                    let companyNameArr = []
                    let theArr = []
                    let thisData = []
                    let arr = data.data || []
                    let allTotalAmount = 0
                    for (let i = 0; i < arr.length; i++) {
                        thisData = arr[i]
                        allTotalAmount =
                            (allTotalAmount * 10000 + thisData.totalAmount * 10000) / 10000
                        companyNameArr.push(thisData.companyName);
                        thisData.key = i;
                        theArr.push(thisData)
                    }

                    for(let d=0;d<theArr.length;d++){
                        theArr[d].companyName = theArr[d].companyName+ '-' + theArr[d].id;
                        // companyNameArr[d] = {
                        //     companyName: theArr[d].companyName,
                        //     id: theArr[d].id,
                        // }
                    }

                    if (!allTotalAmount) {
                        allTotalAmount = 0
                    }

                    this.setState({
                        thirdInfoList: theArr,
                        allTotalAmount: allTotalAmount,
                    })
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                })
            }.bind(this)
        )
    }

    payNodeTable(id) {
        this.setState({
            loadData: true,
        })
        return $.ajax({
            method: 'get',
            dataType: 'json',
            crossDomain: false,
            url: globalConfig.context + '/api/admin/company/selectPaymentNode',
            data: {
                tid: id,
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message)
                } else {
                    let payNodeArr = []
                    let thisData = []
                    let arr = data.data || []
                    //对#5283自定义的补充展示
                    this.state.paySubject.push({ key: '自定义', value: '0' })
                    for (let i = 0; i < arr.length; i++) {
                        thisData = arr[i]
                        //遍历paySubject,获取当前dunType对应的key
                        this.state.paySubject.map((item) => {
                            if (item.value == thisData.dunType) {
                                thisData.dunType = item.key
                            }
                        })
                        payNodeArr.push({
                            key: i,
                            id: thisData.id, //付款节点Id
                            tid: thisData.tid,
                            companyName: thisData.companyName, //供应商名称
                            projectType: thisData.projectType, //项目分类
                            dunType: thisData.dunType, //催款分类
                            unitPrice: thisData.unitPrice, //单价
                            quantity: thisData.quantity, //数量
                            totalAmount: thisData.totalAmount, //总价
                            partyAmount: thisData.partyAmount, //付款
                            partyTimes: thisData.partyTimes, //付款时间
                            cid: thisData.cid, //机构id
                        })
                    }

                    for(let d=0;d<payNodeArr.length;d++){
                        payNodeArr[d].companyName = payNodeArr[d].companyName+ '-' + payNodeArr[d].cid;
                    }

                    this.setState({
                        payNodeList: payNodeArr,
                    })
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                })
            }.bind(this)
        )
    }

    //订单详情
    xiangqing(id) {
        return $.ajax({
            method: 'get',
            dataType: 'json',
            crossDomain: false,
            url: globalConfig.context + '/api/admin/orderProject/orderTaskDetail',
            data: {
                id: id,
            },
            success: function (data) {
                let thisdata = data.data
                if (data.error.length || data.data.list == '') {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message)
                    }
                } else {
                    localStorage.setItem('cSort', thisdata.sort);
                    this.setState({
                        orderTaskOfficialCost: thisdata.officialCost,    //官费 0无 1有
                        orderTaskCostReduction: thisdata.costReduction,//费减
                        checkStatus:thisdata.checkStatus,//核对状态
                        commodityQuantity:thisdata.commodityQuantity,//项目数量
                        patentTypeName:thisdata.patentTypeName,//官费类型名称
                        patentTypeId: thisdata.patentType,//官费专利类型
                        sort: thisdata.sort,
                    })
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                })
            }.bind(this)
        )
    }

    getOrderNewDetail() {
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail",
            data: {
                orderNo: this.props.orderNo
            },
            success: function (data) {
                if (data.error.length || data.data.list == "") {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                } else {
                    let thisdata = data.data;
                    this.setState({
                        deleteSign:thisdata.deleteSign,
                    });
                }
            }.bind(this)
        });
    }

    render() {
        return(
            <Modal
                maskClosable={false}
                className="customeDetails"
                footer=""
                title=""
                width="1200px"
                visible={this.props.visible}
                onOk={this.visitOk}
                onCancel={this.visitCancel}
            >
                <Tabs
                    defaultActiveKey='1'
                    activeKey={this.state.activeKey}
                    onChange={(e) => {
                        this.setState({
                            activeKey: e
                        })
                        if(e === '1'){
                            this.waiDetail();
                            this.thirdTable(this.props.tid);
                            this.payNodeTable(this.props.tid);
                            this.xiangqing(this.props.tid);
                        }
                    }}
                    tabBarExtraContent={
                        <div style={{fontWeight:'bold',paddingRight:'15px'}}>
                          <span>
                            项目名称:
                            <span style={{color:'#F00',paddingRight:'5px'}}>{this.props.taskName}</span>
                          </span>
                          <span style={{marginLeft:'15px'}}>
                            项目编号:
                              <span style={{color:'#F00',paddingRight:'5px'}}>
                                  {this.props.taskID}
                              </span>
                          </span>
                            <OrderItemStatus deleteSign={this.state.deleteSign}/>
                        </div>
                    }
                >
                    <TabPane tab="外包/供应商信息" key="1">
                        {this.state.activeKey === '1' ? <CheckProject
                            {...this.props}
                            tid={this.props.tid}
                            sort={this.state.sort}
                            patentTypeName={this.state.patentTypeName}                  //官费类型
                            patentTypeId={this.state.patentTypeId}
                            commodityQuantity={this.state.commodityQuantity}            //项目数量
                            checkStatus={this.state.checkStatus}                        //核对状态
                            orderTaskCostReduction={this.state.orderTaskCostReduction}    //是否含费减  0无1有
                            oldInfor={this.state.oldInfor}
                            orderTaskOfficialCost={this.state.orderTaskOfficialCost}    //是否含官费  0无1有
                            containOfficialFees={this.state.containOfficialFees}        //0:实际已缴费 1:实际未缴费
                            status={this.state.refundStatus}
                            mid={this.state.mid}
                            patentNameType={this.state.orderDtails.patentNameType}
                            patentName={this.state.orderDtails.patentName}
                            patentType={this.state.orderDtails.patentType}
                            projectType={this.props.projectType}
                            projectStatus={this.props.projectStatus}
                            thirdInfoList={this.state.thirdInfoList}
                            dataSource={this.state.payNodeList}
                            outsourceRemarks={this.state.outsourceRemarks}
                            fileList={this.state.pictureUrl}
                            startType={this.state.startType}
                            onRefresh={()=>{
                                this.waiDetail();
                                this.thirdTable(this.props.tid);
                                this.payNodeTable(this.props.tid);
                                this.xiangqing(this.props.tid);
                                this.props.refreshList && this.props.refreshList();
                            }}
                        /> : <div/>}
                    </TabPane>
                    <TabPane tab="项目概况" key="2">
                        <ProjectOverview projectStatus={this.props.projectStatus} tid={this.props.tid} taskName={this.props.taskName}/>
                    </TabPane>
                </Tabs>
            </Modal>
        )
    }
}

export default DetailsModal;