@ -1,17 +1,19 @@
import ProList from '@ant-design/pro-list' ;
import type { ActionType , ProColumns } from '@ant-design/pro-table' ;
import ProTable from '@ant-design/pro-table' ;
import { Button , Card , Space , Tag } from 'antd' ;
import React , { ReactText , , useState } from 'react' ;
import { Button , Card , Collapse , Space , Tag } from 'antd' ;
import React , { useEffect , useState } from 'react' ;
import { useRef } from 'react' ;
import MeetingReservation from '@/components/ElecBidEvaluation/MeetingReservation' ;
import { getRecordData , getSiteList } from './service' ;
import { isEmpty } from '@/utils/CommonUtils' ;
const orange_bg = { background : '#f59a2 3' , color : '#0000ff ' , cursor : 'pointer' , width : '100%' , overflow : 'hidden' , textOverflow : 'ellipsis' , whiteSpace : 'nowrap' } ;
const green _bg= { background : '#4b7902 ' } ;
const orange_bg = { background : '#ffbc8 3' , color : '#333333 ' , cursor : 'pointer' , width : '100%' , overflow : 'hidden' , textOverflow : 'ellipsis' , whiteSpace : 'nowrap' } ;
const light_orange _bg= { background : '#faf7e5 ' } ;
const align_middle = { display : 'flex' , alignItems : 'center' } ;
const tag_size = { height : '20px' , width : '20px' } ;
const panel_title = { fontWeight : 500 } ;
const panel_sub_title = { . . . panel_title , color : '#999999' } ;
const { Panel } = Collapse ;
const ScreenTable = ( props : { record : any , onCellClick : ( id : any ) = > void , refresh : number } ) = > {
const { record , onCellClick , refresh } = props ;
@ -27,55 +29,9 @@ const ScreenTable = (props: { record: any, onCellClick: (id: any) => void, refre
const columnsSplice = ( weeksData : any [ ] ) = > {
const columns : ProColumns < any > [ ] = [
{
title : '评标室名称 ' ,
dataIndex : 'name' ,
align : 'center' ,
render : ( _ , record , index ) = > {
return {
children : _ ,
props : {
rowSpan : index % 24 == 0 ? 24 : 0 ,
}
}
}
} ,
{
title : '可容纳人数（人）' ,
dataIndex : 'rs' ,
align : 'center' ,
render : ( _ , record , index ) = > {
return {
children : _ ,
props : {
rowSpan : index % 24 == 0 ? 24 : 0 ,
}
}
}
} ,
{
title : '场次' ,
align : 'center' ,
colSpan : 2 ,
render : ( _ , record , index ) = > {
return {
children : "07:00 ~ 18:00" ,
props : {
rowSpan : index % 24 == 0 ? 24 : 0 ,
}
}
}
} ,
{
title : '时段场次 ' ,
dataIndex : "time" ,
align : 'right ' ,
width : '100px' ,
colSpan : 0 ,
} ,
{
title : '预约时间' ,
dataIndex : "info_time" ,
valueType : 'date' ,
hideInTable : true ,
align : 'center ' ,
} ,
] ;
for ( const ite of weeksData ) {
@ -86,7 +42,7 @@ const ScreenTable = (props: { record: any, onCellClick: (id: any) => void, refre
ellipsis : true ,
onCell : ( record ) = > {
return {
style : record [ ite . id ] ? . iskssj ? orange_bg : green _bg,
style : record [ ite . id ] ? . iskssj ? orange_bg : light_orange _bg,
onClick : record [ ite . id ] ? . iskssj ? ( ) = > onCellClick ( record [ ite . id ] ? . id ) : void 0 ,
}
} ,
@ -127,14 +83,20 @@ const ScreenTable = (props: { record: any, onCellClick: (id: any) => void, refre
return (
< div >
{ tableData . length > 0 && (
< Space style = { { margin : '10px 0' } } >
< Button key = "last-week" size = 'small' type = "primary" onClick = { ( ) = > weekChange ( "0" ) } >
上 一 周
< / Button >
< Button key = "after-week" size = 'small' type = "primary" onClick = { ( ) = > weekChange ( "1" ) } >
下 一 周
< / Button >
< / Space >
< div style = { { display : 'flex' , justifyContent : 'space-between' , alignItems : 'center' , paddingBottom : 16 } } >
< Space >
< Button key = "last-week" size = 'small' type = "primary" onClick = { ( ) = > weekChange ( "0" ) } >
上 一 周
< / Button >
< Button key = "after-week" size = 'small' type = "primary" onClick = { ( ) = > weekChange ( "1" ) } >
下 一 周
< / Button >
< / Space >
< Space size = "middle" >
< div style = { align_middle } > < Tag color = "#faf7e5" style = { tag_size } > < / Tag > 可 预 约 电 子 评 标 室 < / div >
< div style = { align_middle } > < Tag color = "#ffbc83" style = { tag_size } > < / Tag > 已 预 约 电 子 评 标 室 < / div >
< / Space >
< / div >
) }
< ProTable < any >
columns = { tableColumns }
@ -142,6 +104,7 @@ const ScreenTable = (props: { record: any, onCellClick: (id: any) => void, refre
bordered
size = 'small'
dataSource = { tableData }
className = "screen-reserve-table"
rowKey = "time"
search = { false }
pagination = { false }
@ -158,7 +121,7 @@ export default () => {
//评标场所列表数据
const [ siteListData , setSiteListData ] = useState < any [ ] > ( [ ] ) ;
//评标场所列表展开
const [ expandedRowKeys , setExpandedRowKeys ] = useState < readonly ReactText [ ] > ( [ ] ) ;
const [ expandedRowKeys , setExpandedRowKeys ] = useState < any [ ] > ( [ ] ) ;
//预约状态
const [ meetStatus , setMeetStatus ] = useState < string > ( "2" ) ;
//预约id
@ -200,8 +163,8 @@ export default () => {
} , [ ] )
return (
< Card title = "评标室预约情况" bodyStyle = { { padding : '16px 0px 24px ' , height : window.innerHeight - 120 , overflowY : 'auto' } } >
< div style = { { display : 'flex' , justifyContent : 'space-between' , alignItems : 'center' , padding : '0 24 px 16px' } } >
< Card title = "评标室预约情况" bodyStyle = { { padding : '16px 0px' , height : window.innerHeight - 120 , overflowY : 'auto' } } >
< div style = { { display : 'flex' , justifyContent : 'space-between' , alignItems : 'center' , padding : '0 36 px 16px' } } >
< Space >
< Button key = "yuyue" type = "primary" onClick = { ( ) = > createMeet ( ) } >
预 约
@ -210,30 +173,25 @@ export default () => {
查 看 预 约 详 情
< / Button >
< / Space >
< Space size = "middle" >
< div style = { align_middle } > < Tag color = "#f59a23" style = { tag_size } > < / Tag > 已 预 约 < / div >
< div style = { align_middle } > < Tag color = "#4b7902" style = { tag_size } > < / Tag > 未 预 约 < / div >
< / Space >
< / div >
< ProList < any >
rowKey = "id"
expandable = { {
expandedRowKeys , onExpandedRowsChange : setExpandedRowKeys ,
} }
dataSource = { siteListData }
toolBarRender = { false }
metas = { {
title : {
render : ( _ : any , record : any ) = > < span onClick = { ( ) = > setExpandedRowKeys ( keys = > keys . includes ( record . id ) ? [ ] : [ record . id ] ) } > { record . areaName } < / span > ,
} ,
subTitle : {
render : ( _ : any , record : any ) = > ` 可容纳人数： ${ isEmpty ( record . areaNumber ) ? '' : record . areaNumber } 人 ` ,
} ,
description : {
render : ( _ : any , record : any ) = > < ScreenTable record = { record } onCellClick = { viewMeet } refresh = { refresh } / > ,
} ,
} }
/ >
< Collapse activeKey = { expandedRowKeys } onChange = { ( value ) = > setExpandedRowKeys ( value as any [ ] ) } className = "screen-reserve-collapse" style = { { margin : '0 36px' } } >
{ siteListData . map ( item = > (
< Panel
header = { < >
< span style = { panel_title } > { item . areaName } < / span >
< span style = { panel_sub_title } > （ 可 容 纳 { isEmpty ( item . areaNumber ) ? '' : item . areaNumber } 人 ） < / span >
< / > }
extra = {
< >
< span style = { panel_title } > 时 间 ： 07 :00 ~ 18 :00 < / span >
< / >
}
key = { item . id }
>
< ScreenTable record = { item } onCellClick = { viewMeet } refresh = { refresh } / >
< / Panel >
) ) }
< / Collapse >
{ modalVisible && < MeetingReservation modalVisible = { modalVisible } onCancel = { ( ) = > { setModalVisible ( false ) ; getSiteListData ( "1" ) } } roomList = { siteListData } status = { meetStatus } meetId = { meetId } onSubmit = { ( ) = > { setModalVisible ( false ) ; setRefresh ( refresh = > refresh + 1 ) } } / > }
< / C a r d >
) ;
jl-zhoujl2