From a80102cf6925a583686f21ff703aa3dee5bc68f5 Mon Sep 17 00:00:00 2001 From: pengm <674192343@qq.com> Date: Wed, 20 May 2026 16:52:00 +0800 Subject: [PATCH] 1.Pad拍照后，支持照片展示，点击预览功能 --- src/components/Common/CommonViewTable/index.js | 121 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- src/mobile/common/CommobilePadBill/index.less | 6 +++++- src/mobile/components/FileManageMobile.js | 33 ++++++++++++++++++++++++++++++++- 3 files changed, 156 insertions(+), 4 deletions(-) diff --git a/src/components/Common/CommonViewTable/index.js b/src/components/Common/CommonViewTable/index.js index bca8fe6..4e36689 100644 --- a/src/components/Common/CommonViewTable/index.js +++ b/src/components/Common/CommonViewTable/index.js @@ -8,7 +8,8 @@ import AntdDraggableModal from '@/components/Common/AntdDraggableModal'; import CommonListSelectTree from '@/components/Common/CommonListSelectTree'; import CommonListSelect from '@/components/Common/CommonListSelect'; import * as commonUtils from '@/utils/utils';/* 通用方法 */ - +import commonConfig from "@/utils/config"; +import preView from '../../../mobile/components/preView'; export default class CommonViewTable extends Component { constructor(props) { @@ -307,7 +308,123 @@ export default class CommonViewTable extends Component { { viewConfigs && viewConfigs.map((child) => { + const viewRowNew = this.props.getViewRow?.(child) || viewRow; const iOrder = sMemo ? 100 : child.iOrder > 100 ? 100 : child.iOrder; /* 排序 */ + + const isPadPicture = child.sName?.toLowerCase().includes('padpicture'); + const isPicturePath = child.sName?.toLowerCase().includes('picture'); + if (isPadPicture || isPicturePath) { + // 直接从隐藏字段获取图片路径（跨表场景） + let fileValue = ''; + const { token } = app; + let imgBox = null; + fileValue = viewRowNew[child.sName]; + // 从隐藏 input 获取图片路径 + // const hiddenInput = document.getElementById('hiddenPicturePaths'); + // if (commonUtils.isEmpty(fileValue) && hiddenInput) { + // fileValue = hiddenInput.value; + // } + if (commonUtils.isNotEmptyStr(fileValue)) { + const picAddr = fileValue.split(','); + const previewImageArr = []; + const dWidth = 800; // 预览图宽度 + const dHeight = 600; // 预览图高度 + // 拼接预览地址 + if ( commonUtils.isNotEmptyArr(picAddr)) { + picAddr.forEach((item) => { + const dataPreviewUrl = `${commonConfig.file_host}file/download?savePathStr=${item}&width=${dWidth}&height=${dHeight}&sModelsId=100&token=${token}`; + previewImageArr.push(dataPreviewUrl); + }); + + imgBox = ( +
+ {picAddr.map((item, index) => { + const dataUrl = `${commonConfig.file_host}file/download?savePathStr=${item}&width=100&height=100&sModelsId=100&token=${token}`; + return ( +
preView(previewImageArr, e)} + onMouseOver={(e) => { + e.currentTarget.style.transform = 'scale(1.05)'; + e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)'; + }} + onMouseOut={(e) => { + e.currentTarget.style.transform = 'scale(1)'; + e.currentTarget.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)'; + }} + > + {`图片 +
+ ); + })} +
+ ); + } + } + return ( + +
+ {/* 左侧字段名 - 增大字体 */} + + {child.showName || child.sName}: + + {/* 右侧图片内容 - 确保不被遮挡 */} +
+ {imgBox || } +
+
+ + ); + } if (child.sControlName?.includes('DividerArea')) { return ( @@ -361,7 +478,7 @@ export default class CommonViewTable extends Component { enabledNew = true; } - const viewRowNew = this.props.getViewRow?.(child) || viewRow; + // const viewRowNew = this.props.getViewRow?.(child) || viewRow; const showTypeProps = { app, diff --git a/src/mobile/common/CommobilePadBill/index.less b/src/mobile/common/CommobilePadBill/index.less index 230c5de..14853af 100644 --- a/src/mobile/common/CommobilePadBill/index.less +++ b/src/mobile/common/CommobilePadBill/index.less @@ -93,6 +93,10 @@ .ant-col { height: 45px; } + #imgView{ + padding:10px; + height:150px!important; + } .ant-col.ant-col-24.ant-col-order-5 { height: auto; @@ -357,4 +361,4 @@ border-top: 1px solid #AAA; font-size: 12px; padding-left: 4px; -} \ No newline at end of file +} diff --git a/src/mobile/components/FileManageMobile.js b/src/mobile/components/FileManageMobile.js index 7c021bf..a64e778 100644 --- a/src/mobile/components/FileManageMobile.js +++ b/src/mobile/components/FileManageMobile.js @@ -237,6 +237,7 @@ class FileManageMobile extends React.Component { const album = commonFunc.showLocalMessage(this.props, 'Album', '相册'); const btnCancel = commonFunc.showLocalMessage(this.props, 'btnCancel', '取消'); + const bPad = location.pathname.toLowerCase()?.indexOf('pad') > -1; /* 上传照片样式定位 */ let imgDivTop = '500'; @@ -250,12 +251,42 @@ class FileManageMobile extends React.Component { } } } + if (bPad) { + // 正确获取单个元素 + const mobileBarStyle = document.getElementById('imgView'); + // 判断元素是否存在 + if (mobileBarStyle) { + // 获取元素高度（3种任选，我给你最稳的） + const obj = mobileBarStyle.getBoundingClientRect(); + const dHeight = document.documentElement.clientHeight; // 屏幕可视高度 + + // 你原来的逻辑我帮你修正 + if (obj.top < dHeight) { + imgDivTop = Math.floor(obj.top + 30); + } + } + } + return (
{commonUtils.isEmptyObject(btnUpdConfig) ? '' :
-
+ {/* 隐藏字段，用于存储所有图片路径 */} + f.filePath).join(',') : ''} + onChange={(e) => { + console.log('隐藏字段值:', e.target.value); + // 触发自定义事件，通知其他组件图片路径更新 + const event = new CustomEvent('picturePathsUpdated', { + detail: { paths: e.target.value } + }); + window.dispatchEvent(event); + }} + /> +
{ commonUtils.isNotEmptyArr(files) && files.length > 0 ? files.map((child) => { -- libgit2 0.22.2