评查点新增修改逻辑完善

app/components/rules/new/BasicInfo.tsx

@@ -1,49 +1,105 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 interface BasicInfoProps {
   onChange?: (data: Record<string, unknown>) => void;
 }
 
+// 定义表单数据类型
+interface FormDataType {
+  name: string;
+  code: string;
+  risk: string;
+  is_enabled: boolean;
+  description: string;
+  references_laws: {
+    name: string;
+    articles: string[];
+    content: string;
+  };
+  evaluation_point_groups_id: number | null;
+  type: string;
+}
+
 export function BasicInfo({ onChange }: BasicInfoProps) {
-  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<FormDataType>({
     name: '',
     code: '',
-    riskLevel: 'medium',
-    type: '',
-    group: 'contract-base',
-    enabled: true,
+    risk: 'medium',
+    is_enabled: true,
     description: '',
-    lawName: '',
-    lawArticles: '',
-    lawContent: ''
+    references_laws: {
+      name: '',
+      articles: [],
+      content: ''
+    },
+    evaluation_point_groups_id: null,
+    type: ''
   });
 
-  const toggleDescription = () => {
-    setIsDescriptionExpanded(!isDescriptionExpanded);
+  const [isDescExpanded, setIsDescExpanded] = useState(false);
+  const [lawArticlesInput, setLawArticlesInput] = useState('');
+
+  const handleToggleDescription = () => {
+    setIsDescExpanded(!isDescExpanded);
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
     const { id, value } = e.target;
-    let fieldName = id;
+    const newData = { ...formData };
     
     // 映射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;
+      case 'rule-name': 
+        newData.name = value;
+        break;
+      case 'rule-code': 
+        newData.code = value;
+        break;
+      case 'risk-level': 
+        newData.risk = value;
+        break;
+      case 'is-enabled': 
+        newData.is_enabled = value === 'true';
+        break;
+      case 'rule-description': 
+        newData.description = value;
+        break;
+      case 'law-name': 
+        newData.references_laws.name = value;
+        break;
+      case 'law-content': 
+        newData.references_laws.content = value;
+        break;
+      case 'law-articles':
+        setLawArticlesInput(value);
+        break;
+      case 'evaluation-point-group':
+        newData.evaluation_point_groups_id = value ? parseInt(value) : null;
+        break;
+      case 'checkpoint-type':
+        newData.type = value;
+        break;
     }
     
+    setFormData(newData);
+    
+    if (onChange) {
+      onChange(newData);
+    }
+  };
+
+  const handleLawArticlesChange = (value: string) => {
+    setLawArticlesInput(value);
+    const articles = value.split(',')
+      .map(article => article.trim())
+      .filter(article => article !== '');
+      
     const newData = {
       ...formData,
-      [fieldName]: id === 'is-enabled' ? value === 'true' : value
+      references_laws: {
+        ...formData.references_laws,
+        articles
+      }
     };
     
     setFormData(newData);
@@ -61,28 +117,28 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
       <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">
+            <label className="form-label" htmlFor="rule-name">
               评查点名称 <span className="required-mark">*</span>
             </label>
-            <input 
-              id="checkpoint-name" 
-              type="text" 
-              className="form-input" 
-              placeholder="请输入评查点名称" 
+            <input
+              type="text"
+              id="rule-name"
+              className="form-input"
+              placeholder="请输入评查点名称，简洁明了"
               value={formData.name}
               onChange={handleInputChange}
             />
             <div className="form-tip">请使用简洁明了的名称，不超过30个字符</div>
           </div>
           <div>
-            <label className="form-label" htmlFor="checkpoint-code">
+            <label className="form-label" htmlFor="rule-code">
               评查点编码 <span className="required-mark">*</span>
             </label>
-            <input 
-              id="checkpoint-code" 
-              type="text" 
-              className="form-input" 
-              placeholder="请输入评查点编码" 
+            <input
+              type="text"
+              id="rule-code"
+              className="form-input"
+              placeholder="请输入评查点编码"
               value={formData.code}
               onChange={handleInputChange}
             />
@@ -95,7 +151,7 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
             <select 
               id="risk-level" 
               className="form-select"
-              value={formData.riskLevel}
+              value={formData.risk}
               onChange={handleInputChange}
             >
               <option value="high">高风险</option>
@@ -105,12 +161,12 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
             <div className="form-tip">请定义评查点的风险等级</div>
           </div>
           <div>
-            <label className="form-label" htmlFor="checkpointType">
+            <label className="form-label" htmlFor="checkpoint-type">
               评查点类型 <span className="required-mark">*</span>
             </label>
             <select 
-              className="form-select" 
-              id="checkpointType"
+              id="checkpoint-type" 
+              className="form-select"
               value={formData.type}
               onChange={handleInputChange}
             >
@@ -124,18 +180,21 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
             <div className="form-tip">评查点类型用于分类管理，便于规则统一调用</div>
           </div>
           <div>
-            <label className="form-label" htmlFor="rule-group">所属规则组</label>
+            <label className="form-label" htmlFor="evaluation-point-group">
+              所属规则组
+            </label>
             <select 
-              id="rule-group" 
+              id="evaluation-point-group" 
               className="form-select"
-              value={formData.group}
+              value={formData.evaluation_point_groups_id?.toString() || ""}
               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>
+              <option value="">请选择规则组</option>
+              <option value="1">合同基本要素检查</option>
+              <option value="2">销售合同专项检查</option>
+              <option value="3">采购合同专项检查</option>
+              <option value="4">专卖许可证审核规则</option>
+              <option value="5">行政处罚规范性检查</option>
             </select>
           </div>
           <div>
@@ -143,7 +202,7 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
             <select 
               id="is-enabled" 
               className="form-select"
-              value={formData.enabled ? 'true' : 'false'}
+              value={formData.is_enabled ? 'true' : 'false'}
               onChange={handleInputChange}
             >
               <option value="true">是</option>
@@ -151,38 +210,36 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
             </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}
+              className={`flex justify-between items-center cursor-pointer ${isDescExpanded ? 'expanded' : ''}`}
+              onClick={handleToggleDescription}
               onKeyDown={(e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
-                  toggleDescription();
+                  handleToggleDescription();
                 }
               }}
-              aria-expanded={isDescriptionExpanded}
-              aria-controls="description-section"
+              tabIndex={0}
+              role="button"
             >
-              <h4 className="form-label mb-0">评查点描述与法律依据</h4>
+              <label className="form-label mb-0" htmlFor="description-section">评查点描述与法律依据</label>
               <i className="ri-arrow-down-s-line text-lg expand-icon"></i>
             </div>
             
-            <div id="description-section" className={`mt-2 ${isDescriptionExpanded ? '' : 'hidden'}`}>
+            <div className={`mt-2 ${isDescExpanded ? '' : 'hidden'}`} id="description-section">
               <div className="mb-4">
-                <label className="form-label" htmlFor="checkpoint-description">评查点描述</label>
-                <textarea 
-                  id="checkpoint-description"
-                  className="form-textarea" 
-                  style={{ minHeight: '80px' }} 
-                  placeholder="请输入评查点描述，包括适用场景、评查目的等"
+                <textarea
+                  id="rule-description"
+                  className="form-textarea"
+                  placeholder="请输入评查点的详细描述"
+                  style={{ minHeight: '80px' }}
                   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>
@@ -194,7 +251,7 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
                     className="form-input" 
                     placeholder="例如：《中华人民共和国民法典》" 
                     id="law-name" 
-                    value={formData.lawName}
+                    value={formData.references_laws.name}
                     onChange={handleInputChange}
                   />
                 </div>
@@ -206,8 +263,8 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
                     className="form-input" 
                     placeholder="例如：第五百八十五条,第五百八十六条" 
                     id="law-articles" 
-                    value={formData.lawArticles}
-                    onChange={handleInputChange}
+                    value={lawArticlesInput}
+                    onChange={(e) => handleLawArticlesChange(e.target.value)}
                   />
                   <div className="form-tip">多个条款用逗号分隔，将自动转换为数组格式</div>
                 </div>
@@ -219,7 +276,7 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
                     style={{ minHeight: '60px' }} 
                     placeholder="例如：当事人应当按照约定全面履行自己的义务。" 
                     id="law-content"
-                    value={formData.lawContent}
+                    value={formData.references_laws.content}
                     onChange={handleInputChange}
                   ></textarea>
                 </div>
@@ -233,12 +290,13 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
                   <div className="text-sm font-medium mb-2">预览效果</div>
                   <div className="law-reference">
                     <div className="law-reference-title" id="preview-law-name">
-                      {formData.lawName || '《中华人民共和国民法典》'}
+                      {formData.references_laws.name || '《中华人民共和国民法典》'}
                     </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>
-                      )) : (
+                      {formData.references_laws.articles.length > 0 ? 
+                        formData.references_laws.articles.map((article, index) => (
+                          <span key={index} className="law-article">{article}</span>
+                        )) : (
                         <>
                           <span className="law-article">第五百八十五条</span>
                           <span className="law-article">第五百八十六条</span>
@@ -246,7 +304,7 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
                       )}
                     </div>
                     <div className="law-reference-content" id="preview-law-content">
-                      {formData.lawContent || '当事人应当按照约定全面履行自己的义务。'}
+                      {formData.references_laws.content || '当事人应当按照约定全面履行自己的义务。'}
                     </div>
                   </div>
                 </div>