You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { observer } from "mobx-react";
|
|
import { Button, Drawer, Space } from "antd";
|
|
import type { DrawerProps } from "antd/es/drawer";
|
|
import { DownloadOutlined, PrinterOutlined } from "@ant-design/icons";
|
|
import { useMobStore } from "@/hooks";
|
|
import { toJS } from "mobx";
|
|
import styles from "./index.less";
|
|
import Trans from "@/utils/locale";
|
|
|
|
interface IProps extends DrawerProps {}
|
|
|
|
const Index: React.FC<IProps> = observer((props) => {
|
|
const store = useMobStore("hiprintStore");
|
|
|
|
useEffect(() => {
|
|
console.log("draw", toJS(store)?.hiprintTemplate?.getHtml());
|
|
props.open && $("#preview_content_design").html(toJS(store)?.hiprintTemplate?.getHtml());
|
|
return () => {};
|
|
}, [props.open]);
|
|
const print = () => {
|
|
store?.hiprintTemplate.print(
|
|
{},
|
|
{},
|
|
{
|
|
callback: () => {
|
|
console.log("callback");
|
|
}
|
|
}
|
|
);
|
|
};
|
|
const toPdf = () => {
|
|
store?.hiprintTemplate.toPdf({}, "打印预览");
|
|
};
|
|
return (
|
|
<Drawer
|
|
{...props}
|
|
width={toJS(store)?.hiprintTemplate?.editingPanel?.width + "mm"}
|
|
title="打印预览"
|
|
placement="right"
|
|
className={styles.previewHiprintDesign}
|
|
extra={
|
|
<Space>
|
|
<Button type="primary" icon={<PrinterOutlined />} onClick={print}>
|
|
打印
|
|
</Button>
|
|
<Button type="ghost" icon={<DownloadOutlined />} onClick={toPdf}>
|
|
pdf<Trans>Address</Trans>
|
|
</Button>
|
|
</Space>
|
|
}
|
|
>
|
|
<div id="preview_content_design" />
|
|
</Drawer>
|
|
);
|
|
});
|
|
|
|
export default Index;
|