fix: 限制字符，超出隐藏，无文件时不查看文件

郭伟龙
1 parent ef2eeb98
Showing 6 changed files with 54 additions and 24 deletions Show diff stats
pages/component/AuxiliaryModule.vue
pages/component/InformationModule.vue
pages/component/InspectionModule.vue
pages/component/UploadFile.vue
pages/product/index.vue
utils/utils.js
@@ -93,6 +93,11 @@
 		.title {
 			font-size: 30px;
 			margin: 38px 0 0 28px;
+			white-space: nowrap;
+			/* 防止换行 */
+			overflow: hidden;
+			/* 超出部分隐藏 */
+			text-overflow: ellipsis;
 		}
  
 		.flex-between {
 <template>
 	<view class="containers">
-		<u-swiper class="swiperCss" :list="informationData.lampPath"
+		<u-swiper class="swiperCss"  :list="informationData.lampPath"
 			@click="previewLargeImage(informationData.lampPath,current)" :current="current" indicator
 			indicatorMode="dot" imgMode="aspectFit" circular :height="$isMobile?'400rpx':'600px'"
 			indicatorActiveColor="#00aeaa" indicatorInactiveColor="rgba(0, 174, 170, 0.3)" @change="changeSwiper"
@@ -197,5 +197,11 @@
 		color: #2b3950;
 		text-align: left;
 		line-height: normal;
+		max-width: 400px;
+		white-space: nowrap;
+		/* 防止换行 */
+		overflow: hidden;
+		/* 超出部分隐藏 */
+		text-overflow: ellipsis;
 	}
 </style>
 \ No newline at end of file
@@ -220,5 +220,11 @@
 		color: #2b3950;
 		text-align: left;
 		line-height: normal;
+		max-width: 400px;
+		white-space: nowrap;
+		/* 防止换行 */
+		overflow: hidden;
+		/* 超出部分隐藏 */
+		text-overflow: ellipsis;
 	}
 </style>
 \ No newline at end of file
@@ -6,9 +6,9 @@
 				<u-icon name="/static/images/icon/excelIcon.png" size="33px" v-if="fileType == 2"></u-icon>
 				<u-icon name="/static/images/icon/csvIcon.png" size="33px" v-if="fileType == 3"></u-icon>
 				<text class="iconTitle"
-					@click="seeFile">{{downloadFileName ? downloadFileName.substring(downloadFileName.lastIndexOf('/') + 1) : $t('hdk.noFile')}}</text>
+					@click="seeFile('preview')">{{downloadFileName ? downloadFileName.substring(downloadFileName.lastIndexOf('/') + 1) : $t('hdk.noFile')}}</text>
 			</view>
-			<view class="rightText" @click="seeFile('preview')" v-if="downloadFileNamePath != ''">
+			<view class="rightText" @click="seeFile('preview')" v-if="downloadFileName && downloadFileNamePath">
 				{{$t('hdk.Check')}}
 			</view>
 		</view>
@@ -67,12 +67,17 @@
 				// if (this.isCsv) {
 				//   return
 				// }
+				console.log(this.downloadFileName);
+				console.log(this.downloadFileNamePath);
+				if(!this.downloadFileName || !this.downloadFileNamePath){
+					return false
+				}
 				console.log('查看文件');
+				// return
 				uni.showLoading({
 					title: this.$t('hdk.loading')
 				})
 				let that = this;
-
 				if (!this.isCsv) {
 					const count = (this.downloadFileNamePath.match(/;/g) || []).length;
 					console.log(this.downloadFileNamePath, "解析文件有", count, "个")
@@ -7,7 +7,8 @@
 			:activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></u-tabs>
 		<view class="ComponentsBody">
 			<view class="productInformation" v-if="current == 0">
-				<InformationModule v-if="informationData != null" :informationData="informationData">
+				<InformationModule v-if="informationData != null && Array.isArray(informationData.lampPath)"
+					:informationData="informationData">
 				</InformationModule>
 			</view>
 			<view class="inspectionInformation" v-else-if="current == 1">
@@ -17,8 +18,8 @@
 				<AuxiliaryModule v-if="auxiliaryData != null" :auxiliaryData="auxiliaryData"></AuxiliaryModule>
 			</view>
 			<view class="repairReportBtnCss" @click="jumpService">
-				<image src="/static/images/icon/repair.png" class="repairReportImageCss" mode="witFix" ></u-image>
-				<text class="repairReportTextCss">{{$t("hdk.Repair")}}</text>
+				<image src="/static/images/icon/repair.png" class="repairReportImageCss" mode="witFix"></u-image>
+					<text class="repairReportTextCss">{{$t("hdk.Repair")}}</text>
 			</view>
 		</view>
  
@@ -134,9 +135,9 @@
 					productionTime: this.productObject.productionTime,
 					productionUserName: this.productObject.productionUserName,
 					productDatasheet: this.productObject.productRespVO?.productDatasheet || null,
-					productDatasheetPath: this.productObject.productRespVO?.productDatasheetPath || [],
+					productDatasheetPath: this.productObject.productRespVO?.productDatasheetPath || null,
 					productManual: this.productObject.productRespVO?.productManual || null,
-					productManualPath: this.productObject.productRespVO?.productManualPath || []
+					productManualPath: this.productObject.productRespVO?.productManualPath || null
 				};
 				console.log("产品信息", this.informationData);
  
@@ -195,8 +196,9 @@
 						this.generateDownloadUrls(this.productObject.lightIntensityPath)
 							.then(modifiedManuals => {
 								// console.log("光强==>", modifiedManuals);
-								this.inspectionData.lightIntensityPhoto = modifiedManuals.filter(url => this.isPicture(
-									url));
+								this.inspectionData.lightIntensityPhoto = modifiedManuals.filter(url => this
+									.isPicture(
+										url));
 								this.inspectionData.lightIntensityFile = modifiedManuals.filter(filename => !this
 									.isPicture(filename) && filename.includes('.'));
 								// 在这里可以访问已更新的inspectionData.lightIntensityPhoto和inspectionData.lightIntensityFile的值
@@ -234,7 +236,7 @@
 				// console.log("filenames", filenames)
 				if (!filenames || filenames.length === 0) {
 					// 如果 filenames 为空或者null，则执行相应的操作
-					return Promise.resolve(require('@/static/images/noPhoto.png'))
+					return Promise.resolve([require('@/static/images/noPhoto.png')])
 				}
 				const modifiedFilenames = filenames.replace(/;+$/, '');
 				const modifiedUrls = modifiedFilenames.split(";").map(filename => {
@@ -243,7 +245,11 @@
 						// const encodedFilename = Buffer.from(trimmedFilename, 'utf-8').toString('base64');
 						const url = config.fileUrl + `/${trimmedFilename}`;
 						// console.log(url);
-						return this.checkUrlValidity(url).catch(error => {
+						return this.checkUrlValidity(url)
+						// .then(res => {
+						// 	return res == null ? Promise.resolve(require('@/static/images/noPhoto.png')):res
+						// })
+						.catch(error => {
 							// console.error(error);
 							// console.log("请求失败", trimmedFilename)
 							return Promise.resolve(require('@/static/images/noPhoto.png'));
@@ -256,7 +262,9 @@
 				});
  
 				return Promise.all(modifiedUrls).then(results => {
+					console.log(results);
 					const validUrls = results.filter(url => url !== null);
+					// console.log(validUrls);
 					if (validUrls.length > 0) {
 						// console.log("有效地址",validUrls);
 						return validUrls;
@@ -335,7 +343,7 @@
 	// .attachmentInformation{
 	// 	width: 100%;
 	// }
-	
+
 	//移动端样式
 	@media screen and (max-width: 767px) {
 		.repairReportBtnCss {
@@ -351,15 +359,15 @@
 			bottom: 100px;
 			// background-color: #00aeaa;
 		}
-		
-		
-		
+
+
+
 		// .u-image__image{
 		// 	width: 100px !important;
 		// 	height: 100px !important;
 		// }
-		
-		.repairReportImageCss{
+
+		.repairReportImageCss {
 			width: 100px !important;
 			height: 100px !important;
 		}
@@ -388,13 +396,13 @@
 			bottom: 100px;
 			// background-color: #00aeaa;
 		}
-		
+
 		// .u-image__image{
 		// 	width: 200px !important;
 		// }
-		
-		
-		.repairReportImageCss{
+
+
+		.repairReportImageCss {
 			width: 200px !important;
 			height: 200px !important;
 		}
@@ -7,7 +7,7 @@ export const deviceMixin = {
  
       for (const keyword of mobileKeywords) {
         if (userAgent.includes(keyword)) {
-			console.log(keyword);
+			// console.log(keyword);
           return true; // 如果包含移动设备关键词，则判断为移动端
         }
       }
...	...	@@ -93,6 +93,11 @@
93	93	.title {
94	94	font-size: 30px;
95	95	margin: 38px 0 0 28px;
	96	+ white-space: nowrap;
	97	+ /* 防止换行 */
	98	+ overflow: hidden;
	99	+ /* 超出部分隐藏 */
	100	+ text-overflow: ellipsis;
96	101	}
97	102
98	103	.flex-between {
...	...
1	1	<template>
2	2	<view class="containers">
3		- <u-swiper class="swiperCss" :list="informationData.lampPath"
	3	+ <u-swiper class="swiperCss" :list="informationData.lampPath"
4	4	@click="previewLargeImage(informationData.lampPath,current)" :current="current" indicator
5	5	indicatorMode="dot" imgMode="aspectFit" circular :height="$isMobile?'400rpx':'600px'"
6	6	indicatorActiveColor="#00aeaa" indicatorInactiveColor="rgba(0, 174, 170, 0.3)" @change="changeSwiper"
...	...	@@ -197,5 +197,11 @@
197	197	color: #2b3950;
198	198	text-align: left;
199	199	line-height: normal;
	200	+ max-width: 400px;
	201	+ white-space: nowrap;
	202	+ /* 防止换行 */
	203	+ overflow: hidden;
	204	+ /* 超出部分隐藏 */
	205	+ text-overflow: ellipsis;
200	206	}
201	207	</style>
202	208	\ No newline at end of file
...	...
...	...	@@ -220,5 +220,11 @@
220	220	color: #2b3950;
221	221	text-align: left;
222	222	line-height: normal;
	223	+ max-width: 400px;
	224	+ white-space: nowrap;
	225	+ /* 防止换行 */
	226	+ overflow: hidden;
	227	+ /* 超出部分隐藏 */
	228	+ text-overflow: ellipsis;
223	229	}
224	230	</style>
225	231	\ No newline at end of file
...	...
...	...	@@ -6,9 +6,9 @@
6	6	<u-icon name="/static/images/icon/excelIcon.png" size="33px" v-if="fileType == 2"></u-icon>
7	7	<u-icon name="/static/images/icon/csvIcon.png" size="33px" v-if="fileType == 3"></u-icon>
8	8	<text class="iconTitle"
9		- @click="seeFile">{{downloadFileName ? downloadFileName.substring(downloadFileName.lastIndexOf('/') + 1) : $t('hdk.noFile')}}</text>
	9	+ @click="seeFile('preview')">{{downloadFileName ? downloadFileName.substring(downloadFileName.lastIndexOf('/') + 1) : $t('hdk.noFile')}}</text>
10	10	</view>
11		- <view class="rightText" @click="seeFile('preview')" v-if="downloadFileNamePath != ''">
	11	+ <view class="rightText" @click="seeFile('preview')" v-if="downloadFileName && downloadFileNamePath">
12	12	{{$t('hdk.Check')}}
13	13	</view>
14	14	</view>
...	...	@@ -67,12 +67,17 @@
67	67	// if (this.isCsv) {
68	68	// return
69	69	// }
	70	+ console.log(this.downloadFileName);
	71	+ console.log(this.downloadFileNamePath);
	72	+ if(!this.downloadFileName \|\| !this.downloadFileNamePath){
	73	+ return false
	74	+ }
70	75	console.log('查看文件');
	76	+ // return
71	77	uni.showLoading({
72	78	title: this.$t('hdk.loading')
73	79	})
74	80	let that = this;
75		-
76	81	if (!this.isCsv) {
77	82	const count = (this.downloadFileNamePath.match(/;/g) \|\| []).length;
78	83	console.log(this.downloadFileNamePath, "解析文件有", count, "个")
...	...
...	...	@@ -7,7 +7,8 @@
7	7	:activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></u-tabs>
8	8	<view class="ComponentsBody">
9	9	<view class="productInformation" v-if="current == 0">
10		- <InformationModule v-if="informationData != null" :informationData="informationData">
	10	+ <InformationModule v-if="informationData != null && Array.isArray(informationData.lampPath)"
	11	+ :informationData="informationData">
11	12	</InformationModule>
12	13	</view>
13	14	<view class="inspectionInformation" v-else-if="current == 1">
...	...	@@ -17,8 +18,8 @@
17	18	<AuxiliaryModule v-if="auxiliaryData != null" :auxiliaryData="auxiliaryData"></AuxiliaryModule>
18	19	</view>
19	20	<view class="repairReportBtnCss" @click="jumpService">
20		- <image src="/static/images/icon/repair.png" class="repairReportImageCss" mode="witFix" ></u-image>
21		- <text class="repairReportTextCss">{{$t("hdk.Repair")}}</text>
	21	+ <image src="/static/images/icon/repair.png" class="repairReportImageCss" mode="witFix"></u-image>
	22	+ <text class="repairReportTextCss">{{$t("hdk.Repair")}}</text>
22	23	</view>
23	24	</view>
24	25
...	...	@@ -134,9 +135,9 @@
134	135	productionTime: this.productObject.productionTime,
135	136	productionUserName: this.productObject.productionUserName,
136	137	productDatasheet: this.productObject.productRespVO?.productDatasheet \|\| null,
137		- productDatasheetPath: this.productObject.productRespVO?.productDatasheetPath \|\| [],
	138	+ productDatasheetPath: this.productObject.productRespVO?.productDatasheetPath \|\| null,
138	139	productManual: this.productObject.productRespVO?.productManual \|\| null,
139		- productManualPath: this.productObject.productRespVO?.productManualPath \|\| []
	140	+ productManualPath: this.productObject.productRespVO?.productManualPath \|\| null
140	141	};
141	142	console.log("产品信息", this.informationData);
142	143
...	...	@@ -195,8 +196,9 @@
195	196	this.generateDownloadUrls(this.productObject.lightIntensityPath)
196	197	.then(modifiedManuals => {
197	198	// console.log("光强==>", modifiedManuals);
198		- this.inspectionData.lightIntensityPhoto = modifiedManuals.filter(url => this.isPicture(
199		- url));
	199	+ this.inspectionData.lightIntensityPhoto = modifiedManuals.filter(url => this
	200	+ .isPicture(
	201	+ url));
200	202	this.inspectionData.lightIntensityFile = modifiedManuals.filter(filename => !this
201	203	.isPicture(filename) && filename.includes('.'));
202	204	// 在这里可以访问已更新的inspectionData.lightIntensityPhoto和inspectionData.lightIntensityFile的值
...	...	@@ -234,7 +236,7 @@
234	236	// console.log("filenames", filenames)
235	237	if (!filenames \|\| filenames.length === 0) {
236	238	// 如果 filenames 为空或者null，则执行相应的操作
237		- return Promise.resolve(require('@/static/images/noPhoto.png'))
	239	+ return Promise.resolve([require('@/static/images/noPhoto.png')])
238	240	}
239	241	const modifiedFilenames = filenames.replace(/;+$/, '');
240	242	const modifiedUrls = modifiedFilenames.split(";").map(filename => {
...	...	@@ -243,7 +245,11 @@
243	245	// const encodedFilename = Buffer.from(trimmedFilename, 'utf-8').toString('base64');
244	246	const url = config.fileUrl + `/${trimmedFilename}`;
245	247	// console.log(url);
246		- return this.checkUrlValidity(url).catch(error => {
	248	+ return this.checkUrlValidity(url)
	249	+ // .then(res => {
	250	+ // return res == null ? Promise.resolve(require('@/static/images/noPhoto.png')):res
	251	+ // })
	252	+ .catch(error => {
247	253	// console.error(error);
248	254	// console.log("请求失败", trimmedFilename)
249	255	return Promise.resolve(require('@/static/images/noPhoto.png'));
...	...	@@ -256,7 +262,9 @@
256	262	});
257	263
258	264	return Promise.all(modifiedUrls).then(results => {
	265	+ console.log(results);
259	266	const validUrls = results.filter(url => url !== null);
	267	+ // console.log(validUrls);
260	268	if (validUrls.length > 0) {
261	269	// console.log("有效地址",validUrls);
262	270	return validUrls;
...	...	@@ -335,7 +343,7 @@
335	343	// .attachmentInformation{
336	344	// width: 100%;
337	345	// }
338		-
	346	+
339	347	//移动端样式
340	348	@media screen and (max-width: 767px) {
341	349	.repairReportBtnCss {
...	...	@@ -351,15 +359,15 @@
351	359	bottom: 100px;
352	360	// background-color: #00aeaa;
353	361	}
354		-
355		-
356		-
	362	+
	363	+
	364	+
357	365	// .u-image__image{
358	366	// width: 100px !important;
359	367	// height: 100px !important;
360	368	// }
361		-
362		- .repairReportImageCss{
	369	+
	370	+ .repairReportImageCss {
363	371	width: 100px !important;
364	372	height: 100px !important;
365	373	}
...	...	@@ -388,13 +396,13 @@
388	396	bottom: 100px;
389	397	// background-color: #00aeaa;
390	398	}
391		-
	399	+
392	400	// .u-image__image{
393	401	// width: 200px !important;
394	402	// }
395		-
396		-
397		- .repairReportImageCss{
	403	+
	404	+
	405	+ .repairReportImageCss {
398	406	width: 200px !important;
399	407	height: 200px !important;
400	408	}
...	...
...	...	@@ -7,7 +7,7 @@ export const deviceMixin = {
7	7
8	8	for (const keyword of mobileKeywords) {
9	9	if (userAgent.includes(keyword)) {
10		- console.log(keyword);
	10	+ // console.log(keyword);
11	11	return true; // 如果包含移动设备关键词，则判断为移动端
12	12	}
13	13	}
...	...