ydb-components-material 0.1.21 → 0.1.23

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
 var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
 var _react = _interopRequireWildcard(require("react"));
@@ -16,22 +16,26 @@ 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"));
+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); }
 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,
+    spec = _ref.spec,
     isInValid = _ref.isInValid,
     isShowLib = _ref.isShowLib,
     userInfo = _ref.userInfo,
@@ -39,29 +43,81 @@ 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)(),
+    materialId = _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 _useState9 = (0, _react.useState)({}),
+    materialUrlMap = _useState9[0],
+    setMaterialUrlMap = _useState9[1];
+  var _useState0 = (0, _react.useState)(''),
+    materialPreviewUrl = _useState0[0],
+    setMaterialPreviewUrl = _useState0[1];
+  var _useState1 = (0, _react.useState)(false),
+    isShowMaterialPreview = _useState1[0],
+    setIsShowMaterialPreview = _useState1[1];
+  var _useState10 = (0, _react.useState)([{
+      "fileId": "1753419199903092737",
+      "fileName": "javaScript.jpg",
+      "uploadTime": "2024-02-03 17:09:34",
+      "type": 0,
+      "innerFileUrl": "https://zwfwpt.sxzwfw.gov.cn/FS//18a78d3d407-true/master/18b4752f107/2024/2/1753419199903092737/javaScript.jpg",
+      "internetFileUrl": "https://zwfwpt.sxzwfw.gov.cn/FS//18a78d3d407-true/master/18b4752f107/2024/2/1753419199903092737/javaScript.jpg"
+    }, {
+      "fileId": "1753419376331853826",
+      "fileName": "LQ_z-fynmzrs7874917.jpg",
+      "uploadTime": "2024-02-03 17:09:34",
+      "type": 0,
+      "innerFileUrl": "https://zwfwpt.sxzwfw.gov.cn/FS//18a78d3d407-true/master/18b4752f107/2024/2/1753419376331853826/LQ_z-fynmzrs7874917.jpg",
+      "internetFileUrl": "https://zwfwpt.sxzwfw.gov.cn/FS//18a78d3d407-true/master/18b4752f107/2024/2/1753419376331853826/LQ_z-fynmzrs7874917.jpg"
+    }, {
+      "fileId": "1753419180202446850",
+      "fileName": "mayun.jpg",
+      "uploadTime": "2024-02-03 17:09:34",
+      "type": 0,
+      "innerFileUrl": "https://zwfwpt.sxzwfw.gov.cn/FS//18a78d3d407-true/master/18b4752f107/2024/2/1753419180202446850/mayun.jpg",
+      "internetFileUrl": "https://zwfwpt.sxzwfw.gov.cn/FS//18a78d3d407-true/master/18b4752f107/2024/2/1753419180202446850/mayun.jpg"
+    }, {
+      "fileId": "1753419356975140866",
+      "fileName": "find.png",
+      "uploadTime": "2024-02-03 17:09:33",
+      "type": 0,
+      "innerFileUrl": "https://zwfwpt.sxzwfw.gov.cn/FS//18a78d3d407-true/master/18b4752f107/2024/2/1753419356975140866/find.png",
+      "internetFileUrl": "https://zwfwpt.sxzwfw.gov.cn/FS//18a78d3d407-true/master/18b4752f107/2024/2/1753419356975140866/find.png"
+    }]),
+    materialLib = _useState10[0],
+    setMaterialLib = _useState10[1];
+  // const [materialLib, setMaterialLib] = useState([]);
+  var _useState11 = (0, _react.useState)(''),
+    guideurl = _useState11[0],
+    setGuideurl = _useState11[1];
+  var _useState12 = (0, _react.useState)(false),
+    isShowGuide = _useState12[0],
+    setIsShowGuide = _useState12[1];
   var list = materialList || [{
     name: '图片1',
     value: 1
@@ -95,10 +151,17 @@ var FileItem = function FileItem(_ref) {
         _message["default"].notice("\u6587\u4EF6 \"" + fileData.name + "\" \u8D85\u8FC7" + maxFileSize + "MB\u9650\u5236");
         return;
       }
+      if (spec) {
+        var type = (0, _file2.getFileExtension)(fileData.name);
+        if (!(0, _file2.initFormat)(spec).includes(type)) {
+          _message["default"].notice("\u6587\u4EF6 \"" + fileData.name + "\" \u683C\u5F0F\u4E0D\u6B63\u786E");
+          return;
+        }
+      }
       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,7 +169,8 @@ var FileItem = function FileItem(_ref) {
       }).then(function (res) {
         document.body.removeChild(inputEl);
         if (res.fileId) {
-          valChange((0, _extends2["default"])({}, res, {
+          console.log('--------res', res);
+          valChange((0, _extends3["default"])({}, res, {
             name: fileData.name,
             type: fileData.type
           }));
@@ -119,17 +183,155 @@ var FileItem = function FileItem(_ref) {
       });
     });
   };
+
+  // 预览材料
+  var preview = function preview() {
+    if (!fileUrl) return;
+    if (previewIframeUrl) {
+      setIsShowPreview(true);
+      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 previewMaterial = function previewMaterial(id, url) {
+    if (materialUrlMap[id]) {
+      setIsShowMaterialPreview(true);
+      setMaterialPreviewUrl(materialUrlMap[id]);
+      return;
+    }
+    fetch(baseUrl + "/declaration/material/onlinePreview?url=" + url, {
+      method: 'GET'
+    }).then(function (response) {
+      return response.json();
+    }).then(function (res) {
+      var _extends2;
+      setMaterialPreviewUrl(res.url);
+      setIsShowMaterialPreview(true);
+      setMaterialUrlMap((0, _extends3["default"])({}, materialUrlMap, (_extends2 = {}, _extends2[id] = res.url, _extends2)));
+    });
+  };
+
+  // 手写签批
+  var sign = function sign() {
+    // handleSign()
+    setIsShowSignPage(true);
+  };
+
+  // 签章
+  var seal = function seal() {
+    console.log('fileType', fileType);
+    var type = (0, _file2.getFileExtension)(fileName);
+    if (type !== '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);
+  };
+  var queryFileLibs = function queryFileLibs() {
+    console.log('queryFileLibs');
+    var certNo = userInfo.certNo,
+      certificateSno = userInfo.certificateSno,
+      acctType = userInfo.acctType;
+    var params = {
+      // cardno: acctType === '10' ? certNo : certificateSno, // 个人传身份证号、法人传社会统一信用代码
+      cardno: '140110199504131013',
+      // 个人传身份证号、法人传社会统一信用代码
+      type: acctType === '10' ? '11' : '21',
+      pageNum: 1,
+      pageSize: 10
+    };
+    (0, _api.getMaterialLib)(params, {
+      token: token
+    }).then(function (res) {
+      if (res.code === 200) {
+        var records = res.data.records;
+        setMaterialLib(records);
+      }
+      // if (+total === this.fileList.length) {
+      //   this.loadStatus = 'nomore'
+      // } else {
+      //   this.loadStatus = 'loadmore'
+      // }
+    })["catch"](function () {
+      // this.loadStatus = 'nomore'
+    });
+  };
+  var showGuide = function showGuide() {
+    if (!guideImg) return;
+    if (guideurl) {
+      setIsShowGuide(true);
+      return;
+    }
+    fetch(baseUrl + "/declaration/material/file/files/api/presigned-url?id=" + guideImg + "&effectiveTime=3600000", {
+      method: 'GET'
+    }).then(function (response) {
+      return response.json();
+    }).then(function (res) {
+      if (res.presignedUrl) {
+        setGuideurl(res.presignedUrl);
+        setIsShowGuide(true);
+      }
+    });
+  };
+  var selectMaterialOk = function selectMaterialOk() {
+    console.log('val', materialId);
+    var selectedMaterial = materialLib.find(function (item) {
+      return item.fileId === materialId;
+    });
+    console.log('selectedMaterial', selectedMaterial);
+    if (spec) {
+      var arr = selectedMaterial.fileName.split('.'); //
+      var fileFormat = arr[arr.length - 1]; // 获取当前材料库材料的文件类型
+      console.log(fileFormat, '材料库当前选择的文件格式');
+      var formatFinal = (0, _file2.initFormat)(spec); // 限制的文件类型
+      console.log(formatFinal, '限制的格式最后');
+      if (!formatFinal.includes(fileFormat)) {
+        _message["default"].notice("\u8BE5\u6750\u6599\u4E0D\u652F\u6301\u4E0A\u4F20\u3010" + fileFormat + "\u3011\u683C\u5F0F\u7684\u6587\u4EF6");
+        return;
+      }
+    }
+    if (selectedMaterial.type === 1) {
+      _message["default"].notice('该文件为旧文件, 请先下载后手动上传');
+      return;
+    }
+    var m = (0, _extends3["default"])({}, selectedMaterial, {
+      fileUrl: selectedMaterial.innerFileUrl
+    });
+    console.log('m', m);
+    valChange(m);
+    setIsShowMaterialLib(false);
+  };
+  (0, _react.useEffect)(function () {
+    if (userInfo) {
+      console.log('userInfo', userInfo);
+      queryFileLibs();
+    }
+  }, [userInfo]);
   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",
@@ -138,7 +340,10 @@ var FileItem = function FileItem(_ref) {
   }), "\u6587\u4EF6", /*#__PURE__*/_react["default"].createElement("img", {
     className: "del",
     src: _del["default"],
-    alt: ""
+    alt: "",
+    onClick: function onClick() {
+      return del();
+    }
   }), isInValid && /*#__PURE__*/_react["default"].createElement("img", {
     className: "error_msg",
     src: _icon_errorMsg["default"],
@@ -152,38 +357,38 @@ 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"
   }, guideImg && /*#__PURE__*/_react["default"].createElement("div", {
     className: "img_btn",
     onClick: function onClick() {
-      return showViewImg(guideImg);
+      return showGuide(guideImg);
     }
   }, "\u7B7E\u7AE0\u5F15\u5BFC"), checkImg && /*#__PURE__*/_react["default"].createElement("div", {
     className: "img_btn",
     onClick: function onClick() {
       return showViewImg(checkImg);
     }
-  }, "\u5BA1\u67E5\u8981\u70B9")), file ?
+  }, "\u5BA1\u67E5\u8981\u70B9")), fileUrl ?
   /*#__PURE__*/
   // 有文件且配置了这俩功能才展示
   _react["default"].createElement("div", {
@@ -191,19 +396,15 @@ 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", {
+  isShowLib && !!materialLib.length && /*#__PURE__*/_react["default"].createElement("div", {
     className: "operation_btn",
     style: {
       marginTop: '20px'
@@ -214,14 +415,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: ""
@@ -250,19 +453,22 @@ var FileItem = function FileItem(_ref) {
     alt: ""
   }), "\u4E3A\u907F\u514D\u529E\u4EF6\u4E0D\u901A\u8FC7\uFF0C\u9009\u62E9\u6750\u6599\u65F6\uFF0C\u8BF7\u60A8\u6CE8\u610F\u6750\u6599\u6709\u6548\u671F\uFF01"), /*#__PURE__*/_react["default"].createElement(RadioGroup, {
     className: "list",
-    value: material,
+    value: materialId,
     onChange: function onChange(val) {
       return setMaterial(val);
     }
-  }, list.map(function (item) {
+  }, materialLib.map(function (item) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "item",
-      key: item.value
+      key: item.fileId
     }, /*#__PURE__*/_react["default"].createElement(_radio["default"], {
-      id: item.value,
-      value: item.value
-    }, item.name), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "preview_icon"
+      id: item.fileId,
+      value: item.fileId
+    }, item.fileName), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "preview_icon",
+      onClick: function onClick() {
+        return previewMaterial(item.fileId, item.innerFileUrl);
+      }
     }, /*#__PURE__*/_react["default"].createElement("img", {
       src: _preview["default"],
       alt: ""
@@ -275,30 +481,81 @@ var FileItem = function FileItem(_ref) {
       return setIsShowMaterialLib(false);
     }
   }, "\u53D6\u6D88"), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "btn ok"
+    className: "btn ok",
+    onClick: selectMaterialOk
   }, "\u786E\u5B9A")))), isShowSignPage && /*#__PURE__*/_react["default"].createElement(_sign["default"], {
     isShowSignPage: isShowSignPage,
     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%"
+  })), isShowMaterialPreview && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "preview"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "close",
+    src: _close["default"],
+    alt: "",
+    onClick: function onClick() {
+      return setIsShowMaterialPreview(false);
+    }
+  }), /*#__PURE__*/_react["default"].createElement("iframe", {
+    src: materialPreviewUrl,
+    frameborder: "0",
+    height: "90%",
+    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("iframe", {
+    src: guideurl,
+    frameborder: "0",
+    height: "90%",
+    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;
@@ -100,6 +100,7 @@
       .btn {
         display: flex;
         flex-direction: row;
+        justify-content: end;
 
         .img_btn {
           margin-left: 8px;
@@ -195,7 +196,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 999;
+    z-index: 88;
     background-color: rgba(0, 0, 0, 0.5);
 
     .material_lib_content {
@@ -296,4 +297,42 @@
       }
     }
   }
+
+  .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;
+    z-index: 99;
+    .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);
+  }
+
 }