@hzab/list-render 1.12.3 → 1.12.4

package/CHANGELOG.md

@@ -1,6 +1,10 @@
+# @hzab/list-render@1.12.4
+
+feat: 新增 filterTag 配置
+
 # @hzab/list-render@1.12.3
 
-fix: 操作栏整体div增加样式className
+fix: 操作栏整体 div 增加样式 className
 
 # @hzab/list-render@1.12.2
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.12.3",
+  "version": "1.12.4",
   "description": "",
   "main": "src",
   "scripts": {
@@ -44,9 +44,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.8.1",
-    "typescript": "^4.9.4",
-    "@hzab/edit-table": "^0.0.1",
-    "@silevis/reactgrid": "^4.1.17"
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
     "@formily/core": "2.3.1",
@@ -62,7 +60,8 @@
     "c-formily-antd": "2.3.1",
     "lodash": ">=4.17.21",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "@hzab/edit-table": ">=0.1.2"
   },
   "directories": {
     "lib": "lib"

package/src/FilterTag/index.less

@@ -0,0 +1,15 @@
+.has-filter {
+  margin-bottom: 16px;
+
+  .has-filter-tag {
+    background: rgba(64, 62, 245, 0.2);
+    border-radius: 4px 4px 4px 4px;
+    color: #403EF5;
+    margin-bottom: 8px;
+
+    .anticon-close {
+      color: #403EF5;
+
+    }
+  }
+}

package/src/FilterTag/index.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import "./index.less";
+import { Tag } from "antd";
+import { getVal } from "@hzab/list-render/src/common/utils";
+function hasValue(val) {
+  return val !== null && val !== undefined;
+}
+const FilterTag = (props: any) => {
+  const { searchQuery, schema, queryRef, onSearch } = props;
+  const [worldList, setWorldList] = useState<any>([]);
+  useEffect(() => {
+    if (queryRef) {
+      const list = [];
+      const fieldSchemas = queryRef.current?.formRef?.current?.formRender?.fields;
+      for (let key in schema?.schema?.properties) {
+        const field = schema?.schema?.properties[key];
+        if (hasValue(searchQuery[key])) {
+          let val = getVal({ ...field, ...fieldSchemas[field?.name] }, searchQuery, {
+            fieldSchema: fieldSchemas?.[field?.name],
+          });
+
+          list.push({
+            label: field?.title,
+            value: val,
+            filed: key,
+            filedValue: searchQuery[key],
+          });
+        }
+      }
+      setWorldList(list?.filter((el) => el?.value));
+    }
+  }, [searchQuery, schema, queryRef]);
+  const onClose = (e, item) => {
+    e.preventDefault();
+    queryRef.current?.formRef?.current?.formRender.setValues({
+      [item?.filed]: null,
+    });
+    onSearch && onSearch(queryRef.current?.formRef?.current?.formRender?.values);
+    setWorldList((pre) => pre?.filter((el) => el?.filed != item?.filed));
+  };
+
+  return (
+    <div className="has-filter">
+      {worldList?.map((item) => {
+        return (
+          <Tag
+            className="has-filter-tag"
+            closable
+            onClose={(e) => {
+              onClose(e, item);
+            }}
+          >
+            {item?.label}：{item?.value}
+          </Tag>
+        );
+      })}
+    </div>
+  );
+};
+export default FilterTag;

package/src/list-render.jsx

@@ -13,7 +13,7 @@ import TableRender from "./table-render";
 import CardRender from "./card-render";
 import FormModal from "./FormModal";
 import DetailModal from "./DetailModal";
-
+import FilterTag from "./FilterTag"
 import { objToFormData } from "./common/utils";
 import {
   setURLObjectQueryParam,
@@ -60,6 +60,7 @@ const ListRender = forwardRef(function (props, parentRef) {
      * 自定义设置url query对象参数的key
      * */
     appendUrlQueryKey = URL_PARAM_NAME,
+    hasFilterTag = false
   } = props;
   const { isAllSelect = false, isAllSelectKey = "isAllSelect" } = props.paginationConf || {};
 
@@ -83,6 +84,7 @@ const ListRender = forwardRef(function (props, parentRef) {
   const getListSourceRef = useRef();
   const [showSearch, setShowSearch] = useState(true);
   const tableRef = useRef({});
+  const [searchQuery, setSearchQuery] = useState({})
 
   useImperativeHandle(parentRef, () => ({
     getList,
@@ -95,6 +97,7 @@ const ListRender = forwardRef(function (props, parentRef) {
     onCreate,
     onEdit,
     onDel,
+    tableRef
   }));
 
   const { schema = {}, config = {}, model = {}, msgConf = {}, filters } = props;
@@ -263,6 +266,7 @@ const ListRender = forwardRef(function (props, parentRef) {
    * @returns
    */
   function onQueryFormSubmit(query, isReset) {
+    setSearchQuery(query)
     // 是否开启 url query
     if (appendUrlQuery) {
       if (isReset) {
@@ -492,6 +496,14 @@ const ListRender = forwardRef(function (props, parentRef) {
           )}
         </div>
       </div>
+      {
+        hasFilterTag && <FilterTag
+          searchQuery={searchQuery}
+          schema={schema}
+          queryRef={queryRef}
+          onSearch={onSearch}
+        ></FilterTag>
+      }
       {Slots.HeaderOthersSuffix && <Slots.HeaderOthersSuffix onSearch={onSearch} getList={getList} />}
       {layout === "card" ? (
         <CardRender

package/src/table-render/index.jsx

@@ -10,6 +10,7 @@ import { createForm, onFormValuesChange, onFieldValueChange } from "@formily/cor
 
 import EnumRender from "@hzab/formily-result-utils/src/components/EnumRender";
 import { SHOW_MODE_TYPES } from "@hzab/formily-result-utils/src/common/constant";
+import CellEditTable from "@hzab/edit-table"
 import { FormilyField } from "../components/Formily/FormilyField";
 // getColRender 使用 observer 包裹一层 column 的 render 函数，解决数据无法响应的问题
 import { getColRender } from "../common/formily-utils";
@@ -17,7 +18,6 @@ import { getVal, getFieldList } from "../common/utils";
 import { handleReactions } from "../common/handleReactions";
 
 import { useEditTable, EditableCell } from "../components/Formily/FormilyEditTable";
-import CellEditTable from "@hzab/edit-table"
 import "./index.less";
 
 const scenario = "table-render";
@@ -38,8 +38,11 @@ const TableRender = forwardRef(function (props, tableRef) {
   } = config || {};
   const { editMode = "modal" } = topProps || {};
   const isEditTable = editMode !== "modal";
+  const cellEditTableRef = useRef()
   useImperativeHandle(tableRef, () => ({
     onEditByTable,
+    cellEditTableRef,
+    columns
   }));
 
   const [columns, setColumns] = useState([]);
@@ -192,11 +195,13 @@ const TableRender = forwardRef(function (props, tableRef) {
           </span>
         );
       }
+
       const childSelectList = fieldSchemas?.[field?.name]?.dataSource?.map((el) => ({
         ...el,
         label: el?.[field?.["x-component-props"]?.["fieldNames"]?.["label"]] || el?.label,
         value: el?.[field?.["x-component-props"]?.["fieldNames"]?.["value"]] || el?.value,
       }))
+
       return {
         getField: () => field,
         editable: true,
@@ -214,6 +219,7 @@ const TableRender = forwardRef(function (props, tableRef) {
         cellProps: field.cellProps,
         children: handleChildColumns(field?.children),
         render: getColRender(colRender),
+        required: field?.required
       }
 
     })?.filter((el) => (el))
@@ -440,6 +446,7 @@ const TableRender = forwardRef(function (props, tableRef) {
       ) : null}
       {
         isCellEditTable ? <CellEditTable
+          ref={cellEditTableRef}
           {...tableProps}
           {...cellEditTableProps}
           {...props}