ydb-components-material 0.1.21 → 0.1.23

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

@@ -2,7 +2,7 @@ import _Icon from "@alifd/next/es/icon";
 import _extends from "@babel/runtime/helpers/extends";
 import _Message from "@alifd/next/es/message";
 import _Radio from "@alifd/next/es/radio";
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import CheckedIcon from "./icon/checked.svg";
 import delIcon from "./icon/del.svg";
 import previewIcon from "./icon/preview.svg";
@@ -11,21 +11,25 @@ import fileIcon from "./icon/file.svg";
 import warningIcon from "./icon/icon_warning.svg";
 import errorMsgIcon from "./icon/icon_errorMsg.svg";
 import uploadIcon from "./icon/upload.svg";
+import closeIcon from "./icon/close.svg";
 import SignPage from "./sign";
 import SealPage from "./seal";
+import { getMaterialLib } from "../../api";
+import { initFormat, getFileExtension } from "./file.js";
 import "./index.scss";
 var RadioGroup = _Radio.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,
@@ -33,29 +37,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 = useState(false),
     isShowView = _useState[0],
     setIsShowView = _useState[1];
-  var _useState2 = useState(false),
-    isShowCheckedMask = _useState2[0],
-    setIsShowCheckedMask = _useState2[1];
-  var _useState3 = useState(''),
-    viewImg = _useState3[0],
-    setViewImg = _useState3[1];
-  var _useState4 = useState(false),
-    isShowMaterialLib = _useState4[0],
-    setIsShowMaterialLib = _useState4[1];
-  var _useState5 = useState(),
-    material = _useState5[0],
-    setMaterial = _useState5[1];
+  var _useState2 = useState(''),
+    viewImg = _useState2[0],
+    setViewImg = _useState2[1];
+  var _useState3 = useState(false),
+    isShowMaterialLib = _useState3[0],
+    setIsShowMaterialLib = _useState3[1];
+  var _useState4 = useState(),
+    materialId = _useState4[0],
+    setMaterial = _useState4[1]; // 在材料库中的材料
+  var _useState5 = useState(false),
+    isShowSignPage = _useState5[0],
+    setIsShowSignPage = _useState5[1];
   var _useState6 = useState(false),
-    isShowSignPage = _useState6[0],
-    setIsShowSignPage = _useState6[1];
+    isShowSealPage = _useState6[0],
+    setIsShowSealPage = _useState6[1];
   var _useState7 = useState(false),
-    isShowSealPage = _useState7[0],
-    setIsShowSealPage = _useState7[1];
+    isShowPreview = _useState7[0],
+    setIsShowPreview = _useState7[1];
+  var _useState8 = useState(''),
+    previewIframeUrl = _useState8[0],
+    setPreviewIframeUrl = _useState8[1];
+  var _useState9 = useState({}),
+    materialUrlMap = _useState9[0],
+    setMaterialUrlMap = _useState9[1];
+  var _useState0 = useState(''),
+    materialPreviewUrl = _useState0[0],
+    setMaterialPreviewUrl = _useState0[1];
+  var _useState1 = useState(false),
+    isShowMaterialPreview = _useState1[0],
+    setIsShowMaterialPreview = _useState1[1];
+  var _useState10 = 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 = useState(''),
+    guideurl = _useState11[0],
+    setGuideurl = _useState11[1];
+  var _useState12 = useState(false),
+    isShowGuide = _useState12[0],
+    setIsShowGuide = _useState12[1];
   var list = materialList || [{
     name: '图片1',
     value: 1
@@ -89,10 +145,17 @@ var FileItem = function FileItem(_ref) {
         _Message.notice("\u6587\u4EF6 \"" + fileData.name + "\" \u8D85\u8FC7" + maxFileSize + "MB\u9650\u5236");
         return;
       }
+      if (spec) {
+        var type = getFileExtension(fileData.name);
+        if (!initFormat(spec).includes(type)) {
+          _Message.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) {
@@ -100,6 +163,7 @@ var FileItem = function FileItem(_ref) {
       }).then(function (res) {
         document.body.removeChild(inputEl);
         if (res.fileId) {
+          console.log('--------res', res);
           valChange(_extends({}, res, {
             name: fileData.name,
             type: fileData.type
@@ -113,17 +177,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(_extends({}, materialUrlMap, (_extends2 = {}, _extends2[id] = res.url, _extends2)));
+    });
+  };
+
+  // 手写签批
+  var sign = function sign() {
+    // handleSign()
+    setIsShowSignPage(true);
+  };
+
+  // 签章
+  var seal = function seal() {
+    console.log('fileType', fileType);
+    var type = getFileExtension(fileName);
+    if (type !== 'pdf') {
+      _Message.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
+    };
+    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 = initFormat(spec); // 限制的文件类型
+      console.log(formatFinal, '限制的格式最后');
+      if (!formatFinal.includes(fileFormat)) {
+        _Message.notice("\u8BE5\u6750\u6599\u4E0D\u652F\u6301\u4E0A\u4F20\u3010" + fileFormat + "\u3011\u683C\u5F0F\u7684\u6587\u4EF6");
+        return;
+      }
+    }
+    if (selectedMaterial.type === 1) {
+      _Message.notice('该文件为旧文件, 请先下载后手动上传');
+      return;
+    }
+    var m = _extends({}, selectedMaterial, {
+      fileUrl: selectedMaterial.innerFileUrl
+    });
+    console.log('m', m);
+    valChange(m);
+    setIsShowMaterialLib(false);
+  };
+  useEffect(function () {
+    if (userInfo) {
+      console.log('userInfo', userInfo);
+      queryFileLibs();
+    }
+  }, [userInfo]);
   return /*#__PURE__*/React.createElement("div", {
     className: "file_item"
   }, /*#__PURE__*/React.createElement("div", {
     className: "file"
   }, /*#__PURE__*/React.createElement("div", {
     className: "file_img"
-  }, file ? /*#__PURE__*/React.createElement("div", {
+  }, fileUrl ? /*#__PURE__*/React.createElement("div", {
     className: "filed"
   }, /*#__PURE__*/React.createElement("img", {
     className: "small_img",
@@ -132,7 +334,10 @@ var FileItem = function FileItem(_ref) {
   }), "\u6587\u4EF6", /*#__PURE__*/React.createElement("img", {
     className: "del",
     src: delIcon,
-    alt: ""
+    alt: "",
+    onClick: function onClick() {
+      return del();
+    }
   }), isInValid && /*#__PURE__*/React.createElement("img", {
     className: "error_msg",
     src: errorMsgIcon,
@@ -146,38 +351,38 @@ var FileItem = function FileItem(_ref) {
     className: "upload",
     src: uploadIcon,
     alt: ""
-  }), "\u4E0A\u4F20\u6750\u6599"), isShowCheckedMask && /*#__PURE__*/React.createElement("div", {
+  }), "\u4E0A\u4F20\u6750\u6599"), (isSigned || isSealed) && /*#__PURE__*/React.createElement("div", {
     className: "mask"
   }, /*#__PURE__*/React.createElement("div", {
     className: "center"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, isSigned && /*#__PURE__*/React.createElement("div", {
     className: "checked",
     style: {
       marginBottom: '9px'
     }
   }, /*#__PURE__*/React.createElement("img", {
     src: CheckedIcon,
-    alt: "\u9009\u4E2D"
-  }), "\u5DF2\u7B7E\u7AE0"), /*#__PURE__*/React.createElement("div", {
+    alt: ""
+  }), "\u5DF2\u7B7E\u6279"), isSealed && /*#__PURE__*/React.createElement("div", {
     className: "checked"
   }, /*#__PURE__*/React.createElement("img", {
     src: CheckedIcon,
-    alt: "\u9009\u4E2D"
-  }), "\u5DF2\u7B7E\u6279")))), /*#__PURE__*/React.createElement("div", {
+    alt: ""
+  }), "\u5DF2\u7B7E\u7AE0")))), /*#__PURE__*/React.createElement("div", {
     className: "operation"
   }, /*#__PURE__*/React.createElement("div", {
     className: "btn"
   }, guideImg && /*#__PURE__*/React.createElement("div", {
     className: "img_btn",
     onClick: function onClick() {
-      return showViewImg(guideImg);
+      return showGuide(guideImg);
     }
   }, "\u7B7E\u7AE0\u5F15\u5BFC"), checkImg && /*#__PURE__*/React.createElement("div", {
     className: "img_btn",
     onClick: function onClick() {
       return showViewImg(checkImg);
     }
-  }, "\u5BA1\u67E5\u8981\u70B9")), file ?
+  }, "\u5BA1\u67E5\u8981\u70B9")), fileUrl ?
   /*#__PURE__*/
   // 有文件且配置了这俩功能才展示
   React.createElement("div", {
@@ -185,19 +390,15 @@ var FileItem = function FileItem(_ref) {
     style: {
       marginTop: '20px'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, signatureEnable && /*#__PURE__*/React.createElement("div", {
     className: "operation_btn",
-    onClick: function onClick() {
-      return setIsShowSignPage(true);
-    }
-  }, "\u624B\u5199\u5BA1\u6279"), /*#__PURE__*/React.createElement("div", {
+    onClick: sign
+  }, isSigned ? '重新签批' : '手写审批'), userInfo.acctType === '20' && signEnable && /*#__PURE__*/React.createElement("div", {
     className: "operation_btn",
-    onClick: function onClick() {
-      return setIsShowSealPage(true);
-    }
-  }, "\u7535\u5B50\u7B7E\u7AE0")) :
+    onClick: seal
+  }, isSealed ? '重新签章' : '电子签章')) :
   // 展示材料库
-  isShowLib && /*#__PURE__*/React.createElement("div", {
+  isShowLib && !!materialLib.length && /*#__PURE__*/React.createElement("div", {
     className: "operation_btn",
     style: {
       marginTop: '20px'
@@ -208,14 +409,16 @@ var FileItem = function FileItem(_ref) {
   }, "\u6750\u6599\u5E93"))), /*#__PURE__*/React.createElement("div", {
     className: "file_item_bottom"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "icon_text"
+    className: "icon_text",
+    onClick: preview
   }, /*#__PURE__*/React.createElement("img", {
     src: previewIcon,
     alt: ""
   }), "\u9884\u89C8"), /*#__PURE__*/React.createElement("div", {
     className: "line"
   }), /*#__PURE__*/React.createElement("div", {
-    className: "icon_text"
+    className: "icon_text",
+    onClick: download
   }, /*#__PURE__*/React.createElement("img", {
     src: downloadIcon,
     alt: ""
@@ -244,19 +447,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.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.createElement("div", {
       className: "item",
-      key: item.value
+      key: item.fileId
     }, /*#__PURE__*/React.createElement(_Radio, {
-      id: item.value,
-      value: item.value
-    }, item.name), /*#__PURE__*/React.createElement("div", {
-      className: "preview_icon"
+      id: item.fileId,
+      value: item.fileId
+    }, item.fileName), /*#__PURE__*/React.createElement("div", {
+      className: "preview_icon",
+      onClick: function onClick() {
+        return previewMaterial(item.fileId, item.innerFileUrl);
+      }
     }, /*#__PURE__*/React.createElement("img", {
       src: previewIcon,
       alt: ""
@@ -269,30 +475,81 @@ var FileItem = function FileItem(_ref) {
       return setIsShowMaterialLib(false);
     }
   }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement("div", {
-    className: "btn ok"
+    className: "btn ok",
+    onClick: selectMaterialOk
   }, "\u786E\u5B9A")))), isShowSignPage && /*#__PURE__*/React.createElement(SignPage, {
     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.createElement(SealPage, {
     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.createElement("div", {
+    className: "preview"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "close",
+    src: closeIcon,
+    alt: "",
+    onClick: function onClick() {
+      return setIsShowPreview(false);
+    }
+  }), /*#__PURE__*/React.createElement("iframe", {
+    src: previewIframeUrl,
+    frameborder: "0",
+    height: "500px",
+    width: "100%"
+  })), isShowMaterialPreview && /*#__PURE__*/React.createElement("div", {
+    className: "preview"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "close",
+    src: closeIcon,
+    alt: "",
+    onClick: function onClick() {
+      return setIsShowMaterialPreview(false);
+    }
+  }), /*#__PURE__*/React.createElement("iframe", {
+    src: materialPreviewUrl,
+    frameborder: "0",
+    height: "90%",
+    width: "100%"
+  })), isShowGuide && /*#__PURE__*/React.createElement("div", {
+    className: "preview"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "close",
+    src: closeIcon,
+    alt: "",
+    onClick: function onClick() {
+      return setIsShowGuide(false);
+    }
+  }), /*#__PURE__*/React.createElement("iframe", {
+    src: guideurl,
+    frameborder: "0",
+    height: "90%",
+    width: "100%"
+  })));
 };
 FileItem.displayName = 'FileItem';
 export default FileItem;

package/es/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);
+  }
+
 }