jiliangxiaochengxu/pages/assay/detailsList.vue

<template>
	<view class="container">
		<view style="margin-top: 15rpx;" class="content-header">
			<view v-for="item in ledgerList" style="margin-bottom: 30rpx;" 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 style="padding-top: 5rpx; " 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 @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: [],
				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;
			})
		},
		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().then((res) => {
					uni.showToast({
						title: "撤回成功",
						icon: "none",
						duration: 1000,
					});
					setTimeout(() => {
						uni.navigateBack()
					})
				})
			},
			downLoadPDF() {},
			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>
	.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>