From d5124852d05a0806159e58b1fa4dc11459031f4a Mon Sep 17 00:00:00 2001
From: Lx <935448346@qq.com>
Date: Fri, 25 Jul 2025 18:00:43 +0800
Subject: [PATCH] 0725

---
 .../drivingSchoolInsurance/index.vue          | 513 +++++++++++++-----
 src/views/drivingSchool/file/file.vue         | 386 ++++++-------
 2 files changed, 585 insertions(+), 314 deletions(-)

diff --git a/src/views/drivingSchool/drivingSchoolInsurance/index.vue b/src/views/drivingSchool/drivingSchoolInsurance/index.vue
index 58f8435..7093a7f 100644
--- a/src/views/drivingSchool/drivingSchoolInsurance/index.vue
+++ b/src/views/drivingSchool/drivingSchoolInsurance/index.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
-
       <el-form-item label="保险公司名称" prop="company">
         <el-input
           v-model="queryParams.company"
@@ -34,7 +33,8 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-        >新增</el-button>
+        >新增
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -44,7 +44,8 @@
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
-        >删除</el-button>
+        >删除
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -53,24 +54,36 @@
           icon="el-icon-download"
           size="mini"
           @click="handleExport"
-        >导出</el-button>
+        >导出
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="insuranceList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="负责人1" align="center" prop="userName" />
-      <el-table-column label="负责人2" align="center" prop="userNames" />
-<!--      <el-table-column label="车辆" align="center" prop="carName" />-->
-      <el-table-column label="车牌号" align="carNo" prop="carNo" />
-      <el-table-column label="保险公司名称" align="center" prop="company" />
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="负责人1" align="center" prop="userName"/>
+      <el-table-column label="负责人2" align="center" prop="userNames"/>
+      <el-table-column label="车牌号" align="carNo" prop="carNo"/>
+      <el-table-column label="保险公司名称" align="center" prop="company"/>
       <el-table-column label="内容" align="center" prop="content">
         <template slot-scope="scope">
           <el-button @click="viewContentFun(scope.row.content)" type="text" slot="reference">查看</el-button>
         </template>
       </el-table-column>
-      <el-table-column label="保险金额" align="center" prop="money" />
+      <el-table-column label="附件" align="center" prop="attachments">
+        <template slot-scope="scope">
+          <el-button
+            v-if="scope.row.attachments"
+            @click="previewAttachments(scope.row.attachments)"
+            type="text"
+          >
+            {{ getAttachmentButtonText(scope.row.attachments) }}
+          </el-button>
+          <span v-else>无附件</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="保险金额" align="center" prop="money"/>
       <el-table-column label="保险到期时间" align="center" prop="insuranceTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.insuranceTime, '{y}-{m}-{d}') }}</span>
@@ -83,13 +96,15 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-          >修改</el-button>
+          >修改
+          </el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-          >删除</el-button>
+          >删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -106,42 +121,40 @@
     <el-dialog :title="title" :visible.sync="open" width="750px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="负责人1" prop="userName">
-          <el-input v-model="form.userName" placeholder="请输入负责人1" />
+          <el-input v-model="form.userName" placeholder="请输入负责人1"/>
         </el-form-item>
         <el-form-item label="负责人2" prop="userNames">
-          <el-input v-model="form.userNames" placeholder="请输入负责人2" />
+          <el-input v-model="form.userNames" placeholder="请输入负责人2"/>
         </el-form-item>
-<!--        <el-form-item label="车辆" prop="carId">
-          <template>
-            <el-select v-model="form.carId" placeholder="请选择车辆">
-              <el-option
-                v-for="item in carLists"
-                :key="item.id"
-                :label="item.carModel"
-                :value="item.id">
-              </el-option>
-            </el-select>
-          </template>
-        </el-form-item>-->
         <el-form-item label="车牌号" prop="carNo">
-          <el-input v-model="form.carNo" placeholder="请输入车牌号" />
+          <el-input v-model="form.carNo" placeholder="请输入车牌号"/>
         </el-form-item>
         <el-form-item label="保险公司名称" prop="company">
-          <el-input v-model="form.company" placeholder="请输入保险公司名称" />
+          <el-input v-model="form.company" placeholder="请输入保险公司名称"/>
         </el-form-item>
         <el-form-item label="保险内容" prop="content">
           <editor v-model="form.content" :min-height="192"/>
         </el-form-item>
 
+        <el-form-item label="附件" prop="attachments">
+          <drive-file-upload
+            :fileSize="5"
+            :limit="10"
+            :fileType="['doc', 'xls', 'ppt', 'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'docx', 'xlsx', 'pptx', 'wps']"
+            v-model="form.attachments"
+          />
+        </el-form-item>
+
         <el-form-item label="保险金额" prop="money">
-          <el-input v-model="form.money" placeholder="请输入保险金额" />
+          <el-input v-model="form.money" placeholder="请输入保险金额"/>
         </el-form-item>
         <el-form-item label="保险到期时间" prop="insuranceTime">
           <el-date-picker clearable
-            v-model="form.insuranceTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择保险到期时间">
+                          v-model="form.insuranceTime"
+                          type="date"
+                          value-format="yyyy-MM-dd"
+                          placeholder="请选择保险到期时间"
+          >
           </el-date-picker>
         </el-form-item>
       </el-form>
@@ -150,42 +163,87 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-    <el-dialog  title="查看" :visible.sync="viewFlag" width="65%" append-to-body>
+
+    <el-dialog title="查看" :visible.sync="viewFlag" width="65%" append-to-body>
       <div style="box-sizing: border-box;padding: 15px;overflow: hidden" v-html="viewContent"></div>
     </el-dialog>
+
+    <!-- 附件预览对话框 -->
+    <el-dialog
+      :title="'附件预览 - ' + currentFileName"
+      :visible.sync="isShowFile"
+      width="80%"
+      append-to-body
+      @closed="handlePreviewClose"
+    >
+
+      <div class="preview-container">
+        <!-- 统一使用 iframe 预览 -->
+        <iframe
+          v-if="currentFileUrl"
+          :src="currentFileUrl"
+          frameborder="0"
+          class="preview-content"
+        />
+
+        <!-- 文件列表 -->
+        <div class="file-list">
+          <el-table
+            :data="attachmentList"
+            height="100%"
+            @row-click="handleFileClick"
+            highlight-current-row
+          >
+            <el-table-column
+              prop="name"
+              label="附件列表"
+              min-width="180"
+            >
+              <template #default="{row}">
+                <div :class="{'active-file': row.originalUrl === currentOriginalUrl}">
+                  <i :class="getFileIcon(row.name)"></i>
+                  {{ row.name }}
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="downloadCurrentFile">
+          <i class="el-icon-download"></i> 下载
+        </el-button>
+        <el-button type="primary" @click="isShowFile = false">关闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listInsurance, getInsurance, delInsurance, addInsurance, updateInsurance ,listCards} from "./api/insurance";
+import { listInsurance, getInsurance, delInsurance, addInsurance, updateInsurance, listCards } from './api/insurance'
 import editor from '@/components/Editor/index.vue'
+import driveFileUpload from '@/components/FileUpload/index.vue'
+import ImagePreview from '@/components/ImagePreview'
+
 export default {
-  name: "Insurance",
-  components: {editor},
+  name: 'Insurance',
+  components: { editor, driveFileUpload, ImagePreview },
   data() {
     return {
-      viewContent:"",
-      viewFlag:false,
-      carLists:[],
-      // 遮罩层
+      inspectionFileUrl: process.env.VUE_APP_INSPECTION_FILE_URL,
+      viewContent: '',
+      viewFlag: false,
+      carLists: [],
       loading: true,
-      // 选中数组
       ids: [],
-      // 非单个禁用
       single: true,
-      // 非多个禁用
       multiple: true,
-      // 显示搜索条件
       showSearch: true,
-      // 总条数
       total: 0,
-      // 保险管理表格数据
       insuranceList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
+      title: '',
       open: false,
-      // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -195,67 +253,227 @@ export default {
         company: null,
         content: null,
         money: null,
-        insuranceTime: null,
+        insuranceTime: null
       },
-      // 表单参数
-      form: {},
-      // 表单校验
+      form: {
+        attachments: null
+      },
+      isShowFile: false,
+      attachmentList: [],
+      currentFileUrl: '',
+      currentOriginalUrl: '',
+      currentFileName: '',
+      currentFileType: '',
       rules: {
         userName: [
-          { required: true, message: "负责人不能为空", trigger: "blur" }
+          { required: true, message: '负责人不能为空', trigger: 'blur' }
         ],
         carId: [
-          { required: true, message: "车辆id不能为空", trigger: "blur" }
+          { required: true, message: '车辆id不能为空', trigger: 'blur' }
         ],
         company: [
-          { required: true, message: "保险公司名称不能为空", trigger: "blur" }
+          { required: true, message: '保险公司名称不能为空', trigger: 'blur' }
         ],
         content: [
-          { required: true, message: "保险内容不能为空", trigger: "blur" }
+          { required: true, message: '保险内容不能为空', trigger: 'blur' }
         ],
         money: [
-          { required: true, message: "保险金额不能为空", trigger: "blur" }
+          { required: true, message: '保险金额不能为空', trigger: 'blur' }
         ],
         insuranceTime: [
-          { required: true, message: "保险到期时间不能为空", trigger: "blur" }
+          { required: true, message: '保险到期时间不能为空', trigger: 'blur' }
         ],
         carNo: [
-          { required: true, message: "保险到期时间不能为空", trigger: "blur" }
-        ],
+          { required: true, message: '车牌号不能为空', trigger: 'blur' }
+        ]
       }
-    };
+    }
+  },
+  computed: {
+    isImage() {
+      return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(this.currentFileType)
+    }
   },
   created() {
-    this.getList();
-    this.listCards();
+    this.getList()
+    this.listCards()
   },
   methods: {
-
-    viewContentFun(data){
-      this.viewContent =data;
-      this.viewFlag = true;
+    viewContentFun(data) {
+      this.viewContent = data
+      this.viewFlag = true
     },
 
-    listCards(){
+    // 预览附件
+    previewAttachments(attachments) {
+      try {
+        const attachmentUrls = this.parseAttachmentString(attachments)
+        console.log('attachmentUrls', attachmentUrls)
+
+        this.attachmentList = attachmentUrls.map(url => ({
+          name: this.getFileNameFromPath(url),
+          url: this.getOfficeOnlinePreviewUrl(url),
+          originalUrl: url,
+          fileType: this.getFileExtension(url)
+        }))
+
+        if (this.attachmentList.length > 0) {
+          this.currentFileUrl = this.attachmentList[0].url
+          this.currentOriginalUrl = this.attachmentList[0].originalUrl
+          this.currentFileName = this.attachmentList[0].name
+          this.currentFileType = this.attachmentList[0].fileType.toLowerCase()
+          this.isShowFile = true
+        } else {
+          this.$message.warning('未找到可预览的附件')
+        }
+      } catch (error) {
+        console.error('附件预览错误:', error)
+        this.$message.error(`预览失败: ${error.message}`)
+      }
+    },
+    // 生成 Office Online 预览 URL
+    getOfficeOnlinePreviewUrl(fileUrl) {
+
+      const ext = this.getFileExtension(fileUrl).toLowerCase()
+      const supportedTypes = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'csv', 'rtf']
+
+      const previewUrl = fileUrl.includes('http') ? this.inspectionFileUrl + fileUrl.replace(/^.*?uploads\//, 'uploads/') : this.previewUrl + fileUrl
+      if (ext == 'pdf' || ext == 'txt') {
+        console.log('pdf', previewUrl)
+        return previewUrl
+      } else {
+        return `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`
+      }
+
+      return fileUrl
+    },
+
+    // 从路径中提取文件名
+    getFileNameFromPath(url) {
+      if (!url) return '未命名文件'
+
+      try {
+        // 处理URL编码的文件名（如中文）
+        const pathname = new URL(url).pathname
+        const decoded = decodeURIComponent(pathname)
+        return decoded.split('/').pop() || '未命名文件'
+      } catch {
+        // 如果不是标准URL，尝试直接处理
+        const cleanUrl = url.split('?')[0].split('#')[0]
+        return cleanUrl.split('/').pop() || cleanUrl.split('\\').pop() || '未命名文件'
+      }
+    },
+
+    // 获取文件扩展名
+    getFileExtension(filename) {
+      return filename.split('.').pop().toLowerCase()
+    },
+
+    // 处理文件点击
+    handleFileClick(row) {
+      console.log('当前文件预览地址:', row.url)
+      this.currentFileUrl = row.url
+      this.currentOriginalUrl = row.originalUrl
+      this.currentFileName = row.name
+      this.currentFileType = row.fileType.toLowerCase()
+    },
+
+    // 下载当前文件
+    downloadCurrentFile() {
+      if (!this.currentOriginalUrl) return
+
+      const link = document.createElement('a')
+      link.href = this.currentOriginalUrl
+      link.target = '_blank'
+      link.download = this.currentFileName
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    },
+
+    // 关闭预览时的清理
+    handlePreviewClose() {
+      this.currentFileUrl = ''
+      this.currentFileName = ''
+      this.attachmentList = []
+    },
+
+    // 解析附件字符串
+    parseAttachmentString(attachments) {
+      const isValidUrl = url => /^https?:\/\/[^\s]+$/.test(url)
+
+      if (
+        Array.isArray(attachments) &&
+        attachments.length === 1 &&
+        typeof attachments[0] === 'string' &&
+        attachments[0].includes(',') &&
+        attachments[0].includes('http')
+      ) {
+        attachments = attachments[0] // 解包为字符串
+      }
+
+      if (!attachments) return []
+
+      if (Array.isArray(attachments)) {
+        return attachments.filter(item => typeof item === 'string' && isValidUrl(item))
+      }
+
+      if (typeof attachments === 'string') {
+        return attachments.split(',')
+          .map(item => item.trim())
+          .filter(isValidUrl)
+      }
+
+      return []
+    },
+
+    getAttachmentButtonText(attachments) {
+      const count = this.parseAttachmentString(attachments).length
+      return count > 0 ? `查看附件(${count})` : '无附件'
+    },
+
+    listCards() {
       listCards().then(response => {
-        this.carLists = response.data;
-      });
+        this.carLists = response.data
+      })
     },
+
     /** 查询保险管理列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listInsurance(this.queryParams).then(response => {
-        this.insuranceList = response.data.records;
-        this.total = response.data.total;
-        this.loading = false;
-      });
+        this.insuranceList = response.data.records.map(item => {
+          item.attachments = this.parseAttachmentString(item.attachments)
+          return item
+        })
+        this.total = response.data.total
+        this.loading = false
+      })
     },
-    // 取消按钮
+
+    // 获取文件图标
+    getFileIcon(filename) {
+      const ext = this.getFileExtension(filename)
+      const iconMap = {
+        pdf: 'el-icon-document-pdf',
+        doc: 'el-icon-document-word',
+        docx: 'el-icon-document-word',
+        xls: 'el-icon-document-excel',
+        xlsx: 'el-icon-document-excel',
+        ppt: 'el-icon-document-ppt',
+        pptx: 'el-icon-document-ppt',
+        jpg: 'el-icon-picture',
+        png: 'el-icon-picture',
+        gif: 'el-icon-picture',
+        txt: 'el-icon-document'
+      }
+      return iconMap[ext] || 'el-icon-document'
+    },
+
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
-    // 表单重置
     reset() {
       this.form = {
         id: null,
@@ -269,78 +487,123 @@ export default {
         createTime: null,
         createBy: null,
         updateTime: null,
-        updateBy: null
-      };
-      this.resetForm("form");
+        updateBy: null,
+        attachments: null
+      }
+      this.resetForm('form')
     },
-    /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
-    /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
-    // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
-    /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加保险管理";
+      this.reset()
+      this.open = true
+      this.title = '添加保险管理'
     },
-    /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.reset()
       const id = row.id || this.ids
       getInsurance(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改保险管理";
-      });
+        this.form = response.data
+        if (!this.form.attachments) {
+          this.form.attachments = []
+        }
+        this.open = true
+        this.title = '修改保险管理'
+      })
     },
-    /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
+          let attachments = []
+          if (Array.isArray(this.form.attachments)) {
+            attachments = this.form.attachments.map(item => item.url || item)
+          } else if (this.form.attachments) {
+            attachments = [this.form.attachments.url || this.form.attachments]
+          }
+
+          const formData = {
+            ...this.form,
+            attachments: attachments.join(',')
+          }
+
           if (this.form.id != null) {
-            updateInsurance(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+            updateInsurance(formData).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
           } else {
-            addInsurance(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+            addInsurance(formData).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
-    /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids;
+      const ids = row.id || this.ids
       this.$modal.confirm('是否确认删除保险管理编号为"' + ids + '"的数据项？').then(function() {
-        return delInsurance(ids);
+        return delInsurance(ids)
       }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
     },
-    /** 导出按钮操作 */
     handleExport() {
       this.download('drivingSchool/system/insurance/export', {
         ...this.queryParams
       }, `insurance_${new Date().getTime()}.xlsx`)
     }
   }
-};
+}
 </script>
+
+<style scoped>
+.preview-container {
+  display: flex;
+  height: 70vh;
+  gap: 15px;
+}
+
+.preview-content {
+  flex: 3;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background-color: #fff;
+}
+
+iframe[type="application/pdf"] {
+  background-color: #525659; /* PDF查看器的背景色 */
+}
+
+.file-list {
+  flex: 1;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 10px;
+  overflow: hidden;
+}
+
+
+.active-file {
+  color: #409EFF;
+  font-weight: bold;
+}
+
+</style>
diff --git a/src/views/drivingSchool/file/file.vue b/src/views/drivingSchool/file/file.vue
index 66069f1..657813c 100644
--- a/src/views/drivingSchool/file/file.vue
+++ b/src/views/drivingSchool/file/file.vue
@@ -70,7 +70,8 @@
         <div v-if="item.type == 2">
           <img src="../../../assets/images/wenjian.png" style="width: 100px;height: 100px;" v-if="!item.isImage">
           <img :src="item.filePath.includes('http') ? item.filePath : imageUrl + item.filePath"
-               style="width: 100px;height: 100px;" v-else>
+               style="width: 100px;height: 100px;" v-else
+          >
 
           <div>{{ item.fileName }}</div>
         </div>
@@ -94,7 +95,8 @@
           v-for="item in staffList"
           :key="item.userId"
           :label="item.name"
-          :value="item.userId">
+          :value="item.userId"
+        >
         </el-option>
       </el-select>
       <div slot="footer" class="dialog-footer">
@@ -108,7 +110,8 @@
         <audio v-if="isAudioType" class="preview-iframe" controls>
           <source :src="selectFile.filePath.includes('http')
     ? inspectionFileUrl + selectFile.filePath.replace(/^.*?uploads\//, 'uploads/')
-    : imageUrl + selectFile.filePath"/>
+    : imageUrl + selectFile.filePath"
+          />
         </audio>
         <!-- 左侧预览区域 -->
         <iframe
@@ -123,7 +126,8 @@
           :src="selectFile.filePath.includes('http')
     ? inspectionFileUrl + selectFile.filePath.replace(/^.*?uploads\//, 'uploads/')
     : imageUrl + selectFile.filePath"
-          v-if="isImage">
+          v-if="isImage"
+        >
         </image-preview>
 
         <!--     如果selectFile.filePath包含http就不拼接imageUrl   -->
@@ -146,11 +150,13 @@
             :data="inspectionFileList.filter(file => file.type !== '1')"
             height="100%"
             @row-click="handleFileClick"
-            :row-class-name="getRowClassName">
+            :row-class-name="getRowClassName"
+          >
             <el-table-column
               prop="fileName"
               label="文件列表"
-              min-width="180">
+              min-width="180"
+            >
               <template #default="{ row }">
                 <!-- 仅当 type 不是 '1' 时才显示 -->
                 <div class="file-item">
@@ -204,7 +210,8 @@
             :fileSize="30"
             :limit="1"
             :fileType="['doc', 'xls', 'ppt', 'txt', 'pdf','png','jpg','jpeg','gif','docx','xlsx','pptx','wps']"
-            v-model="form.filePath"/>
+            v-model="form.filePath"
+          />
         </el-form-item>
         <el-form-item>
           <el-cascader
@@ -228,7 +235,8 @@
                           v-model="form.warnTime"
                           type="date"
                           value-format="yyyy-MM-dd"
-                          placeholder="请选择提醒时间">
+                          placeholder="请选择提醒时间"
+          >
           </el-date-picker>
         </el-form-item>
       </el-form>
@@ -251,7 +259,8 @@
             :on-success="handleUploadSuccess"
             :before-upload="handleUpload"
             :headers="headers"
-            :file-list="fileList">
+            :file-list="fileList"
+          >
             <el-button size="small" type="primary">点击上传</el-button>
             <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
           </el-upload>
@@ -261,7 +270,8 @@
                           v-model="form.warnTime"
                           type="date"
                           value-format="yyyy-MM-dd"
-                          placeholder="请选择提醒时间">
+                          placeholder="请选择提醒时间"
+          >
           </el-date-picker>
         </el-form-item>
         <!-- 上传进度 -->
@@ -288,19 +298,19 @@ import {
   listByPermission,
   getFileRecord,
   addBatchInspectionFile, queryTreeFolder
-} from "./api/file";
+} from './api/file'
 import driveFileUpload from '@/components/FileUpload/index.vue'
-import {getAccessToken} from "@/utils/auth";
+import { getAccessToken } from '@/utils/auth'
 // import  cos from "@/utils/cosUpload"
-import cos from "@/utils/cos"
+import cos from '@/utils/cos'
 
 export default {
-  name: "DriveFile",
-  components: {driveFileUpload},
+  name: 'DriveFile',
+  components: { driveFileUpload },
   data() {
     return {
       uploadProgress: 0,
-      uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/cosUpload",
+      uploadFileUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/cosUpload',
       imageUrl: process.env.VUE_APP_FILE_API,
       previewUrl: process.env.VUE_APP_PREVIEW_URL,
       inspectionFileUrl: process.env.VUE_APP_INSPECTION_FILE_URL,
@@ -309,7 +319,7 @@ export default {
       // 选中数组
       ids: [],
       fileList: [],
-      headers: {Authorization: "Bearer " + getAccessToken()}, // 设置上传的请求头部
+      headers: { Authorization: 'Bearer ' + getAccessToken() }, // 设置上传的请求头部
       // 非单个禁用
       single: true,
       // 非多个禁用
@@ -321,7 +331,7 @@ export default {
       // inspectionFile表格数据
       inspectionFileList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       selectFile: {
         isImage: false
       },
@@ -342,7 +352,7 @@ export default {
         pageNum: 1,
         pageSize: 10,
         type: null,
-        fatherId: null,
+        fatherId: null
       },
       fatherId: '',
       oldFatherId: '',
@@ -354,18 +364,18 @@ export default {
         fileList: [
           {
             required: false,
-            message: "文件路径不能为空",
-            trigger: "blur"
+            message: '文件路径不能为空',
+            trigger: 'blur'
           },
           {
             validator: (rule, value, callback) => {
               if (!value || value.length === 0) {
-                callback(new Error("请至少上传一个文件"));
+                callback(new Error('请至少上传一个文件'))
               } else {
-                callback();
+                callback()
               }
             },
-            trigger: "change"
+            trigger: 'change'
           }
         ]
       },
@@ -377,13 +387,13 @@ export default {
       fileUrl: '',
       isImage: false,
       folderList: []
-    };
+    }
   },
   computed: {
     isAudioType() {
-      const audioExtensions = ['mp3', 'wav', 'ogg', 'aac', 'm4a', 'flac'];
-      const fileExtension = this.selectFile.fileType;
-      return audioExtensions.includes(fileExtension);
+      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/');
@@ -396,11 +406,11 @@ export default {
       servicePackageId: 'jiaxiao',
       dictType: 'drive_file_role',
       fatherId: this.$route.query.folderId || null // 明确初始状态
-    };
+    }
 
-    this.fatherId = this.queryParams.fatherId;
-    this.getList();
-    this.queryTreeFolder();
+    this.fatherId = this.queryParams.fatherId
+    this.getList()
+    this.queryTreeFolder()
   },
   methods: {
     queryTreeFolder() {
@@ -418,9 +428,9 @@ export default {
       // this.form.fatherId = e[e.length - 1]
     },
     formatDate(timestamp) {
-      if (!timestamp) return "";
-      const date = new Date(timestamp);
-      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
+      if (!timestamp) return ''
+      const date = new Date(timestamp)
+      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
     },
     /* backFile() {
       if (this.fatherId) {
@@ -440,12 +450,12 @@ export default {
     }, */
     backFile() {
       // 获取当前文件夹的父文件夹ID
-      const currentFatherId = this.fatherId;
+      const currentFatherId = this.fatherId
 
       if (currentFatherId) {
         // 如果有当前文件夹ID，查询其父文件夹
         getInspectionFile(currentFatherId).then(response => {
-          const newFatherId = response.data.fatherId;
+          const newFatherId = response.data.fatherId
 
           // 更新查询参数
           this.queryParams = {
@@ -453,32 +463,32 @@ export default {
             fatherId: newFatherId,
             pageNum: 1,
             fileName: newFatherId ? '' : this.queryParams.fileName // 在根目录保留文件名搜索
-          };
+          }
 
-          this.fatherId = newFatherId;
+          this.fatherId = newFatherId
 
           // 获取文件夹列表
           this.getFolderList({
             fatherId: newFatherId,
             servicePackageId: 'jiaxiao', // 确保带上服务包ID
             dictType: 'drive_file_role' // 确保带上字典类型
-          });
+          })
         }).catch(error => {
-          console.error("获取父文件夹失败:", error);
-        });
+          console.error('获取父文件夹失败:', error)
+        })
       } else {
         // 如果已经在根目录，刷新当前列表
         this.queryParams = {
           ...this.queryParams,
           fatherId: null, // 明确设置为null
           pageNum: 1
-        };
+        }
 
         this.getFolderList({
           fatherId: null,
           servicePackageId: 'jiaxiao',
           dictType: 'drive_file_role'
-        });
+        })
       }
     },
     //预览文件
@@ -487,8 +497,7 @@ export default {
       this.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' +
         (item.filePath.includes('http')
           ? this.inspectionFileUrl + item.filePath.replace(/^.*?uploads\//, 'uploads/')
-          : this.previewUrl + item.filePath);
-
+          : this.previewUrl + item.filePath)
 
       // this.fileUrl = 'https://view.xdocin.com/view?src=' + this.imageUrl + item.filePath
       console.log(this.fileUrl)
@@ -511,10 +520,10 @@ export default {
         })
       }
     },
-    getRowClassName({row}) {
+    getRowClassName({ row }) {
       console.log('返回的class', row.id === this.selectFile.id ? 'highlight-row' : '')
       // 如果当前行是选中的文件，添加高亮样式
-      return row.id === this.selectFile.id ? 'highlight-row' : '';
+      return row.id === this.selectFile.id ? 'highlight-row' : ''
     },
     clickStaff(fileId) {
       this.fileId = fileId
@@ -545,20 +554,20 @@ export default {
     // },
     /** 查询inspectionFile列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       const params = {
         ...this.queryParams,
         servicePackageId: 'jiaxiao',
         dictType: 'drive_file_role'
-      };
+      }
 
       listByPermission(params).then(response => {
-        this.inspectionFileList = response.data;
+        this.inspectionFileList = response.data
         if (response.data.length > 0) {
-          this.queryParams.fatherId = response.data[0].fatherId;
+          this.queryParams.fatherId = response.data[0].fatherId
         }
-        this.loading = false;
-      });
+        this.loading = false
+      })
     },
     /* getFolderList(data) {
       this.loading = true;
@@ -574,22 +583,22 @@ export default {
       });
     }, */
     getFolderList(data) {
-      this.loading = true;
+      this.loading = true
 
       // 确保包含必要的查询参数
       const params = {
         ...data,
         servicePackageId: data.servicePackageId || 'jiaxiao',
         dictType: data.dictType || 'drive_file_role'
-      };
+      }
 
       listByPermission(params).then(response => {
-        this.inspectionFileList = response.data;
-        this.loading = false;
+        this.inspectionFileList = response.data
+        this.loading = false
       }).catch(error => {
-        console.error("获取文件夹列表失败:", error);
-        this.loading = false;
-      });
+        console.error('获取文件夹列表失败:', error)
+        this.loading = false
+      })
     },
     fatherji(id) {
       this.fatherId = id
@@ -627,25 +636,25 @@ export default {
       // const link = document.createElement('a');
       // 判断filePath中是否包含http
       if (item.filePath.includes('http')) {
-        window.open(item.filePath);
-        return;
+        window.open(item.filePath)
+        return
       }
-      let href = "https://www.nuoyunr.com/minio/" + item.filePath; // 文件路径
+      let href = 'https://www.nuoyunr.com/minio/' + item.filePath // 文件路径
       // var lastIndexOf = item.filePath.lastIndexOf(".");
       // link.download = item.fileName+item.filePath.substr(lastIndexOf); // 下载的文件名
-      window.open(href);
+      window.open(href)
       // // 触发下载
       // link.click();
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 取消按钮
     cancelBatch() {
-      this.openBatch = false;
-      this.resetBatch();
+      this.openBatch = false
+      this.resetBatch()
     },
     // 表单重置
     reset() {
@@ -661,8 +670,8 @@ export default {
         createBy: null,
         updateTime: null,
         updateBy: null
-      };
-      this.resetForm("form");
+      }
+      this.resetForm('form')
     },
     // 表单重置
     resetBatch() {
@@ -678,21 +687,21 @@ export default {
         createBy: null,
         updateTime: null,
         updateBy: null
-      };
+      }
       this.fileList = []
-      this.resetForm("formBatch");
+      this.resetForm('formBatch')
     },
     /** 搜索按钮操作 */
     handleQuery() {
       console.log('查询参数', this.queryParams)
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.daterangeWarnTime = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.daterangeWarnTime = []
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
@@ -702,86 +711,86 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "新增";
+      this.reset()
+      this.open = true
+      this.title = '新增'
     },
     /** 批量新增按钮操作 */
     handleAddBatch() {
-      this.resetBatch();
-      this.openBatch = true;
-      this.title = "新增";
+      this.resetBatch()
+      this.openBatch = true
+      this.title = '新增'
     },
     handleE(item) {
-      this.reset(item);
-      this.form = item;
-      this.open = true;
-      this.title = "修改";
+      this.reset(item)
+      this.form = item
+      this.open = true
+      this.title = '修改'
       console.log(item)
       //判断文件夹树中是否有item的id或者item子类的id如果有禁用
-       this.folderList = this.disableIfExistsInTree(this.folderList, item.id)
+      this.folderList = this.disableIfExistsInTree(this.folderList, item.id)
     },
     disableIfExistsInTree(treeData, targetId) {
-      console.log(treeData, targetId, '执行');
+      console.log(treeData, targetId, '执行')
 
       function traverse(nodes, parentDisabled = false) {
         return nodes.map(node => {
-          let newNode = { ...node };
+          let newNode = { ...node }
 
           // 递归处理子节点，同时传递父级的禁用状态
           if (newNode.children && newNode.children.length > 0) {
-            newNode.children = traverse(newNode.children, newNode.value === targetId || parentDisabled);
+            newNode.children = traverse(newNode.children, newNode.value === targetId || parentDisabled)
           }
 
           // 只禁用目标节点及其子节点，不影响兄弟节点
           if (newNode.value === targetId || parentDisabled) {
-            newNode.disabled = true;
+            newNode.disabled = true
           }
 
-          return newNode;
-        });
+          return newNode
+        })
       }
 
-      return traverse(treeData);
+      return traverse(treeData)
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.reset()
       const id = row.id || this.ids
       getInspectionFile(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改inspectionFile";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改inspectionFile'
+      })
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate(valid => {
         console.log(this.form, '内容')
-        if (!this.form.filePath && this.form.type == "2") {
-          this.$modal.msgError("请上传文件");
-          return false;
+        if (!this.form.filePath && this.form.type == '2') {
+          this.$modal.msgError('请上传文件')
+          return false
         }
         if (valid) {
           if (this.form.id != null) {
             updateInspectionFile(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
+              this.$modal.msgSuccess('修改成功')
               this.form = {}
-              this.open = false;
-              this.getList();
-            });
+              this.open = false
+              this.getList()
+            })
           } else {
             this.form.fatherId = this.fatherId
             this.form.servicePackageId = 'jiaxiao'
             addInspectionFile(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
+              this.$modal.msgSuccess('新增成功')
               this.form = {}
-              this.open = false;
-              this.getList();
-            });
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     /** 提交按钮 */
     submitBatchForm() {
@@ -795,21 +804,21 @@ export default {
         item.warnTime = this.form.warnTime
       })
       addBatchInspectionFile(this.fileList).then(res => {
-        this.$modal.msgSuccess("新增成功");
+        this.$modal.msgSuccess('新增成功')
         this.openBatch = false
         this.resetBatch()
-        this.getList();
+        this.getList()
       })
     },
     /** 分配文件权限给对应用户 */
     saveStaff() {
-      console.log(this.selectStaffList, "66666666666666")
+      console.log(this.selectStaffList, '66666666666666')
       const data = {
         userIds: this.selectStaffList,
         fileId: this.fileId
       }
       assignAuthority(data).then(res => {
-        this.$modal.msgSuccess("分配权限成功")
+        this.$modal.msgSuccess('分配权限成功')
       })
       this.selectStaffList = []
       this.isShow = false
@@ -821,28 +830,28 @@ export default {
     },
     //新建删除
     Deleteanniu(id) {
-      this.$modal.confirm('是否确认删除inspectionFile编号为"' + id + '"的数据项？').then(function () {
-        return delInspectionFile(id);
+      this.$modal.confirm('是否确认删除inspectionFile编号为"' + id + '"的数据项？').then(function() {
+        return delInspectionFile(id)
       }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
       }).catch(() => {
-      });
+      })
     },
     getFileNameWithoutExtension(filename) {
-      if (!filename.includes('.')) return filename; // 没有后缀直接返回
-      return filename.substring(0, filename.lastIndexOf('.'));
+      if (!filename.includes('.')) return filename // 没有后缀直接返回
+      return filename.substring(0, filename.lastIndexOf('.'))
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除inspectionFile编号为"' + ids + '"的数据项？').then(function () {
-        return delInspectionFile(ids);
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除inspectionFile编号为"' + ids + '"的数据项？').then(function() {
+        return delInspectionFile(ids)
       }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
       }).catch(() => {
-      });
+      })
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -885,45 +894,45 @@ export default {
       return new Promise((resolve, reject) => {
         this.$nextTick(() => {
 
-          this.uploadProgress = 0; // 初始化进度条
-          console.log("uploadProgress:", this.uploadProgress)
-        });
+          this.uploadProgress = 0 // 初始化进度条
+          console.log('uploadProgress:', this.uploadProgress)
+        })
         // 生成 COS 上传路径
-        const fileName = `${Date.now()}_${file.name}`;
-        const uploadPath = `files/${fileName}`; // 自定义 COS 存储路径
+        const fileName = `${Date.now()}_${file.name}`
+        const uploadPath = `files/${fileName}` // 自定义 COS 存储路径
 
         // 腾讯云 COS SDK 上传
         cos.putObject(
           {
-            Bucket: "lanan-1319802091",
-            Region: "ap-chengdu",
+            Bucket: 'lanan-1319802091',
+            Region: 'ap-chengdu',
             Key: uploadPath,
             Body: file,
             onProgress: (progressData) => {
               // console.log("上传进度:", progressData);
               this.$nextTick(() => {
-                this.uploadProgress = Math.round(progressData.percent * 100); // 更新进度
-                console.log("uploadProgress2:", this.uploadProgress)
-              });
-            },
+                this.uploadProgress = Math.round(progressData.percent * 100) // 更新进度
+                console.log('uploadProgress2:', this.uploadProgress)
+              })
+            }
           },
           (err, data) => {
-            this.$modal.closeLoading();
-            this.uploadProgress = null; // 上传完成后隐藏进度条
+            this.$modal.closeLoading()
+            this.uploadProgress = null // 上传完成后隐藏进度条
             if (err) {
-              this.$message.error("上传失败：" + err.message);
-              return reject();
+              this.$message.error('上传失败：' + err.message)
+              return reject()
             }
-            this.$message.success("上传成功：" + data.Location);
-            this.fileList.push({name: file.name, url: data.Location});
-            resolve();
+            this.$message.success('上传成功：' + data.Location)
+            this.fileList.push({ name: file.name, url: data.Location })
+            resolve()
           }
-        );
-      });
+        )
+      })
     },
     // 直接使用 cos-js-sdk 进行上传
-    async uploadToCOS({file}) {
-      const fileName = `files/${file.name}`; // 你的存储路径
+    async uploadToCOS({ file }) {
+      const fileName = `files/${file.name}` // 你的存储路径
       cos.putObject(
         {
           Bucket: 'lanan-1319802091', // 你的存储桶名称
@@ -933,20 +942,20 @@ export default {
         },
         (err, data) => {
           if (err) {
-            console.error('上传失败', err);
+            console.error('上传失败', err)
           } else {
-            console.log('上传成功', data);
+            console.log('上传成功', data)
           }
         }
-      );
+      )
     },
     // 触发文件上传
     async handleUpload(file) {
-      this.$modal.loading("正在上传文件，请稍候...");
+      this.$modal.loading('正在上传文件，请稍候...')
       try {
         this.totalUploadCount += 1
-        console.log('开始上传:', file);
-        const fileKey = `uploads/${Date.now()}_${file.name}`; // 防止重名
+        console.log('开始上传:', file)
+        const fileKey = `uploads/${Date.now()}_${file.name}` // 防止重名
 
         const data = await cos.uploadFile({
           Bucket: 'lanan-1319802091',
@@ -955,75 +964,74 @@ export default {
           Body: file,
           SliceSize: 1024 * 1024 * 5, // 5MB 触发分块上传
           onProgress: progressData => {
-            console.log('上传进度:', progressData);
+            console.log('上传进度:', progressData)
           },
           onTaskReady: id => {
-            this.taskId = id;
-          },
-        });
+            this.taskId = id
+          }
+        })
 
-        console.log('上传成功:', data);
+        console.log('上传成功:', data)
         this.uploadProgress++
         if (this.uploadProgress === this.totalUploadCount) {
-          this.$message.success('上传成功');
-          this.uploadProgress = 0;
+          this.$message.success('上传成功')
+          this.uploadProgress = 0
           this.totalUploadCount = 0
-          this.$modal.closeLoading();
+          this.$modal.closeLoading()
         }
 
         // 手动修改fileList的值，需要在befoupload中添加
         if (!this.fileList) {
-          this.fileList = [];
+          this.fileList = []
         }
 
         // 上传成功后手动更新 fileList
         this.fileList.push({
           name: file.name,
           url: `https://${data.Location}` // 腾讯云返回的 URL
-        });
+        })
 
         // return this.fileList
 
       } catch (error) {
-        console.error('上传失败:', error);
-        this.$modal.closeLoading();
+        console.error('上传失败:', error)
+        this.$modal.closeLoading()
       }
 
-      return false; // 阻止 el-upload 默认上传
+      return false // 阻止 el-upload 默认上传
     },
 
-
     // 暂停上传
     pauseUpload() {
       if (this.taskId) {
-        cos.pauseTask(this.taskId);
-        console.log('上传已暂停:', this.taskId);
+        cos.pauseTask(this.taskId)
+        console.log('上传已暂停:', this.taskId)
       }
     },
 
     // 继续上传
     resumeUpload() {
       if (this.taskId) {
-        cos.restartTask(this.taskId);
-        console.log('上传已继续:', this.taskId);
+        cos.restartTask(this.taskId)
+        console.log('上传已继续:', this.taskId)
       }
     },
 
     // 取消上传
     cancelUpload() {
       if (this.taskId) {
-        cos.cancelTask(this.taskId);
-        console.log('上传已取消:', this.taskId);
+        cos.cancelTask(this.taskId)
+        console.log('上传已取消:', this.taskId)
       }
     },
 
     // 文件个数超出
     handleExceed() {
-      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
     },
     // 上传失败
     handleUploadError(err) {
-      this.$modal.msgError("上传图片失败，请重试");
+      this.$modal.msgError('上传图片失败，请重试')
       this.$modal.closeLoading()
     },
     // 上传成功回调
@@ -1032,7 +1040,7 @@ export default {
       // if (res.code === 0) {
       //   // edit by 芋道源码
       //   this.uploadList.push({name: res.data.name, url: res.data.url});
-      this.uploadedSuccessfully();
+      this.uploadedSuccessfully()
       // } else {
       //   this.number--;
       //   this.$modal.closeLoading();
@@ -1045,15 +1053,15 @@ export default {
     uploadedSuccessfully() {
       console.log('这是上传结束')
       if (this.number > 0 && this.uploadList.length === this.number) {
-        this.fileList = this.fileList.concat(this.uploadList);
-        this.uploadList = [];
-        this.number = 0;
+        this.fileList = this.fileList.concat(this.uploadList)
+        this.uploadList = []
+        this.number = 0
         // this.$emit("input", this.listToString(this.fileList));
-        this.$modal.closeLoading();
+        this.$modal.closeLoading()
       }
-    },
+    }
   }
-};
+}
 </script>
 <style scoped>
 .content-box {
@@ -1109,7 +1117,7 @@ export default {
 /* 时间样式 */
 .step-time {
   font-size: 14px;
-//color: #666;
+  //color: #666;
 }
 
 /* 文件名称高亮 */