jiliangxiaochengxu/pages/assay/detailsList.vue

<template>
	<view class="container">
		<view v-for="item in ledgerList" :key="item.id" style="margin-top: 15rpx" class="content-header">
			<view class="">
				<view style="justify-content: space-between" class="content">
					<view style="color: black; font-size: 36rpx; font-weight: 700" class="message">
						{{ item.miInstrument.name }}
					</view>
					<view style="padding-top: 5rpx" :style="{
              color: recordColor[recordStatus(item.miInstrument.fillingStatus)],
            }">{{ recordStatus(item.miInstrument.fillingStatus) }}</view>
				</view>
				<view style="display: flex" class="content">
					<view class="title">唯一标识：<span class="message">{{ item.miInstrument.instrNo }}
						</span>
					</view>
				</view>
				<view style="display: flex" class="content">
					<view class="title">器具用途：</view>
					<view class="message">{{ item.miInstrument.purposeName }}</view>
				</view>
				<view class="content">
					<view class="title">制造单位：</view>
					<view class="message">{{ item.miInstrument.manufactoryName }}</view>
				</view>
				<!-- <view style="display: flex; justify-content: space-between" class=""> -->
				<view style="display: flex" class="content">
					<view class="title">器具类型：</view>
					<view class="message">
						{{ item.miInstrument.typeName }}
					</view>
				</view>
				<view style="display: flex; align-items: center" class="content">
					<view class="title">规格型号：</view>
					<view class="message">{{ item.miInstrument.modelSpecific }}</view>
				</view>
				<!-- </view> -->
				<view style="display: flex; justify-content: space-between" class="">
					<view style="display: flex" class="content">
						<view class="title">出厂编号：</view>
						<view style="padding-top: 5rpx" class="message">
							{{ item.miInstrument.serialNumber }}
						</view>
					</view>
					<view style="display: flex; align-items: center" class="content">
						<view class="title">内部编号：</view>
						<view class="message">{{ item.miInstrument.internalNumber }}</view>
					</view>
				</view>
			</view>
		</view>
		<view style="display: flex" class="submitBtn">
			<!-- <u-button @click="downLoadPDF" type="primary" style="margin: 0 auto; width:47%">备案申请单PDF下载</u-button> -->
			<u-button v-if="showChehui" @click="chehui" type="error" style="margin: 0rpx auto; width: 47%">撤回</u-button>
		</view>
		<u-modal :show="show" :showCancelButton="true" @cancel="show = false" @confirm="handleGD" title="提示"
			content="确认要撤回此备案单吗？"></u-modal>
	</view>
</template>

<script>
	import {
		getMiAuditApplyOneList,
		getMiAuditApplyRoobtList,
		backAudit,
	} from "@/api/assay";
	import {
		useDict,
		paraseDict
	} from "@/utils/index";
	export default {
		data() {
			return {
				show: false,
				recordColor: {
					已撤回: "#fa3534",
					已接收: "#2979ff",
					待提交: "#2979ff",
					备案中: "#2979ff",
					已拒绝: "#fa3534",
					勿备案: "#fa3534",
					未备案: "#909399",
					免备案: "#909399",
					已退回: "#fa3534",
				},
				record: [], //备案字典
				ledgerList: [],
				total: 0,
				record: [],
				showChehui: true,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					auditOrderId: "",
					auditOrderApplyId: "",
				},
			};
		},
		onLoad(option) {
			useDict("ejian_instrFillingStatus").then((res) => {
				this.record = res;
			});
			(this.queryParams.auditOrderId = option.auditOrderId),
			(this.queryParams.auditOrderApplyId = option.auditOrderApplyId);
			getMiAuditApplyRoobtList({
				...this.queryParams,
			}).then((res) => {
				this.ledgerList = res.rows;
				this.total = res.total;
				if (this.ledgerList[0].miInstrument.fillingStatus == "7") {
					this.showChehui = false;
				}
			});
			console.log(
				"this.ledgerList[0].miInstrument.fillingStatus",
				this.ledgerList
			);
			// for(let i=0;i<this.ledgerList)
		},
		computed: {
			// //检定状态
			// verificationStatus() {
			// 	return (row) => {
			// 		return paraseDict(this.verification, row);
			// 	};
			// },
			// //申请状态
			// applicationStatus() {
			// 	return (row) => {
			// 		return paraseDict(this.application, row);
			// 	};
			// },
			//备案状态
			recordStatus() {
				return (row) => {
					return paraseDict(this.record, row);
				};
			},
		},
		methods: {
			chehui() {
				this.show = true;
			},
			handleGD() {
				backAudit({
					applyId: this.queryParams.auditOrderApplyId,
				}).then((res) => {
					uni.showToast({
						title: "撤回成功",
						icon: "none",
						duration: 1000,
					});
					getMiAuditApplyRoobtList({
						...this.queryParams,
					}).then((res) => {
						this.ledgerList = res.rows;
						this.total = res.total;
						if (this.ledgerList[0].miInstrument.fillingStatus == "7") {
							this.showChehui = false;
						}
						this.show = false;
					});

					// setTimeout(() => {
					// 	uni.navigateBack()
					// })
				});
			},
			// downLoadPDF() {
			// 		console.log('’', path)
			// 		uni.downloadFile({
			// 			url: path,
			// 			success: (res) => {
			// 				var filePath = res.tempFilePath;
			// 				uni.openDocument({
			// 					filePath: filePath,
			// 					showMenu: true,
			// 					success: function(res) {
			// 						console.log('打开文档成功');
			// 					}
			// 				});
			// 			}
			// 		})
			// },
			onReachBottom() {
				//触底事件
				if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
					uni.showToast({
						title: "没有更多数据了",
						icon: "none",
						duration: 1000,
					});
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				} else {
					if (this.queryParams.pageNum <= this.queryParams.pageNum - 1) {
						setTimeout(() => {
							uni.hideLoading();
						}, 500);
					} else {
						uni.showLoading({
							title: "加载中",
						});
						this.queryParams.pageNum++;

						getMiAuditApplyRoobtList({
							...this.queryParams,
						}).then(({
							rows,
							total
						}) => {
							this.ledgerList = [...this.ledgerList, ...rows];
							this.total = total;
						});
					}
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				}
			},
		},
	};
</script>

<style lang="scss">
	.submitBtn {
		width: 100%;
		background: #fff;
		padding: 15rpx 0;
		position: fixed;
		bottom: 0;
	}

	.content-header {
		width: 95%;
		border-radius: 6px;
		background: #fff;
		margin: 10rpx auto 10rpx;
		padding: 20rpx 30rpx 10rpx;

		.content {
			/* border-bottom: 1px solid rgb(242, 242, 242); */
			padding: 8rpx 0;
			display: flex;
			/* justify-content: space-between; */
		}

		.content:last-child {
			border-bottom: none;
		}

		.passIcon {
			position: absolute;
			top: 20rpx;
			right: 40rpx;
		}

		.title {
			font-size: 28rpx;
			color: rgb(146, 146, 146);
			letter-spacing: 3rpx;
		}

		.message {
			font-size: 28rpx;
			color: rgb(146, 146, 146);
		}
	}

	.container {
		height: 100vh;
		background: rgb(243, 244, 249);
		padding: 0rpx 0 110rpx;

		.contentItems {
			width: 95%;
			border-radius: 6px;
			background: #fff;
			margin: 0rpx auto 10rpx;
			padding: 10rpx 30rpx 10rpx;

			.content {
				/* border-bottom: 1px solid rgb(242, 242, 242); */
				padding: 14rpx 0;
				display: flex;
				/* justify-content: space-between; */
			}

			.content:last-child {
				border-bottom: none;
			}

			.title {
				font-size: 28rpx;
				color: black;
				letter-spacing: 3rpx;
			}

			.message {
				font-size: 28rpx;
				color: rgb(146, 146, 146);
			}
		}
	}
</style>