@pisell/materials 2.2.2 → 2.2.4

package/lib/components/table/Actions/component/ExportImport/components/ExportTable/index.js

@@ -0,0 +1,60 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/Actions/component/ExportImport/components/ExportTable/index.tsx
+var ExportTable_exports = {};
+__export(ExportTable_exports, {
+  default: () => ExportTable_default
+});
+module.exports = __toCommonJS(ExportTable_exports);
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var import_locales = require("../../../../../../../locales/index");
+var import_status = require("../../../../../status");
+var import_index = require("./index.less");
+var ExportTable = (props) => {
+  const { onChange, exportImport } = props;
+  const { selectLists } = exportImport;
+  const [type, setType] = (0, import_react.useState)(import_status.defaultOptions.exportType);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "bulk-export-tool" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "header" }, (0, import_locales.getText)("table-action-export-import-export-range")), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Radio.Group,
+    {
+      onChange: (e) => {
+        setType(e.target.value);
+        onChange(e.target.value);
+      },
+      value: type
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Radio, { value: "current-page" }, (0, import_locales.getText)("table-action-export-import-current-page")), /* @__PURE__ */ import_react.default.createElement(import_antd.Radio, { value: "all-records" }, (0, import_locales.getText)("table-action-export-import-all-records")), /* @__PURE__ */ import_react.default.createElement(import_antd.Radio, { value: "selected-records", disabled: !(selectLists == null ? void 0 : selectLists.length) }, `${(0, import_locales.getText)(
+      "table-action-export-import-selected-records"
+    )} (${(0, import_locales.getText)("table-action-export-import-selected")} ${(0, import_locales.getText)(
+      "table-action-export-import-item"
+    )((selectLists == null ? void 0 : selectLists.length) || 0)})`))
+  ));
+};
+var ExportTable_default = ExportTable;

package/lib/components/table/Actions/component/ExportImport/components/ExportTable/index.less

@@ -0,0 +1,5 @@
+.bulk-export-tool {
+  .header {
+    margin-bottom: 24px;
+  }
+}

package/lib/components/table/Actions/component/ExportImport/components/ImportLog/Detail.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "./index.less";
+declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export default _default;

package/lib/components/table/Actions/component/ExportImport/components/ImportLog/Detail.js

@@ -0,0 +1,117 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/Actions/component/ExportImport/components/ImportLog/Detail.tsx
+var Detail_exports = {};
+__export(Detail_exports, {
+  default: () => Detail_default
+});
+module.exports = __toCommonJS(Detail_exports);
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var import_locales = require("../../../../../../../locales/index");
+var import_date = require("../../utils/date");
+var import_file = require("../../utils/file");
+var import_index = require("./index.less");
+var Detail = (props, ref) => {
+  const [list, setList] = (0, import_react.useState)([]);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const columns = [
+    {
+      title: (0, import_locales.getText)("table-action-export-import-log-name"),
+      dataIndex: "file_name"
+    },
+    {
+      title: (0, import_locales.getText)("table-action-export-import-log-result"),
+      dataIndex: "result",
+      render: (text) => {
+        return /* @__PURE__ */ import_react.default.createElement("div", null, (0, import_locales.getText)("table-action-export-import-log-ok")((text == null ? void 0 : text.success) || 0), (text == null ? void 0 : text.fail) ? (0, import_locales.getText)("table-action-export-import-log-err")((text == null ? void 0 : text.fail) || 0) : null);
+      }
+    },
+    {
+      title: (0, import_locales.getText)("table-action-export-import-file-account"),
+      dataIndex: "account",
+      render: (text) => {
+        return text ? /* @__PURE__ */ import_react.default.createElement("div", null, `${(text == null ? void 0 : text.first_name) || ""} ${(text == null ? void 0 : text.last_name) || ""}`) : null;
+      }
+    },
+    {
+      title: (0, import_locales.getText)("table-action-export-import-file-created"),
+      dataIndex: "created_at",
+      render: (text) => (0, import_date.formatDate)(text)
+    }
+  ];
+  const modalContent = (0, import_react.useMemo)(() => {
+    var _a, _b, _c;
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "export-history-content" }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Table,
+      {
+        rowClassName: "antd-table-row",
+        columns,
+        dataSource: list,
+        pagination: false,
+        rowKey: (record) => record.id,
+        scroll: { x: true }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "error-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "header" }, /* @__PURE__ */ import_react.default.createElement("span", null, (0, import_locales.getText)("table-action-export-import-log-err-log")), /* @__PURE__ */ import_react.default.createElement(
+      "a",
+      {
+        onClick: () => {
+          var _a2, _b2, _c2;
+          let text = ((_c2 = (_b2 = (_a2 = list == null ? void 0 : list[0]) == null ? void 0 : _a2.result) == null ? void 0 : _b2.fail_msg) == null ? void 0 : _c2.join(",")) || "";
+          (0, import_file.copyText)(text);
+        }
+      },
+      (0, import_locales.getText)("table-action-export-import-log-copy")
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "box" }, (_c = (_b = (_a = list == null ? void 0 : list[0]) == null ? void 0 : _a.result) == null ? void 0 : _b.fail_msg) == null ? void 0 : _c.map((i, index) => {
+      return /* @__PURE__ */ import_react.default.createElement("div", { key: index }, i);
+    }))));
+  }, [list]);
+  (0, import_react.useImperativeHandle)(ref, () => {
+    return {
+      open: (params) => {
+        setList((params == null ? void 0 : params.list) || []);
+        setOpen(true);
+      }
+    };
+  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Modal,
+    {
+      open,
+      title: (0, import_locales.getText)("table-action-export-import-log-detail-title"),
+      width: 900,
+      footer: null,
+      destroyOnClose: true,
+      onCancel: () => setOpen(false),
+      className: "antd-modal-detail-modal"
+    },
+    modalContent
+  );
+};
+var Detail_default = (0, import_react.forwardRef)(Detail);

package/lib/components/table/Actions/component/ExportImport/components/ImportLog/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { ExportImportType } from "../../../../../types";
+import "./index.less";
+declare const ImportLog: (props: {
+    exportImport: ExportImportType;
+}) => React.JSX.Element;
+export default ImportLog;

package/lib/components/table/Actions/component/ExportImport/components/ImportLog/index.js

@@ -0,0 +1,141 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/Actions/component/ExportImport/components/ImportLog/index.tsx
+var ImportLog_exports = {};
+__export(ImportLog_exports, {
+  default: () => ImportLog_default
+});
+module.exports = __toCommonJS(ImportLog_exports);
+var import_ahooks = require("ahooks");
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var import_useEngineContext = __toESM(require("../../../../../../../hooks/useEngineContext"));
+var import_locales = require("../../../../../../../locales/index");
+var import_serve = require("../../../../../serve");
+var import_status = require("../../../../../status");
+var import_utils = require("../../../../../utils");
+var import_date = require("../../utils/date");
+var import_Detail = __toESM(require("./Detail"));
+var import_index = require("./index.less");
+var defaultData = {
+  type: import_status.defaultOptions.importValue,
+  skip: 1,
+  num: 10
+};
+var ImportLog = (props) => {
+  const { exportImport } = props;
+  const { formId, formCode } = exportImport;
+  const detailRef = (0, import_react.useRef)(null);
+  const [list, setList] = (0, import_react.useState)([]);
+  const [defaultParams, setDefaultParams] = (0, import_react.useState)(defaultData);
+  const context = (0, import_useEngineContext.default)();
+  import_utils.request.setRequest(context.appHelper.utils.request);
+  (0, import_react.useEffect)(() => {
+    let params = {};
+    if (formId) {
+      params.form_id = formId;
+    }
+    if (formCode) {
+      params.code = formCode;
+    }
+    setDefaultParams({
+      ...defaultParams,
+      ...params
+    });
+  }, [formId, formCode]);
+  const _historyList = (0, import_ahooks.useRequest)(import_serve.historyData, {
+    manual: true,
+    onSuccess: (res) => {
+      var _a;
+      if (res.code == 200) {
+        setList(((_a = res.data) == null ? void 0 : _a.list) || []);
+      }
+    }
+  });
+  const init = () => {
+    if ((defaultParams == null ? void 0 : defaultParams.form_id) || (defaultParams == null ? void 0 : defaultParams.code)) {
+      _historyList.run(defaultParams);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    init();
+  }, [defaultParams]);
+  const columns = [
+    {
+      title: (0, import_locales.getText)("table-action-export-import-log-name"),
+      dataIndex: "file_name"
+    },
+    {
+      title: (0, import_locales.getText)("table-action-export-import-log-result"),
+      dataIndex: "result",
+      render: (text, record) => {
+        var _a;
+        return /* @__PURE__ */ import_react.default.createElement("div", null, (0, import_locales.getText)("table-action-export-import-log-ok")((text == null ? void 0 : text.success) || 0), ((_a = record == null ? void 0 : record.result) == null ? void 0 : _a.fail) ? (0, import_locales.getText)("table-action-export-import-log-err")((text == null ? void 0 : text.fail) || 0) : null, (text == null ? void 0 : text.fail) ? /* @__PURE__ */ import_react.default.createElement(
+          "a",
+          {
+            style: {
+              marginLeft: "10px"
+            },
+            onClick: () => {
+              var _a2, _b;
+              (_b = (_a2 = detailRef == null ? void 0 : detailRef.current) == null ? void 0 : _a2.open) == null ? void 0 : _b.call(_a2, {
+                list: [record]
+              });
+            }
+          },
+          (0, import_locales.getText)("table-action-export-import-log-check")
+        ) : null);
+      }
+    },
+    {
+      title: (0, import_locales.getText)("table-action-export-import-file-account"),
+      dataIndex: "account",
+      render: (text) => {
+        return text ? /* @__PURE__ */ import_react.default.createElement("div", null, `${(text == null ? void 0 : text.first_name) || ""} ${(text == null ? void 0 : text.last_name) || ""}`) : null;
+      }
+    },
+    {
+      title: (0, import_locales.getText)("table-action-export-import-file-created"),
+      dataIndex: "created_at",
+      render: (text) => (0, import_date.formatDate)(text)
+    }
+  ];
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "export-history-content" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { spinning: _historyList == null ? void 0 : _historyList.loading }, /* @__PURE__ */ import_react.default.createElement("div", { className: "content-hint" }, (0, import_locales.getText)("table-action-export-import-log-hint"), /* @__PURE__ */ import_react.default.createElement("a", { onClick: () => init() }, (0, import_locales.getText)("table-action-export-import-file-refresh"))), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Table,
+    {
+      rowClassName: "antd-table-row",
+      columns,
+      dataSource: list,
+      pagination: false,
+      rowKey: (record) => record.id,
+      scroll: { x: true }
+    }
+  ))), /* @__PURE__ */ import_react.default.createElement(import_Detail.default, { ref: detailRef }));
+};
+var ImportLog_default = ImportLog;

package/lib/components/table/Actions/component/ExportImport/components/ImportLog/index.less

@@ -0,0 +1,48 @@
+.export-history {
+  font-size: 14px;
+  font-weight: 650;
+  color: #252a2d;
+  cursor: pointer;
+}
+
+.antd-modal-detail-modal{
+  .pisell-lowcode-modal-header{
+    padding: 0 0 6px 0!important;
+  }
+  .pisell-lowcode-table-content{
+    .pisell-lowcode-table-cell{
+      padding: 16px!important;
+    }
+  }
+}
+
+.export-history-content {
+  max-height: calc(100vh * 0.7 - 120px);
+  min-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  .content-hint {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #8c8c8c;
+  }
+
+  .error-content {
+    margin-top: 20px;
+    .header {
+      display: flex;
+      align-content: center;
+      justify-content: space-between;
+    }
+
+    .box {
+      margin-top: 10px;
+      padding: 10px;
+      border: 1px solid #d9d9d9;
+      border-radius: 2px;
+    }
+  }
+}

package/lib/components/table/Actions/component/ExportImport/components/ImportTable/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ExportImportType } from "../../../../../types";
+import "./index.less";
+declare type ImportTableProps = {
+    onChange: any;
+    exportImport: ExportImportType;
+    errorStatus: string | null;
+};
+declare const ImportTable: (props: ImportTableProps) => React.JSX.Element;
+export default ImportTable;

package/lib/components/table/Actions/component/ExportImport/components/ImportTable/index.js

@@ -0,0 +1,124 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/Actions/component/ExportImport/components/ImportTable/index.tsx
+var ImportTable_exports = {};
+__export(ImportTable_exports, {
+  default: () => ImportTable_default
+});
+module.exports = __toCommonJS(ImportTable_exports);
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var import_useEngineContext = __toESM(require("../../../../../../../hooks/useEngineContext"));
+var import_locales = require("../../../../../../../locales/index");
+var import_iconfont = __toESM(require("../../../../../../iconfont"));
+var import_serve = require("../../../../../serve");
+var import_status = require("../../../../../status");
+var import_utils = require("../../../../../utils");
+var import_download = __toESM(require("../../utils/download"));
+var import_index = require("./index.less");
+var loadingKey = import_status.defaultOptions.importValue;
+var ImportTable = (props) => {
+  const { onChange, exportImport, errorStatus } = props;
+  const { formId, formCode, templateFileUrl } = exportImport;
+  const [file, setFile] = (0, import_react.useState)(null);
+  const context = (0, import_useEngineContext.default)();
+  import_utils.request.setRequest(context.appHelper.utils.request);
+  const handleDownload = async () => {
+    if (templateFileUrl) {
+      (0, import_download.default)(templateFileUrl);
+    } else {
+      import_antd.message.loading({ content: "Loading...", key: loadingKey });
+      const params = {};
+      if (formId) {
+        params.form_id = formId;
+      }
+      if (formCode) {
+        params.code = formCode;
+      }
+      let { data } = await (0, import_serve.importTemplate)(params);
+      (0, import_download.default)(data == null ? void 0 : data.url);
+    }
+    import_antd.message.success({
+      content: (0, import_locales.getText)("table-action-export-import-table-success-download"),
+      key: loadingKey
+    });
+  };
+  const fileType = (0, import_react.useMemo)(() => {
+    if (file) {
+      return file.type.indexOf("/csv") !== -1 ? "csv" : "excel";
+    }
+    return "";
+  }, [file]);
+  const fileName = (0, import_react.useMemo)(() => {
+    if (file) {
+      return file.name;
+    }
+    return "";
+  }, [file]);
+  const _handleSelectFile = (e) => {
+    var _a;
+    let _file = ((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.files) ? e.target.files[0] : null;
+    if (_file) {
+      if (_file.name.indexOf(".csv") === -1 && _file.name.indexOf(".xls") === -1 && _file.name.indexOf(".xlsx") === -1) {
+        return import_antd.message.error(
+          (0, import_locales.getText)("table-action-export-import-table-error-file")
+        );
+      }
+      onChange(_file);
+      setFile(_file);
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, errorStatus ? /* @__PURE__ */ import_react.default.createElement("div", { className: "error-hint" }, /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "icontixingshixin", className: "error-icon" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "text" }, errorStatus)) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "import-title" }, (0, import_locales.getText)("table-action-export-import-table-text-click-download"), /* @__PURE__ */ import_react.default.createElement("a", { onClick: handleDownload }, (0, import_locales.getText)("table-action-export-import-table-text-product-template"))), file ? /* @__PURE__ */ import_react.default.createElement("div", { className: "file-list" }, /* @__PURE__ */ import_react.default.createElement(
+    import_iconfont.default,
+    {
+      type: fileType === "csv" ? "icon-csv" : "icon-excel",
+      className: "file-icon"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "file-name" }, fileName), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, null, (0, import_locales.getText)("table-action-export-import-table-text-edit-file"), /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      accept: ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel",
+      className: "upload-input",
+      type: "file",
+      onChange: _handleSelectFile,
+      value: ""
+    }
+  ))) : /* @__PURE__ */ import_react.default.createElement("div", { className: "default-view" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "icon-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_icons.InboxOutlined, null)), /* @__PURE__ */ import_react.default.createElement("p", { className: "text" }, (0, import_locales.getText)("table-action-export-import-table-text-input-title")), /* @__PURE__ */ import_react.default.createElement("p", { className: "hint" }, (0, import_locales.getText)("table-action-export-import-table-text-input-describe")), /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      accept: ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel",
+      className: "upload-input",
+      type: "file",
+      onChange: _handleSelectFile,
+      value: ""
+    }
+  )));
+};
+var ImportTable_default = ImportTable;

package/lib/components/table/Actions/component/ExportImport/components/ImportTable/index.less

@@ -0,0 +1,97 @@
+.default-view {
+  margin: 16px 0;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  background: #f5f5f5;
+  border: 1px dashed #d9d9d9;
+  border-radius: 2px;
+  cursor: pointer;
+  -webkit-transition: border-color 0.3s;
+  transition: border-color 0.3s;
+  box-sizing: border-box;
+  padding: 0 16px;
+
+  .icon-wrap {
+    color: var(--theme-light-color);
+    font-size: 42px;
+    margin: 16px 0 0 0;
+  }
+
+  .text {
+    margin: 16px 0 0 0;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 16px;
+  }
+
+  .hint {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 14px;
+  }
+}
+
+.upload-input {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.error-hint {
+  display: flex;
+  width: 100%;
+  border-radius: 4px;
+  padding: 15px 20px;
+  border: 1px solid #ee827a;
+  background: #fff5e9;
+  margin-bottom: 20px;
+
+  .error-icon {
+    color: #ee827a;
+    font-size: 20px;
+  }
+
+  .text {
+    margin-left: 10px;
+    flex: 1 1;
+    font-size: 14px;
+  }
+}
+
+.file-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 115px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 2px;
+  margin: 16px 0;
+  padding: 0 30px;
+  box-sizing: border-box;
+
+  .file-icon {
+    font-size: 50px;
+    color: var(--theme-color);
+  }
+
+  .file-name {
+    text-align: left;
+    flex: 1;
+    max-width: 300px;
+    margin-left: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.import-title{
+  a{
+    margin-left: 10px;
+  }
+}

package/lib/components/table/Actions/component/ExportImport/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ExportImportType } from "../../../types";
+import "./index.less";
+declare type ExportImportProps = {
+    exportImport: ExportImportType;
+};
+declare const ExportImport: ({ exportImport }: ExportImportProps) => React.JSX.Element;
+export default ExportImport;