fe_service_ebtp_frontend/src/pages/BidEvaluation/Jury.js

import React, {PureComponent} from 'react';
import {Divider,Button,Form,Card,Tabs,Table,Tooltip,Input,Select,Row,Col,message,Modal,Descriptions,Checkbox } from 'antd';
import './index.less';
import { connect } from "dva";
import { history } from "umi"
import { number } from 'prop-types';
import { getURLInformation } from '@/utils/CommonUtils';
import '@/assets/zjl_style.less'
import ExpertEnter from "./components/ExpertEnter"
import CommitmentModal from "./components/CommitmentModal"
// import bookt from "../../assets/bookt.doc";

const FormItem=Form.Item;
const formRef = React.createRef();
const DescriptionsItem=Descriptions.Item;
const proTypeCode = getURLInformation('proTypeCode') == undefined || getURLInformation('proTypeCode') == null || getURLInformation('proTypeCode') == '' ? [] : getURLInformation('proTypeCode')?.split(",")
@connect(({ bidev,loading }) => ({
  ...bidev,
  JurylistLoading:loading.effects['bidev/fetchJuryList'],
  bidslistLoading:loading.effects['bidev/fetchbidslist'],
}))
class Jury extends PureComponent {
  state={
    pageNo:1,
    pageSize:10,
    tpId:'',
    ratevisible:false,
    room:[],
    bookflag:false,
    display:false,
    sectionName:"采购包",
    sectionType:"评审",
    roleName: "投标人",
    // visible: false,
    commitmentVisible: false
  }
  componentDidMount(){
     //确定显示字段名称
     let sectionName = "采购包";
     let sectionType = "评审";
     let roleName = "投标人"
     let proMethod = proTypeCode?.length == 0 ? null : proTypeCode[0];
     if(proMethod == "procurement_mode_1" || proMethod == "procurement_mode_2") {
         sectionName= "标段";
         sectionType= "评标";
     } else if(proMethod == "procurement_mode_5" || proMethod == "procurement_mode_6") {
       sectionName= "采购包";
       sectionType= "谈判";
       roleName="供应商"
     } else if(proMethod == "procurement_mode_4") {
       sectionName= "包件";
       roleName="供应商"
     }
     this.setState({
       sectionName,
       sectionType,
       roleName
     })

    this.setState({
      bookflag:true
    })
    const { dispatch }=this.props;
    // const {pageNo,pageSize}=this.state;
    const params={
      pageNo:1,
      pageSize:10,
      // roomType:this.props.match.params.roomType,
      // tpId: getProId(),//项目id
      // checked:false
      bidMethodDict: proTypeCode
    }
    dispatch({
      type:"bidev/fetchJuryList",
      payload:{...params}
    })
  }

  onRateShow=(record)=>{
    this.setState({
      room:record
    })
    const params={
      roomId:record.id
    }
    const roomId={
      assessRoomId:record.id
    }
    this.props.dispatch({
      type:"bidev/getCheckedByRoomId",
      payload: {...roomId},
      callback:(response) => {
        if(response.data == false) {
          this.setState({display: true})
        } else {
          this.setState({display: false})
        }
      }
    })
    this.props.dispatch({
      type:"bidev/fetchJuryMemInfo",
      payload:{...params},
      callback:(response,txt)=>{
        if(txt=="success"){
          sessionStorage.setItem('projectData',JSON.stringify(record))
          sessionStorage.setItem('roomId',record.id)
          sessionStorage.setItem("groupId",record.chatGroupId)
          this.setState({
            ratevisible:true,
            tpId:record.tpId
          })
        }
      }
    })
  }
  // 校验验证码及修改用户信息
  onRe2ndPageOut=()=>{
    const { validateFields,getFieldValue }=formRef.current;
    const { JuryInfo,checked }=this.props;
    validateFields(['name','mobile',
                    // 'certificate',
    'verificationCode']).then(
      (values) => {
        const params={
          name:values.name,
          mobile:values.mobile,
          id:JuryInfo.id
        }
        this.props.dispatch({
          type:"bidev/updateJuryMemInfo",
          payload:{...params},
          callback:(response,txt)=>{
            if(txt=="success"){
              const { room,tpId }=this.state;
              const paramst={
                id:room.id,
                verificationCode:values.verificationCode
              }
              // 校验验证码
              this.props.dispatch({
                type:"bidev/validateVerificationCode",
                payload:{...paramst},
                callback:(response,txt)=>{
                  if(txt=="success"){
                    const { display }=this.state;
                    if(display == true) {
                      // history.push('/EvaRoom')
                      window.open('/EvaRoom/Eva')
                      this.setState({
                        ratevisible:false,
                      })
                    } else {
                      // message.success("完美成功！")
                      const paramskt={
                        assessRoomId:room.id,
                        // assessRoomId:"1331563852780797952",
                        projectId:tpId,
                        // projectId:"4419993030303037111"
                      }
                      const params={
                        roomId:room.id
                      }
                      this.props.dispatch({
                        type:"bidev/fetchbidslist",
                        payload:{...paramskt}
                      })
                      this.props.dispatch({
                        type:"bidev/fetchJuryMemInfo",
                        payload:{...params},
                        callback:(response,txt)=>{
                          if(txt=="success"){
                            const { resetFields }=formRef.current;
                            resetFields();
                            this.setState({
                              ratevisible:false,
                              bookflag:false
                            })
                          }
                        }
                      })
                    }
                  }
                }
              })
            }
          }
        })
      }
    )
  }
  onRateOut(){
    const { resetFields }=formRef.current;
    resetFields();
    this.setState({
      ratevisible:false
    })
  }
  onChange=(e)=>{
    this.setState({
      checked:e.target.checked
    })
  }
  windowopen=()=>{
    // window.open(response.data, '_blank')
    this.setState({
      commitmentVisible:true
    })
  }
  handleRedirect=(txt)=>{
    const { checked,room }=this.state;
    const { JuryInfo }=this.props;
    if(txt==1 && !checked){
      return message.warn("请您先阅读专家承诺书！")
    }
    const params={
      assessRoomId:room.id,
      attitude:txt,
      juryMemberId:JuryInfo.id,
      sectionId:room.sectionId,
    }
    this.props.dispatch({
      type:"bidev/pushRedirectRe",
      payload:{...params},
      callback:(response,t)=>{
        if(t=="success"){
          // 再跳转
          if(txt==1){
            // sessionStorage.setItem("roomId",record.id)
            // this.props.dispatch(routerRedux.push('/ProjectLayout/EvaRoom'))
            // history.push('/EvaRoom')
            window.open('/EvaRoom/Eva')
          }else{
            this.setState({
              ratevisible:false,
              bookflag:true
            })
          }
        }
      }
    })
  }
  handleBack=()=>{
    this.setState({
      bookflag:true
    })
  }
  render(){
    const { JuryList,JurylistLoading,JuryInfo,bidslistLoading,bidslist}=this.props;
    const { pageNo,pageSize,tpId,ratevisible,bookflag,checked,display,sectionName,sectionType,roleName }=this.state;
    const pagination = {
      current: pageNo,
      total: JuryList && JuryList.total ,
      // showSizeChanger: true,
      showQuickJumper:true,
      showTotal: (total,range) => `共 ${total} 条记录，第${range.slice(',')[0]}-${range.slice(',')[1]}条`,
      onChange:(page, pageSize)=>{
        this.setState({
          pageNo:page,
          pageSize:pageSize,
        });
        const params={
          pageNo:page,
          pageSize:pageSize,
          // roomType:2,
          // tpId:tpId//项目id
        }
        this.props.dispatch({
          type:"bidev/fetchJuryList",
          payload:{...params}
        })
      },
      onShowSizeChange: (current, pageSize) => {
        this.setState({
          pageNo:1,
          pageSize:pageSize,
        });
        const params={
          pageNo:1,
          pageSize:pageSize,
          // roomType:2,
          // tpId:tpId//项目id
        }
        this.props.dispatch({
          type:"bidev/fetchJuryList",
          payload:{...params}
        })
      }
    }
    const columns=[
      { title: '序号', dataIndex: 'id', width: 50,
        render:(text, record, index)=>{
          return (index+1)
      }},
      { title: '项目名称', dataIndex: 'projectName'},
      { title: `${sectionName}名称`, dataIndex: 'sectionName'},
      { title: `${sectionName}编号`, dataIndex: 'sectionNum'},
      { title: `${sectionType}次数`, dataIndex: 'roomSort', width: 100,
        render:(text, record, index)=>{
        return <>第{text}次{sectionType}</>
      }},
      { title: `${sectionType}开始时间`, dataIndex: 'openTime'},
      { title: '操作', dataIndex: 'operation', width: 120,
        render:(text, record, index)=>{
        return <><Button type="text" onClick={()=>{this.onRateShow(record)}}>进入{sectionType}室</Button></>
    }}
    ]
    
    const bidscolumns=[
      { title: '序号', dataIndex: 'id', width: '10%',
        align:"center",
        render:(text, record, index)=>{
          return (index+1)
      }},
      { title: `${roleName}名称`, dataIndex: 'bidUserName',align:"center", width: '90%'}
    ]

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 13 }
    };
    const renderBookt=()=>{
      return (
              <Card bodyStyle={{padding: "13px 24px 24px"}}>
              <div className="first-title">专家信息</div>
              <Descriptions column={3}>
              <DescriptionsItem label="姓名" style={{padding:'1px 1px 0px'}}>{JuryInfo!="" && JuryInfo.name}</DescriptionsItem>
              <DescriptionsItem label="手机号" style={{padding:'1px 1px 0px'}}>{JuryInfo!="" && JuryInfo.mobile}</DescriptionsItem>
              <DescriptionsItem label="身份证号" style={{padding:'1px 1px 0px'}}>{JuryInfo!="" && JuryInfo.certificate}</DescriptionsItem>
              </Descriptions>
              {/* <div className="zul" style={{marginTop:"10px",marginBottom:"20px"}}>投标人信息</div> */}
              <div className="first-title">{roleName}信息</div>
              <Table
                loading={bidslistLoading}
                columns={bidscolumns}
                dataSource={bidslist!="" && bidslist}
                pagination={true}
                size="small"
                // className="table"
              />
              <div style={{display: 'flex',justifyContent:'center'}}><span style={{fontSize:"14px",fontWeight:"bold",marginTop: 16}}><Checkbox onChange={this.onChange} checked={checked}></Checkbox><span style={{marginLeft:"8px"}}>我已读并同意了此承诺书</span><span style={{color:"#b30000",fontSize:"14px",cursor:"pointer"}} onClick={()=>{this.windowopen()}}>《承诺书协议》</span></span></div>
              <div style={{display: 'flex',justifyContent:'center'}}><span style={{marginTop:"16px"}}><Button type="primary" onClick={()=>{this.handleRedirect(1)}}>确定</Button><Button style={{marginLeft: 8}} type="primary" onClick={()=>{this.handleRedirect(2)}}>申请回避</Button></span></div>
              </Card>
              )
    }
    return <>
      {/* <Button onClick={() => {
        sessionStorage.setItem('projectData',JSON.stringify(data))
        sessionStorage.setItem('roomId',data.id)
        this.setState({visible: true})
      }}>进入评审室</Button> */}
    {bookflag?
    <Card title={`${sectionType}室`} bodyStyle={{ padding: '24px 24px 0px' }} style={{ borderRadius: 6 }}>
    <Table
      loading={JurylistLoading}
      size='small'
      columns={columns}
      dataSource={JuryList!="" && JuryList.records}
      pagination={pagination}
    /></Card>:
    renderBookt()}
    <div className="zry">
      <Modal
        destroyOnClose
        cancelText="取消"
        okText="确定"
        onCancel={()=>{this.onRateOut()}}
        onOk={()=>{this.onRe2ndPageOut()}}
        // title="信息确认"
        visible={ratevisible}
        width={500}
      >
        <Form
          ref={formRef}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 13 }}
          preserve={false}
      >
      <h3 className="first-title">专家信息确认</h3>
      <FormItem
                label="姓名"
                initialValue={JuryInfo!="" && JuryInfo.name}
                name="name"
                rules={[
                  {
                    required: !this.state.display,
                    message: '请输入姓名',
                  },
                ]}
      ><Input placeholder="请输入姓名" readOnly={this.state.display} bordered={!this.state.display}/></FormItem>
      <FormItem
              label="电话"
              initialValue={JuryInfo!="" && JuryInfo.mobile}
              name="mobile"
              rules={[
                {
                  required: !this.state.display,
                  message: '请输入电话',
                },
                {
                  pattern: /(^[1][3,4,5,6,7,8,9][0-9]{9}$)|(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)/,
                  message: '输入的电话号码不正确',
                },
              ]}
      ><Input placeholder="请输入电话" readOnly={this.state.display} bordered={!this.state.display}/></FormItem>
      <FormItem
              label="身份证号"
              initialValue={JuryInfo!="" && JuryInfo.certificate}
              name="certificate"
      ><Input placeholder="请输入身份证号" readOnly bordered={false}/></FormItem>
      <h3 className="first-title">{sectionType}室校验码</h3>
        <FormItem label="校验码" {...formItemLayout} name="verificationCode"
        rules={[
          {
            required: true,
            message: '请输入校验码',
          },
          {
            pattern: /^[0-9]\d*$/,
            message: '校验码必须是数字',
          },
        ]}>
        <Input placeholder="请输入校验码" maxLength={6}/></FormItem>
      </Form>
      </Modal>
      </div>
      {/* <ExpertEnter recordData={data} modalVisible={this.state.visible} onCancel={() => this.setState({visible: false})}/> */}
      <CommitmentModal modalVisible={this.state.commitmentVisible} onCancel={() => this.setState({commitmentVisible: false})}/>
    </>
  }
}
export default Jury;