From 690fcd9e20bf0ab729a652c3c8511eb9018e0850 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B1=9F=E5=BF=97=E9=9B=84?= Date: Wed, 6 Mar 2024 17:15:34 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20biz=E7=BB=84=E4=BB=B6=E4=BC=98=E5=8C=96?= =?UTF-8?q?=20boxSelectTree=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=8F=AF=E4=BB=A5=E8=87=AA=E5=AE=9A=E4=B9=89=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E6=8C=89=E9=92=AE=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/biz/CHANGELOG.md | 26 +++ .../hooks/useIntelligentTracking/index.d.ts | 15 +- packages/biz/es/index.d.ts | 1 + packages/biz/es/utils/constants.d.ts | 8 + packages/biz/es/utils/constants.js | 15 +- packages/biz/lib/index.d.ts | 1 + packages/biz/lib/utils/constants.d.ts | 8 + packages/biz/lib/utils/constants.js | 11 + packages/biz/package.json | 2 +- .../WarningRecordCard/WarningRecordCard.tsx | 15 +- .../biz/src/boxSelectTree/boxSelectTree.tsx | 10 +- .../components/boxPanel/index.tsx | 163 +++++++++------ packages/biz/src/boxSelectTree/demo/basic.tsx | 21 +- packages/biz/src/boxSelectTree/demo/mock.tsx | 45 ++-- .../biz/src/boxSelectTree/demo/noOptions.tsx | 61 ++++++ packages/biz/src/boxSelectTree/index.md | 7 + packages/biz/src/index.tsx | 1 + packages/biz/src/tree/boxTree.tsx | 112 ++++++---- packages/biz/src/tree/demo/customOptions.tsx | 23 +++ .../biz/src/tree/demo/customTitleRender.tsx | 7 +- packages/biz/src/tree/index.md | 7 + packages/biz/src/tree/index.tsx | 7 + packages/biz/src/treeTransfer/index.md | 2 + .../treeTransferModal/TreeTransferModal.tsx | 42 ++-- .../biz/src/treeTransferModal/demo/basic.tsx | 4 +- packages/biz/src/treeTransferModal/index.md | 2 + packages/biz/src/utils/constants.ts | 10 + packages/func/CHANGELOG.md | 15 ++ packages/func/package.json | 2 +- packages/hooks/CHANGELOG.md | 18 ++ packages/hooks/es/useActivateWrapper/index.js | 2 +- packages/hooks/package.json | 2 +- packages/meta/CHANGELOG.md | 19 ++ packages/meta/package.json | 2 +- packages/request/CHANGELOG.md | 12 ++ packages/request/es/index.js | 193 ------------------ packages/request/lib/index.js | 155 -------------- packages/request/package.json | 2 +- 38 files changed, 513 insertions(+), 535 deletions(-) create mode 100644 packages/biz/src/boxSelectTree/demo/noOptions.tsx create mode 100644 packages/biz/src/tree/demo/customOptions.tsx diff --git a/packages/biz/CHANGELOG.md b/packages/biz/CHANGELOG.md index ec30caf..ab61f46 100644 --- a/packages/biz/CHANGELOG.md +++ b/packages/biz/CHANGELOG.md @@ -1,5 +1,31 @@ # @zhst/biz +## 0.9.0 + +### Minor Changes + +- 优化 boxSelectTree 组件，添加可以自定义配置按钮功能 + +### Patch Changes + +- Updated dependencies + - @zhst/hooks@0.8.1 + - @zhst/func@0.7.2 + - @zhst/meta@0.8.2 + +## 0.8.0 + +### Minor Changes + +- @zhst/biz 优化数组件 + +### Patch Changes + +- Updated dependencies + - @zhst/hooks@0.8.0 + - @zhst/func@0.7.1 + - @zhst/meta@0.8.1 + ## 0.7.0 ### Minor Changes diff --git a/packages/biz/es/hooks/useIntelligentTracking/index.d.ts b/packages/biz/es/hooks/useIntelligentTracking/index.d.ts index bd6e0e3..c1e54ef 100644 --- a/packages/biz/es/hooks/useIntelligentTracking/index.d.ts +++ b/packages/biz/es/hooks/useIntelligentTracking/index.d.ts @@ -15,19 +15,13 @@ export declare const getTaskCameraByCenterAndPower: (value: { bodyPower: number; }; cameraInfos: Array; - center: [ - number, - number - ]; + center: [number, number]; }) => Promise; /**创建追踪任务 */ export declare const createIntelligentTrack: (value: { images: Array; deviceIds: Array; - circleCenter: [ - number, - number - ]; + circleCenter: [number, number]; model: number; circleRadius: number; facePower?: number; @@ -39,10 +33,7 @@ export declare const emitHeartbeat: (smartTrackId: number) => Promise; export declare const ModifyTrackCameras: (value: { smartTrackId: number; deviceIds: Array; - centerPoint: [ - number, - number - ]; + centerPoint: [number, number]; }) => Promise; export declare const setIntelligentTrackCircleInfo: (smartTrackId: number, circleCenter: [number, number]) => Promise; export declare const getTackCameraInfo: (value: { diff --git a/packages/biz/es/index.d.ts b/packages/biz/es/index.d.ts index bc308c1..259e6bc 100644 --- a/packages/biz/es/index.d.ts +++ b/packages/biz/es/index.d.ts @@ -1,6 +1,7 @@ export { default as BigImageModal } from './BigImageModal'; export { default as BoxSelectTree } from './boxSelectTree'; export { default as Tree } from './tree'; +export type { TreeData } from './tree'; export { default as TreeTransfer } from './treeTransfer'; export { default as TreeTransferModal } from './treeTransferModal'; export { default as WarningRecordCard } from './WarningRecordCard'; diff --git a/packages/biz/es/utils/constants.d.ts b/packages/biz/es/utils/constants.d.ts index 45a9a99..0180cc0 100644 --- a/packages/biz/es/utils/constants.d.ts +++ b/packages/biz/es/utils/constants.d.ts @@ -21,3 +21,11 @@ export declare const DeviceTab: { REAL_CAMERA_ONLYFACE: number; REAL_CAMERA_NOFACE_NOBOX_NODIRECONNECT: number; }; +export declare const BOX_TYPE_LIST: { + value: string; + label: string; +}[]; +export declare const ALL_LIST: { + value: string; + label: string; +}[]; diff --git a/packages/biz/es/utils/constants.js b/packages/biz/es/utils/constants.js index 1ad86ba..925bab4 100644 --- a/packages/biz/es/utils/constants.js +++ b/packages/biz/es/utils/constants.js @@ -27,4 +27,17 @@ export var DeviceTab = { REAL_CAMERA_NOFACE: 6, REAL_CAMERA_ONLYFACE: 7, REAL_CAMERA_NOFACE_NOBOX_NODIRECONNECT: 8 // 只有普通摄像头，没有人脸、没有盒子、直连 -}; \ No newline at end of file +}; + +// 盒子 Tab 切换 +export var BOX_TYPE_LIST = [{ + value: '1', + label: '盒子' +}, { + value: '2', + label: '盒子组' +}]; +export var ALL_LIST = [{ + value: '', + label: '全部' +}]; \ No newline at end of file diff --git a/packages/biz/lib/index.d.ts b/packages/biz/lib/index.d.ts index bc308c1..259e6bc 100644 --- a/packages/biz/lib/index.d.ts +++ b/packages/biz/lib/index.d.ts @@ -1,6 +1,7 @@ export { default as BigImageModal } from './BigImageModal'; export { default as BoxSelectTree } from './boxSelectTree'; export { default as Tree } from './tree'; +export type { TreeData } from './tree'; export { default as TreeTransfer } from './treeTransfer'; export { default as TreeTransferModal } from './treeTransferModal'; export { default as WarningRecordCard } from './WarningRecordCard'; diff --git a/packages/biz/lib/utils/constants.d.ts b/packages/biz/lib/utils/constants.d.ts index 45a9a99..0180cc0 100644 --- a/packages/biz/lib/utils/constants.d.ts +++ b/packages/biz/lib/utils/constants.d.ts @@ -21,3 +21,11 @@ export declare const DeviceTab: { REAL_CAMERA_ONLYFACE: number; REAL_CAMERA_NOFACE_NOBOX_NODIRECONNECT: number; }; +export declare const BOX_TYPE_LIST: { + value: string; + label: string; +}[]; +export declare const ALL_LIST: { + value: string; + label: string; +}[]; diff --git a/packages/biz/lib/utils/constants.js b/packages/biz/lib/utils/constants.js index 6c57f12..733d65a 100644 --- a/packages/biz/lib/utils/constants.js +++ b/packages/biz/lib/utils/constants.js @@ -19,7 +19,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru // src/utils/constants.ts var constants_exports = {}; __export(constants_exports, { + ALL_LIST: () => ALL_LIST, BODY_SEARCH_THRESHOID: () => BODY_SEARCH_THRESHOID, + BOX_TYPE_LIST: () => BOX_TYPE_LIST, DeviceTab: () => DeviceTab, ENTER_CIRCLE: () => ENTER_CIRCLE, GLOBAL_IS_BOX_VMS_SHOW: () => GLOBAL_IS_BOX_VMS_SHOW, @@ -62,9 +64,18 @@ var DeviceTab = { REAL_CAMERA_NOFACE_NOBOX_NODIRECONNECT: 8 // 只有普通摄像头，没有人脸、没有盒子、直连 }; +var BOX_TYPE_LIST = [ + { value: "1", label: "盒子" }, + { value: "2", label: "盒子组" } +]; +var ALL_LIST = [ + { value: "", label: "全部" } +]; // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { + ALL_LIST, BODY_SEARCH_THRESHOID, + BOX_TYPE_LIST, DeviceTab, ENTER_CIRCLE, GLOBAL_IS_BOX_VMS_SHOW, diff --git a/packages/biz/package.json b/packages/biz/package.json index 2f7e962..687a741 100644 --- a/packages/biz/package.json +++ b/packages/biz/package.json @@ -1,6 +1,6 @@ { "name": "@zhst/biz", - "version": "0.7.0", + "version": "0.9.0", "description": "业务库", "keywords": [ "business", diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx index a555952..6230bf8 100644 --- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx +++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx @@ -19,23 +19,24 @@ export interface IRecord { 用于显示 盒子 点位 柜子 等信息 */ warningInfo?: string[] - /* - 右侧 柜子id 显示 + /* + 右侧 柜子id 显示 */ cabietInfo?: string; - /* - 直接传格式化好的时间 + /* + 直接传格式化好的时间 */ warningTime?: string ; - /* + /* 传格时间戳 */ warningTimestamp?: string | number - /* - 传格时间格式 + /* + 传格时间格式 @default YYYY-MM-DD HH:mm:ss */ warningTimeFormat?: string; + }; export interface WarningRecordCardProps { diff --git a/packages/biz/src/boxSelectTree/boxSelectTree.tsx b/packages/biz/src/boxSelectTree/boxSelectTree.tsx index fe3914e..82255fa 100644 --- a/packages/biz/src/boxSelectTree/boxSelectTree.tsx +++ b/packages/biz/src/boxSelectTree/boxSelectTree.tsx @@ -16,6 +16,8 @@ export interface BoxSelectTreeProps { tabsProps?: TabsProps searchInputProps?: InputProps treeProps?: TreeProps + showOptions?: boolean + customImport?: any } const BoxSelectTree: FC = (props) => { @@ -31,7 +33,9 @@ const BoxSelectTree: FC = (props) => { onCreateSubmit, tabsProps, searchInputProps, - treeProps + treeProps, + customImport, + showOptions = true } = props const onChange = (key: string) => { @@ -54,6 +58,8 @@ const BoxSelectTree: FC = (props) => { onSearch={onSearch} onItemCheck={onItemCheck} onItemSelect={onItemSelect} + showOptions={showOptions} + customImport={customImport} /> ) }, @@ -72,6 +78,8 @@ const BoxSelectTree: FC = (props) => { onSearch={onSearch} onItemCheck={onItemCheck} onItemSelect={onItemSelect} + showOptions={showOptions} + customImport={customImport} /> ) }, diff --git a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx index 0cad4a0..361d3b0 100644 --- a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx +++ b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx @@ -1,13 +1,14 @@ import React, { FC, useState, useRef } from 'react'; import{ Button, Divider, Input, Space, TreeDataNode } from 'antd' import { ModalForm, ModalFormProps, ProFormInstance, ProFormText } from '@ant-design/pro-components' -import { DiffOutlined, SwitcherOutlined } from '@ant-design/icons' +import { ClockCircleOutlined, CloseCircleOutlined, DiffOutlined, FolderAddOutlined, ImportOutlined, SwitcherOutlined } from '@ant-design/icons' import type { TreeProps, InputProps } from 'antd'; import TreeTransferModal from '../../../treeTransferModal' import BoxTree from '../../../tree'; export interface BoxGroupPanelProps { searchInputProps?: InputProps + showOptions?: boolean treeProps?: TreeProps data: TreeDataNode[] boxDataSource: TreeDataNode[] @@ -18,11 +19,16 @@ export interface BoxGroupPanelProps { onBoxBatchDelete?: (data?: any) => void onBoxDelete?: (data?: any) => void onCreateSubmit?: ModalFormProps['onFinish'] + onClockClick?: () => void + customImport?: any + extraBtns?: any } const BoxGroupPanel: FC = (props) => { const { searchInputProps, + showOptions = true, + extraBtns, data = [], onSearch, treeProps, @@ -31,7 +37,9 @@ const BoxGroupPanel: FC = (props) => { onCreateSubmit, onBoxBatchDelete, onBoxDelete, - boxDataSource + onClockClick, + boxDataSource, + customImport } = props const [isTreeCheckable, setIsTreeCheckable] = useState(false) const [targetItems, setTargetItems] = useState([]); @@ -40,8 +48,7 @@ const BoxGroupPanel: FC = (props) => { const createFormRef = useRef< ProFormInstance<{ name: string; - company?: string; - useMode?: string; + boxList?: any[]; }> >() @@ -75,89 +82,109 @@ const BoxGroupPanel: FC = (props) => { setTargetItems(pre => pre.filter(o => o.key !== key)) } - const onOk = (data: any) => { - console.log('data', data) + // 盒子点击确定 + const onBoxChoiceOk = async (data: any) => { + createFormRef.current?.setFieldValue('boxList', data) + createFormRef.current?.setFieldValue('boxName', 123) + console.log(createFormRef.current?.getFieldValue('boxList')) + setBoxChoiceOpen(false) } - const onReset = () => { + // 盒子选择重置 + const onBoxChoiceReset = () => { setCheckedKeys([]) setTargetItems([]) } return (
+ {/* 盒子选择弹框 */} setBoxChoiceOpen(false)} - onRadioChange={(val) => console.log('radio', val)} // 顶部 radio 事件 + onRadioChange={(e) => console.log('radio', e.target.value)} // 顶部 radio 事件 dataSource={boxDataSource} // 数据源 targetItems={targetItems} // 右侧选中项 checkedKeys={checkedKeys} // 左侧选中 - onReset={onReset} // 重置按钮事件 - onOk={onOk} // 确定按钮事件 + onReset={onBoxChoiceReset} // 重置按钮事件 + onOk={onBoxChoiceOk} // 确定按钮事件 onTreeCheck={onTreeCheck} // 树check选中事件 onItemDelete={onItemDelete} // 右侧点击删除事件 /> - - + + onSearch?.(e)} placeholder='请输入盒子名称' {...searchInputProps} /> - + {customImport || ( + <> + } - submitter={{ - searchConfig: { - submitText: '确定', - resetText: '取消', - }, - }} - onFinish={onCreateSubmit} - > - - - { - createFormRef.current?.setFieldValue('boxList', null) - }} >恢复默认 - setBoxChoiceOpen(true)}>范围选择 - - ) - }} - /> - - - {/* @ts-ignore */} - - - + + + width={'600px'} + formRef={createFormRef} + title="新建组" + modalProps={{ destroyOnClose: true }} + layout='horizontal' + labelCol={{ span: 6 }} + wrapperCol={{ span: 18 }} + trigger={} + submitter={{ + searchConfig: { + submitText: '确定', + resetText: '取消', + }, + }} + onFinish={onCreateSubmit} + > + + + { + createFormRef.current?.setFieldValue('boxList', null) + onBoxChoiceReset() + }} >恢复默认 + setBoxChoiceOpen(true)}>范围选择 + + ) + }} + /> + + + {/* @ts-ignore */} + + + + + )} + {extraBtns} { + const [activeKey, setActiveKey] = useState('1') const [searchType, setSearchType] = useState('1') const [searchVal, setSearchVal] = useState('') const [checkedKeys, setCheckedKeys] = useState([]); @@ -32,18 +34,24 @@ const demo = () => { } return ( -
+
{contextHolder} console.log('搜索', e)} - onCreateSubmit={async () => { return true }} + onCreateSubmit={async (_data) => { + console.log('新建盒子', _data) + return true + }} onItemCheck={onTreeCheck} onItemSelect={e => console.log('onItemSelect', e)} - onTabChange={e => console.log('tabChange', e)} + onTabChange={val => setActiveKey(val)} onBoxDelete={data => console.log('盒子删除', data)} onBoxBatchDelete={onBoxBatchDelete} + tabsProps={{ + activeKey, + }} searchInputProps={{ addonBefore: ( ), onChange: e => setSearchVal(e.target.value), diff --git a/packages/biz/src/boxSelectTree/demo/mock.tsx b/packages/biz/src/boxSelectTree/demo/mock.tsx index f60888b..d6bbc91 100644 --- a/packages/biz/src/boxSelectTree/demo/mock.tsx +++ b/packages/biz/src/boxSelectTree/demo/mock.tsx @@ -1,6 +1,6 @@ -import { TreeDataNode } from "antd"; +import { TreeData } from "@zhst/biz"; -export const treeData: TreeDataNode[] = [ +export const boxDataSource: TreeData[] = [ { title: '全部盒子', key: '0-0', @@ -12,10 +12,12 @@ export const treeData: TreeDataNode[] = [ { title: '摄像头1', key: '0-0-0-0', + isCamera: true }, { title: '摄像头2', key: '0-0-0-1', + isCamera: true }, ], }, @@ -25,7 +27,8 @@ export const treeData: TreeDataNode[] = [ children: [ { title: '摄像头4', - key: '0-0-1-0' + key: '0-0-1-0', + isCamera: true } ], }, @@ -34,36 +37,18 @@ export const treeData: TreeDataNode[] = [ ]; -export const boxDataSource: TreeDataNode[] = [ +export const treeData: TreeData[] = [ + { key: '0-1-0', title: '分组0-1-0', isLeaf: true, checkable: false }, + { key: '0-1-1', title: '分组0-1-1', isLeaf: true, checkable: false }, + { key: '0-1-2', title: '分组0-1-2', isLeaf: true, checkable: false }, { - key: '0-0', - title: '分组0-0', - isLeaf: false, - checkable: false, - }, - { - key: '0-1', - title: '分组0-1', + key: '0-1-3', + title: '分组0-1-3', isLeaf: false, children: [ - { key: '0-1-0', title: '分组0-1-0', isLeaf: true, checkable: false }, - { key: '0-1-1', title: '分组0-1-1', isLeaf: true, checkable: false }, - { key: '0-1-2', title: '分组0-1-2', isLeaf: true, checkable: false }, - { - key: '0-1-3', - title: '分组0-1-3', - isLeaf: false, - children: [ - { key: '0-1-3-1', title: '分组0-1-3-1', isLeaf: true }, - { key: '0-1-3-2', title: '分组0-1-3-2', isLeaf: true }, - { key: '0-1-3-3', title: '分组0-1-3-3', isLeaf: true }, - ], - }, + { key: '0-1-3-1', title: '分组0-1-3-1', isLeaf: true, isCamera: true }, + { key: '0-1-3-2', title: '分组0-1-3-2', isLeaf: true, isCamera: true }, + { key: '0-1-3-3', title: '分组0-1-3-3', isLeaf: true, isCamera: true }, ], }, - { key: '0-2', title: '分组0-2', isLeaf: false, checkable: false, }, - { key: '0-3', title: '分组0-3', isLeaf: false, checkable: false, }, - { key: '0-4', title: '分组0-4', isLeaf: false, checkable: false, }, - { key: '0-5', title: '分组0-4', isLeaf: false, checkable: false, }, - { key: '0-6', title: '分组0-4', isLeaf: false, checkable: false, }, ]; diff --git a/packages/biz/src/boxSelectTree/demo/noOptions.tsx b/packages/biz/src/boxSelectTree/demo/noOptions.tsx new file mode 100644 index 0000000..a2e34e7 --- /dev/null +++ b/packages/biz/src/boxSelectTree/demo/noOptions.tsx @@ -0,0 +1,61 @@ +import React, { useState } from 'react'; +import { BoxSelectTree } from '@zhst/biz'; +import { Button, Select, TreeProps } from 'antd'; +import { FilterOutlined } from '@ant-design/icons'; +import { BOX_TYPE_LIST } from '../../utils/constants'; +import { treeData, boxDataSource } from './mock' + +const { Option } = Select + +const demo = () => { + const [activeKey, setActiveKey] = useState('1') + const [searchType, setSearchType] = useState('1') + const [searchVal, setSearchVal] = useState('') + const [checkedKeys, setCheckedKeys] = useState([]); + + const onTreeCheck: TreeProps['onCheck'] = (keys: any) => { + setCheckedKeys(keys) + } + + return ( +
+ console.log('搜索', e)} + onItemCheck={onTreeCheck} + onItemSelect={e => console.log('onItemSelect', e)} + onTabChange={val => setActiveKey(val)} + onBoxDelete={data => console.log('盒子删除', data)} + showOptions={false} + tabsProps={{ + activeKey, + }} + customImport={
+ ); +}; + +export default demo; diff --git a/packages/biz/src/boxSelectTree/index.md b/packages/biz/src/boxSelectTree/index.md index aa8ec86..9e929ce 100644 --- a/packages/biz/src/boxSelectTree/index.md +++ b/packages/biz/src/boxSelectTree/index.md @@ -13,7 +13,9 @@ group: ## 代码演示 基本用法 +不显示其它按钮 +## API | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | @@ -24,3 +26,8 @@ group: | tabsProps | Tabs组件的Props | antd的Tabs组件 | - | - | | searchInputProps | 搜索框的Props | antd的Input组件 | - | - | | onTabChange | tab切换监听 | function: (e) => void | - | - | +| onBoxDelete | 盒子删除事件 | function: (e) => void | - | - | +| onBoxBatchDelete | 盒子批量删除事件 | function: (e) => void | - | - | +| onCreateSubmit | 新建提交事件 | function: (e) => void | - | - | +| showOptions | 展示其它功能按钮 | boolean | true | - | + diff --git a/packages/biz/src/index.tsx b/packages/biz/src/index.tsx index 04ac73b..8027afa 100644 --- a/packages/biz/src/index.tsx +++ b/packages/biz/src/index.tsx @@ -1,6 +1,7 @@ export { default as BigImageModal } from './BigImageModal' export { default as BoxSelectTree } from './boxSelectTree' export { default as Tree } from './tree' +export type { TreeData } from './tree' export { default as TreeTransfer } from './treeTransfer' export { default as TreeTransferModal } from './treeTransferModal' export { default as WarningRecordCard } from './WarningRecordCard' diff --git a/packages/biz/src/tree/boxTree.tsx b/packages/biz/src/tree/boxTree.tsx index 425596f..5461434 100644 --- a/packages/biz/src/tree/boxTree.tsx +++ b/packages/biz/src/tree/boxTree.tsx @@ -1,16 +1,18 @@ -import React, { FC } from 'react'; +import React, { FC, useState } from 'react'; import { Tree, Badge, TreeDataNode, Space, TreeProps } from 'antd'; +import theme from 'antd/es/theme' import { CloseOutlined, EditOutlined, SettingOutlined } from '@ant-design/icons' import { ModalForm, ProFormText } from '@ant-design/pro-components'; import './index.less' const componentName = 'zhst-biz-tree' +const { useToken } = theme export interface BoxTreeProps extends TreeProps { data: TreeDataNode[] treeCheckable?: boolean showItemOption?: boolean - treeProps?: TreeProps + customOptions?: any; onItemCheck?: TreeProps['onCheck'] onItemSelect?: TreeProps['onSelect'] onItemSetting?: (_data: any) => void @@ -19,52 +21,86 @@ export interface BoxTreeProps extends TreeProps { } const boxTree: FC = (props) => { - const { onItemSelect, onItemCheck, onItemSetting, onItemDelete, data = [], showItemOption = true, treeCheckable = false, onRenameFinish } = props + const { + onItemSelect, + onItemCheck, + onItemSetting, + onItemDelete, + data = [], + showItemOption = true, + treeCheckable = false, + onRenameFinish, + customOptions + } = props + const { token } = useToken() + const [checkedItem, setCheckedItem] = useState('') + + const cameraStatus = new Map([ + ['0', 'success'], + ['1', 'error'] + ]) return ( { + setCheckedItem(selectedKeys[0]) + onItemSelect?.(selectedKeys, info) + }} onCheck={onItemCheck} treeData={data} titleRender={(_nodeData) => { return (
- {!_nodeData.children && } - {_nodeData.title as any} - {showItemOption && - } - submitter={{ - searchConfig: { - submitText: '确定', - resetText: '取消', - }, - }} - onFinish={async (value) => onRenameFinish?.(value, _nodeData)} - > - - - onItemSetting?.(_nodeData)} /> - onItemDelete?.(_nodeData)} /> - } + {/* @ts-ignore */} + {!_nodeData.children && _nodeData.isCamera && } + + {_nodeData.title as any} + + {showItemOption && ( + + {customOptions || ( + <> + } + submitter={{ + searchConfig: { + submitText: '确定', + resetText: '取消', + }, + }} + onFinish={async (value) => onRenameFinish?.(value, _nodeData)} + > + + + onItemSetting?.(_nodeData)} /> + onItemDelete?.(_nodeData)} /> + + )} + + )}
) }} diff --git a/packages/biz/src/tree/demo/customOptions.tsx b/packages/biz/src/tree/demo/customOptions.tsx new file mode 100644 index 0000000..bcb14fb --- /dev/null +++ b/packages/biz/src/tree/demo/customOptions.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Tree } from '@zhst/biz'; +import { LoadingOutlined, PlayCircleOutlined, SettingOutlined } from '@ant-design/icons'; +import { treeData } from './mock' + +const demo = () => { + return ( +
+ + + + + + )} + /> +
+ ); +}; + +export default demo; diff --git a/packages/biz/src/tree/demo/customTitleRender.tsx b/packages/biz/src/tree/demo/customTitleRender.tsx index 61971a2..95f3cd2 100644 --- a/packages/biz/src/tree/demo/customTitleRender.tsx +++ b/packages/biz/src/tree/demo/customTitleRender.tsx @@ -14,8 +14,11 @@ const demo = () => { diff --git a/packages/biz/src/tree/index.md b/packages/biz/src/tree/index.md index 7a84601..b54b366 100644 --- a/packages/biz/src/tree/index.md +++ b/packages/biz/src/tree/index.md @@ -14,8 +14,15 @@ group: 基本用法 自定义渲染界面 不展示配置项 +自定义配置项 +## API + +**额外参数可以参考 antd - Tree 组件** | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | data | 数据源 | Array[] | [] | - | +| titleRender | 子项自定义 | ReactNode、 undefined | - | - | +| showItemOption | 是否显示额外配置功能 | boolean | true | - | +| customOptions | 自定义配置项 | any | - | - | diff --git a/packages/biz/src/tree/index.tsx b/packages/biz/src/tree/index.tsx index fb90026..1c01493 100644 --- a/packages/biz/src/tree/index.tsx +++ b/packages/biz/src/tree/index.tsx @@ -1,3 +1,10 @@ +import { TreeDataNode } from 'antd'; import BoxTree from './boxTree'; +export interface TreeData extends TreeDataNode { + children?: TreeDataNode['children'] & { + isCamera?: boolean + }[] +} + export default BoxTree; diff --git a/packages/biz/src/treeTransfer/index.md b/packages/biz/src/treeTransfer/index.md index ba09b9d..678b494 100644 --- a/packages/biz/src/treeTransfer/index.md +++ b/packages/biz/src/treeTransfer/index.md @@ -13,6 +13,8 @@ group: 基本用法 和Modal组合使用 +## API + | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | data | 数据源 | Array[] | [] | - | diff --git a/packages/biz/src/treeTransferModal/TreeTransferModal.tsx b/packages/biz/src/treeTransferModal/TreeTransferModal.tsx index 565357e..303cd40 100644 --- a/packages/biz/src/treeTransferModal/TreeTransferModal.tsx +++ b/packages/biz/src/treeTransferModal/TreeTransferModal.tsx @@ -1,7 +1,7 @@ import React, { FC, useState } from 'react'; +import { Modal, ModalProps, Radio, RadioGroupProps, Select, SelectProps, TransferProps, TreeDataNode, TreeProps } from 'antd'; import TreeTransfer from '../treeTransfer'; -import { Modal, ModalProps, Radio, RadioGroupProps, TransferProps, TreeDataNode } from 'antd'; -import { TreeProps } from 'antd/lib'; +import { ALL_LIST, BOX_TYPE_LIST } from '../utils/constants'; export interface TreeTransferModalProps { dataSource: TreeDataNode[] @@ -17,7 +17,10 @@ export interface TreeTransferModalProps { open?: boolean onCancel?: ModalProps['onCancel'] onRadioChange?: RadioGroupProps['onChange'] + onSelect?: SelectProps['onSelect'] modalProps?: ModalProps + radioProps?: RadioGroupProps + selectProps?: SelectProps } const TreeTransferModal: FC = (props) => { @@ -31,11 +34,14 @@ const TreeTransferModal: FC = (props) => { onReset, onRadioChange, onTreeCheck, + onSelect, targetItems, modalProps, + radioProps, + selectProps, } = props - const [type, setType] = useState('box') + const [type, setType] = useState('1') return ( = (props) => { {...modalProps} >
- { - setType(e.target.value) - onRadioChange?.(e) - }} - style={{ marginLeft: '24px', padding: '20px 0' }} - value={type} - > - 盒子 - 盒子组 - +
+ { + setType(e.target.value) + onRadioChange?.(e) + }} + style={{ marginLeft: '24px', padding: '20px 0' }} + value={type} + options={BOX_TYPE_LIST} + {...radioProps} + /> +