@pointcloud/pcloud-components 1.0.7 → 1.0.9

package/dist/esm/AdvancedFilter/index.js

@@ -2,11 +2,11 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["inputSearch"];
-import React, { useState, useRef, useImperativeHandle, useContext } from 'react';
-import { Input, Button, Collapse } from 'antd';
+var _excluded = ["inputSearch", "placeholder"];
+import React, { useState, useImperativeHandle, useContext, useMemo, useCallback } from 'react';
+import { Input, Button, Collapse, Row } from 'antd';
 import classNames from 'classnames';
-import FormFilter from "./FormFilter";
+import DForm from "../DForm";
 import { ConfigContext } from "../ConfigProvider";
 import "./styles/index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,13 +16,15 @@ var AdvancedFilter = function AdvancedFilter(props) {
     right = props.right,
     _props$inputProps = props.inputProps,
     inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
-    formItemConfig = props.formItemConfig,
+    items = props.items,
     fRef = props.fRef,
     icon = props.icon,
     onValuesChange = props.onValuesChange,
     onSearch = props.onSearch,
     onReset = props.onReset;
   var inputSearch = inputProps.inputSearch,
+    _inputProps$placehold = inputProps.placeholder,
+    placeholder = _inputProps$placehold === void 0 ? '请输入关键字查询' : _inputProps$placehold,
     otherInputProps = _objectWithoutProperties(inputProps, _excluded);
   var _useContext = useContext(ConfigContext),
     prefixCls = _useContext.prefixCls,
@@ -37,30 +39,40 @@ var AdvancedFilter = function AdvancedFilter(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     inputValue = _useState4[0],
     setInputValue = _useState4[1];
-  var inputRef = useRef(null);
-  var formRef = useRef(null);
-  var resetFields = function resetFields() {
-    var _formRef$current;
+  var inputRef = React.useRef(null);
+  var _DForm$useForm = DForm.useForm(),
+    _DForm$useForm2 = _slicedToArray(_DForm$useForm, 1),
+    form = _DForm$useForm2[0];
+  var resetFields = useCallback(function () {
     setInputValue('');
-    formRef === null || formRef === void 0 || (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.resetFields();
-  };
+    form.resetFields();
+  }, [form]);
   useImperativeHandle(fRef, function () {
-    var _formRef$current2;
     return {
       resetFields: resetFields,
-      form: (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.form
+      form: form
     };
   });
-  var handleSearch = function handleSearch(values) {
+  var handleSearch = useCallback(function (values) {
     var _inputRef$current;
     var value = inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current = _inputRef$current.input) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
     onSearch === null || onSearch === void 0 || onSearch(_objectSpread(_objectSpread({}, values), _defineProperty({}, inputProps.name, value)));
-  };
-  var _inputSearch = function _inputSearch(v) {
+  }, [inputProps.name, onSearch]);
+  var _inputSearch = useCallback(function (v) {
     if (typeof inputSearch === 'function') {
       inputSearch(_defineProperty({}, inputProps.name, v));
     }
-  };
+  }, [inputSearch, inputProps.name]);
+  var handleValuesChange = useCallback(function (changedValues, allValues) {
+    onValuesChange === null || onValuesChange === void 0 || onValuesChange(allValues);
+  }, [onValuesChange]);
+  var handleReset = useCallback(function () {
+    form.resetFields();
+    onReset === null || onReset === void 0 || onReset();
+  }, [form, onReset]);
+  var dFormItems = useMemo(function () {
+    return items || [];
+  }, [items]);
   return /*#__PURE__*/_jsx(Collapse, {
     className: wrapperClass,
     activeKey: panelVisible ? '1' : 'none',
@@ -92,7 +104,8 @@ var AdvancedFilter = function AdvancedFilter(props) {
               onValuesChange === null || onValuesChange === void 0 || onValuesChange(e.target.value);
             },
             onSearch: _inputSearch,
-            value: inputValue
+            value: inputValue,
+            placeholder: placeholder
           }, otherInputProps)), /*#__PURE__*/_jsxs(Button, {
             type: "primary",
             className: "button",
@@ -114,14 +127,28 @@ var AdvancedFilter = function AdvancedFilter(props) {
         children: [/*#__PURE__*/_jsx("span", {
           className: "icon"
         }), " \u67E5\u8BE2\u6761\u4EF6"]
-      }), /*#__PURE__*/_jsx("div", {
+      }), /*#__PURE__*/_jsxs("div", {
         className: "search-content",
-        children: /*#__PURE__*/_jsx(FormFilter, {
-          formRef: formRef,
-          formItemConfig: formItemConfig,
-          onSearch: handleSearch,
-          onReset: onReset
-        })
+        children: [/*#__PURE__*/_jsx(DForm, {
+          form: form,
+          layout: "inline",
+          items: dFormItems,
+          onFinish: handleSearch,
+          onValuesChange: handleValuesChange,
+          onReset: handleReset
+        }), /*#__PURE__*/_jsxs(Row, {
+          className: "search-btn",
+          children: [/*#__PURE__*/_jsx(Button, {
+            type: "primary",
+            onClick: function onClick() {
+              return form.submit();
+            },
+            children: "\u67E5\u8BE2"
+          }), /*#__PURE__*/_jsx(Button, {
+            onClick: handleReset,
+            children: "\u91CD\u7F6E"
+          })]
+        })]
       })]
     }, "1")
   });

package/dist/esm/AdvancedFilter/interface.d.ts

@@ -1,94 +1,27 @@
 import React from 'react';
 import type { InputProps as AntdInputProps } from 'antd';
-export type FormItemType = 'input' | 'inputNumber' | 'radio' | 'select' | 'checkbox' | 'datePicker' | 'rangePicker' | 'switch' | 'treeSelect';
-export interface FormItem {
-    /**
-     * @description 筛选项label文字
-     */
-    label?: string;
-    /**
-     * @description 筛选项字段名
-     */
-    name: string;
-    /**
-     * @description 筛选项类型
-     */
-    type: FormItemType;
-    /**
-     * @description 筛选项placeholder
-     */
-    placeholder?: string;
-    /**
-     * @description 筛选项的配置项(select|treeSelect时可用)
-     */
-    options?: any[];
-    /**
-     * @description 筛选项的格式化配置(rangePicker|datePicker时可用)
-     */
-    format?: string;
-}
+import type { DItemProps } from '../DForm';
 export interface FormProps {
-    /**
-     * @description 筛选项配置
-     */
-    formItemConfig: FormItem[];
-    /**
-     * @description 筛选项值变更时触发
-     */
+    items?: DItemProps[];
     onValuesChange?: (_values: any) => void;
-    /**
-     * @description 点击查询按钮时触发
-     */
     onSearch?: (_v: any) => void;
-    /**
-     * @description 点击重置按钮时触发
-     */
     onReset?: () => void;
 }
 export interface FProps extends FormProps {
-    /**
-     * @description 显示查询/重置按钮
-     * @default true
-     */
     showButton?: boolean;
-    /**
-     * @description 筛选项表单的Ref
-     */
     formRef?: any;
 }
 export interface InputProps extends AntdInputProps {
-    /**
-     * @description input检索框回车时或点击检索图标时触发
-     */
     inputSearch?: (_v: any) => void;
 }
 export interface FilterProps extends FormProps {
-    /**
-     * @description 左侧渲染区
-     */
     left?: React.ReactNode;
-    /**
-     * @description 右侧渲染区
-     */
     right?: React.ReactNode;
-    /**
-     * @description input检索框props
-     */
     inputProps: InputProps;
-    /**
-     * @description children
-     */
     children?: React.ReactNode;
-    /**
-     * @description 表单引用ref值
-     */
     fRef?: any;
-    /**
-     * @description 筛选文字按钮图标
-     */
     icon?: React.ReactNode;
 }
 export type AdvancedFilterProps = FilterProps;
 export type FormFilterProps = FProps;
-export type FotmItemProps = FormItem;
 export type InputSearchProps = InputProps;

package/dist/esm/AdvancedFilter/styles/index.less

@@ -12,10 +12,6 @@
     cursor: auto !important;
   }
 
-  .ant-collapse-content-box {
-    padding: 0;
-  }
-
   .search-header {
     display: flex;
     width: 100%;
@@ -25,42 +21,6 @@
       overflow: hidden;
       white-space: no-wrap;
       text-overflow: ellipsis;
-
-      :global {
-        .ant-radio-wrapper:first-child {
-          border-left: 1px solid #d9d9d9;
-          border-radius: 5px 0 0 5px;
-        }
-
-        .ant-radio-wrapper:last-child {
-          border-radius: 0 5px 5px 0;
-        }
-
-        .ant-radio-wrapper {
-          margin-right: 0;
-          padding: 4px 6px;
-          border: 1px solid #d9d9d9;
-          border-top-width: 1px;
-          border-left: 1px solid #fff;
-          border-left-width: 1px;
-
-          .ant-radio {
-            display: none;
-          }
-        }
-
-        .ant-radio-wrapper:hover {
-          color: #1890ff;
-        }
-
-        .ant-radio-wrapper-checked {
-          z-index: 1;
-          color: #1890ff;
-          background: #fff;
-          border: 1px solid #1890ff;
-          border-left: 1px solid #1890ff !important;
-        }
-      }
     }
 
     .right {
@@ -100,10 +60,8 @@
   .title {
     display: flex;
     align-items: center;
-    margin: 0 10px;
     padding-bottom: 10px;
     font-weight: bold;
-    border-bottom: 1px solid #f0f0f0;
 
     span.icon {
       width: 4px;
@@ -115,23 +73,6 @@
   }
 
   .search-content {
-    .filter-row {
-      display: flex;
-      flex-wrap: wrap;
-      width: 100%;
-      padding: 10px;
-    }
-
-    .filter-col {
-      height: 30px;
-      margin-bottom: 10px;
-      line-height: 30px;
-    }
-
-    .filter-col .ant-picker {
-      width: 100%;
-    }
-
     .search-btn {
       justify-content: center;
 

package/dist/esm/CRUD/index.d.ts

@@ -14,7 +14,7 @@ export type CRUDRefProps = {
     /** 刷新表格数据 */
     refresh: (_strategy?: RefreshStrategy) => void;
     getSelectedRows: () => {
-        selectedRowKeys: any[];
+        selectedRowKeys: string[];
         selectedRows: any[];
     };
     getSearchValues: () => Record<string, any>;
@@ -23,7 +23,7 @@ export type CRUDRefProps = {
     openDeleteModal: (_record?: any) => void;
     openDetailModal: (_record?: any) => void;
 };
-export type MoreActionColumnRender = (_text: any, _record: Record<string, any>) => React.ReactNode;
+export type MoreActionColumnRender<T = Record<string, any>> = (_text: any, _record: T) => React.ReactNode;
 export type CRUDProps = {
     className?: string;
     style?: React.CSSProperties;
@@ -32,7 +32,9 @@ export type CRUDProps = {
         immediate?: boolean;
     };
     /** 表格配置 */
-    tableProps: DTableProps;
+    tableProps: DTableProps & {
+        moreActionColumn?: MoreActionColumnRender;
+    };
     /** 新增/编辑表单配置 */
     modalFormProps?: {
         /** 表单配置 */
@@ -46,7 +48,7 @@ export type CRUDProps = {
     /** 新增按钮文本 */
     addButtonText?: string;
     /** 是否显示新增按钮 */
-    showAddButton?: boolean;
+    showAdd?: boolean;
     /** 是否显示批量删除按钮 */
     showBatchDelete?: boolean;
     /** 批量删除按钮文本 */
@@ -71,8 +73,6 @@ export type CRUDProps = {
     viewButtonText?: string;
     /** 行查看按钮配置 */
     viewButtonProps?: ButtonProps;
-    /** 更多操作列自定义渲染，参数为(text, record)，返回ReactNode */
-    moreActionColumn?: MoreActionColumnRender;
     /** 自定义操作栏 */
     actionBar?: React.ReactNode;
     /** 数据刷新回调 */
@@ -80,11 +80,11 @@ export type CRUDProps = {
     crudApi: {
         list: (_params: any) => Promise<DTableSourceProps>;
         /** 删除数据接口 */
-        delete: (_params: any) => Promise<any>;
+        delete?: (_params: any) => Promise<any>;
         /** 新增数据接口 */
-        add: (_params: any) => Promise<any>;
+        add?: (_params: any) => Promise<any>;
         /** 编辑数据接口 */
-        edit: (_params: any) => Promise<any>;
+        edit?: (_params: any) => Promise<any>;
         /** 详情数据接口 */
         detail?: (_params: any) => Promise<any>;
     };