@hzab/list-render 0.0.1

package/src/list-render.jsx

@@ -0,0 +1,240 @@
+/*
+model 不要定义在组件外部，避免出现 query 异常的情况。
+- 异常情况：model 定义在组件函数外部（页面文件最外层），设置搜索条件，切换到其他页面后切换回来，上次设置的搜索条件还存在。
+*/
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { Button, message } from "antd";
+import _ from "lodash";
+
+import QueryRender from "./query-render";
+import Pagination from "./pagination-render";
+import TableRender from "./table-render";
+import FormDialog from "./form-dialog";
+
+import "./index.less";
+
+const ListRender = forwardRef(function (props, parentRef) {
+  const { idKey = "id" } = props;
+  const [total, setTotal] = useState(0);
+  const [list, setList] = useState([]);
+  const [listLoading, setListLoading] = useState(false);
+  const formDialogRef = useRef();
+  const queryRef = useRef();
+
+  useImperativeHandle(parentRef, () => ({
+    getList,
+    onSearch,
+    forceUpdate,
+    formDialogRef,
+    queryRef,
+  }));
+
+  const { schema = {}, config = {}, model = {} } = props;
+
+  useEffect(() => {
+    if (model) {
+      if (!model.query) {
+        model.query = {};
+      }
+      model.query.pageNum = 1;
+    }
+    !props.closeAutoRequest && getList();
+  }, []);
+
+  useEffect(() => {
+    if (model && !model?.query) {
+      model.query = {};
+    }
+  }, [model?.query]);
+
+  function getList(query = model?.query || {}) {
+    if (!model?.getList && Array.isArray(props.list)) {
+      setListLoading(true);
+      const { list } = props;
+      const { pageNum = 1, pageSize = 10 } = model?.query || {};
+      setList(list.slice(pageSize * (pageNum - 1), pageNum * pageSize));
+      setTotal(list.length);
+      props.onGetListEnd && props.onGetListEnd({ list, pagination: { pageNum, pageSize } });
+      setListLoading(false);
+      return;
+    }
+    if (!model?.getList) {
+      return;
+    }
+    setListLoading(true);
+
+    // remove $timerange
+    const _q = _.cloneDeep(query);
+    if (_q.$timerange !== undefined) {
+      delete _q.$timerange;
+    }
+
+    model
+      ?.getList(_q)
+      .then((res) => {
+        console.log("list res", res);
+        setList(res.list);
+        setTotal(res.pagination?.total);
+        props.onGetListEnd && props.onGetListEnd(res);
+        setListLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+        message.error(err._message || "未知错误");
+        setListLoading(false);
+      });
+  }
+
+  function onPageChange(page, size) {
+    if (model && !model.query) {
+      model.query = {};
+    }
+    model.query.pageNum = page;
+    model.query.pageSize = size;
+    getList();
+  }
+
+  function onSearch(query) {
+    if (model && !model.query) {
+      model.query = {};
+    }
+    model.query.pageNum = 1;
+    if (model && model.query && !model.query.pageSize) {
+      model.query.pageSize = 10;
+    }
+    model.query = Object.assign(model.query, query);
+    getList(query);
+  }
+
+  function forceUpdate() {
+    setList((l) => _.cloneDeep(l));
+  }
+
+  function onCreate() {
+    console.log("onCreate");
+    formDialogRef.current.show().then(async (form) => {
+      console.log("onCreate", form);
+      const data = form;
+
+      model
+        ?.create(typeof model?.createMap === "function" ? model.createMap(data) : data)
+        .then((res) => {
+          onSearch();
+          message.success(res._message || "新增成功");
+        })
+        .catch((err) => {
+          console.error("err", err);
+          message.error(err._message || "未知错误");
+        });
+    });
+  }
+
+  function onEdit(row, idx) {
+    if (props.fetchOnEdit !== false) {
+      model
+        .get({ id: row[idKey] })
+        .then((res) => {
+          handleEdit(res, row[idKey]);
+        })
+        .catch((err) => {
+          console.error("err", err);
+          message.error(err._message || "未知错误");
+        });
+    } else {
+      handleEdit(row);
+    }
+  }
+
+  function handleEdit(data, id) {
+    formDialogRef.current.show(data, "编辑").then(async (form) => {
+      const data = form;
+      model
+        ?.update(typeof model?.updateMap === "function" ? model.updateMap(data) : data, { id })
+        .then((res) => {
+          getList();
+          message.success(res?._message || "编辑成功");
+        })
+        .catch((err) => {
+          console.error("err", err);
+          message.error(err._message || "未知错误");
+        });
+    });
+  }
+
+  function onDel(row, idx) {
+    model
+      ?.delete({ id: row[idKey] })
+      .then((res) => {
+        message.success(res._message || "删除成功");
+        onSearch();
+      })
+      .catch((err) => {
+        message.error(err._message || "未知错误");
+      });
+  }
+
+  const { Slots = {} } = props;
+
+  return (
+    <div className={`list-render ${props.className}`}>
+      <div className="list-header">
+        {props.hasQuery !== false ? (
+          <QueryRender
+            ref={queryRef}
+            schema={props.schema}
+            formConf={props.formConf}
+            search={props.search}
+            filters={props.filters}
+            config={props.queryConf}
+            onSearch={onSearch}
+            schemaScope={props.schemaScope}
+            xComponents={props.xComponents}
+          />
+        ) : (
+          <div className="query-render"></div>
+        )}
+        <div className="header-actions-render">
+          {Slots.headerActionPrefix && <Slots.headerActionPrefix />}
+          {props.hasCreate !== false ? (
+            <Button onClick={onCreate} type="primary">
+              新增
+            </Button>
+          ) : null}
+          {Slots.headerActionSuffix && <Slots.headerActionSuffix />}
+        </div>
+      </div>
+      <TableRender
+        idKey={idKey}
+        schema={props.schema?.schema}
+        list={list}
+        formConf={props.formConf}
+        config={props.tableConf}
+        hasAction={props.hasAction}
+        Slots={props.Slots}
+        onEdit={onEdit}
+        onDel={onDel}
+        loading={listLoading}
+      />
+      <Pagination onChange={onPageChange} total={total} query={model?.query} config={props.paginationConf} />
+      <FormDialog
+        ref={formDialogRef}
+        schema={schema}
+        dialogConf={props.dialogConf}
+        formConf={props.formConf}
+        formSlots={props.formSlots}
+        formInitialValues={props.formInitialValues}
+        Slots={props.Slots}
+        xComponents={props.xComponents}
+        schemaScope={props.schemaScope}
+      />
+    </div>
+  );
+});
+
+ListRender.defaultProps = {
+  model: {
+    query: {},
+  },
+};
+
+export default ListRender;

package/src/pagination-render/index.jsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+import { Pagination } from "antd";
+
+import "./index.less";
+
+const pageSizeOptions = [10, 20, 50, 100];
+
+function PaginationRender(props) {
+  const [pageSize, setPageSize] = useState(
+    props.query?.pageSize || (props.pageSizeOptions ? props.pageSizeOptions[0] : pageSizeOptions[0]),
+  );
+  const [pageNum, setPageNumber] = useState(props.query?.pageNum || 1);
+
+  useEffect(() => {
+    const { query } = props;
+    if (!query) {
+      return;
+    }
+    if (query.pageSize && query.pageSize !== pageSize) {
+      setPageSize(query.pageSize);
+    }
+    if (query.pageNum && query.pageNum !== pageNum) {
+      setPageNumber(query.pageNum);
+    }
+  }, [props.query?.pageNum, props.query?.pageSize]);
+
+  function onChange(page, size) {
+    let _size = size;
+    let _page = page;
+    if (pageSize !== size) {
+      _page = 1;
+    }
+    setPageSize(_size);
+    setPageNumber(_page);
+    props.onChange && props.onChange(_page, _size);
+  }
+
+  return (
+    <div className="pagination-render-wrap">
+      <Pagination
+        {...(props.config || {})}
+        className="pagination-render"
+        current={pageNum}
+        pageSize={pageSize}
+        onChange={onChange}
+        pageSizeOptions={props.pageSizeOptions || pageSizeOptions}
+        total={props.total}
+        showTotal={(total) => `总条数 ${total} 条`}
+        showSizeChanger
+      />
+    </div>
+  );
+}
+
+export default PaginationRender;

package/src/pagination-render/index.less

@@ -0,0 +1,11 @@
+.pagination-render-wrap {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-top: 20px;
+  .pagination-render {
+    li {
+      margin-bottom: 8px;
+    }
+  }
+}

package/src/query-render/index.jsx

@@ -0,0 +1,140 @@
+import { useState, useRef, useEffect, useImperativeHandle, forwardRef } from "react";
+import { Button } from "antd";
+import dayjs from "dayjs";
+import _ from "lodash";
+
+import FormRender from "@hzab/form-render";
+
+import "./index.less";
+
+function QueryRender(props, parentRef) {
+  const [schema, setSchema] = useState({});
+  const formRef = useRef();
+
+  useImperativeHandle(parentRef, () => ({ formRef }));
+
+  useEffect(() => {
+    const queryProperties = {};
+    let index = 0;
+    if (props.search) {
+      queryProperties.search = {
+        type: "string",
+        title: "",
+        "x-decorator": "FormItem",
+        "x-component": "Input",
+        "x-validator": [],
+        "x-component-props": {
+          allowClear: true,
+          placeholder: props.search,
+        },
+        "x-decorator-props": {},
+        "x-designable-id": "searchInput",
+        "x-index": index,
+        name: "name",
+        description: "",
+      };
+      index += 1;
+    }
+
+    const { properties = {} } = props.schema?.schema || {};
+    console.log("props.filters", props.filters);
+    props.filters?.forEach((key) => {
+      const item = properties[key];
+      if (item) {
+        // TODO: 优化
+        const itemConf = {
+          ...item,
+          required: false,
+          "x-index": index,
+        };
+        if (!itemConf["x-component-props"]) {
+          itemConf["x-component-props"] = {};
+        }
+        itemConf["x-component-props"].allowClear = true;
+        queryProperties[key] = itemConf;
+        index += 1;
+      } else if (key === "$timerange") {
+        queryProperties[key] = {
+          type: "string[]",
+          title: "时间范围",
+          "x-decorator": "FormItem",
+          "x-component": "DatePicker.RangePicker",
+          "x-validator": [],
+          "x-component-props": {
+            picker: "date",
+            showTime: true,
+            allowClear: true,
+          },
+          "x-decorator-props": {},
+          name: key,
+          "x-designable-id": key,
+          "x-index": index,
+        };
+        index += 1;
+      }
+    });
+
+    console.log("queryProperties", queryProperties);
+
+    setSchema({
+      form: {},
+      schema: {
+        type: "object",
+        properties: queryProperties,
+        "x-designable-id": "querySchema",
+      },
+    });
+  }, [props.search, props.filters, props.schema, props.schema?.schema]);
+
+  function onSearch() {
+    let query = _.cloneDeep(formRef?.current?.formRender?.values);
+    if (props.filters?.includes("$timerange")) {
+      console.log("query.$timerange?.[0]", query.$timerange?.[0]);
+      if (query.$timerange?.[0] instanceof dayjs) {
+        query.beginTime = query.$timerange?.[0]?.format("YYYY-MM-DD HH:mm:ss");
+        query.endTime = query.$timerange?.[1]?.format("YYYY-MM-DD HH:mm:ss");
+      } else {
+        query.beginTime = query.$timerange?.[0];
+        query.endTime = query.$timerange?.[1];
+      }
+      delete query.$timerange;
+    }
+    if (props.config?.queryMap) {
+      query = props.config?.queryMap(query);
+    }
+    props.onSearch && props.onSearch(query);
+  }
+
+  function onReset() {
+    formRef.current?.formRender?.reset();
+    props.onSearch && props.onSearch(_.cloneDeep(formRef?.current?.formRender?.values));
+  }
+
+  return (
+    <div className="query-render">
+      {Object.keys(schema?.schema?.properties || {}).length > 0 ? (
+        <>
+          <FormRender
+            ref={formRef}
+            layout="inline"
+            schema={schema}
+            schemaScope={props.schemaScope}
+            Slots={() => {
+              return (
+                <div className="query-operation">
+                  {/* <Button onClick={onReset}>重置</Button> */}
+                  <Button type="primary" onClick={onSearch}>
+                    搜索
+                  </Button>
+                </div>
+              );
+            }}
+            xComponents={props.xComponents}
+          ></FormRender>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+export default forwardRef(QueryRender);

package/src/query-render/index.less

@@ -0,0 +1,22 @@
+.query-render {
+  .xxm {
+    display: inline-block;
+  }
+  .form-render {
+    display: inline-block;
+  }
+  .ant-form-inline,
+  .ant-form-inline > form {
+    display: inline-flex;
+    .ant-formily-item-control {
+      min-width: 120px;
+    }
+    .ant-picker-range {
+      min-width: 340px;
+    }
+    .ant-formily-item-layout-inline {
+      margin-right: 12px;
+      margin-bottom: 12px;
+    }
+  }
+}

package/src/table-render/index.jsx

@@ -0,0 +1,163 @@
+import { useEffect, useState } from "react";
+import { Table, Button, Popconfirm } from "antd";
+
+import { getVal } from "../common/utils";
+
+import "./index.less";
+
+function TableRender(props) {
+  const { config = {} } = props;
+  const [columns, setColumns] = useState([]);
+
+  useEffect(() => {
+    if (!(props.schema && props.schema.properties)) {
+      return;
+    }
+    const columns = [];
+    /*
+    title: "姓名",
+    dataIndex: "name",
+    key: "name",
+    render: function(text, record, index) {},
+    width: 'string | number',
+    */
+    // TODO: 确认是否区分 函数、ReactDom 插槽
+    const { Slots = {} } = props;
+    const { properties = {} } = props.schema;
+    Object.keys(properties).forEach((key) => {
+      const field = properties[key];
+      if (field.inTable !== false) {
+        const { name, title, type } = field;
+        let _colConf = {};
+
+        if (props.config?.colConf && props.config?.colConf[name]) {
+          _colConf = props.config?.colConf[name];
+        }
+
+        if (Slots && Slots[name]) {
+          columns.push({
+            ..._colConf,
+            title: title,
+            key: name,
+            dataIndex: name,
+            render: (text, record, index) => {
+              const Slot = Slots[name];
+              const slotProps = { text, record, index, field };
+              return <Slot {...slotProps} />;
+            },
+          });
+          return;
+        }
+
+        let render = function (text, record) {
+          return getVal(field, record);
+        };
+
+        if (type === "date-picker" && field.mode === "datetime") {
+          render = function (text, record) {
+            const dateArr = getVal(field, record)?.split(" ") || [];
+            return (
+              <>
+                <div>{dateArr[0]}</div>
+                <div>{dateArr[1]}</div>
+              </>
+            );
+          };
+        }
+
+        columns.push({
+          ..._colConf,
+          title: title,
+          key: name,
+          dataIndex: name,
+          render(text, record, index, ...args) {
+            return (
+              <div
+                className={`${_colConf?.ellipsis ? "table-cell-ellipsis" : ""}`}
+                style={{ width: _colConf?.width, maxWidth: "100%" }}
+                title={
+                  _colConf?.ellipsis === true || _colConf?.ellipsis?.showTitle
+                    ? render(text, record, index, ...args)
+                    : undefined
+                }
+              >
+                {render(text, record, index, ...args)}
+              </div>
+            );
+          },
+        });
+      }
+    });
+
+    if (props.hasAction !== false) {
+      const { hasEdit, hasDel } = props.config || {};
+
+      const _colConf = props.config?.colConf?._$actions || {};
+
+      columns.push({
+        ..._colConf,
+        title: "操作",
+        key: "_$actions",
+        render(text, record, index) {
+          const slotProps = { text, record, index };
+
+          if (Slots?.tableActionsSlot) {
+            return <Slots.tableActionsSlot {...slotProps} />;
+          }
+
+          return (
+            <div style={{ width: _colConf?.width, maxWidth: "100%" }}>
+              {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...slotProps} />}
+              {hasEdit !== false ? (
+                <Button
+                  type="link"
+                  onClick={() => {
+                    props.onEdit && props.onEdit(record, index);
+                  }}
+                >
+                  编辑
+                </Button>
+              ) : null}
+              {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...slotProps} />}
+              {hasDel !== false ? (
+                <Popconfirm
+                  placement="topRight"
+                  title={"确认删除该项？"}
+                  onConfirm={() => {
+                    props.onDel && props.onDel(record, index);
+                  }}
+                >
+                  <Button type="link" danger>
+                    删除
+                  </Button>
+                </Popconfirm>
+              ) : null}
+              {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...slotProps} />}
+            </div>
+          );
+        },
+      });
+    }
+
+    setColumns(columns);
+  }, [props.schema]);
+
+  return (
+    <div className="table-render-wrap">
+      <Table
+        className="table-render"
+        rowKey={props.idKey || "id"}
+        rowSelection={config?.rowSelection}
+        columns={columns}
+        dataSource={props.list}
+        pagination={false}
+        scroll={config.scroll}
+        expandable={config.expandable}
+        loading={props.loading}
+        onRow={config?.onRow}
+      />
+    </div>
+  );
+}
+
+export default TableRender;

package/src/table-render/index.less

@@ -0,0 +1,10 @@
+.table-render-wrap {
+  .table-render {
+    border-top: 1px solid #f0f0f0;
+  }
+  .table-cell-ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}