/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-09-16 16:23:48
|
* @LastEditTime: 2023-05-24 19:55:38
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 房间列表 - 列表
|
*/
|
import React, { useEffect } from 'react';
|
import { useHistory } from 'react-router-dom';
|
import { Space } from 'dingtalk-design-mobile';
|
import MyList from '../MyList';
|
import RoomNumberGrid from './RoomNumberGrid';
|
import ImgShow from '../ImgShow';
|
import { room_1 } from '../../assets/icon';
|
import { searchTitle, dateFormat, getUpdateStr, getQueryString, appUrl } from '../../utils/utility';
|
import routerStatus from '../../status/router';
|
|
const RoomList = ({ search, pattern, data, hasMore, getScrollTopKey, address, scrollTop, searchValue, getRoomData }) => {
|
const history = useHistory();
|
|
const buildingAddress = getQueryString('address'); // 楼栋名称
|
|
// 跳转到房间详情
|
function handleGoToDetail(id, item) {
|
const { unit, housenumber, houseUseName, houseUse } = item;
|
history.push(
|
`/hztGrid/room/detail?id=${id}&address=${buildingAddress}`
|
);
|
}
|
|
// 加载更多数据
|
function handleLoadMore(callback) {
|
getRoomData({ ...search, page: search.page + 1, size: 10 }, pattern, '', callback);
|
}
|
|
// 处理当房间被删除时返回到此页面刷新
|
useEffect(() => {
|
if (routerStatus.spinPage['room']) {
|
getRoomData({ ...search, page: 1, size: search.page * search.size }, pattern, 'spin', '');
|
routerStatus.setSpinPage('building');
|
routerStatus.clearSpinPage('room');
|
routerStatus.setPageScrollTopNow('room');
|
}
|
}, [routerStatus.spinPage['room']]);
|
|
return pattern === 1 ? (
|
<MyList
|
data={data}
|
hasMore={hasMore}
|
loadMore={handleLoadMore}
|
getScrollTopKey={getScrollTopKey}
|
scrollTop={scrollTop}
|
itemDom={(item, index) => {
|
return (
|
<div
|
className="room-card-bottomBorder"
|
style={index === 0 ? { marginTop: 0 } : null}
|
onClick={() => handleGoToDetail(item.id, item)}
|
>
|
<div className="room-card">
|
<div className="room-card-imgBox">
|
<ImgShow imageUrl={item.fileId ? appUrl.fileUrl + '/dingTalk/api/fileInfo/show/' + item.fileId : ''} defaultImg={room_1} width={58} noTitle isShowBig={false} />
|
</div>
|
<div className="room-card-main">
|
<div className="room-title">
|
{item.taskTagList?.map((x, t) => (
|
<span key={t} className={`public-tag public-tag-${x === '21_00016-1' ? 'blue' : x === '21_00016-2' ? 'red' : 'green'}`}>
|
{x === '21_00016-1' ? '待排查' : x === '21_00016-2' ? '待核实' : '地址未同步'}
|
</span>
|
))}
|
<span>{searchValue ? ((!item.unit && !item.housenumber) ? '暂无房号' : searchTitle((item.unit ? `${item.unit}-` : '') + (item.housenumber || ''), searchValue)) : ((item.unit ? `${item.unit}-` : '') + (item.housenumber || '')) || buildingAddress}</span>
|
</div>
|
<div className="room-subtitle">
|
<div className="room-subtitle-text">{item.familyCount || 0}分户</div>
|
<div className="public-split" />
|
<div className="room-subtitle-text">{item.personCount || 0}人口</div>
|
<div className="public-split" />
|
<div className="room-subtitle-text">{dateFormat(item.updateTime)}更新</div>
|
</div>
|
<Space>
|
{getUpdateStr(item.updateTime) ? <div className="public-tag2">{getUpdateStr(item.updateTime)}</div> : null}
|
{item.isHouseRent ? <div className="public-tag2">{item.isHouseRent === '0' ? '自用' : '出租'}</div> : null}
|
{item.inputStatusName && <div className="public-tag2">{item.inputStatusName}</div>}
|
</Space>
|
</div>
|
</div>
|
</div>
|
);
|
}}
|
/>
|
) : (
|
<RoomNumberGrid
|
data={data}
|
onClickRoom={(value) => handleGoToDetail(value.id, { ...value, unit: value.unit || '', housenumber: value.housenumber })}
|
/>
|
);
|
};
|
|
export default RoomList;
|
