@zgfe/modules-settings 2.0.0-zhongyuan.9 → 2.1.0-zhongyuan-set.1

package/README.md

@@ -1,33 +1,33 @@
-# @zgfe/modules-settings
-
-## Getting Started
-
-Install dependencies,
-
-```bash
-$ npm i
-```
-
-Start the dev server,
-
-```bash
-$ npm start
-```
-
-Build documentation,
-
-```bash
-$ npm run docs:build
-```
-
-Run test,
-
-```bash
-$ npm test
-```
-
-Build library via `father`,
-
-```bash
-$ npm run build
-```
+# @zgfe/modules-settings
+
+## Getting Started
+
+Install dependencies,
+
+```bash
+$ npm i
+```
+
+Start the dev server,
+
+```bash
+$ npm start
+```
+
+Build documentation,
+
+```bash
+$ npm run docs:build
+```
+
+Run test,
+
+```bash
+$ npm test
+```
+
+Build library via `father`,
+
+```bash
+$ npm run build
+```

package/es/components/card/index.less

@@ -1,87 +1,87 @@
-@import '../../constants/icons/iconfont.css';
-
-.settings-card {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  align-items: flex-start;
-  // min-width: 368px;
-  // max-width: 368px;
-  height: 114px;
-  padding: 16px;
-  background-color: #fafafb;
-  border: 1px solid #f2f3f4;
-  border-radius: 8px;
-
-  &-header {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    line-height: 22px;
-
-    &-title {
-      display: flex;
-      overflow: hidden;
-      color: var(--io-N-, #021429);
-      font-weight: 500;
-      font-size: 14px;
-      font-size: 14px;
-      font-family: 'PingFang SC';
-      font-style: normal;
-
-      div {
-        width: 100%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-align: left;
-        text-overflow: ellipsis;
-        cursor: pointer;
-      }
-
-      .ant-tag {
-        flex: 0;
-        height: 24px;
-        margin: 0 8px;
-        padding: 1px 8px;
-        color: var(--io-i-, #165dff);
-        font-weight: 400;
-        font-family: 'PingFang SC';
-        background: var(--io-i1-, #e8efff);
-        border-radius: 2px;
-      }
-    }
-
-    &-btnNodes {
-      display: flex;
-      gap: 16px;
-      color: var(--io-N4-, #9aa1a9);
-      cursor: pointer;
-    }
-  }
-
-  &-content {
-    width: 100%;
-    color: var(--io-N6-, #67727f);
-    &-item {
-      &-platform {
-        display: block;
-      }
-    }
-  }
-
-  &-empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 31px 0;
-    color: var(--io-i-, #165dff);
-    line-height: 1;
-    background: none;
-    cursor: pointer;
-
-    .bsicon {
-      color: var(--io-i-, #165dff);
-      font-size: 24px !important;
-    }
-  }
-}
+@import '../../constants/icons/iconfont.css';
+
+.settings-card {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: flex-start;
+  // min-width: 368px;
+  // max-width: 368px;
+  height: 114px;
+  padding: 16px;
+  background-color: #fafafb;
+  border: 1px solid #f2f3f4;
+  border-radius: 8px;
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    line-height: 22px;
+
+    &-title {
+      display: flex;
+      overflow: hidden;
+      color: var(--io-N-, #021429);
+      font-weight: 500;
+      font-size: 14px;
+      font-size: 14px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+
+      div {
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-align: left;
+        text-overflow: ellipsis;
+        cursor: pointer;
+      }
+
+      .ant-tag {
+        flex: 0;
+        height: 24px;
+        margin: 0 8px;
+        padding: 1px 8px;
+        color: var(--io-i-, #165dff);
+        font-weight: 400;
+        font-family: 'PingFang SC';
+        background: var(--io-i1-, #e8efff);
+        border-radius: 2px;
+      }
+    }
+
+    &-btnNodes {
+      display: flex;
+      gap: 16px;
+      color: var(--io-N4-, #9aa1a9);
+      cursor: pointer;
+    }
+  }
+
+  &-content {
+    width: 100%;
+    color: var(--io-N6-, #67727f);
+    &-item {
+      &-platform {
+        display: block;
+      }
+    }
+  }
+
+  &-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 31px 0;
+    color: var(--io-i-, #165dff);
+    line-height: 1;
+    background: none;
+    cursor: pointer;
+
+    .bsicon {
+      color: var(--io-i-, #165dff);
+      font-size: 24px !important;
+    }
+  }
+}

package/es/components/importMetaDialog/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './styles/index.less';
+declare const ImportModal: React.FC<{
+    onCancel?: () => void;
+    onSuccess?: (result: any) => void;
+    isExportList?: Boolean;
+    downloadTempleUrl: string;
+    uploadFile: string;
+    fileName?: string;
+    params?: any;
+    showHistory?: boolean;
+}>;
+export default ImportModal;

package/es/components/importMetaDialog/index.js

@@ -0,0 +1,217 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { BizDialog, BizGlobalDataContext, IconFont } from '@zgfe/business-lib';
+import React, { useContext, useState } from 'react';
+import { Upload, Spin, message, Button, Modal } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+import './styles/index.less';
+import request from '../../utils/ajax';
+var Dragger = Upload.Dragger;
+var classPrefix = 'import-meta-modal';
+var ImportModal = function ImportModal(props) {
+  //导入详情
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    openImportModalResult = _useState2[0],
+    setOpenImportModalResult = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    errorLoc = _useState4[0],
+    setErrorLoc = _useState4[1];
+  var handleImportResultOk = function handleImportResultOk() {
+    props.onSuccess && props.onSuccess({});
+    setErrorLoc(undefined);
+  };
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    fileData = _useState6[0],
+    setFileData = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    uploading = _useState8[0],
+    setUploading = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    loading = _useState10[0],
+    setLoading = _useState10[1];
+  var _useContext = useContext(BizGlobalDataContext),
+    currentApp = _useContext.currentApp,
+    isDemo = _useContext.isDemo;
+  var UploadProps = {
+    name: 'file',
+    maxCount: 1,
+    accept: '.xls,.xlsx',
+    showUploadList: false,
+    onChange: function onChange(info) {
+      var _info$file = info.file,
+        status = _info$file.status,
+        size = _info$file.size;
+      var isLt10M = size / 1024 / 1024 < 10;
+      setUploading(status === 'uploading');
+      if (status !== 'uploading') {
+        if (info.fileList.length > 0 && isLt10M) {
+          setFileData(info.fileList[0].originFileObj);
+        }
+      }
+      if (status === 'removed') {} else if (status === 'error') {}
+    },
+    beforeUpload: function beforeUpload(file) {
+      var isLt10M = file.size / 1024 / 1024 < 10;
+      if (!isLt10M) {
+        message.error('支持 xls、xlsx 格式，最大10M');
+      }
+      return false;
+    }
+  };
+  // 下载模板
+  var onDownloadTemplate = function onDownloadTemplate() {
+    // window.open(`/元数据-批量上传事件模板.xlsx`);
+    request(props.downloadTempleUrl, {
+      method: 'post',
+      data: {},
+      responseType: 'blob',
+      fileName: props.fileName || '导入模板'
+    }).then(function (res) {});
+  };
+  // 上传文件
+  var onOk = function onOk() {
+    if (!fileData) {
+      message.warning('请选择文件');
+      return;
+    }
+    var formData = new FormData();
+    formData.append('appId', currentApp.appId);
+    formData.append('file', fileData);
+    if (props.params) {
+      for (var key in props.params) {
+        formData.append(key, props.params[key]);
+      }
+    }
+    setLoading(true);
+    request(props.uploadFile, {
+      method: 'post',
+      data: formData
+    }).then(function (res) {
+      if (!res) return;
+      //进入历史记录
+      if (props.showHistory && res.data) {
+        setOpenImportModalResult(true);
+        setErrorLoc({
+          successLocCount: res.data['导入成功条数'],
+          failedLocCount: res.data['导入失败条数'],
+          failedLocNames: res.data['导入失败标签名']
+        });
+      } else {
+        message.success('导入成功');
+        props.onSuccess && props.onSuccess(res.data);
+      }
+    }).catch(function (e) {
+      console.log(e);
+    }).finally(function () {
+      setLoading(false);
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BizDialog, {
+    title: "\u5BFC\u5165\u5C5E\u6027\u503C",
+    open: true,
+    className: classPrefix,
+    onCancel: props.onCancel,
+    onOk: onOk,
+    confirmLoading: loading,
+    okButtonProps: {
+      disabled: isDemo
+    },
+    closable: true,
+    closeIcon: /*#__PURE__*/React.createElement(IconFont, {
+      type: "qingchu"
+    }),
+    footer: /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-footer")
+    }, /*#__PURE__*/React.createElement("a", {
+      className: "".concat(classPrefix, "-export-btn"),
+      onClick: onDownloadTemplate
+    }, /*#__PURE__*/React.createElement(IconFont, {
+      type: "xiazai1",
+      className: "".concat(classPrefix, "-icon-export")
+    }), "\u4E0B\u8F7D\u5BFC\u5165\u6A21\u7248"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      onClick: props.onCancel
+    }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      onClick: onOk
+    }, "\u786E\u5B9A")))
+  }, /*#__PURE__*/React.createElement(Spin, {
+    className: "".concat(classPrefix, "-spin"),
+    spinning: uploading,
+    tip: "\u4E0A\u4F20\u4E2D",
+    indicator: /*#__PURE__*/React.createElement(LoadingOutlined, {
+      className: "".concat(classPrefix, "-spin-icon"),
+      spin: true,
+      onPointerEnterCapture: undefined,
+      onPointerLeaveCapture: undefined
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 16
+    }
+  }, "\u5141\u8BB8\u4ECE\u6587\u4EF6\u6279\u91CF\u521B\u5EFA\u5C5E\u6027\u503C\u3002"), fileData ? (/*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-show-container")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-show-container-content")
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "file-excel",
+    className: "".concat(classPrefix, "-show-container-content-icon")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-show-container-content-file")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-show-container-content-file-title")
+  }, fileData.name), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-show-container-content-file-size")
+  }, fileData.size ? (fileData.size / 1024).toFixed(1) : '', " kb"))), /*#__PURE__*/React.createElement(Upload, _objectSpread({}, UploadProps), /*#__PURE__*/React.createElement("a", {
+    className: "".concat(classPrefix, "-upload-txt")
+  }, "\u91CD\u65B0\u4E0A\u4F20")))) : (/*#__PURE__*/React.createElement(Dragger, _objectSpread({
+    className: "".concat(classPrefix, "-export-container")
+  }, UploadProps), /*#__PURE__*/React.createElement(IconFont, {
+    type: "file-add",
+    className: "".concat(classPrefix, "-icon-file")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-export-container-h1")
+  }, "\u5C06\u6570\u636E\u6587\u4EF6\u62D6\u5230\u6B64\u5904 \u6216", /*#__PURE__*/React.createElement("a", null, "\u70B9\u51FB\u4E0A\u4F20")), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-export-container-h2")
+  }, "\u652F\u6301 xls\u3001xlsx \u683C\u5F0F\uFF0C\u6700\u592710M"))))), /*#__PURE__*/React.createElement(Modal, {
+    title: "\u5BFC\u5165\u6807\u7B7E",
+    open: openImportModalResult,
+    className: "exportList-importModal",
+    width: 600,
+    onOk: handleImportResultOk,
+    onCancel: handleImportResultOk,
+    footer: [/*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      onClick: handleImportResultOk
+    }, "\u786E\u5B9A")]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "exportList-importModal-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "exportList-importModal-tip"
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "tishi1",
+    size: 16,
+    className: "icon"
+  }), "\u5BFC\u5165\u6210\u529F", errorLoc && errorLoc.successLocCount, "\u6761\uFF0C\u5BFC\u5165\u5931\u8D25", errorLoc && errorLoc.failedLocCount, "\u6761"), /*#__PURE__*/React.createElement("p", null, "\u5BFC\u5165\u5931\u8D25\u6807\u7B7E\u540D\uFF1A"), /*#__PURE__*/React.createElement("div", {
+    className: "exportList-importModal-list"
+  }, errorLoc === null || errorLoc === void 0 ? void 0 : errorLoc.failedLocNames.map(function (o, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index
+    }, o);
+  })))));
+};
+export default ImportModal;

package/es/components/importMetaDialog/styles/index.less

@@ -0,0 +1,115 @@
+@import '~@zgfe/business-lib/es/assets/styles/inner.less';
+
+.import-meta-modal {
+  &-icon-file {
+    color: @primary-color;
+    font-size: 48px !important;
+  }
+  &-icon-export {
+    margin-right: @margin-xss;
+  }
+  &-export-btn {
+    display: block;
+    width: fit-content;
+    // margin-top: @margin-md;
+  }
+  .ant-upload.ant-upload-drag {
+    background: #fafafb;
+    /* io/中性/N2-置灰信息 */
+    border: 1px dashed #ccd0d4;
+  }
+  .ant-upload.ant-upload-drag .ant-upload {
+    padding: 40px 0;
+  }
+  &-export-container {
+    border-radius: 4px;
+    &-h1 {
+      margin-top: -8px;
+      margin-bottom: 4px;
+    }
+    &-h2 {
+      color: @text-color-secondary;
+      font-size: 12px;
+    }
+  }
+
+  &-show-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24px;
+    background: #fafafb;
+    /* io/中性/N1-按钮边框 线色 */
+    border: 1px solid #e6e7ea;
+    border-radius: 4px;
+    &-content {
+      display: flex;
+      align-items: center;
+      &-icon {
+        margin-right: 12px;
+        color: @primary-color;
+        font-size: 40px !important;
+      }
+      &-file {
+        &-title {
+          font-size: 16px;
+        }
+        &-size {
+          color: @text-color-secondary;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  &-spin {
+    background: #fafafb;
+    border: 1px solid #e6e7ea;
+    border-radius: 4px;
+    &-icon.anticon {
+      color: @primary-color;
+      font-size: 24px;
+    }
+    .ant-spin-text {
+      margin-top: @margin-xs;
+    }
+  }
+
+  &-upload-txt {
+    font-size: 16px;
+  }
+
+  .ant-modal-body {
+    padding-top: 8px !important;
+  }
+  &-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+.exportList {
+  &-importModal {
+    &-content {
+    }
+    &-tip {
+      margin: 0px 0px 10px;
+      padding: 5px 0px 5px 15px;
+      background-color: #e7f3fe;
+      border: 1px solid #b8e4ff;
+      border-radius: 4px;
+      .icon {
+        margin: 0px 10px;
+        color: #165dff;
+      }
+    }
+    &-list {
+      height: 160px;
+      padding: 10px;
+      overflow-y: scroll;
+      border: 1px solid #e5e5e5;
+      border-radius: 4px;
+    }
+  }
+}

package/es/components/pageLoading/index.less

@@ -1,7 +1,7 @@
-.settings-page-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
+.settings-page-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}