ckgl/pages/spot/audit.vue

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
import { putAction } from '../../common/http';
import { showToast } from 'vant';


	onLoad((option : any) => {
		form.value = JSON.parse(option.item)
	})

	const onClickLeft = () => {
		history.back()
	}

	const form = ref({} as any)
	
	const submit = () =>{
		let url='/interOrder/check/'+form.value.id+'?comment='+form.value.comment
		putAction(url,form.value.fabric).then((res:any)=>{
			if(res.code===200){
				showToast('审核通过！')
				uni.navigateBack()
			}
		})
	}
	const reject = () =>{
		let url='/interOrder/reject/'+form.value.id
		putAction(url).then((res:any)=>{
			if(res.code===200){
				showToast('驳回成功！')
				uni.navigateBack()
			}
		})
	}
</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="form.id" name="需求单号" label="需求单号" colon label-width="5em" readonly />
				<van-field v-model="form.makeTime" name="做单日期" label="做单日期" colon class="bor" label-width="5em"
					readonly />
				<van-field v-model="form.makeUser" name="做单人" label="做单人" colon label-width="5em" readonly />
				<van-field v-model="form.color" name="颜色色号" label="颜色色号" colon readonly label-width="5em" />
				<van-field v-model="form.craft" name="工艺" label="工艺" colon readonly label-width="5em" class="bor" />
				<view class="a-b">
					<van-button type="primary">面料添加</van-button>
				</view>
				<view class="grid-container">
					<view class="grid-item">面料名称</view>
					<view class="grid-item">匹数</view>
					<view class="grid-item">库存</view>
					<view class="grid-item">谁定</view>
					<view class="grid-item">操作</view>
				</view>
				<view class="grid-container" v-for="(item,index) in form.fabric" :key="index">
					<view class="grid-item">{{item.name}}</view>
					<view class="grid-item">
						<van-field v-model="item.quantity" class="bor" type="number" />
					</view>
					<view class="grid-item">{{item.storageQuantity}}</view>
					<view class="grid-item">{{item.belongTo}}</view>
					<view class="grid-item" style="color: red;" @click="form.fabric.splice(index,1)">删除</view>
				</view>
				<van-field v-model="form.comment" name="备注" label="备注" colon label-width="5em"/>
			</van-cell-group>
			<view style="margin: 16px;display: flex;align-items: center;justify-content: space-between;">
				<van-button round block type="danger" @click="reject">
					驳回
				</van-button>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<van-button round block type="primary" @click="submit">
					通过
				</van-button>
			</view>
		</view>
	</view>
</template>

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

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

		.content {
			flex: 1;
			padding: 0 10px;

			.grid-container {
				display: grid;
				grid-template-columns: 2fr 1fr 1fr 2fr 1fr;

				.grid-item {
					border: 1px solid #f2f2f2;
					text-align: center;
					padding: 15rpx 0;

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

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

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

	.a-b {
		margin: 10rpx;

		::v-deep .van-button--normal {
			padding: 5px 8px;
			height: 30px;
		}
	}

	.a-c {
		display: flex;
		align-items: center;

		::v-deep .van-button--normal {
			padding: 8rpx;
			height: 50rpx;
			width: 7em;
		}
	}

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

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

	::v-deep .van-field__label {
		text-align: end;
	}

	/*面料选择搜索框*/
	.select-model {
		position: relative;
	}

	.confirm-select {
		width: 100%;
	}

	.confirm-select>p {
		text-align: center;
	}

	.confirm-select>button {
		border: none;
		background-color: #ffffff;
		color: #388aed;
		margin: 10px 30px 0 0;
	}

	.top-select {
		position: absolute;
		top: 30px;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
	}

	::v-deep .select-model .van-picker__toolbar {
		height: 66px;
		align-items: flex-start;
		/*justify-content: flex-end;*/
	}

	::v-deep .select-model .van-picker__cancel,
	.select-model .van-picker__confirm {
		height: 30px;
		padding: 10px 16px 0;
	}

	.search-btn {
		padding: 1px 8px;
		border: none;
		background-color: #388aed;
		color: #ffffff;
		margin-left: 5px;
		height: 30px;
		line-height: 25px;
	}

	.search-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding-top: 15px;
		padding-bottom: 5px;
		position: relative;
		background-color: #fff;
	}

	.van-search {
		background-color: #f7f7f8;
	}

	.ml-search-jump {
		padding: 3px 10px;
		background-color: #388aed;
		color: #ffffff;
		border: none;
		margin-left: 10px;
	}

	.flex-btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
</style>