src/views/partner/file/file.vue

@@ -68,14 +68,12 @@
           <div>{{ item.fileName }}</div>
         </div>
         <div v-if="item.type == 2">
-          <img src="../../../assets/images/wenjian.png" style="width: 100px;height: 100px;" v-if="!item.isImage">
+          <img src="../../../assets/images/wenjian.png" style="width: 100px;height: 100px;">
-          <img :src="imageUrl + item.filePath" style="width: 100px;height: 100px;" v-else>
           <div>{{ item.fileName }}</div>
         </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>
@@ -101,59 +99,13 @@
       </div>
     </el-dialog>
 
-    <el-dialog :title="'文件预览（' + selectFile.fileName + '）'" :visible.sync="isShowFile" width="70%" append-to-body>
-      <div class="preview-container">
-        <audio v-if="isAudioType" class="preview-iframe" controls>
-          <source :src="imageUrl + selectFile.filePath"/>
-        </audio>
-        <!-- 左侧预览区域 -->
-        <iframe
-          :src="fileUrl"
-          frameborder="0"
-          class="preview-iframe" v-if="!isImage && selectFile.fileType != 'txt' && !isAudioType && selectFile.fileType != 'pdf'"
-        >
-        </iframe>
-        <image-preview class="preview-iframe" :src="imageUrl + selectFile.filePath" v-if="isImage"></image-preview>
-        <iframe
-          :src="imageUrl + selectFile.filePath"
-          frameborder="0"
-          class="preview-iframe"
-          v-if="selectFile.fileType == 'txt' || selectFile.fileType == 'pdf'"
-        >
-        </iframe>
-
-
-        <!-- 右侧文件列表 -->
-        <div class="file-list">
-          <el-table
-            :data="inspectionFileList.filter(file => file.type !== '1')"
-            height="100%"
-            @row-click="handleFileClick"
-            :row-class-name="getRowClassName">
-            <el-table-column
-              prop="fileName"
-              label="文件列表"
-              min-width="180">
-              <template #default="{ row }">
-                <!-- 仅当 type 不是 '1' 时才显示 -->
-                <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"
     >
 
       <div style="height: 200px; padding: 10px;">
-        <el-steps direction="vertical">
+        <el-steps direction="vertical" >
           <el-step v-for="(item, index) in drawerData" :key="index" :title="'记录 ' + (index + 1)" status="process">
             <template #description>
               <div class="step-content">
@@ -203,23 +155,23 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-    <!--    批量添加-->
+<!--    批量添加-->
     <el-dialog title="批量新增" :visible.sync="openBatch" width="600px" append-to-body>
       <el-form ref="formBatch" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="文件路径" prop="fileList">
-          <el-upload
+        <el-upload
-            class="upload-demo"
+          class="upload-demo"
-            :action="uploadFileUrl"
+          :action="uploadFileUrl"
-            multiple
+          multiple
-            :on-error="handleUploadError"
+          :on-error="handleUploadError"
-            :on-exceed="handleExceed"
+          :on-exceed="handleExceed"
-            :on-success="handleUploadSuccess"
+          :on-success="handleUploadSuccess"
-            :before-upload="handleBeforeUpload"
+          :before-upload="handleBeforeUpload"
-            :headers="headers"
+          :headers="headers"
-            :file-list="fileList">
+          :file-list="fileList">
-            <el-button size="small" type="primary">点击上传</el-button>
+          <el-button size="small" type="primary">点击上传</el-button>
-            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-          </el-upload>
+        </el-upload>
         </el-form-item>
         <el-form-item label="提醒时间" prop="warnTime">
           <el-date-picker clearable
@@ -261,13 +213,12 @@ 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,
       // 选中数组
       ids: [],
-      fileList: [],
+      fileList:[],
-      headers: {Authorization: "Bearer " + getAccessToken()}, // 设置上传的请求头部
+      headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
       // 非单个禁用
       single: true,
       // 非多个禁用
@@ -280,9 +231,6 @@ export default {
       inspectionFileList: [],
       // 弹出层标题
       title: "",
-      selectFile: {
-        isImage: false
-      },
       drawer: false,
       // 是否显示弹出层
       open: false,
@@ -292,7 +240,7 @@ export default {
       // 提醒时间时间范围
       daterangeWarnTime: [],
       number: 0,
-      uploadList: [],
+      uploadList:[],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -304,7 +252,6 @@ export default {
       oldFatherId: '',
       // 表单参数
       form: {},
-      isShowFile: false,
       // 表单校验
       rules: {
         fileList: [
@@ -330,20 +277,8 @@ export default {
       selectStaffList: [],
       fileId: '',
       drawerData: {},
-      fileUrl: '',
-      isImage: false
     };
   },
-  computed: {
-    isAudioType() {
-      const audioExtensions = ['mp3', 'wav', 'ogg', 'aac', 'm4a', 'flac'];
-      const fileExtension = this.selectFile.fileType;
-      return audioExtensions.includes(fileExtension);
-
-      // 或者如果已有 fileType 字段（根据 MIME type 判断）：
-      // return this.fileType.startsWith('audio/');
-    }
-  },
   created() {
     this.getList();
     this.listByPermission()
@@ -369,35 +304,6 @@ 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
@@ -435,7 +341,7 @@ export default {
       //   this.queryParams.params["beginWarnTime"] = this.daterangeWarnTime[0];
       //   this.queryParams.params["endWarnTime"] = this.daterangeWarnTime[1];
       // }
-      if (this.$route.query.folderId) {
+      if (this.$route.query.folderId){
         this.queryParams.fatherId = this.$route.query.folderId
         this.fatherId = this.$route.query.folderId
       }
@@ -615,8 +521,8 @@ export default {
     },
     /** 提交按钮 */
     submitBatchForm() {
-      console.log(this.form, '内容')
+      console.log(this.form,'内容')
-      console.log(this.fileList, '文件')
+      console.log(this.fileList,'文件')
       this.$refs["formBatch"].validate(valid => {
         this.fileList.forEach(item => {
           item.fatherId = this.fatherId
@@ -725,7 +631,7 @@ export default {
     handleUploadSuccess(res, file) {
       if (res.code === 0) {
         // edit by 芋道源码
-        this.uploadList.push({name: res.data.name, url: res.data.url});
+        this.uploadList.push({ name: res.data.name, url: res.data.url });
         this.uploadedSuccessfully();
       } else {
         this.number--;
@@ -785,7 +691,6 @@ export default {
   color: #F56C6C;
   cursor: pointer;
 }
-
 /* 增加步骤间距 */
 .custom-step {
   margin-bottom: 35px;
@@ -802,7 +707,7 @@ export default {
 /* 时间样式 */
 .step-time {
   font-size: 14px;
-//color: #666;
+  //color: #666;
 }
 
 /* 文件名称高亮 */
@@ -822,52 +727,8 @@ export default {
 .step-download:hover {
   color: #307ec7;
 }
-
+/deep/.el-drawer__header {
-/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>