From 2fda34643bc22e25f6c569415da5f955c81536bf Mon Sep 17 00:00:00 2001
From: Houjie <714924425@qq.com>
Date: 星期二, 03 六月 2025 09:37:08 +0800
Subject: [PATCH] 设备详情通过ID过滤/设备详情增加上传附件
---
pages/device/deviceDeils/deviceDeils.vue | 435 ++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 388 insertions(+), 47 deletions(-)
diff --git a/pages/device/deviceDeils/deviceDeils.vue b/pages/device/deviceDeils/deviceDeils.vue
index dd2793f..3c86bb0 100644
--- a/pages/device/deviceDeils/deviceDeils.vue
+++ b/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锛圔lob 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) //閲婃斁鎺塨lob瀵硅薄
+ // }
+ // }
+ // }).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>
\ No newline at end of file
--
Gitblit v1.9.3