ydb-components-material 0.1.87 → 0.1.89

package/es/components/file-list/item.scss

@@ -0,0 +1,412 @@
+
+.file_item {
+  border-radius: 8px;
+  opacity: 1;
+  background: #F7F7F7;
+  padding: 12px;
+  width: 100%;
+
+  .file_name {
+    font-size: 14px;
+    color: #333333;
+    margin-bottom: 12px;
+  }
+
+  .file {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .file_img {
+      width: 80px;
+      height: 80px;
+      border-radius: 4px;
+      position: relative;
+      border-radius: 8px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #fff;
+      font-size: 12px;
+      color: #666666;
+      flex-direction: column;
+
+      .filed {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+      }
+
+      .small_img {
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+      }
+
+      .add {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        border: 1px dashed #BFDAFF;
+        border-radius: 4px;
+        width: 100%;
+        height: 100%;
+        .add_icon {
+          width: 14px;
+          margin-left: -5px;
+        }
+        color: #1678FF;
+      }
+
+      .del {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        top: -6px;
+        right: -6px;
+        z-index: 3;
+      }
+
+      .error_msg {
+        position: absolute;
+        top: 30px;
+        right: 22px;
+      }
+
+      .mask {
+        // display: none !important;
+        border-radius: 8px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        // opacity: 0.5;
+        background: #2222227d;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        z-index: 3;
+
+        .checked {
+          display: flex;
+          align-items: center;
+
+          img {
+            width: 14px;
+            height: 14px;
+            margin-right: 3px;
+          }
+        }
+      }
+    }
+
+    .blocks {
+      margin-right: auto;
+      margin-left: 20px;
+      height: 80px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex: 1;
+
+      .status {
+        display: flex;
+        gap: 12px;
+
+        .status_item {
+          width: 44px;
+          height: 20px;
+          border-radius: 4px;
+          background: #EFDEBD;
+          color: #C38A38;
+          font-size: 12px;
+          text-align: center;
+          line-height: 20px;
+        }
+      }
+
+      .btns {
+        display: flex;
+        gap: 24px;
+        font-size: 14px;
+        color: #1678FF;
+
+        .btn {
+          display: flex;
+          gap: 4px;
+        }
+      }
+    }
+
+
+    .operation {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 4px 0;
+      height: 80px;
+    }
+    .operation_pc {
+      display: flex;
+      flex-direction: row-reverse;
+      height: 80px;
+      align-items: end;
+    }
+    .btn {
+      display: flex;
+      flex-direction: row;
+      justify-content: end;
+
+      .img_btn {
+        margin-left: 8px;
+        width: 68px;
+        height: 26px;
+        border-radius: 4px;
+        opacity: 1;
+        box-sizing: border-box;
+        border: 1px solid #1678FF;
+        color: #1678FF;
+        font-size: 13px;
+        line-height: 26px;
+        text-align: center;
+        cursor: pointer;
+      }
+
+    }
+    .operation_btn {
+      cursor: pointer;
+      margin-left: 8px;
+      width: 68px;
+      height: 26px;
+      border-radius: 4px;
+      opacity: 1;
+      box-sizing: border-box;
+      background: linear-gradient(90deg, #73AEFF 0%, #1678FF 100%);
+      color: #fff;
+      font-size: 13px;
+      line-height: 26px;
+      text-align: center;
+    }
+  }
+
+  .file_item_bottom {
+    margin-top: 12px;
+    border-top: 1px solid #EAEAEA;
+    display: flex;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    padding-top: 12px;
+
+    .line {
+      width: 1px;
+      height: 20px;
+      background-color: #EAEAEA;
+    }
+
+    .icon_text {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      color: #1678FF;
+
+      img {
+        width: 16px;
+        height: 11px;
+        margin-right: 5px;
+
+      }
+    }
+  }
+
+  .img_view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .close {
+      width: 17px;
+      height: 17px;
+      color: #fff;
+      position: absolute;
+      top: 40px;
+      right: 20px;
+    }
+
+    .view {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  .material_lib {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 88;
+    background-color: rgba(0, 0, 0, 0.5);
+
+    .material_lib_content {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      background-color: #F5F5F5;
+      border-radius: 16px 16px 0px 0px;
+
+      .material_lib_title {
+        border-radius: 16px 16px 0px 0px;
+        background-color: #fff;
+        font-size: 16px;
+        color: #333333;
+        line-height: 54px;
+        text-align: center;
+      }
+
+      .tips {
+        padding: 12px;
+        background: #FFF6E8;
+        font-size: 14px;
+        line-height: 24px;
+        color: #F29655;
+        display: flex;
+        align-items: flex-start;
+
+        img {
+          width: 14px;
+          height: 14px;
+          margin-right: 8px;
+          margin-top: 5px;
+        }
+      }
+
+      .list {
+        padding: 12px 12px 0 12px;
+        width: 100%;
+        background-color: #F5F5F5;
+        // margin-bottom: 14px;
+        max-height: 300px;
+        overflow: auto;
+
+        .item {
+          padding: 16px 12px;
+          border-radius: 8px;
+          background: #FFF;
+          display: flex;
+          align-items: center;
+          color: #333333;
+          font-size: 14px;
+          width: 100%;
+          margin-bottom: 12px;
+
+          .preview_icon {
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+            color: #1678FF;
+
+            img {
+              width: 16px;
+              margin-right: 4px;
+            }
+          }
+        }
+      }
+
+      .more {
+        color: #1678FF;
+        text-align: center;
+        height: 30px;
+        line-height: 30px;
+        margin-bottom: 70px;
+        background-color: #F5F5F5;
+      }
+
+      .bottom_btn {
+        background-color: #fff;
+        height: 64px;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+
+        .btn {
+          width: 169px;
+          height: 40px;
+          border-radius: 50px;
+          font-size: 16px;
+          line-height: 40px;
+          text-align: center;
+        }
+
+        .cancel {
+          background-color: #fff;
+          border: 1px solid #E7E7E7;
+          color: #333;
+        }
+
+        .ok {
+          background: linear-gradient(90deg, #73AEFF 0%, #1678FF 100%);
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .preview {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    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: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  .sign_page {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+}

package/es/components/file-list/seal.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function SealPage(props: any): JSX.Element;
+export default SealPage;

package/es/components/file-list/seal.js

@@ -0,0 +1,222 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useState, useRef } from 'react';
+import { initSealPageMethod } from "./sealUtil";
+import { signFileDownApi, getSignFileApi, fileUploadApi } from "../../api";
+// import { uploadFilePromise, dataURLtoBlob } from './file.js'
+
+function SealPage(props) {
+  var userInfo = props.userInfo,
+    file = props.file,
+    getSealRes = props.getSealRes,
+    handleClose = props.handleClose,
+    tokenTY = props.tokenTY,
+    baseUrl = props.baseUrl,
+    env = props.env,
+    isPC = props.isPC,
+    accessToken = props.accessToken;
+  var _useState = useState(''),
+    srcUrl = _useState[0],
+    setSrcUrl = _useState[1];
+  var _useState2 = useState(''),
+    orderId = _useState2[0],
+    setOrderId = _useState2[1];
+  var timerRef = useRef(null);
+  var elementRef = useRef(null);
+  var handleRes = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var fileObj, res, pageUrl, orderIdVal;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            console.log('file', file, userInfo);
+            fileObj = file; // 有旧的 URL 说明是重新签章 旧的是原始的空白的 重新签需要签在原始的空白文件
+            if (file.isSealed) {
+              fileObj.fileUrl = file.originalUrl;
+            } else if (!file.originalUrl) {
+              fileObj.originalUrl = file.fileUrl;
+            }
+            // 传递配置参数给工具函数
+            _context.next = 1;
+            return initSealPageMethod(fileObj, userInfo, {
+              tokenTY: tokenTY,
+              baseUrl: baseUrl,
+              env: env,
+              isPC: isPC,
+              accessToken: accessToken
+            });
+          case 1:
+            res = _context.sent;
+            if (res) {
+              _context.next = 2;
+              break;
+            }
+            handleClose();
+            return _context.abrupt("return");
+          case 2:
+            pageUrl = res.pageUrl, orderIdVal = res.orderId;
+            console.log('pageUrl', pageUrl);
+            setSrcUrl(pageUrl);
+            setOrderId(orderIdVal);
+            // console.log(res)
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleRes() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  // 将返回的文件重新上传
+  var uploadNewFile = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fileData) {
+      var params, uploadRes, finalFile;
+      return _regeneratorRuntime.wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            console.log('fileData', fileData);
+            params = {
+              materiaBase: 'data:application/pdf;base64,' + fileData,
+              open: true
+            };
+            console.log('params', params);
+            _context2.next = 1;
+            return fileUploadApi(params, {
+              tokenTY: tokenTY,
+              baseUrl: baseUrl,
+              env: env,
+              isPC: isPC,
+              accessToken: accessToken
+            });
+          case 1:
+            uploadRes = _context2.sent;
+            console.log('重新上传的文件', uploadRes);
+            if (uploadRes.code === 200) {
+              handleClose();
+              finalFile = _extends({}, file, {
+                fileId: uploadRes.data.fileId,
+                fileName: file.fileName,
+                fileUrl: uploadRes.data.fileUrlList[2],
+                isSealed: true
+              });
+              getSealRes(finalFile);
+            }
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function uploadNewFile(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  // 下载文件
+  var signFileDown = function signFileDown(filePath) {
+    signFileDownApi({
+      fileUrl: filePath
+    }, {
+      tokenTY: tokenTY,
+      baseUrl: baseUrl,
+      env: env,
+      isPC: isPC,
+      accessToken: accessToken
+    }).then(function (res) {
+      if (res.code === 200) {
+        uploadNewFile(res.data);
+      }
+    });
+  };
+
+  // 电子签章 - 移动端签批 获取移动端签章结果 (文件地址)
+  var getSignFileFun = function getSignFileFun() {
+    // uni.showLoading({ title: '加载中' })
+
+    var params = {
+      orderId: orderId
+    };
+    getSignFileApi(params, {
+      tokenTY: tokenTY,
+      baseUrl: baseUrl,
+      env: env,
+      isPC: isPC,
+      accessToken: accessToken
+    }).then(function (res) {
+      if (!res) {
+        return;
+      }
+      console.log(res, '签章之后的数据');
+      var _res$data = res.data,
+        signStatus = _res$data.signStatus,
+        signFiles = _res$data.signFiles;
+      if (signStatus === 6) {
+        // 签署成功
+        handleClearInterval();
+        if (signFiles && signFiles.length) {
+          // 下载该文件
+          signFileDown(signFiles[0].filePath);
+        }
+      }
+      // uni.hideLoading()
+    })["catch"](function (err) {
+      console.log(err);
+    });
+  };
+  var handleClearInterval = function handleClearInterval() {
+    clearInterval(timerRef.current);
+    timerRef.current = null;
+  };
+  useEffect(function () {
+    if (orderId) {
+      handleClearInterval();
+      timerRef.current = setInterval(function () {
+        getSignFileFun();
+      }, 3000);
+    }
+    return function () {
+      handleClearInterval();
+    };
+  }, [orderId]);
+  var handleTouchMove = function handleTouchMove(e) {
+    e.preventDefault(); // 只有在 passive: false 时才能调用
+    console.log('Touch move');
+  };
+  var handleTouchStart = function handleTouchStart(e) {
+    console.log('Touch start - passive', e.touches[0].clientX);
+  };
+  useEffect(function () {
+    var element = elementRef.current;
+    if (!element) return;
+
+    // 添加被动事件监听器
+    element.addEventListener('touchstart', handleTouchStart, {
+      passive: true
+    });
+    element.addEventListener('touchmove', handleTouchMove, {
+      passive: false // 如果需要 preventDefault
+    });
+    return function () {
+      element.removeEventListener('touchstart', handleTouchStart);
+      element.removeEventListener('touchmove', handleTouchMove);
+    };
+  }, []);
+  useEffect(function () {
+    handleRes();
+  }, [userInfo, file]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sealPage",
+    ref: elementRef
+  }, /*#__PURE__*/React.createElement("iframe", {
+    src: srcUrl,
+    id: "iframe",
+    frameborder: "0",
+    height: "100%",
+    width: "100%"
+  }));
+}
+export default SealPage;