/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-08-10 18:33:51
|
* @LastEditTime: 2023-08-03 14:38:45
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @Version: 1.0.0
|
* @Description: 描述列表
|
*/
|
import React, { useState } from 'react';
|
import { RightArrow2Outlined } from 'dd-icons';
|
import { Space } from 'dingtalk-design-mobile';
|
import { idcard, address, person1, person2 } from '../../assets/img';
|
import ImgShow from '../../components/ImgShow';
|
import { ellipsis, showToast } from '../../utils/utility';
|
|
/**
|
* data: array, [{label:"",value:""}], // 数据
|
* columns: number, // 展示的列数
|
* title: string, // 标题
|
* extra: ReactNode, // 标题右侧的操作区自定义
|
* topRightActionVisible: bool, // 是否展示标题右侧区域
|
* onTopRightAction: func, // 点击标题右侧区域方法回调
|
* layout: string, // horizontal , vertical
|
* colon: bool, // 是否有冒号
|
* textGap: number, // 文字的间距
|
* itemGap: number, // col之间的间距
|
*/
|
const Descriptions = ({
|
data = [],
|
otherData = [],
|
columns = 2,
|
title,
|
extra,
|
topRightActionVisible = false,
|
onTopRightAction = null,
|
layout = 'horizontal',
|
colon = true,
|
textGap = 6,
|
itemGap = 4,
|
}) => {
|
const width = 100 / columns;
|
const [visibles, setVisibles] = useState([]); //显示隐藏引导气泡
|
|
// 显隐
|
function handleVisible(index, visible) {
|
setVisibles(() => {
|
const tmp = new Array(data.length || []).fill(false);
|
if (!visible) {
|
return tmp;
|
} else {
|
tmp.splice(index, 1, visible);
|
return tmp;
|
}
|
})
|
}
|
|
function typeChange(x) {
|
switch (x.type) {
|
case 'idcard':
|
return (
|
<div className="descriptions-card descriptions-card-blue">
|
<div className="descriptions-card-avatar descriptions-card-avatar-blue">
|
<img className="descriptions-card-img" src={idcard} alt="" />
|
</div>
|
<div className="roomDetail-msgCard-content">
|
<Space align="center">
|
<span>{x.title}</span>
|
</Space>
|
<div className="roomDetail-msgCard-content-desc">
|
<span>{x.cardType}</span>
|
<span className="public-rightBorder">{x.contents}</span>
|
</div>
|
</div>
|
</div>
|
);
|
case 'address':
|
return (
|
<div className="descriptions-card descriptions-card-orange">
|
<div className="descriptions-card-avatar descriptions-card-avatar-orange">
|
<img className="descriptions-card-img" src={address} alt="" />
|
</div>
|
<div className="roomDetail-msgCard-content">
|
<Space align="center">
|
<span>{x.title}</span>
|
</Space>
|
<div className="roomDetail-msgCard-content-desc">
|
<span>户籍详址：{x.contents}</span>
|
</div>
|
</div>
|
</div>
|
);
|
case 'abroad':
|
return (
|
<div className="descriptions-card descriptions-card-orange">
|
<div className="descriptions-card-avatar descriptions-card-avatar-orange">
|
<img className="descriptions-card-img" src={address} alt="" />
|
</div>
|
<div className="roomDetail-msgCard-content">
|
<Space align="center">
|
<span>{x.title}</span>
|
</Space>
|
<div className="roomDetail-msgCard-content-desc">
|
<span>来华目的：{x.contents}</span>
|
</div>
|
</div>
|
</div>
|
);
|
case 'files':
|
return (
|
<div className="descriptions-card-files">
|
{x.files?.map((x, t) => (
|
<div className="descriptions-card-files-item" key={t}>
|
<ImgShow fileType={x.type || '22_00017-3'} img={x.showUrl} allImg={x.files} title={x.name} />
|
</div>
|
))}
|
{(x.files || []).length === 0 && (
|
<div className="descriptions-card-files-item">
|
<ImgShow />
|
</div>
|
)}
|
</div>
|
);
|
// 综治相关信息
|
case 'children':
|
return (
|
<div className="descriptions-card-ssim descriptions-card-red">
|
<div className="descriptions-card-ssim-title">综治9+X</div>
|
<div className="roomDetail-msgCard-content" style={{ marginTop: '20px' }}>
|
<Space align="center">
|
<span>{x.title}</span>
|
</Space>
|
<div className="roomDetail-msgCard-content-desc">
|
<span>留守类型：{x.contents}</span>
|
</div>
|
</div>
|
<div className="descriptions-card-ssim-avatar descriptions-card-ssim-avatar-red">
|
<img className="descriptions-card-ssim-img" src={person1} alt="" />
|
</div>
|
</div>
|
);
|
// 综治相关信息
|
case 'teenager':
|
return (
|
<div className="descriptions-card-ssim descriptions-card-red">
|
<div className="descriptions-card-ssim-title">综治9+X</div>
|
<div className="roomDetail-msgCard-content" style={{ marginTop: '20px' }}>
|
<Space align="center">
|
<span>{x.title}</span>
|
</Space>
|
<div className="roomDetail-msgCard-content-desc">
|
<span>{x.teenagerTypeDesc ? (x.teenagerTypeDesc.substring(0, 5) + (x.teenagerTypeDesc.length > 5 ? '...' : '')) : ''}</span>
|
<span className="public-rightBorder">{x.teenagerFamilyDesc ? (x.teenagerFamilyDesc.substring(0, 5) + (x.teenagerFamilyDesc.length > 5 ? '...' : '')) : ''}</span>
|
<span className="public-rightBorder">{x.teenagerHelpDesc ? (x.teenagerHelpDesc.substring(0, 5) + (x.teenagerHelpDesc.length > 5 ? '...' : '')) : ''}</span>
|
</div>
|
</div>
|
<div className="descriptions-card-ssim-avatar descriptions-card-ssim-avatar-red">
|
<img className="descriptions-card-ssim-img" src={person2} alt="" />
|
</div>
|
</div>
|
);
|
case 'build':
|
return;
|
default:
|
return;
|
}
|
}
|
|
return (
|
<>
|
{title && (
|
<div className="descriptions-title">
|
<div className="descriptions-title-left">{title || '标题'}</div>
|
{!!extra
|
? extra
|
: topRightActionVisible && (
|
<div className="descriptions-title-right" onClick={onTopRightAction}>
|
<span>修改信息</span>
|
<RightArrow2Outlined />
|
</div>
|
)}
|
</div>
|
)}
|
{otherData.map((x, t) => {
|
return <React.Fragment key={t}>{typeChange(x)}</React.Fragment>;
|
})}
|
{data?.length > 0 && (
|
<div className="descriptions-grid" style={{ marginTop: `-${itemGap}px` }}>
|
{data.map((x, t) => {
|
return (
|
<div style={{ maxWidth: `${x.width || width}%`, flex: `0 0 ${x.width || width}%`, marginTop: itemGap + 'px' }} key={t}>
|
<div className="descriptions-grid-col" style={{ flexDirection: layout === 'horizontal' ? 'row' : 'column' }}>
|
<div className="descriptions-grid-col-left" style={{ margin: layout === 'horizontal' ? `0 ${textGap}px 0 0` : `0 0 ${textGap}px` }}>
|
{x.label}
|
{colon && ':'}
|
</div>
|
{
|
x.value && x.value.length < 32 ?
|
<pre className="descriptions-grid-col-right">{x.value ? ellipsis(x.value, 32) : '-'}</pre> :
|
<pre onClick={() => showToast.msg({ content: x.value, showType: 'line' })} className="descriptions-grid-col-right">{x.value ? ellipsis(x.value, 32) : '-'}</pre>
|
}
|
</div>
|
</div>
|
);
|
})}
|
</div>
|
)}
|
</>
|
);
|
};
|
|
export default Descriptions;
|
