Skip to content

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

厂线选择

parent b0da36f6
Show whitespace changes
Inline Side-by-side
Showing with 174 additions and 212 deletions
src/pages/kanban/ProductionProgress/components/SettingForm/index.tsx
View file @ bfce4ba5
import React, { useRef, useState } from 'react'; import React, { useRef, useState, useEffect } from 'react';
import { useIntl } from 'umi'; import { useIntl } from 'umi';
import ProForm, { import { Radio, Drawer, Form, Checkbox, InputNumber } from 'antd';
DrawerForm,
ProFormCheckbox,
ProFormDigit,
ProFormRadio,
ProFormSelect,
} from '@ant-design/pro-form';
import { Button } from 'antd';
import type { ProFormInstance } from '@ant-design/pro-form';
import { queryProductionComprehensKanbanData } from '../../services/api'; import { queryProductionComprehensKanbanData } from '../../services/api';
type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto; type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto;
...@@ -38,29 +30,61 @@ export type SettingFormProps = { ...@@ -38,29 +30,61 @@ export type SettingFormProps = {
}; };
const SettingForm: React.FC<SettingFormProps> = (props) => { const SettingForm: React.FC<SettingFormProps> = (props) => {
const formRef = useRef<ProFormInstance>(); const [form] = Form.useForm();
const btn = useRef<HTMLButtonElement>(null); const btn = useRef<HTMLButtonElement>(null);
const btn1 = 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 intl = useIntl();
const [lineName, setLineName] = useState< const [lineNameList, setLineNameList] = useState<
KanbanSetting[] 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) => { const onPressEnter = (e) => {
setlineNameFocus(true) console.log('回车了')
RadioList.current[0]?.focus()
}; };
const onInputKeyDown = (e) => { const CheckboxKeyDown = (e) => {
const a = document.getElementsByClassName('ant-select-open') if (e.code === "ArrowDown") {
if (e.code === "ArrowDown" && a.length === 0) { intervalTimeRef.current?.focus()
e.preventDefault()
btn.current?.focus()
} }
} }
const cancelBtn = (e) => { const cancelBtn = (e) => {
if (e.code === "ArrowRight") { if (e.code === "ArrowRight") {
btn1.current?.focus() btn1.current?.focus()
} else if (e.code === "ArrowUp") { } 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) => { const submitBtn = (e) => {
...@@ -68,22 +92,34 @@ const SettingForm: React.FC<SettingFormProps> = (props) => { ...@@ -68,22 +92,34 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
btn.current?.focus() btn.current?.focus()
} }
} }
const onBlurlineName = () => {
setlineNameFocus(false)
}
return ( return (
<DrawerForm <Drawer title={intl.formatMessage({id: '设置'})} width={600} onClose={() => {props.onVisibleChange(false)}} visible={props.visible}>
formRef={formRef} <Form
title={intl.formatMessage({id: '设置'})} form={form}
width={600} name="control-hooks"
submitter={{ onFinish={async (values: FormSettingDto) => {
searchConfig: { console.log('values', values)
resetText: intl.formatMessage({id: '取消'}), props.onSubmitting({ ...values });
submitText: intl.formatMessage({id: '确认'}), props.onVisibleChange(false);
}, }}
render: (props1, doms) => { >
console.log(props1); <Form.Item name="autoResize" label={intl.formatMessage({id: '适配窗口'})} valuePropName="checked">
return [ <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 <button
type='button' type='button'
key="rest" key="rest"
...@@ -98,68 +134,13 @@ const SettingForm: React.FC<SettingFormProps> = (props) => { ...@@ -98,68 +134,13 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
ref={btn1} ref={btn1}
key="submit" key="submit"
onKeyDown={submitBtn} onKeyDown={submitBtn}
onClick={() => props1.form?.submit?.()} onClick={() => form?.submit?.()}
> >
{intl.formatMessage({id: '确认'})} {intl.formatMessage({id: '确认'})}
</button>, </button>
]; </Form.Item>
} </Form>
}} </Drawer>
visible={props.visible}
onVisibleChange={(visible: boolean) => {
if (visible) {
formRef?.current?.setFieldsValue({
...props.values
});
}
setlineNameFocus(false)
props.onVisibleChange(visible);
}}
onFinish={async (values: FormSettingDto) => {
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>
); );
}; };
......
src/pages/kanban/paintingProcessKanban/components/SettingForm/index.tsx
View file @ bfce4ba5
import React, { useRef, useState } from 'react'; import React, { useRef, useState, useEffect } from 'react';
import { useIntl } from 'umi'; import { useIntl } from 'umi';
import ProForm, { import { Radio, Drawer, Form, Checkbox, InputNumber } from 'antd';
DrawerForm,
ProFormCheckbox,
ProFormDigit,
ProFormRadio,
ProFormSelect,
} from '@ant-design/pro-form';
import { Button } from 'antd';
import type { ProFormInstance } from '@ant-design/pro-form';
import { queryProductionComprehensKanbanData } from '../../services/api'; import { queryProductionComprehensKanbanData } from '../../services/api';
type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto; type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto;
...@@ -38,29 +30,61 @@ export type SettingFormProps = { ...@@ -38,29 +30,61 @@ export type SettingFormProps = {
}; };
const SettingForm: React.FC<SettingFormProps> = (props) => { const SettingForm: React.FC<SettingFormProps> = (props) => {
const formRef = useRef<ProFormInstance>(); const [form] = Form.useForm();
const btn = useRef<HTMLButtonElement>(null); const btn = useRef<HTMLButtonElement>(null);
const btn1 = 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 intl = useIntl();
const [lineName, setLineName] = useState< const [lineNameList, setLineNameList] = useState<
KanbanSetting[] 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) => { const onPressEnter = (e) => {
setlineNameFocus(true) console.log('回车了')
RadioList.current[0]?.focus()
}; };
const onInputKeyDown = (e) => { const CheckboxKeyDown = (e) => {
const a = document.getElementsByClassName('ant-select-open') if (e.code === "ArrowDown") {
if (e.code === "ArrowDown" && a.length === 0) { intervalTimeRef.current?.focus()
e.preventDefault()
btn.current?.focus()
} }
} }
const cancelBtn = (e) => { const cancelBtn = (e) => {
if (e.code === "ArrowRight") { if (e.code === "ArrowRight") {
btn1.current?.focus() btn1.current?.focus()
} else if (e.code === "ArrowUp") { } 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) => { const submitBtn = (e) => {
...@@ -68,22 +92,34 @@ const SettingForm: React.FC<SettingFormProps> = (props) => { ...@@ -68,22 +92,34 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
btn.current?.focus() btn.current?.focus()
} }
} }
const onBlurlineName = () => {
setlineNameFocus(false)
}
return ( return (
<DrawerForm <Drawer title={intl.formatMessage({id: '设置'})} width={600} onClose={() => {props.onVisibleChange(false)}} visible={props.visible}>
formRef={formRef} <Form
title={intl.formatMessage({id: '设置'})} form={form}
width={600} name="control-hooks"
submitter={{ onFinish={async (values: FormSettingDto) => {
searchConfig: { console.log('values', values)
resetText: intl.formatMessage({id: '取消'}), props.onSubmitting({ ...values });
submitText: intl.formatMessage({id: '确认'}), props.onVisibleChange(false);
}, }}
render: (props1, doms) => { >
console.log(props1); <Form.Item name="autoResize" label={intl.formatMessage({id: '适配窗口'})} valuePropName="checked">
return [ <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 <button
type='button' type='button'
key="rest" key="rest"
...@@ -98,68 +134,13 @@ const SettingForm: React.FC<SettingFormProps> = (props) => { ...@@ -98,68 +134,13 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
ref={btn1} ref={btn1}
key="submit" key="submit"
onKeyDown={submitBtn} onKeyDown={submitBtn}
onClick={() => props1.form?.submit?.()} onClick={() => form?.submit?.()}
> >
{intl.formatMessage({id: '确认'})} {intl.formatMessage({id: '确认'})}
</button>, </button>
]; </Form.Item>
} </Form>
}} </Drawer>
visible={props.visible}
onVisibleChange={(visible: boolean) => {
if (visible) {
formRef?.current?.setFieldsValue({
...props.values
});
}
setlineNameFocus(false)
props.onVisibleChange(visible);
}}
onFinish={async (values: FormSettingDto) => {
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>
); );
}; };
......
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