all in
This commit is contained in:
@@ -0,0 +1,227 @@
|
||||
/**
|
||||
* 占位符表单组件
|
||||
* 用于合同起草时填写占位符值
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import type { PlaceholderSchema } from '~/types/contract-draft';
|
||||
|
||||
interface PlaceholderFormProps {
|
||||
schema: PlaceholderSchema | null;
|
||||
values: Record<string, string>;
|
||||
onChange: (values: Record<string, string>) => void;
|
||||
onBatchReplace: () => void;
|
||||
onExportDocument: () => void; // 改名：导出文档
|
||||
onComplete: () => void;
|
||||
isReplacing: boolean;
|
||||
isDeleting: boolean; // 改名：是否正在删除
|
||||
onSingleReplace?: (key: string, value: string) => void; // 单个替换
|
||||
onFieldFocus?: (key: string) => void; // 字段聚焦（高亮）
|
||||
}
|
||||
|
||||
export function PlaceholderForm({
|
||||
schema,
|
||||
values,
|
||||
onChange,
|
||||
onBatchReplace,
|
||||
onExportDocument,
|
||||
onComplete,
|
||||
isReplacing,
|
||||
isDeleting,
|
||||
onSingleReplace,
|
||||
onFieldFocus
|
||||
}: PlaceholderFormProps) {
|
||||
const [localValues, setLocalValues] = useState<Record<string, string>>(values);
|
||||
const [replacingFields, setReplacingFields] = useState<Set<string>>(new Set());
|
||||
|
||||
// 同步外部 values 到本地状态
|
||||
useEffect(() => {
|
||||
setLocalValues(values);
|
||||
}, [values]);
|
||||
|
||||
// 处理字段变化
|
||||
const handleFieldChange = (key: string, value: string) => {
|
||||
const newValues = { ...localValues, [key]: value };
|
||||
setLocalValues(newValues);
|
||||
onChange(newValues);
|
||||
};
|
||||
|
||||
// 处理字段聚焦（高亮文档中的占位符）
|
||||
const handleFieldFocus = (key: string) => {
|
||||
if (onFieldFocus) {
|
||||
onFieldFocus(key);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理单个字段替换
|
||||
const handleSingleReplace = async (key: string) => {
|
||||
const value = localValues[key];
|
||||
if (!value || !onSingleReplace) return;
|
||||
|
||||
setReplacingFields(prev => new Set(prev).add(key));
|
||||
try {
|
||||
await onSingleReplace(key, value);
|
||||
} finally {
|
||||
setReplacingFields(prev => {
|
||||
const next = new Set(prev);
|
||||
next.delete(key);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 检查是否有未填写的必填字段
|
||||
const getMissingRequiredFields = () => {
|
||||
if (!schema) return [];
|
||||
return schema.fields
|
||||
.filter(f => f.required && !localValues[f.key])
|
||||
.map(f => f.label);
|
||||
};
|
||||
|
||||
const handleCompleteClick = () => {
|
||||
const missing = getMissingRequiredFields();
|
||||
if (missing.length > 0) {
|
||||
alert(`请填写以下必填字段：\n${missing.join('\n')}`);
|
||||
return;
|
||||
}
|
||||
onComplete();
|
||||
};
|
||||
|
||||
if (!schema || !schema.fields || schema.fields.length === 0) {
|
||||
return (
|
||||
<div className="h-full flex items-center justify-center p-8">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center">
|
||||
<i className="ri-information-line text-3xl text-gray-400"></i>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-700 mb-2">暂无占位符配置</h3>
|
||||
<p className="text-sm text-gray-500">该模板尚未配置占位符字段</p>
|
||||
<p className="text-xs text-gray-400 mt-2">请联系管理员配置模板占位符</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-white">
|
||||
{/* 表单头部 */}
|
||||
<div className="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-white">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-[#004d38] flex items-center justify-center shadow-sm">
|
||||
<i className="ri-file-edit-line text-white text-base"></i>
|
||||
</div>
|
||||
<h2 className="text-lg font-bold text-gray-900">填写合同信息</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 表单内容区域 */}
|
||||
<div className="flex-1 overflow-y-auto px-6 py-4">
|
||||
<div className="space-y-4">
|
||||
{schema?.fields.map((field) => (
|
||||
<div key={field.key} className="form-field">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1.5">
|
||||
{field.label}
|
||||
{field.required && (
|
||||
<span className="text-red-500 ml-1">*</span>
|
||||
)}
|
||||
</label>
|
||||
|
||||
<div className="flex gap-2">
|
||||
{field.type === 'textarea' ? (
|
||||
<textarea
|
||||
value={localValues[field.key] || ''}
|
||||
onChange={(e) => handleFieldChange(field.key, e.target.value)}
|
||||
onFocus={() => handleFieldFocus(field.key)}
|
||||
placeholder={field.placeholder || `请输入${field.label}`}
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-150 resize-none bg-white text-gray-900 placeholder-gray-400 text-sm"
|
||||
rows={3}
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
type={field.type}
|
||||
value={localValues[field.key] || ''}
|
||||
onChange={(e) => handleFieldChange(field.key, e.target.value)}
|
||||
onFocus={() => handleFieldFocus(field.key)}
|
||||
placeholder={field.placeholder || `请输入${field.label}`}
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-150 bg-white text-gray-900 placeholder-gray-400 text-sm"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 单独的替换按钮 */}
|
||||
<button
|
||||
onClick={() => handleSingleReplace(field.key)}
|
||||
disabled={!localValues[field.key] || replacingFields.has(field.key)}
|
||||
className={`px-3 py-2 rounded-lg transition-all duration-150 flex items-center gap-1.5 text-sm font-medium whitespace-nowrap ${
|
||||
!localValues[field.key] || replacingFields.has(field.key)
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-primary text-white hover:bg-primary-hover shadow-sm hover:shadow'
|
||||
}`}
|
||||
title="替换此占位符"
|
||||
>
|
||||
{replacingFields.has(field.key) ? (
|
||||
<>
|
||||
<i className="ri-loader-4-line animate-spin text-base"></i>
|
||||
<span>替换中</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="ri-refresh-line text-base"></i>
|
||||
<span>替换</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮区域（固定在底部） */}
|
||||
<div className="border-t border-gray-200 px-6 py-3 bg-gray-50 flex gap-2">
|
||||
<button
|
||||
onClick={onBatchReplace}
|
||||
disabled={isReplacing || isDeleting}
|
||||
className={`flex-1 flex items-center justify-center gap-1.5 px-4 py-2 text-white text-sm font-medium rounded-lg transition-all duration-150 ${
|
||||
isReplacing || isDeleting
|
||||
? 'bg-gray-300 cursor-not-allowed'
|
||||
: 'bg-gradient-to-r from-primary to-[#004d38] hover:shadow-md active:scale-[0.98]'
|
||||
}`}
|
||||
>
|
||||
{isReplacing ? (
|
||||
<>
|
||||
<i className="ri-loader-4-line animate-spin"></i>
|
||||
<span>替换中</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="ri-refresh-line"></i>
|
||||
<span>全部替换</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleCompleteClick}
|
||||
disabled={isReplacing || isDeleting}
|
||||
className={`flex-1 flex items-center justify-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg transition-all duration-150 ${
|
||||
isReplacing || isDeleting
|
||||
? 'bg-gray-200 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-green-600 text-white hover:bg-green-700 hover:shadow-md active:scale-[0.98]'
|
||||
}`}
|
||||
>
|
||||
{isDeleting ? (
|
||||
<>
|
||||
<i className="ri-loader-4-line animate-spin"></i>
|
||||
<span>处理中</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="ri-check-line"></i>
|
||||
<span>完成</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user