260 lines
11 KiB
TypeScript
260 lines
11 KiB
TypeScript
import { useState } from 'react';
|
||
|
||
interface BasicInfoProps {
|
||
onChange?: (data: Record<string, unknown>) => void;
|
||
}
|
||
|
||
export function BasicInfo({ onChange }: BasicInfoProps) {
|
||
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
|
||
const [formData, setFormData] = useState({
|
||
name: '',
|
||
code: '',
|
||
riskLevel: 'medium',
|
||
type: '',
|
||
group: 'contract-base',
|
||
enabled: true,
|
||
description: '',
|
||
lawName: '',
|
||
lawArticles: '',
|
||
lawContent: ''
|
||
});
|
||
|
||
const toggleDescription = () => {
|
||
setIsDescriptionExpanded(!isDescriptionExpanded);
|
||
};
|
||
|
||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||
const { id, value } = e.target;
|
||
let fieldName = id;
|
||
|
||
// 映射id到表单字段名
|
||
switch(id) {
|
||
case 'checkpoint-name': fieldName = 'name'; break;
|
||
case 'checkpoint-code': fieldName = 'code'; break;
|
||
case 'risk-level': fieldName = 'riskLevel'; break;
|
||
case 'checkpointType': fieldName = 'type'; break;
|
||
case 'rule-group': fieldName = 'group'; break;
|
||
case 'is-enabled': fieldName = 'enabled'; break;
|
||
case 'checkpoint-description': fieldName = 'description'; break;
|
||
case 'law-name': fieldName = 'lawName'; break;
|
||
case 'law-articles': fieldName = 'lawArticles'; break;
|
||
case 'law-content': fieldName = 'lawContent'; break;
|
||
}
|
||
|
||
const newData = {
|
||
...formData,
|
||
[fieldName]: id === 'is-enabled' ? value === 'true' : value
|
||
};
|
||
|
||
setFormData(newData);
|
||
|
||
if (onChange) {
|
||
onChange(newData);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="ant-card">
|
||
<div className="ant-card-header">
|
||
<h3>基本信息</h3>
|
||
</div>
|
||
<div className="ant-card-body">
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div>
|
||
<label className="form-label" htmlFor="checkpoint-name">
|
||
评查点名称 <span className="required-mark">*</span>
|
||
</label>
|
||
<input
|
||
id="checkpoint-name"
|
||
type="text"
|
||
className="form-input"
|
||
placeholder="请输入评查点名称"
|
||
value={formData.name}
|
||
onChange={handleInputChange}
|
||
/>
|
||
<div className="form-tip">请使用简洁明了的名称，不超过30个字符</div>
|
||
</div>
|
||
<div>
|
||
<label className="form-label" htmlFor="checkpoint-code">
|
||
评查点编码 <span className="required-mark">*</span>
|
||
</label>
|
||
<input
|
||
id="checkpoint-code"
|
||
type="text"
|
||
className="form-input"
|
||
placeholder="请输入评查点编码"
|
||
value={formData.code}
|
||
onChange={handleInputChange}
|
||
/>
|
||
<div className="form-tip">用于系统标识的唯一编码</div>
|
||
</div>
|
||
<div>
|
||
<label className="form-label" htmlFor="risk-level">
|
||
风险等级： <span className="required-mark">*</span>
|
||
</label>
|
||
<select
|
||
id="risk-level"
|
||
className="form-select"
|
||
value={formData.riskLevel}
|
||
onChange={handleInputChange}
|
||
>
|
||
<option value="high">高风险</option>
|
||
<option value="medium">中风险</option>
|
||
<option value="low">低风险</option>
|
||
</select>
|
||
<div className="form-tip">请定义评查点的风险等级</div>
|
||
</div>
|
||
<div>
|
||
<label className="form-label" htmlFor="checkpointType">
|
||
评查点类型 <span className="required-mark">*</span>
|
||
</label>
|
||
<select
|
||
className="form-select"
|
||
id="checkpointType"
|
||
value={formData.type}
|
||
onChange={handleInputChange}
|
||
>
|
||
<option value="">请选择评查点类型</option>
|
||
<option value="essential">基本要素类</option>
|
||
<option value="content">内容合规类</option>
|
||
<option value="format">格式规范类</option>
|
||
<option value="legal">法律风险类</option>
|
||
<option value="business">业务专项类</option>
|
||
</select>
|
||
<div className="form-tip">评查点类型用于分类管理，便于规则统一调用</div>
|
||
</div>
|
||
<div>
|
||
<label className="form-label" htmlFor="rule-group">所属规则组</label>
|
||
<select
|
||
id="rule-group"
|
||
className="form-select"
|
||
value={formData.group}
|
||
onChange={handleInputChange}
|
||
>
|
||
<option value="contract-base">合同基本要素检查</option>
|
||
<option value="contract-sales">销售合同专项检查</option>
|
||
<option value="contract-purchase">采购合同专项检查</option>
|
||
<option value="license">专卖许可证审核规则</option>
|
||
<option value="punishment">行政处罚规范性检查</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="form-label" htmlFor="is-enabled">是否启用</label>
|
||
<select
|
||
id="is-enabled"
|
||
className="form-select"
|
||
value={formData.enabled ? 'true' : 'false'}
|
||
onChange={handleInputChange}
|
||
>
|
||
<option value="true">是</option>
|
||
<option value="false">否</option>
|
||
</select>
|
||
<div className="form-tip">创建后是否立即启用此评查点</div>
|
||
</div>
|
||
<div className="col-span-1 md:col-span-3">
|
||
<div
|
||
className={`flex justify-between items-center cursor-pointer ${isDescriptionExpanded ? 'expanded' : ''}`}
|
||
onClick={toggleDescription}
|
||
role="button"
|
||
tabIndex={0}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
toggleDescription();
|
||
}
|
||
}}
|
||
aria-expanded={isDescriptionExpanded}
|
||
aria-controls="description-section"
|
||
>
|
||
<h4 className="form-label mb-0">评查点描述与法律依据</h4>
|
||
<i className="ri-arrow-down-s-line text-lg expand-icon"></i>
|
||
</div>
|
||
|
||
<div id="description-section" className={`mt-2 ${isDescriptionExpanded ? '' : 'hidden'}`}>
|
||
<div className="mb-4">
|
||
<label className="form-label" htmlFor="checkpoint-description">评查点描述</label>
|
||
<textarea
|
||
id="checkpoint-description"
|
||
className="form-textarea"
|
||
style={{ minHeight: '80px' }}
|
||
placeholder="请输入评查点描述，包括适用场景、评查目的等"
|
||
value={formData.description}
|
||
onChange={handleInputChange}
|
||
></textarea>
|
||
<div className="form-tip">详细描述有助于其他用户了解该评查点的用途</div>
|
||
</div>
|
||
|
||
{/* 引用法典输入区域 */}
|
||
<div className="border-t border-gray-100 pt-4 mb-4">
|
||
<label className="form-label" htmlFor="law-section">引用法典</label>
|
||
|
||
<div className="mb-3" id="law-section">
|
||
<label className="text-sm text-gray-600 mb-1 block" htmlFor="law-name">法典名称</label>
|
||
<input
|
||
type="text"
|
||
className="form-input"
|
||
placeholder="例如：《中华人民共和国民法典》"
|
||
id="law-name"
|
||
value={formData.lawName}
|
||
onChange={handleInputChange}
|
||
/>
|
||
</div>
|
||
|
||
<div className="mb-3">
|
||
<label className="text-sm text-gray-600 mb-1 block" htmlFor="law-articles">条款号 <span className="text-xs text-gray-400">(多个条款请用逗号分隔)</span></label>
|
||
<input
|
||
type="text"
|
||
className="form-input"
|
||
placeholder="例如：第五百八十五条,第五百八十六条"
|
||
id="law-articles"
|
||
value={formData.lawArticles}
|
||
onChange={handleInputChange}
|
||
/>
|
||
<div className="form-tip">多个条款用逗号分隔，将自动转换为数组格式</div>
|
||
</div>
|
||
|
||
<div className="mb-3">
|
||
<label className="text-sm text-gray-600 mb-1 block" htmlFor="law-content">条款内容</label>
|
||
<textarea
|
||
className="form-textarea"
|
||
style={{ minHeight: '60px' }}
|
||
placeholder="例如：当事人应当按照约定全面履行自己的义务。"
|
||
id="law-content"
|
||
value={formData.lawContent}
|
||
onChange={handleInputChange}
|
||
></textarea>
|
||
</div>
|
||
|
||
<div className="p-3 bg-blue-50 border border-blue-200 rounded-md text-sm text-blue-700 mb-2">
|
||
<i className="ri-information-line mr-1"></i> 引用的法律条文将在评查结果中显示，帮助用户理解评查规则的法律依据
|
||
</div>
|
||
|
||
{/* 预览区域 */}
|
||
<div className="p-3 border border-gray-200 rounded-md bg-gray-50 mt-3">
|
||
<div className="text-sm font-medium mb-2">预览效果</div>
|
||
<div className="law-reference">
|
||
<div className="law-reference-title" id="preview-law-name">
|
||
{formData.lawName || '《中华人民共和国民法典》'}
|
||
</div>
|
||
<div className="law-reference-articles" id="preview-law-articles">
|
||
{formData.lawArticles ? formData.lawArticles.split(',').map((article, index) => (
|
||
<span key={index} className="law-article">{article.trim()}</span>
|
||
)) : (
|
||
<>
|
||
<span className="law-article">第五百八十五条</span>
|
||
<span className="law-article">第五百八十六条</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="law-reference-content" id="preview-law-content">
|
||
{formData.lawContent || '当事人应当按照约定全面履行自己的义务。'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|