Skip to content

W
WebPublic
提交 5d80a7c8 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

35251 【附件组件】附件布局优化！

上级 c2549a44
隐藏空白字符变更
内嵌 并排
正在显示 包含 127 行增加 和 94 行删除
one_stop_public/filePreview/index.jsx
浏览文件 @ 5d80a7c8
......@@ -5,6 +5,7 @@ import React, { Component } from 'react';
import { checkIsImage } from '@/webPublic/one_stop_public/libs/UploadCom';
import { getModal, getPopconfirm, isFromIframe } from '@/webPublic/one_stop_public/utils/utils';
import Viewer from 'react-viewer';
import styles from './styles.less';
// const FileViewer = CLIENT_TYPE === 'mobile' ? null : require('react-file-viewer');
const FileViewer = null;
......@@ -84,17 +85,17 @@ export default class index extends Component {
cancelText={isFromIframe() ? '取消' : '预览'}
>
{isImg ? (
<img
ref={node => {
this.imageDom = node;
}}
style={{
width: width ? width : '100px',
height: height ? height : 'auto',
}}
src={path}
alt={pathName}
/>
<div ref={node => {
this.imageDom = node;
}}
className={styles.imgDiv}
style={{
width: width ? width : '100px',
height: height ? height : 'auto',
backgroundImage: `url(${path})`,
}}
>
</div>
) : (
<a target="_blank" href={path}>
{pathName}
......
one_stop_public/filePreview/styles.less 0 → 100644
浏览文件 @ 5d80a7c8
.imgDiv{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
one_stop_public/libs/Split/UploadComReadOnly.js 0 → 100644
浏览文件 @ 5d80a7c8
import React from 'react';
import { isEmpty } from 'lodash';
import { isJSON } from '@/webPublic/one_stop_public/2022beidianke/isJSON';
import styles from '@/webPublic/one_stop_public/tableCompon/style.less';
import FilePreview from '@/webPublic/one_stop_public/filePreview';
import { queryFileUrl } from '@/webPublic/one_stop_public/utils/queryConfig';
export default function UploadComReadOnly(props) {
const { obj, dataColumn, get, isPrint, otherProps = {} } = props;
console.log(otherProps);
let cm = '';
/**
* 查找不到数据 添加判断
* 只有一个附件返回的是一个对象不是数组,暂时使用2个判断
*/
if (!isEmpty(obj[dataColumn.base52])) {
// 首先判断是否为空对象
let ary;
/**
* 判断返回值是否为JSON字符串,不是则直接使用
*/
if (isJSON(obj[dataColumn.base52])) {
ary = JSON.parse(obj[dataColumn.base52]);
} else {
ary = obj[dataColumn.base52];
}
if (!!ary.files) {
// 然后判断存在多个附件的数组是否存在
const files = !isEmpty(ary) ? ary.files : [];
cm = (
<ul className={styles.imageUl}
style={ get === 'web' && otherProps.readOnlyWebFileStyle ? otherProps.readOnlyWebFileStyle : {} }
>
{files.map((f, index2) => {
if (get === 'web' && !isPrint) {
return (
<li key={index2}>
<FilePreview path={queryFileUrl(f.path)}
pathName={f.name}
type={'UploadCom'}
width={otherProps.readOnlyWebFileWidth || '100px'}
height={otherProps.readOnlyWebFileHeight || '100px'}
/>
</li>
);
}
return (
<li key={index2}>
<a target="_blank" key={f.path} href={queryFileUrl(f.path)}>
{f.name}
</a>
</li>
);
})}
</ul>
);
} else {
const files = !isEmpty(ary) ? ary : [];
cm = (
<ul className={styles.imageUl}>
{Array.isArray(files) &&
files.map((f, index2) => {
if (get === 'web' || !isPrint) {
return (
<li key={index2}>
<FilePreview path={queryFileUrl(f.path)} pathName={f.name} type={'UploadCom'} />
</li>
);
}
return (
<li key={index2}>
<a target="_blank" key={f.filePath} href={queryFileUrl(f.filePath)}>
{f.fileName}
</a>
</li>
);
})}
</ul>
);
}
} else {
cm = (
<span
style={{
display: 'inline-block',
width: '100%',
textAlign: 'center',
}}>
暂无附件
</span>
);
}
return cm;
}
one_stop_public/tableCompon/index.jsx
浏览文件 @ 5d80a7c8
......@@ -94,6 +94,7 @@ import {
getLabelsApi,
getOptionsApi,
} from '../Services/apiConfig';
import UploadComReadOnly from '@/webPublic/one_stop_public/libs/Split/UploadComReadOnly';
/**
* 日期组件antd3.x有bug 详情见禅道 27152 毕业跟踪调查管理 毕业时间改为年级筛选
*/
......@@ -2409,90 +2410,21 @@ ${obj[dataColumn.base52]}
break;
case 'UploadCom':
/**
* 查找不到数据 添加判断
* 只有一个附件返回的是一个对象不是数组,暂时使用2个判断
*/
if (!isEmpty(obj[dataColumn.base52])) {
// 首先判断是否为空对象
let ary;
/**
* 判断返回值是否为JSON字符串,不是则直接使用
*/
if (isJSON(obj[dataColumn.base52])) {
ary = JSON.parse(obj[dataColumn.base52]);
} else {
ary = obj[dataColumn.base52];
}
if (!!ary.files) {
// 然后判断存在多个附件的数组是否存在
const files = !isEmpty(ary) ? ary.files : [];
cm = (
<ul className={styles.imageUl}>
{files.map((f, index2) => {
if (get === 'web' && !this.props.isPrint) {
return (
<li key={index2}>
<FilePreview
path={queryFileUrl(f.path)}
pathName={f.name}
type={'UploadCom'}
/>
</li>
);
}
return (
<li key={index2}>
<a target="_blank" key={f.path} href={queryFileUrl(f.path)}>
{f.name}
</a>
</li>
);
})}
</ul>
);
} else {
const files = !isEmpty(ary) ? ary : [];
cm = (
<ul className={styles.imageUl}>
{Array.isArray(files) &&
files.map((f, index2) => {
if (get === 'web' || !this.props.isPrint) {
return (
<li key={index2}>
<FilePreview
path={queryFileUrl(f.path)}
pathName={f.name}
type={'UploadCom'}
/>
</li>
);
}
return (
<li key={index2}>
<a target="_blank" key={f.filePath} href={queryFileUrl(f.filePath)}>
{f.fileName}
</a>
</li>
);
})}
</ul>
);
if (json?.otherProps) {
otherProps = json?.otherProps;
try {
// mode = multiple 就支持下拉多选了
otherProps = new Function(otherProps)();
} catch (e) {
otherProps = {};
}
} else {
cm = (
<span
style={{
display: 'inline-block',
width: '100%',
textAlign: 'center',
}}
>
暂无附件
</span>
);
}
cm = <UploadComReadOnly get={get}
obj={obj}
dataColumn={dataColumn}
isPrint={this.props.isPrint}
otherProps={otherProps}
/>
break;
case 'ImgUploadCom':
if (obj[dataColumn.base52] == null || obj[dataColumn.base52] == '') {
......
one_stop_public/tableCompon/style.less
浏览文件 @ 5d80a7c8
......@@ -305,7 +305,7 @@
justify-items: center;
align-items: center;
column-gap: 10px;
row-gap: 10px;
li {
width: 120px;
min-height: 50px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论