ckgl/pages/documentary/history.vue

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { showToast } from 'vant';
	import { ref } from 'vue';
	import { getAction, postAction } from '../../common/http';
	// 定义 props
	defineProps<{
		item ?: string;
	}>();

	const itemList = ref()
	const processes = ref({} as any)
	const history = ref([] as any[])

	onLoad(async (option : any) => {
		if (option) {
			try {
				itemList.value = JSON.parse(option.item)
				if (itemList.value.sd === '门店' && !itemList.value.processes) {
					let res : any = await getAction('/flowBind')
					if (res.code === 200) {
						let item = res.data.find((l : any) => l.craftName === itemList.value.craft)
						let item2 = item.flows.find((l : any) => l.bind === "仅现货")
						if (item2) {
							let url = '/craftFlows/byName?name=' + item2.name
							let res1 : any = await getAction(url)
							if (res1.code === 200) {
								processes.value = res1.data
							} else {
								showToast('暂无此工艺！')
							}
						} else {
							showToast('暂无此工艺！')
						}
					}
				} else {
					processes.value = itemList.value.processes
				}
				getAction('/tracking/getLog?id=' + itemList.value.id).then((res : any) => {
					if (res.code === 200) {
						processes.value.processes.forEach((m : any) => {
							if (!m.id) {
								let a = res.data.find((l : any) => l.details.zt == m.name)
								if (a) {
									m.rq = a.details.form.czrq
									res.data = res.data.concat(a.details.trackingLog)
								}
							}
						})
						processes.value.processes.forEach((m : any) => {
							let a = res.data.find((l : any) => l.details.zt == m.name)
							if (a) {
								m.rq = a.details.form.czrq
								history.value=history.value.concat(a.details.list)
							}
						})
						let b = res.data.find((l : any) => l.details.zt === '待出厂')
						processes.value.processes[processes.value.processes.length - 1].rq = b.details.form.czrq
						let c = res.data.find((l : any) => l.details.zt === '已出厂')
						history.value=history.value.concat(b.details.list).concat(c.details.list)
						history.value.map((l:any)=>{
							if(l.pic){
								l.pic=[{url:l.pic}]
							}
							if(l.blank){
								l.contentType=l.blank
							}
						})
					}
				})
			} catch (error) {
				console.error('Failed to parse item JSON:', error);
				// 可以选择在这里显示错误消息给用户
			}
		}
	})

	const onClickLeft = () => {
		window.history.back();
	}
</script>

<template>
	<view class="flex">
		<van-nav-bar title="工序详情" left-text="返回" left-arrow @click-left="onClickLeft" />
		<view class="content">
			<van-cell-group inset>
				<van-field v-model="itemList.craft" name="工艺名称" label="工艺名称" colon label-width="5em" readonly />
				<van-field v-model="itemList.craftCmt.name" name="工艺要求" label="工艺要求" colon label-width="5em" readonly />
				<van-field v-model="itemList.innerComment" name="内部备注" label="内部备注" colon label-width="5em" readonly />
				<van-field name="工艺流程" label="工艺流程" colon label-width="5em" readonly />
				<view class="grid-container">
					<view class="grid-item" v-for="(item,index) in processes.processes" :key="index">
						<view :class="item.id?'btn1':'btn2'">{{item.name}}</view>
						<p>{{item.rq}}</p>
					</view>
				</view>
			</van-cell-group>
			<van-cell-group inset>
				<view v-for="(item,index) in history" :key="index">
					<template v-if="item.type==='Select'">
						<van-field v-model="item.value" :name="item.name" :label="item.name" colon class="bor"
							label-width="5em" readonly
							:rules="item.necessary?[{ required: true, message: '请选择' }]:[]"
							/>
					</template>
					<template v-if="item.type==='Input'">
						<van-field v-model="item.value" v-if="item.contentType.find(l=>l=='Text')" :name="item.name"
							:label="item.name" colon class="bor-n" label-width="5em" readonly
							:rules="item.necessary?[{ required: true, message: '请填写' }]:[]" />
						<van-field name="uploader" v-if="item.contentType.find(l=>l=='File')" :label="item.name"
							label-width="5em" colon :rules="item.necessary?[{ required: true, message: '请上传' }]:[]">
							<template #input>
								<van-uploader v-model="item.pic" multiple :max-count="1" readonly :deletable="false"/>
							</template>
						</van-field>
					</template>
				</view>
			</van-cell-group>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.flex {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		overflow-y: hidden;

		.van-nav-bar {
			width: 100%;
		}

		.grid-container {
			display: grid;
			align-items: top;
			grid-template-columns: 1fr 1fr 1fr;
			padding: 10rpx 15rpx;

			.grid-item {
				display: flex;
				flex-direction: column;
				text-align: center;
				align-items: center;
				margin-top: 10rpx;
			}
		}

		.btn2 {
			border: 1rpx solid red;
			padding: 10rpx 30rpx;
			border-radius: 10rpx;
			background-color: red;
			color: #fff;
		}

		.btn1 {
			border: 1rpx solid #169bd5;
			padding: 10rpx 30rpx;
			border-radius: 10rpx;
			background-color: #169bd5;
			color: #fff;
		}

		.content {
			flex: 1;
			overflow-y: scroll;
			font-size: 16px;
		}
	}

	.bor {
		::v-deep .van-field__control {
			border: 1px solid #d7d7d7;
			text-align: center;
		}
	}

	.bor-n {
		::v-deep .van-field__control {
			border-bottom: 1px solid #d7d7d7;
			text-align: center;
		}
	}

	::v-deep .van-cell {
		padding: 5px !important;
	}

	::v-deep .van-field {
		font-size: 16px;
	}

	::v-deep .van-field__control {
		font-size: 16px;
	}

	.footer-button {
		margin: 20px;
		display: flex;
		justify-content: space-around;
	}
</style>