fix: biz组件优化 boxSelectTree 组件，添加可以自定义配置按钮功能

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

packages/biz/es/hooks/useIntelligentTracking/index.d.ts

@@ -15,19 +15,13 @@ export declare const getTaskCameraByCenterAndPower: (value: {
         bodyPower: number;
     };
     cameraInfos: Array<Object>;
-    center: [
+    center: [number, number];
-        number,
-        number
-    ];
 }) => Promise<Object[]>;
 /**创建追踪任务 */
 export declare const createIntelligentTrack: (value: {
     images: Array<Object>;
     deviceIds: Array<string>;
-    circleCenter: [
+    circleCenter: [number, number];
-        number,
-        number
-    ];
     model: number;
     circleRadius: number;
     facePower?: number;
@@ -39,10 +33,7 @@ export declare const emitHeartbeat: (smartTrackId: number) => Promise<void>;
 export declare const ModifyTrackCameras: (value: {
     smartTrackId: number;
     deviceIds: Array<number>;
-    centerPoint: [
+    centerPoint: [number, number];
-        number,
-        number
-    ];
 }) => Promise<void>;
 export declare const setIntelligentTrackCircleInfo: (smartTrackId: number, circleCenter: [number, number]) => Promise<void>;
 export declare const getTackCameraInfo: (value: {

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';

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;
+}[];

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 // 只有普通摄像头，没有人脸、没有盒子、直连
-};
+};
+
+// 盒子 Tab 切换
+export var BOX_TYPE_LIST = [{
+  value: '1',
+  label: '盒子'
+}, {
+  value: '2',
+  label: '盒子组'
+}];
+export var ALL_LIST = [{
+  value: '',
+  label: '全部'
+}];

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';

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;
+}[];

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,

packages/biz/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhst/biz",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "业务库",
   "keywords": [
     "business",

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 {

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<BoxSelectTreeProps> = (props) => {
@@ -31,7 +33,9 @@ const BoxSelectTree: FC<BoxSelectTreeProps> = (props) => {
     onCreateSubmit,
     tabsProps,
     searchInputProps,
-    treeProps
+    treeProps,
+    customImport,
+    showOptions = true
   } = props
 
   const onChange = (key: string) => {
@@ -54,6 +58,8 @@ const BoxSelectTree: FC<BoxSelectTreeProps> = (props) => {
           onSearch={onSearch}
           onItemCheck={onItemCheck}
           onItemSelect={onItemSelect}
+          showOptions={showOptions}
+          customImport={customImport}
         />
       )
     },
@@ -72,6 +78,8 @@ const BoxSelectTree: FC<BoxSelectTreeProps> = (props) => {
           onSearch={onSearch}
           onItemCheck={onItemCheck}
           onItemSelect={onItemSelect}
+          showOptions={showOptions}
+          customImport={customImport}
         />
       )
     },

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<BoxGroupPanelProps> = (props) => {
   const {
     searchInputProps,
+    showOptions = true,
+    extraBtns,
     data = [],
     onSearch,
     treeProps,
@@ -31,7 +37,9 @@ const BoxGroupPanel: FC<BoxGroupPanelProps> = (props) => {
     onCreateSubmit,
     onBoxBatchDelete,
     onBoxDelete,
-    boxDataSource
+    onClockClick,
+    boxDataSource,
+    customImport
   } = props
   const [isTreeCheckable, setIsTreeCheckable] = useState(false)
   const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
@@ -40,8 +48,7 @@ const BoxGroupPanel: FC<BoxGroupPanelProps> = (props) => {
   const createFormRef = useRef<
     ProFormInstance<{
       name: string;
-      company?: string;
+      boxList?: any[];
-      useMode?: string;
     }>
   >()
 
@@ -75,89 +82,109 @@ const BoxGroupPanel: FC<BoxGroupPanelProps> = (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 (
     <div style={{ padding: '0 16px' }}>
+      {/* 盒子选择弹框 */}
       <TreeTransferModal
         open={boxChoiceOpen}
         onCancel={() => 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}                       // 重置按钮事件
+        onReset={onBoxChoiceReset}                       // 重置按钮事件
-        onOk={onOk}                             // 确定按钮事件
+        onOk={onBoxChoiceOk}                             // 确定按钮事件
         onTreeCheck={onTreeCheck}               // 树check选中事件
         onItemDelete={onItemDelete}             // 右侧点击删除事件
       />
-      <Space size={12} direction='vertical'>
+      <Space size={12} direction='vertical' style={{ width: '100%' }}>
-        <Space>
+        <Space size={4}  style={{ width: '100%', justifyContent: 'space-between' }} >
           <Input size='middle' onChange={(e) => onSearch?.(e)} placeholder='请输入盒子名称' {...searchInputProps} />
-          <Button style={{ width: '80px' }} type='primary' >导入盒子</Button>
+          {customImport || (
+            <>
+              <Button type="text" onClick={() => handleCheckable()} icon={!isTreeCheckable ? <DiffOutlined /> : <SwitcherOutlined />} />
+              <Button type="text" onClick={() => onClockClick?.()} icon={<ClockCircleOutlined />} />
+            </>
+          )}
         </Space>
-        <Space align='center'>
+        {/* 是否显示操作按钮 */}
-          <ModalForm
+        {showOptions && (
-            width={'600px'}
+          <>
-            formRef={createFormRef}
+            <Space align='center'>
-            title="新建组"
+              <Button type='text' style={{ padding: '4px 8px' }} icon={<ImportOutlined />} >导入盒子</Button>
-            modalProps={{ destroyOnClose: true }}
+              <Divider type="vertical" style={{ margin: '8px 0' }} />
-            layout='horizontal'
+              <ModalForm<{
-            labelCol={{ span: 6 }}
+                name: string
-            wrapperCol={{ span: 18 }}
+                boxList?: any[]
-            trigger={<Button type='link' >新建组</Button>}
+              }>
-            submitter={{
+                width={'600px'}
-              searchConfig: {
+                formRef={createFormRef}
-                submitText: '确定',
+                title="新建组"
-                resetText: '取消',
+                modalProps={{ destroyOnClose: true }}
-              },
+                layout='horizontal'
-            }}
+                labelCol={{ span: 6 }}
-            onFinish={onCreateSubmit}
+                wrapperCol={{ span: 18 }}
-          >
+                trigger={<Button type='text' style={{ padding: '4px 8px' }} icon={<FolderAddOutlined />} >新建组</Button>}
-            <ProFormText
+                submitter={{
-              rules={[
+                  searchConfig: {
-                {
+                    submitText: '确定',
-                  required: true,
+                    resetText: '取消',
-                },
+                  },
-              ]}
+                }}
-              width="md"
+                onFinish={onCreateSubmit}
-              name="name"
+              >
-              label="盒子组名称"
+                <ProFormText
-              placeholder="请输入盒子名称"
+                  rules={[
-            />
+                    {
-            <ProFormText
+                      required: true,
-              width="md"
+                    },
-              name="boxList"
+                  ]}
-              label="盒子选择"
+                  width="md"
-              placeholder="已选择0个盒子"
+                  name="name"
-              fieldProps={{
+                  label="盒子组名称"
-                readOnly: true,
+                  placeholder="请输入盒子名称"
-                suffix: (
+                />
-                  <Space>
+                <ProFormText
-                    <a onClick={() => {
+                  width="md"
-                      createFormRef.current?.setFieldValue('boxList', null)
+                  name="boxList"
-                    }} >恢复默认</a>
+                  label="盒子选择"
-                    <a onClick={() => setBoxChoiceOpen(true)}>范围选择</a>
+                  fieldProps={{
-                  </Space>
+                    readOnly: true,
-                )
+                    value: `已选择${createFormRef.current?.getFieldValue('boxList')?.length || 0}个盒子`,
-              }}
+                    suffix: (
-            />
+                      <Space>
-          </ModalForm>
+                        <a onClick={() => {
-          <Divider type="vertical" />
+                          createFormRef.current?.setFieldValue('boxList', null)
-          {/* @ts-ignore */}
+                          onBoxChoiceReset()
-          <Button danger type='link' disabled={treeProps?.checkedKeys?.length <= 0} onClick={onBoxBatchDelete} >删除</Button>
+                        }} >恢复默认</a>
-          <Divider type="vertical" />
+                        <a onClick={() => setBoxChoiceOpen(true)}>范围选择</a>
-          <Button type="link" onClick={() => handleCheckable()} icon={isTreeCheckable ? <DiffOutlined /> : <SwitcherOutlined />} />
+                      </Space>
-          <Button type="link" onClick={() => handleCheckable()} icon={isTreeCheckable ? <DiffOutlined /> : <SwitcherOutlined />} />
+                    )
-        </Space>
+                  }}
-        <Divider style={{ margin: 0 }} />
+                />
+              </ModalForm>
+              <Divider type="vertical" style={{ margin: '8px 0' }} />
+              {/* @ts-ignore */}
+              <Button danger type='text' style={{ padding: '4px 8px' }} icon={<CloseCircleOutlined />} disabled={treeProps?.checkedKeys?.length <= 0} onClick={onBoxBatchDelete} >删除</Button>
+            </Space>
+            <Divider style={{ margin: 0 }} />
+          </>
+        )}
+        {extraBtns}
         <BoxTree
           treeCheckable={isTreeCheckable}
           data={data}

packages/biz/src/boxSelectTree/demo/basic.tsx

@@ -2,10 +2,12 @@ import React, { useState } from 'react';
 import { BoxSelectTree } from '@zhst/biz';
 import { treeData, boxDataSource } from './mock'
 import { Select, TreeProps, Modal, Checkbox } from 'antd';
+import { BOX_TYPE_LIST } from '../../utils/constants';
 
 const { Option } = Select
 
 const demo = () => {
+  const [activeKey, setActiveKey] = useState('1')
   const [searchType, setSearchType] = useState('1')
   const [searchVal, setSearchVal] = useState('')
   const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
@@ -32,18 +34,24 @@ const demo = () => {
   }
 
   return (
-    <div style={{ border: '1px solid #ccc', width: '320px' }}>
+    <div style={{ border: '1px solid #ccc', width: '320px', minHeight: '900px' }}>
       {contextHolder}
       <BoxSelectTree
-        data={treeData}
+        data={activeKey === '1' ? treeData : boxDataSource}
         boxDataSource={boxDataSource}
         onSearch={e => 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: (
             <Select
@@ -54,8 +62,9 @@ const demo = () => {
               }}
               style={{ width: '72px' }}
             >
-              <Option value="1">盒子</Option>
+              {BOX_TYPE_LIST.map(item => (
-              <Option value="2">盒子组</Option>
+                <Option value={item.value}>{item.label}</Option>
+              ))}
             </Select>
           ),
           onChange: e => setSearchVal(e.target.value),

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',
+    key: '0-1-3',
-    title: '分组0-0',
+    title: '分组0-1-3',
-    isLeaf: false,
-    checkable: false,
-  },
-  {
-    key: '0-1',
-    title: '分组0-1',
     isLeaf: false,
     children: [
-      { key: '0-1-0', title: '分组0-1-0', isLeaf: true, checkable: false },
+      { key: '0-1-3-1', title: '分组0-1-3-1', isLeaf: true, isCamera: true },
-      { key: '0-1-1', title: '分组0-1-1', isLeaf: true, checkable: false },
+      { key: '0-1-3-2', title: '分组0-1-3-2', isLeaf: true, isCamera: true },
-      { key: '0-1-2', title: '分组0-1-2', isLeaf: true, checkable: false },
+      { key: '0-1-3-3', title: '分组0-1-3-3', isLeaf: true, isCamera: true },
-      {
-        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-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, },
 ];

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<string[]>([]);
+
+  const onTreeCheck: TreeProps['onCheck'] = (keys: any) => {
+    setCheckedKeys(keys)
+  }
+
+  return (
+    <div style={{ border: '1px solid #ccc', width: '340px', minHeight: '900px' }}>
+      <BoxSelectTree
+        data={activeKey === '1' ? treeData : boxDataSource}
+        boxDataSource={boxDataSource}
+        onSearch={e => 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={<Button type="text" icon={<FilterOutlined />} />}
+        searchInputProps={{
+          addonBefore: (
+            <Select
+              value={searchType}
+              onChange={_type => {
+                setSearchType(_type)
+                setSearchVal('')
+              }}
+              style={{ width: '72px' }}
+            >
+              {BOX_TYPE_LIST.map(item => (
+                <Option value={item.value}>{item.label}</Option>
+              ))}
+            </Select>
+          ),
+          onChange: e => setSearchVal(e.target.value),
+          value: searchVal
+        }}
+        treeProps={{
+          checkedKeys
+        }}
+      />
+    </div>
+  );
+};
+
+export default demo;

packages/biz/src/boxSelectTree/index.md

@@ -13,7 +13,9 @@ group:
 ## 代码演示
 
 <code src="./demo/basic.tsx">基本用法</code>
+<code src="./demo/noOptions.tsx">不显示其它按钮</code>
 
+## 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 | - |
+

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'

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<BoxTreeProps> = (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<React.Key>('')
+
+  const cameraStatus = new Map([
+      ['0', 'success'],
+      ['1', 'error']
+    ])
 
   return (
     <Tree
       checkable={treeCheckable}
       blockNode
-      onSelect={onItemSelect}
+      onSelect={(selectedKeys, info) => {
+        setCheckedItem(selectedKeys[0])
+        onItemSelect?.(selectedKeys, info)
+      }}
       onCheck={onItemCheck}
       treeData={data}
       titleRender={(_nodeData) => {
         return (
           <div className={`${componentName}-item-render`}>
-            {!_nodeData.children && <Badge style={{ marginRight: '6px' }} status="success" />}
+            {/* @ts-ignore */}
-            {_nodeData.title as any}
+            {!_nodeData.children && _nodeData.isCamera && <Badge style={{ marginRight: '6px' }} status={cameraStatus.get('0')} />}
-            {showItemOption && <Space className={`${componentName}-item-render_right`} style={{ float:'right' }} >
+            <span
-              <ModalForm
+              // @ts-ignore
-                title="重命名"
+              style={(checkedItem === _nodeData.key) && _nodeData.isCamera ? {
-                width={600}
+                color: token.colorPrimary
-                modalProps={{ destroyOnClose: true }}
+              } : {}}
-                layout='horizontal'
+            >
-                labelCol={{ span: 6 }}
+              {_nodeData.title as any}
-                wrapperCol={{ span: 18 }}
+            </span>
-                trigger={<EditOutlined />}
+            {showItemOption && (
-                submitter={{
+              <Space className={`${componentName}-item-render_right`} style={{ float:'right' }} >
-                  searchConfig: {
+                {customOptions || (
-                    submitText: '确定',
+                  <>
-                    resetText: '取消',
+                    <ModalForm
-                  },
+                      title="重命名"
-                }}
+                      width={600}
-                onFinish={async (value) => onRenameFinish?.(value, _nodeData)}
+                      modalProps={{ destroyOnClose: true }}
-              >
+                      layout='horizontal'
-                <ProFormText
+                      labelCol={{ span: 6 }}
-                  rules={[
+                      wrapperCol={{ span: 18 }}
-                    {
+                      trigger={<EditOutlined />}
-                      required: true,
+                      submitter={{
-                    },
+                        searchConfig: {
-                  ]}
+                          submitText: '确定',
-                  width="md"
+                          resetText: '取消',
-                  name="name"
+                        },
-                  label="盒子名称"
+                      }}
-                  placeholder="请输入盒子名称"
+                      onFinish={async (value) => onRenameFinish?.(value, _nodeData)}
-                />
+                    >
-              </ModalForm>
+                      <ProFormText
-              <SettingOutlined onClick={() => onItemSetting?.(_nodeData)} />
+                        rules={[
-              <CloseOutlined onClick={() => onItemDelete?.(_nodeData)} />
+                          {
-            </Space>}
+                            required: true,
+                          },
+                        ]}
+                        width="md"
+                        name="name"
+                        label="盒子名称"
+                        placeholder="请输入盒子名称"
+                      />
+                    </ModalForm>
+                    <SettingOutlined onClick={() => onItemSetting?.(_nodeData)} />
+                    <CloseOutlined onClick={() => onItemDelete?.(_nodeData)} />
+                  </>
+                )}
+              </Space>
+            )}
           </div>
         )
       }}

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 (
+    <div style={{ width: '320px' }}>
+      <Tree
+        data={treeData}
+        customOptions={(
+          <>
+            <PlayCircleOutlined />
+            <SettingOutlined />
+            <LoadingOutlined />
+          </>
+        )}
+      />
+    </div>
+  );
+};
+
+export default demo;

packages/biz/src/tree/demo/customTitleRender.tsx

@@ -14,8 +14,11 @@ const demo = () => {
             <div>
               {title}
               <div style={{ float: 'right' }} >
-                <Tooltip placement="right" title={'存在0个'}>
+                <Tooltip
-                  <a >包含0个</a>
+                  placement="right"
+                  title={'存在0个'}
+                >
+                  <a>在0个组中包含</a>
                 </Tooltip>
               </div>
             </div>

packages/biz/src/tree/index.md

@@ -14,8 +14,15 @@ group:
 <code src="./demo/basic.tsx">基本用法</code>
 <code src="./demo/customTitleRender.tsx">自定义渲染界面</code>
 <code src="./demo/noOption.tsx">不展示配置项</code>
+<code src="./demo/customOptions.tsx">自定义配置项</code>
 
+## API
+
+**额外参数可以参考 antd - Tree 组件**
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | data | 数据源 | Array[] | [] | - |
+| titleRender | 子项自定义 | ReactNode、 undefined | - | - |
+| showItemOption | 是否显示额外配置功能 | boolean | true | - |
+| customOptions | 自定义配置项 | any | - | - |

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;

packages/biz/src/treeTransfer/index.md

@@ -13,6 +13,8 @@ group:
 <code src="./demo/basic.tsx">基本用法</code>
 <code src="./demo/withModal.tsx">和Modal组合使用</code>
 
+## API
+
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | data | 数据源 | Array[] | [] | - |

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 { ALL_LIST, BOX_TYPE_LIST } from '../utils/constants';
-import { TreeProps } from 'antd/lib';
 
 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<TreeTransferModalProps> = (props) => {
@@ -31,11 +34,14 @@ const TreeTransferModal: FC<TreeTransferModalProps> = (props) => {
     onReset,
     onRadioChange,
     onTreeCheck,
+    onSelect,
     targetItems,
     modalProps,
+    radioProps,
+    selectProps,
   } = props
 
-  const [type, setType] = useState('box')
+  const [type, setType] = useState('1')
 
   return (
     <Modal
@@ -48,17 +54,25 @@ const TreeTransferModal: FC<TreeTransferModalProps> = (props) => {
       {...modalProps}
     >
       <div>
-        <Radio.Group
+        <div>
-          onChange={e => {
+          <Radio.Group
-            setType(e.target.value)
+            onChange={e => {
-            onRadioChange?.(e)
+              setType(e.target.value)
-          }}
+              onRadioChange?.(e)
-          style={{ marginLeft: '24px', padding: '20px 0' }}
+            }}
-          value={type}
+            style={{ marginLeft: '24px', padding: '20px 0' }}
-        >
+            value={type}
-          <Radio value={'box'}>盒子</Radio>
+            options={BOX_TYPE_LIST}
-          <Radio value={'boxGroup'}>盒子组</Radio>
+            {...radioProps}
-        </Radio.Group>
+          />
+          <Select
+            defaultValue={''}
+            style={{ marginLeft: 200, width: 150 }}
+            options={ALL_LIST}
+            onSelect={onSelect}
+            {...selectProps}
+          />
+        </div>
         {type === 'box' ?
           (
             <TreeTransfer

packages/biz/src/treeTransferModal/demo/basic.tsx

@@ -7,7 +7,7 @@ import { boxDataSource } from './mock'
 const App: React.FC = () => {
   const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
   const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(true)
 
   const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => {
     let _targetItems: TreeDataNode[] = []
@@ -47,7 +47,7 @@ const App: React.FC = () => {
       <TreeTransferModal
         open={open}
         onCancel={() => setOpen(false)}
-        onRadioChange={() => setOpen(false)}    // 顶部 radio 事件
+        onRadioChange={(e) => console.log('radioChange', e)}    // 顶部 radio 事件
         dataSource={boxDataSource}                   // 数据源
         targetItems={targetItems}               // 右侧选中项
         checkedKeys={checkedKeys}               // 左侧选中

packages/biz/src/treeTransferModal/index.md

@@ -12,6 +12,8 @@ group:
 
 <code src="./demo/basic.tsx">基本用法</code>
 
+## API
+
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | data | 数据源 | Array[] | [] | - |

packages/biz/src/utils/constants.ts

@@ -25,3 +25,13 @@ export const DeviceTab = {
   REAL_CAMERA_ONLYFACE: 7,
   REAL_CAMERA_NOFACE_NOBOX_NODIRECONNECT: 8, // 只有普通摄像头，没有人脸、没有盒子、直连
 };
+
+// 盒子 Tab 切换
+export const BOX_TYPE_LIST = [
+  { value: '1', label: '盒子' },
+  { value: '2', label: '盒子组' }
+]
+
+export const ALL_LIST = [
+  { value: '', label: '全部' }
+]

packages/func/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @zhst/utils
 
+## 0.7.2
+
+### Patch Changes
+
+- 优化 boxSelectTree 组件，添加可以自定义配置按钮功能
+- Updated dependencies
+  - @zhst/request@0.8.1
+
+## 0.7.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/request@0.8.0
+
 ## 0.7.0
 
 ### Minor Changes

packages/func/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhst/func",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "函数合集",
   "keywords": [
     "hooks"

packages/hooks/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @zhst/hooks
 
+## 0.8.1
+
+### Patch Changes
+
+- 优化 boxSelectTree 组件，添加可以自定义配置按钮功能
+- Updated dependencies
+  - @zhst/func@0.7.2
+
+## 0.8.0
+
+### Minor Changes
+
+- @zhst/biz 优化数组件
+
+### Patch Changes
+
+- @zhst/func@0.7.1
+
 ## 0.7.0
 
 ### Minor Changes

packages/hooks/es/useActivateWrapper/index.js

@@ -48,4 +48,4 @@ export var useActivateState = function useActivateState() {
   });
   return isActive;
 };
-export default useActivateWrapper;
+export default useActivateWrapper;

packages/hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhst/hooks",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "hooks合集",
   "keywords": [
     "hooks"

packages/meta/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @zhst/utils
 
+## 0.8.2
+
+### Patch Changes
+
+- 优化 boxSelectTree 组件，添加可以自定义配置按钮功能
+- Updated dependencies
+  - @zhst/hooks@0.8.1
+  - @zhst/func@0.7.2
+  - @zhst/meta@0.8.2
+
+## 0.8.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/hooks@0.8.0
+  - @zhst/func@0.7.1
+  - @zhst/meta@0.8.1
+
 ## 0.8.0
 
 ### Minor Changes

packages/meta/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhst/meta",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "原子组件",
   "keywords": [
     "meta",

packages/request/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @zhst/request
 
+## 0.8.1
+
+### Patch Changes
+
+- 优化 boxSelectTree 组件，添加可以自定义配置按钮功能
+
+## 0.8.0
+
+### Minor Changes
+
+- @zhst/biz 优化数组件
+
 ## 0.7.0
 
 ### Minor Changes

packages/request/lib/index.js

@@ -1,155 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  ResponseError: () => ResponseError,
-  User: () => User,
-  default: () => src_default,
-  doRequest: () => doRequest,
-  req: () => req
-});
-module.exports = __toCommonJS(src_exports);
-var import_umi_request = require("umi-request");
-var import_lodash_es = require("lodash-es");
-var import_antd = require("antd");
-var import_base_64 = __toESM(require("base-64"));
-var User = /* @__PURE__ */ ((User2) => {
-  User2["TOKEN_KEY"] = "USER-TOKEN";
-  User2["USER_KEY"] = "USER";
-  return User2;
-})(User || {});
-var ResponseError = class extends Error {
-  constructor(response, text, data, request, type = "ResponseError") {
-    super(text || response.statusText);
-    this.name = "ResponseError";
-    this.data = data;
-    this.response = response;
-    this.request = request;
-    this.type = type;
-  }
-};
-var req = (0, import_umi_request.extend)({
-  getResponse: true,
-  // timeout: 1000,
-  parseResponse: false
-});
-req.use(async (ctx, next) => {
-  const { req: req2 } = ctx;
-  const { toast = true } = (req2 == null ? void 0 : req2.options) || {};
-  try {
-    await next();
-    const { res } = ctx;
-    const d = await res.text();
-    if (res.status === 401) {
-      localStorage.removeItem("USER-TOKEN" /* TOKEN_KEY */);
-      localStorage.removeItem("USER" /* USER_KEY */);
-      import_antd.message.warning("登录过期，请重新登录!");
-      return;
-    }
-    const isEmptyRes = d === "";
-    if (!res)
-      return;
-    const body = !isEmptyRes ? JSON.parse(d) : d;
-    if (res.status >= 200 && res.status < 300) {
-      ctx.res = body;
-    } else {
-      let errMsg = res.headers.get("Grpc-Metadata-Errorx-Message");
-      if (errMsg) {
-        errMsg = import_base_64.default.decode(errMsg);
-      } else if (!errMsg && (0, import_lodash_es.get)(body, "message")) {
-        errMsg = `${(0, import_lodash_es.get)(body, "message")}`;
-      } else {
-        errMsg = "您的网络发生异常，无法连接服务器";
-      }
-      toast && import_antd.message.error(errMsg);
-      throw new ResponseError(res, errMsg, d, req2, "CustomError");
-    }
-  } catch (error) {
-    if ((0, import_lodash_es.get)(error, "type") !== "CustomError") {
-      toast && import_antd.message.error("您的网络发生异常，无法连接服务器");
-    }
-    throw error;
-  }
-});
-var doRequest = (cgi, option) => {
-  const {
-    method,
-    url,
-    baseUrl,
-    data = {},
-    useBaseUrl = true,
-    originUrl = false,
-    refererSuffix = ""
-  } = cgi;
-  const token = localStorage.getItem("USER-TOKEN" /* TOKEN_KEY */);
-  let newUrl = "";
-  if (useBaseUrl) {
-    newUrl = `${baseUrl}${url}`;
-  } else {
-    newUrl = `http://10.0.0.7:32223${url}`;
-  }
-  if (originUrl) {
-    newUrl = url;
-  }
-  const regex = /\/:(\w+)/g;
-  const params = [];
-  let matches;
-  while ((matches = regex.exec(newUrl)) != null) {
-    if (matches[1]) {
-      params.push(matches[1]);
-    }
-  }
-  params.forEach(function(name) {
-    let d = data == null ? void 0 : data[name];
-    if (d == null) {
-      d = "";
-    }
-    newUrl = newUrl.replace(`:${name}`, d);
-  });
-  const newData = (0, import_lodash_es.omit)(data, params);
-  const paramObj = method.toLowerCase() === "get" ? { params: newData } : { data: newData };
-  return req(newUrl, {
-    method,
-    ...paramObj,
-    ...option,
-    headers: {
-      authorization: token,
-      ...refererSuffix ? { zhst_referer: `${baseUrl}${refererSuffix}` } : {}
-    }
-  });
-};
-var src_default = doRequest;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ResponseError,
-  User,
-  doRequest,
-  req
-});

packages/request/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhst/request",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "请求库",
   "keywords": [
     "request",