更新

src/views/partner/file/file.vue

@@ -73,7 +73,8 @@
         </div>
         <div class="bjandshanchu">
           <div class="one" @click="handleE(item)">编辑</div>
-          <div class="two" v-if="item.type == '2'" @click="downloadFile(item)">下载</div>
+          <!--          <div class="two" v-if="item.type == '2'" @click="downloadFile(item)">下载</div>-->
+          <div class="two" v-if="item.type == '2'" @click="preview(item)">预览</div>
           <div class="two" @click="clickStaff(item.id)" v-hasPermi="['inspectionFile:inspectionFilePermis:edit']">
             分配权限
           </div>
@@ -99,6 +100,41 @@
       </div>
     </el-dialog>
 
+    <el-dialog title="文件预览" :visible.sync="isShowFile" width="70%" append-to-body>
+      <div class="preview-container">
+        <!-- 左侧预览区域 -->
+        <iframe
+          :src="fileUrl"
+          frameborder="0"
+          class="preview-iframe" v-if="!isImage"
+        >
+        </iframe>
+
+        <image-preview class="preview-iframe" :src="imageUrl + selectFile.filePath"  v-else></image-preview>
+
+        <!-- 右侧文件列表 -->
+        <div class="file-list">
+          <el-table
+            :data="inspectionFileList"
+            height="100%"
+            @row-click="handleFileClick"
+            :row-class-name="getRowClassName"> <!-- 动态绑定行样式 -->
+            <el-table-column
+              prop="fileName"
+              label="文件列表"
+              min-width="180">
+              <template #default="{row}">
+                <div class="file-item">
+                  <i :class="row.type === '1' ? 'el-icon-folder' : 'el-icon-document'"></i>
+                  {{ row.fileName }}
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </el-dialog>
+
     <el-drawer
       title="修改记录"
       :visible.sync="drawer"
@@ -213,6 +249,7 @@ export default {
   data() {
     return {
       uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/uploadDetail",
+      imageUrl: process.env.VUE_APP_FILE_API,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -231,6 +268,9 @@ export default {
       inspectionFileList: [],
       // 弹出层标题
       title: "",
+      selectFile:{
+        isImage:false
+      },
       drawer: false,
       // 是否显示弹出层
       open: false,
@@ -252,6 +292,7 @@ export default {
       oldFatherId: '',
       // 表单参数
       form: {},
+      isShowFile: false,
       // 表单校验
       rules: {
         fileList: [
@@ -277,6 +318,8 @@ export default {
       selectStaffList: [],
       fileId: '',
       drawerData: {},
+      fileUrl: '',
+      isImage : false
     };
   },
   created() {
@@ -304,6 +347,35 @@ export default {
       }
 
 
+    },
+    //预览文件
+    preview(item) {
+      this.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + this.imageUrl + item.filePath
+      // this.fileUrl = 'https://view.xdocin.com/view?src=' + this.imageUrl + item.filePath
+      console.log(this.fileUrl)
+      this.$nextTick(() => {
+        // this.$refs.filePreview.show()
+        this.selectFile = item
+        this.isImage = item.isImage
+      })
+      console.log(this.imageUrl + this.selectFile.filePath)
+      this.isShowFile = true
+    },
+    handleFileClick(row) {
+      if (row.type === '2') {
+        // this.fileUrl = 'https://view.xdocin.com/view?src=' + this.imageUrl + row.filePath
+        this.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + this.imageUrl + row.filePath
+        this.$nextTick(() => {
+          // this.$refs.filePreview.show()
+          this.selectFile = row
+          this.isImage = row.isImage
+        })
+      }
+    },
+    getRowClassName({ row }) {
+      console.log('返回的class',row.id === this.selectFile.id ? 'highlight-row' : '')
+      // 如果当前行是选中的文件，添加高亮样式
+      return row.id === this.selectFile.id ? 'highlight-row' : '';
     },
     clickStaff(fileId) {
       this.fileId = fileId
@@ -691,6 +763,7 @@ export default {
   color: #F56C6C;
   cursor: pointer;
 }
+
 /* 增加步骤间距 */
 .custom-step {
   margin-bottom: 35px;
@@ -727,8 +800,52 @@ export default {
 .step-download:hover {
   color: #307ec7;
 }
+
 /deep/ .el-drawer__header {
   font-size: 22px;
 }
 
+.preview-container {
+  display: flex;
+  height: 80vh;
+}
+
+
+.preview-iframe {
+  flex: 6;
+  width: 100%;
+  height: 100%;
+  margin-right: 10px;
+}
+
+.file-list {
+  flex: 1;
+  border-left: 1px solid #ebeef5;
+  padding-left: 10px;
+}
+
+.file-item {
+  cursor: pointer;
+  padding: 8px;
+  transition: background 0.3s;
+}
+
+.file-item:hover {
+  background: #f5f7fa;
+}
+
+/* 调整表格高度 */
+:deep(.el-table) {
+  height: calc(100% - 2px) !important;
+}
+
+/* 隐藏表格头 */
+:deep(.el-table__header-wrapper) {
+  display: none;
+}
+
+.highlight-row {
+  background-color: #f0f7ff; /* 高亮背景色 */
+  color: #409eff; /* 高亮文字颜色 */
+}
 </style>