完成文档列表页面ui，封装部分上传文件的公共组件，封装请求接口
This commit is contained in:
@@ -0,0 +1,98 @@
|
||||
import dateRangePickerStyles from "~/styles/components/date-range-picker.css?url";
|
||||
|
||||
export interface DateRangePickerProps {
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
onStartDateChange: (value: string) => void;
|
||||
onEndDateChange: (value: string) => void;
|
||||
startLabel?: string;
|
||||
endLabel?: string;
|
||||
className?: string;
|
||||
startId?: string;
|
||||
endId?: string;
|
||||
}
|
||||
|
||||
export function links() {
|
||||
return [
|
||||
{ rel: "stylesheet", href: dateRangePickerStyles }
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期范围选择器组件
|
||||
* 用于选择日期范围，如开始日期和结束日期
|
||||
*/
|
||||
export function DateRangePicker({
|
||||
startDate,
|
||||
endDate,
|
||||
onStartDateChange,
|
||||
onEndDateChange,
|
||||
startLabel = "从",
|
||||
endLabel = "至",
|
||||
className = "",
|
||||
startId = "date-start",
|
||||
endId = "date-end"
|
||||
}: DateRangePickerProps) {
|
||||
return (
|
||||
<div className={`date-range-picker ${className}`}>
|
||||
<div className="date-range-fields">
|
||||
<div className="date-field">
|
||||
<label htmlFor={startId} className="date-label">{startLabel}</label>
|
||||
<input
|
||||
id={startId}
|
||||
type="date"
|
||||
className="date-input"
|
||||
value={startDate}
|
||||
onChange={(e) => onStartDateChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<span className="date-separator">至</span>
|
||||
<div className="date-field">
|
||||
<label htmlFor={endId} className="date-label">{endLabel}</label>
|
||||
<input
|
||||
id={endId}
|
||||
type="date"
|
||||
className="date-input"
|
||||
value={endDate}
|
||||
onChange={(e) => onEndDateChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 简化版日期范围选择器，适用于紧凑布局，不显示标签
|
||||
export function SimpleDateRangePicker({
|
||||
startDate,
|
||||
endDate,
|
||||
onStartDateChange,
|
||||
onEndDateChange,
|
||||
className = "",
|
||||
startId = "date-start-simple",
|
||||
endId = "date-end-simple"
|
||||
}: Omit<DateRangePickerProps, 'startLabel' | 'endLabel'>) {
|
||||
return (
|
||||
<div className={`date-range-picker simple-date-range-picker ${className}`}>
|
||||
<div className="date-range-fields">
|
||||
<input
|
||||
id={startId}
|
||||
type="date"
|
||||
className="date-input"
|
||||
value={startDate}
|
||||
onChange={(e) => onStartDateChange(e.target.value)}
|
||||
aria-label="开始日期"
|
||||
/>
|
||||
<span className="date-separator">至</span>
|
||||
<input
|
||||
id={endId}
|
||||
type="date"
|
||||
className="date-input"
|
||||
value={endDate}
|
||||
onChange={(e) => onEndDateChange(e.target.value)}
|
||||
aria-label="结束日期"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import fileTagStyles from '~/styles/components/file-tag.css?url';
|
||||
|
||||
// 支持的文件拓展名类型
|
||||
export type FileExtension =
|
||||
| 'pdf'
|
||||
| 'doc'
|
||||
| 'docx'
|
||||
| 'xls'
|
||||
| 'xlsx'
|
||||
| 'ppt'
|
||||
| 'pptx'
|
||||
| 'zip'
|
||||
| 'rar'
|
||||
| 'txt'
|
||||
| 'jpg'
|
||||
| 'png'
|
||||
| 'gif'
|
||||
| string;
|
||||
|
||||
interface FileTagProps {
|
||||
extension: FileExtension;
|
||||
className?: string;
|
||||
size?: 'default' | 'sm' | 'lg';
|
||||
showIcon?: boolean;
|
||||
showText?: boolean;
|
||||
showBackground?: boolean;
|
||||
}
|
||||
|
||||
export function links() {
|
||||
return [{ rel: "stylesheet", href: fileTagStyles }];
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件标签组件
|
||||
* 用于显示文件的扩展名，如PDF、Word、Excel等
|
||||
* @param extension 文件扩展名
|
||||
* @param className 额外的类名
|
||||
* @param size 尺寸：default, sm, lg
|
||||
* @param showIcon 是否显示图标，默认为true
|
||||
* @param showText 是否显示文件扩展名文本，默认为false
|
||||
* @param showBackground 是否显示背景颜色，默认为true
|
||||
*/
|
||||
export function FileTag({
|
||||
extension,
|
||||
className = '',
|
||||
size = 'default',
|
||||
showIcon = true,
|
||||
showText = false,
|
||||
showBackground = true
|
||||
}: FileTagProps) {
|
||||
// 获取干净的扩展名（去除点号并转换为小写）
|
||||
const getCleanExtension = () => {
|
||||
return extension.replace(/^\./, '').toLowerCase();
|
||||
};
|
||||
|
||||
// 文件扩展名对应的图标
|
||||
const getExtensionIcon = () => {
|
||||
const ext = getCleanExtension();
|
||||
const extensionIconMap: Record<string, string> = {
|
||||
'pdf': 'ri-file-pdf-line',
|
||||
'doc': 'ri-file-word-line',
|
||||
'docx': 'ri-file-word-line',
|
||||
'xls': 'ri-file-excel-line',
|
||||
'xlsx': 'ri-file-excel-line',
|
||||
'ppt': 'ri-file-ppt-line',
|
||||
'pptx': 'ri-file-ppt-line',
|
||||
'zip': 'ri-file-zip-line',
|
||||
'rar': 'ri-file-zip-line',
|
||||
'txt': 'ri-file-text-line',
|
||||
'jpg': 'ri-image-line',
|
||||
'jpeg': 'ri-image-line',
|
||||
'png': 'ri-image-line',
|
||||
'gif': 'ri-file-gif-line',
|
||||
};
|
||||
return extensionIconMap[ext] || 'ri-file-line';
|
||||
};
|
||||
|
||||
// 获取文件拓展名对应的类名
|
||||
const getExtensionClass = () => {
|
||||
const ext = getCleanExtension();
|
||||
return `file-tag file-tag-${ext} ${showBackground ? '' : 'file-tag-no-bg'}`;
|
||||
};
|
||||
|
||||
// 获取尺寸类名
|
||||
const getSizeClass = () => {
|
||||
return size !== 'default' ? `file-tag-${size}` : '';
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={`${getExtensionClass()} ${getSizeClass()} ${className}`}>
|
||||
{showIcon && <i className={`${getExtensionIcon()} file-tag-icon`}></i>}
|
||||
{showText && <span className="file-tag-text">{getCleanExtension().toUpperCase()}</span>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,39 +1,86 @@
|
||||
import { FileType, FILE_TYPE_LABELS } from '~/routes/rules-files';
|
||||
import fileTypeTagStyles from '~/styles/components/file-type-tag.css?url';
|
||||
|
||||
export type FileType =
|
||||
| 'sales-contract'
|
||||
| 'purchase-contract'
|
||||
| 'license'
|
||||
| 'punishment'
|
||||
| 'agreement'
|
||||
| string;
|
||||
|
||||
interface FileTypeTagProps {
|
||||
fileType: FileType;
|
||||
type: FileType;
|
||||
text?: string;
|
||||
className?: string;
|
||||
size?: 'default' | 'sm' | 'lg';
|
||||
showIcon?: boolean;
|
||||
}
|
||||
|
||||
export function links() {
|
||||
return [{ rel: "stylesheet", href: fileTypeTagStyles }];
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件类型标签组件
|
||||
* 根据文件类型显示不同样式的标签
|
||||
* 文档类型标签组件
|
||||
* 用于显示文档的类型，如销售合同、采购合同、许可证等
|
||||
* @param type 文档类型
|
||||
* @param text 自定义文本，不提供则使用默认文本
|
||||
* @param className 额外的类名
|
||||
* @param size 尺寸：default, sm, lg
|
||||
* @param showIcon 是否显示图标，默认为true
|
||||
*/
|
||||
export function FileTypeTag({ fileType, className = '', size }: FileTypeTagProps) {
|
||||
const sizeClass = size ? `file-type-tag-${size}` : '';
|
||||
const tagClassName = `file-type-tag file-type-tag-${fileType.toLowerCase()} ${sizeClass} file-type-tag-with-icon ${className}`;
|
||||
|
||||
// 根据文件类型选择图标
|
||||
const getFileTypeIcon = () => {
|
||||
switch (fileType) {
|
||||
case FileType.CONTRACT:
|
||||
return <i className="ri-file-list-3-line"></i>;
|
||||
case FileType.LICENSE:
|
||||
return <i className="ri-vip-crown-line"></i>;
|
||||
case FileType.PUNISHMENT:
|
||||
return <i className="ri-scales-line"></i>;
|
||||
case FileType.REPORT:
|
||||
return <i className="ri-file-chart-line"></i>;
|
||||
default:
|
||||
return <i className="ri-file-line"></i>;
|
||||
}
|
||||
export function FileTypeTag({
|
||||
type,
|
||||
text,
|
||||
className = '',
|
||||
size = 'default',
|
||||
showIcon = true
|
||||
}: FileTypeTagProps) {
|
||||
// 文档类型对应的图标
|
||||
const getTypeIcon = () => {
|
||||
const typeIconMap: Record<string, string> = {
|
||||
'sales-contract': 'ri-file-list-3-line',
|
||||
'purchase-contract': 'ri-shopping-cart-line',
|
||||
'license': 'ri-vip-crown-line',
|
||||
'punishment': 'ri-scales-line',
|
||||
'agreement': 'ri-file-paper-line',
|
||||
};
|
||||
return typeIconMap[type] || 'ri-file-text-line';
|
||||
};
|
||||
|
||||
// 文档类型对应的文本
|
||||
const getTypeText = () => {
|
||||
if (text) return text;
|
||||
|
||||
const typeTextMap: Record<string, string> = {
|
||||
'sales-contract': '销售合同',
|
||||
'purchase-contract': '采购合同',
|
||||
'license': '专卖许可证',
|
||||
'punishment': '行政处罚决定书',
|
||||
'agreement': '承包协议',
|
||||
};
|
||||
return typeTextMap[type] || type;
|
||||
};
|
||||
|
||||
// 获取文档类型对应的类名
|
||||
const getTypeClass = () => {
|
||||
return `file-type-tag file-type-${type}`;
|
||||
};
|
||||
|
||||
// 获取尺寸类名
|
||||
const getSizeClass = () => {
|
||||
return size !== 'default' ? `file-type-tag-${size}` : '';
|
||||
};
|
||||
|
||||
// 获取图标显示相关的类名
|
||||
const getIconClass = () => {
|
||||
return !showIcon ? 'file-type-tag-no-icon' : '';
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={tagClassName}>
|
||||
{getFileTypeIcon()}
|
||||
{FILE_TYPE_LABELS[fileType]}
|
||||
<span className={`${getTypeClass()} ${getSizeClass()} ${getIconClass()} ${className}`}>
|
||||
{showIcon && <i className={`${getTypeIcon()} file-type-icon`}></i>}
|
||||
<span className="file-type-text">{getTypeText()}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { SearchBox } from '~/components/ui/SearchBox';
|
||||
import { SimpleDateRangePicker, DateRangePicker } from '~/components/ui/DateRangePicker';
|
||||
|
||||
interface FilterOption {
|
||||
value: string;
|
||||
@@ -131,5 +132,69 @@ export function SearchFilter({
|
||||
);
|
||||
}
|
||||
|
||||
// 导出筛选下拉框组件
|
||||
|
||||
interface DateRangeFilterProps {
|
||||
label: string;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
onStartDateChange: (value: string) => void;
|
||||
onEndDateChange: (value: string) => void;
|
||||
className?: string;
|
||||
startLabel?: string;
|
||||
endLabel?: string;
|
||||
simple?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期范围筛选组件
|
||||
*
|
||||
* 使用示例:
|
||||
* ```tsx
|
||||
* <DateRangeFilter
|
||||
* label="上传时间"
|
||||
* startDate={dateFrom}
|
||||
* endDate={dateTo}
|
||||
* onStartDateChange={(value) => handleDateChange('dateFrom', value)}
|
||||
* onEndDateChange={(value) => handleDateChange('dateTo', value)}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export function DateRangeFilter({
|
||||
label,
|
||||
startDate,
|
||||
endDate,
|
||||
onStartDateChange,
|
||||
onEndDateChange,
|
||||
className = '',
|
||||
startLabel = "从",
|
||||
endLabel = "至",
|
||||
simple = false
|
||||
}: DateRangeFilterProps) {
|
||||
return (
|
||||
<div className={`filter-item ${className}`}>
|
||||
<label className="filter-label">{label}</label>
|
||||
{simple ? (
|
||||
<SimpleDateRangePicker
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
onStartDateChange={onStartDateChange}
|
||||
onEndDateChange={onEndDateChange}
|
||||
className="filter-control"
|
||||
/>
|
||||
) : (
|
||||
<DateRangePicker
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
onStartDateChange={onStartDateChange}
|
||||
onEndDateChange={onEndDateChange}
|
||||
startLabel={startLabel}
|
||||
endLabel={endLabel}
|
||||
className="filter-control"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 导出筛选下拉框组件和日期范围筛选组件
|
||||
export { FilterSelect };
|
||||
@@ -1,69 +1,83 @@
|
||||
import { ReviewStatus, REVIEW_STATUS_LABELS } from '~/routes/rules-files';
|
||||
import statusBadgeStyles from '~/styles/components/status-badge.css?url';
|
||||
|
||||
export type StatusType = 'pending' | 'processing' | 'pass' | 'warning' | 'fail' | string;
|
||||
|
||||
interface StatusBadgeProps {
|
||||
status: ReviewStatus;
|
||||
issueCount?: number;
|
||||
status: StatusType;
|
||||
text?: string;
|
||||
className?: string;
|
||||
size?: 'default' | 'sm' | 'lg';
|
||||
clickable?: boolean;
|
||||
onClick?: () => void;
|
||||
showIcon?: boolean;
|
||||
customIcon?: string;
|
||||
}
|
||||
|
||||
export function links() {
|
||||
return [{ rel: "stylesheet", href: statusBadgeStyles }];
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件评查状态标签组件
|
||||
* 根据评查状态显示不同样式的标签
|
||||
* 状态徽章组件
|
||||
* 用于显示文档的处理状态，如待审核、审核中、通过等
|
||||
*/
|
||||
export function StatusBadge({
|
||||
status,
|
||||
issueCount = 0,
|
||||
text,
|
||||
className = '',
|
||||
size,
|
||||
clickable = false,
|
||||
onClick
|
||||
showIcon = true,
|
||||
customIcon
|
||||
}: StatusBadgeProps) {
|
||||
const statusMap: Record<ReviewStatus, string> = {
|
||||
[ReviewStatus.PASS]: 'success',
|
||||
[ReviewStatus.WARNING]: 'warning',
|
||||
[ReviewStatus.FAIL]: 'error',
|
||||
[ReviewStatus.PENDING]: 'processing'
|
||||
};
|
||||
|
||||
const badgeType = statusMap[status] || 'default';
|
||||
const sizeClass = size ? `status-badge-${size}` : '';
|
||||
const clickableClass = clickable ? 'status-badge-clickable' : '';
|
||||
|
||||
// 根据状态选择图标
|
||||
// 状态对应的图标
|
||||
const getStatusIcon = () => {
|
||||
switch (status) {
|
||||
case ReviewStatus.PASS:
|
||||
return <i className="ri-checkbox-circle-line"></i>;
|
||||
case ReviewStatus.WARNING:
|
||||
return <i className="ri-alert-line"></i>;
|
||||
case ReviewStatus.FAIL:
|
||||
return <i className="ri-close-circle-line"></i>;
|
||||
case ReviewStatus.PENDING:
|
||||
return <i className="ri-time-line"></i>;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
// 如果提供了自定义图标，优先使用
|
||||
if (customIcon) return customIcon;
|
||||
|
||||
const statusIconMap: Record<string, string> = {
|
||||
pending: 'ri-time-line',
|
||||
processing: 'ri-loader-4-line',
|
||||
pass: 'ri-checkbox-circle-line',
|
||||
warning: 'ri-alert-line',
|
||||
fail: 'ri-error-warning-line',
|
||||
};
|
||||
return statusIconMap[status] || '';
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
if (clickable && onClick) {
|
||||
onClick();
|
||||
}
|
||||
// 状态对应的文本
|
||||
const getStatusText = () => {
|
||||
if (text) return text;
|
||||
|
||||
const statusTextMap: Record<string, string> = {
|
||||
pending: '待审核',
|
||||
processing: '审核中',
|
||||
pass: '通过',
|
||||
warning: '警告',
|
||||
fail: '不通过',
|
||||
};
|
||||
|
||||
// 中英文映射，方便国际化
|
||||
const statusEnglishTextMap: Record<string, string> = {
|
||||
pending: 'Pending',
|
||||
processing: 'Processing',
|
||||
pass: 'Pass',
|
||||
warning: 'Warning',
|
||||
fail: 'Failed',
|
||||
};
|
||||
|
||||
// 获取当前语言环境，这里默认使用中文
|
||||
const lang: string = 'zh';
|
||||
|
||||
return lang === 'en'
|
||||
? (statusEnglishTextMap[status] || status)
|
||||
: (statusTextMap[status] || status);
|
||||
};
|
||||
|
||||
// 获取状态对应的类名
|
||||
const getStatusClass = () => {
|
||||
return `status-badge status-${status}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`status-badge status-badge-${badgeType} status-badge-with-icon ${sizeClass} ${clickableClass} ${className}`}
|
||||
onClick={handleClick}
|
||||
role={clickable ? "button" : undefined}
|
||||
tabIndex={clickable ? 0 : undefined}
|
||||
>
|
||||
{getStatusIcon()}
|
||||
{REVIEW_STATUS_LABELS[status]}
|
||||
{issueCount > 0 && ` (${issueCount})`}
|
||||
<span className={`${getStatusClass()} ${className}`}>
|
||||
{showIcon && getStatusIcon() && <i className={`${getStatusIcon()} mr-1`}></i>}
|
||||
{getStatusText()}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
/* 封装了状态的点，用于显示状态*/
|
||||
// 状态类型
|
||||
type StatusType = 'success' | 'error' | 'warning' | 'default' | 'processing';
|
||||
|
||||
interface StatusDotProps {
|
||||
|
||||
Reference in New Issue
Block a user