PrintControl.tsx 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. import React, { useState, useMemo } from 'react';
  2. import { Select, Button, Space, message } from 'antd';
  3. import { showNotImplemented } from '@/utils/notificationHelper';
  4. import { useAppSelector } from '@/states/store';
  5. import { getPrintManager } from '@/services/print';
  6. const PrintControl: React.FC = () => {
  7. const [selectedNode, setSelectedNode] = useState<string>('');
  8. const [selectedSize, setSelectedSize] = useState<string>('14IN×17IN');
  9. const [isPrinting, setIsPrinting] = useState(false);
  10. // 获取当前胶片信息
  11. const activeFilm = useAppSelector((state) => {
  12. const films = state.print.films;
  13. const activeId = state.print.activeFilmId;
  14. return films.find(f => f.id === activeId);
  15. });
  16. // 创建打印管理器实例
  17. const printManager = useMemo(() => getPrintManager(), []);
  18. // TODO: 打印节点需要从后端API获取
  19. const printNodes = [
  20. { value: 'node1', label: 'TestPrinter' },
  21. // { value: 'node2', label: '打印节点2' },
  22. ];
  23. const filmSizes = [
  24. { value: '14IN×17IN', label: '14IN×17IN' },
  25. { value: '14IN×14IN', label: '14IN×14IN' },
  26. { value: '17IN×17IN', label: '17IN×17IN' },
  27. ];
  28. const handleLocalPrint = async () => {
  29. if (isPrinting) {
  30. message.warning('打印正在进行中,请稍候');
  31. return;
  32. }
  33. try {
  34. setIsPrinting(true);
  35. console.log('[本地打印] 开始打印,胶片尺寸:', selectedSize);
  36. await printManager.print({
  37. elementId: 'film-print-area',
  38. filmSize: selectedSize,
  39. orientation: activeFilm?.orientation === 'horizontal' ? 'landscape' : 'portrait',
  40. });
  41. message.success('打印完成');
  42. } catch (error) {
  43. console.error('[本地打印] 打印失败:', error);
  44. message.error(`打印失败: ${error.message || '未知错误'}`);
  45. } finally {
  46. setIsPrinting(false);
  47. }
  48. };
  49. const handleDicomPrint = () => {
  50. showNotImplemented('DICOM打印');
  51. };
  52. return (
  53. <div>
  54. <div className="font-semibold">打印设置</div>
  55. <Space direction="vertical" style={{ width: '100%' }} size="middle">
  56. {/* 打印节点下拉框 */}
  57. <div>
  58. <div className="mb-1">打印节点</div>
  59. <Select
  60. style={{ width: '100%' }}
  61. placeholder="选择打印节点"
  62. value={selectedNode}
  63. onChange={setSelectedNode}
  64. options={printNodes}
  65. // TODO: 暂时disabled,等待后端API
  66. disabled={printNodes.length === 0}
  67. />
  68. {printNodes.length === 0 && (
  69. <div className="text-gray-400 mt-1">
  70. TODO: 等待后端API提供打印节点
  71. </div>
  72. )}
  73. </div>
  74. {/* 尺寸下拉框 */}
  75. <div>
  76. <div className="mb-1">胶片尺寸</div>
  77. <Select
  78. style={{ width: '100%' }}
  79. value={selectedSize}
  80. onChange={setSelectedSize}
  81. options={filmSizes}
  82. />
  83. </div>
  84. {/* 打印按钮 */}
  85. <div>
  86. <Space direction="vertical" style={{ width: '100%' }}>
  87. <Button
  88. type="primary"
  89. block
  90. onClick={handleLocalPrint}
  91. disabled={!selectedNode}
  92. >
  93. 本地打印
  94. </Button>
  95. <Button
  96. block
  97. onClick={handleDicomPrint}
  98. disabled={!selectedNode}
  99. >
  100. DICOM打印
  101. </Button>
  102. </Space>
  103. </div>
  104. </Space>
  105. </div>
  106. );
  107. };
  108. export default PrintControl;