@hzab/list-render 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "",
   "main": "lib",
   "scripts": {
@@ -19,6 +19,7 @@
   "author": "CaiYansong",
   "license": "ISC",
   "devDependencies": {
+    "@hzab/data-model": "^0.0.2",
     "@hzab/webpack-config": "0.0.12",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",

package/src/data-model.js

@@ -1,228 +1,5 @@
-import _ from "lodash";
-import axios from "axios";
+export * from "@hzab/data-model";
 
-const _$Temp = {};
-
-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 || _$Temp.axios || 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 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;
-    //  兼容 传入的是 response.data 的情况
-    if (_res.data && _res.headers && _res.request && typeof _res.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);
-  }
-}
-
-function setDefaultAxios(ax) {
-  if (ax) {
-    _$Temp.axios = ax;
-  }
-}
-
-export { axios, DataModel, setDefaultAxios };
+import DataModel from "@hzab/data-model";
 
 export default DataModel;

package/src/index.js

@@ -1,5 +1,5 @@
 import ListRender from "./list-render.jsx";
 
-export * from "./data-model.js";
+export * from "@hzab/data-model";
 
 export default ListRender;

package/src/list-render.jsx

@@ -225,6 +225,7 @@ const ListRender = forwardRef(function (props, parentRef) {
         list={list}
         config={props.tableConf}
         hasAction={props.hasAction}
+        query={model?.query}
         Slots={props.Slots}
         onEdit={onEdit}
         onDel={onDel}
@@ -238,7 +239,6 @@ const ListRender = forwardRef(function (props, parentRef) {
         ref={formDialogRef}
         schema={schema}
         dialogConf={props.dialogConf}
-        formSlots={props.formSlots}
         formInitialValues={props.formInitialValues}
         onClose={props.onFormDialogClose}
         onSubmit={formState === "edit" ? onEditSubmit : onCreateSubmit}

package/src/pagination-render/index.jsx

@@ -7,7 +7,7 @@ const pageSizeOptions = [10, 20, 50, 100];
 
 function PaginationRender(props) {
   const [pageSize, setPageSize] = useState(
-    props.query?.pageSize || (props.pageSizeOptions ? props.pageSizeOptions[0] : pageSizeOptions[0]),
+    props.query?.pageSize || (props.config?.pageSizeOptions ? props.config?.pageSizeOptions[0] : pageSizeOptions[0]),
   );
   const [pageNum, setPageNumber] = useState(props.query?.pageNum || 1);
 
@@ -43,7 +43,7 @@ function PaginationRender(props) {
         current={pageNum}
         pageSize={pageSize}
         onChange={onChange}
-        pageSizeOptions={props.pageSizeOptions || pageSizeOptions}
+        pageSizeOptions={props.config?.pageSizeOptions || pageSizeOptions}
         total={props.total}
         showTotal={(total) => `总条数 ${total} 条`}
         showSizeChanger

package/src/table-render/index.jsx

@@ -6,7 +6,8 @@ import { getVal, getFieldList } from "../common/utils";
 import "./index.less";
 
 function TableRender(props) {
-  const { config = {} } = props;
+  const { config = {}, query = {} } = props;
+  const { orderColType, orderColWidth } = config || {};
   const [columns, setColumns] = useState([]);
 
   useEffect(() => {
@@ -15,6 +16,27 @@ function TableRender(props) {
     }
     const fieldList = getFieldList(props.schema);
     const columns = [];
+
+    // 序号列
+    if (orderColType === "page") {
+      columns.push({
+        title: "序号",
+        width: orderColWidth,
+        render: (text, record, index) => `${index + 1}`,
+      });
+    } else if (orderColType == "all") {
+      columns.push({
+        title: "序号",
+        width: orderColWidth,
+        render: (text, record, index) => {
+          const { pageSize = 10, pageNum = 1 } = query || {};
+          console.log(pageNum, index);
+          // 当前页数减1乘以每一页页数再加当前页序号+1
+          return `${(pageNum - 1) * pageSize + (index + 1)}`;
+        },
+      });
+    }
+
     /*
     title: "姓名",
     dataIndex: "name",
@@ -89,7 +111,7 @@ function TableRender(props) {
     });
 
     if (props.hasAction !== false) {
-      const { hasEdit, hasDel } = props.config || {};
+      const { hasEdit, hasDel, hasDelTips } = props.config || {};
 
       const _colConf = props.config?.colConf?._$actions || {};
 
@@ -104,14 +126,14 @@ function TableRender(props) {
             return <Slots.tableActionsSlot {...slotProps} />;
           }
 
-          let _hasEdit = hasEdit !== false;
-          if (_hasEdit && typeof _colConf.hasEdit === "function") {
-            _hasEdit = _colConf.hasEdit(record, index);
-          }
-          let _hasDel = hasDel !== false;
-          if (_hasDel && typeof _colConf.hasDel === "function") {
-            _hasDel = _colConf.hasDel(record, index);
-          }
+          //编辑按钮权限
+          const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
+
+          //删除按钮权限
+          const _hasDel = hasDel && typeof hasDel === "function" ? hasEdit(record, index) : hasDel !== false;
+
+          //删除按钮提示
+          const delTips = hasDelTips && typeof hasDelTips === "function" ? hasDelTips(record, index) : hasDelTips || "确认删除该项?";
 
           return (
             <div style={{ width: _colConf?.width, maxWidth: "100%" }}>
@@ -130,7 +152,7 @@ function TableRender(props) {
               {_hasDel ? (
                 <Popconfirm
                   placement="topRight"
-                  title={"确认删除该项？"}
+                  title={delTips}
                   onConfirm={() => {
                     props.onDel && props.onDel(record, index);
                   }}