优化Cascader、LeftTree、Select 和 SelectTree

master
LiuJiaNan 2025-11-07 13:58:06 +08:00
parent 0a25e6fe64
commit 807247526e
9 changed files with 37 additions and 2 deletions

View File

@ -19,6 +19,8 @@ export interface BasicCascaderProps extends CascaderProps {
placeholder?: string;
/** 控制只能选择到第几级 */
level?: number;
/** 获取数据 */
onGetData?: (data: Record<string, any>[], processedData: Record<string, any>[]) => void;
}
/**

View File

@ -1,4 +1,5 @@
import { Cascader } from "antd";
import { useEffect } from "react";
import { processTreeDataByLevel } from "../../../utils";
/**
@ -6,6 +7,7 @@ import { processTreeDataByLevel } from "../../../utils";
*/
function BasicCascader(props) {
const {
onGetData,
onChange,
onGetNodePaths,
onGetNodePathsIsIncludeOneself = true,
@ -42,6 +44,10 @@ function BasicCascader(props) {
onChange?.(value, selectedOptions);
};
useEffect(() => {
onGetData?.(data, processedData);
}, [data, processedData]);
return (
<Cascader
options={processedData}

View File

@ -1,5 +1,5 @@
import { request } from "@cqsjjb/jjb-common-lib/http";
import { Descriptions, Divider } from "antd";
import { Descriptions, Divider, Spin } from "antd";
import dayjs from "dayjs";
import { useEffect, useState } from "react";
import HeaderBack from "../../HeaderBack";
@ -39,12 +39,14 @@ function HiddenInfo(props) {
const [afterRectificationImageFiles, setAfterRectificationImageFiles] = useState([]);
const [rectificationPlanImageFiles, setRectificationPlanImageFiles] = useState([]);
const [acceptImageFiles, setAcceptImageFiles] = useState([]);
const [loading, setLoading] = useState(true);
const { getFile } = useGetFile();
const query = useGetUrlQuery();
const getData = async () => {
request(`/hidden/hidden/${id || query[idKey]}`, "get").then((res) => {
setInfo(res.data);
setLoading(false);
});
const hiddenImageFiles = await getFile({ eqType: UPLOAD_FILE_TYPE_ENUM["3"], eqForeignKey: hiddenId || query[hiddenIdKey] });
setHiddenImageFiles(hiddenImageFiles);
@ -70,6 +72,7 @@ function HiddenInfo(props) {
return (
<div>
{isShowHeaderBack && <HeaderBack title="查看" />}
<Spin spinning={loading}>
<div style={{ padding: 20 }}>
<Divider orientation="left">隐患信息</Divider>
<Descriptions
@ -355,6 +358,7 @@ function HiddenInfo(props) {
]}
/>
</div>
</Spin>
</div>
);
}

View File

@ -15,6 +15,8 @@ export interface BasicLeftTreeProps extends TreeProps {
onGetNodePathsIsIncludeOneself?: boolean;
/** 获取父级节点 */
onGetNodePaths?: () => Record<string, any>[];
/** 获取数据 */
onGetData?: (data: Record<string, any>[]) => void;
}
/**

View File

@ -9,6 +9,7 @@ const { Search } = Input;
*/
const BasicLeftTree = (props) => {
const {
onGetData,
onSelect,
onGetNodePaths,
onGetNodePathsIsIncludeOneself = true,
@ -141,6 +142,10 @@ const BasicLeftTree = (props) => {
const filteredTreeData = filterTreeData(treeData, searchValue);
const processedTreeData = processTreeData(filteredTreeData);
useEffect(() => {
onGetData?.(treeData);
}, [treeData]);
return (
<div style={{ width: 300 }}>
<Search

View File

@ -15,6 +15,8 @@ export interface BasicSelectProps extends SelectProps {
placeholder?: string;
/** 获取 label */
onGetLabel?: (label: string) => void;
/** 获取数据 */
onGetData?: (data: Record<string, any>[]) => void;
}
/**

View File

@ -1,4 +1,5 @@
import { Select } from "antd";
import { useEffect } from "react";
import { getLabelName } from "../../../utils";
/**
@ -6,6 +7,7 @@ import { getLabelName } from "../../../utils";
*/
function BasicSelect(props) {
const {
onGetData,
onChange,
onGetLabel,
placeholder = "",
@ -23,6 +25,10 @@ function BasicSelect(props) {
onChange?.(event, option);
};
useEffect(() => {
onGetData?.(data);
}, [data]);
return (
<Select placeholder={`请选择${placeholder}`} showSearch allowClear onChange={handleChange} {...restProps}>
{data.map((item) => {

View File

@ -21,6 +21,8 @@ export interface BasicSelectTreeProps extends TreeSelectProps {
level?: number;
/** 获取 label */
onGetLabel?: (label: string) => void;
/** 获取数据 */
onGetData?: (data: Record<string, any>[], processedData: Record<string, any>[]) => void;
}
/**

View File

@ -1,4 +1,5 @@
import { TreeSelect } from "antd";
import { useEffect } from "react";
import { getTreeNodePaths, processTreeDataByLevel } from "../../../utils";
/**
@ -6,6 +7,7 @@ import { getTreeNodePaths, processTreeDataByLevel } from "../../../utils";
*/
function BasicSelectTree(props) {
const {
onGetData,
onChange,
onGetLabel,
onGetNodePaths,
@ -48,6 +50,10 @@ function BasicSelectTree(props) {
onChange?.(value, label, extra);
};
useEffect(() => {
onGetData?.(treeData, processedTreeData);
}, [treeData, processedTreeData]);
return (
<TreeSelect
showSearch