9.9 修改预约管理页面

This commit is contained in:
jl-zhoujl2
2022-09-09 16:02:19 +08:00
parent 22647199ea
commit 92a759bc48
5 changed files with 81 additions and 91 deletions

View File

@ -194,3 +194,35 @@
display: none;
}
}
.screen-reserve-table {
.ant-table-small .ant-table-thead>tr>th {
background-color: #fff
}
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>thead>tr>th,
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table>thead>tr>th,
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>thead>tr>th,
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>tbody>tr>td,
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table>tbody>tr>td,
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>tbody>tr>td,
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>tfoot>tr>th,
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table>tfoot>tr>th,
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>tfoot>tr>th,
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>tfoot>tr>td,
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table>tfoot>tr>td,
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>tfoot>tr>td {
border-right: 1px solid #eaeaea;
}
.ant-table-thead>tr>th,
.ant-table-tbody>tr>td {
border-bottom: 1px solid #eaeaea;
}
}
.screen-reserve-collapse {
.ant-collapse-content>.ant-collapse-content-box {
padding: 16px 0;
}
}

View File

@ -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, useEffect, 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: '#f59a23', color: '#0000ff', cursor: 'pointer', width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
const green_bg = { background: '#4b7902' };
const orange_bg = { background: '#ffbc83', 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,7 +83,8 @@ const ScreenTable = (props: { record: any, onCellClick: (id: any) => void, refre
return (
<div>
{tableData.length > 0 && (
<Space style={{ margin: '10px 0' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 16 }}>
<Space>
<Button key="last-week" size='small' type="primary" onClick={() => weekChange("0")}>
</Button>
@ -135,6 +92,11 @@ const ScreenTable = (props: { record: any, onCellClick: (id: any) => void, refre
</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 24px 16px' }}>
<Card title="评标室预约情况" bodyStyle={{ padding: '16px 0px', height: window.innerHeight - 120, overflowY: 'auto' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 36px 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) }} />}
</Card >
);

View File

@ -173,7 +173,7 @@ const SitePersonModal: React.FC<SitePersonModalProps> = (props) => {
message: '当前项不可为空',
},
]}>
<ExpertPhotoUpload maxSize={60} />
<ExpertPhotoUpload maxSize={200} />
</Form.Item>
</Form>
</Spin>

View File

@ -1409,7 +1409,7 @@ const JudgingPanel: React.FC<{}> = () => {
name="faceId"
style={{ display: 'inline-block', width: '60%' }}
>
<ExpertPhotoUpload maxSize={60} />
<ExpertPhotoUpload maxSize={200} />
</Form.Item>
<Form.Item
style={{ display: 'inline-block', width: '40%', position: "relative", right: '24%' }}

View File

@ -1289,7 +1289,7 @@ const JudgingPanel: React.FC<{}> = () => {
name="faceId"
style={{ display: 'inline-block', width: '60%' }}
>
<ExpertPhotoUpload maxSize={60} />
<ExpertPhotoUpload maxSize={200} />
</Form.Item>
<Form.Item
style={{ display: 'inline-block', width: '40%', position: "relative", right: '24%' }}