Skip to content

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

厂线选择

parent b0da36f6
Hide 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,98 +92,55 @@ const SettingForm: React.FC<SettingFormProps> = (props) => { ...@@ -68,98 +92,55 @@ 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={{
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);
}}
onFinish={async (values: FormSettingDto) => { onFinish={async (values: FormSettingDto) => {
console.log('values', values)
props.onSubmitting({ ...values }); props.onSubmitting({ ...values });
props.onVisibleChange(false); props.onVisibleChange(false);
}} }}
> >
<ProFormCheckbox name="autoResize" label={intl.formatMessage({id: '适配窗口'})} width="xl" /> <Form.Item name="autoResize" label={intl.formatMessage({id: '适配窗口'})} valuePropName="checked">
<ProFormDigit <Checkbox ref={CheckboxRef} onKeyDown={CheckboxKeyDown}></Checkbox>
name="intervalTime" </Form.Item>
label={intl.formatMessage({id: '刷新时间间隔（秒）'})} <Form.Item name="intervalTime" label={intl.formatMessage({id: '刷新时间间隔（秒）'})} rules={[{ required: true }]}>
required <InputNumber precision={0} ref={intervalTimeRef}></InputNumber>
width="xl" </Form.Item>
min={10} <Form.Item name="rowMovingTime" label={intl.formatMessage({id: '内容滚动（秒）'})} rules={[{ required: true }]}>
fieldProps={{ precision: 0 }} <InputNumber precision={0} ref={rowMovingTimeRef} onPressEnter={onPressEnter}></InputNumber>
/> </Form.Item>
<ProFormDigit <Form.Item name="lineName" label={intl.formatMessage({id: '产线选择'})} rules={[{ required: true }]}>
name="rowMovingTime" <Radio.Group>
label={intl.formatMessage({id: '内容滚动（秒）'})} {lineNameList.map((lineName, index) => (
required <Radio ref={el => (RadioList.current[index] = el)} onKeyDown={(e)=>{lineNameKeyDown(e, index)}} value={lineName}>{lineName}</Radio>
width="xl" ))}
min={1} </Radio.Group>
fieldProps={{ precision: 0, onPressEnter: onPressEnter }} </Form.Item>
/> <Form.Item>
<div > <button
<ProFormSelect type='button'
name="lineName" key="rest"
label={intl.formatMessage({id: '产线选择'})} ref={btn}
required onKeyDown={cancelBtn}
fieldProps={{ autoFocus: lineNameFocus, onInputKeyDown: onInputKeyDown, onBlur: () => onBlurlineName }} onClick={() => props.onVisibleChange(false)}
width="xl" >
request={async () => { {intl.formatMessage({id: '取消'})}
const { data } = await queryProductionComprehensKanbanData(); </button>,
if (Array.isArray(data)) { <button
data.unshift(intl.formatMessage({ type='button'
id: '全厂' ref={btn1}
})) key="submit"
} onKeyDown={submitBtn}
setLineName(data); onClick={() => form?.submit?.()}
return data.map((a) => ({ label: a, value: a })); >
}} {intl.formatMessage({id: '确认'})}
/> </button>
</div> </Form.Item>
</Form>
</Drawer>
</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,98 +92,55 @@ const SettingForm: React.FC<SettingFormProps> = (props) => { ...@@ -68,98 +92,55 @@ 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={{
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);
}}
onFinish={async (values: FormSettingDto) => { onFinish={async (values: FormSettingDto) => {
console.log('values', values)
props.onSubmitting({ ...values }); props.onSubmitting({ ...values });
props.onVisibleChange(false); props.onVisibleChange(false);
}} }}
> >
<ProFormCheckbox name="autoResize" label={intl.formatMessage({id: '适配窗口'})} width="xl" /> <Form.Item name="autoResize" label={intl.formatMessage({id: '适配窗口'})} valuePropName="checked">
<ProFormDigit <Checkbox ref={CheckboxRef} onKeyDown={CheckboxKeyDown}></Checkbox>
name="intervalTime" </Form.Item>
label={intl.formatMessage({id: '刷新时间间隔（秒）'})} <Form.Item name="intervalTime" label={intl.formatMessage({id: '刷新时间间隔（秒）'})} rules={[{ required: true }]}>
required <InputNumber precision={0} ref={intervalTimeRef}></InputNumber>
width="xl" </Form.Item>
min={10} <Form.Item name="rowMovingTime" label={intl.formatMessage({id: '内容滚动（秒）'})} rules={[{ required: true }]}>
fieldProps={{ precision: 0 }} <InputNumber precision={0} ref={rowMovingTimeRef} onPressEnter={onPressEnter}></InputNumber>
/> </Form.Item>
<ProFormDigit <Form.Item name="lineName" label={intl.formatMessage({id: '产线选择'})} rules={[{ required: true }]}>
name="rowMovingTime" <Radio.Group>
label={intl.formatMessage({id: '内容滚动（秒）'})} {lineNameList.map((lineName, index) => (
required <Radio ref={el => (RadioList.current[index] = el)} onKeyDown={(e)=>{lineNameKeyDown(e, index)}} value={lineName}>{lineName}</Radio>
width="xl" ))}
min={1} </Radio.Group>
fieldProps={{ precision: 0, onPressEnter: onPressEnter }} </Form.Item>
/> <Form.Item>
<div > <button
<ProFormSelect type='button'
name="lineName" key="rest"
label={intl.formatMessage({id: '产线选择'})} ref={btn}
required onKeyDown={cancelBtn}
fieldProps={{ autoFocus: lineNameFocus, onInputKeyDown: onInputKeyDown, onBlur: () => onBlurlineName }} onClick={() => props.onVisibleChange(false)}
width="xl" >
request={async () => { {intl.formatMessage({id: '取消'})}
const { data } = await queryProductionComprehensKanbanData(); </button>,
if (Array.isArray(data)) { <button
data.unshift(intl.formatMessage({ type='button'
id: '全厂' ref={btn1}
})) key="submit"
} onKeyDown={submitBtn}
setLineName(data); onClick={() => form?.submit?.()}
return data.map((a) => ({ label: a, value: a })); >
}} {intl.formatMessage({id: '确认'})}
/> </button>
</div> </Form.Item>
</Form>
</Drawer>
</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