ソースを参照

feat: 日期查询增加具体到时间选择

xyh 2 年 前
コミット
c76b40fa5a

+ 10 - 1
packages/app/src/components/filter-field/Date.tsx

@@ -13,9 +13,16 @@ type Props = {
   value: RangeValue<Dayjs>;
   name: string;
   onChange: (dates: RangeValue<Dayjs>) => void;
+  enableTime?: boolean;
 };
 
-const FilterTime: FC<Props> = function ({label, name, value, onChange}) {
+const FilterTime: FC<Props> = function ({
+  label,
+  name,
+  value,
+  onChange,
+  enableTime,
+}) {
   return (
     <div className={css.field}>
       <label htmlFor={`date_filter_${name}`} className={css.fieldLabel}>
@@ -23,6 +30,8 @@ const FilterTime: FC<Props> = function ({label, name, value, onChange}) {
       </label>
       <div className={css.fieldWrapper}>
         <DatePicker.RangePicker
+          showTime={enableTime ? {format: 'HH:mm'} : false}
+          format={enableTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'}
           data-testid={`filter_${name}`}
           name={name}
           value={value}

+ 3 - 1
packages/app/src/components/filter-field/Tool.tsx

@@ -16,7 +16,8 @@ import {useLatest} from 'ahooks';
 import {Card} from 'antd';
 
 export type MapValue<S extends Record<string, string | string[]>> =
-  | {label: string; type: 'field' | 'date'; value: keyof S}
+  | {label: string; type: 'field'; value: keyof S}
+  | {label: string; type: 'date'; value: keyof S; enableTime?: boolean}
   | {
       label: string;
       type: 'keySelect';
@@ -154,6 +155,7 @@ function FilterTool<S extends Record<string, string | string[]>>({
                   label={state.label}
                   value={dates!}
                   onChange={onDatesChange!}
+                  enableTime={state?.enableTime}
                 />
               );
             }

+ 7 - 2
packages/app/src/hooks/use-range-date/index.tsx

@@ -5,11 +5,16 @@ import {useState} from 'react';
 export function useRangeDate(
   startTime: Dayjs | null = null,
   endTime: Dayjs | null = null,
+  options?: {
+    enableTime?: boolean;
+  },
 ) {
   const [dates, setDates] = useState<RangeValue<Dayjs>>([startTime, endTime]);
 
-  const start = dates?.[0]?.format('YYYY-MM-DD') ?? '',
-    end = dates?.[1]?.format('YYYY-MM-DD') ?? '';
+  const format = options?.enableTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD';
+
+  const start = dates?.[0]?.format(format) ?? '',
+    end = dates?.[1]?.format(format) ?? '';
 
   return [{dates, start, end}, setDates] as const;
 }

+ 4 - 1
packages/app/src/pages/gs-error-log/filter/index.tsx

@@ -24,7 +24,9 @@ const Filter: FC = function () {
     },
     true,
   );
-  const [{dates, start, end}, onDatesChange] = useRangeDate();
+  const [{dates, start, end}, onDatesChange] = useRangeDate(null, null, {
+    enableTime: true,
+  });
   const [, {onSearch, onReset}] = useTableSearchToolEvents(
     context,
     {...fields, startTime: start, endTime: end},
@@ -72,6 +74,7 @@ const Filter: FC = function () {
           onChange={onDatesChange}
           label='请求时间'
           name='date'
+          enableTime
         />
 
         <FilterButtonGroup