实现打印界面跳转自动搜索工号
This commit is contained in:
Vectorune
@ -154,8 +154,22 @@ function QueryConditionBox(props) {
|
|||||||
</Row>
|
</Row>
|
||||||
<Flex justify={"space-between"} align={"center"}>
|
<Flex justify={"space-between"} align={"center"}>
|
||||||
<Flex justify={"start"} align={"center"}>
|
<Flex justify={"start"} align={"center"}>
|
||||||
<Button icon={<PlusOutlined/>}
|
{/*修改生成新证明按钮的点击事件*/}
|
||||||
onClick={() => navigate('/generate-certificate')}>生成新证明</Button>
|
<Button
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
const selectedStaffNumbers = form.getFieldValue('staffNumber') || [];
|
||||||
|
const baseUrl = '/generate-certificate';
|
||||||
|
// 携带工号和来源标记（用于区分跳转场景）
|
||||||
|
if (selectedStaffNumbers.length > 0) {
|
||||||
|
navigate(`${baseUrl}?staffNumber=${selectedStaffNumbers[0]}&from=print`);
|
||||||
|
} else {
|
||||||
|
navigate(baseUrl);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
生成新证明
|
||||||
|
</Button>
|
||||||
</Flex>
|
</Flex>
|
||||||
<Flex justify={"center"} align={"center"} gap={"large"}>
|
<Flex justify={"center"} align={"center"} gap={"large"}>
|
||||||
<Button type={"primary"} htmlType={"submit"} icon={<SearchOutlined/>}>搜索</Button>
|
<Button type={"primary"} htmlType={"submit"} icon={<SearchOutlined/>}>搜索</Button>
|
||||||
|
|||||||
@ -1,147 +1,162 @@
|
|||||||
import React, {useEffect} from 'react';
|
import React, { useEffect, useState, useRef } from 'react';
|
||||||
import {Button, Flex, Form, Input, message, Spin, Table, Typography} from "antd";
|
import { Button, Flex, Form, Input, message, Spin, Table, Typography } from "antd";
|
||||||
import creatMessageCommonAxios from "../../../http/CreatMessageCommonAxios";
|
import creatMessageCommonAxios from "../../../http/CreatMessageCommonAxios";
|
||||||
|
import { useSearchParams } from 'react-router-dom';
|
||||||
|
|
||||||
const ChooseUser = props => {
|
const ChooseUser = props => {
|
||||||
|
const { allowNext, request, setRequest } = props;
|
||||||
|
const [searchParams] = useSearchParams(); // 获取URL参数
|
||||||
|
const [autoProcessed, setAutoProcessed] = useState(false); // 防止重复处理
|
||||||
|
const { Title, Text } = Typography;
|
||||||
|
const [messageApi, contextHolder] = message.useMessage();
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const dataFetchRef = useRef(false); // 防止重复请求
|
||||||
|
const commonAxios = creatMessageCommonAxios(messageApi);
|
||||||
|
// 初始加载标记
|
||||||
|
const [isInitialLoad, setIsInitialLoad] = useState(true);
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: 'ID',
|
||||||
|
dataIndex: 'id',
|
||||||
|
key: 'id',
|
||||||
|
hidden: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '工号',
|
||||||
|
dataIndex: 'staffNumber',
|
||||||
|
width: 150
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '姓名',
|
||||||
|
dataIndex: 'name',
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '学院',
|
||||||
|
dataIndex: 'college',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '系别',
|
||||||
|
dataIndex: 'department',
|
||||||
|
width: 300
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const {allowNext, request, setRequest} = props;
|
const [staffInfo, setStaffInfo] = useState([]);
|
||||||
|
const [staffNumberPrefix, setStaffNumberPrefix] = useState("");
|
||||||
|
const [spinning, setSpinning] = useState(true);
|
||||||
|
|
||||||
const {Title, Text} = Typography;
|
// 处理选中行逻辑
|
||||||
const [messageApi, contextHolder] = message.useMessage();
|
const handleRowSelect = (selectedRowKeys, selectedRows) => {
|
||||||
const [form] = Form.useForm();
|
console.log(`选中行: ${selectedRowKeys}`, selectedRows);
|
||||||
|
allowNext(selectedRows.length > 0);
|
||||||
|
if (selectedRows.length > 0) {
|
||||||
|
setRequest({ ...request, stuffNumber: selectedRows[0].staffNumber });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const commonAxios = creatMessageCommonAxios(messageApi);
|
const rowSelection = {
|
||||||
|
onChange: handleRowSelect,
|
||||||
|
defaultSelectedRowKeys: () => [],
|
||||||
|
};
|
||||||
|
|
||||||
const columns = [
|
// 通用搜索函数
|
||||||
{
|
const fetchStaffData = (staffNumber) => {
|
||||||
title: 'ID',
|
if (dataFetchRef.current) return;
|
||||||
dataIndex: 'id',
|
dataFetchRef.current = true;
|
||||||
key: 'id',
|
|
||||||
hidden: true,
|
|
||||||
width: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '工号',
|
|
||||||
dataIndex: 'staffNumber',
|
|
||||||
width: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '姓名',
|
|
||||||
dataIndex: 'name',
|
|
||||||
width: 200
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '学院',
|
|
||||||
dataIndex: 'college',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '系别',
|
|
||||||
dataIndex: 'department',
|
|
||||||
width: 300
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const [staffInfo, setStaffInfo] = React.useState([]);
|
setSpinning(true);
|
||||||
|
// 仅在有工号时才拼接参数，否则查询全部
|
||||||
const [staffNumberPrefix, setStaffNumberPrefix] = React.useState("");
|
const params = staffNumber ? `&staffNumber=${staffNumber}` : '';
|
||||||
const [spinning, setSpinning] = React.useState(true);
|
commonAxios.get(`/api/auth/query/registered?page=1&size=10${params}`)
|
||||||
|
.then((response) => {
|
||||||
const rowSelection = {
|
if (response.data.data?.list) {
|
||||||
onChange: (selectedRowKeys, selectedRows) => {
|
const list = response.data.data.list.map(item => ({ ...item, key: item.id }));
|
||||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
setStaffInfo(list);
|
||||||
allowNext(selectedRows.length > 0);
|
return list;
|
||||||
setRequest({...request, stuffNumber: selectedRows[0].staffNumber});
|
} else {
|
||||||
//sessionStorage.setItem('chooseUser', selectedRowKeys)
|
setStaffInfo([]);
|
||||||
//sessionStorage.removeItem('certificateParam');
|
return [];
|
||||||
//sessionStorage.removeItem('targetKeys');
|
}
|
||||||
//sessionStorage.removeItem('generate-request');
|
})
|
||||||
},
|
.then((list) => {
|
||||||
//defaultSelectedRowKeys: () => {
|
const fromPrint = searchParams.get('from') === 'print';
|
||||||
// const selectedRowKeys = [];
|
if (fromPrint && list.length === 1 && !autoProcessed) {
|
||||||
// let selected = sessionStorage.getItem('chooseUser');
|
handleRowSelect([list[0].id], [list[0]]);
|
||||||
// if (selected) {
|
setAutoProcessed(true);
|
||||||
// // 转换为number
|
}
|
||||||
// selectedRowKeys.push(selected);
|
})
|
||||||
// allowNext(selectedRowKeys.length > 0);
|
.catch(() => {
|
||||||
// }
|
messageApi.error('搜索失败，请重试');
|
||||||
// return selectedRowKeys;
|
setStaffInfo([]);
|
||||||
//}
|
})
|
||||||
// 移除默认选中行的缓存恢复
|
.finally(() => {
|
||||||
defaultSelectedRowKeys: () => [],
|
setSpinning(false);
|
||||||
|
dataFetchRef.current = false;
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 监听URL参数（从打印界面跳转时处理）
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
commonAxios.get(`/api/auth/query/registered?page=1&size=10`).then((response) => {
|
const staffNumber = searchParams.get('staffNumber');
|
||||||
if (response.data.data != null) {
|
const fromPrint = searchParams.get('from') === 'print'; // 标记来自打印界面
|
||||||
let list = response.data.data.list;
|
|
||||||
// 为list设置key=id
|
|
||||||
list.forEach((item) => {
|
|
||||||
item.key = item.id;
|
|
||||||
});
|
|
||||||
setStaffInfo(list);
|
|
||||||
} else {
|
|
||||||
setStaffInfo([]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
setSpinning(false);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
|
// 优先处理：如果有工号参数且来自打印界面，执行搜索
|
||||||
|
if (staffNumber && fromPrint && !autoProcessed) {
|
||||||
|
form.setFieldsValue({ 'staff-number': staffNumber });
|
||||||
|
setStaffNumberPrefix(staffNumber);
|
||||||
|
fetchStaffData(staffNumber);
|
||||||
|
setIsInitialLoad(false); // 已处理参数，无需再加载全部
|
||||||
|
}
|
||||||
|
// 次要处理：无参数时，初始加载全部数据（仅执行一次）
|
||||||
|
else if (isInitialLoad) {
|
||||||
|
fetchStaffData(''); // 空参数表示查询全部
|
||||||
|
setIsInitialLoad(false);
|
||||||
|
}
|
||||||
|
}, [searchParams, form, autoProcessed, isInitialLoad]); // 添加isInitialLoad依赖
|
||||||
|
|
||||||
|
// 手动搜索
|
||||||
const onSearch = () => {
|
const onSearch = () => {
|
||||||
setSpinning(true);
|
fetchStaffData(staffNumberPrefix);
|
||||||
commonAxios.get(`/api/auth/query/registered?staffNumber=${staffNumberPrefix}&page=1&size=10`).then((response) => {
|
};
|
||||||
if (response.data.data != null) {
|
|
||||||
let list = response.data.data.list;
|
|
||||||
// 为list设置key=id
|
|
||||||
list.forEach((item) => {
|
|
||||||
item.key = item.id;
|
|
||||||
});
|
|
||||||
setStaffInfo(list);
|
|
||||||
} else {
|
|
||||||
setStaffInfo([]);
|
|
||||||
}
|
|
||||||
setSpinning(false);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{contextHolder}
|
return (
|
||||||
<Flex vertical justiffy={"start"} align={"start"} gap={"large"}>
|
<div>
|
||||||
<div>
|
{contextHolder}
|
||||||
<Title level={4}>选择用户</Title>
|
<Flex vertical justify={"start"} align={"start"} gap={"large"}>
|
||||||
<Text level={4}
|
<div>
|
||||||
type={'secondary'}>指示EFC系统为何人生成报告，选择后这份报告将会出现在您和该同事的EFC系统证明管理画面中。</Text>
|
<Title level={4}>选择用户</Title>
|
||||||
</div>
|
<Text type={'secondary'}>
|
||||||
<Form
|
指示EFC系统为何人生成报告，选择后这份报告将会出现在您和该同事的EFC系统证明管理画面中。
|
||||||
form={form}
|
</Text>
|
||||||
layout={"inline"}
|
</div>
|
||||||
>
|
<Form form={form} layout={"inline"}>
|
||||||
<Form.Item
|
<Form.Item name='staff-number'>
|
||||||
name='staff-number'
|
<Input
|
||||||
>
|
placeholder={"工号"}
|
||||||
<Input placeholder={"工号"} onChange={(event) => setStaffNumberPrefix(event.target.value)}/>
|
onChange={(e) => setStaffNumberPrefix(e.target.value)}
|
||||||
</Form.Item>
|
onPressEnter={onSearch} // 支持回车搜索
|
||||||
<Button type={"primary"} onClick={() => onSearch()}>搜索</Button>
|
/>
|
||||||
</Form>
|
</Form.Item>
|
||||||
<div style={{width: '100%'}}>
|
<Button type={"primary"} onClick={onSearch}>搜索</Button>
|
||||||
<Spin spinning={spinning}>
|
</Form>
|
||||||
<Table
|
<div style={{ width: '100%' }}>
|
||||||
columns={columns}
|
<Spin spinning={spinning}>
|
||||||
dataSource={staffInfo}
|
<Table
|
||||||
pagination={false}
|
columns={columns}
|
||||||
rowSelection={{
|
dataSource={staffInfo}
|
||||||
type: 'radio',
|
pagination={false}
|
||||||
...rowSelection,
|
rowSelection={{ type: 'radio', ...rowSelection }}
|
||||||
}}
|
locale={{ emptyText: '暂无数据，请输入工号搜索' }}
|
||||||
/>
|
/>
|
||||||
</Spin>
|
</Spin>
|
||||||
</div>
|
</div>
|
||||||
</Flex>
|
</Flex>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
;
|
};
|
||||||
}
|
|
||||||
;
|
|
||||||
|
|
||||||
ChooseUser.propTypes = {};
|
ChooseUser.propTypes = {};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user