feat

src/pages/ShowInfo.tsx

@@ -7,7 +7,7 @@ import {
   ProFormText,
   ProFormUploadDragger,
 } from '@ant-design/pro-components';
-import { Button, Form, Image, Spin, SpinProps } from 'antd';
+import { Button, Form, Image, Spin } from 'antd';
 import React, { useEffect, useState } from 'react';
 // @ts-ignore
 import cookie from 'react-cookies';
@@ -17,17 +17,54 @@ const ShowInfoDemo: React.FC = () => {
   const [imageUrl, setImageUrl] = useState<string>('');
   // 是否需要加载中
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [keyNameList, setKeyNameList] = useState<Record<string, any>[]>([]);
+  const [initialValues, setInitialValues] = useState<Record<string, any>>({});
 
-  const initialValues = {
-    cardCode: '200100199508081010',
-    gender: '男',
-  };
+  function fetchKeyValueList() {
+    setKeyNameList([
+      // { label: '证件号码', value: '200100199508081010' },
+      // { label: '性别', value: '男' },
+    ]);
+    // setInitialValues({
+    //   cardCode: '200100199508081010',
+    //   gender: '男',
+    // })
+  }
+  function doAddField() {
+    setKeyNameList([
+      {
+        label: '证件名称',
+        value: '居民身份',
+      },
+      {
+        label: '证件号码',
+        value: '511028198702325665',
+      },
+      {
+        label: '姓名',
+        value: '杨阳阳',
+      },
+      {
+        label: '性别',
+        value: '男',
+      },
+      {
+        label: '出生日期',
+        value: '1989-10-21',
+      },
+    ]);
+  }
 
+  useEffect(() => {
+    fetchKeyValueList();
+  }, []);
 
   return (
     <div className="showInfoDemo_wrap">
       <Spin tip="正在分析中，请稍候..." fullscreen={true} spinning={isLoading}></Spin>
-
+      <Button type="primary" onClick={doAddField}>
+        addField
+      </Button>
       <PageContainer>
         <ProCard wrap title={'选择图片'} bodyStyle={{ display: 'flex' }}>
           <div>
@@ -40,7 +77,7 @@ const ShowInfoDemo: React.FC = () => {
                 showUploadList: false,
                 listType: 'picture-card',
                 beforeUpload: (file) => {
-                  setIsLoading(true)
+                  setIsLoading(true);
                   const reader = new FileReader();
                   reader.onload = (e) => {
                     setImageUrl(e.target?.result as string);
@@ -52,7 +89,7 @@ const ShowInfoDemo: React.FC = () => {
                   // 返回 Promise 可以异步操作
                   return true;
                 },
-            
+
                 maxCount: 1,
                 name: 'file',
                 // beforeUpload: beforeUploadFile,
@@ -73,7 +110,6 @@ const ShowInfoDemo: React.FC = () => {
           <div style={{ flex: 1, padding: 20 }}>
             <ProForm
               form={form}
-              initialValues={initialValues} // 设置初始值
               submitter={
                 { render: false } // 隐藏提交按钮
               } // 配置 submitter
@@ -83,23 +119,20 @@ const ShowInfoDemo: React.FC = () => {
                 fieldProps={{
                   labelInValue: true,
                 }}
-                request={async () => [
-                  // TODO 使用接口数据与  initialValues 值对应
-                  { label: '证件号码', value: 'cardCode' },
-                  { label: '性别', value: 'gender' },
-                ]}
+                options={keyNameList}
                 name="name1"
                 label="展示数据"
               />
               <ProFormDependency name={['name1']}>
                 {({ name1 }) => {
                   if (name1) {
+                    form.setFieldValue('activeKey', name1.value);
                     console.log(name1, 'ProFormDependency_name1');
                     return (
                       <ProFormText
                         width={160}
                         label={name1.label}
-                        name={name1.value}
+                        name={'activeKey'}
                         disabled
                         required={false}
                       />