ydb-components-material 0.1.108 → 0.1.110

package/lib/components/sign-file/index.js

@@ -0,0 +1,451 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _loading = _interopRequireDefault(require("@alifd/next/lib/loading"));
+var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireWildcard(require("react"));
+var _preview = _interopRequireDefault(require("./icon/preview.svg"));
+var _download = _interopRequireDefault(require("./icon/download.svg"));
+var _file = _interopRequireDefault(require("./icon/file.svg"));
+var _close = _interopRequireDefault(require("./icon/close.svg"));
+var _sign = _interopRequireDefault(require("../file-list/sign"));
+var _seal = _interopRequireDefault(require("../file-list/seal"));
+var _api = require("../../api");
+var _file2 = require("./file.js");
+require("./index.scss");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// import SignPage from './sign';
+// import SealPage from './seal';
+
+var SignFile = function SignFile(_ref) {
+  var file = _ref.file,
+    userInfo = _ref.userInfo,
+    token = _ref.token,
+    tokenTY = _ref.tokenTY,
+    accessToken = _ref.accessToken,
+    baseUrl = _ref.baseUrl,
+    env = _ref.env,
+    isPC = _ref.isPC,
+    style = _ref.style,
+    download = _ref.download,
+    valChange = _ref.valChange;
+  var fileName = file.fileName,
+    fileUrl = file.fileUrl,
+    fileId = file.fileId,
+    fileType = file.fileType,
+    signatureEnable = file.signatureEnable,
+    signEnable = file.signEnable,
+    guideImg = file.guideImg;
+  var _useState = (0, _react.useState)(false),
+    isShowSignPage = _useState[0],
+    setIsShowSignPage = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    isShowSealPage = _useState2[0],
+    setIsShowSealPage = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    isShowPreview = _useState3[0],
+    setIsShowPreview = _useState3[1];
+  var _useState4 = (0, _react.useState)(''),
+    previewIframeUrl = _useState4[0],
+    setPreviewIframeUrl = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+    guideurl = _useState5[0],
+    setGuideurl = _useState5[1];
+  var _useState6 = (0, _react.useState)(false),
+    isShowGuide = _useState6[0],
+    setIsShowGuide = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
+    thumbnail = _useState7[0],
+    setThumbnail = _useState7[1]; // 缩略图
+  var _useState8 = (0, _react.useState)(false),
+    loading = _useState8[0],
+    setLoading = _useState8[1];
+  var _useState9 = (0, _react.useState)(),
+    sealedFile = _useState9[0],
+    setSealedFile = _useState9[1];
+
+  // 预览材料
+  var preview = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var urlRes, res;
+      return _regenerator["default"].wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (fileId) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            _context.next = 2;
+            return (0, _api.getUrlById)({
+              id: fileId,
+              effectiveTime: 3600000
+            }, {
+              token: token,
+              tokenTY: tokenTY,
+              baseUrl: baseUrl,
+              env: env,
+              isPC: isPC,
+              accessToken: accessToken
+            });
+          case 2:
+            urlRes = _context.sent;
+            if (!(urlRes.presignedUrlList && urlRes.presignedUrlList.length > 0)) {
+              _context.next = 4;
+              break;
+            }
+            _context.next = 3;
+            return (0, _api.onlinePreview)({
+              url: urlRes.presignedUrlList[2]
+            }, {
+              token: token,
+              tokenTY: tokenTY,
+              baseUrl: baseUrl,
+              env: env,
+              isPC: isPC,
+              accessToken: accessToken
+            });
+          case 3:
+            res = _context.sent;
+            setPreviewIframeUrl(res.url);
+            setIsShowPreview(true);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function preview() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var showGuide = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      var guideImgRes;
+      return _regenerator["default"].wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (guideImg) {
+              _context2.next = 1;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 1:
+            _context2.next = 2;
+            return (0, _api.getGuideImg)({
+              id: guideImg,
+              effectiveTime: 3600000
+            }, {
+              token: token,
+              tokenTY: tokenTY,
+              baseUrl: baseUrl,
+              env: env,
+              isPC: isPC,
+              accessToken: accessToken
+            });
+          case 2:
+            guideImgRes = _context2.sent;
+            if (guideImgRes.presignedUrl) {
+              setGuideurl(guideImgRes.presignedUrl);
+              setIsShowGuide(true);
+            }
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function showGuide() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var onDownload = function onDownload() {
+    var format = (0, _file2.getFileExtension)(fileName);
+    download({
+      fileId: fileId,
+      format: format
+    });
+  };
+
+  // 获取缩略图
+  var extractImageUrls = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(previewUrl) {
+      var response, htmlText, parser, doc, imgElements, srcList;
+      return _regenerator["default"].wrap(function (_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.next = 1;
+            return fetch(previewUrl);
+          case 1:
+            response = _context3.sent;
+            _context3.next = 2;
+            return response.text();
+          case 2:
+            htmlText = _context3.sent;
+            parser = new DOMParser();
+            doc = parser.parseFromString(htmlText, 'text/html');
+            imgElements = doc.querySelectorAll('img');
+            srcList = Array.from(imgElements).map(function (img) {
+              return img.getAttribute('data-src');
+            });
+            return _context3.abrupt("return", srcList);
+          case 3:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function extractImageUrls(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  // 获取预览图片
+  var getViewUrl = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4(id) {
+      var type, _urlRes, urlRes, res, list;
+      return _regenerator["default"].wrap(function (_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            type = (0, _file2.getFileExtension)(fileName);
+            if (!['png', 'jpg', 'jpeg'].includes(type)) {
+              _context4.next = 2;
+              break;
+            }
+            _context4.next = 1;
+            return (0, _api.getUrlById)({
+              id: fileId,
+              effectiveTime: 3600000
+            }, {
+              token: token,
+              tokenTY: tokenTY,
+              baseUrl: baseUrl,
+              env: env,
+              isPC: isPC,
+              accessToken: accessToken
+            });
+          case 1:
+            _urlRes = _context4.sent;
+            return _context4.abrupt("return", _urlRes.presignedUrlList[2]);
+          case 2:
+            if (!(type !== 'pdf')) {
+              _context4.next = 3;
+              break;
+            }
+            return _context4.abrupt("return", '');
+          case 3:
+            _context4.next = 4;
+            return (0, _api.getUrlById)({
+              id: id,
+              effectiveTime: 3600000
+            }, {
+              token: token,
+              tokenTY: tokenTY,
+              baseUrl: baseUrl,
+              env: env,
+              isPC: isPC,
+              accessToken: accessToken
+            });
+          case 4:
+            urlRes = _context4.sent;
+            if (!(urlRes.presignedUrlList && urlRes.presignedUrlList.length > 0)) {
+              _context4.next = 7;
+              break;
+            }
+            console.log('urlRes', urlRes);
+            _context4.next = 5;
+            return (0, _api.onlinePreview)({
+              url: urlRes.presignedUrlList[2]
+            }, {
+              token: token,
+              tokenTY: tokenTY,
+              baseUrl: baseUrl,
+              env: env,
+              isPC: isPC,
+              accessToken: accessToken
+            });
+          case 5:
+            res = _context4.sent;
+            _context4.next = 6;
+            return extractImageUrls(res.url);
+          case 6:
+            list = _context4.sent;
+            console.log('list---', list);
+            return _context4.abrupt("return", list[0]);
+          case 7:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    }));
+    return function getViewUrl(_x2) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+
+  // 手写签批
+  var sign = function sign() {
+    setLoading(true);
+    setIsShowSignPage(true);
+  };
+
+  // 签章
+  var seal = function seal() {
+    console.log('fileType', fileType);
+    var type = (0, _file2.getFileExtension)(fileName);
+    if (type !== 'pdf') {
+      _message["default"].notice('只有pdf文件才能使用电子签章');
+      return;
+    }
+    setLoading(true);
+    setIsShowSealPage(true);
+  };
+
+  // 获取签pi结果
+  var getRes = function getRes(val) {
+    console.log('signVal---', val);
+    valChange(val);
+  };
+
+  // 获取签章结果
+  var getSealRes = function getSealRes(val) {
+    console.log('sealval---', val);
+    // 如果还允许签批 就连住一起做了
+    if (signatureEnable) {
+      setSealedFile(val);
+      sign();
+    } else {
+      valChange(val);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (fileId) {
+      getViewUrl(fileId).then(function (url) {
+        setThumbnail(url);
+      });
+    }
+  }, [fileId]);
+  return /*#__PURE__*/_react["default"].createElement(_loading["default"], {
+    tip: '加载中...',
+    fullScreen: true,
+    visible: loading
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sign_file_main",
+    style: style
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sign_file_item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "file"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "file_img"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "filed"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "small_img",
+    style: !thumbnail ? {
+      width: '30px',
+      height: '30px'
+    } : {},
+    src: thumbnail || _file["default"],
+    alt: ""
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "operation"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "btn"
+  }, guideImg && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "img_btn",
+    onClick: showGuide
+  }, "\u7B7E\u7AE0\u5F15\u5BFC")))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "file_item_bottom",
+    style: {
+      justifyContent: 'space-around'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "icon_text",
+    onClick: preview
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: _preview["default"],
+    alt: ""
+  }), "\u9884\u89C8"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "line"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "icon_text",
+    onClick: onDownload
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: _download["default"],
+    alt: ""
+  }), "\u4E0B\u8F7D")), isShowSignPage && /*#__PURE__*/_react["default"].createElement(_sign["default"], {
+    isShowSignPage: isShowSignPage,
+    userInfo: userInfo,
+    file: sealedFile || file,
+    token: token,
+    tokenTY: tokenTY,
+    baseUrl: baseUrl,
+    env: env,
+    isPC: isPC,
+    getRes: getRes,
+    handleClose: function handleClose() {
+      return setIsShowSignPage(false);
+    },
+    closeLoading: function closeLoading() {
+      return setLoading(false);
+    },
+    showClose: false
+  }), isShowSealPage && /*#__PURE__*/_react["default"].createElement(_seal["default"], {
+    showClose: false,
+    isShowSealPage: isShowSealPage,
+    userInfo: userInfo,
+    file: file,
+    token: token,
+    tokenTY: tokenTY,
+    baseUrl: baseUrl,
+    env: env,
+    isPC: isPC,
+    getSealRes: getSealRes,
+    accessToken: accessToken,
+    handleClose: function handleClose() {
+      return setIsShowSealPage(false);
+    },
+    closeLoading: function closeLoading() {
+      return setLoading(false);
+    }
+  }), isShowPreview && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "preview"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "close",
+    src: _close["default"],
+    alt: "",
+    onClick: function onClick() {
+      return setIsShowPreview(false);
+    }
+  }), /*#__PURE__*/_react["default"].createElement("iframe", {
+    src: previewIframeUrl + '#toolbar=0&navpanes=0&scrollbar=0&messages=0&statusbar=0',
+    frameBorder: "0",
+    height: "600px",
+    width: "100%"
+  })), isShowGuide && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "preview"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "close",
+    src: _close["default"],
+    alt: "",
+    onClick: function onClick() {
+      return setIsShowGuide(false);
+    }
+  }), /*#__PURE__*/_react["default"].createElement("img", {
+    src: guideurl,
+    style: {
+      width: '100%'
+    }
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sign_btn",
+    onClick: seal
+  }, "\u7B7E\u7F72\u6587\u4EF6")));
+};
+SignFile.displayName = 'SignFile';
+var _default = exports["default"] = SignFile;