Haina
/
GHHub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

预览文档插件

Browse Source
release
YCC 2 years ago
parent 1cb910ff1a
commit e641c04f1d
3 changed files with 126 additions and 150 deletions
Show Stats Download Patch File Download Diff File

1
README.md
Unescape Escape View File

@ -14,6 +14,7 @@ dayjs https://dayjs.gitee.io/docs/zh-CN/manipulate/start-of
antd https://ant-design.antgroup.com/components/upload-cn#uploadfile antd https://ant-design.antgroup.com/components/upload-cn#uploadfile
反馈表案例 https://www.chinahighlights.com/customerservice/feedback/PostTourSurveyFormToWLGH.asp?LGC=1&COLI_SN=988185&MEI_SN=954295&Email=jennroth18@hotmail.com&ToC=0&ShowType=&page_class=4&dei_sn=28&country=30,490 反馈表案例 https://www.chinahighlights.com/customerservice/feedback/PostTourSurveyFormToWLGH.asp?LGC=1&COLI_SN=988185&MEI_SN=954295&Email=jennroth18@hotmail.com&ToC=0&ShowType=&page_class=4&dei_sn=28&country=30,490
国内供应商平台 http://p.mycht.cn/index.aspx 国内供应商平台 http://p.mycht.cn/index.aspx
文档预览 https://github.com/cyntler/react-doc-viewer
## 阿里云OSS ## 阿里云OSS
Bucket 名称：global-highlights-hub Bucket 名称：global-highlights-hub

2
package.json
Unescape Escape View File

@ -9,12 +9,12 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@cyntler/react-doc-viewer": "^1.13.0",
"antd": "^5.4.2", "antd": "^5.4.2",
"mobx": "^6.9.0", "mobx": "^6.9.0",
"mobx-react": "^7.6.0", "mobx-react": "^7.6.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-file-viewer": "^1.2.1",
"react-router-dom": "^6.10.0" "react-router-dom": "^6.10.0"
}, },
"devDependencies": { "devDependencies": {

273
src/views/reservation/Print.jsx
Unescape Escape View File

@ -1,164 +1,139 @@
import { useParams, useNavigate } from "react-router-dom"; import { useParams, useNavigate } from "react-router-dom";
import { useEffect } from 'react'; import { useEffect } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { toJS } from "mobx"; import { toJS } from "mobx";
import moment from "moment"; import moment from "moment";
import { Row, Col, Space, Table, Typography, List, Watermark } from 'antd'; import { Row, Col, Space, Table, Typography, List, Watermark } from "antd";
import FileViewer from 'react-file-viewer'; import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
import { useStore } from '../../stores/StoreContext.js'; import { useStore } from "../../stores/StoreContext.js";
const { Title } = Typography; const { Title } = Typography;
const itineraryListColumns = [ const itineraryListColumns = [
{ {
title: 'Day', title: "Day",
dataIndex: 'day', dataIndex: "day",
key: 'day', key: "day",
}, },
{ {
title: 'Place & Transport', title: "Place & Transport",
dataIndex: 'placeTransport', dataIndex: "placeTransport",
key: 'placeTransport', key: "placeTransport",
}, },
{ {
title: 'Today’s Activities', title: "Today’s Activities",
dataIndex: 'todayActivities', dataIndex: "todayActivities",
key: 'todayActivities', key: "todayActivities",
}, },
{ {
title: 'Accommodation', title: "Accommodation",
dataIndex: 'accommodation', dataIndex: "accommodation",
key: 'accommodation', key: "accommodation",
}, },
{ {
title: 'Meals', title: "Meals",
dataIndex: 'meals', dataIndex: "meals",
key: 'meals', key: "meals",
}, },
]; ];
function Print() { function Print() {
const navigate = useNavigate(); const navigate = useNavigate();
const { reservationId } = useParams(); const { reservationId } = useParams();
const { reservationStore } = useStore(); const { reservationStore } = useStore();
const { itineraryList, customerList } = reservationStore; const { itineraryList, customerList } = reservationStore;
const docs = [{ uri: "https://www.chinahighlights.com/public/reservationW220420009.doc" }, { uri: "https://www.chinahighlights.com/public/SampleSpec.docx" }];
useEffect(() => { useEffect(() => {
console.info('Detail.useEffect: ' + reservationId); console.info("Detail.useEffect: " + reservationId);
}, [reservationId]); }, [reservationId]);
return ( return (
<Watermark content={['Global Highlights', 'Discovery Your Way!']}> <Watermark content={["Global Highlights", "Discovery Your Way!"]}>
<Space direction="vertical" style={{ width: '100%' }}> <Space direction="vertical" style={{ width: "100%" }}>
<Row gutter={{ md: 24 }}> <Row gutter={{ md: 24 }}>
<Col span={24}> <Col span={24}>
Stream Stream
<FileViewer <DocViewer documents={docs} pluginRenderers={DocViewerRenderers} style={{ height: 800 }} />
fileType={'docx'} </Col>
filePath={'http://202.103.68.100:890/service-fileServer/DownloadPlanDoc?GRI_SN=331740&VEI_SN=32531'} </Row>
errorComponent={<span>Error</span>}/>
</Col> <Row gutter={{ md: 24 }}>
</Row> <Col span={24}>
<Row gutter={{ md: 24 }}> <Title level={3}>Booking for Mr. Prasanna Venkatesa Nathan(United States) trip</Title>
<Col span={24}> </Col>
reservationW220420009.doc </Row>
<FileViewer <Row gutter={{ md: 24 }}>
fileType={'docx'} <Col span={24}>
filePath={'https://www.chinahighlights.com/public/reservationW220420009.doc'} <Title level={4}>Booking Number: 220629-W220420009</Title>
errorComponent={<span>Error</span>}/> </Col>
</Col> </Row>
</Row> <Row gutter={{ md: 24 }}>
<Row gutter={{ md: 24 }}> <Col span={24}>
<Col span={24}> <Title level={4}>Customer Names (Full name as it appears on passport):</Title>
SampleSpec.docx </Col>
<FileViewer </Row>
fileType={'docx'} <Row>
filePath={'https://www.chinahighlights.com/public/SampleSpec.docx'} <Col span={24}>
errorComponent={<span>Error</span>}/> <List
</Col> itemLayout="horizontal"
</Row> dataSource={toJS(customerList)}
<Row gutter={{ md: 24 }}> renderItem={(item, index) => (
<Col span={24}> <List.Item>
<Title level={3}>Booking for Mr. Prasanna Venkatesa Nathan(United States) trip</Title> <List.Item.Meta title={<span>{item.title}</span>} description={item.description} />
</Col> </List.Item>
</Row> )}
<Row gutter={{ md: 24 }}> />
<Col span={24}> </Col>
<Title level={4}>Booking Number: 220629-W220420009</Title> </Row>
</Col> <Row gutter={{ md: 24 }}>
</Row> <Col span={24}>
<Row gutter={{ md: 24 }}> <Title level={4}>Hotels and Room:</Title>
<Col span={24}> </Col>
<Title level={4}>Customer Names (Full name as it appears on passport):</Title> </Row>
</Col> <Row gutter={{ md: 24 }}>
</Row> <Col span={24}>
<Row> <Title level={4}>Guide Language: English</Title>
<Col span={24}> </Col>
<List </Row>
itemLayout="horizontal" <Row gutter={{ md: 24 }}>
dataSource={toJS(customerList)} <Col span={24}>
renderItem={(item, index) => ( <Title level={4}>Notes:</Title>
<List.Item> </Col>
<List.Item.Meta </Row>
title={<span>{item.title}</span>} <Row gutter={{ md: 24 }}>
description={item.description} <Col span={24}>
/> <Title level={4}>Itinerary Overview:</Title>
</List.Item> </Col>
)} </Row>
/> <Row>
</Col> <Col span={24}>
</Row> <Table pagination={false} dataSource={toJS(itineraryList)} columns={itineraryListColumns} />
<Row gutter={{ md: 24 }}> </Col>
<Col span={24}> </Row>
<Title level={4}>Hotels and Room:</Title> <Row gutter={{ md: 24 }}>
</Col> <Col span={24}>
</Row> <Title level={4}>Detailed Tour Itinerary</Title>
<Row gutter={{ md: 24 }}> </Col>
<Col span={24}> </Row>
<Title level={4}>Guide Language: English</Title> <Row gutter={{ md: 24 }}>
</Col> <Col span={24}>
</Row> <Title level={4}>Packaged Price Includes:</Title>
<Row gutter={{ md: 24 }}> </Col>
<Col span={24}> </Row>
<Title level={4}>Notes:</Title> <Row gutter={{ md: 24 }}>
</Col> <Col span={24}>
</Row> <Title level={4}>Packaged Price Excludes:</Title>
<Row gutter={{ md: 24 }}> </Col>
<Col span={24}> </Row>
<Title level={4}>Itinerary Overview:</Title> <Row gutter={{ md: 24 }}>
</Col> <Col span={24}>
</Row> <Title level={4}>Asia Highlights Contact:</Title>
<Row> </Col>
<Col span={24}> </Row>
<Table </Space>
pagination={false} </Watermark>
dataSource={toJS(itineraryList)} columns={itineraryListColumns} );
/>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={4}>Detailed Tour Itinerary</Title>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={4}>Packaged Price Includes:</Title>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={4}>Packaged Price Excludes:</Title>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={4}>Asia Highlights Contact:</Title>
</Col>
</Row>
</Space>
</Watermark>
);
} }
export default observer(Print); export default observer(Print);

Write Preview
Loading…
Cancel
Save