jiliangxiaochengxu/pages/assay/index.vue

<!-- @format -->

<template>
	<view class="container">
		<view @click="handleApplicat" class="createFixed">
			<u-icon name="plus" color="#fff" size="14"></u-icon><span style="margin-left: 10rpx;"> 备案新增</span>
		</view>

		<view style="margin: 15rpx 0" v-if="activeContent == '我的申请'">
			<view style="background: #fff; padding: 10rpx 0; margin-bottom: 15rpx">
				<u-search @custom="sousuo" shape="square" placeholder="请输入备案单编号"
					style="width: 95%; margin: 0rpx auto"></u-search>
			</view>
			<view class="contentItems" @click="handleDetails(item)" v-for="item in ledgerList" :key="item.id">
				<view class="content">
					<!-- <view class="title">器具名称</view> -->
					<view style="color: black; font-size: 36rpx; font-weight: 700" class="message">{{ item.instrName }}
					</view>
				</view>
				<view class="content">
					<view class="title">备案单编号:
						<text class="message" style="
                margin-left: 10rpx;
                color: red;
                font-weight: 700;
                font-size: 30rpx;
              ">
							{{ item.filingNo }}
						</text>
					</view>
				</view>

				<!-- <view class="content">
					<view class="title">备案状态</view>
					<view :style="{
			    color: recordColor[recordStatus(item)],
			  }">{{ recordStatus(item) }}</view>
				</view> -->
				<!-- 		<view class="content">
					<view class="title">行政部门</view>
					<view style="font-weight: 700;color: black;" class="message">{{item.useOrgName}}</view>
				</view> -->
				<!-- <view style="display: flex; justify-content: space-between" class=""> -->
				<view class="content">
					<view class="title">发起人:</view>
					<view style="width: 100rpx" class="message">{{
              item.userName
            }}</view>
				</view>
				<view class="content">
					<view class="title">发起时间:</view>
					<view style="padding-top: 5rpx" class="message">{{
              item.createTime
            }}</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.userMobile
            }}</view>
					</view>
					<view style="display: flex; align-items: center" class="content">
						<view class="title">器具数量:</view>
						<view style="padding-top: 5rpx" class="message">{{
              item.instrCount
            }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 	<view v-else>
			<view>
				<view class="createNew">选择器具进行申请</view>
				<view class="contentItems" @click="handleCurrentForm">
					<view class="content">
						<view class="title">出厂编号</view>
						<view class="message">123478654</view>
					</view>
					<view class="content">
						<view class="title">器具名称</view>
						<view class="message">血压计和血压表</view>
					</view>
					<view class="content">
						<view class="title">规格型号</view>
						<view class="message">153430587834</view>
					</view>
				</view>
				<view class="contentItems">
					<view class="content">
						<view class="title">出厂编号</view>
						<view class="message">123478654</view>
					</view>
					<view class="content">
						<view class="title">器具名称</view>
						<view class="message">燃油加油机</view>
					</view>
					<view class="content">
						<view class="title">规格型号</view>
						<view class="message">20kg*10</view>
					</view>
				</view>
				<view class="contentItems">
					<view></view>
					<view class="content">
						<view class="title">出厂编号</view>
						<view class="message">123478654</view>
					</view>
					<view class="content">
						<view class="title">器具名称</view>
						<view class="message">汽车发动机检测仪</view>
					</view>
					<view class="content">
						<view class="title">规格型号</view>
						<view class="message">BJL</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		getMiAuditApplyList
	} from "@/api/assay";
	import {
		useDict,
		paraseDict
	} from "@/utils/index";
	export default {
		data() {
			return {
				recordColor: {
					已撤回: "#fa3534",
					已接收: "#2979ff",
					待提交: "#2979ff",
					备案中: "#2979ff",
					已拒绝: "#fa3534",
					勿备案: "#fa3534",
					未备案: "#909399",
					免备案: "#909399",
					已退回: "#fa3534",
				},
				record: [], //备案字典
				activeContent: "我的申请",
				tabsList: [{
					name: "我的申请",
				}, ],
				ledgerList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					filingNo: "",
					orderByColumn: "createTime",
					isAsc: "Desc",
				},
				total: 0,
			};
		},
		async onLoad() {
			// useDict("ejian_instrCheckStatus").then((res) => {
			//   this.verification = res;
			// });
			// useDict("ejian_instrCheckRecordStatusV2").then((res) => {
			//   this.application = res;
			// });
			useDict("ejian_instrFillingStatus").then((res) => {
				this.record = res;
			});
			this.getList();
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			this.getList();
			console.log("refresh");
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 800);
		},
		onShow() {
			uni.$on("query", (query) => {
				if (query.a == "one") {
					console.log("query", query);
					console.log("11111111111111111111111");
					uni.startPullDownRefresh();
					setTimeout(() => {
						this.queryParams.pageNum = 1;
						this.queryParams.pageSize = 10;
						this.getList();
					}, 1500);
				}
			});
		},
		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: {
			sousuo(val) {
				console.log(val);
				this.queryParams.filingNo = val;
				this.getList();
			},
			getList() {
				getMiAuditApplyList({
					...this.queryParams,
				}).then((res) => {
					this.ledgerList = res.rows;
					this.total = res.total;
				});
			},
			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++;

						getMiAuditApplyList({
							...this.queryParams,
						}).then(({
							rows,
							total
						}) => {
							this.ledgerList = [...this.ledgerList, ...rows];
							this.total = total;
						});
					}
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				}
			},
			//备案申请
			handleApplicat() {
				uni.navigateTo({
					// url: "/pages/assay/assayList",
					url: "/pages/assay/deptList",
					success: (res) => {},
					fail: () => {},
					complete: () => {},
				});
			},
			handleChange(row) {
				this.activeContent = row.name;
			},
			handleCurrentForm() {},
			handleDetails(item) {
				uni.navigateTo({
					url: "/pages/assay/details?id=" +
						item.id +
						"&danwei=" +
						item.useOrgName +
						"&applypeople=" +
						item.userName +
						"&userMobile=" +
						item.userMobile +
						"&createTime=" +
						item.createTime,
					success: (res) => {},
					fail: () => {},
					complete: () => {},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.createFixed {
		background: #2979ff;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		/* 宽度保持不变 */
		height: 70rpx;
		/* 高度保持不变 */
		border-radius: 90rpx;
		/* 设置为较大的值以形成胶囊形状 */
		position: fixed;
		right: 30rpx;
		bottom: 200rpx;
		color: white;
	}

	.createNew {
		font-size: 30rpx;
		margin: 10rpx 0 10rpx 10rpx;
		color: #3c9ff3;
	}

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

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

			.content {
				// border-bottom: 1px solid rgb(242, 242, 242);
				padding: 10rpx 0;
				display: flex;

				// justify-content: space-between;
			}

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

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

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