设备详情通过ID过滤/设备详情增加上传附件

Houjie

2025-06-03 2fda34643bc22e25f6c569415da5f955c81536bf

 pages/device/deviceDeils/deviceDeils.vue

@@ -9,44 +9,79 @@

         <uni-forms ref="form" :modelValue="formData" validate-trigger="bind" err-show-type="undertext">
            <uni-group top="1">
					
            <uni-forms-item  :label-width="100" required name="num" label="设备编号:">
               <uni-easyinput v-model="formData.equipmentCode" :disabled="true" />
            </uni-forms-item>
				
            <uni-forms-item :label-width="100" name="remark" label="设备名称:">
               <uni-easyinput v-model="formData.equipmentName" :disabled="true" />
            </uni-forms-item>
            <!-- <uni-forms-item :label-width="100" name="outNum" label="关键设备标识:">

               <uni-forms-item :label-width="100" required name="num" label="设备编号:">
                  <uni-easyinput v-model="formData.equipmentCode" :disabled="true" />
               </uni-forms-item>

               <uni-forms-item :label-width="100" name="remark" label="设备名称:">
                  <uni-easyinput v-model="formData.equipmentName" :disabled="true" />
               </uni-forms-item>
               <!-- <uni-forms-item :label-width="100" name="outNum" label="关键设备标识:">
               <uni-easyinput v-model="formData.equipmentImportance" :disabled="true" />
            </uni-forms-item> -->
            <view class="text-gray margin-bottom-lg">—————————— 基本信息 ——————————</view>
            <uni-forms-item  :label-width="100" name="taskCode" label="维修状态:">
               <uni-easyinput :disabled="true" v-model="formData.repairStatus_dictText" />
            </uni-forms-item>
            <uni-forms-item :label-width="100" name="endLocation" label="保养状态:">
               <uni-easyinput :disabled="true" v-model="formData.maintenanceStatus_dictText" />
				
            </uni-forms-item>
            <uni-forms-item :label-width="100" name="endLocation" label="使用车间:">
               <uni-easyinput :disabled="true" v-model="formData.orgId_dictText" />
				
            </uni-forms-item>
				
            <uni-forms-item  :label-width="100" name="endLocation" label="安装位置:">
               <uni-easyinput :disabled="true" v-model="formData.installationPosition" />
            </uni-forms-item>
            <uni-forms-item  :label-width="100" name="endLocation" label="技术状态:">
               <uni-easyinput :disabled="true" v-model="formData.technologyStatus_dictText" />
            </uni-forms-item>
            <uni-forms-item  :label-width="100" name="endLocation" label="设备管理员:">
               <uni-easyinput :disabled="true" v-model="formData.equipmentManager_dictText" />
            </uni-forms-item>
            <uni-forms-item  :label-width="100" name="endLocation" label="出厂日期:">
               <uni-easyinput :disabled="true" v-model="formData.leaveFactoryDate" />
            </uni-forms-item>
               <view class="text-gray margin-bottom-lg">—————————— 基本信息 ——————————</view>
               <uni-forms-item :label-width="100" name="taskCode" label="维修状态:">
                  <uni-easyinput :disabled="true" v-model="formData.repairStatus_dictText" />
               </uni-forms-item>
               <uni-forms-item :label-width="100" name="endLocation" label="保养状态:">
                  <uni-easyinput :disabled="true" v-model="formData.maintenanceStatus_dictText" />

               </uni-forms-item>
               <uni-forms-item :label-width="100" name="endLocation" label="使用车间:">
                  <uni-easyinput :disabled="true" v-model="formData.orgId_dictText" />

               </uni-forms-item>

               <uni-forms-item :label-width="100" name="endLocation" label="安装位置:">
                  <uni-easyinput :disabled="true" v-model="formData.installationPosition" />
               </uni-forms-item>
               <uni-forms-item :label-width="100" name="endLocation" label="技术状态:">
                  <uni-easyinput :disabled="true" v-model="formData.technologyStatus_dictText" />
               </uni-forms-item>
               <uni-forms-item :label-width="100" name="endLocation" label="设备管理员:">
                  <uni-easyinput :disabled="true" v-model="formData.equipmentManager_dictText" />
               </uni-forms-item>
               <uni-forms-item :label-width="100" name="endLocation" label="出厂日期:">
                  <uni-easyinput :disabled="true" v-model="formData.leaveFactoryDate" />
               </uni-forms-item>
               <uni-forms-item :label-width="100" name="outNum" label="设备文档:">
                  <uni-file-picker v-model="fileLists" :extension="['.pdf']" @fail="uploadFail"
                     :list-styles="listStyles" :delIcon="del" :max-count="5" file-mediatype="all"
                     @downloadFile="downloadFile" @select="onFileSelect" @delete="onFileDelete">
                     <button size="mini" type="primary">点击上传</button>
                  </uni-file-picker>
               </uni-forms-item>
            </uni-group>
         </uni-forms>


         <view class="file-list margin-sm">
            <view class="file-item" v-for="(file, index) in this.selectedFiles" :key="index">
               <view class="file-icon">
                  <!-- 文件图标 -->
                  <image src="/static/icon_file.png" style="height: 25px;  width: 25px; margin-right: 10px;"
                     mode='aspectFit' class="zai-logo "></image>

               </view>
               <view class="file-name">
                  <!-- 文件名 -->
                  {{file.fileName}}
               </view>
               <view class="file-actions">
                  <!-- 下载按钮 -->
                  <image v-show="showBtn" src="/static/icon_down.png" @click="downloadFile(file)"
                     style="height: 25px;  width: 25px; margin-right: 10px;"></image>
                  <!-- <button size="mini"  @click="downloadFile(file)">
                 <view class="icon-download">下载</view>
               </button> -->
                  <!-- 删除按钮 -->
                  <image v-show="showBtn" src="/static/icon_del.png" @click="deleteFile(index)"
                     style="height: 25px;  width: 25px;"></image>
                  </button>
               </view>
            </view>
         </view>
         <view class="flex  margin-bottom-xs">
            <button class="flex-sub  cu-btn bg-blue margin-sm   lg" hover-class="is-hover"
               @click="goReportRepair()">报修</button>
@@ -63,17 +98,39 @@

<script>
   import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
   import {
      saveAs
   } from 'file-saver'; // 引入 file-saver 库
   export default {
      mixins: [MescrollMixin], // 使用mixin
      data() {
         return {
            showBtn: true,
            listStyles: {
               "borderStyle": {
                  "width": "0", // 边框宽度
               },
               "border": false, // 是否显示边框
               "dividline": false
            },

            del: true,
            scrollLeft: 0,
            searchValue: '',
            formData: {},
            NavBarColor: this.NavBarColor,
            url: {
               stallList: "/eam/equipment/queryById"
               fileList: 'eam/equipmentAttachment/list',
               stallList: "/eam/equipment/queryById",
               upload: "/eam/sysFiles/batch_upload",
               add: 'eam/equipmentAttachment/add',
               downloadFile: 'eam/equipmentAttachment/downloadFile'
            },
            uploading: false, // 是否正在上传
            selectedFiles: [],
            formData: {
               fileLists: []
            },
            fileLists: [],
            id: '',
            upOption: {
               page: {
@@ -121,46 +178,268 @@
      },
      created() {
         this.upCallback()
         this.getFileList()
      },
      methods: {
         goHome() {
            uni.reLaunch({
               url: '/pages/index/index'
         downloadFile(item) {
            uni.showModal({
               title: '提示',
               content: '确认要下载吗',
               cancelText: '取消',
               confirmText: '确认',
               success: res => {
                  if (res.confirm) {
                     this.downFile(item)
                  }
               }
            })

         },


         downFile(item) {
            this.$http.download(this.url.downloadFile, {
               params: {
                  id: item.id
               },
               responseType: 'blob' // 确保响应类型为 blob
            }).then(response => {
               console.log('Response:', response); // 查看完整响应结构

               // 获取 tempFilePath（Blob URL）
               const tempFilePath = response.tempFilePath;

               if (!tempFilePath) {
                  uni.showToast({
                     title: '文件下载失败',
                     icon: 'none'
                  });
                  return;
               }

               let fileName = item.fileName;

               // 创建 <a> 标签并触发下载
               const link = document.createElement('a');
               link.href = tempFilePath;
               link.setAttribute('download', fileName);
               link.style.display = 'none';

               document.body.appendChild(link);
               link.click();

               // 清理资源
               document.body.removeChild(link);

            }).catch(err => {
               console.error('Download error:', err);
               uni.showToast({
                  title: '文件下载失败',
                  icon: 'none'
               });
            });
         },




         // downFile(item) {
         //    this.$http.download(this.url.downloadFile, {
         //       params: {
         //          id:item.id
         //       },
         //    }).then(res => {
         //             if (!res) {
         //                 this.$message.warning('文件下载失败')
         //                 return
         //               } else {
         //                 let fileName = item.fileName;
         //                 if (typeof window.navigator.msSaveBlob !== 'undefined') {
         //                   window.navigator.msSaveBlob(new Blob([res]), fileName);
         //                 } else {
         //                   let url = window.URL.createObjectURL(new Blob([res]));
         //                   let link = document.createElement('a');
         //                   link.style.display = 'none';
         //                   link.href = url;
         //                   link.setAttribute('download', fileName);
         //                   document.body.appendChild(link);
         //                   link.click()
         //                   document.body.removeChild(link) //下载完成移除元素
         //                   window.URL.revokeObjectURL(url) //释放掉blob对象
         //                 }
         //               }
         //    }).catch((err) => {
         //       uni.showToast({
         //          title: '获取文件列表失败',
         //          icon: 'none'
         //       });
         //    });
         // },


         getFileList() {
            this.$http.get(this.url.fileList, {
               params: {
                  equipmentId: this.id,
                  pageNo: 1,
                  pageSize: 999,
                  column: 'createTime',
                  order: 'desc'
               },
            }).then(res => {
               if (res.data.success) {
                  this.selectedFiles = res.data.result.records || [];

               }
            }).catch(() => {
               uni.showToast({
                  title: '获取文件列表失败',
                  icon: 'none'
               });
            });
         },
         uploadFail(e) {
            console.log('上传失败：', e)
         },



         onFileSelect(e) {
            const tempFilePaths = e.tempFilePaths;

            uni.showLoading({
               title: '上传中...'
            });

            const uploadPromises = tempFilePaths.map((filePath, index) => {
               return new Promise((resolve, reject) => {
                  this.$http.upload(this.url.upload, {
                        filePath: filePath,
                        name: 'file'
                     })
                     .then(uploadRes => {
                        const serverFile = uploadRes.data.result[0];
                        console.log(serverFile);
                        // 提取fileSuffix并拼接
                        if (serverFile.fileSuffix && serverFile.fileName && !serverFile
                           .fileName.includes('.')) {
                           serverFile.fileName += '.' + serverFile.fileSuffix;
                        }
                        this.fileLists = [];
                        // 防止重复添加（根据 id 或 fileName 判断）
                        if (!this.fileLists.some(file => file.id === serverFile.id)) {
                           this.fileLists.push(serverFile);
                        }
                        resolve();
                     })
                     .catch(err => {
                        console.error(`文件 ${index + 1} 上传失败`, err);
                        uni.showToast({
                           title: `第 ${index + 1} 个文件上传失败`,
                           icon: 'none'
                        });
                        reject(err);
                     });
               });
            });

            Promise.all(uploadPromises)
               .then(() => {
                  uni.hideLoading();
                  uni.showToast({
                     title: '全部上传成功，正在提交...'
                  });
                  this.submitFileList(); // 自动提交所有文件
               })
               .catch(() => {
                  uni.hideLoading();
                  uni.showToast({
                     title: '部分上传失败',
                     icon: 'none'
                  });
               });
         },
         // 文件删除回调
         onFileDelete(e) {
            console.log('删除文件:', e.index);
         },

         // 删除单个文件
         deleteFile(index) {
            this.fileLists.splice(index, 1);
         },


         submitFileList() {
            if (!this.fileLists.length) {
               uni.showToast({
                  title: '没有可提交的文件',
                  icon: 'none'
               });
               return;
            }
            console.log(this.fileLists)
            this.$http.post(this.url.add, {
               equipmentId: this.id,
               fileList: this.fileLists
            }).then(res => {
               if (res.data.success) {
                  uni.showToast({
                     title: '提交成功'
                  });
                  this.getFileList();
               } else {
                  uni.showToast({
                     title: '提交失败',
                     icon: 'none'
                  });
               }
            }).catch(err => {
               uni.showToast({
                  title: '提交异常',
                  icon: 'none'
               });
               console.error('提交失败:', err);
            });
         },
         /**
          * 报修
          */
         goReportRepair() {
            console.log('getSera 方法被调用');
            uni.navigateTo({
               url: `/pages/reportRepair/reportRepair?equipmentId=${encodeURIComponent(this.id)}`,
            uni.redirectTo({
               url: `/pages/reportRepair/reportRepair?equipmentId=${encodeURIComponent(this.id)}`
            });
         },
         /**
          * 点检
          */
         goCheck() {
            uni.navigateTo({
               url: '/pages/checkList/checkList',
            uni.redirectTo({
               // url: '/pages/checkList/checkList',
               url: `/pages/checkList/checkList?equipmentId=${encodeURIComponent(this.id)}`
            });
         },
         /**
          * 周保
          */
         goBaoZhou() {
            uni.navigateTo({
               url: '/pages/baoZhou/baoZhou',
            uni.redirectTo({
               // url: '/pages/baoZhou/baoZhou',
               url: `/pages/baoZhou/baoZhou?equipmentId=${encodeURIComponent(this.id)}`
            });
         },
         /**
          * 维修
          */
         goMaintenance() {
            uni.navigateTo({
               url: '/pages/maintenanceReport/maintenanceReport',
            uni.redirectTo({
               // url: '/pages/maintenanceReport/maintenanceReport',
               url: `/pages/maintenanceReport/maintenanceReport?equipmentId=${encodeURIComponent(this.id)}`
            });
         },


         upCallback() {
            this.$http.get(this.url.stallList, {
               params: {
@@ -236,6 +515,25 @@
</script>

<style>
   .file-list {
      margin-top: 20px;
   }

   .file-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #eee;
   }

   .file-item text {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

   .is-hover {
      color: rgba(255, 255, 255, 0.6);
      background-color: #55aaff;
@@ -256,4 +554,47 @@
      margin-top: 85px;
      height: auto;
   }

   .file-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
   }

   .file-item {
      display: flex;
      align-items: center;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
   }

   .file-icon img {
      width: 32px;
      height: 32px;
      margin-right: 10px;
   }

   .file-name {
      flex: 1;
      font-size: 16px;
   }

   .file-actions button {
      background: none;
      border: none;
      cursor: pointer;
      margin-left: 10px;
   }

   .file-actions .icon-download,
   .file-actions .icon-delete {
      font-size: 18px;
      color: #555;
   }

   .file-actions .icon-download:hover,
   .file-actions .icon-delete:hover {
      color: #007bff;
   }
</style>