厂线选择

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

-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { useIntl } from 'umi';
-import ProForm, {
-  DrawerForm,
-  ProFormCheckbox,
-  ProFormDigit,
-  ProFormRadio,
-  ProFormSelect,
-} from '@ant-design/pro-form';
-import { Button } from 'antd';
-import type { ProFormInstance } from '@ant-design/pro-form';
+import { Radio, Drawer, Form, Checkbox, InputNumber } from 'antd';
 import { queryProductionComprehensKanbanData } from '../../services/api';
 type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto;
 
@@ -38,29 +30,61 @@ export type SettingFormProps = {
 };
 
 const SettingForm: React.FC<SettingFormProps> = (props) => {
-  const formRef = useRef<ProFormInstance>();
+  const [form] = Form.useForm();
   const btn = useRef<HTMLButtonElement>(null);
   const btn1 = useRef<HTMLButtonElement>(null);
+  const RadioList = useRef<any>([]);
+
+  const CheckboxRef = useRef<HTMLInputElement>(null);
+  const intervalTimeRef = useRef<HTMLInputElement>(null);
+  const rowMovingTimeRef = useRef<HTMLInputElement>(null);
   const intl = useIntl();
-  const [lineName, setLineName] = useState<
+  const [lineNameList, setLineNameList] = useState<
     KanbanSetting[]
   >([]);
-  const [lineNameFocus, setlineNameFocus] = useState(false);
+
+  useEffect(async () => {
+    if (props.visible) {
+      console.log('props.values', props.values)
+      const { data } = await queryProductionComprehensKanbanData();
+      if (Array.isArray(data)) {
+        data.unshift(intl.formatMessage({
+          id: '全厂'
+        }))
+      }
+      setLineNameList(data);
+      form.setFieldsValue({...props.values});
+      CheckboxRef.current?.focus()
+    }
+    props.onVisibleChange(props.visible);
+  }, [props.visible]);
   const onPressEnter = (e) => {
-    setlineNameFocus(true)
+    console.log('回车了')
+    RadioList.current[0]?.focus()
   };
-  const onInputKeyDown = (e) => {
-    const a = document.getElementsByClassName('ant-select-open')
-    if (e.code === "ArrowDown" && a.length === 0) {
-      e.preventDefault()
-      btn.current?.focus()
+  const CheckboxKeyDown = (e) => {
+    if (e.code === "ArrowDown") {
+      intervalTimeRef.current?.focus()
     }
   }
   const cancelBtn = (e) => {
     if (e.code === "ArrowRight") {
       btn1.current?.focus()
     } else if (e.code === "ArrowUp") {
-      setlineNameFocus(true)
+      RadioList.current[0]?.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") {
+      rowMovingTimeRef.current?.focus()
+    } else if (e.code === "ArrowDown") {
+      btn.current?.focus()
     }
   }
   const submitBtn = (e) => {
@@ -68,98 +92,55 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
       btn.current?.focus()
     }
   }
-  const onBlurlineName = () => {
-    setlineNameFocus(false)
-  }
   return (
-    <DrawerForm
-      formRef={formRef}
-      title={intl.formatMessage({id: '设置'})}
-      width={600}
-      submitter={{
-        searchConfig: {
-          resetText: intl.formatMessage({id: '取消'}),
-          submitText: intl.formatMessage({id: '确认'}),
-        },
-        render: (props1, doms) => {
-          console.log(props1);
-          return [
-            <button
-              type='button'
-              key="rest"
-              ref={btn}
-              onKeyDown={cancelBtn}
-              onClick={() => props.onVisibleChange(false)}
-            >
-              {intl.formatMessage({id: '取消'})}
-            </button>,
-            <button
-              type='button'
-              ref={btn1}
-              key="submit"
-              onKeyDown={submitBtn}
-              onClick={() => props1.form?.submit?.()}
-            >
-              {intl.formatMessage({id: '确认'})}
-            </button>,
-          ];
-        }
-      }}
-      visible={props.visible}
-      onVisibleChange={(visible: boolean) => {
-        if (visible) {
-          formRef?.current?.setFieldsValue({
-            ...props.values
-          });
-        }
-        setlineNameFocus(false)
-        props.onVisibleChange(visible);
-      }}
+    <Drawer title={intl.formatMessage({id: '设置'})} width={600} onClose={() => {props.onVisibleChange(false)}} visible={props.visible}>
+      <Form
+      form={form}
+      name="control-hooks"
       onFinish={async (values: FormSettingDto) => {
+        console.log('values', values)
         props.onSubmitting({ ...values });
         props.onVisibleChange(false);
       }}
     >
-      <ProFormCheckbox name="autoResize" label={intl.formatMessage({id: '适配窗口'})} width="xl" />
-      <ProFormDigit
-        name="intervalTime"
-        label={intl.formatMessage({id: '刷新时间间隔（秒）'})}
-        required
-        width="xl"
-        min={10}
-        fieldProps={{ precision: 0 }}
-      />
-      <ProFormDigit
-        name="rowMovingTime"
-        label={intl.formatMessage({id: '内容滚动（秒）'})}
-        required
-        width="xl"
-        min={1}
-        fieldProps={{ precision: 0, onPressEnter: onPressEnter }}
-      />
-      <div >
-      <ProFormSelect
-        name="lineName"
-        label={intl.formatMessage({id: '产线选择'})}
-        required
-        fieldProps={{ autoFocus: lineNameFocus, onInputKeyDown: onInputKeyDown, onBlur: () => onBlurlineName }}
-        width="xl"
-        request={async () => {
-          const { data } = await queryProductionComprehensKanbanData();
-          if (Array.isArray(data)) {
-            data.unshift(intl.formatMessage({
-              id: '全厂'
-            }))
-          }
-          setLineName(data);
-          return data.map((a) => ({ label: a, value: a }));
-        }}
-        />
-      </div>
-      
-      
-      
-    </DrawerForm>
+      <Form.Item name="autoResize" label={intl.formatMessage({id: '适配窗口'})} valuePropName="checked">
+        <Checkbox ref={CheckboxRef} onKeyDown={CheckboxKeyDown}></Checkbox>
+      </Form.Item>
+      <Form.Item name="intervalTime" label={intl.formatMessage({id: '刷新时间间隔（秒）'})} rules={[{ required: true }]}>
+        <InputNumber precision={0} ref={intervalTimeRef}></InputNumber>
+      </Form.Item>
+      <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 }]}>
+        <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>
+        <button
+          type='button'
+          key="rest"
+          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: '确认'})}
+        </button>
+      </Form.Item>
+    </Form>
+    </Drawer>
   );
 };
 

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

-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { useIntl } from 'umi';
-import ProForm, {
-  DrawerForm,
-  ProFormCheckbox,
-  ProFormDigit,
-  ProFormRadio,
-  ProFormSelect,
-} from '@ant-design/pro-form';
-import { Button } from 'antd';
-import type { ProFormInstance } from '@ant-design/pro-form';
+import { Radio, Drawer, Form, Checkbox, InputNumber } from 'antd';
 import { queryProductionComprehensKanbanData } from '../../services/api';
 type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto;
 
@@ -38,29 +30,61 @@ export type SettingFormProps = {
 };
 
 const SettingForm: React.FC<SettingFormProps> = (props) => {
-  const formRef = useRef<ProFormInstance>();
+  const [form] = Form.useForm();
   const btn = useRef<HTMLButtonElement>(null);
   const btn1 = useRef<HTMLButtonElement>(null);
+  const RadioList = useRef<any>([]);
+
+  const CheckboxRef = useRef<HTMLInputElement>(null);
+  const intervalTimeRef = useRef<HTMLInputElement>(null);
+  const rowMovingTimeRef = useRef<HTMLInputElement>(null);
   const intl = useIntl();
-  const [lineName, setLineName] = useState<
+  const [lineNameList, setLineNameList] = useState<
     KanbanSetting[]
   >([]);
-  const [lineNameFocus, setlineNameFocus] = useState(false);
+
+  useEffect(async () => {
+    if (props.visible) {
+      console.log('props.values', props.values)
+      const { data } = await queryProductionComprehensKanbanData();
+      if (Array.isArray(data)) {
+        data.unshift(intl.formatMessage({
+          id: '全厂'
+        }))
+      }
+      setLineNameList(data);
+      form.setFieldsValue({...props.values});
+      CheckboxRef.current?.focus()
+    }
+    props.onVisibleChange(props.visible);
+  }, [props.visible]);
   const onPressEnter = (e) => {
-    setlineNameFocus(true)
+    console.log('回车了')
+    RadioList.current[0]?.focus()
   };
-  const onInputKeyDown = (e) => {
-    const a = document.getElementsByClassName('ant-select-open')
-    if (e.code === "ArrowDown" && a.length === 0) {
-      e.preventDefault()
-      btn.current?.focus()
+  const CheckboxKeyDown = (e) => {
+    if (e.code === "ArrowDown") {
+      intervalTimeRef.current?.focus()
     }
   }
   const cancelBtn = (e) => {
     if (e.code === "ArrowRight") {
       btn1.current?.focus()
     } else if (e.code === "ArrowUp") {
-      setlineNameFocus(true)
+      RadioList.current[0]?.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") {
+      rowMovingTimeRef.current?.focus()
+    } else if (e.code === "ArrowDown") {
+      btn.current?.focus()
     }
   }
   const submitBtn = (e) => {
@@ -68,98 +92,55 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
       btn.current?.focus()
     }
   }
-  const onBlurlineName = () => {
-    setlineNameFocus(false)
-  }
   return (
-    <DrawerForm
-      formRef={formRef}
-      title={intl.formatMessage({id: '设置'})}
-      width={600}
-      submitter={{
-        searchConfig: {
-          resetText: intl.formatMessage({id: '取消'}),
-          submitText: intl.formatMessage({id: '确认'}),
-        },
-        render: (props1, doms) => {
-          console.log(props1);
-          return [
-            <button
-              type='button'
-              key="rest"
-              ref={btn}
-              onKeyDown={cancelBtn}
-              onClick={() => props.onVisibleChange(false)}
-            >
-              {intl.formatMessage({id: '取消'})}
-            </button>,
-            <button
-              type='button'
-              ref={btn1}
-              key="submit"
-              onKeyDown={submitBtn}
-              onClick={() => props1.form?.submit?.()}
-            >
-              {intl.formatMessage({id: '确认'})}
-            </button>,
-          ];
-        }
-      }}
-      visible={props.visible}
-      onVisibleChange={(visible: boolean) => {
-        if (visible) {
-          formRef?.current?.setFieldsValue({
-            ...props.values
-          });
-        }
-        setlineNameFocus(false)
-        props.onVisibleChange(visible);
-      }}
+    <Drawer title={intl.formatMessage({id: '设置'})} width={600} onClose={() => {props.onVisibleChange(false)}} visible={props.visible}>
+      <Form
+      form={form}
+      name="control-hooks"
       onFinish={async (values: FormSettingDto) => {
+        console.log('values', values)
         props.onSubmitting({ ...values });
         props.onVisibleChange(false);
       }}
     >
-      <ProFormCheckbox name="autoResize" label={intl.formatMessage({id: '适配窗口'})} width="xl" />
-      <ProFormDigit
-        name="intervalTime"
-        label={intl.formatMessage({id: '刷新时间间隔（秒）'})}
-        required
-        width="xl"
-        min={10}
-        fieldProps={{ precision: 0 }}
-      />
-      <ProFormDigit
-        name="rowMovingTime"
-        label={intl.formatMessage({id: '内容滚动（秒）'})}
-        required
-        width="xl"
-        min={1}
-        fieldProps={{ precision: 0, onPressEnter: onPressEnter }}
-      />
-      <div >
-      <ProFormSelect
-        name="lineName"
-        label={intl.formatMessage({id: '产线选择'})}
-        required
-        fieldProps={{ autoFocus: lineNameFocus, onInputKeyDown: onInputKeyDown, onBlur: () => onBlurlineName }}
-        width="xl"
-        request={async () => {
-          const { data } = await queryProductionComprehensKanbanData();
-          if (Array.isArray(data)) {
-            data.unshift(intl.formatMessage({
-              id: '全厂'
-            }))
-          }
-          setLineName(data);
-          return data.map((a) => ({ label: a, value: a }));
-        }}
-        />
-      </div>
-      
-      
-      
-    </DrawerForm>
+      <Form.Item name="autoResize" label={intl.formatMessage({id: '适配窗口'})} valuePropName="checked">
+        <Checkbox ref={CheckboxRef} onKeyDown={CheckboxKeyDown}></Checkbox>
+      </Form.Item>
+      <Form.Item name="intervalTime" label={intl.formatMessage({id: '刷新时间间隔（秒）'})} rules={[{ required: true }]}>
+        <InputNumber precision={0} ref={intervalTimeRef}></InputNumber>
+      </Form.Item>
+      <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 }]}>
+        <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>
+        <button
+          type='button'
+          key="rest"
+          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: '确认'})}
+        </button>
+      </Form.Item>
+    </Form>
+    </Drawer>
   );
 };