解决表字段附加表全选回显错误问题，新增表搜索功能

src/pages/platformCenter/bsmanager/tablemanager/components/Field/affiliateAdd.jsx

 import React, { useState, useEffect } from 'react';
 import { Form, Modal, Input, Select, Checkbox, notification, Card } from 'antd';
 
-import {
-    loadTableFields, addTables, addFields
-} from '@/services/platform/bs'
-import styles from './index.less'
+import { loadTableFields, addTables, addFields } from '@/services/platform/bs';
+import styles from './index.less';
 const CheckboxGroup = Checkbox.Group;
 import qs from 'qs';
 const { Option } = Select;
 const AddModal = props => {
-    const { callBackSubmit = () => { }, type, visible, tableList, formObj } = props;
+  const { callBackSubmit = () => {}, type, visible, tableList, formObj } = props;
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const { Item } = Form;
-    const [plainOptions, setPlainOptions] = useState([]);//复选框所有内容
-    const [checkedList, setCheckedList] = useState([]);//选中的复选框内容
+  const [plainOptions, setPlainOptions] = useState([]); //复选框所有内容
+  const [checkedList, setCheckedList] = useState([]); //选中的复选框内容
   const [indeterminate, setIndeterminate] = useState(true);
   const [checkAll, setCheckAll] = useState(false);
 
-
   const onChange = list => {
     setCheckedList(list);
     setIndeterminate(!!list.length && list.length < plainOptions.length);
@@ -34,22 +31,27 @@ const AddModal = props => {
   const onSubmit = () => {
     let fieldNames = [];
     (checkedList || []).map(item => {
-            fieldNames.push({ fieldNames: item })
-        })
+      fieldNames.push({ fieldNames: item });
+    });
     form.validateFields().then(validate => {
       if (validate) {
         let obj = form.getFieldsValue();
         setLoading(true);
-                let data = {}, url = JSON.stringify(formObj) == '{}' ? addTables : addFields
+        let data = {},
+          url = JSON.stringify(formObj) == '{}' ? addTables : addFields;
         if (JSON.stringify(formObj) == '{}') {
-                    data = { tableName: obj.tableName, alias: obj.tableAlias || '', fieldNames: checkedList.join(',') }
-                }
-                else {
-                    data = { tableName: formObj.tableName, fieldNames: checkedList.join(',') }
+          data = {
+            tableName: obj.tableName,
+            alias: obj.tableAlias || '',
+            fieldNames: checkedList.join(','),
+          };
+        } else {
+          data = { tableName: formObj.tableName, fieldNames: checkedList.join(',') };
         }
-                url(data).then(res => {
+        url(data)
+          .then(res => {
             setLoading(false);
-                    if (res.msg === "Ok" || res.msg === "") {
+            if (res.msg === 'Ok' || res.msg === '') {
               form.resetFields();
               callBackSubmit();
               notification.success({
@@ -57,7 +59,6 @@ const AddModal = props => {
                 duration: 3,
                 description: JSON.stringify(formObj) == '{}' ? '新增成功' : '表字段新增成功',
               });
-
             } else {
               notification.error({
                 message: '提示',
@@ -74,41 +75,43 @@ const AddModal = props => {
             });
             setLoading(false);
           });
-
       }
     });
   };
 
-
-
   useEffect(() => {
     if (type != '' && JSON.stringify(formObj) == '{}') {
-            renderField(tableList[0].text)
+      renderField(tableList[0].text);
       form.setFieldsValue({
-                tableName: tableList[0].text
-            })
+        tableName: tableList[0].text,
+      });
     } else if (type != '' && JSON.stringify(formObj) != '{}') {
-            renderField(formObj.tableName)
+      renderField(formObj.tableName);
     }
-
   }, [visible]);
 
-    const renderField = (name) => {
+  const renderField = name => {
     loadTableFields({ tableName: name }).then(response => {
       if (response.data.root.length) {
-                let arr = [], newArr = []
+        // eslint-disable-next-line one-var
+        let arr = [],
+          newArr = [];
         response.data.root.map(item => {
-                    newArr.push(item.fieldName)
+          newArr.push(item.fieldName);
           if (item.isCheck) {
-                        arr.push(item.fieldName)
+            arr.push(item.fieldName);
           }
-                })
-                setCheckAll(false)
-                setPlainOptions(newArr)
-                setCheckedList(arr)
-            }
-        })
+        });
+        setCheckAll(arr.length === newArr.length);
+        setIndeterminate(!!arr.length && arr.length < newArr.length);
+        setPlainOptions(newArr);
+        setCheckedList(arr);
+      } else {
+        setCheckAll(false);
+        setIndeterminate(false);
       }
+    });
+  };
   const layout = {
     layout: 'horizontal',
     labelCol: {
@@ -119,9 +122,9 @@ const AddModal = props => {
     },
   };
 
-    const handleChange = (value) => {
-        renderField(value)
-    }
+  const handleChange = value => {
+    renderField(value);
+  };
 
   return (
     <Modal
@@ -140,31 +143,53 @@ const AddModal = props => {
       getContainer={false}
     >
       {visible && (
-                <Form form={form} {...layout} >
-                    {JSON.stringify(formObj) == '{}' ? <><Item
+        <Form form={form} {...layout} style={{ marginBottom: '30px' }}>
+          {JSON.stringify(formObj) == '{}' ? (
+            <>
+              <Item
                 label="表名"
                 name="tableName"
                 rules={[{ required: true, message: '请选择表名' }]}
               >
-                        <Select onChange={handleChange}>
-                            {tableList.length ? tableList.map((item, index) => { return <Select.Option key={index} value={item.text}>{item.text}</Select.Option>; }) : ''}
+                <Select onChange={handleChange} showSearch>
+                  {tableList.length
+                    ? tableList.map((item, index) => {
+                        return (
+                          <Select.Option key={index} value={item.text}>
+                            {item.text}
+                          </Select.Option>
+                        );
+                      })
+                    : ''}
                 </Select>
               </Item>
-                        <Item
-                            label="别名"
-                            name="tableAlias"
-                        >
+              <Item label="别名" name="tableAlias">
                 <Input allowClear />
-                        </Item></> : <div className={styles.paneTitle}>{formObj.tableName}</div>}
+              </Item>
+            </>
+          ) : (
+            <div className={styles.paneTitle}>{formObj.tableName}</div>
+          )}
           <div className={styles.field}>
-                        <Card title="字段名" extra={<Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}> </Checkbox>} >
-                            {
-                                plainOptions.length ? <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} /> : ''
+            <Card
+              title="字段名"
+              extra={
+                <Checkbox
+                  indeterminate={indeterminate}
+                  onChange={onCheckAllChange}
+                  checked={checkAll}
+                >
+                  {' '}
+                </Checkbox>
               }
-
+            >
+              {plainOptions.length ? (
+                <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
+              ) : (
+                ''
+              )}
             </Card>
           </div>
-
         </Form>
       )}
     </Modal>