任务增加connection

src/view/Manage/DatasourceManage/Component/UpdateTaskModal.jsx

-import React, { useEffect, useState } from 'react';
-import { Modal, Checkbox, Row, Col, Divider, Input, Typography, Form, Switch, Select } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Modal, Checkbox, Row, Col, Divider, Input, Typography, Form, Switch } from 'antd';
 
 import { dispatch } from '../../../../model';
 
-const MultiSelect = ({ value = '', data = [], onChange, ...restProps }) => {
+const MultiSelect = ({ title, data = [], selectedData = [], onChange }) => {
+  const [ keyword, setKeyword ] = useState('');
+  const [ checkAllValue, setCheckAllValue ] = useState(false);
 
-  const onSelectChange = (value) => {
-    onChange((value||[]).join(','));
+  const filterData = useMemo(() => {
+    return (data||[]).filter(item => (item||'').indexOf(keyword)!==-1);
+  }, [keyword, data])
+
+  const onSearchInputChange = (e) => {
+    setKeyword(e.target.value||'');
   }
 
-  return (
-    <Select
-      mode="multiple"
-      value={value?value.split(','):[]}
-      onChange={onSelectChange}
-      allowClear
-      style={{ width: '100%' }}
-      {...restProps}
-    >
-    {
-      (data||[]).map((item, index) => {
-        return (
-          <Select.Option key={item}>{item}</Select.Option>
-        );
-      })
+  const onCheckChange = (e) => {
+    let newSelectedData = [];
+    if (e.target.checked) {
+      newSelectedData = [...selectedData, e.target.value];
+    } else {
+      newSelectedData = [...selectedData];
+      const index = newSelectedData.findIndex(key => key === e.target.value);
+      newSelectedData.splice(index, 1)
+    }
+
+    onChange?.(newSelectedData)
+  }
+
+  const onCheckAll =(checked)=>{        
+    setCheckAllValue(checked);
+
+    let newSelectedData = [];
+    if (checked) {
+      newSelectedData = Array.from(new Set([...selectedData, ...filterData]));;
+    } else {
+      newSelectedData = selectedData.filter(item=>!filterData.includes(item));
     }
-    </Select>
+
+    onChange?.(newSelectedData);
+  }
+
+  return (
+    <div>
+      <Divider>{`${title}信息`}</Divider>
+      <div className='d-flex mb-3' style={{ alignItems: 'center' }}>
+        <span className='mr-3'>{`${title}搜索`}:</span>
+        <Input 
+          placeholder={`请输入${title}名称`}
+          allowClear 
+          value={keyword}
+          onChange={onSearchInputChange} 
+          style={{ width: 230 }}
+        />
+         <Switch 
+          checkedChildren="全不选" 
+          unCheckedChildren="全选" 
+          checked={ checkAllValue } 
+          onChange={ onCheckAll } 
+          style={{ marginLeft: 'auto' }}
+        />
+      </div>
+      <div style={{ maxHeight: 300, overflow: 'auto' }}>
+        <Row className='mb-3'>
+        {
+          (filterData||[]).map((item, index) => {
+            return (
+              <Col className='mt-1' key={index} md={8}>
+                <div className='d-flex'>
+                  <Checkbox checked={ selectedData.indexOf(item)!==-1 } value={item||''} onChange={onCheckChange} >
+                  </Checkbox>
+                  <Typography.Paragraph className='ml-1' title={item||''} ellipsis>
+                  {item||''}
+                  </Typography.Paragraph>
+                </div>
+              </Col>
+            );
+          })
+        }
+        </Row>
+      </div>
+    </div>
   )
 }
 
 const UpdateTaskModal = (props) => {
   const { visible, onCancel, action, id, datasourceId,currentDatabase } = props;
-  const [ schemas, setSchemas ] = useState([]);
-  const [ filterSchemas, setFilterSchemas ] = useState([]);
   const [ selectedSchemas, setSelectedSchemas ] = useState([]);
+  const [ selectedConnections, setSelectedConnections ] = useState([]);
   const [ taskSettings, setTaskSettings ] = useState({});
   const [ currentTask, setCurrentTask ] = useState({});
-  const [ keyword, setKeyword ] = useState('');
   const [ confirmLoading, setConfirmLoading ] = useState(false);
-  const [ checkAllValue, setCheckAllValue ] = useState(false);
 
   const [ form ] = Form.useForm();
 
@@ -58,10 +110,6 @@ const UpdateTaskModal = (props) => {
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible, action, id, datasourceId])
 
-  useEffect(() => {
-    setFilterSchemas((schemas||[]).filter(schema => (schema||'').indexOf(keyword)!==-1));
-  }, [keyword, schemas])
-
   const getTask = () => {
     dispatch({
       type: 'datasource.getTask',
@@ -84,12 +132,13 @@ const UpdateTaskModal = (props) => {
       callback: data => {
         setTaskSettings(data);
 
-        let recentSchemas = [];
+        let recentSchemas = [], recentConnections = [];
         
         data && (data.targetConfParameters||[]).forEach(item => {
           if (item.name === 'schema') {
-            setSchemas(item.selectItem||[]);
             recentSchemas = item.selectItem||[];
+          } else if (item.name === 'connection') {
+            recentConnections = item.selectItem||[];
           }
         })
 
@@ -99,6 +148,8 @@ const UpdateTaskModal = (props) => {
           task && (task.targetConfParameters||[]).forEach(item => {
             if (item.name === 'schema') {
               setSelectedSchemas((item.value||'').split(',').filter(value=> recentSchemas.indexOf(value)!==-1));
+            } else if (item.name === 'connection') {
+              setSelectedConnections((item.value||'').split(',').filter(value=> recentConnections.indexOf(value)!==-1));
             } else {
               _fieldsValue[item.name||''] = item.value||'';
             }
@@ -110,6 +161,10 @@ const UpdateTaskModal = (props) => {
     })
   }
 
+  const onMultiChange = (value, type) => {
+    (type === 'schema') ? setSelectedSchemas(value) : setSelectedConnections(value);
+  }
+
   const onOk = async() => {
     try {
       const row = await form.validateFields();
@@ -124,6 +179,8 @@ const UpdateTaskModal = (props) => {
       newTask && (newTask.targetConfParameters||[]).forEach(item => {
         if (item.name === 'schema') {
           item.value = selectedSchemas.join(',');
+        } else if (item.name === 'connection') {
+          item.value = selectedConnections.join(',');
         } else {
           item.value = row[item.name]||'';
         }
@@ -150,40 +207,12 @@ const UpdateTaskModal = (props) => {
   }
 
   const reset = () => {
-    setSchemas([]);
     setSelectedSchemas([]);
+    setSelectedConnections([]);
     setTaskSettings({});
-    setKeyword('');
-    setCheckAllValue(false);
     form.resetFields();
   }
 
-  const onSearchInputChange = (e) => {
-    setKeyword(e.target.value||'');
-  }
-
-  const onCheckAll =(checked)=>{        
-    setCheckAllValue(checked);
-
-    if (checked) {
-      const _newSelectedSchemas = Array.from(new Set([...selectedSchemas, ...filterSchemas]));;
-
-      setSelectedSchemas(_newSelectedSchemas);
-    } else {
-      setSelectedSchemas(selectedSchemas.filter(schema=>!filterSchemas.includes(schema)));
-    }
-  }
-
-  const onCheckChange = (e) => {
-    if (e.target.checked) {
-      setSelectedSchemas([...selectedSchemas, e.target.value]);
-    } else {
-      const index = selectedSchemas.findIndex(key => key === e.target.value);
-      selectedSchemas.splice(index, 1)
-      setSelectedSchemas([...selectedSchemas]);
-    }
-  }
-
   const formItemLayout = {
     labelCol: {
       xs: { span: 24 },
@@ -205,48 +234,33 @@ const UpdateTaskModal = (props) => {
       onCancel={() => { onCancel && onCancel() }}
       onOk={onOk}
       confirmLoading={confirmLoading}
-    >
-      <Divider>{(currentDatabase?.type==="Neo4jTarget")?'neo4j数据库信息':'schema信息'}</Divider>
-      <div className='d-flex mb-3' style={{ alignItems: 'center' }}>
-        <span className='mr-3'>{(currentDatabase?.type==="Neo4jTarget")?'neo4j数据库搜索':'schema搜索'}:</span>
-        <Input 
-          placeholder={`请输入${(currentDatabase?.type==="Neo4jTarget")?'neo4j数据库':'schema'}名称`}
-          allowClear 
-          value={keyword}
-          onChange={onSearchInputChange} 
-          style={{ width: 230 }}
-        />
-         <Switch 
-          checkedChildren="全不选" 
-          unCheckedChildren="全选" 
-          checked={ checkAllValue } 
-          onChange={ onCheckAll } 
-          style={{ marginLeft: 'auto' }}
-        />
-      </div>
-      <div style={{ maxHeight: 300, overflow: 'auto' }}>
-        <Row className='mb-3'>
-        {
-          (filterSchemas||[]).map((schema, index) => {
-            return (
-              <Col className='mt-1' key={index} md={8}>
-                <div className='d-flex'>
-                  <Checkbox checked={ selectedSchemas.indexOf(schema)!==-1 } value={schema||''} onChange={onCheckChange} >
-                  </Checkbox>
-                  <Typography.Paragraph className='ml-1' title={schema||''} ellipsis>
-                  {schema||''}
-                  </Typography.Paragraph>
-                </div>
-              </Col>
-            );
-          })
-        }
-        </Row>
-      </div>
+    > 
+      {
+        taskSettings && (taskSettings.targetConfParameters||[]).map((param, index) => {
+          if (param.name === 'schema' || param.name === 'connection') {
+            let title = 'connection';
+            if (param.name === 'schema') {
+              title = (currentDatabase?.type==="Neo4jTarget")?'neo4j数据库':'schema';
+            }
+
+            return <MultiSelect 
+              key={index}
+              title={title}
+              data={param.selectItem}
+              selectedData={param.name === 'schema'?selectedSchemas:selectedConnections}
+              onChange={(value) => { onMultiChange(value, param.name); }}
+            />
+          }
+
+          return <></>;
+        })
+      }
       <Divider>过滤信息</Divider>
       <Form {...formItemLayout} form={form}>
       {
-        taskSettings && (taskSettings.targetConfParameters||[]).filter(item => item.name!=='schema').map((param, index) => {
+        taskSettings && (taskSettings.targetConfParameters||[]).map((param, index) => {
+          if (param.name === 'schema' || param.name === 'connection') return <></>;
+
           return (
             <Form.Item 
               label={param.cnName||''}
@@ -255,8 +269,7 @@ const UpdateTaskModal = (props) => {
               rules={[{ required: param.required, message: '必填项'}]}
             >
             {
-              (param.selectMode==='multiSelect') ? <MultiSelect data={param.selectItem} placeholder={param.explain||''} />
-              : ( param.show ? <Input placeholder={param.explain||''} /> : <Input.Password placeholder={param.explain||''} visibilityToggle={false} /> )
+              ( param.show ? <Input placeholder={param.explain||''} /> : <Input.Password placeholder={param.explain||''} visibilityToggle={false} /> )
             }
             </Form.Item>
           )