/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-08-09 09:38:59
|
* @LastEditTime: 2024-01-15 09:05:24
|
* @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, moment } from '../../utils/utility';
|
import obj from '../../utils/selectOption';
|
import { modalDown_1 } from '../../assets/img';
|
|
const ModalDown = ({
|
headContent,
|
dataList = [],
|
title,
|
visible,
|
visibleOnClick,
|
onChange, //点击筛选条件回调事件
|
onConfirm,
|
onReset,
|
extraContent, // 自定义内容
|
actionContent, // 自定义底部操作区
|
isAction = true,
|
cancelText = '重置',
|
okText = '确定',
|
}) => {
|
const [screenList, setScreenList] = useState();
|
|
const [oldScreenList, setOldScreenList] = useState();
|
|
function screenListChange(list, value, index, label, key, type) {
|
console.log('list, value, index, label, key', list, value, index, label, key);
|
onChange && onChange(list, value, index, label, key, type);
|
}
|
|
// 选择筛选条件
|
function handleChange(value, index, label, key) {
|
if (screenList[index].key === 'dateTime' || screenList[index].key === 'ageRange' || screenList[index].key === 'censusTest' || screenList[index].key === 'nationalTest' || screenList[index].key === 'createTime' || screenList[index].key === 'newCreateTime' || screenList[index].key === 'area') {
|
// 自定义时间范围选择处理 - 选择显隐开始时间和结束时间
|
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 = '';
|
}
|
});
|
}
|
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 = '';
|
}
|
});
|
}
|
|
// 综治领导责任制
|
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, key === 'startTime' ? 'YYYY-MM-DD' : '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' : 'YYYY-MM-DD');
|
setScreenList([...screenList]);
|
screenListChange(screenList, item.value, index, label, key);
|
}
|
|
// 自定义输入框或选择框回填
|
function changeValue(type, value, index, label, key) {
|
let item = screenList[index].select.filter((item) => item.key === key)[0];
|
if (type === 'select') {
|
item.value = value.splice(',');
|
} else {
|
item.value = value
|
}
|
setScreenList([...screenList]);
|
screenListChange(screenList, item.value, index, label, key, type);
|
}
|
|
// 重置
|
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() {
|
let result = {},
|
resultName = {};
|
screenList.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,
|
}
|
: '';
|
} 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) => {
|
if (!data.label) {
|
return <div />;
|
} else if (data.type === 'DatePicker') {
|
return (
|
<DatePicker mode="date" value={null} title={data.title} onChange={(date) => changeDatePicker(date, index, data.key)}>
|
<CustomChildren className={data.value ? '' : 'modal-down-subtitle'} type={data.key}>
|
{data.value || data.label}
|
</CustomChildren>
|
</DatePicker>
|
);
|
} else if (data.type === 'yearMonthDatePicker') {
|
return (
|
<DatePicker mode="month" value={null} title={data.title} onChange={(date) => changeYearMonthPicker(date, index, data.key)}>
|
<CustomChildren className={data.value ? '' : 'modal-down-subtitle'} type={data.key}>
|
{data.value || data.label}
|
</CustomChildren>
|
</DatePicker>
|
);
|
} else if (data.type === 'createTime') {
|
return (
|
<div className='modal-down-input modal-down-input-relative'>
|
{
|
data.key === 'createTimeEnd' &&
|
<div className='modal-down-input-absolute'>至</div>
|
}
|
<div style={{ height: '30px', flex: '1' }}>
|
<div>
|
<DatePicker mode="date" extra={<span className="select-color">{data.label}</span>} value={data.value ? new Date(data.value) : null} title={data.title} onChange={(date) => changeNameDatePicker('createTime', date, index, data.label, data.key)}>
|
<List.Item arrow="horizontal" className='select-color_1'>
|
</List.Item>
|
</DatePicker>
|
</div>
|
</div>
|
|
<div className='modal-down-input-img'><img src={modalDown_1} alt="" /></div>
|
</div >
|
);
|
} else if (data.type === 'Input') {
|
return (
|
<div className='modal-down-input modal-down-input-relative'>
|
{
|
data.key === 'ageEnd' &&
|
<div className='modal-down-input-absolute'>至</div>
|
}
|
<InputItem type='number' className='modal-down-input-relative' placeholder={data.label} title={data.title} onChange={(value) => changeValue('input', value, index, data.label, data.key)}>
|
</InputItem>
|
<div className='modal-down-input-img'><img src={modalDown_1} alt="" /></div>
|
</div >
|
);
|
} else if (data.type === 'district') {
|
return (
|
<div className='modal-down-input' style={{ height: '30px' }}>
|
<div style={{ flex: '1' }}>
|
<Picker
|
data={hkRegion}
|
cols={3}
|
placeholder={data.label}
|
title={data.title}
|
okText="确定"
|
cascade={true}
|
value={data.value ? data.value : []}
|
extra={<span className="select-color">请选择</span>}
|
onChange={(e) => {
|
changeValue('select', e, index, data.label, data.key)
|
}}
|
>
|
<List.Item arrow="horizontal" className='select-color_1'>
|
</List.Item>
|
</Picker>
|
</div>
|
<div className='modal-down-input-img'><img src={modalDown_1} alt="" /></div>
|
</div >
|
|
|
)
|
} else if (data.type === 'select') {
|
return (
|
<div className='modal-down-input' style={{ height: '30px' }}>
|
<div style={{ flex: '1' }}>
|
<Picker
|
data={data.selectList}
|
cols={1}
|
placeholder={data.label}
|
title={data.title}
|
okText="确定"
|
cascade={true}
|
value={data.value ? data.value : []}
|
extra={<span className="select-color">请选择</span>}
|
onChange={(e) => {
|
changeValue('select', e, index, data.label, data.key)
|
}}
|
>
|
<List.Item arrow="horizontal" className='select-color_1'>
|
</List.Item>
|
</Picker>
|
</div>
|
<div className='modal-down-input-img'><img src={modalDown_1} alt="" /></div>
|
</div >
|
|
|
)
|
} else if (data.type === 'gridSelect') {
|
// 区域
|
return (
|
<div className='modal-down-input' style={{ height: '30px' }}>
|
<div style={{ flex: '1' }}>
|
<Picker
|
data={[
|
{
|
label: '市辖区',
|
value: '460101',
|
},
|
{
|
label: '秀英区',
|
value: '460105',
|
},
|
{
|
label: '龙华区',
|
value: '460106',
|
},
|
{
|
label: '琼山区',
|
value: '460107',
|
},
|
{
|
label: '美兰区',
|
value: '460108',
|
},
|
]}
|
cols={1}
|
placeholder={data.label}
|
title={'区域'}
|
okText="确定"
|
cascade={true}
|
value={data.value ? data.value : []}
|
extra={<span className="select-color">请选择</span>}
|
onChange={(e) => {
|
changeValue('select', e, index, data.label, data.key)
|
}}
|
>
|
<List.Item arrow="horizontal" className='select-color_1'>
|
</List.Item>
|
</Picker>
|
</div>
|
<div className='modal-down-input-img'><img src={modalDown_1} alt="" /></div>
|
</div >
|
)
|
}
|
else if (data.type === 'mapChange') {
|
return (
|
<div
|
onClick={() => handleChange(data.value, index, data.label, item.key)}
|
className={`modal-down-mapItem ${item.value === data.value ? 'modal-down-mapItem-active' : ''}`}
|
>
|
<div className="modal-down-mapItem-imgBox">
|
<img src={data.img} alt="" />
|
</div>
|
<div>{data.label}</div>
|
</div>
|
);
|
} else {
|
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 visible={visible} onVisibleChange={visibleOnClick} className="modal-down">
|
<div className="modal-down-main">
|
{!headContent && (
|
<>
|
<div className="modal-down-main-head">
|
<DownArrow2Outlined onClick={visibleOnClick} />
|
<div className="modal-down-main-head-title">{title || '筛选'}</div>
|
</div>
|
<div className="modal-down-main-divider"></div>
|
</>
|
)}
|
<div className="modal-down-main-overflow">
|
{!!extraContent ? (
|
extraContent
|
) : (
|
<div className="modal-down-main-overflow-in">
|
{screenList?.map((item, index) => {
|
let gridList = item.select.filter((item) => item.display !== 'none');
|
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-button">
|
<Button onClick={resetOnclick} style={{ flex: 1, marginRight: '8px' }}>
|
{cancelText}
|
</Button>
|
<Button onClick={searchOnclick} style={{ flex: 1, marginLeft: '8px' }} type="primary">
|
{okText}
|
</Button>
|
</div>
|
)}
|
{!!actionContent && actionContent}
|
</div>
|
</Drawer>
|
);
|
};
|
|
export default ModalDown;
|
