ydb-components-material 0.1.87 → 0.1.89

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

@@ -0,0 +1,369 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { getBlob, getFileExtension, upload, dataURLtoBlob, uploadFilePromise } from "./file";
+import { createbycategory, contractSignUrl, signurl, checkSignState, contractFinish, documentDownload, fileUploadApi } from "../../api";
+var categoryId = '3354397552669692408';
+// 预发
+var categoryIdRelease = '3291682531601133765'; // 手写签批id
+var documentId = ''; // 手写签批生成的文件id
+var contractId = ''; // 合同id
+
+// 对外的方法 初始化手写签批的页面
+export function initSignPageMethod(_x, _x2, _x3) {
+  return _initSignPageMethod.apply(this, arguments);
+}
+
+// 【第 1 步】上传要手写签批的文件
+function _initSignPageMethod() {
+  _initSignPageMethod = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(fileObj, userInfo, config) {
+    var fileName, docId, contrId, flag, pageUrl, params;
+    return _regeneratorRuntime.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          console.log('fileObj', fileObj, userInfo);
+          fileName = fileObj.fileName; // 【第 1 步】上传要手写签批的文件
+          _context.next = 1;
+          return uploadSignFile(fileObj, config);
+        case 1:
+          docId = _context.sent;
+          console.log('docId---', docId);
+          if (docId) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", false);
+        case 2:
+          documentId = docId; // 保存文档 id
+
+          // 【第 2 步】创建或者发起电子签批
+          _context.next = 3;
+          return createbycategoryFun(fileName, docId, config);
+        case 3:
+          contrId = _context.sent;
+          console.log('contrId---', contrId);
+          if (contrId) {
+            _context.next = 4;
+            break;
+          }
+          return _context.abrupt("return", false);
+        case 4:
+          contractId = contrId;
+
+          // 【第 3 步】创建手写签批页面
+          _context.next = 5;
+          return getContractSignUrl(contrId, userInfo, config);
+        case 5:
+          flag = _context.sent;
+          if (flag) {
+            _context.next = 6;
+            break;
+          }
+          return _context.abrupt("return", false);
+        case 6:
+          _context.next = 7;
+          return getSignUrl(userInfo, config);
+        case 7:
+          pageUrl = _context.sent;
+          if (pageUrl) {
+            _context.next = 8;
+            break;
+          }
+          return _context.abrupt("return", false);
+        case 8:
+          // 将 文档 id/签批文件 id/签署地址/文件名称 返回
+          params = {
+            documentId: documentId,
+            contractId: contractId,
+            pageUrl: pageUrl,
+            fileName: fileName
+          };
+          return _context.abrupt("return", params);
+        case 9:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _initSignPageMethod.apply(this, arguments);
+}
+function uploadSignFile(_x4, _x5) {
+  return _uploadSignFile.apply(this, arguments);
+} // 【第 2 步】创建或者发起电子签批
+function _uploadSignFile() {
+  _uploadSignFile = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(event, config) {
+    var blob, file, signApprovalFileType;
+    return _regeneratorRuntime.wrap(function (_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          console.log('文件 1111', event, config);
+          // uni.showLoading({ title: '加载中' })
+          _context2.next = 1;
+          return getBlob(event.fileUrl);
+        case 1:
+          blob = _context2.sent;
+          file = new File([blob], event.fileName, {
+            type: getFileExtension(event.fileName)
+          });
+          console.log('file----', file);
+          // 获取文件类型
+          signApprovalFileType = getFileExtension(event.fileName);
+          return _context2.abrupt("return", new Promise(function (resolve) {
+            // 上传文件
+            upload({
+              file: file,
+              title: event.fileName,
+              fileType: signApprovalFileType,
+              filename: event.fileName,
+              // 文件名称
+              headers: {
+                Authorization: config.tokenTY
+              },
+              // https://zwfwpt.sxzwfw.gov.cn${window.env === 'release' ? ':10010' : ''}/DeclarationAPI
+              action: config.baseUrl + "/declaration/center/signapproval/api/createbyfile",
+              // 上传文件的地址
+              onError: function onError(e) {
+                // uni.$u.toast(e.msg || '手写签批上传文件异常');
+                // uni.hideLoading();
+                resolve(false);
+              },
+              onSuccess: function onSuccess(e) {
+                // 上传成功
+                console.log('上传成功', e);
+                resolve(e.data.documentId);
+              }
+            });
+          }));
+        case 2:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _uploadSignFile.apply(this, arguments);
+}
+function createbycategoryFun(fileName, documentIdVal, config) {
+  // uni.showLoading({ title: '加载中' })
+  console.log('env---', config.env);
+  var params = {
+    subject: fileName,
+    documents: [documentIdVal],
+    categoryId: config.env === 'releaseHLW' ? categoryIdRelease : categoryId,
+    send: true,
+    tenantName: '山西省行政审批服务管理局'
+  };
+  return new Promise(function (resolve) {
+    createbycategory(params, config).then(function (res) {
+      console.log('创建订单成功', res);
+      if (res.code === 200) {
+        resolve(res.data.contractId);
+      } else {
+        resolve(false);
+      }
+    })["catch"](function (error) {
+      // uni.hideLoading();
+      resolve(false);
+    });
+  });
+}
+
+// 【第 3 步】创建手写签批页面
+function getContractSignUrl(contractIdVal, userInfo, config) {
+  console.log('contractIdVal', contractIdVal, userInfo);
+  // uni.showLoading({ title: '加载中' })
+  var params = {
+    contractId: contractIdVal,
+    signatories: [{
+      tenantType: 'PERSONAL',
+      tenantName: userInfo.acctType === '20' ? userInfo.legalName : userInfo.userName,
+      contact: userInfo.acctType === '20' ? userInfo.legalMobile : userInfo.contactMobile,
+      serialNo: 1,
+      signAuthConfig: {
+        signAuth: 'DEFAULT'
+      },
+      remind: false
+    }]
+  };
+  return new Promise(function (resolve) {
+    contractSignUrl(params, config).then(function (res) {
+      if (res.data.code == 0) {
+        resolve(true);
+      } else {
+        // uni.hideLoading();
+        // uni.showModal({
+        //   title: '温馨提示',
+        //   content: '获取签批页面失败',
+        //   confirmText: '知道了',
+        //   showCancel: false,
+        // })
+        resolve(false);
+      }
+    })["catch"](function (error) {
+      // uni.hideLoading();
+      resolve(false);
+    });
+  });
+}
+
+// 【第 4 步】获取签 pi 页面
+function getSignUrl(userInfo, config) {
+  // uni.showLoading({ title: '加载中' })
+  var params = {
+    contractId: contractId,
+    tenantType: 'PERSONAL',
+    // COMPANY（组织）,PERSONAL（个人）
+    tenantName: userInfo.acctType === '20' ? userInfo.legalName : userInfo.userName,
+    contact: userInfo.acctType === '20' ? userInfo.legalMobile : userInfo.contactMobile,
+    canReturn: false,
+    // 页面是否显示返回按钮
+    canWithdraw: false,
+    // 页面是否显示撤回/回退/拒签按钮
+    rejectable: false,
+    // 页面是否显示拒签按钮
+    allowDownload: false,
+    // 页面是否显示下载按钮
+    allowPrint: false,
+    // 页面是否显示打印按钮
+    canViewDetail: false,
+    // 页面是否显示签署详情按钮
+    canMoreOperation: false,
+    // 页面是否显示"更多操作"按钮
+    autoClosePage: true,
+    // 操作完成自动关闭页面
+    language: 'ZH_CN',
+    deviceType: config.isPC || 'H5' // 取值范围：PC（返回 PC 页面），H5（返回 H5 页面）；不传值默认为：根据请求的 UserAgent 自动判断返回的页面类型。
+  };
+  return new Promise(function (resolve) {
+    signurl(params, config).then(function (res) {
+      console.log(res, '页面结果');
+      if (res.data.code == 0) {
+        resolve(res.data.signUrl);
+      } else {
+        resolve(false);
+      }
+      // uni.hideLoading();
+    })["catch"](function (error) {
+      resolve(false);
+      // uni.hideLoading();
+    });
+  });
+}
+
+// 下方是打开手写签批页面后 的后续操作
+
+// 对外的方法 获取签批后的文件
+export function getSignRes(_x6, _x7, _x8, _x9, _x0) {
+  return _getSignRes.apply(this, arguments);
+}
+
+// 轮询 签批状态
+function _getSignRes() {
+  _getSignRes = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(documentIdVal, contractIdVal, name, autoUpload, config) {
+    var isSignSucc, newFile, params, uploadRes;
+    return _regeneratorRuntime.wrap(function (_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _context3.next = 1;
+          return getCheckSignState(contractIdVal, config);
+        case 1:
+          isSignSucc = _context3.sent;
+          if (!isSignSucc) {
+            _context3.next = 8;
+            break;
+          }
+          // 封存
+          getContractFinish(contractIdVal, config);
+          _context3.next = 2;
+          return handleSignApprovalDown(documentIdVal, name, config);
+        case 2:
+          newFile = _context3.sent;
+          console.log('newFile', newFile);
+          // 如果需要自动上传
+          if (!autoUpload) {
+            _context3.next = 6;
+            break;
+          }
+          params = {
+            materiaBase: newFile,
+            open: true
+          };
+          console.log('params', params);
+          _context3.next = 3;
+          return fileUploadApi(params, config);
+        case 3:
+          uploadRes = _context3.sent;
+          // const uploadedFileObj = await uploadFilePromise(newFile, config)
+          console.log('签批完成后的文件地址', uploadRes);
+          if (!(uploadRes.code === 200)) {
+            _context3.next = 4;
+            break;
+          }
+          return _context3.abrupt("return", uploadRes.data);
+        case 4:
+          return _context3.abrupt("return", false);
+        case 5:
+          _context3.next = 7;
+          break;
+        case 6:
+          return _context3.abrupt("return", newFile);
+        case 7:
+          _context3.next = 9;
+          break;
+        case 8:
+          return _context3.abrupt("return", false);
+        case 9:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return _getSignRes.apply(this, arguments);
+}
+function getCheckSignState(contractIdVal, config) {
+  return new Promise(function (resolve) {
+    checkSignState({
+      contractId: contractIdVal
+    }, config).then(function (res) {
+      console.log('轮询结果---', res);
+      // console.log('轮询结果', JSON.parse(res.data));
+      // 签署完成
+      if (res.data !== 'null') {
+        res = JSON.parse(res.data);
+        if (res.status == 'SIGNED') {
+          resolve(true);
+        } else {
+          resolve(false);
+        }
+      } else {
+        resolve(false);
+      }
+    });
+  });
+}
+
+// 封存电子签批
+function getContractFinish(contractIdVal, config) {
+  contractFinish({
+    contractId: contractIdVal
+  }, config);
+}
+
+// 下载签署完的文档
+function handleSignApprovalDown(documentIdVal, name, config) {
+  var params = {
+    documentId: documentIdVal,
+    type: 'pdf'
+  };
+  return new Promise(function (resolve) {
+    documentDownload(params, config).then(function (res) {
+      console.log('下载文件：', res);
+      // 返回来是base64格式的
+      // const blob = dataURLtoBlob(res.data); // 转成blob格式进行上传
+      // console.log(blob, '新文件的blob格式');
+      if (res.code === 200) {
+        resolve(res.data);
+      } else {
+        resolve(false);
+      }
+    });
+  });
+}

package/es/index.d.ts

@@ -39,5 +39,7 @@ export type { PreviewMaterialProps } from './components/preview-material';
 export { default as PreviewMaterial } from './components/preview-material';
 export type { PrintButtonProps } from './components/print';
 export { default as PrintButton } from './components/print';
+export type { FileListProps } from './components/file-list';
+export { default as FileList } from './components/file-list';
 declare const bizCssPrefix = "bizpack";
 export { bizCssPrefix };

package/es/index.js

@@ -25,5 +25,6 @@ export { default as AddressSelect } from "./components/address-select";
 export { default as AddressCascader } from "./components/address-cascade";
 export { default as PreviewMaterial } from "./components/preview-material";
 export { default as PrintButton } from "./components/print";
+export { default as FileList } from "./components/file-list";
 var bizCssPrefix = 'bizpack';
 export { bizCssPrefix };

package/es/style.js

@@ -3,4 +3,5 @@ import '@alifd/next/es/message/style';
 import '@alifd/next/es/radio/style';
 import '@alifd/next/es/checkbox/style';
 import 'antd/es/cascader/style';
+import '@alifd/next/es/balloon/style';
 import './index.scss';

package/lib/components/file-list/checkPoint.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './checkPoint.scss';
+export default function CheckPoint(props: any): JSX.Element;

package/lib/components/file-list/checkPoint.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = CheckPoint;
+var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
+var _react = require("react");
+var _icons = require("@ant-design/icons");
+require("./checkPoint.scss");
+function CheckPoint(props) {
+  var _resultData$at, _resultData$at2;
+  var checkPointData = props.checkPointData,
+    handleClose = props.handleClose;
+  var _useState = (0, _react.useState)(0),
+    resIndex = _useState[0],
+    setResIndex = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+    resIndexData = _useState2[0],
+    setResIndexData = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    resultData = _useState3[0],
+    setResultData = _useState3[1];
+  var _useState4 = (0, _react.useState)(0),
+    pageHeight = _useState4[0],
+    setPageHeight = _useState4[1];
+  var imgRef = (0, _react.useRef)();
+  var initData = function initData() {
+    var fileUrl = checkPointData.fileUrl,
+      _checkPointData$annot = checkPointData.annotations,
+      annotations = _checkPointData$annot === void 0 ? [] : _checkPointData$annot;
+    setTimeout(function () {
+      var iframe = document.getElementById('file_check_point');
+      iframe.src = fileUrl + "#toolbar=0";
+    }, 500);
+    setResIndexData(annotations[0]);
+    // 其中的page可能是乱序的，所以先排序一下
+    setResultData(annotations.sort(function (a, b) {
+      return a.page - b.page;
+    }));
+    var clientWidth = document.documentElement.clientWidth;
+    var _annotations$ = annotations[0],
+      scrollWidth = _annotations$.scrollWidth,
+      scrollHeight = _annotations$.scrollHeight;
+    var scale = clientWidth / scrollWidth;
+    setPageHeight(scrollHeight * scale);
+  };
+
+  // 获取标识的位置和大小 [方法]
+  var getTipDotStyle = function getTipDotStyle(item) {
+    var width = item.width,
+      height = item.height,
+      x = item.x,
+      y = item.y,
+      scrollWidth = item.scrollWidth,
+      scrollHeight = item.scrollHeight,
+      page = item.page;
+    console.log(width, height, x, y);
+    var img = imgRef.current;
+    console.log(img, 'refs');
+    var clientWidth = document.documentElement.clientWidth;
+    console.log('clientWidth-----', clientWidth);
+
+    // 算出一个系数，来动态生成下面的边框样式
+    var scale = clientWidth / scrollWidth;
+
+    // console.log('原始宽高', sourceImgWidth, sourceImgHeight);
+    console.log('原始宽高', scrollWidth, scrollHeight);
+    console.log('缩放系数', scale, scale);
+    return {
+      width: width * scale + 'px',
+      height: height * scale + 'px',
+      left: x * scale + 'px',
+      top: (page - 1) * pageHeight + y * scale + 'px'
+    };
+  };
+
+  // 上一项(prev),下一项(next) [按钮]
+  var handleSwitch = function handleSwitch(state) {
+    if (state === 'next' && resIndex === resultData.length - 1) return _message["default"].notice('没有下一项了');
+    if (state === 'prev' && resIndex === 0) return _message["default"].notice('没有上一项了');
+    if (state === 'next') {
+      setResIndex(resIndex + 1);
+      setResIndexData(resultData[resIndex + 1]);
+    }
+    if (state === 'prev') {
+      setResIndex(resIndex - 1);
+      setResIndexData(resultData[resIndex - 1]);
+    }
+  };
+  var checkOneDot = function checkOneDot(item, index) {
+    setResIndex(index);
+    setResIndexData(item);
+  };
+  (0, _react.useEffect)(function () {
+    if (checkPointData) {
+      initData();
+    }
+  }, [checkPointData]);
+  return /*#__PURE__*/_react.React.createElement("div", null, /*#__PURE__*/_react.React.createElement("div", {
+    className: "keyPoint-container"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    className: "tipDot-content",
+    style: {
+      height: ((_resultData$at = resultData.at(-1)) === null || _resultData$at === void 0 ? void 0 : _resultData$at.page) * pageHeight + 'px'
+    }
+  }, resultData.map(function (item, index) {
+    return /*#__PURE__*/_react.React.createElement("div", {
+      className: "tip-item " + (index === resIndex ? 'active' : ''),
+      key: index,
+      onClick: function onClick() {
+        return checkOneDot(item, index);
+      },
+      style: getTipDotStyle(item)
+    }, /*#__PURE__*/_react.React.createElement("div", {
+      className: "num " + (index === resIndex ? 'active' : '')
+    }, index + 1));
+  })), resIndexData && /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-outter"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-card"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-title"
+  }, resIndex + 1, "\u3001", resIndexData.text), /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-info"
+  }, /*#__PURE__*/_react.React.createElement(_icons.CheckCircleFilled, {
+    color: "#15bc83",
+    size: "20",
+    style: {
+      color: '#15bc83',
+      fontSize: '20px'
+    }
+  }), /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-text"
+  }, resIndexData.reviewNotes)))), /*#__PURE__*/_react.React.createElement("div", {
+    className: "bottom-btn"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    className: "btn"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    onClick: handleClose
+  }, "\u8FD4\u56DE")), /*#__PURE__*/_react.React.createElement("div", {
+    className: "btn"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    onClick: function onClick() {
+      return handleSwitch('prev');
+    }
+  }, "\u4E0A\u4E00\u9879")), /*#__PURE__*/_react.React.createElement("div", {
+    className: "btn btn-blue"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    onClick: function onClick() {
+      return handleSwitch('next');
+    }
+  }, "\u4E0B\u4E00\u9879"))), /*#__PURE__*/_react.React.createElement("iframe", {
+    ref: imgRef,
+    id: "file_check_point",
+    frameBorder: "0",
+    height: "100%",
+    width: "100%",
+    style: {
+      height: ((_resultData$at2 = resultData.at(-1)) === null || _resultData$at2 === void 0 ? void 0 : _resultData$at2.page) * pageHeight + 'px'
+    }
+  })));
+}

package/lib/components/file-list/checkPoint.scss

@@ -0,0 +1,120 @@
+.keyPoint-container {
+	// position: sticky;
+	height: 100vh;
+  // margin-top: -56px;
+	width: 100vw;
+  position: fixed;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  background: #919191;
+  overflow-y: scroll;
+  #file_check_point {
+    overflow: visible !important;
+    overflow-clip-margin: unset !important;
+  }
+  .tipDot-content{
+    // height: 100vh;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    // overflow: scroll;
+    .tip-item{
+      position: absolute;
+      border-radius: 2px;
+      border: 1px solid #15BC83;
+      background: rgba(21, 188, 131, 0.1);
+      &.active {
+        background: rgba(247, 98, 93, 0.1);
+        border: 1px solid #F7625D;
+      }
+      .num{
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        font-size: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #ffffff;
+        margin-left: -20px;
+        background: #15BC83;
+        &.active {
+          background: #F7625D;
+        }
+      }
+    }
+
+  }
+	.result-outter {
+		box-sizing: border-box;
+		padding: 0 24px;
+		// border: 1px solid red;
+		position: fixed;
+		width: 100%;
+		bottom: 65px;
+		left: 0;
+		.result-card {
+			border-radius: 10px;
+			padding: 16px;
+      background: #ffffff;
+      border: 1px solid #ddd;
+      box-shadow: 0px 4px 10px 0px rgba(177, 188, 200, 0.25);
+			.result-title {
+				color: #333;
+				font-size: 14px;
+				margin-bottom: 8px;
+			}
+			.result-info{
+				font-size: 14px;
+				margin-bottom: 10px;
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				gap: 5px;
+				// 提示类型: error/judge/pass
+				.result-text{
+				}
+			}
+		}
+
+	}
+	.bottom-btn {
+		box-sizing: border-box;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		background-color: #fff;
+		padding: 11px 0;
+		display: flex;
+		box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.1);
+		z-index: 200;
+		.btn {
+			margin: 0 10px;
+			flex: 1;
+      color: #323233;
+      background-color: #fff;
+      border-color: #ebedf0;
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 100px;
+      padding: 0 12px;
+      font-size: 14px;
+      height: 40px;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      display: flex;
+      flex-direction: row;
+      box-sizing: border-box;
+      flex-direction: row;
+		}
+    .btn-blue {
+      color: white;
+      border-width: 0px;
+      background-image: linear-gradient(rgb(22, 120, 255), rgb(118, 173, 250));
+    }
+	}
+}