90 lines
3.1 KiB
TypeScript
90 lines
3.1 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>}
|
||
{isMobile && (
|
||
<div className="flex items-center gap-2">
|
||
<Filter className="w-4 h-4 text-indigo-500 shrink-0" />
|
||
<span className="text-sm font-semibold text-slate-800">数据范围</span>
|
||
</div>
|
||
)}
|
||
<p className={isMobile ? 'text-xs text-slate-500 leading-relaxed' : 'text-[10px] text-[#888] leading-relaxed'}>
|
||
序号指数据行顺序（从 1 开始），应用数据后生效。
|
||
</p>
|
||
<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>
|
||
)}
|
||
<p className={isMobile ? 'text-xs text-slate-500' : 'text-[10px] text-[#777]'}>
|
||
将选 {rangeStats.selectedCount} 枚
|
||
{rangeStats.selectedCount < rows.length && ` / 共 ${rows.length} 行`}
|
||
{isMobile && rangeStats.selectedCount > 0 && (
|
||
<span>
|
||
{' '}
|
||
· 约 {rangeStats.totalPages} 页 PDF
|
||
</span>
|
||
)}
|
||
</p>
|
||
</div>
|
||
);
|
||
};
|