/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-08-09 09:38:59
|
* @LastEditTime: 2025-05-07 18:22:01
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 底部弹窗
|
*/
|
import React, { useEffect, useState } from 'react';
|
import { DownArrow2Outlined } from 'dd-icons';
|
import { Drawer, Button, DatePicker, InputItem, Picker, List } from 'dingtalk-design-mobile';
|
import './index.less';
|
import { getCountTime, myTimeFormat, hkRegion, regionThreeDesc, selectThreeDesc, showToast, hkRegionLValue } from '../../utils/utility';
|
import obj from '../../utils/selectOption';
|
import { modalDown_1 } from '../../assets/img';
|
|
const ModalDown = ({
|
headContent,
|
dataList = [],
|
title,
|
visible,
|
itemStyle,
|
visibleOnClick,
|
onChange, //点击筛选条件回调事件
|
onConfirm,
|
onReset,
|
extraContent, // 自定义内容
|
actionContent, // 自定义底部操作区
|
isAction = true,
|
cancelText = '重置',
|
okText = '确定',
|
selectLink,
|
}) => {
|
const [screenList, setScreenList] = useState();
|
|
const [oldScreenList, setOldScreenList] = useState();
|
|
const [rangePickerTime, setRangePickerTime] = useState({ visible1: false, visible2: false });
|
|
const [rangePickerStart, setRangePickerStart] = useState('');
|
|
function screenListChange(list, value, index, label, key) {
|
onChange && onChange(list, value, index, label, key);
|
}
|
|
const processRegionData = (data) => {
|
return data.map((item) => ({
|
...item,
|
children: item.children && item.children.length > 0 ? processRegionData(item.children) : [], // 当children为空时，将label赋给children
|
}));
|
};
|
|
const hkRegionProcessed = processRegionData(hkRegion);
|
const hkRegionLength = processRegionData(hkRegionLValue);
|
|
// 选择筛选条件
|
function handleChange(value, index, label, key) {
|
if (
|
screenList[index].key === 'dateTime' ||
|
screenList[index].key === 'ageRange' ||
|
screenList[index].key === 'censusTest' ||
|
screenList[index].key === 'censusTestOther' ||
|
screenList[index].key === 'nationalTest' ||
|
screenList[index].key === 'createTime' ||
|
screenList[index].key === 'newCreateTime' ||
|
screenList[index].key === 'area' ||
|
screenList[index].key === 'PickerSelect' ||
|
screenList[index].key === 'tag'
|
) {
|
// 自定义时间范围选择处理 - 选择显隐开始时间和结束时间
|
if (value === 'customTime' && screenList[index].value !== 'customTime') {
|
screenList[index].customTime = true;
|
screenList[index]?.select.forEach((x) => {
|
if (x.display) {
|
x.display = 'block';
|
}
|
});
|
}
|
if (value !== 'customTime' && screenList[index].value === 'customTime') {
|
screenList[index].customTime = false;
|
screenList[index]?.select.forEach((x) => {
|
if (x.display) {
|
x.display = 'none';
|
x.value = '';
|
x.value1 = '';
|
x.value2 = '';
|
}
|
});
|
}
|
if (value === 'custom' && screenList[index].value !== 'custom') {
|
screenList[index].custom = true;
|
screenList[index]?.select.forEach((x) => {
|
if (x.display) {
|
x.display = 'block';
|
}
|
});
|
}
|
if (value !== 'custom' && screenList[index].value === 'custom') {
|
screenList[index].custom = false;
|
screenList[index]?.select.forEach((x) => {
|
if (x.display) {
|
x.display = 'none';
|
x.value = '';
|
x.value1 = '';
|
x.value2 = '';
|
x.value3 = '';
|
}
|
});
|
}
|
|
// 综治领导责任制
|
if (value === 'customYear') {
|
screenList[index].customTime = true;
|
screenList[index].select = screenList[index]?.select.filter((item) => item.key !== 'noCustomYear');
|
screenList[index]?.select.forEach((x) => {
|
if (x.key === 'customYear' && x.display) {
|
x.display = 'block';
|
}
|
if (x.key !== 'customYear' && x.display) {
|
x.display = 'none';
|
}
|
});
|
}
|
if (value === 'customTimeRange') {
|
screenList[index].customTime = true;
|
screenList[index]?.select.splice(3, 0, { value: '', key: 'noCustomYear' });
|
screenList[index]?.select.forEach((x) => {
|
if (x.key === 'customYear' && x.display) {
|
x.display = 'none';
|
}
|
if (x.key !== 'customYear' && x.display) {
|
x.display = 'block';
|
}
|
});
|
}
|
if (value !== 'customTimeRange' && value !== 'customYear' && key === 'newCreateTime') {
|
if (screenList[index]?.select?.length === 6) {
|
screenList[index]?.select.splice(3, 0, { value: '', key: 'noCustomYear' });
|
}
|
screenList[index]?.select.forEach((x) => {
|
if (x.display) {
|
x.display = 'none';
|
}
|
});
|
}
|
}
|
let arr = screenList.map((item, i) => ({ ...item, value: i === index ? value : item.value, label: i === index ? label : item.label }));
|
setScreenList(arr);
|
screenListChange(arr, value, index, label, key);
|
}
|
|
// 时间选择
|
function changeDatePicker(value, index, key) {
|
let item = screenList[index].select.filter((item) => item.key === key)[0];
|
item.value = myTimeFormat(value, 'YYYY.MM.DD');
|
setScreenList([...screenList]);
|
}
|
|
// 年月选择器
|
function changeYearMonthPicker(value, index, key) {
|
let item = screenList[index].select.filter((item) => item.key === key)[0];
|
item.value = myTimeFormat(value, 'YYYY.MM');
|
setScreenList([...screenList]);
|
}
|
|
// 时间登记时间选择器
|
function changeNameDatePicker(name, value, index, label, key) {
|
let item = screenList[index].select.filter((item) => item.key === key)[0];
|
item.value = myTimeFormat(value, key === 'createTimeStart' ? 'YYYY-MM-DD 00:00' : 'YYYY-MM-DD 23:59');
|
setScreenList([...screenList]);
|
screenListChange(screenList, item.value, index, label, key);
|
}
|
|
// 自定义输入框或选择框回填
|
function changeValue(type, value, index, label, key, list) {
|
let item = screenList[index].select.filter((item) => item.key === key)[0];
|
if (type === 'district') {
|
let valueLabel = regionThreeDesc(hkRegionProcessed, value).join(',');
|
item.value = value.splice(',');
|
item.label = valueLabel;
|
} else if (type === 'district2') {
|
let valueLabel = regionThreeDesc(hkRegionLength, value).join(',');
|
item.value = value.splice(',');
|
item.label = valueLabel;
|
} else if (type === 'select' || type === 'gridSelect') {
|
item.value = value;
|
item.label = selectThreeDesc(list, value);
|
} else {
|
item.value = value;
|
}
|
setScreenList([...screenList]);
|
screenListChange(screenList, item.value, index, label, key);
|
}
|
|
// 重置
|
function resetOnclick() {
|
let list = JSON.parse(JSON.stringify(oldScreenList));
|
setScreenList(list);
|
let result = {},
|
resultName = {};
|
list.forEach((x) => {
|
// 当key中包含dateTime字段时则会特殊处理显示时间选项
|
if (x.key.indexOf('dateTime') !== -1) {
|
result[x.key] = !x.value
|
? ''
|
: x.value === 'customTime'
|
? {
|
start: x.select.filter((item) => item.key === 'startTime')[0].value,
|
end: x.select.filter((item) => item.key === 'endTime')[0].value,
|
}
|
: getCountTime(x.value);
|
} else {
|
result[x.key] = x.value;
|
resultName[x.key] = x.label;
|
}
|
});
|
|
!!onReset && onReset(result, list, resultName);
|
}
|
|
// 点击确定
|
function searchOnclick() {
|
if (screenList[1]) {
|
if (
|
screenList[1].select.find((item) => item.key === 'ageStart')?.value !== '' &&
|
screenList[1].select.find((item) => item.key === 'ageEnd')?.value !== ''
|
) {
|
if (
|
Number(screenList[1].select.find((item) => item.key === 'ageStart')?.value) >
|
Number(screenList[1].select.find((item) => item.key === 'endAge')?.value)
|
) {
|
showToast({ content: '您输入年龄范围有误' });
|
return;
|
}
|
}
|
}
|
let result = {},
|
resultName = {};
|
screenList.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') {
|
if (x.select[x.select?.length - 1]?.type === 'district1' || 'district2') {
|
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 || '';
|
result[x.select.find((item) => item.key3)?.key3] = x.select.find((item) => item.key3)?.value3 || '';
|
} else {
|
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]
|
: '';
|
}
|
}
|
|
if (x.key === 'ageRange') {
|
result[x.select.find((item) => item.key1)?.key1] = x.select.find((item) => item.key1)?.value1 || '';
|
result[x.select.find((item) => item.key)?.key] = x.select.find((item) => item.key)?.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;
|
}
|
});
|
!!onConfirm && onConfirm(result, screenList, resultName);
|
}
|
|
useEffect(() => {
|
if (dataList.length !== 0 && visible) {
|
if (!oldScreenList) {
|
// setOldScreenList(JSON.parse(JSON.stringify(dataList)));
|
let value = JSON.parse(JSON.stringify(dataList));
|
setOldScreenList([...value]);
|
}
|
setScreenList(dataList);
|
}
|
}, [dataList, visible]);
|
|
// DatePicker的自定义元素
|
const CustomChildren = ({ onClick, children, className, type }) => (
|
<div className={type === 'endTime' ? 'modal-down-endPicker' : ''}>
|
<Button size="middle" onClick={onClick}>
|
<div className={className}>{children}</div>
|
</Button>
|
</div>
|
);
|
|
// 筛选的元素判断
|
const renderItem = (data, item, index) => {
|
return (
|
<Button
|
name={data.label}
|
size="middle"
|
onClick={() => handleChange(data.value, index, data.label, item.key)}
|
type={item.value === data.value ? 'primary' : 'secondary'}
|
>
|
{data.label}
|
</Button>
|
);
|
};
|
|
return (
|
<Drawer position="top" visible={visible} onVisibleChange={visibleOnClick} className="modal-down">
|
<div className="modal-down-main" style={itemStyle}>
|
<div className="modal-down-main-overflow">
|
{!!extraContent ? (
|
extraContent
|
) : (
|
<div className="modal-down-main-overflow-in">
|
{screenList?.map((item, index) => {
|
let width = 100 / Number(item.column);
|
return (
|
<div className="modal-down-main-body" key={index}>
|
<div className="modal-down-main-body-title">{item.title}</div>
|
<div className="modal-down-grid">
|
{/* {gridList.map((x, t) => {
|
return (
|
<div style={{ maxWidth: `${width}%`, flex: `0 0 ${width}%` }} key={t}>
|
<div className="modal-down-grid-col">{renderItem(x, item, index)}</div>
|
</div>
|
);
|
})} */}
|
</div>
|
</div>
|
);
|
})}
|
</div>
|
)}
|
</div>
|
{isAction && !actionContent && (
|
<div className="modal-down-main-foot">
|
<div className="modal-down-main-foot-button">
|
<Button onClick={resetOnclick} style={{ flex: 1, marginRight: '8px' }}>
|
{cancelText}
|
</Button>
|
<Button onClick={searchOnclick} style={{ flex: 1, marginLeft: '8px' }} type="primary">
|
{okText}
|
</Button>
|
</div>
|
</div>
|
)}
|
</div>
|
</Drawer>
|
);
|
};
|
|
export default ModalDown;
|
