FleetManagement-MPWEIXIN/Order/pages/created/index.vue

<template>
	<view class="created-body flex column">
		<order-item v-if="orderData" :order-data='orderData' type="card"></order-item>
		<view class="oneflex">
			<view class="created-form">
				<view class="created-form-item flex ac">
					<view class="created-form-item-label"><text style="color: red;">*</text>选择车牌：</view>
					<view @click="showSelect('plate')" class="created-form-item-value flex oneflex flex-end">
						<view :class="submitData.plateNumber?'':'selectPlaceholder'" class="oneflex  textov">
							{{ submitData.plateNumber ||'请选择车牌'}}
						</view>
						<uni-icons type="right" size="20" color="#999999"></uni-icons>
					</view>
				</view>
				<view class="created-form-item flex ac">
					<view class="created-form-item-label">
						<text style="color: red;">*</text>
						选择同城司机：
					</view>
					<view @click="showSelect('drivers')" class="created-form-item-value oneflex">
						<view class="created-form-item-value flex oneflex flex-end">
							<view :class="submitData.driverNames?'':'selectPlaceholder'" class="oneflex  textov">
								{{ submitData.driverNames ||'请选择同城司机'}}
							</view>
							<uni-icons type="right" size="20" color="#999999"></uni-icons>
						</view>
					</view>
				</view>
				<view class="created-form-item flex ac">
					<view class="created-form-item-label"><text style="color: red;">*</text>运费金额：</view>
					<view class="created-form-item-value oneflex">
						<input type="digit" v-model="submitData.freight" placeholder="请输入运费金额" />
					</view>
				</view>
				<view class="created-form-item flex ac">
					<view class="created-form-item-label"><text style="color: red;">*</text>货物类型：</view>
					<view @click="showSelect('cargoType')" class="created-form-item-value oneflex">
						<view class="created-form-item-value flex oneflex flex-end">
							<view :class="submitData.cargoType?'':'selectPlaceholder'" class="oneflex  textov">
								{{ dataMark.CARGO_TYPE[submitData.cargoType]||'请选择货物类型'}}
							</view>
							<uni-icons type="right" size="20" color="#999999"></uni-icons>
						</view>
					</view>
				</view>
				<view class="created-form-item flex ac">
					<view class="created-form-item-label"><text style="color: red;">*</text>发货日期：</view>
					<view class="created-form-item-value oneflex">
						<uni-datetime-picker v-model="submitData.departureDate">
							{{submitData.departureDate||'选择发货日期'}}
						</uni-datetime-picker>
					</view>
				</view>
				<view class="created-form-item flex   jc column">
					<view class="created-form-item-label">
						备注：
					</view>
					<view class="created-form-item-value oneflex">
						<textarea v-model="submitData.remark" placeholder="请输入备注" />
					</view>
				</view>
			</view>
		</view>
		<view class="created-footer flex around">
			<view @click="back" class="cancel flex jc ac">返回</view>
			<view @click="submit" class="submit flex jc ac">提交</view>
		</view>
		<!-- 选择货物类型 -->
		<selectPopup @settle='cargoTypeSettle' :isMultiple="false" :options='cargoTypes' v-model="isCargoType">
			<template #title>请选择货物类型</template>
		</selectPopup>
		<!-- 选择车牌号 -->
		<selectPopup @settle='platesSettle' :isMultiple="false" label='plateNumber' selectValue='plateNumber'
			:options='plates' v-model="isPlateSelect">
			<template #title>请选择车牌号</template>
		</selectPopup>
		<!-- 选择司机 -->
		<selectPopup ref='selectDrivers' @settle='settle' label='customerName' selectValue='id' :options='drivers'
			v-model="isDriversSelect">
			<template #title>请选择司机 </template>
			<template #search>
				<uni-easyinput @confirm='searchDrivers' suffixIcon="search" v-model="customerName"
					placeholder="输入司机名字搜索"></uni-easyinput>
			</template>
		</selectPopup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import orderApi from '@/api/order.js'
	import orderItem from "@/components/orderItem/orderItem.vue";
	import selectPopup from '../../../components/selectPopup/selectPopup.vue';
	export default {
		components: {
			orderItem,
			selectPopup
		},
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				user: uni.getStorageSync('user'),
				dataMark: uni.getStorageSync('dataMark') || null,
				cargoTypes: [],
				isCargoType: false,
				customerName: '',
				isDriversSelect: false,
				drivers: [],
				isPlateSelect: false,
				plates: [],
				checkPage: {
					plateNumber: {
						tacitly: '',
						WrongText: '车牌不能为空'
					},
					freight: {
						tacitly: '',
						custom:/^\d+(?=\.{0,1}\d+$|$)/,
						WrongText: '运费金额不能为空且必须为数字'
					},
					cargoType: {
						tacitly: '',
						WrongText: '货物类型不能为空'
					},
					departureDate: {
						tacitly: '',
						WrongText: '发货日期不能为空'
					}
				},
				submitData: {
					"remark": "",
					"freight": "",
					"status": "1",
					"cargoType": "",
					"drivers": "",
					"driverNames": "",
					"departureDate": "",
					"orderType": "2",
					"plateNumber": ""
				},
				orderData: null,
			}
		},
		created() {
			this.init();
		},
		onLoad() {},
		methods: {
			back() {
				uni.navigateBack()
			},
			init() {
				this.getDrivers();
				this.getPlates();
				this.getCargoTypes();
				this.settle()
			},
			getCargoTypes() {
				let dataMark = this.dataMark;
				if (dataMark && dataMark.CARGO_TYPE) {
					this.cargoTypes = Object.keys(dataMark.CARGO_TYPE).map(item => {
						return {
							label: dataMark.CARGO_TYPE[item],
							value: item
						}
					})
				} else {
					this.cargoTypes = []
				}
			},
			cargoTypeSettle(e) {
				if (e) {
					this.submitData.cargoType = e.value;
				} else {
					this.submitData.cargoType = "";
				}
			},
			platesSettle(e) {
				this.submitData.plateNumber = e ? e.plateNumber : '';
			},
			settle(drivers = []) {
				drivers = [{
						customerName: this.user.name,
						id: this.user.driverId
					},
					...drivers
				]
				this.submitData.driverNames = drivers.map(item => item.customerName).join(',');
				this.submitData.drivers = drivers.map(item => item.id).join(',');
			},
			searchDrivers() {
				this.getDrivers()
			},
			getDrivers() {
				orderApi.getCustomersByName({
					customerName: this.customerName
				}).then(res => {
					this.drivers = res.data.filter(item => item.id !== this.user.driverId);
				})
			},
			getPlates() {
				orderApi.findByPlateNumber({
					companyId:this.user.userCompany,
					"plateNumber": ""
				}).then(res => {
					this.plates = res.data;
				})
			},
			showSelect(e) {
				switch (e) {
					case 'plate':
						this.isPlateSelect = true;
						break;
					case 'drivers':
						this.isDriversSelect = true;
						break;
					case 'cargoType':
						this.isCargoType = true;
						break;
					default:
						break;
				}
			},
			whenChanged(e) {
				console.log(JSON.stringify(e))
				this.options = e
			},
			change(e) {
				console.log("e:", e);
			},
			submit() {
				let chenkResult = this.tool.checkFn(this.submitData, [], this.checkPage);
				if (chenkResult.result) {
					orderApi.createOrder(this.submitData).then(res => {
						if (res.code == 20000) {
							uni.showToast({
								icon: "success",
								title: "操作成功"
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						title: 'error',
						message: chenkResult.WrongText,
					}) 
				}
			},
			imageRemove(uploadImages = this.submitData.proofsList, index) {
				this.submitData.proofsList.splice(index, 1);
			},
			previewImage(uploadImages = this.submitData.proofsList, index = undefined) {
				if (index !== undefined && uploadImages[index] !== undefined) {
					uni.previewImage({
						current: index,
						urls: uploadImages.map(item => item.imageUrl),
						longPressActions: {
							success: function(data) {},
							fail: function(err) {}
						}
					});
				} else {
					console.log('数据错误=>', ...arguments)
				}
			},
			uploadImagesFn() {
				this.tool.chooseImage((imageUrl) => {
					this.submitData.proofsList.push({
						imageUrl
					});
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-select {
		border: none !important;
	}

	@import 'index.scss';
</style>