企业认证增加模糊搜索

pages/certification/api/index.ts

@@ -8,9 +8,41 @@ export interface CompanyAuthParams {
   authStatus: 1 | 0
 }
 
+export interface FuzzyQueryCompanyResp {
+  Status: string;
+  Message: string;
+  OrderNumber: string;
+  Paging: Paging;
+  Result: EnterpriseInfo[];
+}
+
+export interface EnterpriseInfo {
+  KeyNo: string;
+  Name: string;
+  CreditCode: string;
+  StartDate: string;
+  OperName: string;
+  Status: string;
+  No: string;
+  Address: string;
+  label: string;
+  value: string;
+}
+
+export interface Paging {
+  PageSize: number;
+  PageIndex: number;
+  TotalRecords: number;
+}
+
 export default {
   //提交企业认证
-  companyAuth(params: CompanyAuthParams):Promise<Response<string>>{
+  companyAuth(params: CompanyAuthParams): Promise<Response<string>> {
     return request('/userapp/company-auth/add', 'post', params)
+  },
+
+  //企业工商模糊搜索
+  fuzzyQueryCompany(params: { searchKey: string }): Promise<Response<FuzzyQueryCompanyResp>> {
+    return request('/userapp/company-auth/fuzzyQueryCompany', 'get', params);
   }
 }
\ No newline at end of file

pages/certification/index.page.tsx

 import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
-import { Col, Form, Input, Row, Upload, message, Button, Image } from "antd";
+import {
+  Col,
+  Form,
+  Input,
+  Row,
+  Upload,
+  message,
+  Button,
+  Image,
+  AutoComplete,
+} from "antd";
 import type { UploadChangeParam } from "antd/es/upload";
 import type { RcFile, UploadFile, UploadProps } from "antd/es/upload/interface";
 import { useContext, useState } from "react";
 import config from "~/api/config";
 import Layout from "~/components/layout";
-import api from "./api";
+import api, { EnterpriseInfo } from "./api";
 import styles from "./index.module.scss";
 import gApi from "~/api";
 import Router from "next/router";
 import { UserContext } from "~/lib/userProvider";
+import { clear } from "console";
 
 const beforeUpload = (file: RcFile) => {
   const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
@@ -32,10 +43,20 @@ const normFile = (e: any) => {
   return e?.fileList;
 };
 
+type EnterpriseOption = {
+  label: string;
+  value: string;
+  creditCode: string;
+};
+
 export default function Certification() {
   const [loading, setLoading] = useState(false);
   const [imageUrl, setImageUrl] = useState<string>();
   const { userInfo, setUserInfo } = useContext(UserContext);
+  const [enterpriseOptions, setEnterpriseOptions] = useState<
+    Array<EnterpriseOption>
+  >([]);
+  const [form] = Form.useForm();
 
   //上传change事件
   const handleChange: UploadProps["onChange"] = (
@@ -78,6 +99,40 @@ export default function Certification() {
       });
   };
 
+  let handle: NodeJS.Timeout;
+  //搜索企业
+  const onSearchEnterprise = (text: string) => {
+    if (handle) {
+      clearTimeout(handle);
+    }
+    handle = setTimeout(() => {
+      api
+        .fuzzyQueryCompany({
+          searchKey: text,
+        })
+        .then((res) => {
+          if (res.code === "200") {
+            setEnterpriseOptions(
+              res.result?.Result?.map((item) => {
+                return {
+                  label: item.Name,
+                  value: item.Name,
+                  creditCode: item.CreditCode,
+                };
+              }) || []
+            );
+          } else {
+            setEnterpriseOptions([]);
+          }
+        });
+    }, 500);
+  };
+
+  //选择的企业
+  const onSelectEnterprise = (value: string, option: EnterpriseOption) => {
+    form.setFieldValue("creditCode", option.creditCode);
+  };
+
   return (
     <Layout>
       <div className={styles.banner}></div>
@@ -104,6 +159,7 @@ export default function Certification() {
         </div>
         <div>
           <Form
+            form={form}
             style={{ padding: "70px 170px 162px 170px" }}
             onFinish={onFinish}
           >
@@ -115,7 +171,14 @@ export default function Certification() {
                   rules={[{ required: true }]}
                   style={{ borderBottom: "1px solid RGBA(243, 243, 243, 1)" }}
                 >
-                  <Input bordered={false} placeholder="请输入企业名称"></Input>
+                  <AutoComplete
+                    options={enterpriseOptions}
+                    style={{ width: 200 }}
+                    onSelect={onSelectEnterprise}
+                    onSearch={onSearchEnterprise}
+                    placeholder="请输入企业名称"
+                    bordered={false}
+                  />
                 </Form.Item>
               </Col>
               <Col span={11}>