优化扫描仪模块部分功能

src/components/DropFile/DropFile.vue

@@ -7,11 +7,12 @@
       title="文件排序"
       @close="close"
     >
+      <div>拖动图片可改变其位置顺序</div>
       <div class="main">
         <!-- 盒子区域 -->
         <div class="bigBox" id="bigBox">
-          <div v-for="item in listArr" :key="item" class="one_box">
-            <img :src="wangzhi + item.path" alt="" />
+          <div v-for="item in listArr" :key="item" class="one_box" @click="onshowpreview(item)">
+            <img :src="wangzhi + item.path" alt="" title="点击可查看大图"/>
           </div>
         </div>
       </div>
@@ -23,9 +24,16 @@
       </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,
@@ -80,6 +88,17 @@ onMounted(() => {
     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>
@@ -104,7 +123,7 @@ onMounted(() => {
     img {
       width: 100%;
       height: 100%;
-      object-fit: cover;
+      object-fit: fill;
     }
     .top_check {
       position: absolute;

src/components/ImgPreview/ImgPreview.vue

@@ -67,7 +67,6 @@ const props = defineProps({
 watch(
   () => props.showPreview,
   (newValue) => {
-    // console.log(111);
     showImageViewer.value = newValue;
     if(newValue == false){
       // console.log('watch',video.value);
@@ -99,7 +98,6 @@ const closeImgPreview = () => {
     const videoDom = document.getElementsByTagName("video")[0];
     videoDom.pause()
   }
-
   // video.value.pause();
   // audio.value.pause();
   emit("closeImgPreview");

src/components/ScanFile/ScanFile.vue

@@ -4,7 +4,7 @@
       v-model="props.openScan"
       width="964px"
       top="20vh"
-      title="扫描文档"
+      title="设备已扫描文档"
       :close-on-click-modal="false"
       @close="closeOpen"
     >
@@ -14,16 +14,23 @@
           <el-checkbox v-model="checkedAll" @change="checkAllChange"
             >共{{ props.scannerFiles.length }}项</el-checkbox
           >
-          <div class="">
+          <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; 下载
+            </el-button>
+            <el-button color="#2E6BC8" @click="toMoveMy" style="margin-right: 10px;">
+              <img src="@/assets/images/folder_white.png" alt="" />&nbsp; 移动到我的空间
+            </el-button>
             <el-button color="#2E6BC8" @click="toSave">
-              <img src="@/assets/images/folder_white.png" alt="" />&nbsp; 移动到
+              <img src="@/assets/images/folder_white.png" alt="" />&nbsp; 移动到..
             </el-button>
           </div>
         </div>
         <!-- 盒子区域 -->
         <div class="bigBox" id="bigBox">
-          <div v-for="(item, index) in copyList" :key="item" class="one_box">
-            <img :src="wangzhi + item.path" alt="" />
+          <div v-if="copyList.length==0" style="margin-bottom: 20px;">请先在该扫描仪设备上进行文件扫描，并采用FTP上传方式。</div>
+          <div v-if="copyList.length>0" v-for="(item, index) in copyList" :key="item" class="one_box">
+            <img :src="wangzhi + item.path" alt="" title="点击可查看大图" @click="onshowpreview(item)"/>
             <div class="top_check">
               <el-checkbox
                 :checked="fileArr.some((par) => par == item.q)"
@@ -35,6 +42,12 @@
       </div>
     </el-dialog>
   </div>
+  <ImgPreview
+      :previewData="previewData"
+      :copyFileType="copyFileType"
+      :showPreview="showPreview"
+      @closeImgPreview="onCloseImgPreview"
+  ></ImgPreview>
 </template>
 
 <script setup>
@@ -49,8 +62,11 @@ import {
   defineExpose,
   onDeactivated,
 } from "vue";
+
+import ImgPreview from "@/components/ImgPreview/ImgPreview.vue";
 import Sortable from "sortablejs";
 import { ElMessage } from "element-plus";
+
 const props = defineProps({
   openScan: {
     type: Boolean,
@@ -72,29 +88,6 @@ const emit = defineEmits(["closeOpen", "saveScanFile"]);
 const closeOpen = () => {
   emit("closeOpen");
 };
-// const checkChange = (item,index) => {
-//   console.log('item',item);
-//   console.log('index',index);
-//   let arr = fileArr.value;
-//   if (arr.some((par) => par == item.q)) {
-//     arr = arr.filter((par) => par != item.q);
-//   } else {
-//     arr.push(item.q);
-//   }
-//   // if (arr.some((par) => par == item.q)) {
-//   //   arr = arr.filter((par) => par != item.q);
-//   // } else {
-//   //   arr.push({q:item.q,index:index});
-//   // }
-//   // 判断全选
-//   if (arr.length == props.scannerFiles.length) {
-//     checkedAll.value = true;
-//   } else {
-//     checkedAll.value = false;
-//   }
-//   fileArr.value = JSON.parse(JSON.stringify(arr));
-//   console.log("fileArr", toRaw(fileArr.value));
-// };
 const checkChange = (item, index) => {
   // console.log("item", item);
   // console.log("index", index);
@@ -144,10 +137,24 @@ const toSave = () => {
       arr.push(toRaw(item));
     }
   });
-  // console.log('arr',arr);
-  // console.log('chengeC',copyList.value);
   emit("saveScanFile", arr);
 };
+const toDownFile=()=>{
+  if (!copyList.value.some((item) => item.checked == true)) {
+    return ElMessage({ message: "请先勾选文件", type: "error" });
+  }
+  copyList.value.forEach((item) => {
+    if (item.checked) {
+      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 rowDrop = () => {
   const el = document.getElementById("bigBox"); //找到想要拖拽的那一列
   Sortable.create(el, {
@@ -172,6 +179,17 @@ onMounted(async () => {
     // console.log("copyList.value", copyList.value);
   }, 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>
@@ -194,7 +212,7 @@ onMounted(async () => {
   max-height: 700px;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+  //justify-content: space-between;
   overflow-y: auto;
   .one_box {
     width: 300px;
@@ -202,13 +220,14 @@ onMounted(async () => {
     border: 1px solid #c1cce3;
     box-sizing: border-box;
     margin-bottom: 16px;
+    margin-right: 16px;
     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: cover;
+      object-fit: fill;
     }
     .top_check {
       position: absolute;
@@ -217,6 +236,9 @@ onMounted(async () => {
     }
   }
 }
+.el-checkbox__inner{
+  border: 1px solid #868de1 !important;
+}
 :deep(.el-dialog__body) {
   padding: 0 !important;
 }

src/layout/components/DefaultPage/DefaultPage.vue

@@ -208,12 +208,14 @@
   <!-- 可用扫描仪信息 -->
   <div>
     <el-dialog v-model="checkScanner" title="扫描仪" width="30%">
-      <div
+      <div v-if="scannerList.length==0">请联系管理员先添加扫描仪设备</div>
+      <div v-if="scannerList.length>0" style="margin-bottom: 10px;">请选择扫描仪设备</div>
+      <div v-if="scannerList.length>0"
         v-for="item in scannerList"
         :key="item.scannerId"
         @click="checkScanFn(item)"
         id="Onescan"
-        :class="{ checkScan: item.scannerId == checkScanId }"
+        :class="item.scannerId == checkScanId ?'hand Onescan checkScan':'hand Onescan'"
       >
         <img src="@/assets/images/scanImg.png" alt="" />
         {{ item.scannerName }}
@@ -221,7 +223,7 @@
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="closeCheckScanner">取消</el-button>
-          <el-button type="primary" @click="sureScaner">确认</el-button>
+          <el-button v-if="scannerList.length>0" type="primary" @click="sureScaner">确认</el-button>
         </span>
       </template>
     </el-dialog>
@@ -1070,14 +1072,16 @@ onMounted(() => {
   z-index: 10000000;
 }
 .checkScan {
-  background-color: #f5f7f9;
+  background-color: #e6eaee !important;
+  border-bottom: 1px solid #9b9bdf;
 }
-#Onescan {
+.Onescan {
   height: 48px;
   line-height: 48px;
   font-size: 14px;
   display: flex;
   align-items: center;
+  background-color: #f1f1f7;
 }
 ::v-deep .el-upload-dragger {
   display: flex;

src/layout/components/TopMenu/TopMenu.vue

@@ -107,12 +107,14 @@
   <!-- 可用扫描仪信息 -->
   <div>
     <el-dialog v-model="checkScanner" title="扫描仪" width="30%">
-      <div
+      <div v-if="scannerList.length==0">请联系管理员先添加扫描仪设备</div>
+      <div v-if="scannerList.length>0" style="margin-bottom: 10px;">请选择扫描仪设备</div>
+      <div v-if="scannerList.length>0"
         v-for="item in scannerList"
         :key="item.scannerId"
         @click="checkScanFn(item)"
         id="Onescan"
-        :class="{ checkScan: item.scannerId == checkScanId }"
+        :class="checkScanId==item.scannerId?'hand Onescan checkScan':'hand Onescan'"
       >
         <img src="@/assets/images/scanImg.png" alt="" />
         {{ item.scannerName }}
@@ -120,7 +122,7 @@
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="closeCheckScanner">取消</el-button>
-          <el-button type="primary" @click="sureScaner">确认</el-button>
+          <el-button v-if="scannerList.length>0" type="primary" @click="sureScaner">确认</el-button>
         </span>
       </template>
     </el-dialog>
@@ -163,6 +165,7 @@ import { listInfo, selectInfo, getFileByScanerId } from "@/api/scanner/info.js";
 const websoctStore = useWebsoctStore();
 const LOGO = import.meta.env.VITE_APP_LOGO;
 const TITLE = import.meta.env.VITE_APP_TITLE;
+const activeScannerClass=ref('hand Onescan')
 const menuList = ref([
   {
     name: "部门文件",
@@ -517,14 +520,16 @@ watchEffect(async () => {
   cursor: pointer;
 }
 .checkScan {
-  background-color: #f5f7f9;
+  background-color: #e6eaee !important;
+  border-bottom: 1px solid #9b9bdf;
 }
-#Onescan {
+.Onescan {
   height: 48px;
   line-height: 48px;
   font-size: 14px;
   display: flex;
   align-items: center;
+  background-color: #f1f1f7;
 }
 .hand {
   cursor: pointer;

vite.config.js

@@ -45,25 +45,15 @@ export default defineConfig(({
 			proxy: {
 				// https://cn.vitejs.dev/config/#server-proxy
 				'/dev-api': {
-					// target: 'http://192.168.1.12:8080/',
-					// target: 'http://192.168.1.88:8080/',
-					//target: 'http://192.168.1.88:8080/',
 					target: 'http://192.168.101.99:8080/',
-					// target: 'http://192.168.1.11:8080/',
-					// target: 'http://localhost:8080/',
-					// target:'http://192.168.1.28:8080/',
 					//target:'http://8.142.173.95:19527',
 					changeOrigin: true,
 					rewrite: (p) => p.replace(/^\/dev-api/, '')
 				},
 				//websocket代理
 				'/websocket': {
-					// target:'ws://localhost:8080/websocket',
-					// target:'ws://192.168.1.12:8080/websocket',
-					//target:'ws://192.168.1.88:8080/websocket',
 					//target:'ws://8.142.173.95:19527/websocket',
 					target: 'ws://192.168.101.99:8080/websocket',
-					// target:'ws://192.168.1.11:8080/websocket',
 					changeOrigin: true,
 					rewrite: (p) => p.replace(/^\/websocket/, '')
 				}