aiot-app/pages/home/wt/components/measuringToolInspection/taskForm.vue

<template>
	<view class="">
		<view class="basic_info">
			<view class="info_header">
				<view class="info_title">基本信息</view>
				<u-gap height="4" bgColor="#1890FF"></u-gap>
			</view>
			<view class="info_content">
				<u-row>
					<u-col span="4">
						<view class="label">计划单号：</view>
					</u-col>
					<u-col span="8">
						<view class="value">{{infoData.code}}121212</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">
						<view class="label">来源计划配置单：</view>
					</u-col>
					<u-col span="8">
						<view class="value">{{infoData.planConfigCode}}</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">
						<view class="label">完成时长：</view>
					</u-col>
					<u-col span="8">
						<view class="value" v-if="infoData.duration">{{infoData.duration}}分钟</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">
						<view class="label">周期：</view>
					</u-col>
					<u-col span="8">
						<view class="value" v-if="infoData.ruleInfo">
							{{ infoData.ruleInfo.cycleValue}}
							<!-- {{getDictValue('巡点检周期', infoData.ruleInfo.cycleType)}} -->
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">
						<view class="label">规则名称：</view>
					</u-col>
					<u-col span="8">
						<view class="value">{{ infoData.name}}</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">
						<view class="label">创建人：</view>
					</u-col>
					<u-col span="8">
						<view class="value">{{ infoData.createUserName}}</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">
						<view class="label">创建时间：</view>
					</u-col>
					<u-col span="8">
						<view class="value">{{ infoData.createTime}}</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">
						<view class="label">备注：</view>
					</u-col>
					<u-col span="8">
						<view class="value">{{ infoData.remark}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="info_header">
				<view class="info_title">量具设备</view>
				<u-gap height="4" bgColor="#1890FF"></u-gap>
			</view>
			<view class="card_box" v-for="(item,index) in infoData.planDeviceList">
				<view class="card_title">设备{{index + 1}}</view>
				<u-row>
					<u-col span="3">
						<view class="label">设备编码：</view>
					</u-col>
					<u-col span="9">
						<view class="value">{{item.substance.code}}</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="3">
						<view class="label">设备编号：</view>
					</u-col>
					<u-col span="9">
						<view class="value">{{item.substance.codeNumber}}</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="3">
						<view class="label">设备名称：</view>
					</u-col>
					<u-col span="9">
						<view class="value">{{item.substance.name}}</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="3">
						<view class="label">设备型号：</view>
					</u-col>
					<u-col span="9">
						<view class="value">{{item.substance.model}}</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="3">
						<view class="label">是否遗失：</view>
					</u-col>
					<u-col span="9">
						<view class="value">
							<u-radio-group v-if="taskDefinitionKey === 'user_submit'" size="30" iconSize="20"
								v-model="item.isLose" placement="row" @change="">
								<u-radio :customStyle="{marginRight: '15px'}" v-for="(Item, Index) in option"
									:key="Index" :label="Item.label" :name="Item.value">
								</u-radio>
							</u-radio-group>
							<span
								v-else>{{item.isLose != null? option.filter((i) => i.value == item.isLose)[0].label: ''}}</span>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="3">
						<view class="label">质检：</view>
					</u-col>
					<u-col span="9">
						<view class="value">
							<u-radio-group
								v-if="(taskDefinitionKey === 'leader_check' &&infoData.logList.length == 1) ||taskDefinitionKey === 'user_receive'"
								size="30" iconSize="20" v-model="item.qualityStatus" placement="row"
								@change="qualityChange">
								<u-radio :customStyle="{marginRight: '15px'}" v-for="(Item, Index) in statusOption"
									:key="Index" :label="Item.label" :name="Item.value">
								</u-radio>
							</u-radio-group>
							<span
								v-else>{{item.qualityStatus != null? statusOption.filter((i) => i.value == item.qualityStatus)[0].label: ''}}</span>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		processById,
		getList
	} from '@/api/wt/index.js'
	export default {
		props: {
			businessId: {
				default: ''
			},
			taskDefinitionKey: {
				default: ''
			}
		},
		data() {
			return {
				infoData: {}, // 量具送检信息
				statusOption: [{
						value: 0,
						label: '正常'
					},
					{
						value: 1,
						label: '异常'
					}
				],
				option: [{
						value: 0,
						label: '否'
					},
					{
						value: 1,
						label: '是'
					}
				],
			}
		},
		created() {
			this.getData()
		},
		methods: {
			qualityChange(e) { // 质检切换
				// console.log(e,6666666666666666666)
			},
			getData() {
				let type = '';
				switch (this.taskDefinitionKey) {
					case 'user_submit':
						type = 1;
						break;
					case 'team_leader_submit':
						type = 2;
						break;
					case 'leader_approve':
						type = 3;
						break;
					case 'leader_check':
						type = 3;
						break;
					case 'team_leader_receive_send':
						type = 2;
						break;
					case 'user_receive':
						type = 1;
						break;
				}
				processById({
					id: this.businessId,
					type
				}).then(async (data) => {
					this.infoData = data;
					if (this.taskDefinitionKey == 'leader_check') {
						this.infoData.planDeviceList = this.infoData.planDeviceList.map(
							(item) => {
								return {
									...item,
									qualityStatus: 0
								};
							}
						);
					}
				});
			},
			async getTableValue() {
				return this.infoData;
			}
		}
	}
</script>

<style lang="scss">
	.basic_info {
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.info_title {
		position: relative;
		padding: 16rpx 50rpx;
		font-size: 36rpx;
		color: #606266;
	}

	.info_title::after {
		content: '';
		position: absolute;
		top: 16rpx;
		left: 0px;
		width: 16rpx;
		height: 50rpx;
		background: #1890FF;
	}

	.info_content {
		.label {
			padding: 20rpx 0;
			text-align: right;
			font-size: 28rpx;
			font-weight: 700;
			color: #6e6e6e;
		}

		.value {
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #606266;
		}
	}

	.card_box {
		box-sizing: border-box;
		padding: 20rpx;
		margin: 20rpx;
		width: calc(100% - 20rpx);
		border-radius: 20rpx;
		box-shadow: 0 0 12rpx -6rpx #000;

		.card_title {
			font-size: 32rpx;
			font-weight: 700;
			color: #666;
		}

		.label {
			padding: 18rpx 0;
			text-align: right;
			font-size: 28rpx;
			font-weight: 700;
			color: #6e6e6e;
		}

		.value {
			padding: 18rpx 0;
			font-size: 28rpx;
			color: #606266;
		}
	}
</style>