图片预览

src/components/IdentifyFont/IdentifyFont.vue

@@ -5,7 +5,7 @@
         <div v-if="thisStep === 'start'" class="up_box">
           <div class="left_box">
             <div class="upimg_box">
-              <!-- TODO 拖拽设置不生效问题 -->
+              <!-- TODO 拖拽设置不生效问题 ,但是测试那里可以实现拖拽，离大谱-->
               <el-upload
                 v-if="!showImg"
                 class="avatar-uploader"

src/components/ImgPreview/ImgPreview.vue

@@ -1,31 +1,74 @@
 <template>
-  <div class="img-viewer-box">
+  <div class="demo-image__preview">
     <el-image-viewer
-      v-if="state.visible"
-      :url-list="props.imgs"
-      @close="close"
+      v-if="showImageViewer"
+      :url-list="[previewData]"
+      @close="closeImgPreview"
     />
   </div>
 </template>
 
-
-<script  setup>
-import { ref, reactive } from "vue";
-import { useVModel } from "@vueuse/core";
-const props = defineProps();
-const emits = defineEmits();
-const state = reactive({
-  imgList: [],
-  // 相当于是set 与 get
-  visible: useVModel(props, "modelValue", emits),
+<script setup>
+import {
+  ref,
+  computed,
+  reactive,
+  defineComponent,
+  watch,
+  onMounted,
+  defineExpose,
+} from "vue";
+const props = defineProps({
+  showPreview: {
+    type: Boolean,
+    default: false,
+  },
+  previewData: {
+    type: Object,
+    default: () => {},
+  },
 });
-
-// 点击关闭的时候，连同小图一起关闭
-function close() {
-  state.visible = false;
-}
+watch(
+  () => props.showPreview,
+  (newValue) => {
+    // console.log(111);
+    showImageViewer.value = newValue;
+  }
+);
+const url =
+  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg";
+const srcList = [
+  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
+  "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
+  "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
+  "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
+  "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
+  "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
+];
+const previewImg = ref(null);
+const showImageViewer = ref(false); //组件是否显示
+const emit = defineEmits(["closeImgPreview"]);
+const showImg = () => {
+  //预览大图
+  showImageViewer.value = true;
+};
+const closeImgPreview = () => {
+  //必须要这个事件 不然点击右上角关闭按钮没有反应
+  // console.log('sonClose');
+  emit("closeImgPreview");
+};
 </script>
 
-
-<style lang="scss" scoped>
-</style>
+<style scoped>
+.demo-image__error .image-slot {
+  font-size: 30px;
+}
+.demo-image__error .image-slot .el-icon {
+  font-size: 30px;
+}
+.demo-image__error .el-image {
+  width: 100%;
+  height: 200px;
+}
+</style>

src/views/myfile/MyFile.vue

@@ -409,14 +409,14 @@
                     </template>
                 </el-dialog>
             </div>
+    <ImgPreview  :previewData="previewData" :showPreview="showPreview" @closeImgPreview="closeImgPreview"></ImgPreview>
         </div>
     </div>
     <!-- 图片预览 -->
-    <!-- <ImgPreview ></ImgPreview> -->
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref, toRaw } from 'vue'
 import myfile from '../../api/myfile/myfile'
 import space from '../../api/space/space'
 import documents from '../../api/document/document'
@@ -434,6 +434,8 @@ import grayRight from "../../assets/images/grayRight.png"
 import sort from '../../assets/images/sort.png'
 import squre from '../../assets/images/squre.png'
 import { ElMessage } from 'element-plus'
+import ImgPreview from '@/components/ImgPreview/ImgPreview.vue'
+import { preview } from "@/api/common/common.js";
 export default {
     setup() {
         let editOnline = ref(true)
@@ -611,6 +613,8 @@ export default {
         let fileNameChange = ref(false)
         let fileMenu = ref([])
         let collectList = ref([])
+        const showPreview = ref(false)//控制图片预览组件显示
+        const previewData = ref()//需要预览的文件的数据
         // 获取所有文件
         function getAll() {
             myfile.getAllFileMenu({ dirId: folderId.value }).then(res => {
@@ -700,6 +704,7 @@ export default {
         }
         // 文件名表格每一行点击事件
         function handleRowClick(row) {
+            console.log('row = ',toRaw(row));
             clickRowId.value = row.docId
             copyDirId.value = row.dirId
             copySpaceId.value = row.spaceId
@@ -726,7 +731,7 @@ export default {
             this.askTo = false
         }
         //mouse弹框
-        function chooseSet(row, num) {
+      async function chooseSet(row, num) {
             if (row.name == '在线编辑' || row.name == '协作') {
                 cliCC.value = true
             } else {
@@ -786,6 +791,14 @@ export default {
             if (row.name === '在线编辑') {
                 editOnline.value = false
             }
+            if (row.name === '历史版本') {
+                console.log('row=', toRaw(row));
+                console.log('copyFileId',copyFileId.value);//文件id
+                showPreview.value = true
+                const res = await preview(copyFileId.value)
+                previewData.value = URL.createObjectURL(res)
+                console.log('res',res);
+            }
         }
         function chooseSet1() {
             transferModal.value = true
@@ -1089,6 +1102,11 @@ export default {
                 this.getAll()
             }
         }
+        //关闭图片预览事件
+        const closeImgPreview = ()=>{
+            // console.log('close');
+            showPreview.value = false
+        }
         return {
             allBag,
             folderList,//文件夹的数据
@@ -1193,6 +1211,9 @@ export default {
             editOnline,//在线编辑
             copyParentId,
             getAllFolder,
+            showPreview,//控制图片预览
+            closeImgPreview,//关闭预览事件
+            previewData,//预览文件数据
         }
     },
     created() {
@@ -1210,6 +1231,7 @@ export default {
     components: {
         BreadMenu,
         FileEdit,
+        ImgPreview
     },
 }
 </script>

src/views/search/index.vue

@@ -94,9 +94,9 @@
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="dir.dirName" label="所属空间" width="100" />
+            <el-table-column prop="space.spaceName" label="所属空间" width="180" />
             <el-table-column prop="createTime" label="时间" width="200" />
-            <el-table-column prop="fileType" label="类型" width="180" />
+            <el-table-column prop="fileType" label="类型" width="80" />
             <el-table-column prop="fileSize" label="大小" width="160">
               <template #default="scope">
                 <div>{{ scope.row.fileSize }}KB</div>
@@ -105,7 +105,7 @@
             <el-table-column prop="dir.dirPath" label="文件夹" width="180">
               <template #default="scope">
                 <div class="folder">
-                  {{ scope.row.dir.dirPath }}
+                  {{ scope.row.dir?scope.row.dir.dirPath:'' }}
                 </div>
               </template>
             </el-table-column>