pco/app-ui/pages/onely-disinfect/type-business.vue

<template>
	<view>
		<view class="box">
			<view class="top">
				<text class="title">{{ goods.name }}</text>
			</view>
			<view class="item" v-if="goods.needCustomer==1">
				<view class="l">客户：</view>
				<view class="r" style="flex: 12;">
					<picker  v-if="customer.customerList.length>0" class="p-picker"
						@change="customerChange($event)" :value="customer.index" :range="customer.customerList"
						range-key="name">
						<text class="p-text">{{ customer.customerList[customer.index].name }}</text>
					</picker>
				</view>
			</view>
			<view class="item" v-if="goods.needOwner==1">
				<view class="l">
					<text style="color: red;">*</text>
					货物：
				</view>
				<view class="r">
					<u-input placeholder="输入货物" v-model="form.businessGoodsName">
					</u-input>
				</view>
			</view>
			<view class="item">
				<view class="l">
					<text style="color: red;" v-if="goods.needOperateTime">*</text>
					数量(件)：
				</view>
				<view class="r">
					<u-input v-model="form.businessGoodsNum" type="number">
					</u-input>
				</view>
			</view>
			<view class="item">
				<view class="l">作业人员：</view>
				<view class="r">
					<u-input placeholder="输入作业人员" v-model="form.operator">
					</u-input>
				</view>
			</view>

			<view class="item-line">
				<u-row style="height: 40px;">
					<u-col span=4>车辆</u-col>
					<u-col span=8>
						<u-button type="primary" text="添加" @click="addCar" icon="plus" style="width: 60px;height: 26px;"
							v-if="goods.mulCar==1||car.list.length==0" />
					</u-col>
				</u-row>
			</view>
			<view class="item" v-for="(car,index) in car.list" :key="index">
				<view class="l">车牌：</view>
				<view class="r">
					<u-input placeholder="车辆" v-model="car.carNo" readonly>
						<view slot="suffix" style="display: flex;">
							<u-icon @click="editCar(car)" size="20" name="edit-pen-fill" color="blue"></u-icon>
							<u-icon style="margin-left:20rpx;" size="20" @click="delCar(car)" name="close-circle-fill"
								color="red"></u-icon>
						</view>
					</u-input>
				</view>
			</view>
			<view class="item-line" style="margin-top: 30rpx;">
				业务项
			</view>
			<view class="business-list" v-for="(item,index) in typeList">
				<u-row>
					<u-col span="4.5">
						<text>
							<text style="color: red;display: inline;" v-if="item.need==1">*</text>
							{{ item.name }}:
						</text>
					</u-col>
					<u-col span="7.5">
						<u-row>
							<u-col span="10" @click="showSelect(item)">
								{{ item.itemName ? item.itemName : '请选择' }}
							</u-col>
							<u-col span="2" @click="item.itemName='',item.itemId=''" v-if="item.itemId">
								<u-icon style="margin-left:15rpx;display: inline;" size="20" name="close-circle-fill"
									color="red"></u-icon>
							</u-col>
						</u-row>
					</u-col>
				</u-row>
				<view style="display: flex;position: relative;left: 30%;" v-if="item.itemName">
					<u-number-box style="margin-left: 15rpx;" :disabled="item.inc==0" v-model="item.num"></u-number-box>
					<text style="margin-left: 20rpx;color: red;">
						¥{{ item.num * item.price }}
					</text>
					<view style="margin-left: 60rpx;" @click="remarkFn(item)">
						备注
					</view>
				</view>
				<u-line></u-line>
			</view>
			<view class="hj" v-show="totalPrice>0">
				合计：{{ totalPrice }}元
			</view>
		</view>
		<u-button type="primary" text="确定" @click="saveFn" v-show="perList.indexOf('tb-flex-business-add')!==-1">
		</u-button>
		<!-- ---------------------------------------------------------- -->
		<view class="bottom-safety"></view>
		<u-picker :show="show" :columns="columns" @confirm="confirmFn" keyName="itemName" @cancel="show=false">
		</u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				columns: [],
				customerId: '1',
				customer: {
					index: 0,
					customerList: [],
				},
				goods: {
					id: '',
					name: '',
					mulCar: 0
				},
				typeList: [],
				allTypeList: [],
				form: {
					customerId: '',
					declareNo: '',
					carNo: '',
					owner: '',
					carSize: '',
					goodsName: '',
					netWeight: '',
					businessGoodsName: '',
					businessGoodsNum: 1
				},
				show: false,
				item: {
					items: []
				},
				car: {
					list: [{
						id: '',
						carNo: '',
						index: 0
					}]
				},
				perList: []
			}
		},
		onShow() {
			this.perList = uni.getStorageSync('perList')
		},
		computed: {
			totalPrice() {
				let typeList = this.typeList.filter(obj => obj.itemName);
				let price = 0;
				for (let i in typeList) {
					let type = typeList[i];
					price = price + type.price * type.num;
				}
				return price;
			},
		},
		onLoad(options) {
			this.customerId = uni.getStorageSync('customerId');
			this.goods = JSON.parse(options.goodsJson);
			this.getCustomerList();
			this.getTypeByGoodsId();
			let that = this;
			uni.$on('getCar', car => {
				that.$nextTick(() => {
					that.handlerCar(car)
				})
			})
			uni.$on('getRemark', type => {
				that.$nextTick(() => {
					that.handlerRemark(type)
				})
			})
		},
		methods: {
			remarkFn(type) {
				let remark = type.remark ? type.remark : '';
				this.$common.to('/pages/onely-disinfect/add-remark?needRemark=' + type.needRemark + '&typeId=' + type.id +
					'&remark=' + remark)
			},
			handlerRemark(type) {
				let typeList = this.typeList;
				typeList.filter(obj => type.typeId == obj.id).forEach(obj => obj.remark = type.remark)
			},
			addCar() {
				this.car.list.push({
					index: Math.random(),
					id: '',
					carNo: '',
					index: 0
				})
			},
			filterItems(car) {
				let carList = this.car.list;
				let filterTypeList = JSON.parse(JSON.stringify(this.allTypeList));
				if (carList.length == 0) {
					this.typeList = filterTypeList;
					return;
				}
				if (!car) {
					let checkList = carList.filter(obj => obj.carType.indexOf('空') === -1);
					if (checkList.length > 0) {
						car = checkList[0];
					}
				}
				let carSize = car.carSize;
				let carType = car.carType;
				if (carType.indexOf('空') !== -1 && carList.length > 1) {
					return;
				}
				let netWeight = car.netWeight;
				let tempList = [];
				for (let i in filterTypeList) {
					let type = filterTypeList[i];
					let items = type.items;
					if (carType) {
						items = items.filter(item => item.itemType && item.itemType.indexOf(carType) !== -1);
					}
					if (carSize && carSize > 1) {
						items = items.filter(item => item.minLength <= carSize && item.carLength >= carSize);
					}
					if (netWeight && netWeight > 1 && carType.indexOf('空') == -1) {
						items = items.filter(item => item.minWeight <= netWeight && item.maxWeight >= netWeight);
					}
					let itemIds = items.map(item => item.id);
					if (itemIds.indexOf(type.itemId) == -1) {
						this.cleanItem(type);
					}
					type.items = items;
					tempList.push(type);
				}
				this.typeList = tempList;
			},
			cleanItem(type) {
				type.itemId = '';
				type.itemName = '';
				type.price = '';
			},
			showSelect(item) {
				if (this.validBefore()) {
					this.columns = [];
					this.columns.push(item.items);
					this.show = true;
				}
			},
			confirmFn(e) {
				let selects = e.value;
				if (selects.length > 0) {
					let item = selects[0];
					let typeId = item.typeId;
					let typeList = this.typeList;
					typeList.filter(obj => obj.id == typeId).forEach(obj => {
						obj.itemId = item.id;
						obj.itemName = item.itemName;
						obj.inc = item.inc;
						obj.price = item.price;
						obj.needRemark = item.needRemark;
					})
				}
				this.show = false;
			},
			getTypeByGoodsId() {
				this.$api.getTypeByGoodsId({
					goodsId: this.goods.id
				}).then(resp => {
					let list = resp.data;
					this.allTypeList = JSON.parse(JSON.stringify(list));
					this.typeList = list;
				})
			},
			getCustomerList() {
				this.$api.getCustomerList({
					pageNo: 1,
					pageSize: 100
				}).then(resp => {
					let list = resp.data;
					let customerId = this.customerId;
					if (customerId !== '1') {
						this.customer.index = list.map(obj => obj.id).indexOf(customerId);
					}
					this.customer.customerList = list;
				})
			},
			customerChange(e) {
				var value = e.detail.value; //当前picker选中的值
				this.customer.index = value;
			},
			handlerCar(car) {
				let list = this.car.list;
				let check = list.filter(obj => obj.carNo == car.carNo).pop();
				if (check) {
					check.carSize = car.carSize;
					check.netWeight = car.netWeight;
					check.carType = car.carType;
				} else {
					this.car.list.push(car);
				}
				this.clearEmptyCar(car);
			},
			clearEmptyCar(car) {
				let list = this.car.list;
				let obj = list.filter(obj => !obj.carNo).pop();
				if (obj) {
					this.car.list.splice(list.indexOf(obj), 1);
				}
				this.filterItems(car);
			},
			editCar(car) {
				let goods = this.goods;
				this.$common.to('/pages/onely-disinfect/car-manager?carJson=' + JSON.stringify(car) + "&needCarSize=" +
					goods.needCarSize + '&needWeight=' + goods.needWeight)
			},

			delCar(car) {
				let list = this.car.list;
				if (list.length == 1) {
					this.$common.toast('至少有一辆车');
					return;
				}
				this.car.list.splice(list.indexOf(car), 1);
				this.filterItems();
			},
			validBefore() {
				let form = this.form;
				let goods = this.goods;
				let needCustomer = goods.needCustomer;
				let index = this.customer.index;
				
				if (!form.businessGoodsName && goods.needOwner == 1) {
					this.$common.toast('请填写货物');
					return false;
				}
				let needOperateTime = goods.needOperateTime;
				let businessGoodsNum = form.businessGoodsNum;
				if ((!businessGoodsNum || businessGoodsNum <= 0) && needOperateTime == '1') {
					this.$common.toast('请填写件数');
					return false;
				}

				let carList = this.car.list;
				if (carList.length == 0) {
					this.$common.toast('请录入车辆');
					return false;
				}
				let needCarSize = goods.needCarSize;
				let needWeight = goods.needWeight;
				for (let i in carList) {
					let car = carList[i];
					if (needCarSize == 1 && !car.carSize) {
						this.$common.toast('请补充' + car.carNo + '的规格');
						return false;
					}
					if (needWeight == 1 && car.carType.indexOf('重') !== -1 && !car.netWeight) {
						this.$common.toast('请补充' + car.carNo + '载重');
						return false;
					}
				}
				return true;
			},
			check() {
				let form = this.form;
				let goods = this.goods;
				let needCustomer = goods.needCustomer;
				let index = this.customer.index;
				
				if (!form.businessGoodsName && goods.needOwner == 1) {
					this.$common.toast('请填写货物');
					return false;
				}
				let needOperateTime = goods.needOperateTime;
				let businessGoodsNum = form.businessGoodsNum;
				if ((!businessGoodsNum || businessGoodsNum <= 0) && needOperateTime == '1') {
					this.$common.toast('请填写件数');
					return false;
				}
				let carList = this.car.list;
				if (carList.length == 0) {
					this.$common.toast('请录入车辆');
					return false;
				}
				let needCarSize = goods.needCarSize;
				let needWeight = goods.needWeight;
				for (let i in carList) {
					let car = carList[i];
					if (needCarSize == 1 && !car.carSize) {
						this.$common.toast('请补充' + car.carNo + '的规格');
						return false;
					}
					if (needWeight == 1 && car.carType.indexOf('重') !== -1 && !car.netWeight) {
						this.$common.toast('请补充' + car.carNo + '载重');
						return false;
					}
				}
				let typeList = this.typeList;
				let selectList = [];
				for (let i in typeList) {
					let type = typeList[i];
					if (type.need == 1 && !type.itemId) {
						this.$common.toast('【' + type.name + '】必选');
						return false;
					}
					if (type.needRemark == 1 && !type.remark) {
						this.$common.toast('请录入【' + type.name + '】备注');
						return false;
					}
					if (type.itemId) {
						let obj = {
							typeId: type.id,
							typeName: type.name,
							id: type.itemId,
							num: type.num,
							price: type.price,
							remark: type.remark
						}
						selectList.push(obj);
					}
				}
				this.form.itemJson = JSON.stringify(selectList);
				this.form.carJson = JSON.stringify(this.car.list);
				this.form.items = null;
				if (needCustomer == 1) {
					let customerList = this.customer.customerList;
					let index = this.customer.index;
					let customer = customerList[index];
					this.form.customerId = customer.id;
					this.form.customerName = customer.name;
				} else {
					this.form.customerId = '';
					this.form.customerName = '';
				}
				this.form.goodsId = this.goods.id;
				this.form.goodsName = this.goods.name;
				let chinaCarNo = carList
					.filter(car => this.$common.isCarNo(car.carNo.toUpperCase()))
					.map(car => car.carNo.toUpperCase())
					.join("、");
				let yueCarNo = carList
					.filter(car => !this.$common.isCarNo(car.carNo.toUpperCase()))
					.map(car => car.carNo.toUpperCase())
					.join("、");
				this.form.cardNo = yueCarNo;
				this.form.chinaCarNo = chinaCarNo;
				return true;
			},
			saveFn() {
				if (this.check()) {
					let obj = this.$common.removeNull(this.form);
					this.$api.addOtherBusiness(obj).then(resp => {
						if (resp.code == 200) {
							this.$common.toast('录入成功');
							setTimeout(() => {
								this.$common.to('/pages/onely-disinfect/Index')
							}, 1000)
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.hs-item {
		text-align: center;
	}

	.item-line {
		color: #a2a2a2;
		padding: 5px 0 10px 29px;
		border-bottom: 1px solid #E5E5E5;
	}

	.hj {
		padding: 50rpx;
		font-size: 40rpx;
		color: red;
		font-weight: bold;
	}

	.business-list {
		line-height: 75rpx;
		margin: 4rpx 0 0 48rpx;

	}

	.save-btn {
		background-color: #ff4200;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 60rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 10rpx;
	}

	@import '@/common/common.scss'
</style>