新增数据字典Cascader、LeftTree、Select、SelectTree、Hook

master
LiuJiaNan 2025-11-08 12:07:29 +08:00
parent 48fbc201fb
commit 26249d828d
29 changed files with 388 additions and 30 deletions

View File

@ -4,7 +4,7 @@ import type { BasicCascaderProps } from "../Basic";
/** /**
* *
*/ */
export interface AreaCascaderProps extends Omit<BasicCascaderProps, "options"> { export interface AreaCascaderProps extends Omit<BasicCascaderProps, "options" | "placeholder" | "nameKey" | "idKey" | "childrenKey"> {
/** 占位符,默认为"属地" */ /** 占位符,默认为"属地" */
placeholder?: string; placeholder?: string;
} }

View File

@ -11,14 +11,7 @@ function AreaCascader(props) {
} = props; } = props;
return ( return (
<BasicCascader <BasicCascader data={Area} placeholder={placeholder} nameKey="label" idKey="value" {...restProps} />
data={Area}
placeholder={placeholder}
nameKey="label"
idKey="value"
childrenKey="children"
{...restProps}
/>
); );
} }

View File

@ -4,12 +4,12 @@ import type { FC } from "react";
/** /**
* *
*/ */
export interface BasicCascaderProps extends CascaderProps { export interface BasicCascaderProps extends Omit<CascaderProps, "fieldNames"> {
/** 树形数据 label 字段,默认 name */ /** 树形数据 label 字段,默认 name */
nameKey?: string; nameKey?: string;
/** 树形数据 value 字段,默认 id */ /** 树形数据 value 字段,默认 id */
idKey?: string; idKey?: string;
/** 树形数据 children 字段,默认 childrenList */ /** 树形数据 children 字段,默认 children */
childrenKey?: string; childrenKey?: string;
/** 决定 onGetNodePaths 是否包含自身节点,默认 true */ /** 决定 onGetNodePaths 是否包含自身节点,默认 true */
onGetNodePathsIsIncludeOneself?: boolean; onGetNodePathsIsIncludeOneself?: boolean;

View File

@ -15,7 +15,7 @@ function BasicCascader(props) {
data = [], data = [],
nameKey = "name", nameKey = "name",
idKey = "id", idKey = "id",
childrenKey = "childrenList", childrenKey = "children",
level, level,
...restProps ...restProps
} = props; } = props;

View File

@ -0,0 +1,23 @@
import type { FC } from "react";
import type { BasicCascaderProps } from "../Basic";
/**
*
*/
export interface DictionarySelectTreeProps extends Omit<BasicCascaderProps, "options" | "nameKey" | "idKey" | "childrenKey"> {
/** appKey默认 DICTIONARY_APP_KEY_ENUM.DEFAULT0bb989ecada5470c87635018ece9f327 */
appKey?: string;
/** 要获取的字典 */
dictValue: string;
/** 树形数据 label 字段,默认 dictLabel */
nameKey?: string;
/** 树形数据 value 字段,默认 dictValue */
idKey?: string;
}
/**
*
*/
declare const DictionarySelectTree: FC<DictionarySelectTreeProps>;
export default DictionarySelectTree;

View File

@ -0,0 +1,40 @@
import { request } from "@cqsjjb/jjb-common-lib/http";
import { useEffect, useState } from "react";
import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
import BasicCascader from "../Basic";
/**
* 数据字典级联组件
*/
function DictionarySelectTree(props) {
const {
appKey = DICTIONARY_APP_KEY_ENUM.DEFAULT,
dictValue = "",
nameKey = "dictLabel",
idKey = "dictValue",
...restProps
} = props;
const [treeData, setTreeData] = useState([]);
const getData = async () => {
if (!Object.values(DICTIONARY_APP_KEY_ENUM).includes(appKey))
throw new Error("传入的 appKey 不在 DICTIONARY_APP_KEY_ENUM 中");
setTreeData([]);
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
setTreeData(data);
};
useEffect(() => {
dictValue && getData();
}, [dictValue]);
return (
<BasicCascader data={treeData} nameKey={nameKey} idKey={idKey} {...restProps} />
);
}
DictionarySelectTree.displayName = "DictionarySelectTree";
export default DictionarySelectTree;

16
components/LeftTree/Area/index.d.ts vendored Normal file
View File

@ -0,0 +1,16 @@
import type { FC } from "react";
import type { BasicLeftTreeProps } from "../Basic";
/**
*
*/
export interface AreaLeftTreeProps extends Omit<BasicLeftTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey"> {
}
/**
*
*/
declare const AreaLeftTree: FC<AreaLeftTreeProps>;
export default AreaLeftTree;

View File

@ -0,0 +1,15 @@
import Area from "../../../json/area.json";
import BasicLeftTree from "../Basic";
/**
* 属地左侧树组件
*/
function AreaLeftTree(props) {
return (
<BasicLeftTree treeData={Area} nameKey="label" idKey="value" {...props} />
);
}
AreaLeftTree.displayName = "AreaLeftTree";
export default AreaLeftTree;

View File

@ -4,12 +4,12 @@ import type { FC } from "react";
/** /**
* *
*/ */
export interface BasicLeftTreeProps extends TreeProps { export interface BasicLeftTreeProps extends Omit<TreeProps, "fieldNames"> {
/** 树形数据 title 字段,默认 name */ /** 树形数据 title 字段,默认 name */
nameKey?: string; nameKey?: string;
/** 树形数据 key 字段,默认 id */ /** 树形数据 key 字段,默认 id */
idKey?: string; idKey?: string;
/** 树形数据 children 字段,默认 childrenList */ /** 树形数据 children 字段,默认 children */
childrenKey?: string; childrenKey?: string;
/** 决定 onGetNodePaths 是否包含自身节点,默认 true */ /** 决定 onGetNodePaths 是否包含自身节点,默认 true */
onGetNodePathsIsIncludeOneself?: boolean; onGetNodePathsIsIncludeOneself?: boolean;

View File

@ -17,7 +17,7 @@ const BasicLeftTree = (props) => {
treeData = [], treeData = [],
nameKey = "name", nameKey = "name",
idKey = "id", idKey = "id",
childrenKey = "childrenList", childrenKey = "children",
...restProps ...restProps
} = props; } = props;

View File

@ -14,7 +14,7 @@ export interface Params {
/** /**
* *
*/ */
export interface DepartmentLeftTreeProps extends Omit<BasicLeftTreeProps, "treeData"> { export interface DepartmentLeftTreeProps extends Omit<BasicLeftTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey"> {
/** 请求参数 */ /** 请求参数 */
params?: Params; params?: Params;
} }

View File

@ -23,7 +23,7 @@ function DepartmentLeftTree(props) {
}, []); }, []);
return ( return (
<BasicLeftTree treeData={treeData} {...restProps} /> <BasicLeftTree treeData={treeData} childrenKey="childrenList" {...restProps} />
); );
} }

View File

@ -0,0 +1,23 @@
import type { FC } from "react";
import type { BasicLeftTreeProps } from "../Basic";
/**
*
*/
export interface DictionaryLeftTreeProps extends Omit<BasicLeftTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey"> {
/** appKey默认 DICTIONARY_APP_KEY_ENUM.DEFAULT0bb989ecada5470c87635018ece9f327 */
appKey?: string;
/** 要获取的字典 */
dictValue: string;
/** 树形数据 label 字段,默认 dictLabel */
nameKey?: string;
/** 树形数据 value 字段,默认 dictValue */
idKey?: string;
}
/**
*
*/
declare const DictionaryLeftTree: FC<DictionaryLeftTreeProps>;
export default DictionaryLeftTree;

View File

@ -0,0 +1,40 @@
import { request } from "@cqsjjb/jjb-common-lib/http";
import { useEffect, useState } from "react";
import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
import BasicLeftTree from "../Basic";
/**
* 数据字典左侧树组件
*/
function DictionaryLeftTree(props) {
const {
appKey = DICTIONARY_APP_KEY_ENUM.DEFAULT,
dictValue = "",
nameKey = "dictLabel",
idKey = "dictValue",
...restProps
} = props;
const [treeData, setTreeData] = useState([]);
const getData = async () => {
if (!Object.values(DICTIONARY_APP_KEY_ENUM).includes(appKey))
throw new Error("传入的 appKey 不在 DICTIONARY_APP_KEY_ENUM 中");
setTreeData([]);
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
setTreeData(data);
};
useEffect(() => {
dictValue && getData();
}, [dictValue]);
return (
<BasicLeftTree treeData={treeData} nameKey={nameKey} idKey={idKey} {...restProps} />
);
}
DictionaryLeftTree.displayName = "DictionaryLeftTree";
export default DictionaryLeftTree;

23
components/Select/Dictionary/index.d.ts vendored Normal file
View File

@ -0,0 +1,23 @@
import type { FC } from "react";
import type { BasicSelectProps } from "../Basic";
/**
*
*/
export interface DictionarySelectProps extends Omit<BasicSelectProps, "data" | "nameKey" | "idKey"> {
/** appKey默认 DICTIONARY_APP_KEY_ENUM.DEFAULT0bb989ecada5470c87635018ece9f327 */
appKey?: string;
/** 要获取的字典 */
dictValue: string;
/** 树形数据 label 字段,默认 dictLabel */
nameKey?: string;
/** 树形数据 value 字段,默认 dictValue */
idKey?: string;
}
/**
*
*/
declare const DictionarySelect: FC<DictionarySelectProps>;
export default DictionarySelect;

View File

@ -0,0 +1,40 @@
import { request } from "@cqsjjb/jjb-common-lib/http";
import { useEffect, useState } from "react";
import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
import BasicSelect from "../Basic";
/**
* 数据字典下拉组件
*/
function DictionarySelect(props) {
const {
appKey = DICTIONARY_APP_KEY_ENUM.DEFAULT,
dictValue = "",
nameKey = "dictLabel",
idKey = "dictValue",
...restProps
} = props;
const [data, setData] = useState([]);
const getData = async () => {
if (!Object.values(DICTIONARY_APP_KEY_ENUM).includes(appKey))
throw new Error("传入的 appKey 不在 DICTIONARY_APP_KEY_ENUM 中");
setData([]);
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
setData(data);
};
useEffect(() => {
dictValue && getData();
}, [dictValue]);
return (
<BasicSelect treeData={data} nameKey={nameKey} idKey={idKey} {...restProps} />
);
}
DictionarySelect.displayName = "DictionarySelect";
export default DictionarySelect;

View File

@ -16,7 +16,7 @@ export interface Params {
/** /**
* *
*/ */
export interface PersonnelSelectProps extends Omit<BasicSelectProps, "data"> { export interface PersonnelSelectProps extends Omit<BasicSelectProps, "data" | "placeholder" | "nameKey" | "idKey"> {
/** 请求参数 */ /** 请求参数 */
params?: Params; params?: Params;
/** 占位符,默认"人员" */ /** 占位符,默认"人员" */

View File

@ -4,7 +4,7 @@ import type { BasicSelectTreeProps } from "../Basic";
/** /**
* *
*/ */
export interface AreaSelectTreeProps extends Omit<BasicSelectTreeProps, "treeData"> { export interface AreaSelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "placeholder" | "nameKey" | "idKey" | "childrenKey"> {
/** 占位符,默认"属地" */ /** 占位符,默认"属地" */
placeholder?: string; placeholder?: string;
} }

View File

@ -16,7 +16,6 @@ function AreaSelectTree(props) {
placeholder={placeholder} placeholder={placeholder}
nameKey="label" nameKey="label"
idKey="value" idKey="value"
childrenKey="children"
{...restProps} {...restProps}
/> />
); );

View File

@ -4,12 +4,12 @@ import type { FC } from "react";
/** /**
* *
*/ */
export interface BasicSelectTreeProps extends TreeSelectProps { export interface BasicSelectTreeProps extends Omit<TreeSelectProps, "fieldNames"> {
/** 树形数据 label 字段,默认 name */ /** 树形数据 label 字段,默认 name */
nameKey?: string; nameKey?: string;
/** 树形数据 value 字段,默认 id */ /** 树形数据 value 字段,默认 id */
idKey?: string; idKey?: string;
/** 树形数据 children 字段,默认 childrenList */ /** 树形数据 children 字段,默认 children */
childrenKey?: string; childrenKey?: string;
/** 决定 onGetNodePaths 是否包含自身节点,默认 true */ /** 决定 onGetNodePaths 是否包含自身节点,默认 true */
onGetNodePathsIsIncludeOneself?: boolean; onGetNodePathsIsIncludeOneself?: boolean;

View File

@ -16,7 +16,7 @@ function BasicSelectTree(props) {
treeData = [], treeData = [],
nameKey = "name", nameKey = "name",
idKey = "id", idKey = "id",
childrenKey = "childrenList", childrenKey = "children",
level, level,
...restProps ...restProps
} = props; } = props;

View File

@ -5,7 +5,7 @@ import type { BasicSelectTreeProps } from "../../Basic";
/** /**
* *
*/ */
export interface DepartmentSelectTreeProps extends Omit<BasicSelectTreeProps, "treeData"> { export interface DepartmentSelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "placeholder" | "nameKey" | "idKey" | "childrenKey"> {
/** 请求参数 */ /** 请求参数 */
params?: Params; params?: Params;
/** 占位符,默认"部门" */ /** 占位符,默认"部门" */

View File

@ -34,7 +34,7 @@ function DepartmentSelectTree(props) {
}, [JSON.stringify(params), isNeedCorpInfoId, isNeedParentId]); }, [JSON.stringify(params), isNeedCorpInfoId, isNeedParentId]);
return ( return (
<BasicSelectTree treeData={treeData} placeholder={placeholder} {...restProps} /> <BasicSelectTree treeData={treeData} placeholder={placeholder} childrenKey="childrenList" {...restProps} />
); );
} }

View File

@ -0,0 +1,23 @@
import type { FC } from "react";
import type { BasicSelectTreeProps } from "../Basic";
/**
*
*/
export interface DictionarySelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey"> {
/** appKey默认 DICTIONARY_APP_KEY_ENUM.DEFAULT0bb989ecada5470c87635018ece9f327 */
appKey?: string;
/** 要获取的字典 */
dictValue: string;
/** 树形数据 label 字段,默认 dictLabel */
nameKey?: string;
/** 树形数据 value 字段,默认 dictValue */
idKey?: string;
}
/**
*
*/
declare const DictionarySelectTree: FC<DictionarySelectTreeProps>;
export default DictionarySelectTree;

View File

@ -0,0 +1,40 @@
import { request } from "@cqsjjb/jjb-common-lib/http";
import { useEffect, useState } from "react";
import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
import BasicSelectTree from "../Basic";
/**
* 数据字典下拉树组件
*/
function DictionarySelectTree(props) {
const {
appKey = DICTIONARY_APP_KEY_ENUM.DEFAULT,
dictValue = "",
nameKey = "dictLabel",
idKey = "dictValue",
...restProps
} = props;
const [treeData, setTreeData] = useState([]);
const getData = async () => {
if (!Object.values(DICTIONARY_APP_KEY_ENUM).includes(appKey))
throw new Error("传入的 appKey 不在 DICTIONARY_APP_KEY_ENUM 中");
setTreeData([]);
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
setTreeData(data);
};
useEffect(() => {
dictValue && getData();
}, [dictValue]);
return (
<BasicSelectTree treeData={treeData} nameKey={nameKey} idKey={idKey} {...restProps} />
);
}
DictionarySelectTree.displayName = "DictionarySelectTree";
export default DictionarySelectTree;

7
enum/dictionary/index.js Normal file
View File

@ -0,0 +1,7 @@
/**
* 数据字典 appKey 枚举
*/
export const DICTIONARY_APP_KEY_ENUM = {
DEFAULT: "0bb989ecada5470c87635018ece9f327",
GWJ: "0bb989ecada5470c87635018ece9f327",
}

View File

@ -62,6 +62,7 @@ export const UPLOAD_FILE_TYPE_ENUM = {
133: 133, 133: 133,
134: 134, 134: 134,
135: 135, 135: 135,
136: 136,
}; };
/** /**
@ -128,4 +129,5 @@ export const UPLOAD_FILE_PATH_ENUM = {
133: "branch_safety_director_approval", 133: "branch_safety_director_approval",
134: "project_authority_review_signature", 134: "project_authority_review_signature",
135: "branch_manager_approval_signature", 135: "branch_manager_approval_signature",
136: "accident_incident",
}; };

24
hooks/useDictionary/index.d.ts vendored Normal file
View File

@ -0,0 +1,24 @@
export interface getDictionaryOptions {
/** appKey默认 DICTIONARY_APP_KEY_ENUM.DEFAULT0bb989ecada5470c87635018ece9f327 */
appKey?: string;
/** 要获取的字典 */
dictValue: string;
}
export interface DictionaryItem {
/** label */
dictLabel: string;
/** value */
dictValue: string;
/** 子级 */
children: DictionaryItem[];
[key: string]: any;
}
export type getDictionaryFunction = (options: getDictionaryOptions) => Promise<DictionaryItem[]>;
/**
*
*/
export default function useDictionary(returnType: "array"): [boolean, getDictionaryFunction];
export default function useDictionary(returnType?: "object"): { loading: boolean; getDictionary: getDictionaryFunction };

View File

@ -0,0 +1,50 @@
import { request } from "@cqsjjb/jjb-common-lib/http";
import { useState } from "react";
import { DICTIONARY_APP_KEY_ENUM } from "../../enum/dictionary";
/**
* 获取数据字典
*/
function useDictionary(returnType = "object") {
// loading状态
const [loading, setLoading] = useState(false);
// 获取数据字典
const getDictionary = (options) => {
if (!options)
throw new Error("请传入 options");
setLoading(true);
return new Promise((resolve, reject) => {
const { appKey = DICTIONARY_APP_KEY_ENUM.DEFAULT, dictValue } = options;
if (!Object.values(DICTIONARY_APP_KEY_ENUM).includes(appKey))
throw new Error("传入的 options.appKey 不在 DICTIONARY_APP_KEY_ENUM 中");
if (!dictValue)
throw new Error("请传入 options.dictValue");
// 发送请求
request(
"/config/dict-trees/list/by/dictValues",
"get",
{ appKey, dictValue },
)
.then((res) => {
resolve(res.data);
})
.catch((err) => {
reject(err);
})
.finally(() => {
setLoading(false);
});
});
};
if (returnType === "array")
return [loading, getDictionary];
return { loading, getDictionary };
}
export default useDictionary;