@smart100/spu-web-plugin 0.0.18 → 0.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- var version = "0.0.18";
1
+ var version = "0.0.19";
2
2
 
3
3
  function _iterableToArrayLimit(r, l) {
4
4
  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
@@ -49232,6 +49232,7 @@ var Core = /*#__PURE__*/function () {
49232
49232
  _context2.prev = 3;
49233
49233
  _context2.next = 6;
49234
49234
  return apaasAxios.get("".concat(hostsRoot, "/multiplatconfig/env/").concat(envName), {
49235
+ isShowLoading: false,
49235
49236
  isSendToken: false
49236
49237
  });
49237
49238
  case 6:
@@ -49284,6 +49285,8 @@ var Core = /*#__PURE__*/function () {
49284
49285
  return apaasAxios.post("".concat(smartcenter, "/api/smartcenter/biz/getTenantWebAndApiDefined"), {
49285
49286
  envid: envId,
49286
49287
  tenantcode: tenantCode
49288
+ }, {
49289
+ isShowLoading: false
49287
49290
  });
49288
49291
  case 8:
49289
49292
  res = _context3.sent;
@@ -50012,7 +50015,7 @@ var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAA
50012
50015
 
50013
50016
  // console.log(icon_csv)
50014
50017
  var renderTemplate = (function (ele) {
50015
- return "\n<style>\n:host {\n display: block;\n width: 100%;\n height: 100%;\n position: fixed;\n top: 0;\n left: 0px;\n right: 0px;\n bottom: 0px;\n z-index: 9000;\n}\n\n.hide {\n display: none!important;\n}\n\n.spu-expandexp {\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n overflow: auto;\n}\n\n\n.modal {\n width: 80%;\n max-width: 800px;\n min-width: 500px;\n margin: 50px auto 0;\n border-radius: 2px;\n overflow: hidden;\n}\n.modal-th {\n height: 40px;\n background-color: #409eff;\n}\n.modal-th .title {\n float: left;\n line-height: 40px;\n color: #fff;\n font-size: 16px;\n margin-left: 16px;\n}\n.modal-th .close {\n float: right;\n line-height: 40px;\n height: 40px;\n width: 40px;\n color: #fff;\n font-size: 16px;\n text-align: center;\n cursor: pointer;\n}\n.modal-tb {\n padding: 16px;\n background-color: #fff;\n}\n\n.export {}\n.export-wait {\n line-height: 32px;\n height: 32px;\n text-align: center;\n background-color: rgba(255, 73, 73, .1);\n color: #333;\n}\n.export-wait span {\n color: red;\n margin: 0 4px;\n}\n.export-tit {\n line-height: 32px;\n height: 32px;\n}\n\n.export-sel {\n margin-bottom: 12px;\n}\n.export-sel-title {\n margin-bottom: 12px;\n}\n.export-sel-con {\n display: flex;\n}\n.export-sel-con-item {\n display: flex;\n align-items: center;\n margin-right: 32px;\n cursor: pointer;\n}\n.export-sel-con-item label {\n font-size: 14px;\n font-weight: bold;\n cursor: pointer;\n}\n.export-sel-con-item input {\n cursor: pointer;\n margin: 4px;\n}\n\n.export-section-wrap {}\n.export-section {\n border: 1px solid #ddd;\n padding: 12px;\n}\n\n.export-file {\n height: 28px;\n line-height: 28px;\n display: flex;\n justify-content: space-between;\n // margin-bottom: 12px;\n}\n.export-file-l {\n flex: 1;\n display: flex;\n align-items: center;\n font-size: 14px;\n}\n.export-file-l-img {\n flex: none;\n display: block;\n height: 20px;\n width: 20px;\n margin-right: 4px;\n background-size: cover;\n background-position: center center;\n background-repeat: no-repeat;\n}\n.export-file-l-img.excel {\n background-image: url(".concat(img$3, ");\n}\n.export-file-l-img.csv {\n background-image: url(").concat(img$2, ");\n}\n.export-file-l-img.pdf {\n background-image: url(").concat(img$1, ");\n}\n.export-file-l-img.zip {\n background-image: url(").concat(img, ");\n}\n.export-file-l-filename {\n flex: 1;\n}\n.export-file-l-filesize {\n flex: none;\n}\n.export-file-r {\n display: flex;\n width: 90px;\n flex-direction: row-reverse;\n align-items: center;\n}\n.export-file-r-download {\n line-height: 26px;\n border-radius: 3px;\n background-color: #67c23a;\n border: 1px solid #67c23a;\n color: #fff;\n padding: 0 12px;\n font-size: 14px;\n cursor: pointer;\n}\n.export-file-r-download:hover {\n background: #85ce61;\n border-color: #85ce61;\n}\n.export-file-r-cancel {\n line-height: 20px;\n width: 20px;\n border-radius: 14px;\n color: #f56c6c;\n background: #fef0f0;\n border: 1px solid #fbc4c4;\n text-align: center;\n font-size: 14px;\n cursor: pointer;\n}\n.export-file-r-cancel:hover {\n background: #f56c6c;\n border-color: #f56c6c;\n color: #fff;\n}\n\n\n\n.export-progress {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 30px;\n}\n.export-progress-outer {\n flex: 1;\n height: 8px;\n background-color: #EBEEF5;\n overflow: hidden;\n position: relative;\n vertical-align: middle;\n}\n.export-progress-inner {\n animation-duration: 3s;\n height: 100%;\n width: 0;\n background-color: #417AE7;\n -webkit-transition: width .6s ease;\n transition: width .6s ease;\n}\n.export-progress-inner.error {\n background: red;\n}\n.export-progress-inner.success {\n background: #67C23A;\n}\n.export-progress-text {\n flex: none;\n width: 50px;\n font-size: 14px;\n line-height: 30px;\n text-align: right;\n}\n\n\n\n.export-result {\n height: 28px;\n line-height: 28px;\n text-align: right;\n font-size: 12px;\n padding: 0px 8px;\n}\n.export-result.error {\n background: #fdf1ef;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.export-result.success {\n background: #e5f7f3;\n}\n\n\n.export-tip {\n height: 28px;\n line-height: 28px;\n margin-top: 8px;\n font-size: 12px;\n text-align: right;\n color: #999;\n}\n\n.export-btnwrap {\n margin-top: 12px;\n display: flex;\n flex-direction: row-reverse;\n}\n.btn {\n line-height: 38px;\n line-height: 38px;\n border: 1px solid #409eff;\n background-color: #409eff;\n border-radius: 5px;\n color: #fff;\n padding: 0 20px;\n font-size: 16px;\n cursor: pointer;\n}\n.btn:hover {\n background: #66b1ff;\n border-color: #66b1ff;\n}\n</style>\n\n <div class=\"spu-expandexp\">\n <div class=\"modal\">\n <div class=\"modal-th\">\n <div class=\"title\">\n \u6570\u636E\u5BFC\u51FA\n </div>\n <div class=\"close\">\n x\n </div>\n </div>\n <div class=\"modal-tb\">\n <div class=\"export\">\n <div class=\"export-wait hide\">\n \u5BFC\u51FA\u7B49\u5F85\u961F\u5217\u4E2D\uFF1A\u8FD8\u6709<span></span>\u4F4D\uFF0C\u8BF7\u8010\u5FC3\u7A0D\u7B49...\n </div>\n\n <div class=\"export-sel hide\">\n <div class=\"export-sel-title\">\u8BF7\u9009\u62E9\u5BFC\u51FA\u5185\u5BB9</div>\n <div class=\"export-sel-con\"></div>\n </div>\n\n <div class=\"export-section-wrap hide\">\n <div class=\"export-tit\"></div>\n <div class=\"export-section\">\n <div class=\"export-file\">\n <div class=\"export-file-l\">\n <div class=\"export-file-l-img\"></div>\n <span class=\"export-file-l-filename\"></span>\n <span class=\"export-file-l-filesize\"></span>\n </div>\n <div class=\"export-file-r\">\n <div class=\"export-file-r-download hide\">\u4E0B\u8F7D</div>\n <div class=\"export-file-r-cancel hide\">x</div>\n </div>\n </div>\n\n <div class=\"export-progress\">\n <div class=\"export-progress-outer\">\n <div class=\"export-progress-inner\"></div>\n </div>\n <div class=\"export-progress-text\"></div>\n </div>\n\n <div class=\"export-result hide\"></div>\n\n <div class=\"export-tip hide\">\u60A8\u53EF\u4EE5\u968F\u65F6\u5173\u95ED\u8BE5\u5F39\u6846\uFF0C\u4E4B\u540E\u5728\u5BFC\u5165\u5BFC\u51FA\u5217\u8868\u4E2D\u67E5\u770B\u7ED3\u679C\u3002</div>\n </div>\n </div>\n\n <div class=\"export-btnwrap\">\n <div class=\"btn\">\u5BFC\u51FA</div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n ");
50018
+ return "\n<style>\n.spu-expandexp-confirm {\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n overflow: hidden;\n position: absolute;\n top: 0;\n left: 0px;\n right: 0px;\n bottom: 0px;\n}\n.spu-expandexp-confirm-modal {\n width: 400px;\n margin: 50px auto 0;\n border-radius: 2px;\n overflow: hidden;\n}\n.spu-expandexp-confirm-modal-th {\n height: 40px;\n background-color: #409eff;\n}\n.spu-expandexp-confirm-modal-th-title {\n float: left;\n line-height: 40px;\n color: #fff;\n font-size: 16px;\n margin-left: 16px;\n}\n.spu-expandexp-confirm-modal-th-close {\n float: right;\n line-height: 40px;\n height: 40px;\n width: 40px;\n color: #fff;\n font-size: 16px;\n text-align: center;\n cursor: pointer;\n}\n.spu-expandexp-confirm-modal-tb {\n padding: 16px;\n background-color: #fff;\n}\n.spu-expandexp-confirm-modal-tb-tip {\n\n}\n.spu-expandexp-confirm-modal-btnwrap {\n margin-top: 12px;\n display: flex;\n flex-direction: row-reverse;\n}\n\n.spu-expandexp-message {\n width: auto;\n height: 30px;\n line-height: 30px;\n border-radius: 3px;\n overflow: hidden;\n position: absolute;\n padding: 0 24px;\n top: 50px;\n left: 50%;\n transform: translate(-50%, 0);\n transition: all .6s ease;\n}\n.spu-expandexp-message.success {\n background-color: #f0f9eb;\n border: 1px solid #529b2e;\n color: #67c23a;\n}\n.spu-expandexp-message.error {\n background-color: #fde2e2;\n border: 1px solid #c45656;\n color: #f56c6c;\n}\n.opacity0 {\n transition: all .6s ease;\n opacity: 0;\n}\n\n</style>\n<style>\n:host {\n display: block;\n width: 100%;\n height: 100%;\n position: fixed;\n top: 0;\n left: 0px;\n right: 0px;\n bottom: 0px;\n z-index: 9000;\n}\n\n.hide {\n display: none!important;\n}\n\n.spu-expandexp {\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n overflow: auto;\n position: absolute;\n top: 0;\n left: 0px;\n right: 0px;\n bottom: 0px;\n}\n\n\n\n\n.modal {\n width: 80%;\n max-width: 800px;\n min-width: 500px;\n margin: 50px auto 0;\n border-radius: 2px;\n overflow: hidden;\n}\n.modal-th {\n height: 40px;\n background-color: #409eff;\n}\n.modal-th .title {\n float: left;\n line-height: 40px;\n color: #fff;\n font-size: 16px;\n margin-left: 16px;\n}\n.modal-th .close {\n float: right;\n line-height: 40px;\n height: 40px;\n width: 40px;\n color: #fff;\n font-size: 16px;\n text-align: center;\n cursor: pointer;\n}\n.modal-tb {\n padding: 16px;\n background-color: #fff;\n}\n\n.export {}\n.export-wait {\n line-height: 32px;\n height: 32px;\n text-align: center;\n background-color: rgba(255, 73, 73, .1);\n color: #333;\n}\n.export-wait span {\n color: red;\n margin: 0 4px;\n}\n.export-tit {\n line-height: 32px;\n height: 32px;\n}\n\n.export-sel {\n margin-bottom: 12px;\n}\n.export-sel-title {\n margin-bottom: 12px;\n}\n.export-sel-con {\n display: flex;\n}\n.export-sel-con-item {\n display: flex;\n align-items: center;\n margin-right: 32px;\n cursor: pointer;\n}\n.export-sel-con-item label {\n font-size: 14px;\n font-weight: bold;\n cursor: pointer;\n}\n.export-sel-con-item input {\n cursor: pointer;\n margin: 4px;\n}\n\n.export-section-wrap {}\n.export-section {\n border: 1px solid #ddd;\n padding: 12px;\n}\n\n.export-file {\n height: 28px;\n line-height: 28px;\n display: flex;\n justify-content: space-between;\n // margin-bottom: 12px;\n}\n.export-file-l {\n flex: 1;\n display: flex;\n align-items: center;\n font-size: 14px;\n}\n.export-file-l-img {\n flex: none;\n display: block;\n height: 20px;\n width: 20px;\n margin-right: 4px;\n background-size: cover;\n background-position: center center;\n background-repeat: no-repeat;\n}\n.export-file-l-img.excel {\n background-image: url(".concat(img$3, ");\n}\n.export-file-l-img.csv {\n background-image: url(").concat(img$2, ");\n}\n.export-file-l-img.pdf {\n background-image: url(").concat(img$1, ");\n}\n.export-file-l-img.zip {\n background-image: url(").concat(img, ");\n}\n.export-file-l-filename {\n flex: 1;\n}\n.export-file-l-filesize {\n flex: none;\n}\n.export-file-r {\n display: flex;\n width: 90px;\n flex-direction: row-reverse;\n align-items: center;\n}\n.export-file-r-download {\n line-height: 26px;\n border-radius: 3px;\n background-color: #67c23a;\n border: 1px solid #67c23a;\n color: #fff;\n padding: 0 12px;\n font-size: 14px;\n cursor: pointer;\n}\n.export-file-r-download:hover {\n background: #85ce61;\n border-color: #85ce61;\n}\n.export-file-r-cancel {\n line-height: 20px;\n width: 20px;\n border-radius: 14px;\n color: #999;\n background: #fff;\n border: 1px solid #999;\n text-align: center;\n font-size: 14px;\n cursor: pointer;\n}\n.export-file-r-cancel:hover {\n background: #fff;\n border-color: #777;\n color: #777;\n}\n\n\n\n.export-progress {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 30px;\n}\n.export-progress-outer {\n flex: 1;\n height: 8px;\n background-color: #EBEEF5;\n overflow: hidden;\n position: relative;\n vertical-align: middle;\n}\n.export-progress-inner {\n animation-duration: 3s;\n height: 100%;\n width: 0;\n background-color: #409eff;\n -webkit-transition: width .6s ease;\n transition: width .6s ease;\n}\n.export-progress-inner.error {\n background: red;\n}\n.export-progress-inner.success {\n background: #67C23A;\n}\n.export-progress-text {\n flex: none;\n width: 50px;\n font-size: 14px;\n line-height: 30px;\n text-align: right;\n}\n\n\n\n.export-result {\n height: 28px;\n line-height: 28px;\n text-align: right;\n font-size: 12px;\n padding: 0px 8px;\n}\n.export-result.error {\n background: #fdf1ef;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.export-result.success {\n background: #e5f7f3;\n}\n\n\n.export-tip {\n height: 28px;\n line-height: 28px;\n margin-top: 8px;\n font-size: 12px;\n text-align: right;\n color: #999;\n}\n\n.export-btnwrap {\n margin-top: 12px;\n display: flex;\n flex-direction: row-reverse;\n}\n.btn {\n height: 38px;\n line-height: 38px;\n border: 1px solid #409eff;\n background-color: #409eff;\n border-radius: 5px;\n color: #fff;\n padding: 0 20px;\n font-size: 16px;\n cursor: pointer;\n}\n.btn:hover {\n background: #66b1ff;\n border-color: #66b1ff;\n}\n\n.btn1 {\n height: 30px;\n line-height: 30px;\n border: 1px solid #409eff;\n background-color: #409eff;\n border-radius: 5px;\n color: #fff;\n padding: 0 12px;\n font-size: 14px;\n cursor: pointer;\n}\n.btn1:hover {\n background: #66b1ff;\n border-color: #66b1ff;\n}\n\n.btn2 {\n height: 30px;\n line-height: 30px;\n border: 1px solid #aaa;\n background-color: #eee;\n border-radius: 5px;\n color: #444;\n padding: 0 12px;\n font-size: 14px;\n cursor: pointer;\n}\n.btn2:hover {\n border-color: #bbb;\n color: #777;\n}\n</style>\n\n <div class=\"spu-expandexp\">\n <div class=\"modal\">\n <div class=\"modal-th\">\n <div class=\"title\">\n \u6570\u636E\u5BFC\u51FA\n </div>\n <div class=\"close\">\n x\n </div>\n </div>\n <div class=\"modal-tb\">\n <div class=\"export\">\n <div class=\"export-wait hide\">\n \u5BFC\u51FA\u7B49\u5F85\u961F\u5217\u4E2D\uFF1A\u8FD8\u6709<span></span>\u4F4D\uFF0C\u8BF7\u8010\u5FC3\u7A0D\u7B49...\n </div>\n\n <div class=\"export-sel hide\">\n <div class=\"export-sel-title\">\u8BF7\u9009\u62E9\u5BFC\u51FA\u5185\u5BB9</div>\n <div class=\"export-sel-con hide\"></div>\n </div>\n\n <div class=\"export-section-wrap hide\">\n <div class=\"export-tit\"></div>\n <div class=\"export-section\">\n <div class=\"export-file\">\n <div class=\"export-file-l\">\n <div class=\"export-file-l-img\"></div>\n <span class=\"export-file-l-filename\"></span>\n <span class=\"export-file-l-filesize\"></span>\n </div>\n <div class=\"export-file-r\">\n <div class=\"export-file-r-download hide\">\u4E0B\u8F7D</div>\n <div class=\"export-file-r-cancel hide\">x</div>\n </div>\n </div>\n\n <div class=\"export-progress\">\n <div class=\"export-progress-outer\">\n <div class=\"export-progress-inner\"></div>\n </div>\n <div class=\"export-progress-text\"></div>\n </div>\n\n <div class=\"export-result hide\"></div>\n\n <div class=\"export-tip hide\">\u60A8\u53EF\u4EE5\u968F\u65F6\u5173\u95ED\u8BE5\u5F39\u6846\uFF0C\u4E4B\u540E\u5728\u5BFC\u5165\u5BFC\u51FA\u5217\u8868\u4E2D\u67E5\u770B\u7ED3\u679C\u3002</div>\n </div>\n </div>\n\n <div class=\"export-btnwrap\">\n <div class=\"export-btn btn\">\u5BFC\u51FA</div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"spu-expandexp-confirm hide\">\n <div class=\"spu-expandexp-confirm-modal\">\n <div class=\"spu-expandexp-confirm-modal-th\">\n <div class=\"spu-expandexp-confirm-modal-th-title\">\n \u6570\u636E\u5BFC\u51FA\n </div>\n <div class=\"spu-expandexp-confirm-modal-th-close\">\n x\n </div>\n </div>\n <div class=\"spu-expandexp-confirm-modal-tb\">\n\n <div class=\"spu-expandexp-confirm-modal-tb-tip\">\n \u786E\u8BA4\u662F\u5426\u53D6\u6D88\u8BE5\u4EFB\u52A1\uFF1F\n </div>\n\n <div class=\"spu-expandexp-confirm-modal-btnwrap\">\n <div class=\"spu-expandexp-confirm-modal-confirm btn1\">\u786E\u5B9A</div>\n <div class=\"spu-expandexp-confirm-modal-cancel btn2\" style=\"margin-right: 12px;\">\u5173\u95ED</div>\n </div>\n\n </div>\n </div>\n </div>\n\n <div class=\"spu-expandexp-message hide opacity0\"></div>\n ");
50016
50019
  });
50017
50020
 
50018
50021
  var Step = /*#__PURE__*/function () {
@@ -50161,6 +50164,7 @@ var SpuExpandexp = /*#__PURE__*/function (_HTMLElement) {
50161
50164
  imageheightcm: '2',
50162
50165
  expandStatus: '1',
50163
50166
  filewatermarkGlobalConfig: '0',
50167
+ exportConfigInit: false,
50164
50168
  exportcontentArray: ['excel', 'link', 'photo'],
50165
50169
  percentage: 0,
50166
50170
  step: new Step(),
@@ -50175,9 +50179,9 @@ var SpuExpandexp = /*#__PURE__*/function (_HTMLElement) {
50175
50179
  runningTaskCount: 0,
50176
50180
  isOldVersionService: false
50177
50181
  }, function (key, value) {
50178
- var _this2$data = _this2.data;
50179
- _this2$data.expandStatus;
50180
- var stepName = _this2$data.stepName,
50182
+ var _this2$data = _this2.data,
50183
+ exportConfigInit = _this2$data.exportConfigInit,
50184
+ stepName = _this2$data.stepName,
50181
50185
  stepText = _this2$data.stepText,
50182
50186
  exportcontentArray = _this2$data.exportcontentArray,
50183
50187
  exportcontent = _this2$data.exportcontent,
@@ -50207,6 +50211,9 @@ var SpuExpandexp = /*#__PURE__*/function (_HTMLElement) {
50207
50211
  var $filesize = _this2.shadow.querySelector('.export-file-l-filesize');
50208
50212
  var $wait = _this2.shadow.querySelector('.export-wait');
50209
50213
  var $waitSpan = _this2.shadow.querySelector('.export-wait span');
50214
+ if (key === 'exportConfigInit') {
50215
+ _this2.vIf($exportSelCon, exportConfigInit);
50216
+ }
50210
50217
  if (key === 'expandStatus' || key === 'stepName') {
50211
50218
  // this.vIf($exportSel, (expandStatus !== '1' && stepName === 'initial'))
50212
50219
  _this2.vIf($exportSel, stepName === 'initial');
@@ -50326,6 +50333,16 @@ var SpuExpandexp = /*#__PURE__*/function (_HTMLElement) {
50326
50333
  !elc.contains('hide') && elc.add('hide');
50327
50334
  }
50328
50335
  }
50336
+ }, {
50337
+ key: "vOp",
50338
+ value: function vOp(ele, flag) {
50339
+ var elc = ele.classList;
50340
+ if (flag) {
50341
+ elc.contains('opacity0') && elc.remove('opacity0');
50342
+ } else {
50343
+ !elc.contains('opacity0') && elc.add('opacity0');
50344
+ }
50345
+ }
50329
50346
  }, {
50330
50347
  key: "initData",
50331
50348
  value: function initData(data, setCallback) {
@@ -50383,15 +50400,26 @@ var SpuExpandexp = /*#__PURE__*/function (_HTMLElement) {
50383
50400
  _this4.removeSelf();
50384
50401
  });
50385
50402
  this.shadow.querySelector('.export-file .export-file-r-download').addEventListener('click', function () {
50386
- console.log('下载');
50387
50403
  _this4.handleDownload();
50388
50404
  });
50389
50405
  this.shadow.querySelector('.export-file .export-file-r-cancel').addEventListener('click', function () {
50390
- console.log('取消');
50406
+ // this.handleCencel()
50407
+ var ele = _this4.shadow.querySelector('.spu-expandexp-confirm');
50408
+ _this4.vIf(ele, true);
50409
+ });
50410
+ this.shadow.querySelector('.spu-expandexp-confirm-modal-th-close').addEventListener('click', function () {
50411
+ var ele = _this4.shadow.querySelector('.spu-expandexp-confirm');
50412
+ _this4.vIf(ele, false);
50413
+ });
50414
+ this.shadow.querySelector('.spu-expandexp-confirm-modal-cancel').addEventListener('click', function () {
50415
+ var ele = _this4.shadow.querySelector('.spu-expandexp-confirm');
50416
+ _this4.vIf(ele, false);
50417
+ });
50418
+ this.shadow.querySelector('.spu-expandexp-confirm-modal-confirm').addEventListener('click', function () {
50391
50419
  _this4.handleCencel();
50392
50420
  });
50393
- this.shadow.querySelector('.export-btnwrap .btn').addEventListener('click', function () {
50394
- console.log('导出');
50421
+ this.shadow.querySelector('.export-btn').addEventListener('click', function () {
50422
+ // console.log('导出')
50395
50423
  _this4.handleExport();
50396
50424
  // this.data.percentage = this.data.percentage + 20
50397
50425
  // this.data.isOldVersionService = false
@@ -50442,6 +50470,7 @@ var SpuExpandexp = /*#__PURE__*/function (_HTMLElement) {
50442
50470
  _this5.data.iscompress = data.iscompress.toString();
50443
50471
  _this5.data.imagesizepercolumn = data.imagesizepercolumn.toString();
50444
50472
  _this5.data.imageheightcm = data.imageheightcm.toString();
50473
+ _this5.data.exportConfigInit = true;
50445
50474
  }
50446
50475
  }
50447
50476
  });
@@ -50478,6 +50507,7 @@ var SpuExpandexp = /*#__PURE__*/function (_HTMLElement) {
50478
50507
  _this5.data.exportcontent = 'excel';
50479
50508
  _this5.data.filewatermark = '0';
50480
50509
  _this5.data.iscompress = '0';
50510
+ _this5.data.exportConfigInit = true;
50481
50511
  } else if (_this5.data.expandStatus === '2') {
50482
50512
  _this5.data.iscompress = '1';
50483
50513
  // 获取文件水印开关
@@ -50494,6 +50524,7 @@ var SpuExpandexp = /*#__PURE__*/function (_HTMLElement) {
50494
50524
  _this5.data.filewatermarkGlobalConfig = '0';
50495
50525
  })["finally"](function () {
50496
50526
  _this5.data.filewatermark = _this5.data.filewatermarkGlobalConfig === '1' ? '1' : '0';
50527
+ _this5.data.exportConfigInit = true;
50497
50528
  });
50498
50529
  }
50499
50530
  });
@@ -50685,6 +50716,18 @@ var SpuExpandexp = /*#__PURE__*/function (_HTMLElement) {
50685
50716
  key: "handleCencel",
50686
50717
  value: function handleCencel() {
50687
50718
  var _this7 = this;
50719
+ var $message = this.shadow.querySelector('.spu-expandexp-message');
50720
+ // this.vText($message, '取消成功!')
50721
+ // this.vIf($message, true)
50722
+ // this.vOp($message, true)
50723
+ // $message.classList.add('success')
50724
+ // setTimeout(() => {
50725
+ // this.vOp($message, false)
50726
+ // setTimeout(() => {
50727
+ // this.vIf($message, false)
50728
+ // }, 1000)
50729
+ // }, 1500)
50730
+ // return false
50688
50731
  // console.log(this.data)
50689
50732
  // console.log(this.data.exportDataItem)
50690
50733
  apaasAxios.post('/api/teapi/queue/impexp/cancel', {
@@ -50694,8 +50737,26 @@ var SpuExpandexp = /*#__PURE__*/function (_HTMLElement) {
50694
50737
  // 取消成功
50695
50738
  _this7.updateStep('cancel');
50696
50739
  _this7.data.resultMessage = '任务已取消';
50697
- }
50698
- })["catch"](function (error) {});
50740
+ _this7.vText($message, '取消成功!');
50741
+ _this7.vIf($message, true);
50742
+ _this7.vOp($message, true);
50743
+ $message.classList.add('success');
50744
+ }
50745
+ })["catch"](function (error) {
50746
+ _this7.vText($message, '取消失败!');
50747
+ _this7.vIf($message, true);
50748
+ _this7.vOp($message, true);
50749
+ $message.classList.add('error');
50750
+ })["finally"](function () {
50751
+ var ele = _this7.shadow.querySelector('.spu-expandexp-confirm');
50752
+ _this7.vIf(ele, false);
50753
+ setTimeout(function () {
50754
+ _this7.vOp($message, false);
50755
+ setTimeout(function () {
50756
+ _this7.vIf($message, false);
50757
+ }, 2000);
50758
+ }, 2000);
50759
+ });
50699
50760
  }
50700
50761
  }, {
50701
50762
  key: "updateStep",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@smart100/spu-web-plugin",
3
- "version": "0.0.18",
3
+ "version": "0.0.19",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "dev": "rollup -c -w",
@@ -54,6 +54,7 @@ export default class SpuExpandexp extends HTMLElement {
54
54
 
55
55
  expandStatus: '1', // 1普通导出(没有做图片导出服务) 2服务端导出(做了图片导出服务未SPU化) 3安装了图片导出SPU
56
56
  filewatermarkGlobalConfig: '0', // 全局文件水印开关
57
+ exportConfigInit: false,
57
58
  exportcontentArray: ['excel', 'link', 'photo'], // 当 expandStatus = 2 | 3时才显示导出内容给用户选择
58
59
  percentage: 0,
59
60
  step: new Step(),
@@ -68,7 +69,7 @@ export default class SpuExpandexp extends HTMLElement {
68
69
  runningTaskCount: 0,
69
70
  isOldVersionService: false
70
71
  }, (key: string, value: any) => {
71
- const { expandStatus, stepName, stepText, exportcontentArray, exportcontent, isOldVersionService, runningTaskCount, fileName, filetype, fileSize, exportDataItem, percentage, resultMessage } = this.data
72
+ const { exportConfigInit, stepName, stepText, exportcontentArray, exportcontent, isOldVersionService, runningTaskCount, fileName, filetype, fileSize, exportDataItem, percentage, resultMessage } = this.data
72
73
 
73
74
  // debugger
74
75
  const $exportSel = this.shadow.querySelector('.export-sel') as any
@@ -89,6 +90,10 @@ export default class SpuExpandexp extends HTMLElement {
89
90
  const $wait = this.shadow.querySelector('.export-wait') as any
90
91
  const $waitSpan = this.shadow.querySelector('.export-wait span') as any
91
92
 
93
+ if (key === 'exportConfigInit') {
94
+ this.vIf($exportSelCon, exportConfigInit)
95
+ }
96
+
92
97
  if (key === 'expandStatus' || key === 'stepName') {
93
98
  // this.vIf($exportSel, (expandStatus !== '1' && stepName === 'initial'))
94
99
  this.vIf($exportSel, (stepName === 'initial'))
@@ -232,6 +237,15 @@ export default class SpuExpandexp extends HTMLElement {
232
237
  }
233
238
  }
234
239
 
240
+ vOp (ele: any, flag: boolean) {
241
+ const elc = ele.classList
242
+ if (flag) {
243
+ elc.contains('opacity0') && elc.remove('opacity0')
244
+ } else {
245
+ !elc.contains('opacity0') && elc.add('opacity0')
246
+ }
247
+ }
248
+
235
249
  initData (data: any, setCallback: any) {
236
250
  this.data = cloneDeep(data)
237
251
  const dataP = cloneDeep(data)
@@ -286,17 +300,34 @@ export default class SpuExpandexp extends HTMLElement {
286
300
  })
287
301
 
288
302
  this.shadow.querySelector('.export-file .export-file-r-download')!.addEventListener('click', () => {
289
- console.log('下载')
290
303
  this.handleDownload()
291
304
  })
292
305
 
293
306
  this.shadow.querySelector('.export-file .export-file-r-cancel')!.addEventListener('click', () => {
294
- console.log('取消')
307
+ // this.handleCencel()
308
+ const ele = this.shadow.querySelector('.spu-expandexp-confirm')
309
+ this.vIf(ele, true)
310
+ })
311
+
312
+
313
+ this.shadow.querySelector('.spu-expandexp-confirm-modal-th-close')!.addEventListener('click', () => {
314
+ const ele = this.shadow.querySelector('.spu-expandexp-confirm')
315
+ this.vIf(ele, false)
316
+ })
317
+
318
+ this.shadow.querySelector('.spu-expandexp-confirm-modal-cancel')!.addEventListener('click', () => {
319
+ const ele = this.shadow.querySelector('.spu-expandexp-confirm')
320
+ this.vIf(ele, false)
321
+ })
322
+
323
+ this.shadow.querySelector('.spu-expandexp-confirm-modal-confirm')!.addEventListener('click', () => {
295
324
  this.handleCencel()
296
325
  })
297
326
 
298
- this.shadow.querySelector('.export-btnwrap .btn')!.addEventListener('click', () => {
299
- console.log('导出')
327
+
328
+
329
+ this.shadow.querySelector('.export-btn')!.addEventListener('click', () => {
330
+ // console.log('导出')
300
331
  this.handleExport()
301
332
  // this.data.percentage = this.data.percentage + 20
302
333
  // this.data.isOldVersionService = false
@@ -338,6 +369,8 @@ export default class SpuExpandexp extends HTMLElement {
338
369
  this.data.iscompress = data.iscompress.toString()
339
370
  this.data.imagesizepercolumn = data.imagesizepercolumn.toString()
340
371
  this.data.imageheightcm = data.imageheightcm.toString()
372
+
373
+ this.data.exportConfigInit = true
341
374
  }
342
375
  }
343
376
  })
@@ -377,6 +410,8 @@ export default class SpuExpandexp extends HTMLElement {
377
410
  this.data.exportcontent = 'excel'
378
411
  this.data.filewatermark = '0'
379
412
  this.data.iscompress = '0'
413
+
414
+ this.data.exportConfigInit = true
380
415
  } else if (this.data.expandStatus === '2') {
381
416
  this.data.iscompress = '1'
382
417
 
@@ -396,6 +431,7 @@ export default class SpuExpandexp extends HTMLElement {
396
431
  this.data.filewatermarkGlobalConfig = '0'
397
432
  }).finally(() => {
398
433
  this.data.filewatermark = this.data.filewatermarkGlobalConfig === '1' ? '1' : '0'
434
+ this.data.exportConfigInit = true
399
435
  })
400
436
  }
401
437
  })
@@ -555,8 +591,21 @@ export default class SpuExpandexp extends HTMLElement {
555
591
  }
556
592
 
557
593
  handleCencel () {
594
+ const $message = this.shadow.querySelector('.spu-expandexp-message') as any
595
+ // this.vText($message, '取消成功!')
596
+ // this.vIf($message, true)
597
+ // this.vOp($message, true)
598
+ // $message.classList.add('success')
599
+ // setTimeout(() => {
600
+ // this.vOp($message, false)
601
+ // setTimeout(() => {
602
+ // this.vIf($message, false)
603
+ // }, 1000)
604
+ // }, 1500)
605
+ // return false
558
606
  // console.log(this.data)
559
607
  // console.log(this.data.exportDataItem)
608
+
560
609
  apaasAxios
561
610
  .post('/api/teapi/queue/impexp/cancel', {
562
611
  dynamicid: this.data.exportId
@@ -566,9 +615,28 @@ export default class SpuExpandexp extends HTMLElement {
566
615
  // 取消成功
567
616
  this.updateStep('cancel')
568
617
  this.data.resultMessage = '任务已取消'
618
+ this.vText($message, '取消成功!')
619
+ this.vIf($message, true)
620
+ this.vOp($message, true)
621
+ $message.classList.add('success')
569
622
  }
570
623
  })
571
624
  .catch((error: any) => {
625
+ this.vText($message, '取消失败!')
626
+ this.vIf($message, true)
627
+ this.vOp($message, true)
628
+ $message.classList.add('error')
629
+ })
630
+ .finally(() => {
631
+ const ele = this.shadow.querySelector('.spu-expandexp-confirm')
632
+ this.vIf(ele, false)
633
+
634
+ setTimeout(() => {
635
+ this.vOp($message, false)
636
+ setTimeout(() => {
637
+ this.vIf($message, false)
638
+ }, 2000)
639
+ }, 2000)
572
640
 
573
641
  })
574
642
  }
@@ -10,6 +10,87 @@ import icon_zip from './icons/icon_zip.png'
10
10
  export default (ele: SpuExpandexp) => {
11
11
  return `
12
12
  <style>
13
+ .spu-expandexp-confirm {
14
+ width: 100%;
15
+ height: 100%;
16
+ background-color: rgba(0, 0, 0, 0.5);
17
+ overflow: hidden;
18
+ position: absolute;
19
+ top: 0;
20
+ left: 0px;
21
+ right: 0px;
22
+ bottom: 0px;
23
+ }
24
+ .spu-expandexp-confirm-modal {
25
+ width: 400px;
26
+ margin: 50px auto 0;
27
+ border-radius: 2px;
28
+ overflow: hidden;
29
+ }
30
+ .spu-expandexp-confirm-modal-th {
31
+ height: 40px;
32
+ background-color: #409eff;
33
+ }
34
+ .spu-expandexp-confirm-modal-th-title {
35
+ float: left;
36
+ line-height: 40px;
37
+ color: #fff;
38
+ font-size: 16px;
39
+ margin-left: 16px;
40
+ }
41
+ .spu-expandexp-confirm-modal-th-close {
42
+ float: right;
43
+ line-height: 40px;
44
+ height: 40px;
45
+ width: 40px;
46
+ color: #fff;
47
+ font-size: 16px;
48
+ text-align: center;
49
+ cursor: pointer;
50
+ }
51
+ .spu-expandexp-confirm-modal-tb {
52
+ padding: 16px;
53
+ background-color: #fff;
54
+ }
55
+ .spu-expandexp-confirm-modal-tb-tip {
56
+
57
+ }
58
+ .spu-expandexp-confirm-modal-btnwrap {
59
+ margin-top: 12px;
60
+ display: flex;
61
+ flex-direction: row-reverse;
62
+ }
63
+
64
+ .spu-expandexp-message {
65
+ width: auto;
66
+ height: 30px;
67
+ line-height: 30px;
68
+ border-radius: 3px;
69
+ overflow: hidden;
70
+ position: absolute;
71
+ padding: 0 24px;
72
+ top: 50px;
73
+ left: 50%;
74
+ transform: translate(-50%, 0);
75
+ transition: all .6s ease;
76
+ }
77
+ .spu-expandexp-message.success {
78
+ background-color: #f0f9eb;
79
+ border: 1px solid #529b2e;
80
+ color: #67c23a;
81
+ }
82
+ .spu-expandexp-message.error {
83
+ background-color: #fde2e2;
84
+ border: 1px solid #c45656;
85
+ color: #f56c6c;
86
+ }
87
+ .opacity0 {
88
+ transition: all .6s ease;
89
+ opacity: 0;
90
+ }
91
+
92
+ </style>
93
+ <style>
13
94
  :host {
14
95
  display: block;
15
96
  width: 100%;
@@ -31,9 +112,16 @@ export default (ele: SpuExpandexp) => {
31
112
  height: 100%;
32
113
  background-color: rgba(0, 0, 0, 0.5);
33
114
  overflow: auto;
115
+ position: absolute;
116
+ top: 0;
117
+ left: 0px;
118
+ right: 0px;
119
+ bottom: 0px;
34
120
  }
35
121
 
36
122
 
123
+
124
+
37
125
  .modal {
38
126
  width: 80%;
39
127
  max-width: 800px;
@@ -181,17 +269,17 @@ export default (ele: SpuExpandexp) => {
181
269
  line-height: 20px;
182
270
  width: 20px;
183
271
  border-radius: 14px;
184
- color: #f56c6c;
185
- background: #fef0f0;
186
- border: 1px solid #fbc4c4;
272
+ color: #999;
273
+ background: #fff;
274
+ border: 1px solid #999;
187
275
  text-align: center;
188
276
  font-size: 14px;
189
277
  cursor: pointer;
190
278
  }
191
279
  .export-file-r-cancel:hover {
192
- background: #f56c6c;
193
- border-color: #f56c6c;
194
- color: #fff;
280
+ background: #fff;
281
+ border-color: #777;
282
+ color: #777;
195
283
  }
196
284
 
197
285
 
@@ -214,7 +302,7 @@ export default (ele: SpuExpandexp) => {
214
302
  animation-duration: 3s;
215
303
  height: 100%;
216
304
  width: 0;
217
- background-color: #417AE7;
305
+ background-color: #409eff;
218
306
  -webkit-transition: width .6s ease;
219
307
  transition: width .6s ease;
220
308
  }
@@ -267,7 +355,7 @@ export default (ele: SpuExpandexp) => {
267
355
  flex-direction: row-reverse;
268
356
  }
269
357
  .btn {
270
- line-height: 38px;
358
+ height: 38px;
271
359
  line-height: 38px;
272
360
  border: 1px solid #409eff;
273
361
  background-color: #409eff;
@@ -281,6 +369,38 @@ export default (ele: SpuExpandexp) => {
281
369
  background: #66b1ff;
282
370
  border-color: #66b1ff;
283
371
  }
372
+
373
+ .btn1 {
374
+ height: 30px;
375
+ line-height: 30px;
376
+ border: 1px solid #409eff;
377
+ background-color: #409eff;
378
+ border-radius: 5px;
379
+ color: #fff;
380
+ padding: 0 12px;
381
+ font-size: 14px;
382
+ cursor: pointer;
383
+ }
384
+ .btn1:hover {
385
+ background: #66b1ff;
386
+ border-color: #66b1ff;
387
+ }
388
+
389
+ .btn2 {
390
+ height: 30px;
391
+ line-height: 30px;
392
+ border: 1px solid #aaa;
393
+ background-color: #eee;
394
+ border-radius: 5px;
395
+ color: #444;
396
+ padding: 0 12px;
397
+ font-size: 14px;
398
+ cursor: pointer;
399
+ }
400
+ .btn2:hover {
401
+ border-color: #bbb;
402
+ color: #777;
403
+ }
284
404
  </style>
285
405
 
286
406
  <div class="spu-expandexp">
@@ -301,7 +421,7 @@ export default (ele: SpuExpandexp) => {
301
421
 
302
422
  <div class="export-sel hide">
303
423
  <div class="export-sel-title">请选择导出内容</div>
304
- <div class="export-sel-con"></div>
424
+ <div class="export-sel-con hide"></div>
305
425
  </div>
306
426
 
307
427
  <div class="export-section-wrap hide">
@@ -333,12 +453,39 @@ export default (ele: SpuExpandexp) => {
333
453
  </div>
334
454
 
335
455
  <div class="export-btnwrap">
336
- <div class="btn">导出</div>
456
+ <div class="export-btn btn">导出</div>
337
457
  </div>
338
458
 
339
459
  </div>
340
460
  </div>
341
461
  </div>
342
462
  </div>
463
+
464
+ <div class="spu-expandexp-confirm hide">
465
+ <div class="spu-expandexp-confirm-modal">
466
+ <div class="spu-expandexp-confirm-modal-th">
467
+ <div class="spu-expandexp-confirm-modal-th-title">
468
+ 数据导出
469
+ </div>
470
+ <div class="spu-expandexp-confirm-modal-th-close">
471
+ x
472
+ </div>
473
+ </div>
474
+ <div class="spu-expandexp-confirm-modal-tb">
475
+
476
+ <div class="spu-expandexp-confirm-modal-tb-tip">
477
+ 确认是否取消该任务?
478
+ </div>
479
+
480
+ <div class="spu-expandexp-confirm-modal-btnwrap">
481
+ <div class="spu-expandexp-confirm-modal-confirm btn1">确定</div>
482
+ <div class="spu-expandexp-confirm-modal-cancel btn2" style="margin-right: 12px;">关闭</div>
483
+ </div>
484
+
485
+ </div>
486
+ </div>
487
+ </div>
488
+
489
+ <div class="spu-expandexp-message hide opacity0"></div>
343
490
  `
344
491
  }
@@ -0,0 +1,143 @@
1
+ const styletext = `
2
+ :host {
3
+ width: 100%;
4
+ height: 100%;
5
+ position: fixed;
6
+ top: 0;
7
+ left: 0;
8
+ z-index: 10000;
9
+ background-color: rgba(255, 255, 255, 0.2);
10
+ }
11
+ :host .spu-web-message {
12
+ width: 100%;
13
+ height: 100%;
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ }
18
+ `
19
+
20
+ const template = `
21
+ <div class="spu-web-message">
22
+ <div class="spu-web-message-icon"></div>
23
+ </div>
24
+ `
25
+
26
+ export default class SpuWebMessage extends HTMLElement {
27
+
28
+ static componentName: string = 'spu-web-message'
29
+ static register () {
30
+ if (!window.customElements.get(SpuWebMessage.componentName)) {
31
+ window.customElements.define(SpuWebMessage.componentName, SpuWebMessage)
32
+ }
33
+ }
34
+
35
+ isuseshadow = true
36
+ // isuseshadow = false
37
+ shadow: ShadowRoot | null = null
38
+ constructor () {
39
+ super()
40
+ }
41
+
42
+ // 当自定义元素第一次被连接到文档DOM时被调用。
43
+ connectedCallback () {
44
+ // console.log('connectedCallback')
45
+ const templateElem = document.createElement('template')
46
+ templateElem.innerHTML = template
47
+ const content = templateElem.content.cloneNode(true)
48
+
49
+ if (this.isuseshadow) {
50
+ this.shadow = this.attachShadow({ mode: 'open' })
51
+ this.shadow.append(content)
52
+ this.appendStyle()
53
+
54
+
55
+ // this.shadow.querySelector('.spu-web-message').addEventListener('click', () => {
56
+ // console.log(this)
57
+ // console.log(this.isuseshadow)
58
+ // console.log(this.shadow)
59
+ // })
60
+ // this.addEventListener('click', () => {
61
+ // console.log(this)
62
+ // console.log(this.isuseshadow)
63
+ // console.log(this.shadow)
64
+ // })
65
+
66
+ } else {
67
+ this.append(content)
68
+ this.appendStyle()
69
+
70
+ // this.addEventListener('click', () => {
71
+ // console.log(this)
72
+ // console.log(this.isuseshadow)
73
+ // console.log(this.shadow)
74
+ // })
75
+ }
76
+ }
77
+
78
+ // 当组件从 DOM 文档移除后调用。
79
+ disconnectedCallback () {
80
+ // console.log('disconnectedCallback')
81
+ // setTimeout(() => {
82
+ // console.log(this)
83
+ // }, 100)
84
+ }
85
+
86
+ createStyleEle () {
87
+ var styleElement = document.createElement('style')
88
+ styleElement.type = 'text/css'
89
+ styleElement.id = SpuWebMessage.componentName
90
+ styleElement.innerHTML = styletext
91
+ return styleElement
92
+ }
93
+
94
+ appendStyle () {
95
+ if (this.isuseshadow) {
96
+ const style = this.createStyleEle()
97
+ this.shadow!.appendChild(style)
98
+ } else {
99
+ if (!document.getElementById(SpuWebMessage.componentName)) {
100
+ const style = this.createStyleEle()
101
+ document.getElementsByTagName('head')[0].appendChild(style)
102
+ }
103
+ }
104
+ }
105
+ }
106
+
107
+
108
+
109
+ class Loadding {
110
+ count = 0
111
+
112
+ ele: null | HTMLElement = null
113
+
114
+ constructor () {
115
+ SpuWebMessage.register()
116
+ }
117
+
118
+ open () {
119
+ this.count++
120
+ if (!this.ele) {
121
+ this.ele = document.createElement('spu-web-message')
122
+ // console.log(this.ele)
123
+ document.body.appendChild(this.ele)
124
+ }
125
+ }
126
+
127
+ close () {
128
+ this.count--
129
+ if (this.count <= 0) {
130
+ this.count = 0
131
+ if (this.ele) {
132
+ document.body.removeChild(this.ele)
133
+ this.ele = null
134
+ }
135
+ }
136
+ }
137
+ }
138
+
139
+ const loadding = new Loadding()
140
+
141
+ export {
142
+ loadding
143
+ }
package/src/core.js CHANGED
@@ -70,6 +70,7 @@ class Core {
70
70
  let response
71
71
  try {
72
72
  response = await axios.get(`${hostsRoot}/multiplatconfig/env/${envName}`, {
73
+ isShowLoading: false,
73
74
  isSendToken: false
74
75
  })
75
76
  // console.log(response)
@@ -98,6 +99,8 @@ class Core {
98
99
  res = await axios.post(`${smartcenter}/api/smartcenter/biz/getTenantWebAndApiDefined`, {
99
100
  envid: envId,
100
101
  tenantcode: tenantCode
102
+ }, {
103
+ isShowLoading: false
101
104
  })
102
105
  } catch (err) {
103
106
  console.error(err)