新增扫描文件合并下载功能

src/api/common/common.js

@@ -17,4 +17,4 @@ export function preview(data) {
         },
         responseType: 'blob' //这个最重要，一定不要忘记
     })
-}
+}

src/api/document/document.js

@@ -74,6 +74,39 @@ function matches(data) {
         data,
     })
 }
+function download(docid,filename){
+    if(filename==null) filename = Date.now()
+    request({
+        url:`/biz/info/download/${docid}?time=`+Date.now(),
+        timeout: 10*60*1000,//配置超时时间
+        responseType: 'blob',
+        headers:{
+              'Content-Type':'application/json',
+        },
+        method:"get"
+      }).then((res)=>{
+        var reader = new FileReader();
+        reader.onloadend = function (event) {
+          //event 就是你要的返回内容
+          //因为返回的报错格式是字符串，手动转换成对象，转换成功表示请求失败
+          //转换失败就意味着你拿到的result是文件流，那么直接手动下载就好
+          try {
+            let data = JSON.parse(event.target.result);
+          } catch (err) {
+            const link = document.createElement("a"); // 创建a标签
+            let blob = new Blob([res]);
+            link.style.display = "none";
+            link.href = URL.createObjectURL(blob); // 创建下载的链接
+            link.setAttribute("download", filename); // 给下载后的文件命名
+            document.body.appendChild(link);
+            link.click(); // 点击下载
+            document.body.removeChild(link); //  完成移除元素
+            window.URL.revokeObjectURL(link.href); // 释放blob对象
+          }
+        };
+        reader.readAsText(res);
+      })
+}
 export default {
     getALLdocument,
     addDocument,
@@ -84,5 +117,6 @@ export default {
     getALLdocumentByType,
     editFolerDocument,
     matches,
-    addDocumentByTemp
+    addDocumentByTemp,
+    download
 }

src/components/DropFile/DropFile.vue

@@ -2,12 +2,12 @@
   <div>
     <el-dialog
       v-model="props.showFile"
-      width="980px"
+      width="990px"
       top="20vh"
       title="文件排序"
       @close="close"
     >
-      <div>拖动图片可改变其位置顺序</div>
+      <div>拖动图片可改变其位置顺序(合并顺序为从左到右，从上到下)</div>
       <div class="main">
         <!-- 盒子区域 -->
         <div class="bigBox" id="bigBox">
@@ -116,7 +116,7 @@ const onCloseImgPreview=()=>{
     height: 220px;
     border: 1px solid #c1cce3;
     box-sizing: border-box;
-    margin-bottom: 16px;
+    margin: 4px;
     border-radius: 4px 4px 4px 4px;
     box-shadow: 0px 2px 10px 1px rgba(199, 203, 216, 0.4);
     position: relative;

src/components/MargeFile/MargeImgFile.vue

@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <el-dialog
+      v-model="props.showFile"
+      width="990px"
+      top="20vh"
+      title="合并扫描文件"
+      @close="close"
+    >
+      <el-form label-width="120px">
+          <el-form-item label="* 新文件名称">
+            <el-input v-model="newfileName" placeholder="请输入合并后的文件名" maxlength="20"/>
+          </el-form-item>
+      </el-form>
+      <div style="padding-left: 20px;">拖动图片可改变其位置顺序(合并顺序为从左到右，从上到下)</div>
+      <div class="main">
+        <!-- 盒子区域 -->
+        <div class="margefile_bigBox" id="margefile_bigBox">
+          <div v-for="item in listArr" :key="item" class="one_box" @click="onshowpreview(item)">
+            <img :src="wangzhi + item.path" alt="" title="点击可查看大图"/>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="close">取消</el-button>
+          <el-button type="primary" @click="sureDrop"> 完成 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+  <ImgPreview
+      :previewData="previewData"
+      :copyFileType="copyFileType"
+      :showPreview="showPreview"
+      @closeImgPreview="onCloseImgPreview"
+  ></ImgPreview>
+</template>
+
+<script setup>
+import ImgPreview from "@/components/ImgPreview/ImgPreview.vue";
+import {
+  ref,
+  computed,
+  reactive,
+  defineComponent,
+  watch,
+  toRaw,
+  onMounted,
+  defineExpose,
+  onDeactivated,
+} from "vue";
+import Sortable from "sortablejs";
+
+const wangzhi = import.meta.env.VITE_APP_BASE_API;
+const listArr = ref([]);
+const baseArr = ref([]);
+const newfileName = ref('')
+const props = defineProps({
+  showFile: {
+    type: Boolean,
+    default: false,
+  },
+  copyList: {
+    type: Object,
+    default: {},
+  },
+});
+const emit = defineEmits(["closeshowFile","changeList"]);
+const rowDrop = () => {
+  const el = document.getElementById("margefile_bigBox"); //找到想要拖拽的那一列
+  Sortable.create(el, {
+    //结束拖拽事件
+    async onEnd({ newIndex, oldIndex }) {
+      const newItem = listArr.value[newIndex];
+      const oldItem = listArr.value[oldIndex];
+      listArr.value[newIndex] = oldItem;
+      listArr.value[oldIndex] = newItem;
+    //   console.log("2copyList.value", listArr.value);
+    },
+  });
+};
+const close = () => {
+  emit("closeshowFile");
+};
+const sureDrop = ()=>{
+  emit('changeList',newfileName.value,listArr.value)
+}
+onMounted(() => {
+  listArr.value = props.copyList;
+  baseArr.value = props.copyList;
+
+  setTimeout(() => {
+    rowDrop();
+  }, 500);
+});
+
+const copyFileType = ref('.png');
+let showPreview = ref(false);
+let previewData = ref();
+const onshowpreview=(img)=>{
+  showPreview.value = true;
+  previewData.value = wangzhi+img.path;
+}
+const onCloseImgPreview=()=>{
+  showPreview.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+.margefile_bigBox {
+  margin-top: 16px;
+  width: 100%;
+  padding: 0 16px;
+  max-height: 700px;
+  display: flex;
+  flex-wrap: wrap;
+  // justify-content: space-between;
+  overflow-y: auto;
+  .one_box {
+    width: 300px;
+    height: 220px;
+    border: 1px solid #c1cce3;
+    box-sizing: border-box;
+    margin: 4px;
+    border-radius: 4px 4px 4px 4px;
+    box-shadow: 0px 2px 10px 1px rgba(199, 203, 216, 0.4);
+    position: relative;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+    }
+    .top_check {
+      position: absolute;
+      top: -3%;
+      right: 1%;
+    }
+  }
+}
+
+</style>

src/components/ScanFile/ScanFile.vue

@@ -12,11 +12,14 @@
         <!-- 头部的总计和移动按钮 -->
         <div class="statistics">
           <el-checkbox v-model="checkedAll" @change="checkAllChange"
-            >共{{ props.scannerFiles.length }}项</el-checkbox
+            >共{{ copyList.length }}项</el-checkbox
           >
           <div class="" v-if="copyList.length>0">
             <el-button @click="toDownFile" style="margin-right: 10px;">
-              <img src="@/assets/images/download.png" alt="" style="width: 22px; height: 22px;" />&nbsp; 下载
+              <img src="@/assets/images/download.png" alt="" style="width: 22px; height: 22px;" />&nbsp; 单页下载
+            </el-button>
+            <el-button @click="toMargeDownFile" style="margin-right: 10px;">
+              <img src="@/assets/images/download.png" alt="" style="width: 22px; height: 22px;" />&nbsp; 合并下载
             </el-button>
             <el-button color="#2E6BC8" @click="toMoveMy" style="margin-right: 10px;">
               <img src="@/assets/images/folder_white.png" alt="" />&nbsp; 移动到我的空间
@@ -48,6 +51,7 @@
       :showPreview="showPreview"
       @closeImgPreview="onCloseImgPreview"
   ></ImgPreview>
+  <MargeImg v-if="showMargeDownDlg" :showFile="showMargeDownDlg" :copyList="margelistArr" @closeshowFile="closeMargeFileDlg" @changeList="MargeFileDlgOk"></MargeImg>
 </template>
 
 <script setup>
@@ -62,8 +66,11 @@ import {
   defineExpose,
   onDeactivated,
 } from "vue";
-
+import { claimFile } from "@/api/scanner/info.js";
+import request from '@/utils/request'
+import documents from "@/api/document/document";
 import ImgPreview from "@/components/ImgPreview/ImgPreview.vue";
+import MargeImg from "@/components/MargeFile/MargeImgFile.vue";
 import Sortable from "sortablejs";
 import { ElMessage } from "element-plus";
 
@@ -77,7 +84,8 @@ const props = defineProps({
     default: () => [],
   },
 });
-
+const showMargeDownDlg =ref(false)
+const margelistArr =ref([])
 const checkedAll = ref(false); //是否全选
 const copyList = ref(props.scannerFiles);
 const total = ref(333); //总计数量
@@ -129,7 +137,7 @@ const checkAllChange = () => {
 const toSave = () => {
   // console.log("copyList", copyList.value);
   if (!copyList.value.some((item) => item.checked == true)) {
-    return ElMessage({ message: "请先勾选文件", type: "error" });
+    return ElMessage({ message: "请先勾选至少1个文件", type: "error" });
   }
   const arr = [];
   copyList.value.forEach((item) => {
@@ -139,21 +147,156 @@ const toSave = () => {
   });
   emit("saveScanFile", arr);
 };
-const toDownFile=()=>{
+//移动到我的空间
+const toMoveMy= async ()=>{
+  const arr = [];
+  copyList.value.forEach((item) => {
+    if (item.checked) {
+      arr.push(item.q);
+    }
+  });
+  if(arr.length==0){
+    return ElMessage({ message: "请先勾选至少1个文件", type: "error" });
+  }
+  const topdir = await documents.getTop("3")
+  const query = {
+    dirId: topdir.dirId,
+    merge: false,
+    name: '扫描文件_'+Date.now(),
+    q: arr,
+    spaceId: topdir.spaceId,
+  };
+  const res = await claimFile(query);
+  if (res.code == 200) {
+    ElMessage({
+      type: "success",
+      message: "移动成功",
+    });
+    //更新文件列表
+    let hasFiles=[];
+    copyList.value.forEach((item) => {
+      if (!arr.includes(item.q)) {
+        hasFiles.push(item);
+      }
+    });
+    copyList.value = hasFiles
+    props.scannerFiles = hasFiles
+  }else{
+    console.log(res)
+    ElMessage({
+      type: "error",
+      message: "文件移动失败",
+    });
+  }
+  
+}
+//打开合并下载窗口
+const toMargeDownFile=()=>{
+  const arr = [];
+  copyList.value.forEach((item) => {
+    if (item.checked) {
+      arr.push(toRaw(item));
+    }
+  });
+  if(arr.length<2){
+    return ElMessage({ message: "请先勾选至少2个文件", type: "error" });
+  }
+  showMargeDownDlg.value=true
+  margelistArr.value = arr
+}
+//关闭合并下载窗口
+const closeMargeFileDlg=()=>{
+  showMargeDownDlg.value=false
+}
+//合并下载
+const MargeFileDlgOk=async(newfileName,obj)=>{
+  showMargeDownDlg.value=false
+  console.log(obj)
+  var arr=[]
+  obj.forEach((item)=>{
+    arr.push(item.q)
+  })
+  const topdir = await documents.getTop("3")
+  const query = {
+    dirId: topdir.dirId,
+    merge: true,
+    name: newfileName,
+    q: arr,
+    spaceId: topdir.spaceId,
+  };
+  const res = await claimFile(query);
+  if (res.code == 200) {
+    var i=0;
+    res.data.forEach((item)=>{
+      documents.download(item,newfileName+".pdf")
+      i++;
+    })
+    //更新文件列表
+    let hasFiles=[];
+    copyList.value.forEach((item) => {
+      if (!arr.includes(item.q)) {
+        hasFiles.push(item);
+      }
+    });
+    copyList.value = hasFiles
+    props.scannerFiles = hasFiles    
+  }else{
+    console.log(res)
+    ElMessage({
+      type: "error",
+      message: "文件下载失败",
+    });
+  }
+}
+const toDownFile=  async()=>{
   if (!copyList.value.some((item) => item.checked == true)) {
-    return ElMessage({ message: "请先勾选文件", type: "error" });
+    return ElMessage({ message: "请先勾选至少1个文件", type: "error" });
   }
+  var arr=[];
   copyList.value.forEach((item) => {
     if (item.checked) {
+      arr.push(item.q)
+      /*
       const img=document.createElement("a");
       img.href=wangzhi+item.path;
       img.download=item.name;
       document.body.appendChild(img)
       img.click();
       document.body.removeChild(img)
+      */
     }
   });
-
+  const topdir = await documents.getTop("3")
+  const query = {
+    dirId: topdir.dirId,
+    merge: false,
+    name: '扫描文件_'+Date.now(),
+    q: arr,
+    spaceId: topdir.spaceId,
+  };
+  const res = await claimFile(query);
+  if (res.code == 200) {
+    var i=0;
+    res.data.forEach((item)=>{      
+      documents.download(item,copyList.value[i].name)
+      i++;
+    })
+    //更新文件列表
+    let hasFiles=[];
+    copyList.value.forEach((item) => {
+      if (!arr.includes(item.q)) {
+        hasFiles.push(item);
+      }
+    });
+    copyList.value = hasFiles
+    props.scannerFiles = hasFiles    
+  }else{
+    console.log(res)
+    ElMessage({
+      type: "error",
+      message: "文件下载失败",
+    });
+  }
 };
 const rowDrop = () => {
   const el = document.getElementById("bigBox"); //找到想要拖拽的那一列
@@ -220,7 +363,7 @@ const onCloseImgPreview=()=>{
     border: 1px solid #c1cce3;
     box-sizing: border-box;
     margin-bottom: 16px;
-    margin-right: 16px;
+    margin-right: 8px;
     border-radius: 4px 4px 4px 4px;
     box-shadow: 0px 2px 10px 1px rgba(199, 203, 216, 0.4);
     position: relative;

src/layout/components/DefaultPage/DefaultPage.vue

@@ -536,7 +536,7 @@ const scannerFile = async () => {
   const res = await selectInfo();
   scannerList.value = res.rows;
   checkScanner.value = true;
-  checkScanId.value = null;
+  checkScanId.value = scannerList.value.length>0 ? scannerList.value[0].scannerId : null;
   // console.log('scanner',res);
 };
 // 选择扫描仪
@@ -1072,7 +1072,7 @@ onMounted(() => {
   z-index: 10000000;
 }
 .checkScan {
-  background-color: #e6eaee !important;
+  background-color: #cbe5ff !important;
   border-bottom: 1px solid #9b9bdf;
 }
 .Onescan {
@@ -1082,6 +1082,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   background-color: #f1f1f7;
+  margin-bottom: 5px;
 }
 ::v-deep .el-upload-dragger {
   display: flex;

src/layout/components/TopMenu/TopMenu.vue

@@ -274,7 +274,7 @@ const scannerFile = async () => {
   const res = await selectInfo();
   scannerList.value = res.rows;
   checkScanner.value = true;
-  checkScanId.value = null;
+  checkScanId.value = scannerList.value.length>0 ? scannerList.value[0].scannerId : null;
   // console.log('scanner',res);
 };
 // 选择扫描仪
@@ -520,7 +520,7 @@ watchEffect(async () => {
   cursor: pointer;
 }
 .checkScan {
-  background-color: #e6eaee !important;
+  background-color: #cbe5ff !important;
   border-bottom: 1px solid #9b9bdf;
 }
 .Onescan {
@@ -530,6 +530,7 @@ watchEffect(async () => {
   display: flex;
   align-items: center;
   background-color: #f1f1f7;
+  margin-bottom: 5px;
 }
 .hand {
   cursor: pointer;