diff --git a/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/components/TrainingModal.js b/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/components/TrainingModal.js new file mode 100644 index 0000000..d2e48e5 --- /dev/null +++ b/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/components/TrainingModal.js @@ -0,0 +1,133 @@ +import React, { useState } from 'react'; +import { Descriptions, Image } from 'antd'; +import { DownloadOutlined, EyeOutlined } from '@ant-design/icons'; +import CommonModal from '@/views/Home/components/UI/CommonModal'; +import PdfView from '@/views/Home/components/UI/PdfView'; +import { download } from '@/utils/tools'; +import './TrainingModal.less'; + +const TrainingModal = ({ visible, onClose, data }) => { + const typeInfo = { + 1:"水利", + 2:"岗前培训", + 3:"在岗培训", + 4:"政治学习教育", + 5:"其他", + } + const [pdfInfo, setPdfInfo] = useState({ visible: false, title: '', fileId: '' }); + const [previewImage, setPreviewImage] = useState(''); + const [previewVisible, setPreviewVisible] = useState(false); + + if (!data) return null; + + const commonLabelStyle = { + width: '150px', + textAlign: 'right', + }; + + const descriptionStyle = { + marginBottom: '20px', + }; + + const getDescriptionsProps = (title) => ({ + title: {title}, + column: 2, + bordered: true, + size: 'small', + className: 'engineering-descriptions', + labelStyle: commonLabelStyle, + style: descriptionStyle, + }); + + const handleFilePreview = (file) => { + const extension = file.fileName.split('.').pop().toLowerCase(); + const downloadUrl = `/gunshiApp/ss/personnelPlan/file/download/${file.fileId}`; + + if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(extension)) { + setPreviewImage(downloadUrl); + setPreviewVisible(true); + } else if (extension === 'pdf') { + setPdfInfo({ + visible: true, + title: file.fileName, + fileId: file.fileId + }); + } else { + download(downloadUrl); + } + }; + + const getTrainingType = (type) => { + const typeName = typeInfo[type] + return typeName; + }; + + return ( + +
+ + {data.name || '-'} + {getTrainingType(data.type) || '-'} + {data.stm || '-'} + {data.name || '-'} + {data.stm && data.etm ? `${data.stm} 至 ${data.etm}` : '-'} + {data.num || '-'} + {data.addr || '-'} + {data.unit || '-'} + {data.content || '-'} + {data.scope || '-'} + {data.trainees || '-'} + {data.numPeople || '-'} + {data.applicant || '-'} + {data.regDate || '-'} + + + + +
+ {data.files && data.files.length > 0 ? data.files.map((file, index) => ( +
+ {file.fileName} +
+ handleFilePreview(file)} style={{ cursor: 'pointer', marginRight: '8px', color: '#1890ff', fontSize: '16px' }} title="预览" /> + download(`/gunshiApp/ss/personnelPlan/file/download/${file.fileId}`)} style={{ cursor: 'pointer', color: '#1890ff', fontSize: '16px' }} title="下载" /> +
+
+ )) : 无附件} +
+ + +
+ + {/* PDF Viewer */} + {pdfInfo.visible && ( + setPdfInfo({ ...pdfInfo, visible: false })} + title={pdfInfo.title} + fileId={pdfInfo.fileId} + url="/gunshiApp/ss/personnelPlan/file/download/" + /> + )} +
+ { + setPreviewVisible(value); + }, + }} + /> +
+ + ); +}; + +export default TrainingModal; diff --git a/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/components/TrainingModal.less b/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/components/TrainingModal.less new file mode 100644 index 0000000..ce3cf04 --- /dev/null +++ b/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/components/TrainingModal.less @@ -0,0 +1,59 @@ +.training-modal-content { + .engineering-descriptions { + table { + table-layout: fixed !important; + } + + .ant-descriptions-view { + border-radius: 4px; + border: 1px solid rgba(0, 160, 233, 0.3); + + table { + border-collapse: collapse; + } + } + + .ant-descriptions-row { + border-bottom: 1px solid rgba(0, 160, 233, 0.3); + + &:last-child { + border-bottom: none; + } + + & > th, & > td { + border-right: 1px solid rgba(0, 160, 233, 0.3); + + &:last-child { + border-right: none; + } + } + } + + .ant-descriptions-item-label { + background-color: rgba(0, 160, 233, 0.1) !important; + color: #fff !important; + font-weight: normal; + padding: 12px 16px !important; + border-color: rgba(0, 160, 233, 0.3) !important; + } + + .ant-descriptions-item-content { + color: #fff !important; + padding: 12px 16px !important; + border-color: rgba(0, 160, 233, 0.3) !important; + background-color: transparent !important; + } + } + + .file-item { + background: rgba(0, 160, 233, 0.1); + border: 1px solid rgba(0, 160, 233, 0.3) !important; + color: #fff; + transition: all 0.3s; + + &:hover { + background: rgba(0, 160, 233, 0.2); + box-shadow: 0 0 5px rgba(0, 160, 233, 0.5); + } + } +} diff --git a/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/index.js b/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/index.js index 9b16992..57d490a 100644 --- a/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/index.js +++ b/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/index.js @@ -1,14 +1,12 @@ import React, { useState,useEffect } from 'react'; -import { Image } from 'antd'; import arrowIcon from '@/assets/images/card/arrow.png'; import selectedBg from '@/assets/images/modal/selected.png'; import resperson from '@/assets/images/card/resperson.png'; import smallCard from '@/assets/images/card/smallCard.png'; import qys from '@/assets/images/business/qys.png'; -import PdfView from '@/views/Home/components/UI/PdfView'; import apiurl from '@/service/apiurl'; import { httpget } from '@/utils/request'; -import { download } from '@/utils/tools'; +import TrainingModal from './components/TrainingModal'; import './index.less'; const ImplementResponsibility = () => { @@ -20,12 +18,10 @@ const ImplementResponsibility = () => { 5:"技术责任人", } const [activeTab, setActiveTab] = useState('dam'); // 'dam' or 'flood' - const [pdfInfo, setPdfInfo] = useState({ visible: false, title: '', fileId: '' }); - const [imagePreview, setImagePreview] = useState({ visible: false, src: '' }); const [respData, setRespData] = useState([]) const [floodData, setFloodData] = useState([]) const [trainData, setTrainData] = useState({}) - const [trainFileData, setTrainFileData] = useState({}) + const [trainingModalVisible, setTrainingModalVisible] = useState(false); // 获取大坝安全责任人 const getRespData = async () => { @@ -58,7 +54,6 @@ const ImplementResponsibility = () => { const { code, data } = await httpget(apiurl.sz.zrz.train) if (code == 200) { setTrainData(data) - setTrainFileData(data?.latestPersonnelPlan?.files[0]) } } catch (error) { console.log(error); @@ -73,28 +68,8 @@ const ImplementResponsibility = () => { ]; const handleTrainingClick = () => { - if (!trainFileData || !trainFileData.fileName) return; - - const fileName = trainFileData.fileName; - const fileId = trainFileData.fileId; - const extension = fileName.split('.').pop().toLowerCase(); - const downloadUrl = `/gunshiApp/ss/personnelPlan/file/download/${fileId}`; - - if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(extension)) { - setImagePreview({ - visible: true, - src: downloadUrl - }); - } else if (extension === 'pdf') { - setPdfInfo({ - visible: true, - title: fileName, - fileId: fileId - }); - } else { - download(downloadUrl) - // window.location.href = downloadUrl; - } + if (!latestPersonnelPlan) return; + setTrainingModalVisible(true); }; const currentPersonList = activeTab === 'dam' ? respData : floodData; @@ -175,36 +150,21 @@ const ImplementResponsibility = () => {
- {trainFileData.fileName?.replace(/\.[^/.]+$/, '')} + {latestPersonnelPlan?.content || "暂无培训内容"}
- {/* PDF Viewer */} - {pdfInfo.visible && ( - setPdfInfo({ ...pdfInfo, visible: false })} - title={pdfInfo.title} - fileId={pdfInfo.fileId} - url="/gunshiApp/ss/personnelPlan/file/download/" + {/* Training Detail Modal */} + {trainingModalVisible && ( + setTrainingModalVisible(false)} + data={latestPersonnelPlan} /> )} - - {/* Image Preview */} -
- { - setImagePreview({ ...imagePreview, visible: value }); - }, - }} - /> -
); };