ydb-components-material 0.1.96 → 0.1.98

package/es/components/drag-drop/icons/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="11" viewBox="0 0 16 11"><g><path d="M15.949896,5.2555661C16.016703,5.4388962,16.016703,5.5611272,15.949896,5.7444577C15.949896,5.7444577,15.883092,5.9277883,15.816283,5.9888978C15.749479,6.1722283,15.615868,6.3555694,15.482255,6.5999985C15.148229,7.0888891,14.680583,7.7000132,14.012527,8.3722239C12.743215,9.6555681,10.739035,11,8,11C5.2609663,11,3.2567897,9.6555681,1.987474,8.3722239C1.319415,7.7000132,0.85177505,7.0888891,0.51774478,6.5999985C0.51774478,6.5999985,0.18371604,5.9888978,0.18371604,5.9888978C0.11691014,5.9277883,0.050104432,5.7444577,0.050104432,5.7444577C-0.016701477,5.6222262,-0.016701477,5.4388962,0.050104432,5.2555661C0.050104432,5.2555661,0.1169103,5.0722361,0.18371604,5.0111141C0.25052202,4.8277841,0.38413364,4.6444426,0.51774478,4.4000139C0.85177356,3.9111221,1.319415,3.3000102,1.987474,2.6277888C3.2567489,1.3444551,5.2609239,0,7.9999585,0C10.738992,0,12.743169,1.3444551,14.012487,2.6277888C14.680545,3.3000102,15.148186,3.9111221,15.482213,4.400003C15.482213,4.400003,15.816243,5.0111032,15.816243,5.0111032C15.883049,5.0722246,15.949852,5.2555661,15.949852,5.2555661C15.949852,5.2555661,15.949896,5.2555661,15.949896,5.2555661ZM8.0000048,3.3000102C9.2025099,3.3000102,10.271409,4.2777824,10.271409,5.5000286C10.271409,6.72223,9.2025127,7.7000132,8.0000048,7.7000132C6.7974997,7.7000132,5.728601,6.72223,5.728601,5.5000286C5.728601,4.2777824,6.7974944,3.3000102,8.0000048,3.3000102C8.0000048,3.3000102,8.0000048,3.3000102,8.0000048,3.3000102ZM4.3924899,5.5000286C4.3924899,7.3333526,5.9958301,8.9222136,8.0000048,8.9222136C10.004179,8.9222136,11.607521,7.3333526,11.607521,5.5000286C11.607521,3.6666818,10.004179,2.0777981,8.0000048,2.0777981C5.9958305,2.0777981,4.3924899,3.6666818,4.3924899,5.5000286C4.3924899,5.5000286,4.3924899,5.5000286,4.3924899,5.5000286Z" fill="#1678FF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

package/es/components/drag-drop/index.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import './index.scss';
+export interface DragDropListProps {
+    /**
+     * 类型
+     */
+    fileList: Array<object>;
+    valChange?: (value: any) => void;
+    close?: () => void;
+    style?: object;
+    baseUrl: string;
+    tokenTY: string;
+    materialName: string;
+    getRes: (value: any) => void;
+}
+declare const DragDropList: React.FC<DragDropListProps>;
+export default DragDropList;

package/es/components/drag-drop/index.js

@@ -0,0 +1,306 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from 'react';
+import { useState } from 'react'; // 1. 引入 useState
+import previewIcon from "./icons/preview.svg";
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import { ExclamationCircleFilled, HolderOutlined, CloseOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
+import jsPDF from 'jspdf';
+import "./index.scss";
+var DragDropList = function DragDropList(_ref) {
+  var fileList = _ref.fileList,
+    valChange = _ref.valChange,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    baseUrl = _ref.baseUrl,
+    materialName = _ref.materialName,
+    tokenTY = _ref.tokenTY;
+  var _useState = useState(''),
+    viewUrl = _useState[0],
+    setViewUrl = _useState[1];
+  var _useState2 = useState(''),
+    viewPdfUrl = _useState2[0],
+    setViewPdfUrl = _useState2[1];
+  var _useState3 = useState(null),
+    blob = _useState3[0],
+    setBlob = _useState3[1];
+
+  // 置顶
+  var top = function top(index) {
+    console.log('置顶');
+    var newItems = Array.from(fileList);
+
+    // 4. 移除被拖拽的元素
+    var _newItems$splice = newItems.splice(index, 1),
+      removed = _newItems$splice[0];
+
+    // 5. 将元素插入到新的位置
+    newItems.splice(0, 0, removed);
+
+    // 6. 更新状态，触发重新渲染
+    // setItems(newItems);
+    valChange && valChange(newItems);
+  };
+  var onDragEnd = function onDragEnd(result) {
+    // 如果没有目标位置（比如拖拽到容器外），则不处理
+    if (!result.destination) return;
+
+    // 如果源位置和目标位置相同，也不处理
+    if (result.source.index === result.destination.index) return;
+
+    // 3. 创建一个新的数组副本
+    var newItems = Array.from(fileList);
+
+    // 4. 移除被拖拽的元素
+    var _newItems$splice2 = newItems.splice(result.source.index, 1),
+      removed = _newItems$splice2[0];
+
+    // 5. 将元素插入到新的位置
+    newItems.splice(result.destination.index, 0, removed);
+
+    // 6. 更新状态，触发重新渲染
+    // setItems(newItems);
+    valChange && valChange(newItems);
+    console.log('拖拽完成，新顺序:', newItems);
+  };
+
+  // File 文件转 Image 对象
+  var getImageByFile = function getImageByFile(file) {
+    return new Promise(function (resolve) {
+      var reader = new FileReader();
+      reader.onload = function (e) {
+        var img = new Image();
+        img.src = e.target.result;
+        img.onload = function () {
+          return resolve(img);
+        };
+      };
+      reader.readAsDataURL(file);
+    });
+  };
+
+  // 下载文件
+  var getBlob = function getBlob(url) {
+    return new Promise(function (resolve, reject) {
+      var xhr = new XMLHttpRequest();
+      xhr.open('GET', url, true);
+      xhr.responseType = 'blob';
+      xhr.onload = function () {
+        if (xhr.status === 200) {
+          resolve(xhr.response);
+        } else {
+          reject("Request failed with status " + xhr.status);
+        }
+      };
+      xhr.onerror = function () {
+        reject('Request failed');
+      };
+      xhr.send();
+    });
+  };
+
+  // 核心：多张图片合并PDF
+  var imgsToPdf = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var pdf, i, fileUrl, _blob, file, img, targetWidth, scale, targetHeight, pdfBlob, blobUrl;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            // 初始化PDF，纵向、A4
+            pdf = new jsPDF({
+              orientation: 'portrait',
+              unit: 'px',
+              format: 'a4'
+            }); // 遍历所有图片
+            i = 0;
+          case 1:
+            if (!(i < fileList.length)) {
+              _context.next = 5;
+              break;
+            }
+            fileUrl = fileList[i].fileUrl;
+            _context.next = 2;
+            return getBlob(fileUrl);
+          case 2:
+            _blob = _context.sent;
+            console.log(_blob);
+            file = new File([_blob], "img" + i, {
+              type: 'image/png'
+            });
+            console.log(file);
+            _context.next = 3;
+            return getImageByFile(file);
+          case 3:
+            img = _context.sent;
+            // 3. 计算可用宽度（保留边距）
+            targetWidth = 400; // 4. 按比例计算高度
+            scale = targetWidth / img.width;
+            targetHeight = img.height * scale; // 第一张不加新页，后续图片新增一页
+            if (i > 0) pdf.addPage();
+
+            // 图片写入PDF
+            pdf.addImage(img, 'PNG',
+            // 格式 JPEG/PNG
+            0, 0,
+            // x y 坐标
+            // A4_W, A4_H
+            targetWidth, targetHeight);
+          case 4:
+            i++;
+            _context.next = 1;
+            break;
+          case 5:
+            // 1. 获取 Blob
+            pdfBlob = pdf.output('blob');
+            setBlob(pdfBlob);
+
+            // 2. 创建 Blob URL
+            blobUrl = URL.createObjectURL(pdfBlob);
+            setViewPdfUrl(blobUrl);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function imgsToPdf() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var uploadPdf = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var formData;
+      return _regeneratorRuntime.wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            formData = new FormData();
+            formData.append('file', blob);
+            formData.append('open', true);
+            fetch(baseUrl + "/declaration/material/file/files/api", {
+              method: 'POST',
+              body: formData,
+              headers: {
+                'Authorization': tokenTY || ''
+              }
+            }).then(function (response) {
+              return response.json();
+            }).then(function (res) {
+              console.log(res);
+              valChange(_extends({}, res, {
+                fileName: materialName + '.pdf'
+              }));
+            });
+          case 1:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function uploadPdf() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "drag_drop",
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tip"
+  }, /*#__PURE__*/React.createElement(ExclamationCircleFilled, {
+    size: 14,
+    style: {
+      marginTop: '4px'
+    }
+  }), "\u8BF7\u5BF9\u7167\u6750\u6599\u9875\u7801\u987A\u5E8F\u4F9D\u6B21\u6392\u5217\u56FE\u7247\uFF0C\u672A\u6309\u89C4\u8303\u63D0\u4EA4\u7684\u6750\u6599\uFF0C\u5C06\u5F71\u54CD\u5BA1\u6838\u7ED3\u679C"), /*#__PURE__*/React.createElement("p", {
+    className: "text"
+  }, "\u957F\u6309\u5217\u8868\u62D6\u52A8\u6392\u5E8F"), /*#__PURE__*/React.createElement(DragDropContext, {
+    onDragEnd: onDragEnd
+  }, /*#__PURE__*/React.createElement(Droppable, {
+    droppableId: "droppable"
+  }, function (provided) {
+    return /*#__PURE__*/React.createElement("div", _extends({}, provided.droppableProps, {
+      ref: provided.innerRef
+    }), fileList.map(function (item, index) {
+      return /*#__PURE__*/React.createElement(Draggable, {
+        key: item.fileId,
+        draggableId: item.fileId,
+        index: index
+      }, function (provided) {
+        return /*#__PURE__*/React.createElement("div", _extends({
+          ref: provided.innerRef
+        }, provided.draggableProps, provided.dragHandleProps, {
+          className: "dragable",
+          style: _extends({}, provided.draggableProps.style)
+        }), /*#__PURE__*/React.createElement(HolderOutlined, {
+          style: {
+            fontSize: '20px'
+          }
+        }), /*#__PURE__*/React.createElement("img", {
+          className: "img",
+          src: item.fileUrl,
+          alt: ""
+        }), /*#__PURE__*/React.createElement("div", {
+          className: "info"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "name"
+        }, item.fileName), /*#__PURE__*/React.createElement("div", {
+          className: "view",
+          onClick: function onClick() {
+            return setViewUrl(item.fileUrl);
+          }
+        }, /*#__PURE__*/React.createElement("img", {
+          src: previewIcon,
+          alt: ""
+        }), "\u9884\u89C8")), /*#__PURE__*/React.createElement("div", {
+          className: "top",
+          onClick: function onClick() {
+            return top(index);
+          }
+        }, /*#__PURE__*/React.createElement(VerticalAlignTopOutlined, null)));
+      });
+    }), provided.placeholder);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "bottom_btn"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "previous btn",
+    onClick: close
+  }, "\u4E0A\u4E00\u6B65"), /*#__PURE__*/React.createElement("div", {
+    className: "preview btn",
+    onClick: imgsToPdf
+  }, "\u9884\u89C8\u6750\u6599")), viewUrl && /*#__PURE__*/React.createElement("div", {
+    className: "viewImg"
+  }, /*#__PURE__*/React.createElement(CloseOutlined, {
+    className: "close",
+    onClick: function onClick() {
+      return setViewUrl('');
+    }
+  }), /*#__PURE__*/React.createElement("img", {
+    className: "view",
+    src: viewUrl,
+    alt: ""
+  })), viewPdfUrl && /*#__PURE__*/React.createElement("div", {
+    className: "view_pdf"
+  }, /*#__PURE__*/React.createElement("iframe", {
+    src: viewPdfUrl + '#toolbar=0&navpanes=0&scrollbar=0&messages=0&statusbar=0',
+    id: "iframe",
+    frameBorder: "0",
+    height: "95%",
+    width: "100%"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "bottom_btn",
+    style: {
+      background: '#fff',
+      paddingTop: '20px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "previous btn",
+    onClick: function onClick() {
+      return setViewPdfUrl('');
+    }
+  }, "\u8FD4\u56DE\u4FEE\u6539"), /*#__PURE__*/React.createElement("div", {
+    className: "preview btn",
+    onClick: uploadPdf
+  }, "\u786E\u8BA4\u65E0\u8BEF"))));
+};
+DragDropList.displayName = 'DragDropList';
+export default DragDropList;

package/es/components/drag-drop/index.scss

@@ -0,0 +1,130 @@
+.drag_drop {
+  .tip {
+    background: #FFF6E8;
+    padding: 12px;
+    color: #F29655;
+    font-size: 14px;
+    display: flex;
+    gap: 8px;
+  }
+
+  .text {
+    color: #999999;
+    font-size: 14px;
+    margin: 8px 12px;
+  }
+
+  .dragable {
+    padding: 12px;
+    border-radius: 8px;
+    background: #fff;
+    display: flex;
+    gap: 15px;
+    align-items: center;
+    margin: 0 12px;
+    margin-bottom: 12px;
+
+    .img {
+      width: 50px;
+    }
+
+    .info {
+      .name {
+        font-size: 14px;
+        color: #333333;
+        margin-bottom: 25px;
+      }
+
+      .view {
+        color: #1678FF;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+
+    }
+    .top {
+      margin-left: auto;
+      width: 30px;
+      height: 30px;
+      border-radius: 8px;
+      opacity: 1;
+      background: #F7F7F7;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      color: #666666;
+    }
+  }
+
+  .bottom_btn {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding-bottom: 20px;
+
+    .btn {
+      text-align: center;
+      line-height: 40px;
+    }
+
+    .previous {
+      width: 45%;
+      height: 40px;
+      border-radius: 50px;
+      opacity: 1;
+      background: rgb(255, 255, 255);
+      color: rgb(51, 51, 51);
+      border: 1px solid rgb(231, 231, 231);
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .preview {
+      width: 45%;
+      height: 40px;
+      border-radius: 50px;
+      opacity: 1;
+      color: rgb(255, 255, 255);
+      font-size: 16px;
+      font-weight: 500;
+      background: linear-gradient(90deg, rgb(115, 174, 255) 0%, rgb(22, 120, 255) 100%);
+    }
+  }
+  .view_pdf {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9;
+  }
+  .viewImg {
+    background-color: #3333336a;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // z-index: 9999;
+
+    .close {
+      position: absolute;
+      right: 20px;
+      top: 20px;
+      font-size: 30px;
+      color: #fff;
+    }
+
+    .view {
+      width: 100%;
+      margin-top: 40%;
+    }
+  }
+}

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

@@ -129,22 +129,19 @@ export default function CheckPoint(props) {
   }, resIndexData.reviewNotes)))), /*#__PURE__*/React.createElement("div", {
     className: "bottom-btn"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "btn"
-  }, /*#__PURE__*/React.createElement("div", {
+    className: "btn",
     onClick: handleClose
-  }, "\u8FD4\u56DE")), /*#__PURE__*/React.createElement("div", {
-    className: "btn"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", null, "\u8FD4\u56DE")), /*#__PURE__*/React.createElement("div", {
+    className: "btn",
     onClick: function onClick() {
       return handleSwitch('prev');
     }
-  }, "\u4E0A\u4E00\u9879")), /*#__PURE__*/React.createElement("div", {
-    className: "btn btn-blue"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", null, "\u4E0A\u4E00\u9879")), /*#__PURE__*/React.createElement("div", {
+    className: "btn btn-blue",
     onClick: function onClick() {
       return handleSwitch('next');
     }
-  }, "\u4E0B\u4E00\u9879"))), /*#__PURE__*/React.createElement("iframe", {
+  }, /*#__PURE__*/React.createElement("div", null, "\u4E0B\u4E00\u9879"))), /*#__PURE__*/React.createElement("iframe", {
     ref: imgRef,
     id: "file_check_point",
     frameBorder: "0",

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

@@ -1,6 +1,9 @@
 import _Balloon from "@alifd/next/es/balloon";
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-var Tooltip = _Balloon.Tooltip;
+import { useState } from 'react';
+import { getFileExtension } from "./file.js";
+import Merge from "./merge";
 import FileItem from "./item";
 import "./index.scss";
 var MATERIAL_TYPE = {
@@ -43,6 +46,17 @@ var FileList = function FileList(_ref) {
     openLoading = _ref.openLoading,
     closeLoading = _ref.closeLoading,
     valChange = _ref.valChange;
+  var _useState = useState(false),
+    showMerge = _useState[0],
+    setShowMerge = _useState[1];
+  var _useState2 = useState({
+      materialName: '',
+      fileList: [],
+      index: 0,
+      subIndex: 0
+    }),
+    curMerge = _useState2[0],
+    setCurMerge = _useState2[1];
   var convertNumbersToChinese = function convertNumbersToChinese(str) {
     // 定义基础映射关系
     var digitMap = {
@@ -105,6 +119,26 @@ var FileList = function FileList(_ref) {
     console.log('text', sizeText);
     return text + "\u9700\u4E0A\u4F20\u3010" + MATERIAL_TYPE[materialType] + "\u3011\uFF0C\u652F\u6301\u3010" + formatText + "\u3011\u683C\u5F0F\u3002" + sizeText;
   };
+  var mergeFiles = function mergeFiles(name, files, index, subIndex) {
+    var filterList = files.filter(function (file) {
+      return !!file.fileId;
+    });
+    setCurMerge({
+      materialName: name,
+      fileList: filterList,
+      index: index,
+      subIndex: subIndex
+    });
+    setShowMerge(true);
+  };
+  var mergeChange = function mergeChange(value) {
+    console.log('mergeChange', value);
+    for (var i = 0; i < curMerge.fileList.length - 1; i++) {
+      handleChange(undefined, 0, curMerge.index, curMerge.subIndex);
+    }
+    handleChange(value, 0, curMerge.index, curMerge.subIndex);
+    setShowMerge(false);
+  };
   var handleChange = function handleChange(value, fileIndex, index, subIndex) {
     console.log('handleChange', value, fileIndex, index, subIndex);
     // 先找到一级目录
@@ -157,6 +191,22 @@ var FileList = function FileList(_ref) {
     console.log('fileList--------res', fileList);
     valChange(fileList);
   };
+
+  // 如果 文件列表中都是图片，且数量大于1 判断需要合并
+  var judgeNeedMerge = function judgeNeedMerge(files) {
+    console.log('files--------judgeNeedMerge', files);
+    var filterList = files.filter(function (file) {
+      return !!file.fileId;
+    });
+    return filterList.every(function (file) {
+      var fileName = file.fileName;
+      if (!fileName) return false;
+      console.log('fileName----', fileName);
+      var type = getFileExtension(fileName);
+      console.log('type----', type);
+      return ['png', 'jpg', 'jpeg'].includes(type);
+    }) && filterList.length > 1;
+  };
   var trigger = function trigger(child) {
     return /*#__PURE__*/React.createElement("div", {
       className: "tag",
@@ -167,7 +217,9 @@ var FileList = function FileList(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "file_list",
-    style: style
+    style: _extends({}, style, {
+      width: '100%'
+    })
   }, fileList.map(function (item, index) {
     return /*#__PURE__*/React.createElement("div", {
       className: "file_level_one"
@@ -175,7 +227,10 @@ var FileList = function FileList(_ref) {
       className: "file_level_one_title"
     }, /*#__PURE__*/React.createElement("p", {
       className: "name_level_one"
-    }, convertNumbersToChinese(index + 1), item.materialName), !(item.subMaterials && item.subMaterials.length > 0) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    }, convertNumbersToChinese(index + 1), item.materialName), !(item.subMaterials && item.subMaterials.length > 0) && /*#__PURE__*/React.createElement("div", {
+      key: item.fileList.length,
+      className: "title_info"
+    }, /*#__PURE__*/React.createElement("span", {
       className: "required"
     }, "*"), /*#__PURE__*/React.createElement(_Balloon, {
       v2: true,
@@ -185,13 +240,19 @@ var FileList = function FileList(_ref) {
       arrowPointToCenter: true,
       title: "",
       delay: 20
-    }, item.isSmart ? '本材料为智能生成材料，系统将根据您填写的信息自动生成申报材料。' : item.isShareFile ? '本材料为共享材料，数据由大数据共享获取，无需用户自行准备。' : '需要用户自行准备申报材料'))), item.subMaterials && item.subMaterials.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    }, item.isSmart ? '本材料为智能生成材料，系统将根据您填写的信息自动生成申报材料。' : item.isShareFile ? '本材料为共享材料，数据由大数据共享获取，无需用户自行准备。' : '需要用户自行准备申报材料'), judgeNeedMerge(item.fileList || []) && /*#__PURE__*/React.createElement("div", {
+      className: "merge_btn",
+      onClick: function onClick() {
+        return mergeFiles(item.materialName, item.fileList, index);
+      }
+    }, "\u5408\u5E76\u6750\u6599"))), item.subMaterials && item.subMaterials.length > 0 ? /*#__PURE__*/React.createElement("div", {
       className: "file_level_two"
     }, item.subMaterials.map(function (child, subIndex) {
       return /*#__PURE__*/React.createElement("div", {
         className: "file_level_two_item"
       }, /*#__PURE__*/React.createElement("div", {
-        className: "file_level_two_title"
+        className: "file_level_two_title",
+        key: child.fileList.length
       }, /*#__PURE__*/React.createElement("p", {
         className: "name_level_two"
       }, subIndex + 1, "\u3001", child.materialName), /*#__PURE__*/React.createElement("span", {
@@ -204,7 +265,12 @@ var FileList = function FileList(_ref) {
         align: "t",
         title: "",
         delay: 20
-      }, child.isSmart ? '本材料为智能生成材料，系统将根据您填写的信息自动生成申报材料。' : child.isShareFile ? '本材料为共享材料，数据由大数据共享获取，无需用户自行准备。' : '需要用户自行准备申报材料')), /*#__PURE__*/React.createElement("p", {
+      }, child.isSmart ? '本材料为智能生成材料，系统将根据您填写的信息自动生成申报材料。' : child.isShareFile ? '本材料为共享材料，数据由大数据共享获取，无需用户自行准备。' : '需要用户自行准备申报材料'), judgeNeedMerge(child.fileList || []) && /*#__PURE__*/React.createElement("div", {
+        className: "merge_btn",
+        onClick: function onClick() {
+          return mergeFiles(child.materialName, child.fileList, index, subIndex);
+        }
+      }, "\u5408\u5E76\u6750\u6599")), /*#__PURE__*/React.createElement("p", {
         className: "tip"
       }, getTipTextForSubMaterial(item, index, subIndex)), child.fileList.map(function (file, i) {
         return /*#__PURE__*/React.createElement(FileItem, {
@@ -259,6 +325,17 @@ var FileList = function FileList(_ref) {
         }
       });
     })));
+  }), showMerge && /*#__PURE__*/React.createElement(Merge, {
+    fileList: curMerge.fileList,
+    valChange: mergeChange,
+    close: function close() {
+      return setShowMerge(false);
+    },
+    baseUrl: baseUrl,
+    tokenTY: tokenTY,
+    materialName: curMerge.materialName,
+    openLoading: openLoading,
+    closeLoading: closeLoading
   }));
 };
 export default FileList;

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

@@ -1,4 +1,12 @@
 .file_list {
+  .merge_btn {
+    border: 1px solid #1678FF;
+    color: #1678FF;
+    font-size: 13px;
+    border-radius: 4px;
+    padding: 2px 3px;
+    margin-left: 5px;
+  }
   .file_level_one {
     background: #ffffff;
     border-radius: 8px;
@@ -36,6 +44,11 @@
       border-bottom: 1px solid #EEEEEE;
       display: flex;
       align-items: center;
+
+      .title_info {
+        display: flex;
+        align-items: center;
+      }
     }
 
     .file_level_two {