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

4.17 标段信息增加布局，固钉，锚点跳转

Browse Source
This commit is contained in:
jl-zhoujl2
2022-04-17 21:05:11 +08:00
parent 78f1b2e2a3
commit 0595d4e339
2 changed files with 201 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,7 @@
import { Form, Input, InputNumber, Button, Card } from 'antd'; import { scrollToAnchor } from '@/utils/CommonUtils';
import React from 'react'; import ProCard from '@ant-design/pro-card';
import { Form, Input, InputNumber, Button, Card, Row, Col, Typography, Tooltip, Space, Radio, Affix, List, Tag } from 'antd';
import React, { useState } from 'react';
interface PublicPlatformProps { interface PublicPlatformProps {
modalVisible: boolean; modalVisible: boolean;
@ -11,9 +13,44 @@ const layout = {
span: 6, span: 6,
}, },
wrapperCol: { wrapperCol: {
span: 16, span: 17,
}, },
}; };
const bidLayout = {
labelCol: {
span: 4,
},
wrapperCol: {
span: 20,
},
};
const candidateLayout = {
labelCol: {
span: 7,
},
wrapperCol: {
span: 17,
},
};
const data = [
{
title: '标段一',
description: 'XY92632011202',
},
{
title: '标段二',
description: 'XY92632011202',
},
{
title: '标段三',
description: 'XY92632011202',
},
{
title: '标段四',
description: 'XY92632011202',
},
];
/* eslint-disable no-template-curly-in-string */ /* eslint-disable no-template-curly-in-string */
const validateMessages = { const validateMessages = {
@ -30,37 +67,90 @@ const validateMessages = {
const PublicPlatform: React.FC<PublicPlatformProps> = (props) => { const PublicPlatform: React.FC<PublicPlatformProps> = (props) => {
// const { modalVisible, onCancel } = props; // const { modalVisible, onCancel } = props;
const { Text } = Typography;
const { TextArea } = Input;
const [container, setContainer] = useState<HTMLDivElement | null>(null);
const onFinish = (values: any) => { const onFinish = (values: any) => {
console.log(values); console.log(values);
}; };
return ( return (
<Card> <div ref={setContainer} className="zjl-entrust" style={{ height: '100%', overflowY: 'auto', padding: '24px' }}>
<Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}> <Form {...layout} name="public-platform" onFinish={onFinish} validateMessages={validateMessages}>
<h3 className="first-title">项目信息</h3> <h3 className="first-title">项目信息</h3>
<Form.Item name={['user', 'Projectsize']} label="项目规模"> <Form.Item name={['user', 'Projectsize']} label="项目规模">
<Input.TextArea /> <TextArea autoSize />
</Form.Item> </Form.Item>
<Form.Item name={['user', 'introduction']} label="招标内容与范围及招标方案说明"> <Form.Item name={['user', 'introduction']} label="招标内容与范围及招标方案说明">
<Input.TextArea /> <TextArea autoSize />
</Form.Item> </Form.Item>
<h3 className="first-title">公告信息</h3>
<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>
)}
/>
</div>
</Affix>
</ProCard>
<ProCard bodyStyle={{ padding: 8 }}>
<Space direction="vertical" style={{ display: 'flex' }}>
<Card
title={
<Space>
<Tooltip title="标段标段标段标段标段标段标段标段标段标段标段标段标段标段标段标段标段标段标段标段标段1">
<span>XY92632011202</span>
</Tooltip>
<Text>标段一</Text>
<Tag color="success">已完成</Tag>
</Space>
}
id="name1"
>
<Form {...bidLayout}>
<Form.Item name={['user', 'website']} label="标段（包）名称">
<TextArea autoSize />
</Form.Item>
<Form.Item name={['user', 'website']} label="标段（包）编号">
<Input />
</Form.Item>
<Form.Item name={['user', 'website']} label="标段（包）内容"> <Form.Item name={['user', 'website']} label="标段（包）内容">
<Input.TextArea /> <TextArea autoSize />
</Form.Item> </Form.Item>
<Form.Item name={['user', 'website']} label="投标人资格条件"> <Form.Item name={['user', 'website']} label="投标人资格条件">
<Input.TextArea /> <TextArea autoSize />
</Form.Item> </Form.Item>
<h3 className="first-title">中标候选人信息</h3> <Form.Item label="中标候选人信息">
<Space direction="vertical" style={{ display: 'flex' }}>
<Card type="inner" title="中国邮政速递物流股份有限公司大连市分公司">
<Form {...candidateLayout}>
<Form.Item name={['user', 'website']} label="质量"> <Form.Item name={['user', 'website']} label="质量">
<Input.TextArea /> <TextArea autoSize />
</Form.Item> </Form.Item>
<Form.Item name={['user', 'website']} label="评标情况"> <Form.Item name={['user', 'website']} label="评标情况">
<Input.TextArea /> <TextArea autoSize />
</Form.Item> </Form.Item>
<Form.Item name={['user', 'website']} label="中标候选人响应招标文件的资格能力条件"> <Form.Item name={['user', 'website']} label="中标候选人响应招标文件的资格能力条件">
<Input.TextArea /> <TextArea rows={2} />
</Form.Item> </Form.Item>
<Form.Item name={['user', 'age']} label="工期/交货期/服务期" rules={[{ type: 'number', min: 0, max: 99 }]}> <Form.Item name={['user', 'age']} label="工期/交货期/服务期" rules={[{ type: 'number', min: 0, max: 99 }]}>
<InputNumber /> <InputNumber />
@ -74,13 +164,47 @@ const PublicPlatform: React.FC<PublicPlatformProps> = (props) => {
<Form.Item name={['user', 'website']} label="项目负责人相关证书和编号"> <Form.Item name={['user', 'website']} label="项目负责人相关证书和编号">
<Input /> <Input />
</Form.Item> </Form.Item>
</Form>
</Card>
<Card type="inner" title="北京人大金仓信息技术股份有限公司">
<Form {...candidateLayout}>
<Form.Item name={['user', 'website']} label="质量">
<TextArea autoSize />
</Form.Item>
<Form.Item name={['user', 'website']} label="评标情况">
<TextArea autoSize />
</Form.Item>
<Form.Item name={['user', 'website']} label="中标候选人响应招标文件的资格能力条件">
<TextArea rows={2} />
</Form.Item>
<Form.Item name={['user', 'age']} label="工期/交货期/服务期" rules={[{ type: 'number', min: 0, max: 99 }]}>
<InputNumber />
</Form.Item>
<Form.Item name={['user', 'website']} label="项目负责人姓名">
<Input />
</Form.Item>
<Form.Item name={['user', 'website']} label="项目负责人证件号码">
<Input />
</Form.Item>
<Form.Item name={['user', 'website']} label="项目负责人相关证书和编号">
<Input />
</Form.Item>
</Form>
</Card>
</Space>
</Form.Item>
</Form>
</Card>
</Space>
</ProCard>
</ProCard>
{/* <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}> {/* <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
<Button type="primary" htmlType="submit"> <Button type="primary" htmlType="submit">
Submit Submit
</Button> </Button>
</Form.Item> */} </Form.Item> */}
</Form> </Form>
</Card> </div>
); );
}; };

16
src/utils/CommonUtils.ts
View File

@ -11,7 +11,7 @@
* 判断是否等于空 * 判断是否等于空
* @param value * @param value
*/ */
export function isEmpty(value: any) { export function isEmpty(value: any) {
return value === null || value === void 0 || value === ''; return value === null || value === void 0 || value === '';
} }
/** /**
@ -223,7 +223,7 @@ projectTypeCodeMaps.set("/Comparison", ["procurement_mode_3"]);
//招募 //招募
projectTypeCodeMaps.set("/Recruit", ["procurement_mode_4"]); projectTypeCodeMaps.set("/Recruit", ["procurement_mode_4"]);
//谈判 //谈判
projectTypeCodeMaps.set("/Negotiation", ["procurement_mode_5", "procurement_mode_6", ]); projectTypeCodeMaps.set("/Negotiation", ["procurement_mode_5", "procurement_mode_6",]);
//询价 //询价
projectTypeCodeMaps.set("/Inquiry", ["procurement_mode_7"]); projectTypeCodeMaps.set("/Inquiry", ["procurement_mode_7"]);
@ -302,3 +302,15 @@ export const numberToChinese = (num: any) => {
re = re.replace("一", ""); re = re.replace("一", "");
return re; return re;
} }
/**
* 页面内锚点滚动方法
* @param anchorName
*/
export const scrollToAnchor = (anchorName: string) => {
if (anchorName) {
// 找到锚点
let anchorElement = document.getElementById(anchorName);
// 如果对应id的锚点存在，就跳转到锚点
if (anchorElement) { anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' }); }
}
}