Skip to content

M
mes-kanban
Commit c1e3b8ac authored by 沈翠玲's avatar 沈翠玲
Browse files
Options

产线选择

parent bfce4ba5
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 56 deletions
src/pages/kanban/ProductionProgress/components/SettingForm/index.tsx
View file @ c1e3b8ac
import React, { useRef, useState, useEffect } from 'react'; import React, { useRef, useState, useEffect } from 'react';
import { useIntl } from 'umi'; 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'; import { queryProductionComprehensKanbanData } from '../../services/api';
type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto; type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto;
...@@ -36,6 +36,7 @@ const SettingForm: React.FC<SettingFormProps> = (props) => { ...@@ -36,6 +36,7 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
const RadioList = useRef<any>([]); const RadioList = useRef<any>([]);
const CheckboxRef = useRef<HTMLInputElement>(null); const CheckboxRef = useRef<HTMLInputElement>(null);
const line = useRef<HTMLBaseElement>(null);
const intervalTimeRef = useRef<HTMLInputElement>(null); const intervalTimeRef = useRef<HTMLInputElement>(null);
const rowMovingTimeRef = useRef<HTMLInputElement>(null); const rowMovingTimeRef = useRef<HTMLInputElement>(null);
const intl = useIntl(); const intl = useIntl();
...@@ -60,7 +61,7 @@ const SettingForm: React.FC<SettingFormProps> = (props) => { ...@@ -60,7 +61,7 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
}, [props.visible]); }, [props.visible]);
const onPressEnter = (e) => { const onPressEnter = (e) => {
console.log('回车了') console.log('回车了')
RadioList.current[0]?.focus() line.current?.focus()
}; };
const CheckboxKeyDown = (e) => { const CheckboxKeyDown = (e) => {
if (e.code === "ArrowDown") { if (e.code === "ArrowDown") {
...@@ -71,24 +72,20 @@ const SettingForm: React.FC<SettingFormProps> = (props) => { ...@@ -71,24 +72,20 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
if (e.code === "ArrowRight") { if (e.code === "ArrowRight") {
btn1.current?.focus() btn1.current?.focus()
} else if (e.code === "ArrowUp") { } else if (e.code === "ArrowUp") {
RadioList.current[0]?.focus() line.current?.focus()
} }
} }
const lineNameKeyDown = (e, index:number) => { const lineNameKeyDown = (e) => {
if (e.code === "ArrowRight") { // if (e.code === "ArrowRight") {
const index1 = index + 1 >= lineNameList.length ? 0 : index + 1 // const index1 = index + 1 >= lineNameList.length ? 0 : index + 1
RadioList.current[index1]?.focus() // RadioList.current[index1]?.focus()
} else if (e.code === "ArrowLeft") { // } else if (e.code === "ArrowLeft") {
const index1 = index - 1 >= 0 ? lineNameList.length - 1 : index - 1 // const index1 = index - 1 >= 0 ? lineNameList.length - 1 : index - 1
RadioList.current[index1]?.focus() // RadioList.current[index1]?.focus()
} else if (e.code === "ArrowUp") { const a = document.getElementsByClassName('ant-select-open')
if (e.code === "ArrowUp" && a.length === 0) {
rowMovingTimeRef.current?.focus() rowMovingTimeRef.current?.focus()
} else if (e.code === "ArrowDown") { } else if (e.code === "ArrowDown" && a.length === 0) {
btn.current?.focus()
}
}
const submitBtn = (e) => {
if (e.code === "ArrowLeft") {
btn.current?.focus() btn.current?.focus()
} }
} }
...@@ -112,28 +109,28 @@ const SettingForm: React.FC<SettingFormProps> = (props) => { ...@@ -112,28 +109,28 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
<Form.Item name="rowMovingTime" label={intl.formatMessage({id: '内容滚动（秒）'})} rules={[{ required: true }]}> <Form.Item name="rowMovingTime" label={intl.formatMessage({id: '内容滚动（秒）'})} rules={[{ required: true }]}>
<InputNumber precision={0} ref={rowMovingTimeRef} onPressEnter={onPressEnter}></InputNumber> <InputNumber precision={0} ref={rowMovingTimeRef} onPressEnter={onPressEnter}></InputNumber>
</Form.Item> </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> <Radio.Group>
{lineNameList.map((lineName, index) => ( {lineNameList.map((lineName, index) => (
<Radio ref={el => (RadioList.current[index] = el)} onKeyDown={(e)=>{lineNameKeyDown(e, index)}} value={lineName}>{lineName}</Radio> <Radio ref={el => (RadioList.current[index] = el)} onKeyDown={(e)=>{lineNameKeyDown(e, index)}} value={lineName}>{lineName}</Radio>
))} ))}
</Radio.Group> </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>
<Form.Item> <Form.Item>
<button <button
type='button' type='button'
key="rest" key="submit"
ref={btn} ref={btn}
onKeyDown={cancelBtn} onKeyDown={cancelBtn}
onClick={() => props.onVisibleChange(false)}
>
{intl.formatMessage({id: '取消'})}
</button>,
<button
type='button'
ref={btn1}
key="submit"
onKeyDown={submitBtn}
onClick={() => form?.submit?.()} onClick={() => form?.submit?.()}
> >
{intl.formatMessage({id: '确认'})} {intl.formatMessage({id: '确认'})}
......
src/pages/kanban/paintingProcessKanban/components/SettingForm/index.tsx
View file @ c1e3b8ac
import React, { useRef, useState, useEffect } from 'react'; import React, { useRef, useState, useEffect } from 'react';
import { useIntl } from 'umi'; 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'; import { queryProductionComprehensKanbanData } from '../../services/api';
type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto; type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto;
...@@ -36,6 +36,7 @@ const SettingForm: React.FC<SettingFormProps> = (props) => { ...@@ -36,6 +36,7 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
const RadioList = useRef<any>([]); const RadioList = useRef<any>([]);
const CheckboxRef = useRef<HTMLInputElement>(null); const CheckboxRef = useRef<HTMLInputElement>(null);
const line = useRef<HTMLBaseElement>(null);
const intervalTimeRef = useRef<HTMLInputElement>(null); const intervalTimeRef = useRef<HTMLInputElement>(null);
const rowMovingTimeRef = useRef<HTMLInputElement>(null); const rowMovingTimeRef = useRef<HTMLInputElement>(null);
const intl = useIntl(); const intl = useIntl();
...@@ -60,7 +61,7 @@ const SettingForm: React.FC<SettingFormProps> = (props) => { ...@@ -60,7 +61,7 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
}, [props.visible]); }, [props.visible]);
const onPressEnter = (e) => { const onPressEnter = (e) => {
console.log('回车了') console.log('回车了')
RadioList.current[0]?.focus() line.current?.focus()
}; };
const CheckboxKeyDown = (e) => { const CheckboxKeyDown = (e) => {
if (e.code === "ArrowDown") { if (e.code === "ArrowDown") {
...@@ -71,24 +72,20 @@ const SettingForm: React.FC<SettingFormProps> = (props) => { ...@@ -71,24 +72,20 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
if (e.code === "ArrowRight") { if (e.code === "ArrowRight") {
btn1.current?.focus() btn1.current?.focus()
} else if (e.code === "ArrowUp") { } else if (e.code === "ArrowUp") {
RadioList.current[0]?.focus() line.current?.focus()
} }
} }
const lineNameKeyDown = (e, index:number) => { const lineNameKeyDown = (e) => {
if (e.code === "ArrowRight") { // if (e.code === "ArrowRight") {
const index1 = index + 1 >= lineNameList.length ? 0 : index + 1 // const index1 = index + 1 >= lineNameList.length ? 0 : index + 1
RadioList.current[index1]?.focus() // RadioList.current[index1]?.focus()
} else if (e.code === "ArrowLeft") { // } else if (e.code === "ArrowLeft") {
const index1 = index - 1 >= 0 ? lineNameList.length - 1 : index - 1 // const index1 = index - 1 >= 0 ? lineNameList.length - 1 : index - 1
RadioList.current[index1]?.focus() // RadioList.current[index1]?.focus()
} else if (e.code === "ArrowUp") { const a = document.getElementsByClassName('ant-select-open')
if (e.code === "ArrowUp" && a.length === 0) {
rowMovingTimeRef.current?.focus() rowMovingTimeRef.current?.focus()
} else if (e.code === "ArrowDown") { } else if (e.code === "ArrowDown" && a.length === 0) {
btn.current?.focus()
}
}
const submitBtn = (e) => {
if (e.code === "ArrowLeft") {
btn.current?.focus() btn.current?.focus()
} }
} }
...@@ -112,28 +109,28 @@ const SettingForm: React.FC<SettingFormProps> = (props) => { ...@@ -112,28 +109,28 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
<Form.Item name="rowMovingTime" label={intl.formatMessage({id: '内容滚动（秒）'})} rules={[{ required: true }]}> <Form.Item name="rowMovingTime" label={intl.formatMessage({id: '内容滚动（秒）'})} rules={[{ required: true }]}>
<InputNumber precision={0} ref={rowMovingTimeRef} onPressEnter={onPressEnter}></InputNumber> <InputNumber precision={0} ref={rowMovingTimeRef} onPressEnter={onPressEnter}></InputNumber>
</Form.Item> </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> <Radio.Group>
{lineNameList.map((lineName, index) => ( {lineNameList.map((lineName, index) => (
<Radio ref={el => (RadioList.current[index] = el)} onKeyDown={(e)=>{lineNameKeyDown(e, index)}} value={lineName}>{lineName}</Radio> <Radio ref={el => (RadioList.current[index] = el)} onKeyDown={(e)=>{lineNameKeyDown(e, index)}} value={lineName}>{lineName}</Radio>
))} ))}
</Radio.Group> </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>
<Form.Item> <Form.Item>
<button <button
type='button' type='button'
key="rest" key="submit"
ref={btn} ref={btn}
onKeyDown={cancelBtn} onKeyDown={cancelBtn}
onClick={() => props.onVisibleChange(false)}
>
{intl.formatMessage({id: '取消'})}
</button>,
<button
type='button'
ref={btn1}
key="submit"
onKeyDown={submitBtn}
onClick={() => form?.submit?.()} onClick={() => form?.submit?.()}
> >
{intl.formatMessage({id: '确认'})} {intl.formatMessage({id: '确认'})}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment