Merge branch 'master' of http://gogsb.soaringnova.com/liutao/ai-proj-demo

.env.production

@@ -1,2 +1,2 @@
 REACT_APP_BASE_URL = 'http://aihub-dag-test.digitalyili.com/'
-REACT_APP_JPT = 'http://aihub-dag-jpt-test.digitalyili.com'
+REACT_APP_JPT = 'http://aihub-dag-jpt-test.digitalyili.com'

src/component/CronSelect.jsx

@@ -76,7 +76,7 @@ const CronSelect = ({ cron_data }, ref) => {
         setMinVal(cron_data['minute'])
         break
       case 4:
-        setMinVal(cron_data['cron_expression'])
+        setCronVal(cron_data['cron_expression'])
         break
       default:
         break
@@ -162,9 +162,9 @@ const CronSelect = ({ cron_data }, ref) => {
   }
 
   // 各时间段选项
-  const timeOptions = val => {
+  const timeOptions = (start, val) => {
     const options = []
-    for (let i = 0; i < val; i++) {
+    for (let i = start; i < val; i++) {
       options.push(
         <Option value={i} key={i}>
           {i}
@@ -176,12 +176,12 @@ const CronSelect = ({ cron_data }, ref) => {
 
   const hourSet = (
     <Space>
-      <span>每</span>
+      <span>每隔</span>
       <Select
         onChange={onChangeHourVal}
         value={hourVal}
         className="time_select">
-        {timeOptions(hourMax)}
+        {timeOptions(1, hourMax)}
       </Select>
       <Select onChange={onChangeHourType} value={hourType}>
         <Option value="min">分钟</Option>
@@ -198,11 +198,11 @@ const CronSelect = ({ cron_data }, ref) => {
         onChange={onChangeHourVal}
         value={hourVal}
         className="time_select">
-        {timeOptions(24)}
+        {timeOptions(0, 24)}
       </Select>
       <span>时</span>
       <Select onChange={onChangeMinVal} value={minVal} className="time_select">
-        {timeOptions(60)}
+        {timeOptions(0, 60)}
       </Select>
       <span>分</span>
       <span>执行一次</span>
@@ -229,11 +229,11 @@ const CronSelect = ({ cron_data }, ref) => {
         onChange={onChangeHourVal}
         value={hourVal}
         className="time_select">
-        {timeOptions(24)}
+        {timeOptions(0, 24)}
       </Select>
       <span>时</span>
       <Select onChange={onChangeMinVal} value={minVal} className="time_select">
-        {timeOptions(60)}
+        {timeOptions(0, 60)}
       </Select>
       <span>分</span>
       <span>执行一次</span>
@@ -242,27 +242,27 @@ const CronSelect = ({ cron_data }, ref) => {
 
   const monthSet = (
     <Space>
-      <span>每</span>
+      <span>每隔</span>
       <Select
         onChange={onChangeMonthVal}
         value={monthVal}
         className="time_select">
-        {timeOptions(13)}
+        {timeOptions(1, 13)}
       </Select>
       <span>个月，</span>
       <Select onChange={onChangeDayVal} value={dayVal} className="time_select">
-        {timeOptions(32)}
+        {timeOptions(1, 32)}
       </Select>
       <span>日，</span>
       <Select
         onChange={onChangeHourVal}
         value={hourVal}
         className="time_select">
-        {timeOptions(24)}
+        {timeOptions(0, 24)}
       </Select>
       <span>时</span>
       <Select onChange={onChangeMinVal} value={minVal} className="time_select">
-        {timeOptions(60)}
+        {timeOptions(0, 60)}
       </Select>
       <span>分</span>
       <span>执行一次</span>

src/module/datasource/component/DatasourceLog.jsx

@@ -4,6 +4,8 @@ import { getJoblog, refreshLogsStatus } from '../services'
 import moment from 'moment'
 import { useNavigate } from 'react-router-dom'
 
+let timeout = null
+
 const DatasourceLog = ({ onRef, logId }) => {
   // 初始化日志列表
   const [logList, setLogList] = useState([])
@@ -42,30 +44,12 @@ const DatasourceLog = ({ onRef, logId }) => {
       key: 'jobDesc',
     },
     {
-      title: '调度时间',
-      dataIndex: 'triggerTime',
-      key: 'triggerTime',
-    },
-    {
-      title: '调度结果',
-      dataIndex: 'triggerResult',
-      key: 'triggerResult',
-      render: code => (
-        <span
-          style={{
-            color: code === 0 ? '#FF4D4F' : '#52C41A',
-          }}>
-          {code === 0 ? '失败' : '成功'}
-        </span>
-      ),
+      title: '开始时间',
+      dataIndex: 'startTime',
+      key: 'startTime',
     },
     {
-      title: '执行时间',
-      dataIndex: 'handleTime',
-      key: 'handleTime',
-    },
-    {
-      title: '执行结果',
+      title: '同步状态',
       dataIndex: 'handleResult',
       key: 'handleResult',
       render: code => (
@@ -134,22 +118,18 @@ const DatasourceLog = ({ onRef, logId }) => {
           jobDesc: item.job_desc,
           afJobId: item.af_job_id,
           runId: item.run_id,
-          triggerTime: item.trigger_time
-            ? moment(Math.round(item.trigger_time) * 1000).format(
-                'YYYY.MM.DD HH:mm:ss'
-              )
-            : '无',
-          triggerResult: item.trigger_result,
-          handleTime: item.execute_time
-            ? moment(Math.round(item.execute_time) * 1000).format(
+          startTime: item.start_time
+            ? moment(Math.round(item.start_time) * 1000).format(
                 'YYYY.MM.DD HH:mm:ss'
               )
             : '无',
-          handleResult: item.execute_result,
+          handleResult: item.result,
         }
       })
       setLogList(list)
       refreshStatus(refreshLogs)
+    } else {
+      message.error(data.msg)
     }
     setDataLoading(false)
   }
@@ -176,7 +156,7 @@ const DatasourceLog = ({ onRef, logId }) => {
         if (logs.length !== 0) {
           setLogList(logs)
         }
-        setTimeout(() => {
+        timeout = setTimeout(() => {
           refreshStatus(list)
         }, 10000)
       } else {
@@ -193,6 +173,12 @@ const DatasourceLog = ({ onRef, logId }) => {
     fetchJoblog()
   }, [logId])
 
+  useEffect(() => {
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [])
+
   return (
     <Table
       columns={columns}

src/module/datasource/component/DatasourceSyncView.jsx

@@ -2,6 +2,7 @@ import { Table, Space, Switch, message, Popconfirm } from 'antd'
 import React, { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { getJobList, updateJobStatus, delJob, executeOnce } from '../services'
+import moment from 'moment'
 
 export default function DatasourceSyncView({ selectLog }) {
   const navigate = useNavigate()
@@ -21,6 +22,9 @@ export default function DatasourceSyncView({ selectLog }) {
   const [currentPageSize, setCurrentPageSize] = useState(10)
   const [dataTotal, setDataTotal] = useState(0)
 
+  //执行一次的状态
+  const [running, setRunning] = useState(false)
+
   // 请求任务列表数据
   const fetchJobList = async (page = 1, pageSize = 10) => {
     setDataLoading(true)
@@ -39,6 +43,9 @@ export default function DatasourceSyncView({ selectLog }) {
           job_cron: item.job_cron,
           jsb_desc: item.job_desc,
           trigger_status: item.trigger_status,
+          update_time: moment(item.update_time * 1000).format(
+            'YYYY.MM.DD HH:mm:ss'
+          ),
         }
       })
       setJobList(list)
@@ -64,11 +71,15 @@ export default function DatasourceSyncView({ selectLog }) {
     navigate('/datasource/sync-edit', { state: { id } })
   }
   const runTimeOnce = async id => {
-    const { data } = await executeOnce(id)
-    if (data.code === 200) {
-      message.success('开始执行')
-    } else {
-      message.error(data.msg)
+    if (!running) {
+      setRunning(true)
+      const { data } = await executeOnce(id)
+      if (data.code === 200) {
+        message.success('执行完成')
+      } else {
+        message.error(data.msg)
+      }
+      setRunning(false)
     }
   }
 
@@ -88,10 +99,15 @@ export default function DatasourceSyncView({ selectLog }) {
       key: 'jsb_desc',
     },
     {
-      title: '频次',
+      title: '定时规则',
       dataIndex: 'job_cron',
       key: 'job_cron',
     },
+    {
+      title: '更新时间',
+      dataIndex: 'update_time',
+      key: 'update_time',
+    },
     {
       title: '状态',
       key: 'trigger_status',
@@ -136,7 +152,11 @@ export default function DatasourceSyncView({ selectLog }) {
             onClick={() => {
               runTimeOnce(record.id)
             }}
-            style={{ color: '#1881DA', cursor: 'pointer' }}>
+            style={
+              running
+                ? { color: '#bfbfbf', cursor: 'no-drop' }
+                : { color: '#1881DA', cursor: 'pointer' }
+            }>
             执行一次
           </span>
           <span

src/module/datasource/component/StepOne.jsx

@@ -97,6 +97,9 @@ export default function StepOne({
             },
           ]}>
           <Select
+            showSearch
+            optionFilterProp="label"
+            allowClear
             options={datasources}
             onSelect={selectDatasource}
             placeholder="请选择数据源"
@@ -112,6 +115,8 @@ export default function StepOne({
             },
           ]}>
           <Select
+            showSearch
+            optionFilterProp="label"
             options={tableList}
             allowClear
             onSelect={selectTable}
@@ -121,7 +126,7 @@ export default function StepOne({
         {datasourceType === 'mysql' ? (
           <>
             <Form.Item
-              label="查询字段"
+              label="query sql"
               name="query_sql"
               wrapperCol={{ span: 10 }}>
               <Input.TextArea

src/module/datasource/component/StepTwo.jsx

@@ -96,6 +96,8 @@ export default function LoadFormConfig({
             },
           ]}>
           <Select
+            showSearch
+            optionFilterProp="label"
             options={datasources}
             onSelect={selectDatasource}
             placeholder="请选择数据源"
@@ -112,6 +114,8 @@ export default function LoadFormConfig({
             },
           ]}>
           <Select
+            showSearch
+            optionFilterProp="label"
             options={tableList}
             allowClear
             onSelect={selectTable}

src/module/tasklog/component/LogTable.jsx

@@ -7,6 +7,8 @@ import styled from 'styled-components'
 
 const LogList = styled.div``
 
+let timeout = null
+
 const LogTable = () => {
   // 初始化日志列表
   const [logList, setLogList] = useState([])
@@ -46,30 +48,12 @@ const LogTable = () => {
       key: 'taskTag',
     },
     {
-      title: '调度时间',
-      dataIndex: 'triggerTime',
-      key: 'triggerTime',
-    },
-    {
-      title: '调度结果',
-      dataIndex: 'triggerResult',
-      key: 'triggerResult',
-      render: code => (
-        <span
-          style={{
-            color: code === 0 ? '#FF4D4F' : code === 1 ? '#52C41A' : '#4A4A4A',
-          }}>
-          {code === 0 ? '失败' : code === 1 ? '成功' : '无'}
-        </span>
-      ),
+      title: '开始时间',
+      dataIndex: 'startTime',
+      key: 'startTime',
     },
     {
-      title: '执行时间',
-      dataIndex: 'handleTime',
-      key: 'handleTime',
-    },
-    {
-      title: '执行结果',
+      title: '任务状态',
       dataIndex: 'handleResult',
       key: 'handleResult',
       render: code => (
@@ -132,14 +116,10 @@ const LogTable = () => {
         return {
           key: item.id,
           jobName: item.job_name,
-          triggerTime: moment(Math.round(item.trigger_time) * 1000).format(
-            'YYYY.MM.DD HH:mm:ss'
-          ),
-          triggerResult: item.trigger_result,
-          handleTime: moment(Math.round(item.execute_time) * 1000).format(
+          startTime: moment(Math.round(item.start_time) * 1000).format(
             'YYYY.MM.DD HH:mm:ss'
           ),
-          handleResult: item.execute_result,
+          handleResult: item.result,
           taskType: item.job_type,
           taskTag: item.job_tag,
           afJobId: item.af_job_id,
@@ -175,7 +155,7 @@ const LogTable = () => {
         if (logs.length !== 0) {
           setLogList(logs)
         }
-        setTimeout(() => {
+        timeout = setTimeout(() => {
           refreshStatus(list)
         }, 10000)
       } else {
@@ -192,6 +172,12 @@ const LogTable = () => {
     fetchJoblog()
   }, [])
 
+  useEffect(() => {
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [])
+
   return (
     <LogList>
       <Table

src/module/tasklog/component/TaskLogWatcher.jsx

@@ -44,6 +44,8 @@ const LogWrapper = styled.div`
   }
 `
 
+let timeout = null
+
 const TaskLogWatcher = () => {
   const { state } = useLocation()
   const [logData, setLogData] = useState('暂无日志')
@@ -58,6 +60,11 @@ const TaskLogWatcher = () => {
       dataIndex: 'index',
       key: 'index',
     },
+    {
+      title: '作业名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
     {
       title: '执行时间',
       dataIndex: 'executeTime',
@@ -70,18 +77,13 @@ const TaskLogWatcher = () => {
       render: code => (
         <span
           style={{
-            color:
-              code === 'failed'
-                ? '#FF4D4F'
-                : code === 'success'
-                ? '#52C41A'
-                : '#4A4A4A',
+            color: code === 3 ? '#FF4D4F' : code === 2 ? '#52C41A' : '#4A4A4A',
           }}>
-          {code === 'failed'
+          {code === 3
             ? '失败'
-            : code === 'success'
+            : code === 2
             ? '成功'
-            : code === 'running'
+            : code === 1
             ? '运行中'
             : '队列中'}
         </span>
@@ -106,6 +108,7 @@ const TaskLogWatcher = () => {
       executeTime: moment(Math.round(item.execute_time) * 1000).format(
         'YYYY.MM.DD HH:mm:ss'
       ),
+      name: item.name,
       log: item.log,
       handleResult: item.execute_result,
       task_id: item.task_id,
@@ -130,7 +133,7 @@ const TaskLogWatcher = () => {
     if (data.code === 200) {
       setLogData(data.data.log)
       if (!['success', 'failed'].includes(data.data.status)) {
-        setTimeout(() => {
+        timeout = setTimeout(() => {
           fetchTaskLog(params)
         }, 3000)
       }
@@ -143,6 +146,12 @@ const TaskLogWatcher = () => {
     fetchAllTask()
   }, [state])
 
+  useEffect(() => {
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [])
+
   const singleTable = (
     <Table
       columns={columns}

src/module/taskmgmt/component/TaskCreaterView.jsx

@@ -172,7 +172,7 @@ const TaskCreaterView = () => {
                 message.error(res.data.msg)
               }
             } else {
-              message.error('执行周期数据有误')
+              message.error('定时规则数据有误')
             }
           })
           .catch(err => {

src/module/taskmgmt/component/TaskForm.jsx

@@ -133,6 +133,8 @@ const TaskForm = ({ taskForm, taskType, taskInfo, jmWorkList }, ref) => {
           label="任务标签"
           rules={[{ required: true, message: '请选择任务标签!' }]}>
           <Select
+            showSearch
+            optionFilterProp="label"
             placeholder="选择任务标签"
             allowClear
             optionLabelProp="label"
@@ -178,7 +180,11 @@ const TaskForm = ({ taskForm, taskType, taskInfo, jmWorkList }, ref) => {
             name="job"
             label="选择作业"
             rules={[{ required: true, message: '请选择作业!' }]}>
-            <Select placeholder="选择作业" allowClear>
+            <Select
+              showSearch
+              optionFilterProp="label"
+              placeholder="选择作业"
+              allowClear>
               {jmWorkOptions.map(item => (
                 <Option key={item.id} value={item.id}>
                   {item.name}
@@ -189,13 +195,13 @@ const TaskForm = ({ taskForm, taskType, taskInfo, jmWorkList }, ref) => {
         )}
         <FormItem
           name="executionCycle"
-          label="设置执行周期"
-          rules={[{ required: true, message: '请设置执行周期!' }]}>
+          label="设置定时规则"
+          rules={[{ required: true, message: '请设置定时规则!' }]}>
           <RadioGroup onChange={onRadioChange}>
             <Space direction="vertical">
               <Radio value={1}>只执行一次，下次手动执行</Radio>
               <Radio value={2}>
-                执行周期
+                定时规则
                 {radioValue === 2 ? (
                   <Space className="form_executionCycle">
                     <CronSelect cron_data={cronData} ref={ref} />

src/module/taskmgmt/page/TaskMgmtView.jsx

@@ -22,8 +22,10 @@ import {
   executeJmJob,
   updateJmJobStatus,
   getCronNext,
+  getApi,
 } from '../services'
 import copy from 'copy-to-clipboard'
+import moment from 'moment'
 
 const TaskMgmtWrapper = styled.div`
   padding: 20px;
@@ -49,22 +51,33 @@ const TaskMgmtView = () => {
 
   const navigate = useNavigate()
 
+  //执行状态
+  const [running, setRunning] = useState(false)
+  // 开关加载状态
+  const [switchLoading, setSwitchLoading] = useState(false)
+
   // 切换状态
   const changeTaskState = async (checked, id) => {
+    setSwitchLoading(true)
     const { data } = await updateJmJobStatus({ id, status: checked ? 1 : 0 })
     if (data.code === 200) {
       message.success(data.data.status ? '开启成功' : '关闭成功')
     } else {
       message.error(data.msg)
     }
+    setSwitchLoading(false)
   }
   //执行
   const runTimeOnce = async id => {
-    const { data } = await executeJmJob(id)
-    if (data.code === 200) {
-      message.success('开始执行')
-    } else {
-      message.error(data.msg)
+    if (!running) {
+      setRunning(true)
+      const { data } = await executeJmJob(id)
+      if (data.code === 200) {
+        message.success('执行完成')
+      } else {
+        message.error(data.msg)
+      }
+      setRunning(false)
     }
   }
   //删除
@@ -78,10 +91,15 @@ const TaskMgmtView = () => {
     }
   }
   //Api调用
-  const getApiUri = id => {
-    const url = `${process.env.REACT_APP_BASE_URL}/jpt/jm_job_info/execute/${id}`
-    copy(url)
-    message.success('复制成功')
+  const getApiUri = async id => {
+    const { data } = await getApi(id)
+    if (data.code === 200) {
+      const url = `${process.env.REACT_APP_BASE_URL}${data.data}`
+      copy(url)
+      message.success('复制成功')
+    } else {
+      message.error(data.msg)
+    }
   }
   //编辑
   const editTask = id => {
@@ -118,6 +136,9 @@ const TaskMgmtView = () => {
             item.cron_type === 1 ? '执行一次' : item.cron_expression,
           historicalRuntime: item.history,
           taskState: item.status === 1,
+          update_time: item.update_time
+            ? moment(item.update_time * 1000).format('YYYY.MM.DD HH:mm:ss')
+            : '无',
         }
       })
       setJogList(list)
@@ -145,7 +166,7 @@ const TaskMgmtView = () => {
       key: 'taskTag',
     },
     {
-      title: '执行周期',
+      title: '定时规则',
       dataIndex: 'executionCycle',
       key: 'executionCycle',
     },
@@ -177,6 +198,11 @@ const TaskMgmtView = () => {
           </Popover>
         ),
     },
+    {
+      title: '更新时间',
+      dataIndex: 'update_time',
+      key: 'update_time',
+    },
     {
       title: '历史运行情况',
       dataIndex: 'historicalRuntime',
@@ -205,6 +231,7 @@ const TaskMgmtView = () => {
         <Switch
           checkedChildren="开启"
           unCheckedChildren="关闭"
+          loading={switchLoading}
           defaultChecked={val}
           onChange={checked => changeTaskState(checked, record.key)}
         />
@@ -219,7 +246,11 @@ const TaskMgmtView = () => {
             onClick={() => {
               runTimeOnce(record.key)
             }}
-            style={{ color: '#1881DA', cursor: 'pointer' }}>
+            style={
+              running
+                ? { color: '#bfbfbf', cursor: 'no-drop' }
+                : { color: '#1881DA', cursor: 'pointer' }
+            }>
             执行一次
           </span>
           <span

src/module/taskmgmt/services/index.js

@@ -78,3 +78,10 @@ export const getCronNext = params =>
     url: `/jpt/jm_job_info/cron_next_execute?cron_expression=${params}`,
     method: 'get',
   })
+
+//api调用
+export const getApi = params =>
+  request({
+    url: `/jpt/jm_job_info/api/${params}`,
+    method: 'get',
+  })

src/module/workmgmt/component/JobCreate.jsx

@@ -200,7 +200,8 @@ export default function JobCreate() {
     }
     const { data } = await getFileUri(params)
     if (data.code === 200) {
-      type === 'jave' ? setJavas(data.data) : setPythons(data.data)
+      console.log(type, data)
+      type === 'java' ? setJavas(data.data) : setPythons(data.data)
     } else {
       message.error(data.msg)
     }
@@ -581,6 +582,8 @@ export default function JobCreate() {
                 },
               ]}>
               <Select
+                showSearch
+                optionFilterProp="label"
                 placeholder="请选择作业类型..."
                 onSelect={onGenderChange}
                 options={jobTypeOptions}
@@ -677,6 +680,8 @@ export default function JobCreate() {
                 },
               ]}>
               <Select
+                showSearch
+                optionFilterProp="label"
                 placeholder="请选择作业标签..."
                 allowClear
                 optionLabelProp="label"
@@ -728,7 +733,11 @@ export default function JobCreate() {
                   message: '请选择配置执行的镜像',
                 },
               ]}>
-              <Select placeholder="请选择镜像..." allowClear>
+              <Select
+                placeholder="请选择镜像..."
+                allowClear
+                showSearch
+                optionFilterProp="label">
                 {javaImages.map(item => (
                   <Option key={item.value} value={item.value}>
                     {item.label}
@@ -756,13 +765,15 @@ export default function JobCreate() {
                         e.stopPropagation()
                       }}>
                       <Select
+                        showSearch
+                        optionFilterProp="label"
                         placeholder="在工作目录中选择"
                         allowClear
                         className="javaSelect"
                         value={scriptFile}
                         onChange={onScriptFileChange}
                         disabled={radioValue === 'fromList' ? false : true}>
-                        {pythons.map(item => (
+                        {javas.map(item => (
                           <Option key={item.uri} value={item.name}>
                             {item.name}
                           </Option>
@@ -831,6 +842,8 @@ export default function JobCreate() {
                 },
               ]}>
               <Select
+                showSearch
+                optionFilterProp="label"
                 placeholder="请选择作业标签..."
                 allowClear
                 optionLabelProp="label"
@@ -881,7 +894,11 @@ export default function JobCreate() {
                   message: '请配置执行的镜像',
                 },
               ]}>
-              <Select placeholder="请选择镜像..." allowClear>
+              <Select
+                showSearch
+                optionFilterProp="label"
+                placeholder="请选择镜像..."
+                allowClear>
                 {pythonImages.map(item => (
                   <Option key={item.value} value={item.value}>
                     {item.label}
@@ -909,13 +926,15 @@ export default function JobCreate() {
                         e.stopPropagation()
                       }}>
                       <Select
+                        showSearch
+                        optionFilterProp="label"
                         placeholder="在工作目录中选择"
                         allowClear
                         className="javaSelect"
                         value={scriptFile}
                         onChange={onScriptFileChange}
                         disabled={radioValue === 'fromList' ? false : true}>
-                        {javas.map(item => (
+                        {pythons.map(item => (
                           <Option key={item.uri} value={item.name}>
                             {item.name}
                           </Option>

src/module/workmgmt/component/JobStepOne.jsx

@@ -133,6 +133,8 @@ export default function JobStepOne({ ConfigDataForm, SelectDag }) {
             },
           ]}>
           <Select
+            showSearch
+            optionFilterProp="label"
             placeholder="请选择作业标签..."
             allowClear
             optionLabelProp="label"
@@ -186,6 +188,8 @@ export default function JobStepOne({ ConfigDataForm, SelectDag }) {
             },
           ]}>
           <Select
+            showSearch
+            optionFilterProp="label"
             placeholder="请选择DAG算子"
             allowClear
             optionLabelProp="label"

src/module/workmgmt/component/JobStepThree.jsx

@@ -294,7 +294,10 @@ export default function JobStepTwo({ OutputDataForm, dagData, checkSync }) {
                     rules={[{ required: true, message: '请选择数据源!' }]}
                     label={item.name}
                     className="dtsource">
-                    <Select onSelect={val => onDatasourcesSelect()}>
+                    <Select
+                      showSearch
+                      optionFilterProp="label"
+                      onSelect={val => onDatasourcesSelect()}>
                       {datasources.map(item => (
                         <Option key={item.id} value={item.id}>
                           {item.datasource_name}
@@ -307,7 +310,10 @@ export default function JobStepTwo({ OutputDataForm, dagData, checkSync }) {
                     label="选择表"
                     rules={[{ required: true, message: '请选择表!' }]}
                     className="item-choseList">
-                    <Select onSelect={val => onTableSelect(val, index)}>
+                    <Select
+                      showSearch
+                      optionFilterProp="label"
+                      onSelect={val => onTableSelect(val, index)}>
                       {tableData.map(item => (
                         <Option key={item} value={item}>
                           {item}

src/module/workmgmt/component/JobStepTwo.jsx

@@ -291,7 +291,10 @@ export default function JobStepTwo({ InputDataForm, dagData, checkSync }) {
                     rules={[{ required: true, message: '请选择数据源!' }]}
                     label={item.name}
                     className="dtsource">
-                    <Select onSelect={val => onDatasourcesSelect()}>
+                    <Select
+                      showSearch
+                      optionFilterProp="label"
+                      onSelect={val => onDatasourcesSelect()}>
                       {datasources.map(item => (
                         <Option key={item.id} value={item.id}>
                           {item.datasource_name}
@@ -304,7 +307,10 @@ export default function JobStepTwo({ InputDataForm, dagData, checkSync }) {
                     label="选择表"
                     rules={[{ required: true, message: '请选择表!' }]}
                     className="item-choseList">
-                    <Select onSelect={val => onTableSelect(val, index)}>
+                    <Select
+                      showSearch
+                      optionFilterProp="label"
+                      onSelect={val => onTableSelect(val, index)}>
                       {tableData.map(item => (
                         <Option key={item} value={item}>
                           {item}