diff --git a/apps/web/src/app/main/devicepage/page.tsx b/apps/web/src/app/main/devicepage/page.tsx
index 9cef5e2..f475f06 100755
--- a/apps/web/src/app/main/devicepage/page.tsx
+++ b/apps/web/src/app/main/devicepage/page.tsx
@@ -1,5 +1,16 @@
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { Button, DatePicker, Form, Input, Modal, Select } from "antd";
+import {
+ Button,
+ DatePicker,
+ Form,
+ Input,
+ Modal,
+ Select,
+ AutoComplete,
+ Tag,
+ Dropdown,
+ Space,
+} from "antd";
import { useCallback, useEffect, useState, useRef } from "react";
import _ from "lodash";
import { useMainContext } from "../layout/MainProvider";
@@ -14,13 +25,18 @@ import {
ExportOutlined,
UpOutlined,
DownOutlined,
+ HistoryOutlined,
+ CloseOutlined,
} 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;
+
// 添加筛选条件类型
type SearchCondition = {
deletedAt: null;
@@ -34,6 +50,15 @@ type SearchCondition = {
};
};
+// 搜索历史类型
+type SearchHistory = {
+ id: string;
+ keyword: string;
+ conditions: SearchCondition;
+ timestamp: number;
+ label: string; // 用于显示的标签
+};
+
export default function DeviceMessage() {
const {
form,
@@ -43,15 +68,20 @@ export default function DeviceMessage() {
setSearchValue,
editingRecord,
} = useMainContext();
+
// 控制展开/收起状态
const [expanded, setExpanded] = useState(false);
+
// 添加所有筛选条件的状态
const [selectedSystem, setSelectedSystem] = useState
(null);
const [selectedDeviceType, setSelectedDeviceType] = useState(
null
);
const [selectedDept, setSelectedDept] = useState(null);
- const [time, setTime] = useState("");
+ // 修改为日期范围
+ const [dateRange, setDateRange] = useState<
+ [dayjs.Dayjs | null, dayjs.Dayjs | null] | null
+ >(null);
const [ipAddress, setIpAddress] = useState("");
const [macAddress, setMacAddress] = useState("");
const [serialNumber, setSerialNumber] = useState("");
@@ -63,19 +93,156 @@ export default function DeviceMessage() {
const [selectedSystemTypeId, setSelectedSystemTypeId] = useState("");
const [selectedFixType, setSelectedFixType] = useState(null);
+ // 搜索历史相关状态
+ const [searchHistory, setSearchHistory] = useState([]);
+ const [searchKeyword, setSearchKeyword] = useState("");
+ const [showHistory, setShowHistory] = useState(false);
+
// 创建ref以访问DeviceTable内部方法
const tableRef = useRef(null);
// 存储选中行的状态
const [selectedKeys, setSelectedKeys] = useState([]);
const [selectedData, setSelectedData] = useState([]);
+ // 添加数据查询以获取名称信息
+ 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 = {
@@ -84,29 +251,37 @@ export default function DeviceMessage() {
...(selectedDeviceType && { deviceType: selectedDeviceType }),
...(selectedFixType && { deviceStatus: selectedFixType }),
...(selectedDept && { deptId: selectedDept }),
- ...(time && {
- createdAt: {
- gte: dayjs(time).startOf("day").toISOString(),
- lte: dayjs(time).endOf("day").toISOString(),
- },
+ ...(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 } },
+ ],
}),
-
- // ...(status && { status: { contains: status } }),
};
+ // 添加到搜索历史
+ addSearchHistory(whereCondition, searchKeyword);
+
// 更新查询条件到全局上下文
setSearchValue(whereCondition as any);
-
- // 也可以直接使用refetch方法进行刷新，确保查询条件生效
- // 如果DeviceTable组件暴露了refetch方法，可以通过ref调用
};
- // 重置按钮处理
+ // 重置按钮处理 - 修改为重置日期范围
const handleReset = () => {
setSelectedSystem(null);
setSelectedDeviceType(null);
setSelectedDept(null);
- setTime("");
+ setDateRange(null); // 重置日期范围
+ setSearchKeyword("");
setIpAddress("");
setMacAddress("");
setSerialNumber("");
@@ -114,6 +289,7 @@ export default function DeviceMessage() {
setManufacturer("");
setModel("");
setLocation("");
+ saveSearchHistory([]);
// 重置为只查询未删除的记录
setSearchValue({ deletedAt: null } as any);
@@ -144,14 +320,85 @@ export default function DeviceMessage() {
form.setFieldValue("deviceType", undefined); // 清空已选故障类型
};
+ // 搜索历史下拉菜单
+ const historyMenuItems = [
+ {
+ key: "header",
+ label: (
+
+ 搜索历史
+ {searchHistory.length > 0 && (
+
+ )}
+
+ ),
+ disabled: true,
+ },
+ ...searchHistory.map((history) => ({
+ key: history.id,
+ label: (
+ applyHistorySearch(history)}
+ >
+
+
{history.label}
+
+ {dayjs(history.timestamp).format("MM-DD HH:mm")}
+
+
+
}
+ onClick={(e) => removeSearchHistory(history.id, e)}
+ className="ml-2 opacity-60 hover:opacity-100"
+ />
+
暂无搜索历史
+ ),
+ disabled: true,
+ },
+ ]
+ : []),
+ ];
+
return (
故障收录检索
-
} onClick={handleNew}>
- 新建
-
+
+
+ } title="搜索历史">
+ 历史
+
+
+ } onClick={handleNew}>
+ 新建
+
+
+
-
-
+ setTime(dateString as string)}
+ value={dateRange}
+ onChange={(dates) => setDateRange(dates)}
format="YYYY-MM-DD"
allowClear
/>
@@ -203,6 +450,36 @@ export default function DeviceMessage() {
重置
+
+ {/* 显示当前搜索历史标签 */}
+ {searchHistory.length > 0 && (
+
+
+ 最近搜索:
+
+
+ {searchHistory.slice(0, 5).map((history) => (
+ applyHistorySearch(history)}
+ closable
+ onClose={(e) => {
+ e.preventDefault();
+ removeSearchHistory(history.id, e as any);
+ }}
+ >
+
+ {history.label.length > 25
+ ? `${history.label.substring(0, 25)}...`
+ : history.label}
+
+
+ ))}
+
+
+ )}
+
diff --git a/apps/web/src/app/main/devicepage/select/Device-manager.tsx b/apps/web/src/app/main/devicepage/select/Device-manager.tsx
index e429664..ef2bdd5 100755
--- a/apps/web/src/app/main/devicepage/select/Device-manager.tsx
+++ b/apps/web/src/app/main/devicepage/select/Device-manager.tsx
@@ -1,10 +1,31 @@
// apps/web/src/components/models/term/term-manager.tsx
-import { Button, Input, Modal, Space, Table, TreeSelect, Select } from "antd";
+import {
+ Button,
+ Input,
+ Modal,
+ Space,
+ Table,
+ TreeSelect,
+ Select,
+ Card,
+ Row,
+ Col,
+ Typography,
+ Divider,
+} from "antd";
import { api } from "@nice/client";
import { useState, useEffect } from "react";
-import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
+import {
+ PlusOutlined,
+ EditOutlined,
+ DeleteOutlined,
+ SearchOutlined,
+ FileTextOutlined,
+} from "@ant-design/icons";
import { ObjectType } from "@nice/common";
+const { Title } = Typography;
+
interface TermManagerProps {
title: string;
}
@@ -18,6 +39,10 @@ export default function DeviceManager({ title }: TermManagerProps) {
const [searchValue, setSearchValue] = useState("");
const [treeData, setTreeData] = useState
([]);
const [taxonomySelectDisabled, setTaxonomySelectDisabled] = useState(false);
+ const [pageSize, setPageSize] = useState(10);
+ const [currentPage, setCurrentPage] = useState(1);
+
+ // ... 保持原有的 API 调用和逻辑 ...
// 获取所有taxonomy
const { data: taxonomies } = api.taxonomy.getAll.useQuery({
@@ -25,7 +50,7 @@ export default function DeviceManager({ title }: TermManagerProps) {
});
// 获取所有故障类型taxonomy
- // 故障网系类别taxonomy
+ // 故障网系类别taxonomy
const { data: systemTypeTaxonomy } = api.taxonomy.findBySlug.useQuery({
slug: "system_type",
});
@@ -61,6 +86,15 @@ export default function DeviceManager({ title }: TermManagerProps) {
orderBy: { order: "asc" },
});
+ const handlePageChange = (page: number, size: number) => {
+ setCurrentPage(page);
+ setPageSize(size);
+ };
+
+ const handlePageSizeChange = (current: number, size: number) => {
+ setCurrentPage(1); // 重置到第一页
+ setPageSize(size);
+ };
// 构建包含两种分类的树形数据
useEffect(() => {
if (systemTypeTerms && deviceTypeTerms) {
@@ -186,7 +220,6 @@ export default function DeviceManager({ title }: TermManagerProps) {
});
// 操作处理函数
- // 修改handleAdd函数
const handleAdd = (parentRecord?: any) => {
setEditingTerm(null);
setTermName("");
@@ -213,10 +246,6 @@ export default function DeviceManager({ title }: TermManagerProps) {
setIsModalVisible(true);
};
-
-
-
-
const handleEdit = (term: any) => {
setEditingTerm(term);
setTermName(term.name);
@@ -329,152 +358,272 @@ export default function DeviceManager({ title }: TermManagerProps) {
};
return (
-
-
- handleSearch(e.target.value)}
- value={searchValue}
- style={{ width: 400 }}
- allowClear
- />
- }
- onClick={() => handleAdd()}
- >
- 添加顶级{title}
-
-
-
-
{
- if (record.taxonomyId === systemTypeTaxonomy?.id) {
- return "网系类别";
- } else if (record.taxonomyId === deviceTypeTaxonomy?.id) {
- return "故障类型";
- } else {
- return "具体故障";
- }
- },
- },
- {
- title: "操作",
- key: "action",
- width: 200,
- render: (_, record: any) => (
+
+ {/* 主要内容卡片 */}
+
+ {/* 统计信息区域 */}
+
+
+
+
+
+ {systemTypeTerms?.length || 0}
+
+
网系类别
+
+
+ {deviceTypeTerms?.filter((term) =>
+ systemTypeTerms?.some(
+ (sysType) => sysType.id === term.parentId
+ )
+ ).length || 0}
+
+
故障类型
+
*/}
+ {/*
+ {deviceTypeTerms?.filter(term =>
+ !systemTypeTerms?.some(sysType => sysType.id === term.parentId) &&
+ deviceTypeTerms?.some(devType => devType.id === term.parentId)
+ ).length || 0}
+
+
具体故障
*/}
+ {/*
+
+
+
+ handleSearch(e.target.value)}
+ value={searchValue}
+ allowClear
+ prefix={}
+ className="w-full"
+ size="middle"
+ />
+
+
}
- onClick={() => handleAdd(record)}
- style={{ color: "green" }}
+ onClick={() => handleAdd()}
+ size="middle"
+ className="shadow-sm"
>
- 添加子项
+ 添加{title}
- }
- onClick={() => handleEdit(record)}
- style={{ color: "#1890ff" }}
- />
- }
- onClick={() => handleDelete(record)}
- />
- ),
- },
- ]}
- rowKey="id"
- pagination={false}
- rowClassName={(record, index) =>
- index % 2 === 0 ? "bg-white" : "bg-gray-100"
- }
- onHeaderRow={() => {
- return {
- style: {
- backgroundColor: "#d6e4ff",
- },
- };
- }}
- bordered
- size="middle"
- locale={{ emptyText: "暂无数据" }}
- />
+
+
+
+
+
+ {/* 表格区域 */}
+
+
(
+
+ {/* 根据层级添加不同的图标 */}
+ {record.taxonomyId === systemTypeTaxonomy?.id ? (
+ 📁
+ ) : record.taxonomyId === deviceTypeTaxonomy?.id ? (
+ 📂
+ ) : (
+ 📄
+ )}
+ {text}
+
+ ),
+ },
+ {
+ title: "分类类型",
+ key: "taxonomyType",
+ width: "25%",
+ render: (_, record) => {
+ if (record.taxonomyId === systemTypeTaxonomy?.id) {
+ return (
+
+ 网系类别
+
+ );
+ } else if (record.taxonomyId === deviceTypeTaxonomy?.id) {
+ return (
+
+ 故障类型
+
+ );
+ } else {
+ return (
+
+ 具体故障
+
+ );
+ }
+ },
+ },
+ {
+ title: "操作",
+ key: "action",
+ width: "25%",
+ render: (_, record: any) => (
+
+ }
+ onClick={() => handleAdd(record)}
+ className="text-green-600 hover:text-green-700 hover:bg-green-50"
+ size="small"
+ title="添加子项"
+ />
+ }
+ onClick={() => handleEdit(record)}
+ className="text-blue-600 hover:text-blue-700 hover:bg-blue-50"
+ size="small"
+ title="编辑"
+ />
+ }
+ onClick={() => handleDelete(record)}
+ size="small"
+ title="删除"
+ className="hover:bg-red-50"
+ />
+
+ ),
+ },
+ ]}
+ rowKey="id"
+ pagination={{
+ pageSize: pageSize, // 每页显示数量
+ current: currentPage,
+ showSizeChanger: true,
+ showQuickJumper: true,
+ showTotal: (total) => `共 ${total} 条记录`,
+ pageSizeOptions: [ "10", "15", "20"],
+ onChange: handlePageChange,
+ onShowSizeChange: handlePageSizeChange,
+ }}
+ rowClassName={(record, index) =>
+ `hover:bg-blue-50 transition-colors duration-200 ${
+ record.taxonomyId === systemTypeTaxonomy?.id
+ ? "bg-blue-25"
+ : record.taxonomyId === deviceTypeTaxonomy?.id
+ ? "bg-green-25"
+ : "bg-orange-25"
+ }`
+ }
+ onHeaderRow={() => ({
+ style: {
+ backgroundColor: "#f8fafc",
+ fontWeight: "600",
+ borderBottom: "2px solid #e2e8f0",
+ },
+ })}
+ bordered={true} // 改为有边框
+ size="middle"
+ locale={{ emptyText: "暂无数据" }}
+ className="rounded-lg overflow-hidden shadow-sm"
+ showHeader={true}
+ scroll={{ x: 800 }} // 添加横向滚动
+ />
+
+
+
+ {/* 编辑/添加模态框 */}
+ {editingTerm ? : }
+ {editingTerm ? `编辑${title}` : `添加${title}`}
+
+ }
open={isModalVisible}
onOk={handleSave}
onCancel={() => setIsModalVisible(false)}
+ okText="保存"
+ cancelText="取消"
+ width={600}
+ destroyOnClose
>
-
-
- setTermName(e.target.value)}
- />
-
+
- {!editingTerm && (
-
-