注册表单增加字段

src/pages/register/supplier/DomesticForm.tsx

@@ -1,13 +1,14 @@
 /* 境内企业/机构 表单项 */
-import React from 'react';
-import { Form, Input, Button, Select, Upload, DatePicker, Row, Col, message } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { Form, Input, Button, Select, Upload, DatePicker, Row, Col, message, Space } from 'antd';
 import {
   MobileOutlined,
   MailOutlined,
   EnvironmentOutlined,
   UploadOutlined,
 } from '@ant-design/icons';
-
+import { getDictList } from '@/servers/api/dicts';
+import type { DictItem } from '@/servers/api/dicts';
 /**
  * 引入通用表单组件
  */
@@ -43,6 +44,15 @@ const DomesticForm: React.FC<DomesticFormProps> = ({
   handleGetCaptcha,
   surveyQuestions,
 }) => {
+  const [contactsTypeOptions, setContactsTypeOptions] = useState<DictItem[]>([]);
+  useEffect(() => {
+    // 从字典中 联系人身份类别contacts_type 获取数据
+    getDictList('contacts_type').then(res => {
+      if (res.code === 200) {
+        setContactsTypeOptions(res.data);
+      }
+    });
+  }, []);
   return (
     <>
       <div className="form-section-title">基本信息</div>
@@ -73,11 +83,7 @@ const DomesticForm: React.FC<DomesticFormProps> = ({
             label="营业执照有效期"
             rules={[{ required: false, message: '请选择营业执照有效期' }]}
           >
-            <DatePicker
-              placeholder="请选择日期"
-              style={{ width: '100%' }}
-              format="YYYY-MM-DD"
-            />
+            <DatePicker placeholder="请选择日期" style={{ width: '100%' }} format="YYYY-MM-DD" />
           </Form.Item>
         </Col>
         <Col span={8}>
@@ -116,21 +122,16 @@ const DomesticForm: React.FC<DomesticFormProps> = ({
             label="注册资本"
             rules={[{ required: true, message: '请输入注册资本' }]}
           >
-            <Input
-              type="number"
-              placeholder="请输入金额"
-              addonBefore="人民币"
-              addonAfter="万元"
-            />
+            <Input type="number" placeholder="请输入金额" addonBefore="人民币" addonAfter="万元" />
           </Form.Item>
         </Col>
         <Col span={8}>
           <Form.Item
             name="companyType"
-            label="企业性质"
-            rules={[{ required: true, message: '请选择企业性质' }]}
+            label="企业类别"
+            rules={[{ required: true, message: '请选择企业类别' }]}
           >
-            <Select placeholder="请选择企业性质">
+            <Select placeholder="请选择企业类别">
               <Option value="limited">有限责任公司</Option>
               <Option value="joint">股份有限公司</Option>
               <Option value="individual">个体工商户</Option>
@@ -138,7 +139,7 @@ const DomesticForm: React.FC<DomesticFormProps> = ({
             </Select>
           </Form.Item>
         </Col>
-        <Col span={8}>
+        {/* <Col span={8}>
           <Form.Item
             name="supplierType"
             label="供应商类型"
@@ -151,7 +152,7 @@ const DomesticForm: React.FC<DomesticFormProps> = ({
               <Option value="other">其他</Option>
             </Select>
           </Form.Item>
-        </Col>
+        </Col> */}
         <Col span={8}>
           <Form.Item name="parentCompanyInfo" label="母公司/出资人">
             <Input placeholder="请输入母公司或出资人信息" />
@@ -233,7 +234,7 @@ const DomesticForm: React.FC<DomesticFormProps> = ({
             </Row>
           </Form.Item>
         </Col>
-        <Col span={8}>
+        {/* <Col span={8}>
           <Form.Item name="contactIdType" label="联系人身份类别">
             <Select placeholder="请选择类型">
               <Option value="idcard">居民身份证</Option>
@@ -241,10 +242,21 @@ const DomesticForm: React.FC<DomesticFormProps> = ({
               <Option value="other">其他证件</Option>
             </Select>
           </Form.Item>
-        </Col>
+        </Col> */}
         <Col span={8}>
-          <Form.Item name="contactIdNumber" label="联系人证件号码">
-            <Input placeholder="请填写联系人正确的身份证号" />
+          <Form.Item label="联系人证件号码" required >
+            <Space.Compact size='large'>
+              <Form.Item name="contactIdType" noStyle rules={[{ required: true, message: '请选择联系人证件类型' }]}>
+                <Select placeholder="请选择类型">
+                  {contactsTypeOptions.map(item => (
+                    <Option key={item.code} value={item.code}>{item.dicName}</Option>
+                  ))}
+                </Select>
+              </Form.Item>
+              <Form.Item name="contactIdNumber" noStyle rules={[{ required: true, message: '请填写联系人正确的身份证号' }]}>
+                <Input placeholder="请填写联系人正确的身份证号" />
+              </Form.Item>
+            </Space.Compact>
           </Form.Item>
         </Col>
         <Col span={8}>
@@ -269,7 +281,7 @@ const DomesticForm: React.FC<DomesticFormProps> = ({
       {/* 使用通用表单组件 */}
       <QualificationSection form={form} />
       <InvoiceSection form={form} />
-      <BankAccountSection form={form} supplierType={'dvs'}  />
+      <BankAccountSection form={form} supplierType={'dvs'} />
       <SurveySection form={form} surveyQuestions={surveyQuestions} />
       <AttachmentSection form={form} />
     </>