liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

10.25 增加预约人员会议室预约页面，原有预约管理增加操作项控制

Browse Source
This commit is contained in:
jl-zhoujl2
2022-10-25 15:11:18 +08:00
parent 88620104ae
commit bbdf37f463
5 changed files with 353 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
config/router_elecEvaluation.ts
View File

@ -70,6 +70,10 @@ export const elecBidEvaluation = [
path: '/ElecEvaluation/ElecEvalReserve',
component: './ElecEvaluation/ElecEvalReserve',
},
{//预约人员-我的预约
path: '/ElecEvaluation/MyReserve',
component: './ElecEvaluation/ElecEvalReserve/MyReserve',
},
{//评标场所及区域管理
path: '/ElecEvaluation/PlaceAreasManage',
component: './ElecEvaluation/PlaceAreasManage',

25
src/components/ElecBidEvaluation/MeetingReservation.tsx
View File

@ -5,6 +5,7 @@ import { cancelMeeting, getMeetingData, saveAppointmentEdit, saveMeeting } from
import { isNotEmpty } from '@/utils/CommonUtils';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { dateTimeFormatter, echoDateTimeFormatter } from '@/utils/DateUtils';
import { getSessionRoleData, getSessionUserData } from '@/utils/session';
interface MeetingReservationProps {
modalVisible: boolean;
@ -12,7 +13,8 @@ interface MeetingReservationProps {
onSubmit?: () => void;
roomList?: any[];//评标室列表 带问号的参数可不传
status: string;//状态 0-新建 1-编辑 2-查看
meetId?: string;//预约id
// meetId?: string;//预约id
meetData: any;//预约数据
}
const layout = {
labelCol: { span: 7 },
@ -52,13 +54,18 @@ export const otherDisabledDateTime = (current: any, disabledMap: any, type: stri
};
//时间选择框日期格式化
export const dateFormat: DatePickerProps['format'] = value => value?.startOf('hour').format('YYYY-MM-DD HH:mm:ss');
//获取登录账号
const userId = getSessionUserData()?.userId;
//获取角色
const roleCode = getSessionRoleData()?.roleCode;
/**
* 评标室预约管理-会议室预约弹窗
* @param props
* @returns
*/
const MeetingReservation: React.FC<MeetingReservationProps> = (props) => {
const { modalVisible, onCancel, onSubmit, roomList, status, meetId } = props;
const { modalVisible, onCancel, onSubmit, roomList, status, meetData } = props;
const { id = null, reserveBy = "" } = { ...meetData };
const [form] = Form.useForm();
const { Option } = Select;
const { confirm } = Modal;
@ -75,6 +82,8 @@ const MeetingReservation: React.FC<MeetingReservationProps> = (props) => {
const [isEditMeet, setIsEditMeet] = useState<boolean>(false);
//存一份预约数据
const [meetingData, setMeetingData] = useState<any>();
//判断预约人员是否本人 true-是预约人员不是本人（不可编辑） false-其余情况（可以编辑）
const isMeetSelf: boolean = (roleCode == "ebtp-appointment") && (reserveBy != userId);
const onFinish = (values: any) => {
if (values.reserveStartDate < moment().format(dateTimeFormatter)) {
@ -109,7 +118,7 @@ const MeetingReservation: React.FC<MeetingReservationProps> = (props) => {
//获取预约信息
const getMeetData = () => {
setSkeleing(true);
getMeetingData(meetId).then(res => {
getMeetingData(id).then(res => {
if (res?.code == 200) {
setSkeleing(false);
const data = res?.data;
@ -134,7 +143,7 @@ const MeetingReservation: React.FC<MeetingReservationProps> = (props) => {
okText: '确认',
content: '',
async onOk() {
await cancelMeeting(meetId).then(res => {
await cancelMeeting(id).then(res => {
if (res?.code == 200) {
message.success("取消预约成功");
onSubmit && onSubmit();
@ -155,10 +164,10 @@ const MeetingReservation: React.FC<MeetingReservationProps> = (props) => {
setModalStatus("1");
}
useEffect(() => {
if (isNotEmpty(meetId)) {
if (isNotEmpty(id)) {
getMeetData();
}
}, [meetId])
}, [id])
return (
<Modal
@ -175,10 +184,10 @@ const MeetingReservation: React.FC<MeetingReservationProps> = (props) => {
<Button key="save" type="primary" onClick={() => form.submit()} hidden={meetType == undefined || modalStatus == "2"}>
保存
</Button>,
<Button key="edit" onClick={() => editMeeting()} hidden={meetType == undefined || modalStatus == "1" || modalStatus == "0" || isEditMeet}>
<Button key="edit" onClick={() => editMeeting()} hidden={meetType == undefined || modalStatus == "1" || modalStatus == "0" || isEditMeet || isMeetSelf}>
修改预约
</Button>,
<Button type="primary" key="cancel" hidden={modalStatus == "0"} onClick={() => cancelMeet()}>
<Button type="primary" key="cancel" hidden={modalStatus == "0" || isEditMeet || isMeetSelf} onClick={() => cancelMeet()}>
取消预约
</Button>,
]}

32
src/pages/ElecEvaluation/AppointmentManage/index.tsx
View File

@ -6,6 +6,7 @@ import { useRef } from 'react';
import MeetingReservation from '@/components/ElecBidEvaluation/MeetingReservation';
import { getRecordData, getSiteList } from './service';
import { isEmpty } from '@/utils/CommonUtils';
import { getSessionRoleData } from '@/utils/session';
const orange_bg = { background: '#ffbc83', color: '#333333', cursor: 'pointer', width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
const light_orange_bg = { background: '#faf7e5' };
@ -14,6 +15,7 @@ const tag_size = { height: '20px', width: '20px' };
const panel_title = { fontWeight: 500 };
const panel_sub_title = { ...panel_title, color: '#999999' };
const { Panel } = Collapse;
const roleCode = getSessionRoleData()?.roleCode;//获取角色
const ScreenTable = (props: { record: any, onCellClick: (id: any) => void, refresh: number }) => {
const { record, onCellClick, refresh } = props;
@ -43,7 +45,7 @@ const ScreenTable = (props: { record: any, onCellClick: (id: any) => void, refre
onCell: (record) => {
return {
style: record[ite.id]?.iskssj ? orange_bg : light_orange_bg,
onClick: record[ite.id]?.iskssj ? () => onCellClick(record[ite.id]?.id) : void 0,
onClick: record[ite.id]?.iskssj ? () => onCellClick(record[ite.id]) : void 0,
}
},
render: (_: any, record: any) => {
@ -93,8 +95,8 @@ 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>
<div style={align_middle}><Tag color="#faf7e5" style={tag_size}></Tag>可预约{roleCode == "ebtp-appointment" ? "会议室" : "电子评标室"}</div>
<div style={align_middle}><Tag color="#ffbc83" style={tag_size}></Tag>已预约{roleCode == "ebtp-appointment" ? "会议室" : "电子评标室"}</div>
</Space>
</div>
)}
@ -124,8 +126,8 @@ export default () => {
const [expandedRowKeys, setExpandedRowKeys] = useState<any[]>([]);
//预约状态
const [meetStatus, setMeetStatus] = useState<string>("2");
//预约id
const [meetId, setMeetId] = useState<string>("");
//单条预约数据
const [meetData, setMeetData] = useState<any>({});
//刷新参数
const [refresh, setRefresh] = useState<number>(0);
@ -144,34 +146,44 @@ export default () => {
//新建预约
const createMeet = () => {
setMeetStatus("0");
setMeetId("");
setMeetData({});
setModalVisible(true);
}
//查看预约
const viewMeet = (id: any) => {
const viewMeet = (record: any) => {
setMeetStatus("2");
setMeetId(id);
setMeetData(record);
setModalVisible(true);
}
//查看预约详情跳转
const viewMeetContent = () => {
window.open("/ElecEvaluation/ElecEvalReserve");
}
//预约人员-我的预约跳转
const MyReserveContent = () => {
window.open("/ElecEvaluation/MyReserve");
}
useEffect(() => {
getSiteListData("0");
}, [])
return (
<Card title="评标室预约情况" bodyStyle={{ padding: '16px 0px', height: window.innerHeight - 120, overflowY: 'auto' }}>
<Card title={roleCode == "ebtp-appointment" ? "会议室预约情况" : "评标室预约情况"} 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()}>
预约
</Button>
{roleCode == "ebtp-appointment" ? (//预约人员
<Button key="myyuyue" onClick={() => MyReserveContent()}>
我的预约
</Button>
) : (
<Button key="yuyueconfirm" onClick={() => viewMeetContent()}>
查看预约详情
</Button>
)}
</Space>
</div>
<Collapse activeKey={expandedRowKeys} onChange={(value) => setExpandedRowKeys(value as any[])} className="screen-reserve-collapse" style={{ margin: '0 36px' }}>
@ -192,7 +204,7 @@ export default () => {
</Panel>
))}
</Collapse>
{modalVisible && <MeetingReservation modalVisible={modalVisible} onCancel={() => { setModalVisible(false); getSiteListData("1") }} roomList={siteListData} status={meetStatus} meetId={meetId} onSubmit={() => { setModalVisible(false); setRefresh(refresh => refresh + 1) }} />}
{modalVisible && <MeetingReservation modalVisible={modalVisible} onCancel={() => { setModalVisible(false); getSiteListData("1") }} roomList={siteListData} status={meetStatus} meetData={meetData} onSubmit={() => { setModalVisible(false); setRefresh(refresh => refresh + 1) }} />}
</Card >
);
};

255
src/pages/ElecEvaluation/ElecEvalReserve/MyReserve.tsx Normal file
View File

@ -0,0 +1,255 @@
import React, { useState, useRef, useEffect } from 'react';
import { Button, message, Card } from 'antd';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { reserveList, roomList, cancelReserve } from './service';
import '@/assets/ld_style.less';
import { getURLInformation, isNotEmpty } from '@/utils/CommonUtils';
import MeetingReservation from '@/components/ElecBidEvaluation/MeetingReservation';
import moment from 'moment';
import { dateTimeFormatter } from '@/utils/DateUtils';
const MyReserve: React.FC<{}> = () => {
const meetingRelationRef = useRef<ActionType>(); //操作数据后刷新列表
const [areaNameList, setAreaNameList] = useState<any>();
const [areaList, setAreaList] = useState<any>();
//单条预约数据
const [meetData, setMeetData] = useState<any>();
//预约弹窗
const [modalVisible, setModalVisible] = useState<boolean>(false);
//预约状态
const [meetStatus, setMeetStatus] = useState<string>("2");
/*拉取数据*/
useEffect(() => {
initAreaNameList();
}, []);
const initAreaNameList = async () => {
await roomList().then((res) => {
if (res.success == true) {
let areaNameList = {};
setAreaList(res.data);
//将拿到的返回值遍历
res.data.map((item: { id: string | number; areaName: any }) => {
//使用接口返回值的id做为 代替原本的0，1
areaNameList[item.id] = {
//使用接口返回值中的overdueValue属性作为原本的text:后面的值
text: item.areaName,
};
});
setAreaNameList(areaNameList);
}
});
};
//新建预约
const createMeet = () => {
setMeetStatus("0");
setMeetData(null);
setModalVisible(true);
}
//查看预约
const viewMeet = (record: any) => {
const recordData = { ...record };
recordData["reserveBy"] = record.createBy;
setMeetStatus("2");
setMeetData(recordData);
setModalVisible(true);
};
/**
* 取消预约
* @param record
*/
const cancel = async (record: any) => {
cancelReserve(record.id).then((res) => {
if (res.code == 200 && res.data) {
message.success('预约取消成功');
}
});
};
const current = getURLInformation('current');
const otherColumns: any[] = [
//会议室预约
{
title: '序号',
dataIndex: 'index',
valueType: 'index',
search: false,
width: '3%',
},
{
title: '评标室',
dataIndex: 'areaId',
valueEnum: areaNameList,
search: true,
width: '10%',
},
{
title: '会议名称',
dataIndex: 'meetingName',
search: true,
width: '10%',
},
{
title: '会议人数',
dataIndex: 'numberInMeeting',
width: '5%',
search: false,
},
{
title: '预约开始时间',
dataIndex: 'reserveStartDate',
valueType: 'dateTime',
search: false,
width: '10%',
},
{
title: '预约结束时间',
dataIndex: 'reserveEndDate',
valueType: 'dateTime',
search: false,
width: '10%',
},
{
title: '预约人',
dataIndex: 'reserveBy',
width: '5%',
search: false,
},
{
title: '预约人联系方式',
dataIndex: 'reserveContactNumber',
width: '5%',
search: false,
},
{
title: '预约时间',
key: 'dateRange',
dataIndex: 'dateRange',
valueType: 'dateRange',
hideInTable: true,
search: {
transform: (value: any) => ({ reserveStartDate: moment(value[0]).startOf('day').format(dateTimeFormatter), reserveEndDate: moment(value[1]).endOf('day').format(dateTimeFormatter) }),
},
},
{
title: '操作',
width: '7%',
search: false,
render: (text: any, record: any) => {
return (
<>
<Button type="text" onClick={() => viewMeet(record)} danger>
查看
</Button>
<Button
hidden={record.reserveStartDate <= moment().format(dateTimeFormatter)}
type="text"
onClick={() => cancel(record)}
danger
>
取消预约
</Button>
</>
);
},
},
];
return (
<>
<Card title="我的预约">
{areaNameList && (
<ProTable
actionRef={meetingRelationRef}
className="proSearch"
columns={otherColumns}
params={{ reserveType: 'meeting', managerStatus: false }}
size="small"
request={async (params) =>
await reserveList(params).then((res) => {
if (res.code == 200) {
let data = res.data;
return Promise.resolve({
data: data.records,
success: res.success,
total: res.data.total,
current: res.data.current,
});
}
return Promise.resolve({
data: [],
success: false,
total: 0,
current: 1,
});
})
}
search={{
filterType: 'query',
optionRender: (searchConfig: any, { form }) => {
return [
<Button
key="resetText"
onClick={() => {
// form?.setFieldsValue({
// current: 1,
// });
form?.resetFields();
meetingRelationRef.current?.reset?.();
}}
>
{searchConfig?.resetText}
</Button>,
<Button
key="searchText"
type="primary"
onClick={() => {
form?.submit();
}}
>
{searchConfig?.searchText}
</Button>,
<Button
key="addText"
type="primary"
onClick={() => createMeet()}
>
新增
</Button>,
];
},
labelWidth: 'auto',
span: 6,
}}
pagination={{
defaultCurrent: isNotEmpty(current) ? Number(current) : 1,
defaultPageSize: 10,
showSizeChanger: false,
}} //默认显示条数
toolBarRender={false}
/>
)}
{modalVisible && (
<MeetingReservation
modalVisible={modalVisible}
onCancel={() => {
setModalVisible(false);
}}
roomList={areaList}
status={meetStatus}
meetData={meetData}
onSubmit={() => {
meetingRelationRef.current?.reload?.();
setModalVisible(false);
}}
/>
)}
</Card>
</>
);
};
export default MyReserve;

78
src/pages/ElecEvaluation/ElecEvalReserve/index.tsx
View File

@ -24,8 +24,8 @@ const Index: React.FC<{}> = () => {
const [areaNameList, setAreaNameList] = useState<any>();
const [areaList, setAreaList] = useState<any>();
//预约id
const [meetId, setMeetId] = useState<string>('');
//单条预约数据
const [meetData, setMeetData] = useState<any>({});
//预约弹窗
const [modalVisible, setModalVisible] = useState<boolean>(false);
//刷新参数
@ -64,13 +64,15 @@ const Index: React.FC<{}> = () => {
//新建预约
const createMeet = () => {
setMeetStatus("0");
setMeetId("");
setMeetData({});
setModalVisible(true);
}
//查看预约
const viewMeet = (id: any) => {
const viewMeet = (record: any) => {
const recordData = { ...record };
recordData["reserveBy"] = record.createBy;
setMeetStatus("2");
setMeetId(id);
setMeetData(recordData);
setModalVisible(true);
};
/**
@ -84,7 +86,7 @@ const Index: React.FC<{}> = () => {
}
});
};
const current = getURLInformation('current');
// const current = getURLInformation('current');
const columns: any = [
// 评标室
@ -105,14 +107,14 @@ const Index: React.FC<{}> = () => {
{
title: '预约开始时间',
dataIndex: 'reserveStartDate',
search: true,
search: false,
valueType: 'dateTime',
width: '10%',
},
{
title: '预约结束时间',
dataIndex: 'reserveEndDate',
search: true,
search: false,
valueType: 'dateTime',
width: '10%',
},
@ -148,6 +150,16 @@ const Index: React.FC<{}> = () => {
valueEnum: statusEnum,
search: true,
},
{
title: '预约时间',
key: 'dateRange',
dataIndex: 'dateRange',
valueType: 'dateRange',
hideInTable: true,
search: {
transform: (value: any) => ({ reserveStartDate: moment(value[0]).startOf('day').format(dateTimeFormatter), reserveEndDate: moment(value[1]).endOf('day').format(dateTimeFormatter) }),
},
},
{
title: '操作',
width: '7%',
@ -155,11 +167,11 @@ const Index: React.FC<{}> = () => {
render: (text: any, record: any) => {
return (
<>
<Button type="text" onClick={() => viewMeet(record.id)} danger>
<Button type="text" onClick={() => viewMeet(record)} danger>
查看
</Button>
<Button
hidden={record.status == '0' && record.reserveEndDate <= moment().format(dateTimeFormatter)}
hidden={record.status != '0'}
type="text"
onClick={() => cancel(record)}
danger
@ -204,14 +216,14 @@ const Index: React.FC<{}> = () => {
title: '预约开始时间',
dataIndex: 'reserveStartDate',
valueType: 'dateTime',
search: true,
search: false,
width: '10%',
},
{
title: '预约结束时间',
dataIndex: 'reserveEndDate',
valueType: 'dateTime',
search: true,
search: false,
width: '10%',
},
{
@ -226,6 +238,16 @@ const Index: React.FC<{}> = () => {
width: '5%',
search: false,
},
{
title: '预约时间',
key: 'dateRange',
dataIndex: 'dateRange',
valueType: 'dateRange',
hideInTable: true,
search: {
transform: (value: any) => ({ reserveStartDate: moment(value[0]).startOf('day').format(dateTimeFormatter), reserveEndDate: moment(value[1]).endOf('day').format(dateTimeFormatter) }),
},
},
{
title: '操作',
width: '7%',
@ -233,11 +255,11 @@ const Index: React.FC<{}> = () => {
render: (text: any, record: any) => {
return (
<>
<Button type="text" onClick={() => viewMeet(record.id)} danger>
<Button type="text" onClick={() => viewMeet(record)} danger>
查看
</Button>
<Button
hidden={record.reserveEndDate <= moment().format(dateTimeFormatter)}
hidden={record.reserveStartDate <= moment().format(dateTimeFormatter)}
type="text"
onClick={() => cancel(record)}
danger
@ -288,10 +310,11 @@ const Index: React.FC<{}> = () => {
<Button
key="resetText"
onClick={() => {
form?.setFieldsValue({
current: 1,
});
form?.submit();
// form?.setFieldsValue({
// current: 1,
// });
form?.resetFields();
checkRelationRef.current?.reset?.();
}}
>
{searchConfig?.resetText}
@ -308,10 +331,11 @@ const Index: React.FC<{}> = () => {
];
},
labelWidth: 'auto',
span: 4,
span: 6,
}}
pagination={{
defaultCurrent: isNotEmpty(current) ? Number(current) : 1,
// defaultCurrent: isNotEmpty(current) ? Number(current) : 1,
defaultCurrent: 1,
defaultPageSize: 10,
showSizeChanger: false,
}} //默认显示条数
@ -353,10 +377,8 @@ const Index: React.FC<{}> = () => {
<Button
key="resetText"
onClick={() => {
form?.setFieldsValue({
current: 1,
});
form?.submit();
form?.resetFields();
meetingRelationRef.current?.reset?.();
}}
>
{searchConfig?.resetText}
@ -380,10 +402,11 @@ const Index: React.FC<{}> = () => {
];
},
labelWidth: 'auto',
span: 4,
span: 6,
}}
pagination={{
defaultCurrent: isNotEmpty(current) ? Number(current) : 1,
// defaultCurrent: isNotEmpty(current) ? Number(current) : 1,
defaultCurrent: 1,
defaultPageSize: 10,
showSizeChanger: false,
}} //默认显示条数
@ -400,9 +423,10 @@ const Index: React.FC<{}> = () => {
}}
roomList={areaList}
status={meetStatus}
meetId={meetId}
meetData={meetData}
onSubmit={() => {
meetingRelationRef.current?.reload?.();
checkRelationRef.current?.reload?.();
setModalVisible(false);
setRefresh((refresh) => refresh + 1);
}}