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

4.22 公共服务平台

Browse Source
This commit is contained in:
jl-zhoujl2
2022-04-22 17:04:15 +08:00
parent 0e8de93f2f
commit 77e8839ebd
4 changed files with 369 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
config/ZhaoBiao/router_menucBid.config.ts
View File

@ -24,11 +24,6 @@ export default [//招标 投标邀请
path: '/ProjectLayout/NoticeFileStruct/List',
component: './Bid/NoticeFileStruct/list',
},
//公共服务平台
{
path: '/ProjectLayout/PublicPlatform',
component: './Bid/BiddingAnnouncement/components/PublicPlatform',
},
//应答格式开始
{

4
config/router.config.ts
View File

@ -71,6 +71,10 @@ export default [
},
],
},
{//公共服务平台
path: '/PublicPlatform',
component: './Bid/BiddingAnnouncement/components/PublicPlatform',
},
//==============================================================引入的业务路由
...approvalForm,//审批单

470
src/pages/Bid/BiddingAnnouncement/components/PublicPlatform.tsx
View File

@ -1,191 +1,321 @@
import { scrollToAnchor } from '@/utils/CommonUtils';
import ProCard from '@ant-design/pro-card';
import { Form, Input, InputNumber, Button, Card, Row, Col, Typography, Tooltip, Space, Radio, Affix, List, Tag, Collapse } from 'antd';
import React, { useState } from 'react';
interface PublicPlatformProps {
modalVisible: boolean;
onCancel: () => void;
}
import React, { useEffect, useState } from 'react';
import logo from '@/images/opening/logo.svg';
import styles from './style.less';
import './style.less';
import { Affix, Anchor, BackTop, Button, Checkbox, Col, Collapse, DatePicker, Descriptions, Divider, Form, Input, InputNumber, Layout, message, Modal, PageHeader, Radio, Row, Select, Space, Spin, Tag, Timeline, Tooltip, Typography } from 'antd';
import { btnAuthority } from '@/utils/authority';
import { ArrowUpOutlined, CaretRightOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { isNotEmpty } from '@/utils/CommonUtils';
const layout = {
labelCol: {
span: 6,
},
wrapperCol: {
span: 18,
span: 17,
},
};
const data = [
{
title: '标段一',
description: 'XY92632011202',
},
{
title: '标段二',
description: 'XY92632011202',
},
{
title: '标段三',
description: 'XY92632011202',
},
{
title: '标段四',
description: 'XY92632011202',
},
];
/* eslint-disable no-template-curly-in-string */
const validateMessages = {
required: '${label} is required!',
types: {
email: '${label} is not a valid email!',
number: '${label} is not a valid number!',
},
number: {
range: '${label} must be between ${min} and ${max}',
},
required: '请填写当前项内容',
};
/* eslint-enable no-template-curly-in-string */
const PublicPlatform: React.FC<PublicPlatformProps> = (props) => {
// const { modalVisible, onCancel } = props;
const { Text } = Typography;
const { Panel } = Collapse;
const { TextArea } = Input;
const defaultData = {
data: {
"project": {
"id": "",
"projectName": "",
"projectScale": "",
"tenderContent": "",
"tenderCode": "",
"readonly": false
},
"sections": [
{
"id": "",
"projectId": "",
"bidSectBizNum": "",
"bidSectCode": "",
"bidSectName": "",
"suppliers": [
{
"id": "",
"projectId": "",
"sectionId": "",
"assessRoomId": "",
"assessRoomSort": 0,
"companyId": "",
"companyName": "",
"sort": "",
"quality": "",
"evaluationStatus": "",
"winCandidateQualification": "",
"timeLimit": 0,
"pmName": "",
"pmCode": "",
"pmCeritficates": ""
}
]
}
],
"anno": {
"id": "",
"annoNature": 0,
"hasCtpsp": false,
"ctpspFileid": "",
"status": 0
},
"tenderer": {
"id": "",
"code": "",
"name": ""
}
}
}
const PublicPlatform: React.FC<{}> = () => {
//loading
const [loading, setLoading] = useState<boolean>(false);
//右侧浮动层监听Dom
const [container, setContainer] = useState<HTMLDivElement | null>(null);
//初始数据
const [initialData, setInitialData] = useState<any>({});
const onFinish = (values: any) => {
console.log(values);
const { TextArea } = Input;
const { Panel } = Collapse;
const { Text } = Typography;
const { Link } = Anchor;
const [form] = Form.useForm();
//Input
function returnInput(name: string | string[], label: string, readonly: boolean, initialValue: string | number | null, rules?: any[], placeholder?: string, extra?: React.ReactNode, width?: string | number, type?: string, suffix?: React.ReactNode) {
return (
<Form.Item
name={name}
label={label}
rules={rules}
extra={extra}
initialValue={initialValue}
>
<Input
bordered={!readonly}
readOnly={readonly}
placeholder={placeholder}
style={{ width }}
type={type}
suffix={suffix}
/>
</Form.Item>
)
}
//TextArea
function returnArea(name: string | string[], label: string, readonly: boolean, initialValue: string | null, rules?: any[], placeholder?: string, extra?: React.ReactNode) {
return (
<Form.Item
name={name}
label={label}
rules={rules}
extra={extra}
initialValue={initialValue}
>
<TextArea
bordered={!readonly}
readOnly={readonly}
rows={3}
autoSize={readonly}
placeholder={placeholder}
/>
</Form.Item>
)
}
//公示-中标候选人遍历
const suppliersRender = (suppliers: any[] | null, readonly: boolean) => {
if (isNotEmpty(suppliers)) {
const activeKeyList = (length: number) => {
const list: number[] = []
for (let i = 0; i < length; i++) {
list.push(i);
}
return list;
}
return suppliers?.map((item, index) => (
<Descriptions bordered key={index}>
<Descriptions.Item label="标段（包）名称" span={2} key="1">
{item.bidSectName}
</Descriptions.Item>
<Descriptions.Item label="标段（包）编号" key="2">
{item.bidSectBizNum}
</Descriptions.Item>
<Descriptions.Item label="中标候选人" key="3">
<Collapse
defaultActiveKey={isNotEmpty(item.suppliers) ? activeKeyList(item.suppliers.length) : []}
expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
>
{sectionsRender(item.suppliers, readonly)}
</Collapse>
</Descriptions.Item>
</Descriptions>
))
}
return null;
}
//公示-标段（包）遍历
const sectionsRender = (sections: any[] | null, readonly: boolean) => {
if (isNotEmpty(sections)) {
return sections?.map((item, index) => (
<Panel header={item.companyName} key={index}>
{returnInput([item.sectionId, item.id, 'pmName'], "项目负责人姓名", readonly, item.pmName, [{ required: !readonly }], "项目负责人姓名")}
{returnInput([item.sectionId, item.id, 'pmCode'], "项目负责人证件号码", readonly, item.pmCode, [{ required: !readonly }], "项目负责人证件号码")}
{returnArea([item.sectionId, item.id, 'pmCeritficates'], "项目负责人相关证书和编号", readonly, item.pmCeritficates, [{ required: !readonly }], "项目负责人相关证书和编号")}
{returnArea([item.sectionId, item.id, 'quality'], "质量", readonly, item.quality, [{ required: !readonly }], "质量")}
{returnArea([item.sectionId, item.id, 'evaluationStatus'], "评标情况", readonly, item.evaluationStatus, [{ required: !readonly }], "评标情况")}
{returnArea([item.sectionId, item.id, 'winCandidateQualification'], "中标候选人响应招标文件的资格能力条件", readonly, item.winCandidateQualification, [{ required: !readonly }], "中标候选人响应招标文件的资格能力条件")}
{returnInput([item.sectionId, item.id, 'timeLimit'], "工期/交货期/服务期", readonly, item.timeLimit, [{ required: !readonly }], "工期/交货期/服务期", null, 200, "number", "天")}
</Panel>
))
}
return null;
}
//项目
const projectRender = (project: any, readonly: boolean) => {
if (typeof project === 'object') {
return (
<>
{returnInput("name", "纳税人名称", project.readonly, null, [{ required: true }], "纳税人名称")}
{returnInput("code", "纳税人识别号", false, null, [{ required: true }], "纳税人识别号")}
{returnArea("projectScale", "项目规模", false, null, [{ required: true }], "项目规模")}
{returnArea("tenderContent", "招标内容与范围及招标方案说明", false, null, [{ required: true }], "招标内容与范围及招标方案说明")}
</>
)
}
}
const onSave = () => {
form.validateFields()
.then(values => {
console.log('success', values)
/*
values:
{
username: 'username',
password: 'password',
}
*/
})
.catch(errorInfo => {
console.log('error', errorInfo)
/*
errorInfo:
{
values: {
username: 'username',
password: 'password',
},
errorFields: [
{ name: ['password'], errors: ['Please input your Password!'] },
],
outOfDate: false,
}
*/
});
};
const handleClick = (
e: React.MouseEvent<HTMLElement>,
link: {
title: React.ReactNode;
href: string;
},
) => {
e.preventDefault();
console.log(link);
};
useEffect(() => {
setInitialData(defaultData);
}, []);
return (
<div ref={setContainer} className="zjl-entrust" style={{ height: '100%', overflowY: 'auto', padding: '24px' }}>
<Form {...layout} name="public-platform" onFinish={onFinish} validateMessages={validateMessages}>
<h3 className="first-title">项目信息</h3>
<Form.Item name="projectScale" label="项目规模">
<TextArea autoSize />
</Form.Item>
<Form.Item name="tenderContent" label="招标内容与范围及招标方案说明">
<TextArea autoSize />
</Form.Item>
<h3 className="first-title">公告信息</h3>
<h3 className="first-title">公示信息</h3>
<h3 className="first-title">标段信息</h3>
<ProCard split="vertical">
<ProCard colSpan="15%" bodyStyle={{ padding: 0 }}>
<Affix target={() => container}>
<div style={{ height: innerHeight - 240, overflow: 'auto', }}>
<List
itemLayout="horizontal"
dataSource={data}
renderItem={item => (
<List.Item>
<List.Item.Meta
title={
<Space>
<a onClick={() => scrollToAnchor("name1")}>{item.title}</a>
<Tag color="success">已完成</Tag>
</Space>
}
description={item.description}
/>
</List.Item>
)}
footer={
<>
<Button type='primary'>提交</Button>
</>
}
/>
</div>
</Affix>
</ProCard>
<ProCard bodyStyle={{ padding: 8 }}>
<Collapse defaultActiveKey={['1']}>
<Panel
header={
<Space>
<Tooltip title="标段标段标段标段标段标段标段标段标段标段标段标段标段标段标段标段标段标段标段标段标段1">
<Text>XY92632011202</Text>
</Tooltip>
<Text>标段一</Text>
<Tag color="success">已完成</Tag>
</Space>
}
id="name1"
key="1"
>
<h3 className="scd-title">标段信息</h3>
<Form.Item name={['user', 'bidSectName']} label="标段（包）名称">
<TextArea autoSize />
</Form.Item>
<Form.Item name={['user', 'bidSectBizNum']} label="标段（包）编号">
<Input />
</Form.Item>
<Form.Item name={['user', 'bidSectionContent']} label="标段（包）内容">
<TextArea autoSize />
</Form.Item>
<Form.Item name={['user', 'biddingEligbility']} label="投标人资格条件">
<TextArea autoSize />
</Form.Item>
<h3 className="scd-title">中标候选人信息</h3>
<Collapse defaultActiveKey={['1', '2']}>
<Panel header="中国邮政速递物流股份有限公司大连市分公司" key="1">
<Form.Item name={['user', 'suppliers', 'quality']} label="质量">
<TextArea autoSize />
</Form.Item>
<Form.Item name={['user', 'suppliers', 'evaluationStatus']} label="评标情况">
<TextArea autoSize />
</Form.Item>
<Form.Item name={['user', 'suppliers', 'winCandidateQualification']} label="中标候选人响应招标文件的资格能力条件">
<TextArea rows={2} />
</Form.Item>
<Form.Item name={['user', 'suppliers', 'timeLimit']} label="工期/交货期/服务期" rules={[{ type: 'number', min: 0, max: 99 }]}>
<InputNumber />
</Form.Item>
<Form.Item name={['user', 'suppliers', 'pmName']} label="项目负责人姓名">
<Input />
</Form.Item>
<Form.Item name={['user', 'suppliers', 'pmCode']} label="项目负责人证件号码">
<Input />
</Form.Item>
<Form.Item name={['user', 'suppliers', 'pmCeritficates']} label="项目负责人相关证书和编号">
<Input />
</Form.Item>
<div style={{ height: '100%', background: 'rgb(240,242,245)' }}>
<div className={styles.header}>
<div className={styles.headerAlign}>
<img src={logo} style={{ height: '30px', position: 'relative', top: '-2px' }} />
<span style={{ marginLeft: '10px', height: '30px' }}>招标采购中心 | 公共服务平台</span>
</div>
</div>
<Spin spinning={loading} size='large'>
<PageHeader
title={
<Space>
<Button type='primary' key='save' onClick={() => onSave()}>保存</Button>
<Button key='close' onClick={() => { }}>关闭</Button>
</Space>
}
/>
<div style={{ width: '100%', height: 16, backgroundColor: 'rgb(240,242,245)', }}></div>
<div style={{ padding: '0px 24px' }}>
<div style={{ width: '85%', float: 'left', borderRadius: '8px', }}>
<PageHeader
title={<Text strong>公共服务平台</Text>}
/>
<div style={{ height: innerHeight - 180, overflowY: 'auto' }} ref={setContainer}>
<Form {...layout} form={form} scrollToFirstError name="public-platform" className="noticeFile-label" validateMessages={validateMessages}>
<Collapse
defaultActiveKey={['1', '2', '3', '4']}
expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
>
<Panel
header={<Text strong>项目信息</Text>}
id="panel1"
key="1"
>
</Panel>
<Panel header="北京人大金仓信息技术股份有限公司" key="2">
<Form.Item name={['user', 'suppliers', 'quality']} label="质量">
<TextArea autoSize />
</Form.Item>
<Form.Item name={['user', 'suppliers', 'evaluationStatus']} label="评标情况">
<TextArea autoSize />
</Form.Item>
<Form.Item name={['user', 'suppliers', 'winCandidateQualification']} label="中标候选人响应招标文件的资格能力条件">
<TextArea rows={2} />
</Form.Item>
<Form.Item name={['user', 'suppliers', 'timeLimit']} label="工期/交货期/服务期" rules={[{ type: 'number', min: 0, max: 99 }]}>
<InputNumber />
</Form.Item>
<Form.Item name={['user', 'suppliers', 'pmName']} label="项目负责人姓名">
<Input />
</Form.Item>
<Form.Item name={['user', 'suppliers', 'pmCode']} label="项目负责人证件号码">
<Input />
</Form.Item>
<Form.Item name={['user', 'suppliers', 'pmCeritficates']} label="项目负责人相关证书和编号">
<Input />
</Form.Item>
<Panel
header={<Text strong>中标候选人信息</Text>}
id="panel2"
key="2"
>
</Panel>
<Panel
header={<Text strong>公告信息</Text>}
id="panel3"
key="3"
>
</Panel>
<Panel
header={<Text strong>公示信息</Text>}
id="panel4"
key="4"
>
</Panel>
</Collapse>
</Panel>
</Collapse>
</ProCard>
</ProCard>
</Form>
</Form>
</div>
</div>
<div style={{ width: '15%', float: 'right' }}>
<div style={{ margin: '0px 16px', border: '1px solid rgb(179,0,0)', borderRadius: '8px', padding: '8px 0px', backgroundColor: 'white', width: '12%' }} className='anchor-father'>
{container && (
<Anchor getContainer={() => container} style={{ overflow: 'hidden' }} onClick={handleClick}>
<Link href="#panel1" title="项目信息" />
<Link href="#panel2" title="中标候选人信息" />
<Link href="#panel3" title="公告信息" />
<Link href="#panel4" title="公示信息" />
</Anchor>
)}
</div>
<BackTop style={{ right: '100vh-40px' }}>
<div className='backtop'><ArrowUpOutlined /></div>
</BackTop>
</div>
</div>
</Spin>
</div>
);
};
export default PublicPlatform
)
}
export default PublicPlatform;

135
src/pages/Bid/BiddingAnnouncement/components/style.less
View File

@ -1,72 +1,5 @@
//新增招标公告
// .bidding {
// margin-bottom: 8px;
// :global {
// .biddingLabel {
// width: 30%;
// display: inline-block;
// text-align: right;
// // padding-left: 20px;
// padding-right: 10px;
// }
// .biddingIndex {
// width: 40%;
// display: inline-block;
// justify-content: right;
// }
// .biddingDatePicker {
// width: 40%;
// }
// .biddingRadio {
// // display: inline-block;
// width: 40%;
// margin-top:24px;
// }
// .ant-row .ant-col {
// margin: 6px 0px;
// }
// .uploadTotal {
// display: inline-block;
// width: 40%;
// .upload {
// --antd-wave-shadow-color:#1c84c6;
// background: #1c84c6;
// color:#fff;
// border-color: #1c84c6;
// }
// .uploadLabel {
// // display: inline;
// font-size: 13px;
// color: #c8ced1;
// margin-top: 5px;
// }
// }
// }
// }
// .announcementFootButton {
// :global{
// display: flex;
// justify-content: center;
// margin-top: 15px;
// .save{
// --antd-wave-shadow-color:#f7ab59;
// background: #f7ab59;
// color:#fff;
// border-color: #f7ab59;
// }
// }
// }
// //招标公告
// .label {
// :global {
// color:#f62a2b;
// }
// }
// .ant-pro-table-toolbar {
// :global {
// margin: -12px 0px;
// }
// }
@import '~antd/lib/style/themes/default.less';
.card-onmouse{
// margin:auto;
.ant-image{
@ -87,4 +20,66 @@
}
.card-onmouse:hover{
box-shadow: 8px 8px 5px #9e9e9e;/*设置阴影,可以自定义参数*/
}
}
.header {
display: flex;
height: 56px;
color: white;
font-weight: 600;
font-size: 16px;
line-height: 56px;
background-color: #b30000;
.headerAlign {
align-self: center;
margin-left: 20px;
}
.proName {
font-weight: 300;
font-size: 30px;
}
.closeButton {
position: absolute;
right: 20px;
}
}
.anchor-father {
position: fixed;
.ant-anchor {
padding: 0px;
overflow: hidden;
}
.ant-anchor-ink {
position: fixed;
margin: 0px;
}
.ant-anchor-wrapper {
margin-left: 0px;
padding: 0px;
// border-radius: 8px;
}
.ant-anchor-ink-ball.visible {
display: none;
}
.ant-anchor-ink::before {
display: none;
}
.ant-anchor-link-active {
background-color: rgb(179, 0, 0);
}
.ant-anchor-link-title-active {
color: rgb(255, 255, 255);
}
.ant-affix {
top: 134px !important;
}
}
.backtop {
width: 40px;
height: 40px;
color: #fff;
line-height: 40px;
text-align: center;
background-color: rgb(179, 0, 0);
border-radius: 4px;
font-size: 14px;
}