import React, { useState } from 'react';
|
import { TelephoneOutlined } from 'dd-icons';
|
import { Space } from 'dingtalk-design-mobile';
|
import { dateFormat, myTimeFormat } from '../../utils/utility';
|
import './index.less';
|
import obj from '../../utils/selectOption';
|
import {
|
coordinate_1,
|
coordinate_2,
|
PersonnelNews_1,
|
PersonnelNews_2,
|
assistHeading_1,
|
assistHeading_2,
|
assistHeading_3,
|
assistHeading_4,
|
assistHeading_5,
|
Residential_1,
|
} from '../../assets/img';
|
|
import ImgShow from '../../components/ImgShow';
|
|
/**
|
* list: array, // 列表模型
|
* data: object, // 对象数据
|
* marginTop: bool, // 是否有上边距
|
* marginBottom: bool, // 是否有下边距
|
* detailClick: fun //查看按钮
|
* noPaddingTop:不要上面灰色间距
|
*/
|
const Info = ({
|
list,
|
data,
|
OnClick,
|
detailClick,
|
showButtons = true,
|
noPaddingTop = false,
|
showCard = false,
|
ChangeOnClick,
|
showCard1 = false,
|
showShow = false,
|
otherInfo = false,
|
showMain = false,
|
show1 = false,
|
}) => {
|
function typeChange(x) {
|
switch (x.type) {
|
case 'text':
|
return (
|
<div className="Info-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="Info-card-title">{x.title}</div>
|
<div className="Info-card-value">
|
{x.key ? (
|
<span>{x.key}</span>
|
) : (
|
<>
|
{x.value === 'userTotal' || x.value === 'personAmount' ? (
|
<span>
|
{data[x.value] || 0}
|
{x.unit}
|
</span>
|
) : x.value === 'onDuty' ? (
|
<span>{data[x.value] === 1 ? '是' : '否'}</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 'select':
|
return (
|
<div className="Info-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="Info-card-title">{x.title}</div>
|
<div className="Info-card-value">
|
{x.key ? (
|
<span>{x.key}</span>
|
) : (
|
<>
|
{data[x.value] !== null ? <span>{obj[x.value]?.find((item) => item.value === data[x.value])?.label || '-'}</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="Info-card-heading" style={{ paddingTop: x.paddingTop && '6px', paddingBottom: x.paddingBottom && '6px' }}>
|
{x.title}
|
</div>
|
);
|
case 'newHeading':
|
return <></>;
|
case 'newText':
|
return (
|
<div
|
style={{
|
display: 'flex',
|
flexWrap: 'wrap',
|
paddingRight: '20%',
|
background: '#fff',
|
gap: '8px',
|
paddingLeft: '16px',
|
paddingBottom: x.paddingBottom && '12px',
|
}}
|
>
|
<div className="Info-card-title">{x.title}</div>
|
|
{/* <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="Info-card-value-posCount">
|
<div className="Info-card-value-posCount-number">
|
<div className="Info-card-value-posCount-number-first">{item.posName.charAt(0)}</div>
|
<div className="Info-card-value-posCount-number-second">{item.posName}</div>
|
<div className="Info-card-value-posCount-number-third">
|
<span onClick={() => detailClick()} className="public-color">
|
{x.clickableText}
|
</span>
|
</div>
|
</div>
|
</div>
|
))}
|
</div>
|
);
|
case 'newText1':
|
return (
|
<div
|
style={{
|
display: 'flex',
|
flexWrap: 'wrap',
|
paddingRight: '20%',
|
background: '#fff',
|
gap: '8px',
|
paddingLeft: '16px',
|
paddingBottom: x.paddingBottom && '12px',
|
}}
|
>
|
<div className="Info-card-title">{x.title}</div>
|
|
{/* <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="Info-card-value-posCount">
|
<div className="Info-card-value-posCount-number">
|
<div className="Info-card-value-posCount-number-first">{item.personName ? item.personName.charAt(0) : '-'}</div>
|
<div className="Info-card-value-posCount-number-second">{item.personName}</div>
|
<div className="Info-card-value-posCount-number-third">
|
<span
|
onClick={(v) => {
|
console.log(v, '11111111111');
|
ChangeOnClick('1');
|
}}
|
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 'img':
|
return (
|
<div className="Info-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="Info-card-title">{x.title}</div>
|
<div style={{ display: 'flex', gap: '8px' }}>
|
<ImgShow
|
fileType="22_00017-3"
|
title="身份证人像"
|
width={68} // 或者提供适当的width值
|
isShowBig={true} // 或者提供适当的isShowBig值
|
isDelete={false} // 或者提供适当的isDelete值
|
/>
|
<ImgShow
|
fileType="22_00017-3"
|
title="身份证国徽"
|
width={68} // 或者提供适当的width值
|
isShowBig={true} // 或者提供适当的isShowBig值
|
isDelete={false} // 或者提供适当的isDelete值
|
/>
|
</div>
|
</div>
|
);
|
case 'img1':
|
return (
|
<div className="Info-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="Info-card-title">{x.title}</div>
|
<div style={{ display: 'flex', gap: '8px' }}>
|
<ImgShow noTitle={true} width={68} isShowBig={true} isDelete={false} />
|
</div>
|
</div>
|
);
|
case 'householdBook':
|
return (
|
<div className="Info-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="Info-card-title">{x.title}</div>
|
<div style={{ display: 'flex', gap: '8px' }}>
|
<ImgShow
|
fileType="22_00017-2"
|
title="户口簿地址"
|
width={68}
|
isShowBig={true}
|
isDelete={false} // 或者提供适当的isDelete值
|
/>
|
<ImgShow
|
fileType="22_00017-3"
|
title="户主页"
|
width={68} // 或者提供适当的width值
|
isShowBig={true} // 或者提供适当的isShowBig值
|
isDelete={false} // 或者提供适当的isDelete值
|
/>
|
<ImgShow
|
fileType="22_00017-3"
|
title="本人页正面"
|
width={68} // 或者提供适当的width值
|
isShowBig={true} // 或者提供适当的isShowBig值
|
isDelete={false} // 或者提供适当的isDelete值
|
/>
|
<ImgShow
|
fileType="22_00017-3"
|
title="本人页反面"
|
width={68} // 或者提供适当的width值
|
isShowBig={true} // 或者提供适当的isShowBig值
|
isDelete={false} // 或者提供适当的isDelete值
|
/>
|
</div>
|
</div>
|
);
|
case 'assistCase':
|
return (
|
<>
|
{x.assistList.map((item, index) => (
|
<div style={{ backgroundColor: '#fff', paddingBottom: '12px' }}>
|
<div style={{ margin: '0px 16px ', backgroundColor: '#F2F2F2', borderRadius: '8px' }} key={index}>
|
<div style={{ display: 'flex', marginBottom: '4px' }}>
|
<img
|
style={{ width: '16px', height: '16px', margin: '12px 8px 0px 12px', paddingTop: '5px' }}
|
src={
|
item.assistType === '1'
|
? assistHeading_1
|
: item.assistType === '3'
|
? assistHeading_3
|
: item.assistType === '4'
|
? assistHeading_4
|
: item.assistType === '5'
|
? assistHeading_5
|
: item.assistType === '6'
|
? Residential_1
|
: assistHeading_2
|
}
|
alt=""
|
srcSet=""
|
/>
|
<div
|
style={{
|
fontSize: '16px',
|
margin: '12px 0px 0px 0px',
|
color:
|
item.assistType === '1'
|
? '#007FFF'
|
: item.assistType === '3'
|
? '#00B042'
|
: item.assistType === '4'
|
? '#007FFF'
|
: item.assistType === '5'
|
? '#FF9200'
|
: item.assistType === '6'
|
? '#007FFF'
|
: '#FF9200',
|
}}
|
>
|
{item.assistTitle}
|
</div>
|
<div>{item.value}</div>
|
</div>
|
|
{item.assistTexts.map((text, idx) => (
|
<div key={idx}>
|
<div style={{ paddingTop: text.paddingTop && '12px', paddingBottom: text.paddingBottom && '12px', padding: '8px 12px 0px' }}>
|
<div className="Info-card-title">{text.title}</div>
|
<div style={{ fontSize: '14px', lineHeight: '24px', marginTop: '4px', paddingBottom: text.paddingBottom && '12px' }}>
|
{data[text.value] !== null ? data[text.value] : '-'}
|
</div>
|
</div>
|
</div>
|
))}
|
</div>
|
</div>
|
))}
|
</>
|
);
|
|
case 'label':
|
return (
|
<>
|
{x.labelContents.map((item, index) => (
|
<div className="Info-card" key={index}>
|
<div onClick={() => OnClick(x.type, index)} className={`Info-card-label ${item.labelType && 'Info-card-label-focus'}`}>
|
{item.houseaddress || '-'}
|
</div>
|
</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 'divider':
|
return <div className="Info-card-divider public-space">{x.title}</div>;
|
case 'phone':
|
return (
|
<div className="Info-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="Info-card-title">{x.title}</div>
|
<Space align="center">
|
{data[x.value] && (
|
<>
|
<div className="Info-card-value">{data[x.value]}</div>
|
</>
|
)}
|
{data[x.phoneValue] ? <TelephoneOutlined /> : null}
|
{data[x.phoneValue] && <div className="Info-card-value">{data[x.phoneValue] || '-'}</div>}
|
</Space>
|
</div>
|
);
|
case 'number':
|
return (
|
<div className="Info-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="Info-card-title">{x.title}</div>
|
<div className="Info-card-value">{data[x.value] || '-'}</div>
|
</div>
|
);
|
case 'time':
|
return (
|
<div className="Info-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="Info-card-title">{x.title}</div>
|
<div className="infoView-card-value">{data[x.value] ? myTimeFormat(data[x.value], 'YYYY.M.D') : '-'}</div>
|
</div>
|
);
|
case 'rangeTime':
|
return (
|
<div className="Info-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="Info-card-title">{x.title}</div>
|
<div className="infoView-card-value">
|
{data[x.startValue] ? myTimeFormat(data[x.startValue], 'YYYY.M.D') : '-'}至
|
{data[x.endValue] ? myTimeFormat(data[x.endValue], 'YYYY.M.D') : '-'}
|
</div>
|
</div>
|
);
|
case 'diy':
|
return (
|
<div className="infoView-card" style={{ paddingTop: x.paddingTop && '12px', paddingBottom: x.paddingBottom && '12px' }}>
|
<div className="Info-card-title">{x.title}</div>
|
{x.value}
|
</div>
|
);
|
case 'build':
|
return;
|
default:
|
return;
|
}
|
}
|
|
return (
|
<div className={`Info ${otherInfo && 'Info-otherInfo'}`}>
|
<div className={`Info-main ${showMain && 'Info-main1'}`}>
|
{list.map((x, t) => {
|
return <div key={t}>{typeChange(x)}</div>;
|
})}
|
</div>
|
|
{showButtons && (
|
<div className="Info-foot">
|
<div
|
className="Info-foot-card"
|
onClick={(v) => {
|
console.log(v, '11111111111');
|
ChangeOnClick('1');
|
}}
|
>
|
<img style={{ width: '24px', height: '24px' }} src={showCard ? PersonnelNews_1 : PersonnelNews_2} alt="" srcset="" />
|
<div className={showCard ? 'public-color' : null}>人员信息</div>
|
</div>
|
<div
|
className="Info-foot-card"
|
onClick={(v) => {
|
console.log(v, '11111111111');
|
ChangeOnClick('2');
|
}}
|
>
|
<img style={{ width: '24px', height: '24px' }} src={showCard1 ? coordinate_2 : coordinate_1} alt="" srcset="" />
|
<div className={showCard1 ? 'public-color' : null}>居住信息</div>
|
</div>
|
</div>
|
)}
|
|
{showShow && <div style={{ paddingBottom: '16px' }}></div>}
|
{show1 && <div style={{ paddingTop: '16px' }}></div>}
|
</div>
|
);
|
};
|
|
export default Info;
|
