mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-15 06:27:21 +00:00
[improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component. (#404)
* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab. [improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions. [improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager. * [improvement][semantic-fe] Add time granularity setting in the data source configuration. * [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility * [improvement][semantic-fe] Modification of data source creation prompt wording" * [improvement][semantic-fe] metric market experience optimization * [improvement][semantic-fe] enhance the analysis of metric trends * [improvement][semantic-fe] optimize the presentation of metric trend permissions * [improvement][semantic-fe] add metric trend download functionality * [improvement][semantic-fe] fix the dimension initialization issue in metric correlation * [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source. * [improvement][semantic-fe] Optimizing pagination logic and some CSS styles * [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum" * [improvement][semantic-fe] Fixing the default value setting for the indicator list * [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models * [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API * [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators * [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality * [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component.
This commit is contained in:
tristanliu
@@ -0,0 +1,165 @@
|
||||
import { Space, Popconfirm, Dropdown, DatePicker, Popover, Button, Radio } from 'antd';
|
||||
import { FC, useState, useRef } from 'react';
|
||||
import {
|
||||
PlaySquareOutlined,
|
||||
StopOutlined,
|
||||
CloudDownloadOutlined,
|
||||
DeleteOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
export type BatchCtrlDropDownButtonProps = {
|
||||
onMenuClick?: (key: string) => void;
|
||||
onDownloadDateRangeChange?: (dateRange: string[], pickerType: string) => void;
|
||||
onDeleteConfirm?: () => void;
|
||||
downloadLoading?: boolean;
|
||||
disabledList?: string[];
|
||||
hiddenList?: string[];
|
||||
};
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const BatchCtrlDropDownButton: FC<BatchCtrlDropDownButtonProps> = ({
|
||||
onMenuClick,
|
||||
onDownloadDateRangeChange,
|
||||
onDeleteConfirm,
|
||||
downloadLoading,
|
||||
disabledList = [],
|
||||
hiddenList = [],
|
||||
}) => {
|
||||
const [popoverOpenState, setPopoverOpenState] = useState<boolean>(false);
|
||||
const [pickerType, setPickerType] = useState<string>('day');
|
||||
const dateRangeRef = useRef<any>([]);
|
||||
const dropdownButtonItems: any[] = [
|
||||
{
|
||||
key: 'batchStart',
|
||||
label: '批量启用',
|
||||
icon: <PlaySquareOutlined />,
|
||||
disabled: disabledList?.includes('batchStart'),
|
||||
},
|
||||
{
|
||||
key: 'batchStop',
|
||||
label: '批量停用',
|
||||
icon: <StopOutlined />,
|
||||
disabled: disabledList?.includes('batchStop'),
|
||||
},
|
||||
{
|
||||
key: 'batchDownload',
|
||||
label: (
|
||||
<a
|
||||
onClick={() => {
|
||||
setPopoverOpenState(true);
|
||||
}}
|
||||
>
|
||||
批量下载
|
||||
</a>
|
||||
),
|
||||
icon: <CloudDownloadOutlined />,
|
||||
disabled: disabledList?.includes('batchDownload'),
|
||||
},
|
||||
{
|
||||
key: 'batchDeleteDivider',
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
key: 'batchDelete',
|
||||
label: (
|
||||
<Popconfirm
|
||||
title="确定批量删除吗？"
|
||||
onConfirm={() => {
|
||||
onDeleteConfirm?.();
|
||||
}}
|
||||
>
|
||||
<a>批量删除</a>
|
||||
</Popconfirm>
|
||||
),
|
||||
icon: <DeleteOutlined />,
|
||||
disabled: disabledList?.includes('batchDelete'),
|
||||
},
|
||||
].filter((item) => {
|
||||
return !hiddenList.includes(item.key);
|
||||
});
|
||||
|
||||
const popoverConfig = {
|
||||
title: '选择下载区间',
|
||||
content: (
|
||||
<Space direction="vertical">
|
||||
<Radio.Group
|
||||
size="small"
|
||||
value={pickerType}
|
||||
onChange={(e) => {
|
||||
setPickerType(e.target.value);
|
||||
}}
|
||||
>
|
||||
<Radio.Button value="day">按日</Radio.Button>
|
||||
<Radio.Button value="week">按周</Radio.Button>
|
||||
<Radio.Button value="month">按月</Radio.Button>
|
||||
</Radio.Group>
|
||||
<RangePicker
|
||||
style={{ paddingBottom: 5 }}
|
||||
onChange={(date) => {
|
||||
dateRangeRef.current = date;
|
||||
return;
|
||||
}}
|
||||
picker={pickerType as any}
|
||||
allowClear={true}
|
||||
/>
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
loading={downloadLoading}
|
||||
onClick={() => {
|
||||
const [startMoment, endMoment] = dateRangeRef.current;
|
||||
let searchDateRange = [
|
||||
startMoment?.format('YYYY-MM-DD'),
|
||||
endMoment?.format('YYYY-MM-DD'),
|
||||
];
|
||||
if (pickerType === 'week') {
|
||||
searchDateRange = [
|
||||
startMoment?.startOf('isoWeek').format('YYYY-MM-DD'),
|
||||
endMoment?.startOf('isoWeek').format('YYYY-MM-DD'),
|
||||
];
|
||||
}
|
||||
if (pickerType === 'month') {
|
||||
searchDateRange = [
|
||||
startMoment?.startOf('month').format('YYYY-MM-DD'),
|
||||
endMoment?.startOf('month').format('YYYY-MM-DD'),
|
||||
];
|
||||
}
|
||||
onDownloadDateRangeChange?.(searchDateRange, pickerType);
|
||||
}}
|
||||
>
|
||||
下载
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</Space>
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover
|
||||
content={popoverConfig?.content}
|
||||
title={popoverConfig?.title}
|
||||
trigger="click"
|
||||
key="ctrlBtnList"
|
||||
open={popoverOpenState}
|
||||
placement="bottomLeft"
|
||||
onOpenChange={(open: boolean) => {
|
||||
setPopoverOpenState(open);
|
||||
}}
|
||||
>
|
||||
<Dropdown.Button
|
||||
menu={{
|
||||
items: dropdownButtonItems,
|
||||
onClick: ({ key }: { key: string }) => {
|
||||
onMenuClick?.(key);
|
||||
},
|
||||
}}
|
||||
>
|
||||
批量操作
|
||||
</Dropdown.Button>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export default BatchCtrlDropDownButton;
|
||||
Reference in New Issue
Block a user