58 lines
2.4 KiB
JavaScript
58 lines
2.4 KiB
JavaScript
import React from 'react';
|
|
import { Space, Image } from 'antd-mobile';
|
|
import styles from './mobile.module.less';
|
|
import { getLabel, getType, getValue } from '../../utils/usefulFn';
|
|
function RenderRow(props) {
|
|
const { type, label, value } = props;
|
|
if (type === 'image') {
|
|
if (value instanceof Array) {
|
|
return (<div className={styles.renderRow}>
|
|
<div className={styles.renderLabel}>
|
|
{label}
|
|
</div>
|
|
<Space wrap>
|
|
{value.map((ele) => (<Image width={70} height={70} src={ele} fit="contain"/>))}
|
|
</Space>
|
|
</div>);
|
|
}
|
|
else {
|
|
return (<div className={styles.renderRow}>
|
|
<div className={styles.renderLabel}>
|
|
{label}
|
|
</div>
|
|
<Space wrap>
|
|
<Image width={70} height={70} src={value} fit="contain"/>
|
|
</Space>
|
|
</div>);
|
|
}
|
|
}
|
|
return (<div className={styles.renderRow}>
|
|
<div className={styles.renderLabel}>
|
|
{label}
|
|
</div>
|
|
<div className={styles.renderValue}>{value ? String(value) : '--'}</div>
|
|
</div>);
|
|
}
|
|
export default function Render(props) {
|
|
const { methods, data: oakData } = props;
|
|
const { t } = methods;
|
|
const { title, renderData, entity, judgeAttributes, data } = oakData;
|
|
return (<div className={styles.panel}>
|
|
{title && <div className={styles.title}>{title}</div>}
|
|
<div className={styles.panel_content}>
|
|
<Space direction="vertical" style={{ '--gap': '10px' }}>
|
|
{judgeAttributes &&
|
|
judgeAttributes.map((ele) => {
|
|
let renderValue = ele.render ? ele.render(data) : getValue(data, ele.path, ele.entity, ele.attr, ele.attrType, t);
|
|
let renderLabel = getLabel(ele.attribute, ele.entity, ele.attr, t);
|
|
const renderType = getType(ele.attribute, ele.attrType);
|
|
if ([null, '', undefined].includes(renderValue)) {
|
|
renderValue = t('not_filled_in');
|
|
}
|
|
return (<RenderRow label={renderLabel} value={renderValue} type={renderType}/>);
|
|
})}
|
|
</Space>
|
|
</div>
|
|
</div>);
|
|
}
|