jiliangxiaochengxu/pages/assay/deptList.vue

<!-- @format -->

<template>
	<view class="container">
		<view style="margin-top: 15rpx; padding-bottom: 110rpx">
			<view style="font-size: 30rpx" class="content-header">
				<view class="content">
					<view style="font-size: 30rpx" class="title">申请单位</view>
					<view>{{ danwei }}</view>
				</view>
				<view class="content">
					<view style="font-size: 30rpx" class="title">申请人</view>
					<view>{{ applyPeople }}</view>
				</view>

				<view class="content">
					<view style="font-size: 30rpx" class="title">联系电话</view>
					<view>{{ userMobile }}</view>
				</view>
			</view>
			<view class="">
				<u-swipe-action ref="swipeAction" v-for="(item, index) in assList" :key="index"
					style="margin: 20rpx; border-radius: 10rpx; overflow: hidden">
					<u-swipe-action-item ref="item" @click="shanchu(item)" :options="options2">
						<view style="
                border-radius: 10rpx;
                background-color: #fff;
                padding: 10rpx;
              ">
							<view class="">
								<view style="margin-top: 15rpx" class="content-header1">
									<view 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.name }}
											</view>
											<view style="padding-top: 5rpx" :style="{
                          color: recordColor[recordStatus(item.fillingStatus)],
                        }">{{ recordStatus(item.fillingStatus) }}</view>
										</view>

										<view style="display: flex" class="content">
											<view class="title">唯一标识：<span class="message">
													{{ item.instrNo }}
												</span>
											</view>
										</view>
										<view style="display: flex" class="content">
											<view class="title">器具用途：</view>
											<view class="message">
												{{ item.purposeName }}
											</view>
										</view>

										<view class="content">
											<view class="title">制造单位：</view>
											<view class="message">
												{{ item.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.typeName }}
												</view>
											</view>
											<view style="display: flex; align-items: center" class="content">
												<view class="title">规格型号：</view>
												<view style="padding-top: 5rpx" class="message">
													{{ item.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.serialNumber }}
												</view>
											</view>
											<view style="display: flex; align-items: center" class="content">
												<view class="title">内部编号：</view>
												<view class="message">
													{{ item.internalNumber }}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
			<!-- <view style="height: 270rpx" class="content-header">
				<u-checkbox-group style="margin-top: 20rpx" v-model="checkboxValue1" placement="column"
					@change="checkboxChange">
					<u-checkbox style="color: red" v-for="item in checkBoxList" :key="item" :label="item.name"
						:name="item.label">
					</u-checkbox>
				</u-checkbox-group>
			</view> -->
		</view>
		<view class="submitBtn" style="display: flex">
			<view @click="qingkong" style="width: 20%;align-items: center;text-align: center;" class="">
				<u-icon name="trash" color="" size="20"></u-icon><span style="font-size: 30rpx;">清空</span>
			</view>
			<u-button @click="addQiJu" style="width: 35%; margin: 0 auto" type="primary">新增</u-button>
			<u-button @click="nextPage" style="width: 35%; margin: 0 auto" type="success">下一步</u-button>
		</view>
	</view>
</template>

<script>
	import {
		useDict,
		paraseDict
	} from "@/utils/index";
	import {
		addMiAuditOrder
	} from "@/api/assay.js";

	import {
		getInfo
	} from "@/api/login.js";
	export default {
		data() {
			return {
				options2: [{
					text: "删除",
					style: {
						backgroundColor: "#f56c6c",
					},
				}, ],
				danwei: "",
				checkboxValue1: [],
				checkBoxList: [{
					name: "我单位承诺，本次提交备案的计量器具的相关信息均真实准确，经过自我严格审核，均符合《市场监管总局关于调整实施强制管理的计量器具目录的公告》（国家市场监督管理总局公告2020年第42号)中《实施强制管理的计量器具目录》的规定。",
					label: false,
				}, ],
				applyPeople: "",
				createTime: "",
				userMobile: "",
				dataList: [],
				assList: [],
				recordColor: {
					已撤回: "#fa3534",
					已接收: "#2979ff",
					待提交: "#2979ff",
					备案中: "#2979ff",
					已拒绝: "#fa3534",
					勿备案: "#fa3534",
					未备案: "#909399",
					免备案: "#909399",
					已退回: "#fa3534",
				},
				record: [], //备案字典
			};
		},
		onLoad() {
			useDict("ejian_instrFillingStatus").then((res) => {
				this.record = res;
			});
			getInfo().then((res) => {
				console.log("，", res);
				this.danwei = res.data.mechanism.name;
				this.applyPeople = res.data.mechanism.userName;
				this.userMobile = res.data.mechanism.userMobile;
			});
			let that = this;
		},
		onShow() {
			uni.$once("query", (query) => {
				if (query.a == "two") {
					console.log("11", getApp().globalData.deptListBeiAn);
					this.assList.push(...getApp().globalData.deptListBeiAn);
				}
			});
		},
		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: {
			nextPage() {
				let ids = this.assList.map((item) => item.id).join(",");
				uni.navigateTo({
					url: "/pages/assay/application?ids=" + ids,
					success: (res) => {},
					fail: () => {},
					complete: () => {},
				});
			},
			submitBeian() {
				if (this.checkboxValue1.length == 0) {
					this.$modal.showToast("提交前，请认真阅读理解自我承诺内容后勾选");
				} else {
					let ids = this.assList.map((item) => item.id).join(",");
					console.log("ids", ids);
					addMiAuditOrder({
						instrumentIds: ids,
					}).then((res) => {
						console.log("res", res);
						uni.showToast({
							title: "新增成功",
							icon: "none",
							duration: 1000,
						});

						setTimeout(() => {
							this.assList = [];
							this.checkboxValue1 = [];
							uni.$emit("query", {
								a: "one",
							});
							uni.navigateBack();
						}, 500);
					});
				}
			},
			checkboxChange(value) {
				console.log("Checkbox changed:", value);
			},
			shanchu(val) {
				console.log("val", val);
				console.log(this.$refs);
				this.$refs.item.forEach((item) => item.closeHandler(true));
				this.assList.splice(val, 1);
			},
			qingkong() {
				this.assList = [];
				getApp().globalData.deptListBeiAn = [];
				this.checkboxValue1 = [];
			},
			addQiJu() {
				let ids = this.assList.map((item) => item.id).join(",");
				uni.navigateTo({
					url: "/pages/assay/assayList?ids=" + ids,
					success: (res) => {},
					fail: () => {},
					complete: () => {},
				});
			},
		},
	};
</script>

<style lang="scss">
	.container {
		height: 100rpx;
	}

	::v-deep .u-icon--right[data-v-2ee87dc9] {
		/* flex-direction: row; */
		align-items: center;
		flex-direction: column;
	}

	::v-deep .u-checkbox {
		display: flex;
		flex-direction: row;
		/* overflow: hidden; */
		flex-direction: row;
		align-items: flex-start;
	}

	::v-deep uni-text[data-v-c4a74aee] span {
		font-size: 28rpx;
		color: red;
		line-height: 40rpx;
	}

	.submitBtn {
		width: 100%;
		background: #fff;
		padding: 15rpx 0;
		position: fixed;
		bottom: 0;
		z-index: 9999;
	}

	.content-header1 {
		width: 95%;
		border-radius: 6px;
		background: #fff;
		margin: 10rpx auto 10rpx;
		padding: 20rpx 20rpx 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);
		}
	}

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

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

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

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

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

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