1.Pad拍照后，支持照片展示，点击预览功能

Min
1 parent 2343083f
Showing 3 changed files with 156 additions and 4 deletions
src/components/Common/CommonViewTable/index.js
src/mobile/common/CommobilePadBill/index.less
src/mobile/components/FileManageMobile.js
@@ -8,7 +8,8 @@ import AntdDraggableModal from &#39;@/components/Common/AntdDraggableModal&#39;;
 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 {
             <Row type="flex" className="viewStyle" style={{ height: 'auto', overflow: 'auto', marginTop: viewOrder ? 0 : '8px' }}>
               {
                 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 = (
+                          <div style={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            gap: '8px',
+                            marginTop: '8px'
+                          }}>
+                            {picAddr.map((item, index) => {
+                              const dataUrl = `${commonConfig.file_host}file/download?savePathStr=${item}&width=100&height=100&sModelsId=100&token=${token}`;
+                              return (
+                                <div
+                                  key={index}
+                                  style={{
+                                    width: '100px',
+                                    height: '100px',
+                                    borderRadius: '6px',
+                                    overflow: 'hidden',
+                                    cursor: 'pointer',
+                                    transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+                                    boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    backgroundColor: '#f5f5f5'
+                                  }}
+                                  onClick={(e) => 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)';
+                                  }}
+                                >
+                                  <img
+                                    src={dataUrl}
+                                    alt={`图片 ${index + 1}`}
+                                    style={{
+                                      width: '100%',
+                                      height: '100%',
+                                      objectFit: 'cover'
+                                    }}
+                                  />
+                                </div>
+                              );
+                            })}
+                          </div>
+                        );
+                      }
+                    }
+                    return (
+                      <Col key={child.sId} span={iColValue} order={iOrder} id="imgView" >
+                        <div style={{
+                          display: 'flex',
+                          alignItems: 'flex-start',
+                          padding: '8px 0 16px 0',
+                          minHeight: '140px',
+                          marginBottom: '16px',
+                          position: 'relative',
+                          zIndex: 1,
+                          height:'100px'
+                        }}>
+                          {/* 左侧字段名 - 增大字体 */}
+                          <span style={{
+                            flex: 'none',
+                            paddingRight: '12px',
+                            // fontWeight: 'bold',
+                            minWidth: '90px',
+                            fontSize: '18px',
+                            color: 'rgba(0, 0, 0, 0.85)',
+                            lineHeight: '28px',
+                          }}>
+                            {child.showName || child.sName}:
+                          </span>
+                          {/* 右侧图片内容 - 确保不被遮挡 */}
+                          <div style={{
+                            flex: 1,
+                            marginLeft: '55px',
+                            minHeight: '120px',
+                            overflow: 'visible',
+                            paddingBottom: '8px'
+                          }}>
+                            {imgBox || <span style={{ color: '#999', fontSize: '18px' }}></span>}
+                          </div>
+                        </div>
+                      </Col>
+                    );
+                  }
                   if (child.sControlName?.includes('DividerArea')) {
                     return (
                       <Col key={child.sId} span={24} order={iOrder}>
@@ -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,
@@ -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
+}
@@ -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 (
       <div>
         {commonUtils.isEmptyObject(btnUpdConfig) ? '' :
         <div className="content">
-          <div className={styles.commonImage} id="imgDiv" key="imgDivKey" style={{ top: imgDivTop }}>
+          {/* 隐藏字段，用于存储所有图片路径 */}
+          <input
+            type="hidden"
+            id="hiddenPicturePaths"
+            value={commonUtils.isNotEmptyArr(files) ? files.map(f => f.filePath).join(',') : ''}
+            onChange={(e) => {
+              console.log('隐藏字段值:', e.target.value);
+              // 触发自定义事件，通知其他组件图片路径更新
+              const event = new CustomEvent('picturePathsUpdated', {
+                detail: { paths: e.target.value }
+              });
+              window.dispatchEvent(event);
+            }}
+          />
+          <div className={styles.commonImage} id="imgDiv" key="imgDivKey" style={{ top: imgDivTop,  left: bPad ? '20%'  : null }} >
             {
               commonUtils.isNotEmptyArr(files) && files.length > 0 ?
                 files.map((child) => {