扫描静态组件

src/components/ScanFile/ScanFile.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <el-dialog
+      v-model="props.openScan"
+      width="964px"
+      top="20vh"
+      title="扫描文档"
+      @close="closeOpen"
+    >
+      <div class="main">
+        <!-- 头部的总计和移动按钮 -->
+        <div class="statistics">
+          <el-checkbox v-model="checkedAll">共{{ total }}项</el-checkbox>
+          <div class="">
+            <el-button color="#2E6BC8">
+              <img src="@/assets/images/folder_white.png" alt="" />&nbsp; 移动到
+            </el-button>
+          </div>
+        </div>
+        <!-- 盒子区域 -->
+        <div class="bigBox">
+          <div v-for="item in 10" :key="item" class="one_box">
+            <img src="@/assets/images/bigLogin.png" alt="" />
+            <div class="top_check">
+              <el-checkbox ></el-checkbox>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  reactive,
+  defineComponent,
+  watch,
+  toRaw,
+  onMounted,
+  defineExpose,
+  onDeactivated,
+} from "vue";
+const props = defineProps({
+  openScan: {
+    type: Boolean,
+    default: false,
+  },
+});
+const checkedAll = ref(false); //是否全选
+const total = ref(333); //总计数量
+const emit = defineEmits(["closeOpen"]);
+const closeOpen = () => {
+  emit("closeOpen");
+};
+</script>
+
+<style lang="scss" scoped>
+.main {
+  width: 100%;
+}
+.statistics {
+  width: 100%;
+  height: 50px;
+  border-bottom: 1px solid #c1cce3;
+  padding: 0 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.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: 420px;
+    border: 1px solid #c1cce3;
+    box-sizing: border-box;
+    margin-bottom: 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;
+    }
+    .top_check {
+      position: absolute;
+      top: 5%;
+      right: 10%;
+    }
+  }
+}
+:deep(.el-dialog__body) {
+  padding: 0 !important;
+}
+</style>

src/views/myfile/MyFile.vue

@@ -437,6 +437,8 @@
     <div v-loading.fullscreen="loadingPreview" v-if="loadingPreview" class="lodingBox"></div>
     <!-- 新增文档 -->
     <AddFile v-if="newAdd" :newAdd="newAdd" @threeBe="threeBe" :clickFileData="clickFileData"></AddFile>
+    <!-- 扫描文档 -->
+    <ScanFile v-if="openScan" :openScan="openScan" @closeOpen="closeOpen"></ScanFile>
 </template>
 
 <script>
@@ -471,6 +473,7 @@ import level3 from "@/assets/images/level3.png";
 import level4 from "@/assets/images/level4.png";
 import { ElMessage, ElLoading } from 'element-plus'
 import ImgPreview from '@/components/ImgPreview/ImgPreview.vue'
+import ScanFile from '@/components/ScanFile/ScanFile.vue'
 import PathLabel from '@/components/PathLabel/index.vue'
 import { preview } from "@/api/common/common.js";
 import historyList from "@/components/historyList/index.vue"; //选择文件发送的列表，历史版本
@@ -690,6 +693,7 @@ export default {
         ])
          //控制宫格展示
         const isList = ref(false); //控制显示方式
+        const openScan = ref(false)//控制扫描文档显示
         const changeShow = (fileGrids) => {
         //   isList.value = !isList.value;
         //   fileGrid.value = fileGrids
@@ -1253,7 +1257,10 @@ export default {
         }
         function getMenu(row, num,canDo) {
             if (row.name === '删除') {
-                if(!canDo) return
+                if(!canDo){
+                    // openScan.value = true
+                    return
+                } 
                 const datas = []
                 const isFile = ref(false)
                 delMoreFile.value.map(i => {//多选删除
@@ -1497,6 +1504,9 @@ export default {
             copyFolderName.value = nam
             copyFileName.value = spa
         }
+        const closeOpen = ()=>{
+            openScan.value = false
+        }
         //历史版本
         const forwardTreeData = reactive({ data: {} });
         const historycopyRow = ref({})
@@ -2126,7 +2136,9 @@ export default {
             pathLabelData,
             backTopPath,
             maxFileSize,
-            upBefore
+            upBefore,
+            openScan,
+            closeOpen
         }
     },
     watch: {
@@ -2146,7 +2158,8 @@ export default {
         PlaceGridFolder,
         PalaceGridFile,
         inputPassword,
-        PathLabel
+        PathLabel,
+        ScanFile
     },
 }