ydb-components-material 0.1.21 → 0.1.22

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

@@ -16,20 +16,21 @@ var _file = _interopRequireDefault(require("./icon/file.svg"));
 var _icon_warning = _interopRequireDefault(require("./icon/icon_warning.svg"));
 var _icon_errorMsg = _interopRequireDefault(require("./icon/icon_errorMsg.svg"));
 var _upload = _interopRequireDefault(require("./icon/upload.svg"));
+var _close = _interopRequireDefault(require("./icon/close.svg"));
 var _sign = _interopRequireDefault(require("./sign"));
 var _seal = _interopRequireDefault(require("./seal"));
 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); }
 var RadioGroup = _radio["default"].Group;
-var BASE_URL = 'http://172.16.132.12:5005';
 var FileItem = function FileItem(_ref) {
-  var file = _ref.file,
+  var fileUrl = _ref.fileUrl,
     guideImg = _ref.guideImg,
     checkImg = _ref.checkImg,
-    approvalUrl = _ref.approvalUrl,
-    signatureUrl = _ref.signatureUrl,
-    isApproval = _ref.isApproval,
-    isSignature = _ref.isSignature,
+    fileId = _ref.fileId,
+    signatureEnable = _ref.signatureEnable,
+    signEnable = _ref.signEnable,
+    isSigned = _ref.isSigned,
+    isSealed = _ref.isSealed,
     materialList = _ref.materialList,
     maxFileSize = _ref.maxFileSize,
     isInValid = _ref.isInValid,
@@ -39,29 +40,34 @@ var FileItem = function FileItem(_ref) {
     fileType = _ref.fileType,
     token = _ref.token,
     accessToken = _ref.accessToken,
+    baseUrl = _ref.baseUrl,
     valChange = _ref.valChange,
+    download = _ref.download,
     del = _ref.del;
   var _useState = (0, _react.useState)(false),
     isShowView = _useState[0],
     setIsShowView = _useState[1];
-  var _useState2 = (0, _react.useState)(false),
-    isShowCheckedMask = _useState2[0],
-    setIsShowCheckedMask = _useState2[1];
-  var _useState3 = (0, _react.useState)(''),
-    viewImg = _useState3[0],
-    setViewImg = _useState3[1];
-  var _useState4 = (0, _react.useState)(false),
-    isShowMaterialLib = _useState4[0],
-    setIsShowMaterialLib = _useState4[1];
-  var _useState5 = (0, _react.useState)(),
-    material = _useState5[0],
-    setMaterial = _useState5[1];
+  var _useState2 = (0, _react.useState)(''),
+    viewImg = _useState2[0],
+    setViewImg = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    isShowMaterialLib = _useState3[0],
+    setIsShowMaterialLib = _useState3[1];
+  var _useState4 = (0, _react.useState)(),
+    material = _useState4[0],
+    setMaterial = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    isShowSignPage = _useState5[0],
+    setIsShowSignPage = _useState5[1];
   var _useState6 = (0, _react.useState)(false),
-    isShowSignPage = _useState6[0],
-    setIsShowSignPage = _useState6[1];
+    isShowSealPage = _useState6[0],
+    setIsShowSealPage = _useState6[1];
   var _useState7 = (0, _react.useState)(false),
-    isShowSealPage = _useState7[0],
-    setIsShowSealPage = _useState7[1];
+    isShowPreview = _useState7[0],
+    setIsShowPreview = _useState7[1];
+  var _useState8 = (0, _react.useState)(''),
+    previewIframeUrl = _useState8[0],
+    setPreviewIframeUrl = _useState8[1];
   var list = materialList || [{
     name: '图片1',
     value: 1
@@ -98,7 +104,7 @@ var FileItem = function FileItem(_ref) {
       var formData = new FormData();
       formData.append('file', fileData);
       formData.append('open', true);
-      fetch(BASE_URL + '/declaration/material/file/files/api', {
+      fetch(baseUrl + "/declaration/material/file/files/api", {
         method: 'POST',
         body: formData
       }).then(function (response) {
@@ -106,6 +112,7 @@ var FileItem = function FileItem(_ref) {
       }).then(function (res) {
         document.body.removeChild(inputEl);
         if (res.fileId) {
+          console.log('--------res', res);
           valChange((0, _extends2["default"])({}, res, {
             name: fileData.name,
             type: fileData.type
@@ -119,17 +126,45 @@ var FileItem = function FileItem(_ref) {
       });
     });
   };
+  var preview = function preview() {
+    if (!fileUrl) return;
+    fetch(baseUrl + "/declaration/material/onlinePreview?url=" + fileUrl, {
+      method: 'GET'
+    }).then(function (response) {
+      return response.json();
+    }).then(function (res) {
+      setPreviewIframeUrl(res.url);
+      setIsShowPreview(true);
+    });
+  };
+  var sign = function sign() {
+    // handleSign()
+    setIsShowSignPage(true);
+  };
+  var seal = function seal() {
+    console.log('fileType', fileType);
+    if (fileType !== 'application/pdf') {
+      _message["default"].notice('只有pdf文件才能使用电子签章');
+      return;
+    }
+    // handleSeal()
+    setIsShowSealPage(true);
+  };
   var getRes = function getRes(val) {
     console.log('val---', val);
     valChange(val);
   };
+  var getSealRes = function getSealRes(val) {
+    console.log('sealval---', val);
+    valChange(val);
+  };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "file_item"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "file"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "file_img"
-  }, file ? /*#__PURE__*/_react["default"].createElement("div", {
+  }, fileUrl ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "filed"
   }, /*#__PURE__*/_react["default"].createElement("img", {
     className: "small_img",
@@ -152,24 +187,24 @@ var FileItem = function FileItem(_ref) {
     className: "upload",
     src: _upload["default"],
     alt: ""
-  }), "\u4E0A\u4F20\u6750\u6599"), isShowCheckedMask && /*#__PURE__*/_react["default"].createElement("div", {
+  }), "\u4E0A\u4F20\u6750\u6599"), (isSigned || isSealed) && /*#__PURE__*/_react["default"].createElement("div", {
     className: "mask"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "center"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, isSigned && /*#__PURE__*/_react["default"].createElement("div", {
     className: "checked",
     style: {
       marginBottom: '9px'
     }
   }, /*#__PURE__*/_react["default"].createElement("img", {
     src: _checked["default"],
-    alt: "\u9009\u4E2D"
-  }), "\u5DF2\u7B7E\u7AE0"), /*#__PURE__*/_react["default"].createElement("div", {
+    alt: ""
+  }), "\u5DF2\u7B7E\u6279"), isSealed && /*#__PURE__*/_react["default"].createElement("div", {
     className: "checked"
   }, /*#__PURE__*/_react["default"].createElement("img", {
     src: _checked["default"],
-    alt: "\u9009\u4E2D"
-  }), "\u5DF2\u7B7E\u6279")))), /*#__PURE__*/_react["default"].createElement("div", {
+    alt: ""
+  }), "\u5DF2\u7B7E\u7AE0")))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "operation"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "btn"
@@ -183,7 +218,7 @@ var FileItem = function FileItem(_ref) {
     onClick: function onClick() {
       return showViewImg(checkImg);
     }
-  }, "\u5BA1\u67E5\u8981\u70B9")), file ?
+  }, "\u5BA1\u67E5\u8981\u70B9")), fileUrl ?
   /*#__PURE__*/
   // 有文件且配置了这俩功能才展示
   _react["default"].createElement("div", {
@@ -191,17 +226,13 @@ var FileItem = function FileItem(_ref) {
     style: {
       marginTop: '20px'
     }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, signatureEnable && /*#__PURE__*/_react["default"].createElement("div", {
     className: "operation_btn",
-    onClick: function onClick() {
-      return setIsShowSignPage(true);
-    }
-  }, "\u624B\u5199\u5BA1\u6279"), /*#__PURE__*/_react["default"].createElement("div", {
+    onClick: sign
+  }, isSigned ? '重新签批' : '手写审批'), userInfo.acctType === '20' && signEnable && /*#__PURE__*/_react["default"].createElement("div", {
     className: "operation_btn",
-    onClick: function onClick() {
-      return setIsShowSealPage(true);
-    }
-  }, "\u7535\u5B50\u7B7E\u7AE0")) :
+    onClick: seal
+  }, isSealed ? '重新签章' : '电子签章')) :
   // 展示材料库
   isShowLib && /*#__PURE__*/_react["default"].createElement("div", {
     className: "operation_btn",
@@ -214,14 +245,16 @@ var FileItem = function FileItem(_ref) {
   }, "\u6750\u6599\u5E93"))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "file_item_bottom"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "icon_text"
+    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"
+    className: "icon_text",
+    onClick: download
   }, /*#__PURE__*/_react["default"].createElement("img", {
     src: _download["default"],
     alt: ""
@@ -281,24 +314,46 @@ var FileItem = function FileItem(_ref) {
     userInfo: userInfo,
     file: {
       name: fileName,
-      url: file,
+      url: fileUrl,
       type: fileType
     },
     token: token,
-    getRes: getRes
+    baseUrl: baseUrl,
+    getRes: getRes,
+    handleClose: function handleClose() {
+      return setIsShowSignPage(false);
+    }
   }), isShowSealPage && /*#__PURE__*/_react["default"].createElement(_seal["default"], {
     isShowSealPage: isShowSealPage,
     userInfo: userInfo,
     file: {
       name: fileName,
-      url: file,
-      type: fileType
+      url: fileUrl,
+      type: fileType,
+      fileId: fileId
     },
-    token: token
-    // getRes={getRes}
-    ,
-    accessToken: accessToken
-  }));
+    token: token,
+    baseUrl: baseUrl,
+    getSealRes: getSealRes,
+    accessToken: accessToken,
+    handleClose: function handleClose() {
+      return setIsShowSealPage(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,
+    frameborder: "0",
+    height: "500px",
+    width: "100%"
+  })));
 };
 FileItem.displayName = 'FileItem';
 var _default = exports["default"] = FileItem;

package/lib/components/file-item/index.scss

@@ -58,7 +58,7 @@
         height: 16px;
         top: -6px;
         right: -6px;
-        z-index: 9;
+        z-index: 3;
       }
 
       .error_msg {
@@ -81,7 +81,7 @@
         justify-content: center;
         align-items: center;
         color: #fff;
-        z-index: 8;
+        z-index: 3;
 
         .checked {
           display: flex;
@@ -296,4 +296,41 @@
       }
     }
   }
+
+  .preview {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .close {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+    }
+  }
+
+  .sealPage {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  .sign_page {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+    background: rgba(0, 0, 0, 0.5);
+  }
 }

package/lib/components/file-item/seal.js

@@ -4,17 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireWildcard(require("react"));
 var _sealUtil = require("./sealUtil");
+var _api = require("../../api");
+var _file = require("./file.js");
 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); }
 function SealPage(props) {
-  var isShowSealPage = props.isShowSealPage,
-    userInfo = props.userInfo,
+  var userInfo = props.userInfo,
     file = props.file,
     token = props.token,
     accessToken = props.accessToken,
-    getRes = props.getRes;
+    getSealRes = props.getSealRes,
+    baseUrl = props.baseUrl,
+    handleClose = props.handleClose;
   var _useState = (0, _react.useState)(''),
     srcUrl = _useState[0],
     setSrcUrl = _useState[1];
@@ -26,10 +30,11 @@ function SealPage(props) {
           case 0:
             console.log('file', file, userInfo);
             _context.next = 1;
-            return (0, _sealUtil.initSealPageMethod)(file, userInfo, token, accessToken);
+            return (0, _sealUtil.initSealPageMethod)(file, userInfo, token, accessToken, baseUrl);
           case 1:
             res = _context.sent;
             pageUrl = res.pageUrl;
+            console.log('pageUrl', pageUrl);
             setSrcUrl(pageUrl);
             // console.log(res)
           case 2:
@@ -42,18 +47,71 @@ function SealPage(props) {
       return _ref.apply(this, arguments);
     };
   }();
-  (0, _react.useEffect)(function () {
-    if (isShowSealPage) {
-      handleRes();
+
+  // 将返回的文件重新上传
+  var uploadNewFile = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(fileData) {
+      var uploadedFileObj, finalFile;
+      return _regenerator["default"].wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 1;
+            return (0, _file.uploadFilePromise)('data:application/pdf;base64,' + fileData, baseUrl, token);
+          case 1:
+            uploadedFileObj = _context2.sent;
+            console.log('重新上传的文件', uploadedFileObj);
+            handleClose();
+            finalFile = (0, _extends2["default"])({
+              name: file.name,
+              url: uploadedFileObj.fileUrlList[0],
+              status: 'success',
+              message: '上传成功'
+            }, uploadedFileObj);
+            getSealRes(finalFile);
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function uploadNewFile(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  // 下载文件
+  var signFileDown = function signFileDown(filePath) {
+    (0, _api.signFileDownApi)({
+      fileUrl: filePath
+    }).then(function (res) {
+      uploadNewFile(res);
+    });
+  };
+  // 监听子页面数据
+  var getMessage = function getMessage(e) {
+    console.log('子页面数据', e);
+    if (e.data.type === 'signal' && e.data.data && e.data.data.length) {
+      console.log(e.data.data[0]); // 文件路径
+      var filePath = e.data.data[0];
+      signFileDown(filePath);
     }
-  }, [isShowSealPage, userInfo, file, token, accessToken]);
+  };
+  (0, _react.useEffect)(function () {
+    window.addEventListener('message', getMessage);
+    return function () {
+      window.removeEventListener('message', getMessage);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    handleRes();
+  }, [userInfo, file, token, accessToken, baseUrl]);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "seal_page"
+    className: "sealPage"
   }, /*#__PURE__*/_react["default"].createElement("iframe", {
     src: srcUrl,
     id: "iframe",
     frameborder: "0",
-    height: "500px",
+    height: "100%",
     width: "100%"
   }));
 }