zy-react-library 1.0.35 → 1.0.37

package/components/FormBuilder/FormBuilder.d.ts

@@ -1,4 +1,4 @@
-import type { FormInstance, FormProps } from "antd/es/form";
+import type { FormProps } from "antd/es/form";
 import type { Gutter } from "antd/es/grid/row";
 import type { FC, ReactNode } from "react";
 import type { FormOption, FormValues } from "./FormItemsRenderer";
@@ -6,7 +6,7 @@ import type { FormOption, FormValues } from "./FormItemsRenderer";
 /**
  * FormBuilder 组件属性
  */
-export interface FormBuilderProps extends Omit<FormProps, "form"> {
+export interface FormBuilderProps extends FormProps {
   /** 表单初始值 */
   values?: FormValues;
   /** 表单配置项数组 */
@@ -15,24 +15,22 @@ export interface FormBuilderProps extends Omit<FormProps, "form"> {
   gutter?: Gutter | [Gutter, Gutter];
   /** 占据栅格列数，默认 12 */
   span?: number | string;
-  /** 表单实例（通过 Form.useForm() 创建） */
-  form?: FormInstance;
   /** 自动生成必填规则，默认 true */
   useAutoGenerateRequired?: boolean;
-  /** 表单提交回调 */
-  onFinish?: (values: FormValues) => void;
   /** 是否显示操作按钮区域，默认 true */
   showActionButtons?: boolean;
   /** 提交按钮文字，默认为"提交" */
   submitButtonText?: string;
-  /** 重置按钮文字，默认为"重置" */
-  resetButtonText?: string;
+  /** 取消按钮文字，默认为"取消" */
+  cancelButtonText?: string;
   /** 是否显示提交按钮，默认 true */
   showSubmitButton?: boolean;
-  /** 是否显示重置按钮，默认 true */
-  showResetButton?: boolean;
+  /** 是否显示取消按钮，默认 true */
+  showCancelButton?: boolean;
   /** 自定义操作按钮组 */
   customActionButtons?: ReactNode;
+  /** 额外操作按钮组 */
+  extraActionButtons?: ReactNode;
 }
 
 /**

package/components/FormBuilder/FormBuilder.js

@@ -11,23 +11,19 @@ const FormBuilder = (props) => {
     gutter = 24,
     span = 12,
     labelCol = { span: 4 },
-    onFinish,
     useAutoGenerateRequired = true,
     showActionButtons = true,
     submitButtonText = "提交",
-    resetButtonText = "重置",
+    cancelButtonText = "取消",
     showSubmitButton = true,
-    showResetButton = true,
+    showCancelButton = true,
     customActionButtons,
-    form: externalForm,
+    extraActionButtons,
     ...restProps
   } = props;
 
-  const [internalForm] = Form.useForm();
-  const form = externalForm || internalForm;
-
-  const handleReset = () => {
-    form.resetFields();
+  const handleCancel = () => {
+    window.history.back();
   };
 
   return (
@@ -35,9 +31,7 @@ const FormBuilder = (props) => {
       labelCol={labelCol}
       scrollToFirstError
       wrapperCol={{ span: 24 - labelCol.span }}
-      onFinish={onFinish}
       initialValues={values}
-      form={form}
       style={{ width: `calc(100% - ${gutter * 2}px)`, margin: `0 auto` }}
       {...restProps}
     >
@@ -60,11 +54,12 @@ const FormBuilder = (props) => {
                     {submitButtonText}
                   </Button>
                 )}
-                {showResetButton && (
-                  <Button onClick={handleReset} style={{ marginRight: 8 }}>
-                    {resetButtonText}
+                {showCancelButton && (
+                  <Button onClick={handleCancel} style={{ marginRight: 8 }}>
+                    {cancelButtonText}
                   </Button>
                 )}
+                {extraActionButtons}
               </Space>
             )}
           </Col>

package/components/FormBuilder/FormItemsRenderer.js

@@ -21,13 +21,13 @@ const { RangePicker } = DatePicker;
  * 表单项渲染器组件
  */
 const FormItemsRenderer = ({
-                             options,
-                             labelCol,
-                             span = 12,
-                             collapse = false,
-                             useAutoGenerateRequired = true,
-                             initialValues,
-                           }) => {
+  options,
+  labelCol,
+  span = 12,
+  collapse = false,
+  useAutoGenerateRequired = true,
+  initialValues,
+}) => {
   const form = Form.useFormInstance();
 
   // 获取表单值，优先使用 initialValues
@@ -298,38 +298,38 @@ const FormItemsRenderer = ({
             option.customizeRender
               ? (renderFormControl(option))
               : (
-                <Form.Item
-                  key={option.name || index}
-                  noStyle
-                  shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
-                  dependencies={option.dependencies || option?.componentProps?.dependencies}
-                >
-                  {() => {
+                  <Form.Item
+                    key={option.name || index}
+                    noStyle
+                    shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
+                    dependencies={option.dependencies || option?.componentProps?.dependencies}
+                  >
+                    {() => {
                     // 支持动态计算 hidden
-                    const hidden = typeof option.hidden === "function"
-                      ? option.hidden(getFormValues())
-                      : (option.hidden ?? false);
-
-                    if (hidden)
-                      return null;
-
-                    return (
-                      <Col key={option.name || index} span={itemSpan} style={style}>
-                        <Form.Item
-                          name={option.name}
-                          label={renderLabel(option)}
-                          rules={getRules(option)}
-                          labelCol={itemLabelCol}
-                          wrapperCol={itemWrapperCol}
-                          {...getFormItemProps(option)}
-                        >
-                          {renderFormControl(option)}
-                        </Form.Item>
-                      </Col>
-                    );
-                  }}
-                </Form.Item>
-              )
+                      const hidden = typeof option.hidden === "function"
+                        ? option.hidden(getFormValues())
+                        : (option.hidden ?? false);
+
+                      if (hidden)
+                        return null;
+
+                      return (
+                        <Col key={option.name || index} span={itemSpan} style={style}>
+                          <Form.Item
+                            name={option.name}
+                            label={renderLabel(option)}
+                            rules={getRules(option)}
+                            labelCol={itemLabelCol}
+                            wrapperCol={itemWrapperCol}
+                            {...getFormItemProps(option)}
+                          >
+                            {renderFormControl(option)}
+                          </Form.Item>
+                        </Col>
+                      );
+                    }}
+                  </Form.Item>
+                )
           );
         }
 
@@ -348,17 +348,17 @@ const FormItemsRenderer = ({
               option.customizeRender
                 ? (renderFormControl(option))
                 : (
-                  <Form.Item
-                    name={option.name}
-                    label={renderLabel(option)}
-                    rules={getRules(option)}
-                    labelCol={itemLabelCol}
-                    wrapperCol={itemWrapperCol}
-                    {...getFormItemProps(option)}
-                  >
-                    {renderFormControl(option)}
-                  </Form.Item>
-                )
+                    <Form.Item
+                      name={option.name}
+                      label={renderLabel(option)}
+                      rules={getRules(option)}
+                      labelCol={itemLabelCol}
+                      wrapperCol={itemWrapperCol}
+                      {...getFormItemProps(option)}
+                    >
+                      {renderFormControl(option)}
+                    </Form.Item>
+                  )
             }
           </Col>
         );

package/components/Icon/ResetIcon/index.js

@@ -1,7 +1,7 @@
-import { UndoOutlined } from "@ant-design/icons";
+import { ReloadOutlined } from "@ant-design/icons";
 
 const ResetIcon = props => (
-  <UndoOutlined {...props} />
+  <ReloadOutlined {...props} />
 );
 
 ResetIcon.displayName = "ResetIcon";

package/components/ImportFile/index.js

@@ -75,7 +75,7 @@ const ImportFile = (props) => {
       >
         {children && typeof children === "function" ? children({ form }) : children}
         <Form.Item label="附件" name="file" rules={[{ required: true, message: "附件不能为空" }]}>
-          <Upload accept=".xls,.xlsx" listType="text" />
+          <Upload accept=".xls,.xlsx" listType="text" maxCount={1} />
         </Form.Item>
       </Form>
     </Modal>

package/components/LeftTree/Basic/index.d.ts

@@ -0,0 +1,25 @@
+import type { TreeProps } from "antd/es/tree";
+import type { FC } from "react";
+
+/**
+ * 组件属性
+ */
+export interface BasicLeftTreeProps extends TreeProps {
+  /** 树形数据 title 字段，默认 name */
+  nameKey?: string;
+  /** 树形数据 key 字段，默认 id */
+  idKey?: string;
+  /** 树形数据 children 字段，默认 childrenList */
+  childrenKey?: string;
+  /** 决定 onGetNodePaths 是否包含自身节点，默认 true */
+  onGetNodePathsIsIncludeOneself?: boolean;
+  /** 获取父级节点 */
+  onGetNodePaths?: () => Record<string, any>[];
+}
+
+/**
+ * 基础左侧树组件（不建议直接使用此组件，二次继承使用）
+ */
+declare const BasicLeftTree: FC<BasicLeftTreeProps>;
+
+export default BasicLeftTree;

package/components/LeftTree/Basic/index.js

@@ -0,0 +1,184 @@
+import { Input, Tree } from "antd";
+import { useEffect, useState } from "react";
+
+const { Search } = Input;
+
+/**
+ * 基础左侧树组件（不建议直接使用此组件，二次继承使用）
+ */
+const BasicLeftTree = (props) => {
+  const {
+    onSelect,
+    onGetNodePaths,
+    onGetNodePathsIsIncludeOneself = true,
+    expandedKeys: externalExpandedKeys,
+    treeData = [],
+    nameKey = "name",
+    idKey = "id",
+    childrenKey = "childrenList",
+    ...restProps
+  } = props;
+
+  const [expandedKeys, setExpandedKeys] = useState([]);
+  const [searchValue, setSearchValue] = useState("");
+  const [autoExpandParent, setAutoExpandParent] = useState(true);
+
+  useEffect(() => {
+    setExpandedKeys(externalExpandedKeys);
+  }, [externalExpandedKeys]);
+
+  // 展开所有包含匹配项的父节点
+  const getAllExpandedKeys = (data, searchValue, keys = []) => {
+    data.forEach((node) => {
+      if (node[childrenKey]) {
+        if (node[nameKey].includes(searchValue)
+          || node[childrenKey].some(child => child[nameKey].includes(searchValue))) {
+          keys.push(node[idKey]);
+        }
+        getAllExpandedKeys(node[childrenKey], searchValue, keys);
+      }
+    });
+    return keys;
+  };
+
+  // 过滤树数据，只保留匹配的节点
+  const filterTreeData = (data, searchValue) => {
+    if (!searchValue) {
+      return data;
+    }
+
+    return data.reduce((acc, node) => {
+      // 检查当前节点是否匹配
+      const isMatch = node[nameKey].includes(searchValue);
+
+      // 递归处理子节点
+      const filteredChildren = node[childrenKey] ? filterTreeData(node[childrenKey], searchValue) : [];
+
+      // 如果当前节点匹配或者有匹配的子节点，则保留该节点
+      if (isMatch || filteredChildren.length > 0) {
+        acc.push({
+          ...node,
+          [childrenKey]: filteredChildren.length > 0 ? filteredChildren : undefined,
+        });
+      }
+
+      return acc;
+    }, []);
+  };
+
+  const handleExpand = (newExpandedKeys) => {
+    setExpandedKeys(newExpandedKeys);
+    setAutoExpandParent(false);
+  };
+
+  const getNodePaths = (data, targetId, idKey, childrenKey, path = [], isIncludeOneself) => {
+    for (let i = 0; i < data.length; i++) {
+      const node = data[i];
+      const newPath = [...path, node];
+
+      // 找到目标节点，根据isIncludeOneself决定是否包含自身
+      if (node[idKey] === targetId) {
+        if (isIncludeOneself)
+          return newPath; // 包含自身
+        else
+          return path; // 不包含自身，只返回父节点路径
+      }
+
+      // 递归查找子节点
+      if (node[childrenKey] && node[childrenKey].length > 0) {
+        const result = getNodePaths(node[childrenKey], targetId, idKey, childrenKey, newPath, isIncludeOneself);
+        if (result) {
+          return result;
+        }
+      }
+    }
+
+    return null;
+  };
+
+  const handleSelect = (selectedKeys, event) => {
+    if (selectedKeys.length > 0) {
+      const selectedNodeId = selectedKeys[0];
+      const parentNodes = getNodePaths(treeData, selectedNodeId, idKey, childrenKey, onGetNodePathsIsIncludeOneself);
+      onGetNodePaths?.(parentNodes);
+    }
+    onSelect?.(selectedKeys, event);
+  };
+
+  const onFilterTreeData = (value) => {
+    setSearchValue(value);
+    setAutoExpandParent(true);
+
+    if (!value) {
+      setExpandedKeys([]);
+      return;
+    }
+
+    const expandedKeys = getAllExpandedKeys(treeData, value);
+
+    setExpandedKeys(expandedKeys);
+  };
+
+  const onSearch = async (value) => {
+    if (value === searchValue)
+      return;
+    onFilterTreeData(value);
+  };
+
+  // 渲染带高亮的标题
+  const renderTitle = (name) => {
+    if (!searchValue)
+      return name;
+
+    const index = name.indexOf(searchValue);
+    if (index === -1)
+      return name;
+
+    const beforeStr = name.substring(0, index);
+    const afterStr = name.substring(index + searchValue.length);
+
+    return (
+      <span>
+        {beforeStr}
+        <span style={{ color: "#f50" }}>{searchValue}</span>
+        {afterStr}
+      </span>
+    );
+  };
+
+  // 递归处理树节点标题显示
+  const processTreeData = (data) => {
+    return data.map(node => ({
+      ...node,
+      [nameKey]: renderTitle(node[nameKey]),
+      [childrenKey]: node[childrenKey] ? processTreeData(node[childrenKey]) : undefined,
+    }));
+  };
+
+  // 过滤并处理树数据
+  const filteredTreeData = filterTreeData(treeData, searchValue);
+  const processedTreeData = processTreeData(filteredTreeData);
+
+  return (
+    <div style={{ width: 300 }}>
+      <Search
+        style={{ marginBottom: 8 }}
+        placeholder="输入关键字进行过滤"
+        onSearch={onSearch}
+      />
+      <Tree
+        onExpand={handleExpand}
+        onSelect={handleSelect}
+        autoExpandParent={autoExpandParent}
+        expandedKeys={expandedKeys}
+        treeData={processedTreeData}
+        fieldNames={{ title: nameKey, key: idKey, children: childrenKey }}
+        {...restProps}
+      />
+    </div>
+  );
+};
+
+BasicLeftTree.displayName = "BasicLeftTree";
+
+export default BasicLeftTree;

package/components/LeftTree/Department/Gwj/index.d.ts

@@ -0,0 +1,17 @@
+import type { FC } from "react";
+import type { BasicLeftTreeProps } from "../../Basic";
+
+/**
+ * 组件属性
+ */
+export interface DepartmentLeftTreeProps extends Omit<BasicLeftTreeProps, "treeData"> {
+  /** 请求参数 */
+  params?: Record<string, any>;
+}
+
+/**
+ * 部门左侧树组件（港务局版本）
+ */
+declare const DepartmentLeftTree: FC<DepartmentLeftTreeProps>;
+
+export default DepartmentLeftTree;

package/components/LeftTree/Department/Gwj/index.js

@@ -0,0 +1,32 @@
+import { request } from "@cqsjjb/jjb-common-lib/http";
+import { useEffect, useState } from "react";
+import BasicLeftTree from "../../Basic";
+
+/**
+ * 部门左侧树组件（港务局版本）
+ */
+function DepartmentLeftTree(props) {
+  const {
+    params = {},
+    ...restProps
+  } = props;
+
+  const [treeData, setTreeData] = useState([]);
+
+  const getData = async () => {
+    const { data } = await request("/basic-info/department/listTree", "post", params);
+    setTreeData(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <BasicLeftTree treeData={treeData} {...restProps} />
+  );
+}
+
+DepartmentLeftTree.displayName = "DepartmentLeftTree";
+
+export default DepartmentLeftTree;

package/components/SelectTree/Basic/index.d.ts

@@ -0,0 +1,25 @@
+import type { TreeSelectProps } from "antd/es/tree-select";
+import type { FC } from "react";
+
+/**
+ * 组件属性
+ */
+export interface BasicSelectTreeProps extends TreeSelectProps {
+  /** 树形数据 label 字段，默认 name */
+  nameKey?: string;
+  /** 树形数据 value 字段，默认 id */
+  idKey?: string;
+  /** 树形数据 children 字段，默认 childrenList */
+  childrenKey?: string;
+  /** 决定 onGetNodePaths 是否包含自身节点，默认 true */
+  onGetNodePathsIsIncludeOneself?: boolean;
+  /** 获取父级节点 */
+  onGetNodePaths?: (nodes: Record<string, any>[]) => void;
+}
+
+/**
+ * 基础下拉树组件（不建议直接使用此组件，二次继承使用）
+ */
+declare const BasicSelectTree: FC<BasicSelectTreeProps>;
+
+export default BasicSelectTree;

package/components/SelectTree/Basic/index.js

@@ -0,0 +1,50 @@
+import { TreeSelect } from "antd";
+import { getTreeNodePaths } from "../../../utils";
+
+function BasicSelectTree(props) {
+  const {
+    onSelect,
+    onGetNodePaths,
+    onGetNodePathsIsIncludeOneself = true,
+    placeholder = "",
+    treeData = [],
+    nameKey = "name",
+    idKey = "id",
+    childrenKey = "childrenList",
+    ...restProps
+  } = props;
+
+  const handleSelect = (value, node, extra) => {
+    if (value.length > 0) {
+      const parentNodes = getTreeNodePaths({
+        data: treeData,
+        targetId: value,
+        idKey,
+        childrenKey,
+        isIncludeOneself: onGetNodePathsIsIncludeOneself
+      });
+      onGetNodePaths?.(parentNodes);
+    }
+    onSelect?.(value, node, extra);
+  };
+
+  return (
+    <TreeSelect
+      showSearch
+      style={{ width: "100%" }}
+      styles={{
+        popup: { root: { maxHeight: 400, overflow: "auto" } },
+      }}
+      placeholder={`请选择${placeholder}`}
+      onSelect={handleSelect}
+      allowClear
+      treeData={treeData}
+      fieldNames={{ label: nameKey, value: idKey, children: childrenKey }}
+      {...restProps}
+    />
+  );
+}
+
+BasicSelectTree.displayName = "BasicSelectTree";
+
+export default BasicSelectTree;

package/components/SelectTree/Department/Gwj/index.d.ts

@@ -0,0 +1,17 @@
+import type { FC } from "react";
+import type { BasicSelectTreeProps } from "../../Basic";
+
+/**
+ * 组件属性
+ */
+export interface DepartmentSelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "placeholder"> {
+  /** 请求参数 */
+  params?: Record<string, any>;
+}
+
+/**
+ * 部门下拉树组件（港务局版本）
+ */
+declare const DepartmentSelectTree: FC<DepartmentSelectTreeProps>;
+
+export default DepartmentSelectTree;

package/components/SelectTree/Department/Gwj/index.js

@@ -0,0 +1,58 @@
+import { request } from "@cqsjjb/jjb-common-lib/http";
+import { useEffect, useState } from "react";
+import BasicLeftTree from "../../Basic";
+
+/**
+ * 部门左侧树组件（港务局版本）
+ */
+function DepartmentSelectTree(props) {
+  const {
+    params = {},
+    ...restProps
+  } = props;
+
+  const [treeData, setTreeData] = useState([
+    {
+      name: "parent 1",
+      id: "0-0",
+      childrenList: [
+        {
+          name: "parent 1-0",
+          id: "0-0-0",
+          childrenList: [
+            {
+              name: "leaf",
+              id: "0-0-0-0",
+            },
+            {
+              name: "leaf",
+              id: "0-0-0-1",
+            },
+          ],
+        },
+        {
+          name: "parent 1-1",
+          id: "0-0-1",
+          childrenList: [{ name: <span style={{ color: "#1677ff" }}>sss</span>, id: "0-0-1-0" }],
+        },
+      ],
+    },
+  ]);
+
+  const getData = async () => {
+    const { data } = await request("/basic-info/department/listTree", "post", params);
+    setTreeData(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <BasicLeftTree treeData={treeData} placeholder="部门" {...restProps} />
+  );
+}
+
+DepartmentSelectTree.displayName = "DepartmentSelectTree";
+
+export default DepartmentSelectTree;

package/components/Upload/index.d.ts

@@ -11,12 +11,14 @@ export interface UploadProps extends Omit<AntUploadProps, "fileList"> {
   ratio?: `${number}*${number}`;
   /** 是否显示提示，默认 true */
   showTip?: boolean;
-  /** 文件大小限制（单位：MB），默认 0（不限制） */
+  /** 文件大小限制（单位：MB） */
   size?: number;
   /** 自定义提示内容 */
   tipContent?: ReactNode;
-  /** listType 为 text 时上传按钮文本，默认 "点击选择文件上传" */
+  /** listType 为 text 时上传按钮文本 */
   uploadButtonText?: string;
+  /** 要上传的文件类型，默认为 image */
+  fileType?: "image" | "video" | "document";
 }
 
 /**
@@ -26,3 +28,7 @@ export interface UploadProps extends Omit<AntUploadProps, "fileList"> {
 declare const Upload: FC<UploadProps>;
 
 export default Upload;
+
+// 视频：数量默认1个，且只支持mp4格式，单个文件大小默认100M
+// 文件：数量默认4个，且只支持pdf、doc、docx格式
+// 图片：数量默认4个，且只支持jpg、jpeg、png格式