236 lines
7.2 KiB
Vue
236 lines
7.2 KiB
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)
|
||
}
|
||
})
|
||
},
|
||
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> |