71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { Filter } from 'lucide-react';
|
|
import { ExportRangeConfig, LabelTemplate, PaperConfig, RecordRow } from '../types';
|
|
import { buildPrintablePages } from '../utils';
|
|
import { PageInput } from './PreviewGrid';
|
|
|
|
interface DataRangeFieldsProps {
|
|
variant?: 'ps' | 'mobile';
|
|
exportRange: ExportRangeConfig;
|
|
onChangeExportRange: (range: ExportRangeConfig) => void;
|
|
rows: RecordRow[];
|
|
paper: PaperConfig;
|
|
template: LabelTemplate;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export const DataRangeFields: React.FC<DataRangeFieldsProps> = ({
|
|
variant = 'ps',
|
|
exportRange,
|
|
onChangeExportRange,
|
|
rows,
|
|
paper,
|
|
template,
|
|
disabled = false,
|
|
}) => {
|
|
const isMobile = variant === 'mobile';
|
|
const rangeStats = buildPrintablePages(rows, paper, template, exportRange);
|
|
|
|
const patchRange = (patch: Partial<ExportRangeConfig>) => {
|
|
onChangeExportRange({ ...exportRange, ...patch });
|
|
};
|
|
|
|
return (
|
|
<div className={isMobile ? 'space-y-4' : 'space-y-2'}>
|
|
{!isMobile && <div className="ps-section-title">数据范围</div>}
|
|
<div>
|
|
{isMobile && <label className="mobile-field-label">范围</label>}
|
|
{!isMobile && <label className="ps-field-label">范围</label>}
|
|
<select
|
|
value={exportRange.mode}
|
|
disabled={disabled}
|
|
onChange={(e) => patchRange({ mode: e.target.value as ExportRangeConfig['mode'] })}
|
|
className={isMobile ? 'mobile-field' : 'ps-field text-[11px]'}
|
|
>
|
|
<option value="all">全部标签</option>
|
|
<option value="odd">仅限奇数序号的标签</option>
|
|
<option value="even">仅限偶数序号的标签</option>
|
|
<option value="custom">自定义序号</option>
|
|
</select>
|
|
</div>
|
|
{exportRange.mode === 'custom' && (
|
|
<div>
|
|
{isMobile ? (
|
|
<label className="mobile-field-label">自定义序号</label>
|
|
) : (
|
|
<label className="ps-field-label">自定义序号</label>
|
|
)}
|
|
<PageInput
|
|
type="text"
|
|
value={exportRange.custom ?? ''}
|
|
disabled={disabled}
|
|
onCommit={(val) => patchRange({ custom: val })}
|
|
placeholder="如 1,3,5-10"
|
|
inputClassName={isMobile ? 'mobile-field font-mono' : 'ps-field font-mono text-[11px]'}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|