aircraft-pilot/aircraft/server/order/add.vue

<template>
	<view class="order-add">
		<Topnav :topLevel="1" :title="`${form.orderId?'订单详情':'新增订单'}`" defaultBackColor="#333333"
		 defaultNavTextColor="#333333" showBack :fixed="false" />
		 <view class="order-form">
			 <view class="order-delete" v-if="canDelete">
				 <u-icon name="trash" color="#333" size="46" @click="handleDelete"/>
			</view>
		 	<view class="order-field">
				<u-form ref="uForm" :model="form" label-position="top"
				:label-style="{fontFamily: 'PingFang SC, PingFang SC',
				fontWeight: 'bold',fontSize: '32rpx',color: '#000000'}">
					<u-form-item v-if="form.orderId" label="订单号：" :border-bottom="false">
						<u-input disabled class="field-ninput" placeholder="订单号" v-model="form.orderNo" />
					</u-form-item>
					<u-form-item label="订单类型：" :border-bottom="false">
						<u-input style="opacity: 0.8;" class="field-input" placeholder="请选择订单类型" v-model="form.orderTypeName" type="select" disabled/>
					</u-form-item>
					<u-form-item v-if="form.orderId" label="订单发起人：" :border-bottom="false">
						<u-input disabled class="field-ninput" placeholder="订单发起人" v-model="form.orderInitiator" />
					</u-form-item>
					<u-form-item prop="customerName" required label="客户名称：" :border-bottom="false">
						<u-input class="field-input" placeholder="请选择客户" v-model="form.customerName" 
						type="select" @click="handleSelectScenOrCus('客户')"/>
					</u-form-item>
					<u-form-item prop="phone" required label="手机号码：" :border-bottom="false">
						<u-input class="field-input" placeholder="请选择客户" v-model.number="form.phone"
						type="select" @click="handleSelectScenOrCus('客户')" />
					</u-form-item>
					<u-form-item prop="attractionName" label="景区：" required :border-bottom="false">
						<u-input class="field-input" placeholder="请选择景区" v-model="form.attractionName" 
						@click="handleSelectScenOrCus('景区')" type="select"/>
					</u-form-item>
					<u-form-item prop="routeIds" label="路线：" required :border-bottom="false">
						<!-- <u-input class="field-input" placeholder="请选择路线" v-model="form.routeIds" 
						type="select"/> -->
						<w-select class="field-w-select" v-model="form.routeIds" multiple
						    :list="routes" valueName="value" keyName="key" @change="changeRoute"
							placeholder="请选择路线" width="100%" bgColor="#f8f9fb">
						</w-select>
					</u-form-item>
					<u-form-item prop="cargoWeight" required label="货物重量：" :border-bottom="false">
						<u-input class="field-ninput" type="number" placeholder="请输入货物重量（最多保留两位小数）" v-model.number="form.cargoWeight" />
						<view slot="right" class="field-input-right">KG</view>
					</u-form-item>
					<u-form-item prop="surchargeAmount" required label="附加费：" :border-bottom="false">
						<u-input type="number" class="field-ninput" placeholder="请输入附加费（最多保留两位小数）" v-model.number="form.surchargeAmount" />
						<view slot="right" class="field-input-right">元</view>
					</u-form-item>
					<u-form-item prop="operatorIds" label="操作员：" required :border-bottom="false">
						<w-select class="field-w-select" v-model="form.operatorIds" multiple
						    :list="operators" valueName="name" keyName="id"
							placeholder="请选择操作员" width="100%" bgColor="#f8f9fb">
						</w-select>
					</u-form-item>
					<u-form-item v-if="form.orderId" label="下单时间：" :border-bottom="false">
						<u-input disabled class="field-ninput" placeholder="下单时间" v-model="form.orderCreateTime" />
					</u-form-item>
					<u-form-item v-if="form.orderId" :label="`订单确认人${ ['未进行','已取消'].includes(form.mainOrderStatus)
					?'':(form.mainOrderStatus==='已完成'?'（已确认）':'（待确认）')}：`" :border-bottom="false">
						<u-input disabled class="field-ninput" placeholder="订单确认人" v-model="form.customerName" />
					</u-form-item>
					<view class="field-btns" v-if="(!form.orderInitiatorId||form.orderInitiatorId===userMessage.id)&&
					(!form.mainOrderStatus||form.mainOrderStatus!=='已完成'||form.mainOrderStatus!=='已取消')">
						<u-button type="warning" :custom-style="customStyle" style="width: 100%;" v-if="!isDisable"
						:hair-line="false" @click="saveOrder" :loading="saveLoading">保存</u-button>
						<u-button :style="{marginLeft: isDisable?'0rpx':'30rpx',width: '100%'}" type="warning" 
						v-if="canFinish" :custom-style="customStyle" :hair-line="false" @click="finishOrder">
							完成订单
						</u-button>
					</view>
				</u-form>
		 	</view>
		 </view>
		 <u-picker mode="selector" v-model="showScenOrCus" :range="scenOrCusType==='景区'?scenics:customers" 
		 :default-selector="getDefaultSelector" range-key="name" confirm-color="#f7c04d" 
		 :title="scenOrCusType+'选择'" @confirm="handleConfirmScenOrCus"/>
		 <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import Topnav from '@/components/topnav/index.vue';
import configService from '@/common/config.service.js';
import WSelect from '@/components/w-select/w-select.vue';
export default {
	// #ifdef MP
	options: {
		styleIsolation: 'shared'
	},
	// #endif
	components: { Topnav, WSelect },
	data(){
		return{
			// #ifdef MP
			// 微信小程序自定义导航栏参数
			CustomBar: this.CustomBar || 0,
			// #endif
			// 订单类型
			form:{
				orderId: '',
				orderType: 1,
				orderTypeName: '载物订单',
				customerName: '',
				customerId: '',
				phone: '',
				attractionName: '',
				attractionId: '',
				surchargeAmount:'',
				cargoWeight: '',
				operatorIds: [],
				routeIds: []
			},
			// 订单类型
			orderTypes:[],
			// 校验规则
			rules:{
				customerName: [{
					required: true,
					message: '请选择客户',
					trigger: ['change','blur']
				}],
				phone: [{
					required: true,
					message: '请选择客户',
					trigger: ['change','blur']
				}],
				attractionName: [{
					required: true,
					message: '请选择景区',
					trigger: ['change','blur']
				}],
				cargoWeight: [{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						return this.$u.test.amount(value);
					},
					message: '货物重量格式不正确',
					// 触发器可以同时用blur和change
					trigger: ['change','blur'],
				}],
				surchargeAmount: [{
					validator: (rule, value, callback) => {
						return value&&/^-?\d*\.?\d+$/.test(value);;
					},
					message: '附加费格式不正确',
					trigger: ['change','blur']
				}],
				routeIds: [{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						return value&&value.length>0;
					},
					message: '请至少选择一条路线',
					// 触发器可以同时用blur和change
					trigger: ['change','blur'],
				}],
				operatorIds: [{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						return value&&value.length>0;
					},
					message: '请至少选择一位操作员',
					// 触发器可以同时用blur和change
					trigger: ['change','blur'],
				}],
			},
			// 执行任务按钮样式
			customStyle: {
				backgroundColor: '#FEE547',
				color: '#333333',
				fontSize: '30rpx',
				fontWeight: 'bold',
				fontFamily: 'Source Han Sans SC',
				padding: '20rpx 0',
				borderRadius: '12rpx',
				border: 'none'
			},
			// 景区列表
			scenics: [],
			// 客户列表
			customers: [],
			// 操作员列表
			operators: [],
			// 路线列表
			routes: [],
			// 保存加载
			saveLoading: false,
			// 用户信息
			userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
			isPilot: this.$store.state.user_type == 1,
			// 景区/客户选择弹窗
			showScenOrCus: false,
			// 当前景区/客户选择类型
			scenOrCusType: '',
			// 订单状态
			orderStatus: ['进行中','已完成','已取消','待确认'],
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	computed:{
		// 获取选择器默认值
		getDefaultSelector(){
			const isScen = this.scenOrCusType === '景区';
			const arr = isScen ? this.scenics : this.customers;
			const index = this.form[isScen?'attractionId':'customerId'];
			return index?[arr.findIndex(item=>item.id === index)]:[0];
		},
		// 判断是否可以完成订单
		canFinish(){
			/*
			 1.编辑
			 2.订单状态不处于已完成、已取消、未进行、飞行员-待确认
			 3.飞行员-订单发起人||客户-确认人
			 4.不存在飞行任务为未进行或进行中的状态
			 */
			const { orderId, mainOrderStatus, orderTaskDetailList, orderInitiatorId, customerId } = this.form;
			return orderId&&(!mainOrderStatus||mainOrderStatus!=='未进行')&&
				(this.isPilot&&orderInitiatorId==this.userMessage.id&&mainOrderStatus!=='待确认'||
				!this.isPilot&&customerId==userMessage.id)&&(!orderTaskDetailList||
				orderTaskDetailList.some(item=>item.orderItemStatus!=='未进行'&&item.orderItemStatus!=='进行中'));
		},
		// 判断是否可以删除
		canDelete(){
			const { orderId, orderInitiatorId, mainOrderStatus, orderTaskDetailList } = this.form;
			return orderId&&this.isPilot&&orderInitiatorId==this.userMessage.id
			 &&(!mainOrderStatus||mainOrderStatus==='未进行')&&(!orderTaskDetailList||orderTaskDetailList.length===0);
		},
		// 判断是否禁用保存
		isDisable(){
			/* 
			 1.订单状态不处于已完成、已取消
			 2.存在飞行任务为进行中、已完成、已取消、待确认状态
			 */
			const { orderTaskDetailList } = this.form;
			return orderTaskDetailList&&orderTaskDetailList.length>0;
		}
	},
	onLoad(e) {
		this.form.orderId = e.id || '';
		this.init();
	},
	methods: {
		// 初始化
		async init(){
			// 获取客户列表
			let cusRes = await this.$api.allCustomers();
			if(!cusRes){
				this.$refs.uToast.show({type: 'error',title: "客户获取失败!"});
			}else{
				this.customers = cusRes || [];
			}
			// 获取负责区域的景区列表
			let selfRes = await this.$api.aSelfDetail(this.userMessage.id);
			if(!selfRes){
				this.$refs.uToast.show({type: 'error',title: "个人信息获取失败!"});
			}else{
				if(selfRes.areaId){
					let scenRes = await this.$api.allScenicsByAreaId({areaId: selfRes.areaId});
					// 获取操作员列表
					let opeRes = await this.$api.allEmployees({areaId: selfRes.areaId});
					this.scenics = scenRes || [];
					this.operators = opeRes || [];
				}
			}
			// 获取订单详情
			if(this.form.orderId) this.getOrderDetail();
			else {
				const userId = this.userMessage.id;
				const op = this.operators.find(item=>item.id===userId);
				if(op){
					this.form.operatorIds.push(op);
					this.operators = this.operators.filter(item=>item.id!==userId);
				}
			}
		},
		// 获取订单详情
		async getOrderDetail(){
			let res = await this.$api.orderDetail(this.form.orderId);
			if(res){
				const { id, customerName, phone, scenicName, surchargeAmount, cargoWeight, 
				orderNo, orderCreateTime, orderInitiator, orderInitiatorId, mainOrderStatus,
				 customerId, attractionId, routeIds, operatorIds, orderTaskDetailList } = res;
				this.form = {
					orderId: id,
					orderNo: orderNo,
					orderType: 1,
					orderTypeName: '载物订单',
					customerName: customerName,
					customerId: customerId,//
					phone: phone,
					attractionName: scenicName,
					attractionId: attractionId,//
					surchargeAmount: surchargeAmount,
					cargoWeight: cargoWeight,
					operatorIds: [],
					routeIds: [],
					orderInitiator: orderInitiator,
					orderCreateTime: orderCreateTime,
					orderInitiatorId: orderInitiatorId,
					orderTaskDetailList: orderTaskDetailList,
					mainOrderStatus: mainOrderStatus
				}
				let resp = await this.$api.allRoutesByScenicId(attractionId);
				if(resp){
					this.routes = resp || [];
					this.form.routeIds = resp.filter(item=> routeIds.includes(item.key));
					this.form.operatorIds = this.operators.filter(item=> operatorIds.includes(item.id));
					this.operators = this.operators.filter(item=>item.id!==orderInitiatorId);
				} else {
					this.$refs.uToast.show({type: 'error',title: "景区路线获取失败!"});
				}
			} else 
			this.$refs.uToast.show({type: 'error',title: "订单详情获取失败!"});
		},
		// 删除订单
		handleDelete(){
			let that = this;
			uni.showModal({
				title: '提示',
				content: '是否确认删除该订单？',
				confirmColor: '#FE020E',
				success: async(res) => {
					if (res.confirm) {
						try {
							let res = await that.$api.deleteOrder(that.form.orderId);
							if(res === undefined){
								that.$refs.uToast.show({type: 'error',title: "订单详删除失败!"});
								return;
							}
							uni.navigateBack({complete() {
								that.$u.toast('订单删除成功!');
							}})
						} catch (error) {
							that.$refs.uToast.show({type: 'error',title: "订单详删除失败!"});
						}
					}
				}
			})
		},
		// 选择路线
		changeRoute(e){
		},
		// 点击打开景区/客户选择弹窗
		handleSelectScenOrCus(type){
			this.scenOrCusType = type;
			this.showScenOrCus = true;
		},
		// 选择景区
		async handleConfirmScenOrCus(index){
			if(this.scenOrCusType === '景区'){
				const val = this.scenics[index[0]];
				this.form.attractionName = val.name;
				this.form.attractionId = val.id;
				this.form.routeIds = [];
				let res = await this.$api.allRoutesByScenicId(val.id);
				if(res){
					this.routes = res || [];
					this.form.routeIds = res.length>0?[res[0]]:[];
				}else{
					this.$refs.uToast.show({type: 'error',title: "景区路线获取失败!"});
				}
			}else{
				const val = this.customers[index[0]];
				this.form.customerId = val.id;
				this.form.customerName = val.name;
				this.form.phone = val.phone;
			}
		},
		// 订单保存
		saveOrder(){
			try{
				let that = this;
				this.saveLoading = true;
				this.$refs.uForm.validate(async(valid) => {
					if (valid) {
						const data = {...that.form,operatorIds:that.form.operatorIds.map(item=>item.id),
						routeIds:that.form.routeIds.map(item=>item.key),
						orderCreateTime:that.$u.timeFormat(new Date().getTime(),'yyyy-mm-dd hh:MM:ss')}
						console.log('验证通过',that.form);
						let res = that.form.orderId ? await that.$api.editOrder(data) : await that.$api.addOrder(data);
						that.saveLoading = false;
						uni.navigateBack({complete() {
							that.$u.toast(`订单${that.form.orderId?'编辑':'新增'}成功!`);
						}})
					}else{
						that.saveLoading = false;
					}
				});
			}catch(e){
				this.saveLoading = false;
				this.$refs.uToast.show({type: 'error',title: "订单新增失败!"});
			}
		},
		// 完成订单
		async finishOrder(){
			let that = this;
			if(!this.form.orderTaskDetailList || this.form.orderTaskDetailList.length === 0){
				this.$refs.uToast.show({type: 'warning',title: "该订单不存在飞行任务，无法完成!"});
				return;
			}
			uni.showModal({
				title: '订单完成',
				content: '是否确认完成该订单？',
				confirmColor: '#f7c04d',
				success: async(res) => {
					if (res.confirm) {
						try {
							let res = await that.$api.completeOrder(that.form.orderId);
							if(res === undefined){
								that.$refs.uToast.show({type: 'error',title: "订单完成操作失败!"});
								return;
							}
							that.$refs.uToast.show({type: 'success', title: `订单完成操作成功!`});
							that.init();
						} catch (error) {
							that.$refs.uToast.show({type: 'error', title: `订单完成操作失败!`});
						}
					}
				}
			})
		},
	}
}
</script>

<style scoped lang="scss">
.order-add{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
	.order-delete{
		position: absolute;
		right: 50rpx;
		z-index: 1;
		&:active{
			opacity: 0.7;
		}
	}
	.order-form{
		padding: 30rpx 32rpx 52rpx;
		display: flex;
		flex-direction: column;
		.order-field{
			&::v-deep .u-form-item--left__content--required{
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FE020E;
				margin-right: 8rpx !important;
			}
			&::v-deep .u-input{
				padding: 12rpx 32rpx !important;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				line-height: 40rpx;
				background: #F8F9FB;
				border-radius: 4rpx;
			}
			.field-ninput{
				&::v-deep .u-input{
					padding: 12rpx 80rpx 12rpx 32rpx !important;
				}
			}
			.field-w-select{
				&::v-deep .w-select{
					.select-wrap{
						border: none !important;
						min-height: var(--select-wrap-height);
						height: inherit;
					}
					padding: 12rpx 32rpx !important;
					background: #F8F9FB;
					border-radius: 4rpx;
				}
				&::v-deep .select-options{
					.item-active{
						color: #f7c04d !important;
						background-color: #f5f5f5 !important;
					}
				}
				&::v-deep .select-content-item-default{
					margin-left: 0 !important;
					margin-right: 0 !important;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #c0c4cc;
				}
			}
			.field-input-right{
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-left: -80rpx;
				z-index: 1;
			}
			.field-btns{
				width: 100%;
				margin-top: auto;
				margin-bottom: 30rpx;
				padding-top: 30rpx;
				display: flex;
				align-items: center;
			}
		}
	}
}
</style>