产线选择

src/pages/kanban/ProductionProgress/components/SettingForm/index.tsx

 import React, { useRef, useState, useEffect } from 'react';
 import { useIntl } from 'umi';
-import { Radio, Drawer, Form, Checkbox, InputNumber } from 'antd';
+import { Radio, Drawer, Form, Checkbox, InputNumber, Select } from 'antd';
 import { queryProductionComprehensKanbanData } from '../../services/api';
 type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto;
 
@@ -36,6 +36,7 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
   const RadioList = useRef<any>([]);
 
   const CheckboxRef = useRef<HTMLInputElement>(null);
+  const line = useRef<HTMLBaseElement>(null);
   const intervalTimeRef = useRef<HTMLInputElement>(null);
   const rowMovingTimeRef = useRef<HTMLInputElement>(null);
   const intl = useIntl();
@@ -60,7 +61,7 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
   }, [props.visible]);
   const onPressEnter = (e) => {
     console.log('回车了')
-    RadioList.current[0]?.focus()
+    line.current?.focus()
   };
   const CheckboxKeyDown = (e) => {
     if (e.code === "ArrowDown") {
@@ -71,24 +72,20 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
     if (e.code === "ArrowRight") {
       btn1.current?.focus()
     } else if (e.code === "ArrowUp") {
-      RadioList.current[0]?.focus()
+      line.current?.focus()
     }
   }
-  const lineNameKeyDown = (e, index:number) => {
-    if (e.code === "ArrowRight") {
-      const index1 = index + 1 >= lineNameList.length ? 0 : index + 1
-      RadioList.current[index1]?.focus()
-    } else if (e.code === "ArrowLeft") {
-      const index1 = index - 1 >= 0 ? lineNameList.length - 1 : index - 1
-      RadioList.current[index1]?.focus()
-    } else if (e.code === "ArrowUp") {
+  const lineNameKeyDown = (e) => {
+    // if (e.code === "ArrowRight") {
+    //   const index1 = index + 1 >= lineNameList.length ? 0 : index + 1
+    //   RadioList.current[index1]?.focus()
+    // } else if (e.code === "ArrowLeft") {
+    //   const index1 = index - 1 >= 0 ? lineNameList.length - 1 : index - 1
+    //   RadioList.current[index1]?.focus()
+    const a = document.getElementsByClassName('ant-select-open')
+    if (e.code === "ArrowUp" && a.length === 0) {
       rowMovingTimeRef.current?.focus()
-    } else if (e.code === "ArrowDown") {
-      btn.current?.focus()
-    }
-  }
-  const submitBtn = (e) => {
-    if (e.code === "ArrowLeft") {
+    } else if (e.code === "ArrowDown" && a.length === 0) {
       btn.current?.focus()
     }
   }
@@ -112,28 +109,28 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
       <Form.Item name="rowMovingTime" label={intl.formatMessage({id: '内容滚动（秒）'})} rules={[{ required: true }]}>
         <InputNumber precision={0} ref={rowMovingTimeRef} onPressEnter={onPressEnter}></InputNumber>
       </Form.Item>
-      <Form.Item name="lineName" label={intl.formatMessage({id: '产线选择'})} rules={[{ required: true }]}>
+      {/* <Form.Item name="lineName" label={intl.formatMessage({id: '产线选择'})} rules={[{ required: true }]}>
         <Radio.Group>
           {lineNameList.map((lineName, index) => (
             <Radio ref={el => (RadioList.current[index] = el)} onKeyDown={(e)=>{lineNameKeyDown(e, index)}} value={lineName}>{lineName}</Radio>
           ))}
         </Radio.Group>
+      </Form.Item> */}
+      <Form.Item name="lineName" label={intl.formatMessage({id: '产线选择'})} rules={[{ required: true }]}>
+        <Select
+          style={{ width: 120 }}
+          ref={line}
+          onInputKeyDown={lineNameKeyDown}
+          options={lineNameList.map(v => ({value: v, label: v}))}
+        />
       </Form.Item>
+      
       <Form.Item>
         <button
           type='button'
-          key="rest"
+          key="submit"
           ref={btn}
           onKeyDown={cancelBtn}
-          onClick={() => props.onVisibleChange(false)}
-        >
-          {intl.formatMessage({id: '取消'})}
-        </button>,
-        <button
-          type='button'
-          ref={btn1}
-          key="submit"
-          onKeyDown={submitBtn}
           onClick={() => form?.submit?.()}
         >
           {intl.formatMessage({id: '确认'})}

src/pages/kanban/paintingProcessKanban/components/SettingForm/index.tsx

 import React, { useRef, useState, useEffect } from 'react';
 import { useIntl } from 'umi';
-import { Radio, Drawer, Form, Checkbox, InputNumber } from 'antd';
+import { Radio, Drawer, Form, Checkbox, InputNumber, Select } from 'antd';
 import { queryProductionComprehensKanbanData } from '../../services/api';
 type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto;
 
@@ -36,6 +36,7 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
   const RadioList = useRef<any>([]);
 
   const CheckboxRef = useRef<HTMLInputElement>(null);
+  const line = useRef<HTMLBaseElement>(null);
   const intervalTimeRef = useRef<HTMLInputElement>(null);
   const rowMovingTimeRef = useRef<HTMLInputElement>(null);
   const intl = useIntl();
@@ -60,7 +61,7 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
   }, [props.visible]);
   const onPressEnter = (e) => {
     console.log('回车了')
-    RadioList.current[0]?.focus()
+    line.current?.focus()
   };
   const CheckboxKeyDown = (e) => {
     if (e.code === "ArrowDown") {
@@ -71,24 +72,20 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
     if (e.code === "ArrowRight") {
       btn1.current?.focus()
     } else if (e.code === "ArrowUp") {
-      RadioList.current[0]?.focus()
+      line.current?.focus()
     }
   }
-  const lineNameKeyDown = (e, index:number) => {
-    if (e.code === "ArrowRight") {
-      const index1 = index + 1 >= lineNameList.length ? 0 : index + 1
-      RadioList.current[index1]?.focus()
-    } else if (e.code === "ArrowLeft") {
-      const index1 = index - 1 >= 0 ? lineNameList.length - 1 : index - 1
-      RadioList.current[index1]?.focus()
-    } else if (e.code === "ArrowUp") {
+  const lineNameKeyDown = (e) => {
+    // if (e.code === "ArrowRight") {
+    //   const index1 = index + 1 >= lineNameList.length ? 0 : index + 1
+    //   RadioList.current[index1]?.focus()
+    // } else if (e.code === "ArrowLeft") {
+    //   const index1 = index - 1 >= 0 ? lineNameList.length - 1 : index - 1
+    //   RadioList.current[index1]?.focus()
+    const a = document.getElementsByClassName('ant-select-open')
+    if (e.code === "ArrowUp" && a.length === 0) {
       rowMovingTimeRef.current?.focus()
-    } else if (e.code === "ArrowDown") {
-      btn.current?.focus()
-    }
-  }
-  const submitBtn = (e) => {
-    if (e.code === "ArrowLeft") {
+    } else if (e.code === "ArrowDown" && a.length === 0) {
       btn.current?.focus()
     }
   }
@@ -112,28 +109,28 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
       <Form.Item name="rowMovingTime" label={intl.formatMessage({id: '内容滚动（秒）'})} rules={[{ required: true }]}>
         <InputNumber precision={0} ref={rowMovingTimeRef} onPressEnter={onPressEnter}></InputNumber>
       </Form.Item>
-      <Form.Item name="lineName" label={intl.formatMessage({id: '产线选择'})} rules={[{ required: true }]}>
+      {/* <Form.Item name="lineName" label={intl.formatMessage({id: '产线选择'})} rules={[{ required: true }]}>
         <Radio.Group>
           {lineNameList.map((lineName, index) => (
             <Radio ref={el => (RadioList.current[index] = el)} onKeyDown={(e)=>{lineNameKeyDown(e, index)}} value={lineName}>{lineName}</Radio>
           ))}
         </Radio.Group>
+      </Form.Item> */}
+      <Form.Item name="lineName" label={intl.formatMessage({id: '产线选择'})} rules={[{ required: true }]}>
+        <Select
+          style={{ width: 120 }}
+          ref={line}
+          onInputKeyDown={lineNameKeyDown}
+          options={lineNameList.map(v => ({value: v, label: v}))}
+        />
       </Form.Item>
+      
       <Form.Item>
         <button
           type='button'
-          key="rest"
+          key="submit"
           ref={btn}
           onKeyDown={cancelBtn}
-          onClick={() => props.onVisibleChange(false)}
-        >
-          {intl.formatMessage({id: '取消'})}
-        </button>,
-        <button
-          type='button'
-          ref={btn1}
-          key="submit"
-          onKeyDown={submitBtn}
           onClick={() => form?.submit?.()}
         >
           {intl.formatMessage({id: '确认'})}