siji/pages/order/waybill.vue

<template>
	<view class="container">
		<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="120">


			<u-form-item label="姓名" prop="form.waybill_name" borderBottom ref="item1">
				<u--input v-model="form.waybill_name" border="none" placeholder="请输入运单上报人"></u--input>
			</u-form-item>
			<u-form-item label="提货日期" prop="form.waybill_date" borderBottom ref="item1">
				<view class="input_sbtn" style="display: flex;" @click="show_calendar = true">
					<u--input v-model="form.waybill_date" border="none" placeholder="请选择提货日期"></u--input>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="牵引车牌" prop="form.tow_license" borderBottom ref="item1">
				<car-number-input class="car-number-input" @numberInputResult="numberInputResult"
					:defaultStr="form.tow_license"></car-number-input>
			</u-form-item>
			<u-form-item label="挂车车牌" prop="form.mount_license" borderBottom ref="item1">
				<car-number-input class="car-number-input" @numberInputResult="numberInputResult2"
					:defaultStr="form.mount_license"></car-number-input>
			</u-form-item>
			<u-form-item label="手机号" prop="form.driver_tel" borderBottom ref="item1">
				<u--input v-model="form.driver_tel" border="none" placeholder="请输入手机号"></u--input>
			</u-form-item>
			<u-form-item label="产品名称" prop="form.sale_product" borderBottom ref="item1">
				<u--input v-model="form.sale_product" border="none" placeholder="请输入产品名称"></u--input>
			</u-form-item>
			<u-form-item label="装货单位" prop="form.waybill_loading" borderBottom ref="item1">
				<view class="input_sbtn" style="display: flex;">
					<u--input v-model="form.waybill_loading" border="none" placeholder="请输入装货单位"></u--input>
					<u-button text="选择企业" size="small" style="width: 60px;" @click="show_qiye = true"></u-button>
				</view>
			</u-form-item>

			<u-form-item label="卸货单位" prop="form.waybill_unloading" borderBottom ref="item1">
				<u--input v-model="form.waybill_unloading" border="none" placeholder="请输入卸货单位"></u--input>
			</u-form-item>
			<u-form-item label="入园目的" prop="form.w_mission" borderBottom ref="item1">
				<view class="input_sbtn" style="display: flex;" @click="show_mudi = true">
					<u--input v-model="form.w_mission" border="none" placeholder="请选择入园目的"></u--input>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="装卸货品类" prop="form.cargocategory" borderBottom ref="item1">
				<view class="input_sbtn" style="display: flex;" @click="show_cate = true">
					<u--input v-model="form.cargocategory" border="none" placeholder="请选择货物品类"></u--input>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</u-form-item>

			<u-form-item label="数量(吨)" prop="cargocount" borderBottom ref="item1">
				<u--input v-model="form.cargocount" border="none" type="number" placeholder="请输入装卸货数量"></u--input>
			</u-form-item>


		</u--form>

		<u-button type="primary" class="btn" text="提交信息" shape="circle" @click="add"></u-button>

		<u-picker :show="show_mudi" :columns="columns_mudi" @confirm="confirmMudi"
			@cancel="show_mudi = false"></u-picker>

		<u-picker :show="show_qiye" :columns="enterpriseData" keyName="name" @confirm="confirmQiye"
			@cancel="show_qiye = false"></u-picker>

		<u-picker :show="show_cate" ref="uPicker" keyName="name" :columns="columns" @confirm="confirmCate"
			@change="changeHandler" @cancel="show_cate = false"></u-picker>

		<u-calendar :show="show_calendar" @confirm="confirm_calendar"></u-calendar>
	</view>

</template>

<script>
	import config from '../../common/config'
	import {
		get,
		post
	} from '@/common/request.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				show_calendar: false,
				show_mudi: false,
				columns_mudi: [
					['装货', '卸货']
				],
				show_cate: false,
				columns: [],
				columnData: [],
				form: {
					w_mission: "", //入园目的
					cargocategory: "", //装/卸货品类
					waybill_date: currentDate,
					tow_license: "", //牵引车牌号
					mount_license: "", //挂车车牌号
					driver_tel: config.driverInfo.phone, //司机电话
					sale_product: "", //销售产品
					waybill_name: config.driverInfo.account, //运单人
					waybill_loading: "", //装货单位
					waybill_unloading: "", //卸货单位
					cargocount: "", //装/卸货数量
				},
				rules: {},
				categoryData: [],
				enterpriseData: [],
				show_qiye:false
			}
		},
		onLoad() {
			this.getProductCate()
			this.getEnterpriseList()
		},
		methods: {
			async add() {
				await post('/myapi/api/yq_driver/waybillReport',{...this.form}).then((res) => {
				
					if (res.code == 1) {
						uni.showToast({
							title:'上报成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/order/order'
							})
						},500)
					}
				}).catch((err) => {
					// 错误信息已经在 request.js 中处理并显示
					console.error('上报失败:', err);
				})
			},
			confirmMudi(e) {
				this.form.w_mission = e.value[0]
				this.show_mudi = false
			},
			confirmCate(e) {
				this.form.cargocategory = e.value[1].name
				this.form.cargocategoryId = e.value[1].id
				this.show_cate = false
			},
			changeHandler(e) {
				if (e.columnIndex === 0) { // 仅在第一列变化时更新
					const parentIndex = e.index;
					// 更新第二列数据
					this.$set(this.columns, 1, this.categoryData[parentIndex].son || []);
				}
			},
			confirm_calendar(e) {
				this.form.waybill_date = e[0]
				this.show_calendar = false
			},
			confirmQiye(e) {
				this.form.waybill_loading = e.value[0].name
				this.show_qiye = false
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 10;
				} else if (type === 'end') {
					year = year + 10;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			numberInputResult(e) {
				this.form.tow_license = e
			},
			numberInputResult2(e) {
				this.form.mount_license = e
			},
			async getProductCate() {
				await get('/myapi/api/yq_driver/getProductCate').then((res) => {

					if (res.data && res.data.length > 0) {
						this.categoryData = res.data
						// 初始化columns：第一列是顶级分类，第二列是第一个顶级分类的子分类
						// 第一列：父级分类
						this.columns = [
							// 第一列：父级分类
							res.data.map(item => ({
								id: item.id,
								name: item.name
							})),
							// 第二列：第一个父级的子分类
							res.data[0].son || []
						];
					}
				})
			},
			async getEnterpriseList() {
				await get('/myapi/api/yq_driver/getEnterpriseList').then((res) => {
					this.enterpriseData = [
						res.data.map(item => ({
							id: item.id,
							name: item.name
						})),
					];
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.u-form-item__body__right__icon {
		color: #c0c4cc;
	}

	.car-number-input {
		width: 100%;
	}

	.container {
		padding: 20px;

		.tag_title {
			width: 80px;
			height: 30px;
			display: flex;
			align-items: center;
		}

		.btn {
			margin-top: 20px;
		}
	}
</style>