@hzab/list-render 0.0.1

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@hzab/list-render",
+  "version": "0.0.1",
+  "description": "",
+  "main": "lib",
+  "scripts": {
+    "dev": "webpack serve -c ./config/webpack.config.js --env development",
+    "build": "webpack -c ./config/webpack.config.js --env production"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "keywords": [],
+  "author": "CaiYansong",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.20.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.20.7",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/runtime": "^7.20.6",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "antd": "^4.14.0",
+    "autoprefixer": "^10.4.13",
+    "babel-loader": "^9.1.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "eslint": "^8.30.0",
+    "eslint-webpack-plugin": "^3.2.0",
+    "file-loader": "^6.2.0",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
+    "html-webpack-plugin": "^5.5.0",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "mini-css-extract-plugin": "^2.7.2",
+    "postcss-loader": "^7.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.1",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.6",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
+    "webpackbar": "^5.0.2"
+  },
+  "peerDependencies": {
+    "antd": "<=4.22.8",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@formily/antd": "^2.2.20",
+    "@formily/core": "^2.2.20",
+    "@formily/react": "^2.2.20",
+    "@hzab/form-render": "^0.0.1",
+    "axios": "^1.4.0",
+    "lodash": "^4.17.21"
+  },
+  "directories": {
+    "lib": "lib"
+  }
+}

package/src/common/data-model.js

@@ -0,0 +1,219 @@
+import _ from "lodash";
+import axios from "axios";
+
+class DataModel {
+  constructor(params) {
+    const {
+      ctx,
+      query,
+      createApi,
+      createMap,
+      getApi,
+      getMap,
+      getListApi,
+      getListMap,
+      getListFunc,
+      updateApi,
+      updateMap,
+      deleteApi,
+      multipleDeleteApi,
+      axios: as,
+      axiosConf,
+    } = params;
+
+    this.ctx = ctx || {};
+    this.query = query || {};
+    this.axios = as || axios;
+    this.axiosConf = axiosConf || {};
+
+    this.createApi = createApi;
+    this.createMap = createMap;
+    this.getApi = getApi;
+    this.getMap = getMap;
+    this.getListApi = getListApi;
+    this.getListMap = getListMap;
+    this.getListFunc = getListFunc;
+    this.updateApi = updateApi;
+    this.updateMap = updateMap;
+    this.deleteApi = deleteApi;
+    this.multipleDeleteApi = multipleDeleteApi;
+  }
+
+  getApiUrl(api, record, ctx = this.ctx) {
+    if (!api) {
+      throw new Error("Error getApiUrl api 不能为空", api, record, ctx);
+    }
+    let apiUrl = api;
+    const params = _.merge({}, record, ctx);
+    _.each(params, (value, key) => {
+      if (!_.isString(value) || !_.isNumber(value) || _.isBoolean(value)) {
+        apiUrl = apiUrl.replace(`:${key}`, value);
+      }
+    });
+    return apiUrl;
+  }
+
+  get(q = {}, ctx = {}) {
+    let query = _.merge({}, this.query, q);
+    query = _.pickBy(query, (val) => !_.isNil(val) && val !== "");
+
+    return new Promise((resolve, reject) => {
+      const apiUrl = this.getApiUrl(this.getApi, query, ctx);
+      this.axios
+        .get(apiUrl, {
+          ...this.axiosConf,
+          params: query,
+        })
+        .then((response) => {
+          this.handleRes(
+            response,
+            (res) => {
+              if (this.getMap) {
+                res = this.getMap(res);
+              }
+              resolve(res);
+            },
+            reject,
+          );
+        })
+        .catch((err) => this.errorHandler(err, reject));
+    });
+  }
+
+  async getList(q, ctx) {
+    let query = _.merge({}, this.query, q);
+    query = _.pickBy(query, (val) => !_.isNil(val) && val !== "");
+
+    let resultList = null;
+    if (this.getListFunc) {
+      resultList = await this.getListFunc(query);
+    } else {
+      const getPro = new Promise((resolve, reject) => {
+        const apiUrl = this.getApiUrl(this.getListApi, q, ctx);
+        this.axios
+          .get(apiUrl, {
+            ...this.axiosConf,
+            params: query,
+          })
+          .then((response) => {
+            this.handleRes(
+              response,
+              (res) => {
+                // data: { list: [], pagination: { current: 0, total: 1 } }
+                if (this.getListMap) {
+                  res.list = res.list.map((record) => this.getListMap(record));
+                }
+                resolve(res);
+              },
+              reject,
+            );
+          })
+          .catch((err) => this.errorHandler(err, reject));
+      });
+      resultList = await getPro;
+    }
+    return resultList;
+  }
+
+  create(params, ctx) {
+    return new Promise((resolve, reject) => {
+      const apiUrl = this.getApiUrl(this.createApi, params, ctx);
+      const opt = { ...this.axiosConf };
+      if (params instanceof FormData) {
+        opt.headers = { "Content-Type": "multipart/form-data" };
+      }
+      this.axios
+        .post(apiUrl, params, opt)
+        .then((response) => {
+          this.handleRes(response, resolve, reject);
+        })
+        .catch((err) => this.errorHandler(err, reject));
+    });
+  }
+
+  update(params, ctx) {
+    return new Promise((resolve, reject) => {
+      const apiUrl = this.getApiUrl(this.updateApi, params, ctx);
+      const opt = { ...this.axiosConf };
+      if (params instanceof FormData) {
+        opt.headers = { "Content-Type": "multipart/form-data" };
+      }
+      this.axios
+        .put(apiUrl, params, opt)
+        .then((response) => {
+          this.handleRes(response, resolve, reject);
+        })
+        .catch((err) => this.errorHandler(err, reject));
+    });
+  }
+
+  delete(params, ctx) {
+    return new Promise((resolve, reject) => {
+      const apiUrl = this.getApiUrl(this.deleteApi, params, ctx);
+      this.axios
+        .delete(apiUrl, { ...this.axiosConf, ...params })
+        .then((response) => {
+          this.handleRes(response, resolve, reject);
+        })
+        .catch((err) => this.errorHandler(err, reject));
+    });
+  }
+
+  multipleDelete(params, ctx) {
+    return new Promise((resolve, reject) => {
+      const apiUrl = this.getApiUrl(this.multipleDeleteApi, params, ctx);
+      this.axios
+        .delete(apiUrl, { ...this.axiosConf, ...params })
+        .then((response) => {
+          this.handleRes(response, resolve, reject);
+        })
+        .catch((err) => this.errorHandler(err, reject));
+    });
+  }
+
+  handleRes(response, resolve, reject) {
+    if (typeof response !== "object") {
+      reject(new Error("response not object"));
+      return;
+    }
+    let _res = response;
+    if (_res.data && typeof _res.data?.data?.code === "number") {
+      _res = _res.data;
+    }
+    const { code, message, data, msg } = _res;
+    if (code === 200) {
+      let _data = data ?? {};
+      if (_.isObject(_data) && _data.message === undefined) {
+        // 前缀 _ 避免与 data 里已有的 message 冲突
+        _data._message = message || msg;
+      }
+      resolve(_data);
+    } else {
+      const error = new Error(message || msg);
+      error.code = code;
+      error.response = response;
+      error._message = message || msg;
+      reject(error);
+    }
+  }
+
+  errorHandler(err, reject) {
+    const response = err.response || err;
+    if (response) {
+      const message = (response.data && (response.data.message || response.data.msg)) || response.msg;
+      const error = new Error(message || response.statusText || "未知错误");
+      error.code = response.status;
+      error.response = response;
+      if (message) {
+        // 前缀 _ 避免与 data 里已有的 message 冲突
+        error._message = message;
+      }
+      return reject(error);
+    }
+    return reject(err);
+  }
+}
+
+export { axios };
+
+export default DataModel;

package/src/common/utils.js

@@ -0,0 +1,80 @@
+import _ from "lodash";
+import dayjs from "dayjs";
+
+const dateFormatEnum = {
+  time: "YYYY-MM-DD HH:mm:ss",
+  date: "YYYY-MM-DD",
+};
+
+/**
+ * 获取 field 对应的值
+ * @param {Object} field schema 项
+ * @param {Object} data 数据
+ * @param {Object} opt 配置项
+ * @returns
+ */
+export function getVal(field = {}, data = {}, opt = {}) {
+  let val = _.get(data, field.name);
+  const { type } = field || {};
+  const xComponent = field["x-component"];
+  const xComponentProps = field["x-component-props"] || {};
+
+  if (val && (type === "date-picker" || xComponent === "DatePicker" || xComponent === "DatePicker.RangePicker")) {
+    const { picker, showTime } = xComponentProps || {};
+    const mode = picker === "date" && showTime === true ? "time" : picker || "date";
+    const _formatEnum = opt.dateFormatEnum || dateFormatEnum;
+    const format = xComponentProps?.format || _formatEnum[mode];
+
+    if (Array.isArray(val)) {
+      return val.map((it) => getDateVal(it, format)).join(" ~ ");
+    }
+    return getDateVal(val, format);
+  }
+
+  if (val && (type === "time-picker" || xComponent === "TimePicker" || xComponent === "TimePicker.RangePicker")) {
+    const format = xComponentProps?.format || "HH:mm:ss";
+    if (Array.isArray(val)) {
+      return val.map((it) => dayjs(it).format(format)).join(" ~ ");
+    }
+    return dayjs(val).format(format);
+  }
+
+  if (type === "switch") {
+    if (val === undefined || val === false || val === field.inactiveValue) {
+      return field.inactiveText || "否";
+    }
+    if (val === true || val === field.activeValue) {
+      return field.activeText || "是";
+    }
+    return val;
+  }
+  if (typeof field.relation === "object") {
+    const { key, name, label } = field.relation;
+    return data[key]?.[name];
+  }
+
+  if (
+    (xComponent === "Select" || xComponent === "Radio.Group" || xComponent === "Checkbox.Group") &&
+    Array.isArray(field.enum)
+  ) {
+    if (!Array.isArray(val)) {
+      return field.enum?.find((option) => option.value === val)?.label || val;
+    } else if (xComponentProps.mode === "multiple" && Array.isArray(val)) {
+      let _val = [];
+      val.forEach((valIt) => {
+        _val.push(field.enum?.find((option) => option.value === valIt)?.label || valIt);
+      });
+      val = _val;
+    }
+  }
+
+  if (Array.isArray(val)) {
+    return val.join("、");
+  }
+
+  return val;
+}
+
+export function getDateVal(val, format) {
+  return dayjs(val).format(format);
+}

package/src/form-dialog/index.jsx

@@ -0,0 +1,173 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, useMemo } from "react";
+
+import { Modal, Button, message } from "antd";
+
+import FormRender from "@hzab/form-render";
+
+import "./index.less";
+
+let _formData = null;
+
+function FormDialog(props, parentRef) {
+  const { Slots = {}, dialogConf = {} } = props;
+  const [title, setTitle] = useState("新增");
+  const [open, setOpen] = useState(false);
+  const formRef = useRef();
+
+  const FormSlot = useMemo(() => props.Slots?.FormSlot, [props.Slots?.FormSlot]);
+
+  const resolveCB = useRef();
+  const rejectCB = useRef();
+
+  function show(formData = props.formInitialValues, title) {
+    setOpen(true);
+    if (formRef.current?.formRender?.setValues) {
+      formRef.current?.formRender?.setValues(formData);
+      _formData = null;
+    } else {
+      _formData = formData;
+    }
+    console.log("formRef.current?.formRender", formRef.current?.formRender);
+    setTitle(title || "新增");
+    return new Promise((resolve, reject) => {
+      resolveCB.current = resolve;
+      rejectCB.current = reject;
+    });
+  }
+
+  function close() {
+    setOpen(false);
+    formRef.current?.formRender?.reset();
+  }
+
+  function cancel() {
+    close();
+    rejectCB.current && rejectCB.current();
+  }
+
+  useImperativeHandle(parentRef, () => ({
+    show,
+    close,
+    cancel,
+    onOk,
+  }));
+
+  function onOk() {
+    validate().then(async () => {
+      const submitForm = _.cloneDeep(await formRef.current?.formRender?.values);
+      if (dialogConf.beforeSubmit) {
+        const isContinue = await dialogConf.beforeSubmit(submitForm, {
+          cancel,
+        });
+        if (isContinue === false) {
+          return;
+        }
+      }
+
+      resolveCB.current && resolveCB.current(submitForm);
+      props.onSubmit && props.onSubmit(submitForm);
+      close();
+    });
+  }
+
+  /**
+   * 校验表单
+   * @returns
+   */
+  function validate(hideMessage) {
+    return new Promise((resolve, reject) => {
+      formRef.current?.formRender
+        ?.validate()
+        .then((values) => {
+          resolve(values);
+        })
+        .catch((err) => {
+          reject(err);
+          console.error("Error validate: ", err);
+          !hideMessage && message.error("输入有误！");
+        });
+    });
+  }
+
+  let footer = undefined;
+  if (dialogConf?.footer) {
+    footer = dialogConf?.footer;
+  } else {
+    footer = [];
+    const options = {
+      cancel,
+      onOk,
+      close,
+      form: formRef.current?.formRender,
+      validate,
+    };
+
+    if (Slots.dialogFooterPre) {
+      footer.push(<Slots.dialogFooterPre key="pre" options={options} />);
+    }
+
+    footer.push(
+      <Button key="cancel" onClick={cancel}>
+        {dialogConf.cancelText || "取 消"}
+      </Button>,
+    );
+
+    if (Slots.dialogFooterCenter) {
+      footer.push(<Slots.dialogFooterCenter key="center" options={options} />);
+    }
+
+    footer.push(
+      <Button key="confirm" type="primary" onClick={onOk}>
+        {dialogConf.okText || "确 定"}
+      </Button>,
+    );
+
+    if (Slots.dialogFooterSuffix) {
+      footer.push(<Slots.dialogFooterSuffix key="suffix" options={options} />);
+    }
+  }
+
+  /**
+   * 解决 show 函数中 formRef.current 为 undefined 的问题
+   */
+  function didMount() {
+    if (_formData) {
+      formRef.current?.formRender?.setValues(_formData);
+      _formData = null;
+    }
+  }
+
+  return (
+    <Modal
+      wrapClassName="form-dialog"
+      title={title}
+      visible={open}
+      onCancel={cancel}
+      onOk={onOk}
+      footer={footer}
+      width={dialogConf?.width}
+      destroyOnClose
+    >
+      {FormSlot ? (
+        <FormSlot ref={formRef} schema={props.schema?.schema} resolveCB={resolveCB} rejectCB={rejectCB} />
+      ) : (
+        <FormRender
+          ref={formRef}
+          schema={props.schema}
+          schemaScope={props.schemaScope}
+          xComponents={props.xComponents}
+        ></FormRender>
+      )}
+      <DidMount didMount={didMount} />
+    </Modal>
+  );
+}
+
+function DidMount(props) {
+  useEffect(() => {
+    props.didMount();
+  }, []);
+  return;
+}
+
+export default forwardRef(FormDialog);

package/src/form-dialog/index.less

@@ -0,0 +1,2 @@
+.form-dialog {
+}

package/src/index.js

@@ -0,0 +1,7 @@
+import ListRender from "./list-render.jsx";
+
+import DataModel from "./common/data-model.js";
+
+export { DataModel };
+
+export default ListRender;

package/src/index.less

@@ -0,0 +1,14 @@
+.list-render {
+  .list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    .header-actions-render {
+      text-align: right;
+      .ant-btn + .ant-btn {
+        margin-left: 12px;
+      }
+    }
+  }
+}