583 lines
18 KiB
TypeScript
Executable File
583 lines
18 KiB
TypeScript
Executable File
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
|
||
import {
|
||
Button,
|
||
DatePicker,
|
||
Form,
|
||
Input,
|
||
Modal,
|
||
Select,
|
||
AutoComplete,
|
||
Tag,
|
||
Dropdown,
|
||
Space,
|
||
Card,
|
||
Row,
|
||
Col,
|
||
Typography,
|
||
} from "antd";
|
||
import { useCallback, useEffect, useState, useRef } from "react";
|
||
import _ from "lodash";
|
||
import { useMainContext } from "../layout/MainProvider";
|
||
import DeviceTable from "./devicetable/page";
|
||
import DeviceModal from "./devicemodal/page";
|
||
import React from "react";
|
||
import {
|
||
SearchOutlined,
|
||
ReloadOutlined,
|
||
PlusOutlined,
|
||
ImportOutlined,
|
||
ExportOutlined,
|
||
UpOutlined,
|
||
DownOutlined,
|
||
HistoryOutlined,
|
||
CloseOutlined,
|
||
FilterOutlined,
|
||
DatabaseOutlined,
|
||
} from "@ant-design/icons";
|
||
import DepartmentSelect from "@web/src/components/models/department/department-select";
|
||
import SystemTypeSelect from "@web/src/app/main/devicepage/select/System-select";
|
||
import DeviceTypeSelect from "@web/src/app/main/devicepage/select/Device-select";
|
||
import dayjs from "dayjs";
|
||
import FixTypeSelect from "./select/Fix-select";
|
||
import { api } from "@nice/client";
|
||
|
||
const { RangePicker } = DatePicker;
|
||
const { Title } = Typography;
|
||
// 添加筛选条件类型
|
||
type SearchCondition = {
|
||
deletedAt: null;
|
||
systemType?: string;
|
||
deviceType?: string;
|
||
deptId?: string;
|
||
responsiblePerson?: { contains: string };
|
||
createdAt?: {
|
||
gte: string;
|
||
lte: string;
|
||
};
|
||
};
|
||
|
||
// 搜索历史类型
|
||
type SearchHistory = {
|
||
id: string;
|
||
keyword: string;
|
||
conditions: SearchCondition;
|
||
timestamp: number;
|
||
label: string; // 用于显示的标签
|
||
};
|
||
|
||
export default function DeviceMessage() {
|
||
const {
|
||
form,
|
||
formValue,
|
||
setFormValue,
|
||
setVisible,
|
||
setSearchValue,
|
||
editingRecord,
|
||
} = useMainContext();
|
||
|
||
// 控制展开/收起状态
|
||
const [expanded, setExpanded] = useState(false);
|
||
|
||
// 添加所有筛选条件的状态
|
||
const [selectedSystem, setSelectedSystem] = useState<string | null>(null);
|
||
const [selectedDeviceType, setSelectedDeviceType] = useState<string | null>(
|
||
null
|
||
);
|
||
const [selectedDept, setSelectedDept] = useState<string | null>(null);
|
||
// 修改为日期范围
|
||
const [dateRange, setDateRange] = useState<
|
||
[dayjs.Dayjs | null, dayjs.Dayjs | null] | null
|
||
>(null);
|
||
const [ipAddress, setIpAddress] = useState<string>("");
|
||
const [macAddress, setMacAddress] = useState<string>("");
|
||
const [serialNumber, setSerialNumber] = useState<string>("");
|
||
const [assetNumber, setAssetNumber] = useState<string>("");
|
||
const [manufacturer, setManufacturer] = useState<string>("");
|
||
const [model, setModel] = useState<string>("");
|
||
const [location, setLocation] = useState<string>("");
|
||
const [status, setStatus] = useState<string | null>(null);
|
||
const [selectedSystemTypeId, setSelectedSystemTypeId] = useState<string>("");
|
||
const [selectedFixType, setSelectedFixType] = useState<string | null>(null);
|
||
|
||
// 搜索历史相关状态
|
||
const [searchHistory, setSearchHistory] = useState<SearchHistory[]>([]);
|
||
const [searchKeyword, setSearchKeyword] = useState<string>("");
|
||
const [showHistory, setShowHistory] = useState(false);
|
||
|
||
// 创建ref以访问DeviceTable内部方法
|
||
const tableRef = useRef(null);
|
||
// 存储选中行的状态
|
||
const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
|
||
const [selectedData, setSelectedData] = useState<any[]>([]);
|
||
|
||
// 添加数据查询以获取名称信息
|
||
const { data: systemTypeTerms } = api.term.findMany.useQuery({
|
||
where: { taxonomy: { slug: "system_type" }, deletedAt: null },
|
||
orderBy: { order: "asc" },
|
||
});
|
||
|
||
const { data: deviceTypeTerms } = api.term.findMany.useQuery({
|
||
where: { taxonomy: { slug: "device_type" }, deletedAt: null },
|
||
orderBy: { order: "asc" },
|
||
});
|
||
|
||
const { data: departments } = api.department.findMany.useQuery({
|
||
where: { deletedAt: null },
|
||
});
|
||
|
||
// 根据ID获取名称的辅助函数
|
||
const getSystemTypeName = (id: string) => {
|
||
const term = systemTypeTerms?.find((t) => t.id === id);
|
||
return term?.name || id;
|
||
};
|
||
|
||
const getDeviceTypeName = (id: string) => {
|
||
const term = deviceTypeTerms?.find((t) => t.id === id);
|
||
return term?.name || id;
|
||
};
|
||
|
||
const getDepartmentName = (id: string) => {
|
||
const dept = departments?.find((d) => d.id === id);
|
||
return dept?.name || id;
|
||
};
|
||
|
||
// 初始化时加载搜索历史
|
||
useEffect(() => {
|
||
const savedHistory = localStorage.getItem("device-search-history");
|
||
if (savedHistory) {
|
||
try {
|
||
setSearchHistory(JSON.parse(savedHistory));
|
||
} catch (error) {
|
||
console.error("加载搜索历史失败:", error);
|
||
}
|
||
}
|
||
}, []);
|
||
|
||
// 保存搜索历史到localStorage
|
||
const saveSearchHistory = (history: SearchHistory[]) => {
|
||
localStorage.setItem("device-search-history", JSON.stringify(history));
|
||
setSearchHistory(history);
|
||
};
|
||
|
||
// 生成搜索标签 - 修改为显示名称而不是ID，并支持日期范围
|
||
const generateSearchLabel = (
|
||
conditions: SearchCondition,
|
||
keyword: string
|
||
) => {
|
||
const parts = [];
|
||
if (keyword) parts.push(`关键词: ${keyword}`);
|
||
if (conditions.systemType)
|
||
parts.push(`网系: ${getSystemTypeName(conditions.systemType)}`);
|
||
if (conditions.deviceType)
|
||
parts.push(`故障类型: ${getDeviceTypeName(conditions.deviceType)}`);
|
||
if (conditions.deptId)
|
||
parts.push(`单位: ${getDepartmentName(conditions.deptId)}`);
|
||
if (conditions.createdAt) {
|
||
const startDate = dayjs(conditions.createdAt.gte).format("YYYY-MM-DD");
|
||
const endDate = dayjs(conditions.createdAt.lte).format("YYYY-MM-DD");
|
||
if (startDate === endDate) {
|
||
parts.push(`日期: ${startDate}`);
|
||
} else {
|
||
parts.push(`日期: ${startDate} ~ ${endDate}`);
|
||
}
|
||
}
|
||
|
||
return parts.length > 0 ? parts.join(" | ") : "全部故障";
|
||
};
|
||
|
||
// 添加搜索历史
|
||
const addSearchHistory = (
|
||
conditions: SearchCondition,
|
||
keyword: string = ""
|
||
) => {
|
||
const newHistory: SearchHistory = {
|
||
id: Date.now().toString(),
|
||
keyword,
|
||
conditions,
|
||
timestamp: Date.now(),
|
||
label: generateSearchLabel(conditions, keyword),
|
||
};
|
||
|
||
const updatedHistory = [
|
||
newHistory,
|
||
...searchHistory.filter((h) => h.label !== newHistory.label),
|
||
].slice(0, 10); // 只保留最近10条
|
||
|
||
saveSearchHistory(updatedHistory);
|
||
};
|
||
|
||
// 应用历史搜索 - 修改为支持日期范围
|
||
const applyHistorySearch = (history: SearchHistory) => {
|
||
const { conditions, keyword } = history;
|
||
|
||
// 恢复搜索条件
|
||
setSelectedSystem(conditions.systemType || null);
|
||
setSelectedDeviceType(conditions.deviceType || null);
|
||
setSelectedDept(conditions.deptId || null);
|
||
setSelectedFixType(conditions.responsiblePerson?.contains || null);
|
||
setSearchKeyword(keyword);
|
||
|
||
if (conditions.createdAt) {
|
||
const startDate = dayjs(conditions.createdAt.gte);
|
||
const endDate = dayjs(conditions.createdAt.lte);
|
||
setDateRange([startDate, endDate]);
|
||
} else {
|
||
setDateRange(null);
|
||
}
|
||
|
||
// 应用搜索条件
|
||
setSearchValue(conditions as any);
|
||
setShowHistory(false);
|
||
};
|
||
|
||
// 删除搜索历史
|
||
const removeSearchHistory = (historyId: string, event: React.MouseEvent) => {
|
||
event.stopPropagation();
|
||
const updatedHistory = searchHistory.filter((h) => h.id !== historyId);
|
||
saveSearchHistory(updatedHistory);
|
||
};
|
||
|
||
// 清空所有搜索历史
|
||
const clearAllHistory = () => {
|
||
saveSearchHistory([]);
|
||
};
|
||
|
||
const handleNew = () => {
|
||
form.setFieldsValue(formValue);
|
||
console.log(editingRecord);
|
||
setVisible(true);
|
||
};
|
||
|
||
// 查询按钮点击处理 - 修改为支持日期范围
|
||
const handleSearch = () => {
|
||
// 构建查询条件
|
||
const whereCondition: SearchCondition = {
|
||
deletedAt: null,
|
||
...(selectedSystem && { systemType: selectedSystem }),
|
||
...(selectedDeviceType && { deviceType: selectedDeviceType }),
|
||
...(selectedFixType && { deviceStatus: selectedFixType }),
|
||
...(selectedDept && { deptId: selectedDept }),
|
||
...(dateRange &&
|
||
dateRange[0] &&
|
||
dateRange[1] && {
|
||
createdAt: {
|
||
gte: dateRange[0].startOf("day").toISOString(),
|
||
lte: dateRange[1].endOf("day").toISOString(),
|
||
},
|
||
}),
|
||
...(searchKeyword && {
|
||
OR: [
|
||
{ description: { contains: searchKeyword } },
|
||
{ location: { contains: searchKeyword } },
|
||
{ responsiblePerson: { contains: searchKeyword } },
|
||
],
|
||
}),
|
||
};
|
||
|
||
// 添加到搜索历史
|
||
addSearchHistory(whereCondition, searchKeyword);
|
||
|
||
// 更新查询条件到全局上下文
|
||
setSearchValue(whereCondition as any);
|
||
};
|
||
|
||
// 重置按钮处理 - 修改为重置日期范围
|
||
const handleReset = () => {
|
||
setSelectedSystem(null);
|
||
setSelectedDeviceType(null);
|
||
setSelectedDept(null);
|
||
setDateRange(null); // 重置日期范围
|
||
setSearchKeyword("");
|
||
setIpAddress("");
|
||
setMacAddress("");
|
||
setSerialNumber("");
|
||
setAssetNumber("");
|
||
setManufacturer("");
|
||
setModel("");
|
||
setLocation("");
|
||
saveSearchHistory([]);
|
||
|
||
// 重置为只查询未删除的记录
|
||
setSearchValue({ deletedAt: null } as any);
|
||
};
|
||
|
||
// 修复DepartmentSelect的onChange类型
|
||
const handleDeptChange = (value: string | string[]) => {
|
||
setSelectedDept(value as string);
|
||
};
|
||
|
||
// 处理选择变更的回调
|
||
const handleSelectedChange = (keys: React.Key[], data: any[]) => {
|
||
console.log("选中状态变化:", keys.length);
|
||
setSelectedKeys(keys);
|
||
setSelectedData(data);
|
||
};
|
||
|
||
// 处理导出按钮点击
|
||
const handleExport = () => {
|
||
if (tableRef.current) {
|
||
tableRef.current.handleExportSelected();
|
||
}
|
||
};
|
||
|
||
// 系统类别变化处理
|
||
const handleSystemTypeChange = (value: string) => {
|
||
setSelectedSystemTypeId(value);
|
||
form.setFieldValue("deviceType", undefined); // 清空已选故障类型
|
||
};
|
||
|
||
// 搜索历史下拉菜单
|
||
const historyMenuItems = [
|
||
{
|
||
key: "header",
|
||
label: (
|
||
<div className="flex justify-between items-center p-2 border-b">
|
||
<span className="font-medium">搜索历史</span>
|
||
{searchHistory.length > 0 && (
|
||
<Button
|
||
type="link"
|
||
size="small"
|
||
onClick={clearAllHistory}
|
||
className="text-red-500"
|
||
>
|
||
清空全部
|
||
</Button>
|
||
)}
|
||
</div>
|
||
),
|
||
disabled: true,
|
||
},
|
||
...searchHistory.map((history) => ({
|
||
key: history.id,
|
||
label: (
|
||
<div
|
||
className="flex justify-between items-center p-2 hover:bg-gray-50 cursor-pointer"
|
||
onClick={() => applyHistorySearch(history)}
|
||
>
|
||
<div className="flex-1">
|
||
<div className="text-sm font-medium truncate">{history.label}</div>
|
||
<div className="text-xs text-gray-500">
|
||
{dayjs(history.timestamp).format("MM-DD HH:mm")}
|
||
</div>
|
||
</div>
|
||
<Button
|
||
type="text"
|
||
size="small"
|
||
icon={<CloseOutlined />}
|
||
onClick={(e) => removeSearchHistory(history.id, e)}
|
||
className="ml-2 opacity-60 hover:opacity-100"
|
||
/>
|
||
</div>
|
||
),
|
||
})),
|
||
...(searchHistory.length === 0
|
||
? [
|
||
{
|
||
key: "empty",
|
||
label: (
|
||
<div className="text-center text-gray-500 p-4">暂无搜索历史</div>
|
||
),
|
||
disabled: true,
|
||
},
|
||
]
|
||
: []),
|
||
];
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 p-4">
|
||
{/* 页面标题区域 */}
|
||
<div className="mb-6">
|
||
<Card className="shadow-sm border border-gray-200">
|
||
<div className="flex justify-between items-center">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
|
||
<DatabaseOutlined className="text-lg text-white" />
|
||
</div>
|
||
<div>
|
||
<Title level={3} className="!mb-0 text-gray-800">
|
||
故障收录检索
|
||
</Title>
|
||
<p className="text-gray-500 text-sm mt-1">
|
||
设备故障信息管理与查询系统
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<Dropdown
|
||
menu={{ items: historyMenuItems }}
|
||
trigger={["click"]}
|
||
open={showHistory}
|
||
onOpenChange={setShowHistory}
|
||
placement="bottomRight"
|
||
>
|
||
<Button
|
||
icon={<HistoryOutlined />}
|
||
className="border-gray-300 hover:border-blue-500 hover:text-blue-600"
|
||
>
|
||
历史
|
||
</Button>
|
||
</Dropdown>
|
||
<Button
|
||
type="primary"
|
||
icon={<PlusOutlined />}
|
||
onClick={handleNew}
|
||
className="bg-blue-600 hover:bg-blue-700 border-blue-600"
|
||
>
|
||
新建故障记录
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 搜索筛选区域 */}
|
||
<Card className="mb-6 shadow-sm border border-gray-200">
|
||
<div className="mb-4">
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<FilterOutlined className="text-gray-600" />
|
||
<span className="font-medium text-gray-700">筛选条件</span>
|
||
</div>
|
||
|
||
<Row gutter={[16, 16]}>
|
||
<Col xs={24} sm={12} md={8} lg={6}>
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium text-gray-600">
|
||
网系类别
|
||
</label>
|
||
<SystemTypeSelect
|
||
value={selectedSystem}
|
||
onChange={(value) => {
|
||
setSelectedSystem(value);
|
||
setSelectedSystemTypeId(value || ""); // 同步更新
|
||
setSelectedDeviceType(null); // 清空故障类型选择
|
||
}}
|
||
placeholder="选择网系类别"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
</Col>
|
||
<Col xs={24} sm={12} md={8} lg={6}>
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium text-gray-600">
|
||
故障类型
|
||
</label>
|
||
<DeviceTypeSelect
|
||
value={selectedDeviceType}
|
||
onChange={setSelectedDeviceType}
|
||
placeholder="选择故障类型"
|
||
className="w-full"
|
||
systemTypeId={selectedSystemTypeId}
|
||
/>
|
||
</div>
|
||
</Col>
|
||
<Col xs={24} sm={12} md={8} lg={6}>
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium text-gray-600">
|
||
故障状态
|
||
</label>
|
||
<FixTypeSelect
|
||
value={selectedFixType}
|
||
onChange={setSelectedFixType}
|
||
placeholder="选择故障状态"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
</Col>
|
||
<Col xs={24} sm={12} md={8} lg={6}>
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium text-gray-600">
|
||
单位
|
||
</label>
|
||
<DepartmentSelect
|
||
placeholder="选择单位"
|
||
className="w-full"
|
||
value={selectedDept}
|
||
onChange={handleDeptChange}
|
||
/>
|
||
</div>
|
||
</Col>
|
||
<Col xs={24} sm={12} md={16} lg={12}>
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium text-gray-600">
|
||
时间范围
|
||
</label>
|
||
<RangePicker
|
||
placeholder={["开始日期", "结束日期"]}
|
||
className="w-full"
|
||
value={dateRange}
|
||
onChange={(dates) => setDateRange(dates)}
|
||
format="YYYY-MM-DD"
|
||
allowClear
|
||
/>
|
||
</div>
|
||
</Col>
|
||
<Col xs={24} sm={12} md={8} lg={6}>
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium text-gray-600 opacity-0">
|
||
操作
|
||
</label>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
type="primary"
|
||
icon={<SearchOutlined />}
|
||
onClick={handleSearch}
|
||
className="bg-blue-600 hover:bg-blue-700 border-blue-600"
|
||
block
|
||
>
|
||
查询
|
||
</Button>
|
||
<Button
|
||
icon={<ReloadOutlined />}
|
||
onClick={handleReset}
|
||
className="border-gray-300 hover:border-gray-400"
|
||
>
|
||
重置
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
|
||
{/* 搜索历史标签 */}
|
||
{searchHistory.length > 0 && (
|
||
<div className="mt-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
|
||
<div className="flex items-center gap-3 mb-3">
|
||
<HistoryOutlined className="text-gray-600" />
|
||
<span className="text-sm font-medium text-gray-700">
|
||
最近搜索
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
{searchHistory.slice(0, 5).map((history) => (
|
||
<Tag
|
||
key={history.id}
|
||
className="cursor-pointer bg-white border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-blue-400 hover:text-blue-600 transition-colors duration-200"
|
||
onClick={() => applyHistorySearch(history)}
|
||
closable
|
||
onClose={(e) => {
|
||
e.preventDefault();
|
||
removeSearchHistory(history.id, e as any);
|
||
}}
|
||
>
|
||
<span className="text-xs">
|
||
{history.label.length > 25
|
||
? `${history.label.substring(0, 25)}...`
|
||
: history.label}
|
||
</span>
|
||
</Tag>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Card>
|
||
|
||
{/* 表格区域 */}
|
||
<Card className="shadow-sm border border-gray-200">
|
||
<DeviceTable ref={tableRef} onSelectedChange={handleSelectedChange} />
|
||
<DeviceModal />
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|