2025-03-JS-SDK-PDA/pages/tms/features/check/index.vue

<template>
	<view style="background-color:white">
		<u-navbar back-text="返回" title="装车审核" :background="background"></u-navbar>
		<u-form ref="testForm">
			<u-form-item :border-bottom="false">
				<label>选择车牌:</label>&nbsp;&nbsp;&nbsp;&nbsp;
				<zxzUniDataSelect filterable v-model="model.carNum" :localdata="carNumList" @change="changeCarNum">
				</zxzUniDataSelect>
			</u-form-item>
			<u-form-item :border-bottom="false">
				<label>发货单:</label>&nbsp;&nbsp;&nbsp;&nbsp;
				<zxzUniDataSelect filterable v-model="model.invoice" :localdata="invoiceList" @change="changeInvoice">
				</zxzUniDataSelect>
			</u-form-item>
		</u-form>
		<table style="width: 100%;" align="center">
			<thead>
			  <tr align="center">
				<th style="width: 40%;">选项</th>
				<th style="width: 60%;">发货单</th>
			  </tr>
			</thead>
			<tbody>
			  <tr v-for="(item,index) in deliveryDetailList" align="center" :key="index">
				<td style="width: 40%;"><my-check-box v-model="item.selected"></my-check-box></td>
				<td style="width: 60%;">{{ item.invoice }}</td>
			  </tr>
			</tbody>
		</table>
		<view class="flex" style="margin-top: 20px; padding-bottom: 10px;">
			<button type="primary" size="mini" @click="confirm">确定</button>
			<button type="warn" size="mini" @click="batchDel">删除选中</button>
		</view>
	</view>
</template>

<script>
	import zxzUniDataSelect from "@/components/zxz-uni-data-select/zxz-uni-data-select.vue"
	import myCheckBox from "@/components/my-check-box/my-check-box.vue"
	
	export default {
		components: {
			zxzUniDataSelect,
			myCheckBox
		},
		data() {
			return {
				title: 'Hello',
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				model:{},
				carNumList: [],
				invoiceList: [],
				deliveryDetailList: [],
				baseUrl: 'http://localhost:9001/tms',
				url: {
					getVehicleInOut: "/vehicleinout/vehicleInOut/getVehicleInOut",
					getShip: "/deliverydemand/deliveryDemand/getShip",
					confirm: "/vehicleinoutdetail/vehicleInOutDetail/confirm",
					getByVehicleInOutId: '/vehicleinoutdetail/vehicleInOutDetail/getByVehicleInOutId'
				}
			}
		
		},
		mounted() {
			this.getCarNum();
			this.getShip();
		},
		methods: {
			getCarNum(){
				this.getRequest(this.url.getVehicleInOut,{},'GET').then(res => {
					if (res.success) {
						this.carNumList = res.result.map(item => ({
							text: item.carNum,
							value: item.id,
						}));
					}
				})
			},
			getShip(){
				this.getRequest(this.url.getShip,{},'GET').then(res => {
					if (res.success) {
						this.invoiceList = res.result.map(item => ({
							text: item,
							value: item,
						}));
					}
				})
			},
			getByVehicleInOutId(id){
				this.getRequest(this.url.getByVehicleInOutId,{vehicleInOutId: id},'GET').then(res => {
					if (res.success) {
						this.deliveryDetailList = res.result;
					}
				})
			},
			changeCarNum(){
				this.getByVehicleInOutId(this.model.carNum);
			},
			changeInvoice(){
				let hasEven = this.deliveryDetailList.some((item) => {
				  return item.invoice == this.model.invoice;
				});
				if(hasEven){
				  this.$showMessage("列表中已存在 "+this.model.invoice);
				  return;
				}
				this.deliveryDetailList.push({invoice: this.model.invoice, selected:false})
			},
			batchDel(){
				this.deliveryDetailList = this.deliveryDetailList.filter(x => x.selected===false)
			},
			confirm(){
				console.log(this.model.carNum);
				if(!this.model.carNum){
					this.$showMessage("请选择车牌！");
					return;
				}
				if(this.deliveryDetailList.length == 0){
					this.$showMessage("列表不能为空");
					return;
				}
				this.model.deliveryDetailList = this.deliveryDetailList
				this.getRequest(this.url.confirm,this.model).then(res => {
					if (res.success) {
						this.$showMessage(res.result);
						this.model = {}
						this.deliveryDetailList = []
					} else {
						this.$showMessage(res.message);
					}
				})
			},
			getRequest(url='',data={},method='',){
				return new Promise((resolve, reject) => {
					uni.request({
						url: this.baseUrl + url, //请求的地址是拼接后的真正地址
						method: method||'POST',
						header: {
							'Content-type': 'application/json;charset=utf-8',
						}, //请求头会把数据转为Json格式	
						'timeout': 600000,							
						data:data,//调用此方法时的传进来的参数
						success:(res)=>{
							// console.log(res)
							resolve(res.data)//把数据返回出去
						},
						fail:(err)=>{
							// console.log(res)
							resolve(err)
						}
					})
				})
			}
		}
	}
</script>

<style scoped>
</style>