jiliangxiaochengxu/pages/assay/deptList.vue

<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"
					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; 
		">
			<u-button @click="qingkong" style="width: 47%; margin: 0 auto" type="warning">清空</u-button>
			<u-button @click="submitBeian" style="width: 47%; 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.insertName
				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: {
			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()

						}, 1000)
					})
				}
			},
			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 = []
			},
			onNavigationBarButtonTap(event) {
				console.log('event', event)
				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-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>