/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-08-09 09:38:59
|
* @LastEditTime: 2024-03-13 18:56:31
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 底部弹窗数据预览组件
|
*/
|
import React, { useState } from 'react';
|
import { Drawer, } from 'dingtalk-design-mobile';
|
import './index.less';
|
import { myTimeFormat } from '../../utils/utility';
|
import obj from '../../utils/selectOption';
|
import { hasMore_1, close_1 } from "../../assets/img";
|
|
const ModalDownPreview = ({
|
screenModal,
|
okText = '收起',
|
updateScreenModal,
|
updateList
|
}) => {
|
|
// 展开/隐藏
|
const [showValues, setShowValues] = useState(false);
|
|
const handleClickRemove = (index) => {
|
const updatedScreenModal = { ...screenModal };
|
let modalDownList = updatedScreenModal.dataList.map((item, i) => ({ ...item, value: i === index ? item.select[0].value : item.value, label: i === index ? item.select[0].label : item.label, select: i === index ? item.select?.map((x, t) => ({ ...x, display: x.display && 'none', value: x.display ? '' : x.value, value1: x.display ? '' : x.value1, value2: x.display ? '' : x.value2, })) : item.select }));
|
// let modalTopList = updatedScreenModal.dataList.filter((item, i) => i !== index);
|
let modalTopList = updatedScreenModal.dataList.map((item, i) => {
|
if ((item.key === 'area' || item.key === 'censusTest') && i === index && (item.value === 'custom' || item.value === '')) {
|
return { ...item, label: '海口市', value: '' };
|
} else {
|
return {
|
...item,
|
value: i === index ? item.select[0].value : item.value,
|
label: i === index ? item.select[0].label : item.label,
|
select: i === index ? item.select?.map((x, t) => ({ ...x, display: x.display && 'none', value: x.display ? '' : x.value })) : item.select
|
};
|
}
|
});
|
let result = {};
|
modalDownList.forEach((x) => {
|
// 当key中包含dateTime字段时则会特殊处理显示时间选项
|
if (x.key.indexOf('dateTime') !== -1) {
|
if (x.value === 'customTime') {
|
result[x.select.find((item) => item.key1)?.key1] = x.select.find((item) => item.key1)?.value1 || '';
|
result[x.select.find((item) => item.key2)?.key2] = x.select.find((item) => item.key2)?.value2 || '';
|
}
|
}
|
if (x.value === 'custom') {
|
if (x.key === 'censusTest') {
|
result[x.select.find((item) => item.key)?.key] = x.select.find((item) => item.key)?.value?.[2] ? x.select.find((item) => item.key)?.value?.[2] : x.select.find((item) => item.key)?.value?.[1] ? x.select.find((item) => item.key)?.value?.[1] : x.select.find((item) => item.key)?.value?.[0] ? x.select.find((item) => item.key)?.value?.[0] : '';
|
} else {
|
result[x.select.find((item) => item.key)?.key] = x.select.find((item) => item.key)?.value?.[0] || '';
|
}
|
}
|
else {
|
result[x.key] = x.value;
|
}
|
});
|
updateScreenModal(modalDownList, modalTopList, result);
|
};
|
|
|
|
|
|
|
function toggleDropdown(value) {
|
setShowValues(value)
|
}
|
|
|
const renderSelectedValues = () => {
|
return screenModal.dataList.map((item, index) => (
|
<div key={index} className='modal-down-preview-bottom-show-mark'>
|
<div className='modal-down-preview-bottom-show-mark-flex'>
|
<div className='public-color'>
|
{item.title}：
|
{/* 正常选择 */}
|
{
|
(item.value !== 'custom' && item.value !== 'customTime') &&
|
<span>
|
{item.label ||
|
item.select?.find(item => item.value === '')?.label}
|
</span>
|
}
|
|
{/* 自定义选择 */}
|
{
|
item.value === 'custom' &&
|
<>
|
{/* 区域 */}
|
{
|
item.key === 'censusTest' &&
|
<>
|
{item.select[item.select?.length - 1]?.label}
|
</>
|
}
|
{/*三级区域 */}
|
{
|
item.key === 'censusTestOther' &&
|
<>
|
{item.select[item.select?.length - 1]?.label}
|
</>
|
}
|
{/* 区级区域 */}
|
{
|
item.key === 'area' &&
|
<>
|
{item.select[item.select?.length - 1]?.label}
|
</>
|
}
|
{/* 年龄范围 */}
|
{
|
item.key === 'ageRange' &&
|
<>
|
{item.select.map((subItem, subIndex) => {
|
if (subItem.key === 'ageStart' || subItem.key === 'ageEnd') {
|
return (
|
<span key={subIndex}>
|
{subItem.value}
|
{subItem.key === 'ageStart' && subItem.value ? '-' : null}
|
{subItem.key === 'ageEnd' && subItem.value ? '岁' : null}
|
</span>
|
);
|
}
|
return null;
|
})}
|
</>
|
}
|
{/* input */}
|
{
|
item.key === 'areaRange' &&
|
<>
|
{item.select[item.select?.length - 1]?.value}
|
</>
|
}
|
{/* 民族 */}
|
{item.key === 'nationalTest' &&
|
<>
|
{obj.national?.find(i => i.value === item.select[item.select?.length - 1]?.value[0])?.label}
|
</>
|
}
|
{item.key === 'PickerSelect' &&
|
<>
|
{item.select[item.select?.length - 1]?.selectList?.find(i => i.value === item.select[item.select?.length - 1]?.value[0])?.label || '请选择'}
|
</>
|
}
|
</>
|
}
|
{
|
item.value === 'customTime' &&
|
<>
|
{item.key === 'dateTime' &&
|
<>
|
{myTimeFormat(item.select[item.select?.length - 1]?.value1, 'YYYY.MM.DD')}-{myTimeFormat(item.select[item.select?.length - 1]?.value2, 'YYYY.MM.DD')}
|
</>
|
}
|
</>
|
}
|
<img
|
src={close_1}
|
alt=""
|
srcset=""
|
style={{ height: '14px', width: '14px', verticalAlign: 'middle', marginLeft: '8px' }}
|
onClick={() => handleClickRemove(index)}
|
/>
|
</div>
|
|
</div>
|
</div >
|
));
|
};
|
|
return (
|
<>
|
{
|
!showValues ?
|
<div className='modal-down-preview-bottom-flex' onClick={() => toggleDropdown(true)}>
|
<div className='modal-down-preview-bottom-div'>
|
<img
|
src={hasMore_1}
|
alt=""
|
srcset=""
|
/>
|
</div>
|
</div> :
|
<Drawer className='modal-down-preview-bottom-show' visible={showValues} onVisibleChange={(v) => { setShowValues(v) }} position='top'>
|
<div style={{ padding: '12px' }}>
|
<div style={{ color: 'rgba(23,26,29,0.6)' }}>已设置的筛选条件：</div>
|
{renderSelectedValues()} {/* 渲染已选的条件 */}
|
</div>{/*; */}
|
<div className='modal-down-preview-bottom-show-button' onClick={(v) => {
|
toggleDropdown(false);
|
let result = {},
|
resultName = {};
|
screenModal.dataList.forEach((x) => {
|
// 当key中包含dateTime字段时则会特殊处理显示时间选项
|
if (x.key.indexOf('dateTime') !== -1) {
|
if (x.value === 'customTime') {
|
result[x.select.find((item) => item.key1)?.key1] = x.select.find((item) => item.key1)?.value1 || '';
|
result[x.select.find((item) => item.key2)?.key2] = x.select.find((item) => item.key2)?.value2 || '';
|
}
|
}
|
if (x.value === 'custom') {
|
// if (x.value) {
|
|
// } else {
|
// }
|
result[x.select.find((item) => item.key)?.key] = x.select.find((item) => item.key)?.value?.[0] || '';
|
}
|
else {
|
result[x.key] = x.value;
|
resultName[x.key] = x.label;
|
}
|
});
|
updateList(result, screenModal.dataList,)
|
}}><span className='public-color'>{okText}</span></div>
|
</Drawer>
|
|
}
|
</>
|
);
|
};
|
|
export default ModalDownPreview;
|
