Commit 62f7fed8 authored by 陈龙's avatar 陈龙

feat: 优化默认筛选值的逻辑,现在可以配置多个筛选值

parent fa63f244
......@@ -37,6 +37,8 @@ const SelectSearchComponent = ({
reportName,
fieldAlias,
configItems,
filterFields,
filterValues,
}) => {
const [value, setValue] = useState('');
const [options, setOptions] = useState([]);
......@@ -50,7 +52,15 @@ const SelectSearchComponent = ({
})
.then((res) => {
if (res.code === 0) {
setOptions(res.data);
let _options = res.data;
let _filterFields = filterFields.split('|');
let _filterValues = filterValues.split('|');
let _index = _filterFields.findIndex((item) => item === fieldAlias);
if (_index > -1) {
let _needToFilterValues = _filterValues[_index]?.split(',') || [];
_options = _options.filter((item) => _needToFilterValues.includes(item.filterValue));
}
setOptions(_options);
}
})
.catch((err) => {
......@@ -70,7 +80,7 @@ const SelectSearchComponent = ({
setValue(e);
}}
mode={mode}
defaultValue={mode === 'multiple' ? defaultValue.split(',') : defaultValue}
defaultValue={mode === 'multiple' && defaultValue ? defaultValue.split(',') : defaultValue}
allowClear
maxTagCount={1}
placeholder={`请选择${fieldAlias}`}
......@@ -95,6 +105,8 @@ const ReturnControlComponent = ({
fieldAlias,
placeholder,
configItems,
filterValues,
filterFields,
}) => {
let _component = '';
switch (type) {
......@@ -119,6 +131,8 @@ const ReturnControlComponent = ({
reportName={reportName}
fieldAlias={fieldAlias}
configItems={configItems}
filterFields={filterFields}
filterValues={filterValues}
/>
);
break;
......
......@@ -12,44 +12,32 @@
* @params: <ReportManage
* params={{reportName,pageSize,filterFields,filterValues,state,customerState}}>
*
*
* reportName: 报表名称;
* pageSize: 按需配置,默认加载100;
*
*
* ***************filterFields/filterValues多用于以组件的形式嵌入,将需要过滤的条件传入********************
*
*
* filterFields: 需要默认加载的过滤条件的field,英文逗号分割,与filterValues一一对应;
* filterFields: 需要默认加载的过滤条件的field,用|分割,与filterValues一一对应;
* filterValues:
*
* 需要默认加载的过滤条件的value,英文逗号分割,与filterFields一一对应;
*
* 需要默认加载的过滤条件的value,用|分割,与filterFields一一对应;当某个字段的filterValues为多个时,控件必须配置成多选才可生效;
*
* *************************************************************************************************
*
*
* state: delete|edit|scan 各种权限;
* state: delete|edit|scan 各种权限;
* customerState:
*
* ['filters','sortBtn','exportBtn','editBtn','deleteBtn','pagination'];
* sortFields:
*
* '排序字段1,排序字段2,排序字段3'
*
* '排序字段1,排序字段2,排序字段3'
*
* ---------------------------------------权限过滤-----------------------------------------
*
*
* permissionType: 部门|站点|用户
* permissionType: 部门|站点|用户
* permissionField: 【字段名】
*
*
* ---------------------------------------------------------------------------------------
* @config:
* 【数值】 [prefix]_d%|0.00|_d%[suffix]|金额 = 前缀|精度|后缀|金额类的数据(千分位),可分别设置。
* 【标签】 split=,
* 分隔符。
* 【标签】 split=, 分隔符。
*
* 【功能】 功能配置框内,配置需要跳转功能所需参数,type、url是必须功能,需要type判断类型,需要通过url去解析加载组件。
* @type:
......@@ -57,16 +45,13 @@
* 【数值】数值类型的文本
* 【标签】文本渲染成标签,具有不同颜色;
* 【功能】“功能”会在当前页内去展示,会卸载掉列表页,加载功能组件。配置 type +
*
* url + 自定义字段 的配置项,自行解析加载即可;
* url + 自定义字段 的配置项,自行解析加载即可;
* -------------------- 待需求提出后开发 -----------------
*
*
* 【链接】内链外链,点击可跳转;配置规则:配置链接即可;
* 【弹窗】modal弹窗弹出,弹窗内的具体业务自行配置;配置规则:[function_name];[...params];
*
*
* ------------------------------------------------------
* ------------------------------------------------------
* 【附件】
* @table:
* 表头:表头需要支持多级表头、合并;
......@@ -75,11 +60,9 @@
* @control:
* 固定筛选:拥有固定筛选框,根据配置显示可搜索字段;
*
*
* 可配置筛选框:根据字段配置,将字段设置成筛选条件,枚举出该字段所有值,提供用户进行选择,然后进行筛选;筛选框具体形态可根据配置字段来渲染;
* 导出功能:各类导出功能按钮;
*
*
* 时间筛选框:单表唯一;需要变更,支持多时间参数的筛选
* @state: 参考台账权限 delete 全部权限
* edit 除删除外的权限
......@@ -432,10 +415,10 @@ const ReportsManage = (props) => {
fieldValue: `${timeFrom} 00:00:00,${timeTo} 23:59:59`,
});
}
// 合并手动传入的filters
if (filterFields) {
let _customerFilterArray = filterFields.split(',');
let _customerValueArray = filterValues.split(',');
// 合并手动传入的filters;当配置为筛选框时,筛选框选择值后,会优先取筛选框值
if (filterFields && !_filters.find((item) => item.fieldAlias === filterFields)) {
let _customerFilterArray = filterFields.split('|');
let _customerValueArray = filterValues.split('|');
_customerFilterArray.forEach((item, index) => {
_filters.push({
fieldAlias: item,
......@@ -659,7 +642,6 @@ const ReportsManage = (props) => {
setTimeTo(dateTo);
setDateMode(mode);
};
const mapHandleType = (type) => {
const _map = {
文本: handleText,
......@@ -773,7 +755,7 @@ const ReportsManage = (props) => {
if (permission.includes('editBtn') || permission.includes('deleteBtn')) {
_tempArray.push({
title: '操作',
width: 60,
width: 100,
fixed: 'right',
render: (text, record) => {
return (
......@@ -831,6 +813,7 @@ const ReportsManage = (props) => {
if (res.code === 0) {
message.success('删除成功!');
setGetNewData(!getNewData);
// getData(pagination); // 在onOk的回调函数内,打包后的代码会形成闭包
}
});
},
......@@ -972,11 +955,21 @@ const ReportsManage = (props) => {
}
});
};
function getRefHeight() {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
let _height = controlRef?.current.clientHeight;
setControlsHeight(_height);
}, 100);
}
useEffect(() => {
getConfigs();
}, []);
useEffect(() => {
if (firstToGetData) getData(pagination);
getRefHeight();
}, [firstToGetData]);
useEffect(() => {
if (tableHeaderLevel) setTableHeight();
......@@ -985,14 +978,6 @@ const ReportsManage = (props) => {
if (!isInit) getData(pagination);
}, [timeFrom, timeTo, sorterObject, filterObject, getNewData]);
useEffect(() => {
function getRefHeight() {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
let _height = controlRef?.current.clientHeight;
setControlsHeight(_height);
}, 100);
}
window.addEventListener('resize', getRefHeight);
return () => window.removeEventListener('resize', getRefHeight);
});
......@@ -1014,6 +999,11 @@ const ReportsManage = (props) => {
<Row className={style.controlRow} ref={controlRef}>
<Space style={{ flex: 1 }} size={8} wrap={true}>
{/*时间搜索控件,确保时间搜索控件在第一个,单独匹配*/}
{console.log(
hasDatePicker,
defaultDateConfig.defaultDate,
permission.includes('filters'),
)}
{hasDatePicker &&
defaultDateConfig.defaultDate !== null &&
permission.includes('filters') ? (
......@@ -1040,6 +1030,8 @@ const ReportsManage = (props) => {
fieldAlias={control.fieldAlias}
configItems={control.configItems}
onChange={(e) => controlSelectChange(control.fieldAlias, e)}
filterFields={filterFields}
filterValues={filterValues}
/>
</Form.Item>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment