fe_service_ebtp_frontend/src/pages/MainPage/ProjectManager/participants.js

import React, { PureComponent } from 'react';
import { history } from 'umi';
import { Row, Col, Tooltip, Card, List, DatePicker, Button, Statistic, Spin, Empty, message } from 'antd';
import { connect } from 'dva';
import './index.less';
// import talkPng from '@/images/talk/talk.png';
import { routerRedux } from 'dva/router';
import { RightOutlined } from '@ant-design/icons';
import moment from 'moment';
import { getRA } from '@/utils/session';
import { getDefId } from './service';
import { getURLInformation } from '@/utils/CommonUtils';
import MessageDetail from '@/pages/SystemMessage/message/components/messageDetail'
import NoticeDetail from '@/pages/notice/noticeList/components/NoticeDetail'
import NoticeModal from '@/pages/Auction/NoticeModal/noticeModal'
import StopReason from '@/pages/Auction/NoticeModal/stopReason'
import QuestDetail from '@/pages/SystemMessage/message/components/questDetail'
import { getQuestList } from '@/pages/SystemMessage/message/service'
import { submitHiddenForm, createHiddenForm } from '@/utils/CustomerService' //智慧客服
@connect(({ dashboard, loading }) => ({
    ...dashboard,
    fetchtShotList: loading.effects['dashboard/fetchtShotList'],
    projectlistLoading: loading.effects['dashboard/fetchprojectRecords'],
}))
class manager extends PureComponent {
    state = {
        datevalue: moment(moment().format('YYYYMM'), 'YYYY-MM'),
        datestring: moment().format('YYYYMM'),
        messId: '0', // 消息id
        messageDetail: false, // 消息弹窗
        detailId: '1', // 公告id
        noticeDetail: false, // 公告弹窗
        projectId: '0', // 竞拍公告弹窗id
        noticeModalVis: false, // 竞拍公告弹窗
        tpid: '0', // 中止原因id
        isModalVisible: false, // 中止原因弹窗
        questData: {},//问卷数据
        questVisible: false, //问卷弹窗服
        roleIds: '',//智慧客服
    }
    componentDidMount() {
        this.props.dispatch({
            type: "dashboard/fetchParticipants",
            payload: { selectDate: moment().format('YYYY-MM') }
        })
        this.props.dispatch({
            type: "dashboard/fetchtlist",
            payload: { limit: 7 }
        })
        this.props.dispatch({
            type: "dashboard/fetchtShotList",
            payload: { pageNo: 1, pageSize: 4, limit: 4 }
        }),
            this.props.dispatch({
                type: "dashboard/fetchtlistre",
                payload: { pageNo: 1, pageSize: 7 }
            })
        // NTKF_PARAM = {
        //     siteid: "bl_1000",                    //企业ID，,为固定值
        //     settingid: "bl_1000_1492484340268",           //接待组ID，为固定值，必填
        //     uid: getSessionUserData()?.userId,
        //     uname: getSessionUserData()?.deptName + "-" + getSessionUserData()?.fullName,            //用户名，未登录可以为空，但是不能给null，uname赋予的值显示到小能客户端
        //     isvip: "0",                              //是否为vip用户，0代表非会员，1代表会员，取值显示到小能客户端
        //     userlevel: "1",                       //网站自定义会员级别，1-N，可根据选择判断，取值显示到小能客户端
        //     erpparam: "abc"                          //erpparam为erp功能的扩展字段，可选，购买erp功能后用于erp功能集成
        // }
    }
    onChange = (date, dateString) => {
        this.setState({
            datevalue: moment(dateString, 'YYYY-MM'),
            datestring: dateString
        })
    }
    onSearch = () => {
        const { datestring } = this.state;
        this.props.dispatch({
            type: "dashboard/save",
            payload: { staloading: true }
        })
        this.props.dispatch({
            type: "dashboard/fetchParticipants",
            payload: { selectDate: datestring }
        })
    }
    lookDetail = (id) => { // 消息查看详情
        this.setState({
            messId: id,
            messageDetail: true
        })
    }
    closeModel = () => { // 关闭消息弹窗
        this.setState({
            messageDetail: false
        })
    }
    lookInfo = (id) => { // 公告查看
        this.setState({
            detailId: id,
            noticeDetail: true
        })
    }
    noticeModel = () => { // 公告关闭消息弹窗
        this.setState({
            noticeDetail: false,
            noticeModalVis: false,
            isModalVisible: false
        })
    }
    toParticipate = async (servicecode) => {//问卷调查弹窗
        const { questId } = JSON.parse(servicecode);
        await getQuestList({ id: questId }).then(res => {
            if (res?.code == 200 && res?.success) {
                this.setState({
                    questData: res?.data,
                    questVisible: true,
                })
            }
        })
    }
    closeParticipate = () => { // 关闭问卷调查弹窗
        this.setState({
            questVisible: false
        })
    }
    lookNotice = (id) => { // 查看竞拍公告
        this.setState({
            projectId: id,
            noticeModalVis: true
        })
    }
    getAbortReasonrView = (id) => {
        this.setState({
            tpid: id,
            isModalVisible: true
        })
    }
    enterTheBidding = (id) => { // 竞拍出价 || 查看结果
        let projectData = {
            id: id
        };
        sessionStorage.setItem('projectData', JSON.stringify(projectData));
        window.open("/AuctionViewAuctions/Index");
    }
    //触发客服
    initChatUI = () => {
        let roleAuthority = sessionStorage.getItem('roleAuthority');
        let data = getSessionUserData();
        const inputList = [
            {
                label: null,
                paraName: 'origin',
                isEncode: false,
                paraVal: 'eBid',
            },
            {
                label: null,
                paraName: 'organizationId',
                isEncode: false,
                paraVal: data.organizationId,
            },
            {
                label: null,
                paraName: 'tenderAgencyId',
                isEncode: false,
                paraVal: 'EMPTY',
            },
            {
                label: null,
                paraName: 'tenderAgencyName',
                isEncode: true,
                paraVal: '招标采购中心客服',
            },
            {
                label: null,
                paraName: 'roleAuthority',
                isEncode: false,
                paraVal: JSON.parse(roleAuthority)[0],
            },
            {
                label: null,
                paraName: 'module',
                isEncode: false,
                paraVal: '2',
            },
            {
                label: null,
                paraName: 'custType',
                isEncode: false,
                paraVal: '1',
            },
        ]
        createHiddenForm(inputList, window.location.pathname)
        submitHiddenForm()
    }

    render() {
        const { projectlist, staloading, tlist, trelist, shotList, Participants } = this.props;
        const { datevalue, messId, messageDetail, detailId, noticeDetail, noticeModalVis, projectId, isModalVisible, tpid, questData, questVisible, } = this.state;
        return (
            <>
                <a className="talk" onClick={() => this.initChatUI()}>系统操作咨询︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
                <div className="dashboard" style={{ height: innerHeight - 70, overflow: "hidden" }}>
                    <Row className="topt">
                        <Col span={8}><Card title="我的消息" bordered={false} className="cardtre" style={{ marginRight: "10px" }} extra={<div className="moret" onClick={() => history.push('/SystemMessage/message')}>更多<RightOutlined /></div>}>
                            {trelist != [] && trelist.map((item, index) => {
                                return (
                                    <div onClick={() => { item.templatetype == '3' ? this.toParticipate(item.servicecode) : this.lookDetail(item.msgId) }} className="messagetre" key={item.id}>
                                        <div className="round">{index + 1}</div>
                                        <div className="txt" title={item.title}>{item.title}</div>
                                        <div className="time">{item.createtime}</div>
                                    </div>
                                )
                            })}
                        </Card></Col>
                        <Col span={8}><Card title="我参与的项目" bordered={false} className="cardtremanager" style={{ marginRight: "10px" }} loading={staloading} extra={<div style={{ marginTop: "-14px" }}>
                            <DatePicker showNow={false} picker="month" style={{ marginRight: "10px" }} value={datevalue} onChange={this.onChange} allowClear={false} /><Button type="primary" onClick={() => { this.onSearch() }}>确定</Button></div>}>
                            <div className="boxrezt" key='0' style={{ height: "130px" }}>
                                <div className="boxtitle" title='竞拍'>
                                    竞拍<div className="yue">月</div></div>
                                <div className="boxcount" onClick={() => history.push('/Auction/AuctionMyLookingForInnerShot')}><Statistic value={Participants} /></div>
                                <div className="boxdescription" title='竞拍的数量'>竞拍的数量</div>
                            </div>
                        </Card>
                        </Col>
                        <Col span={8}><Card title="系统公告" bordered={false} className="cardtre" extra={<div className="moret" onClick={() => history.push('/notice/noticeList')}>更多<RightOutlined /></div>}>
                            {tlist != [] && tlist.map((item, index) => {
                                return (
                                    <div className="messagetre" onClick={() => { this.lookInfo(item.id) }} key={item.id}>
                                        <div className="round">{index + 1}</div>
                                        <div className="txt" title={item.noticeTitle}>{item.noticeTitle}</div>
                                        <div className="time">{item.updateDate}</div>
                                    </div>
                                )
                            })}</Card>
                        </Col>
                    </Row>
                    <Row className="downt" type="flex" justify="space-around">
                        <Col span={24}>
                            <Card title="我的内拍项目" className="cardtre" extra={<div className="moret" onClick={() => history.push('/Auction/AuctionMyLookingForInnerShot')}>更多<RightOutlined /></div>}>
                                <List
                                    size="large"
                                    bordered={false}
                                    dataSource={shotList != [] && shotList}
                                    renderItem={item => <List.Item className="pointer" key={item.id} style={{ height: "25%" }}>
                                        <div className="downtitle" title={item.projectName}>{item.projectName}
                                            <div className="downtime">竞拍开始时间：{item.auctionStartTime}</div>
                                        </div>
                                        <div className="downb">
                                            {
                                                item.bidOpeningStatus == 0 ?
                                                    <>
                                                        <Button type="primary" style={{ float: "right", marginLeft: "20px" }} onClick={() => { message.warn('竞拍未开始，无法进入竞拍！') }}>竞拍出价</Button>
                                                        <Button type="primary" style={{ float: "right" }} onClick={() => { this.lookNotice(item.id) }}>查看公告</Button>
                                                    </> :
                                                    item.bidOpeningStatus == 1 ?
                                                        <>
                                                            <Button type="primary" style={{ float: "right", marginLeft: "20px" }} onClick={() => { this.enterTheBidding(item.id) }}>竞拍出价</Button>
                                                            <Button type="primary" style={{ float: "right" }} onClick={() => { this.lookNotice(item.id) }}>查看公告</Button>
                                                        </> :
                                                        item.bidOpeningStatus == 2 ?
                                                            <>
                                                                <Button type="primary" style={{ float: "right", marginLeft: "20px" }} onClick={() => { this.enterTheBidding(item.id) }}>查看结果</Button>
                                                                <Button type="primary" style={{ float: "right" }} onClick={() => { this.lookNotice(item.id) }}>查看公告</Button>

                                                            </> :
                                                            item.bidOpeningStatus == 6 ?
                                                                <>
                                                                    <Button type="primary" style={{ float: "right", marginLeft: "20px" }} onClick={() => { this.enterTheBidding(item.id) }}>查看结果</Button>
                                                                    <Button type="primary" style={{ float: "right" }} onClick={() => { this.lookNotice(item.id) }}>查看公告</Button>
                                                                </> :
                                                                item.bidOpeningStatus == 7 ?
                                                                    <>
                                                                        <Button type="primary" style={{ float: "right", marginLeft: "20px" }} onClick={() => { this.getAbortReasonrView(item.id) }}>中止原因</Button>
                                                                        <Button type="primary" style={{ float: "right" }} onClick={() => { this.lookNotice(item.id) }}>查看公告</Button>
                                                                    </> :
                                                                    null
                                            }
                                        </div>
                                    </List.Item>}
                                />
                            </Card>
                        </Col>
                    </Row>
                </div>
                {messageDetail ? <MessageDetail messId={messId} onCancel={() => { this.closeModel(), this.props.dispatch({ type: "dashboard/fetchtlistre", payload: { pageNo: 1, pageSize: 7 } }) }} modalVisible={messageDetail} /> : null}
                {questVisible ? <QuestDetail questData={questData} onCancel={() => { this.closeParticipate(), this.props.dispatch({ type: "dashboard/fetchtlistre", payload: { pageNo: 1, pageSize: 7 } }) }} modalVisible={questVisible} /> : null}
                {noticeDetail && <NoticeDetail detailId={detailId} onCancel={() => { this.noticeModel() }} modalVisible={noticeDetail} />}
                <NoticeModal projectId={projectId} state={'3'} vis={noticeModalVis} close={() => { this.noticeModel() }} />
                <StopReason tpid={tpid} modalVisible={isModalVisible} onCancel={() => { this.noticeModel() }} />
            </>
        )
    }
}
export default manager;