/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2023-08-22 09:09:28
|
* @LastEditTime: 2025-04-08 14:59:04
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description:
|
*/
|
import React, { useState } from 'react';
|
import { myTimeFormat, getAgeByIdcard } from '../../utils/utility';
|
import { remove_1, modify_1, visit_1 } from '../../assets/img';
|
import ModalNewContent from '../../components/ModalNewContent';
|
import './index.less';
|
|
/**
|
* list: array, // 列表模型
|
* data: object, // 对象数据
|
* marginTop: bool, // 是否有上边距
|
* marginBottom: bool, // 是否有下边距
|
* detailClick: fun //查看按钮
|
* noPaddingTop:不要上面灰色间距
|
*/
|
const InfoView = ({ list, data, OnClick, detailClick, showButtons = true, noPaddingTop = false, showCard = true }) => {
|
const [showModal, setShowModal] = useState({ visible: false, data: {} });
|
|
function typeChange(x) {
|
switch (x.type) {
|
case 'text':
|
return (
|
<div className="infoView-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="infoView-card-title">{x.title}</div>
|
<div className="infoView-card-value">
|
{x.key ? (
|
<span>{x.key}</span>
|
) : (
|
<>
|
{x.value === 'userTotal' || x.value === 'personAmount' ? (
|
<span>
|
{data[x.value] || 0}
|
{x.unit}
|
</span>
|
) : data[x.value] !== null ? (
|
<span>{data[x.value] || '-'}</span>
|
) : (
|
<span>-</span>
|
)}
|
</>
|
)}
|
{data[x.value] > 0 && x.value !== 'posCount' && x.clickableText && (
|
<span onClick={() => detailClick(x.title, data.coreId)} className="public-color">
|
{x.clickableText}
|
</span>
|
)}
|
</div>
|
</div>
|
);
|
case 'heading':
|
return (
|
<div className="infoView-card-heading" style={{ paddingTop: x.paddingTop && '6px', paddingBottom: x.paddingBottom && '6px' }}>
|
{x.title}
|
</div>
|
);
|
|
case 'headingTitle':
|
return (
|
<div className="infoView-card-headingTitle" style={{ paddingTop: x.paddingTop && '6px', paddingBottom: x.paddingBottom && '6px' }}>
|
{x.title}
|
</div>
|
);
|
|
case 'newText':
|
return (
|
<div style={{ display: 'flex', flexWrap: 'wrap', paddingRight: '20%', background: '#fff', gap: '8px', paddingLeft: '16px' }}>
|
{/* <div className='infoView-card-title'>
|
{x.title}
|
</div>
|
<div className="infoView-card-value">
|
{data[x.value] || '-'}
|
</div> */}
|
{x.list?.length > 0 &&
|
x.list?.map((item, index) => (
|
<div key={index} className="infoView-card-value-posCount">
|
<div className="infoView-card-value-posCount-number">
|
<div className="infoView-card-value-posCount-number-first">{item.posName.charAt(0)}</div>
|
<div className="infoView-card-value-posCount-number-second">{item.posName}</div>
|
<div className="infoView-card-value-posCount-number-third">
|
<span onClick={detailClick} className="public-color">
|
{x.clickableText}
|
</span>
|
</div>
|
</div>
|
</div>
|
))}
|
</div>
|
);
|
case 'rowPersons':
|
return (
|
<div
|
style={{
|
display: 'flex',
|
paddingTop: '12px',
|
paddingBottom: '12px',
|
flexDirection: 'column',
|
flexWrap: 'wrap',
|
paddingRight: '24px',
|
background: '#fff',
|
gap: '8px',
|
paddingLeft: '16px',
|
}}
|
>
|
{x.list?.length > 0 &&
|
x.list?.map((item, index) => (
|
<div key={index} className="infoView-card-value-posCount">
|
<div style={{ width: '100%', justifyContent: 'space-between', padding: '0 8px' }} className="infoView-card-value-posCount-number">
|
<div style={{ display: 'flex' }}>
|
<div style={{ width: 'auto', padding: '0 4px' }} className="infoView-card-value-posCount-number-first">
|
{item.personName?.charAt(0)}
|
</div>
|
<div className="building-subtitle">
|
{/* <div style={{ padding: ' 0 4px ' }} className='infoView-card-value-posCount-number-second'>{item.personName}</div>
|
<div style={{ margin: '0' }} className="public-split" /> */}
|
<div style={{ padding: ' 0 4px ' }} className="infoView-card-value-posCount-number-second">
|
{item.sexDesc}
|
</div>
|
<div style={{ margin: '0' }} className="public-split" />
|
<div style={{ padding: ' 0 4px ' }} className="infoView-card-value-posCount-number-second">
|
{item.idcard ? getAgeByIdcard(item.idcard) : ''}
|
</div>
|
<div style={{ margin: '0' }} className="public-split" />
|
<div style={{ padding: ' 0 4px' }} className="infoView-card-value-posCount-number-second">
|
{item.idcard}
|
</div>
|
</div>
|
</div>
|
<div className="infoView-card-value-posCount-number-third">
|
<span onClick={() => setShowModal({ visible: true, data: item })} className="public-color">
|
{x.clickableText}
|
</span>
|
</div>
|
</div>
|
</div>
|
))}
|
</div>
|
);
|
case 'hasMore':
|
return (
|
<div style={{ backgroundColor: '#fff' }} onClick={() => OnClick(x.title)}>
|
<div style={{ backgroundColor: '#fff', height: '12px' }}></div>
|
<div style={{ border: '1px solid rgba(126,134,142,0.16)', marginLeft: '12PX', marginRight: '12px' }}></div>
|
<div
|
style={{
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
color: '#007FFF',
|
paddingTop: '12px',
|
paddingBottom: '12px',
|
backgroundColor: '#fff',
|
}}
|
>
|
<div style={{ paddingRight: '8px' }}>{x.title}</div>
|
<img src={x.img} alt="" srcset="" style={{ width: '14px', height: '14px', verticalAlign: 'middle' }} />
|
</div>
|
</div>
|
);
|
case 'divider':
|
return <div className="public-space">{x.title}</div>;
|
case 'editor':
|
return (
|
<div className="infoView-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="infoView-card-title">{x.title}</div>
|
<div style={{ display: 'flex' }}>
|
{data[x.value] && (
|
<>
|
<div className="infoView-card-value">{data[x.value]}</div>
|
</>
|
)}
|
{data[x.editorOption] && <div className="infoView-card-value">（{data[x.editorOption] || '-'}）</div>}
|
</div>
|
</div>
|
);
|
case 'number':
|
return (
|
<div className="infoView-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="infoView-card-title">{x.title}</div>
|
<div className="infoView-card-value">{data[x.value] || '-'}</div>
|
</div>
|
);
|
case 'time':
|
return (
|
<div className="infoView-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="infoView-card-title">{x.title}</div>
|
<div className="infoView-card-value">{data[x.value] ? myTimeFormat(data[x.value], 'YYYY.M.D') : '-'}</div>
|
</div>
|
);
|
case 'switch':
|
return (
|
<div className="infoView-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="infoView-card-title">{x.title}</div>
|
<div className="infoView-card-value">
|
<span>{data[x.value] === 1 ? '是' : data[x.value] === 2 ? '否' : '-'}</span>
|
</div>
|
</div>
|
);
|
|
case 'diy':
|
return (
|
<div className="infoView-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="infoView-card-title">{x.title}</div>
|
{x.value}
|
</div>
|
);
|
case 'build':
|
return;
|
default:
|
return;
|
}
|
}
|
|
return (
|
<div className={`infoView ${noPaddingTop && 'infoView-noPadding'}`}>
|
<div className="infoView-main">
|
{list.map((x, t) => {
|
return <div key={t}>{typeChange(x)}</div>;
|
})}
|
</div>
|
|
{showButtons && (
|
<div>
|
<div className="newFoot">
|
{/* <div
|
className='newFoot-item'
|
onClick={() => { OnClick('del') }}
|
>
|
<img
|
className='newFoot-img'
|
src={remove_1}
|
alt=""
|
srcset=""
|
/>
|
</div> */}
|
<div
|
className="newFoot-itemEdit"
|
onClick={() => {
|
OnClick('edit');
|
}}
|
>
|
<img className="newFoot-img" src={modify_1} alt="" srcset="" />
|
</div>
|
</div>
|
{showCard && <div style={{ height: '18px', backgroundColor: '' }}></div>}
|
</div>
|
// <div className='infoView-foot-button'>
|
// <Button
|
// onClick={() => { OnClick('del') }}
|
// className='infoView-foot-button-del'
|
// style={{ flex: 1, marginRight: '8px', border: '1px solid #F5222D', color: '#F5222D' }}
|
// >
|
// 删除
|
// </Button>
|
// <Button
|
// className='infoView-foot-button-edit'
|
// type="primary" onClick={() => {
|
// OnClick('edit');
|
// }}>
|
// 修改
|
// </Button>
|
// </div>
|
)}
|
<ModalNewContent
|
headStyle={{ textAlign: 'center' }}
|
footBackground={false}
|
onOk={false}
|
content={
|
<>
|
{/* <div className='ModalLContent-head' style={{ textAlign: 'center' }} >走访样图111</div> */}
|
<div className="ModalLContent-content" style={{ backgroundColor: '#fff', borderRadius: '10px 10px' }}>
|
<div style={{ padding: '0px 16px 16px 16px' }}>
|
<div style={{ paddingTop: '6px' }}>
|
<div className="infoView-card">
|
<div className="infoView-card-title">姓名</div>
|
<div className="infoView-card-value">
|
<span>{showModal?.data?.personName}</span>
|
</div>
|
</div>
|
<div className="infoView-card">
|
<div className="infoView-card-title">性别</div>
|
<div className="infoView-card-value">
|
<span>{showModal?.data?.sexCode || '-'}</span>
|
</div>
|
</div>
|
<div className="infoView-card">
|
<div className="infoView-card-title">证件类型</div>
|
<div className="infoView-card-value">
|
<span>{showModal?.data?.permitTypeDesc || '-'}</span>
|
</div>
|
</div>
|
<div className="infoView-card">
|
<div className="infoView-card-title">身份证号</div>
|
<div className="infoView-card-value">
|
<span>{showModal?.data?.idcard}</span>
|
</div>
|
</div>
|
<div className="infoView-card">
|
<div className="infoView-card-title">民族</div>
|
<div className="infoView-card-value">
|
<span>{showModal?.data?.nationalDesc}</span>
|
</div>
|
</div>
|
<div className="infoView-card">
|
<div className="infoView-card-title">学历</div>
|
<div className="infoView-card-value">
|
<span>{showModal?.data?.educationDesc || '-'}</span>
|
</div>
|
</div>
|
<div className="infoView-card">
|
<div className="infoView-card-title">人员类型</div>
|
<div className="infoView-card-value">
|
<span>{showModal?.data?.personTypeDesc || '-'}</span>
|
</div>
|
</div>
|
<div className="infoView-card">
|
<div className="infoView-card-title">籍贯编码</div>
|
<div className="infoView-card-value">
|
<span>{showModal?.data?.birthplaceDesc || '-'}</span>
|
</div>
|
</div>
|
<div className="infoView-card">
|
<div className="infoView-card-title">年龄</div>
|
<div className="infoView-card-value">
|
<span>{showModal?.data?.age || '-'}</span>
|
</div>
|
</div>
|
<div className="infoView-card">
|
<div className="infoView-card-title">出生日期</div>
|
<div className="infoView-card-value">
|
<span>{showModal?.data?.birthdate}</span>
|
</div>
|
</div>
|
<div className="infoView-card">
|
<div className="infoView-card-title">地址</div>
|
<div className="infoView-card-value">
|
<span>{showModal?.data?.personAddress}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</>
|
}
|
visible={showModal.visible}
|
visibleOnClick={() => setShowModal({ visible: false, data: {} })}
|
/>
|
</div>
|
);
|
};
|
|
export default InfoView;
|
