pco/app/pages/business-entering/business-entering.vue

<template>
	<view>
		<view class="box" v-show="hs.visible">
			<view class="top">
				<text class="title">录入核酸人员</text>
			</view>
			<view style="display: flex;">
				<u-button type="primary" @click="hs.visible=false" text="返回" style="width: 20px;" size="mini" />
				<u-button type="primary" @click="showHsModal" text="添加" icon="plus" style="width: 20px;" size="mini" />
			</view>
			<u-row style="margin-top: 70rpx;">
				<u-col span="4" style="text-align: center;">姓名</u-col>
				<u-col span="4" style="text-align: center;">联系号码</u-col>
				<u-col span="4" style="text-align: center;">操作</u-col>
			</u-row>
			<u-row v-for="item in hs.list" style="margin-top: 40rpx;">
				<u-col span="4" style="text-align: center;">{{item.name}}</u-col>
				<u-col span="4" style="text-align: center;">{{item.phone}}</u-col>
				<u-col span="4" style="text-align: center;">
					<u-row>
						<u-col span="6">
							<u-button type="primary" text="编辑" style="width: 20px;" @click="editFn(item)" size="mini">
							</u-button>
						</u-col>
						<u-col span="6">
							<u-button type="error" style="width: 20px;" text="删除" @click="deleteFn(item)" size="mini">
							</u-button>
						</u-col>
					</u-row>
				</u-col>
			</u-row>
		</view>
		<view class="box" v-show="!hs.visible">
			<view class="top">
				<text class="title">业务录入</text>
			</view>
			<view class="item" v-show="customerId=='1'">
				<view class="l">企业名称：</view>
				<view class="r">
					<picker v-if="customer.customerList.length>0" class="p-picker" id="qy"
						@change="bindPickerChange($event)" :value="customer.index" :range="customer.customerList"
						range-key="name">
						<text class="p-text">{{customer.customerList[customer.index].name}}</text>
						<u-icon class="p-icon" name="arrow-down-fill" size="20"></u-icon>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="l">境外车牌：</view>
				<view class="r">
					<u-input placeholder="输入车牌号" @input="carInputFn" v-model="form.cardNo" />
				</view>
			</view>
			<!-- 	<view class="item">
				<view class="l">国别：</view>
				<view class="r">
					<picker class="p-picker" id="gj" @change="bindPickerChange($event)" :value="country.index"
						:range="country.list" range-key="name">
						<text class="p-text">{{country.list[country.index]}}</text>
						<u-icon class="p-icon" name="arrow-down-fill" size="20"></u-icon>
					</picker>
				</view>
			</view> -->
			<view class="item">
				<view class="l">规格(米)：</view>
				<view class="r">
					<u-input type="number" placeholder="输入车辆规格" v-model="form.cardSize" />
				</view>
			</view>
			<view class="item">
				<view class="l">载重(吨)：</view>
				<view class="r">
					<u-input type="number" placeholder="输入载重" v-model="form.netWeight" />
				</view>
			</view>
			<view class="item">
				<view class="l">货物：</view>
				<view class="r">
					<picker v-if="goods.goodsList.length>0" class="p-picker" id="hw" @change="bindPickerChange($event)"
						:value="goods.index" :range="goods.goodsList" range-key="name">
						<text class="p-text">{{goods.goodsList[goods.index].name}}</text>
						<u-icon class="p-icon" name="arrow-down-fill" size="20"></u-icon>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="l">预计入场：</view>
				<view class="r">
					<view class="r">
						<uni-datetime-picker placeholder="请选择" type="datetime" v-model="form.expectInDay"
							start="2021-11-30" end="2090-6-20" />
					</view>
				</view>
			</view>
			<view class="item">
				<view class="l">中国车牌号：</view>
				<view class="r">
					<u-input placeholder="司机身份证号码" @input="handler()" v-model="form.chinaCarNo" />
				</view>
			</view>
			<view class="item">
				<view class="l">中国司机：</view>
				<view class="r">
					<u-input placeholder="司机姓名" @input="handler()" v-model="form.driverName" />
				</view>
			</view>
			<view class="item">
				<view class="l">联系号码：</view>
				<view class="r">
					<u-input placeholder="司机联系号码" @input="handler()" v-model="form.driverPhone" />
				</view>
			</view>
			<view class="item-line">
				业务项
			</view>
			<view class="item" v-for="item in itemList" :key="item.id" v-if="item.items.length>0">
				<view class="l">{{item.name}}：</view>
				<view class="r">
					<view @click="selectItemFn(item)">
						<u-input placeholder="请选择" v-model="item.itemName" readonly clearable style="width: 120px;">
							<u-icon name="close" v-if="item.itemName" slot="suffix" color="#E5E5E5;" size="5"
								@click="item.itemName=''"></u-icon>
						</u-input>
					</view>
					<u-input placeholder="数量" border="surround" v-model="item.num" type="number" style="width: 10px;"
						v-if="item.itemName"></u-input>
					<view style="margin-left: 20rpx;color: red;" v-if="item.itemName">
						{{item.items.filter(obj=>obj.itemName==item.itemName)[0].price*item.num}}元
					</view>
					<u-icon name="plus" style="position: absolute;right: 10rpx;"
						v-if="item.itemName&&item.name.indexOf('核酸')!==-1" @click="addHsFn(item.itemName)"></u-icon>
				</view>
			</view>
			<view class="hj" v-show="totalPrice>0">
				合计：{{totalPrice}}元
			</view>
		</view>
		<u-button type="primary" text="确定" @click="saveFn" v-show="!hs.visible"></u-button>
		<!-- ---------------------------------------------------------- -->
		<view class="bottom-safety"></view>
		<u-popup :show="car.carInput" :overlay="false" @close="car.carInput=false" borderRadius="10">
			<view style="padding: 40rpx;line-height: 60rpx;text-align: center;">
				<view v-for="item in car.filterList" :id="item.id"
					style="margin-bottom: 20rpx;border-bottom: 1rpx solid #E5E5E5;" @click="selectCarNo(item)">
					{{item.cardNo}}({{item.cardSize}})
				</view>
			</view>
		</u-popup>
		<u-popup :show="driver.show" :overlay="false" @close="driver.show=false" borderRadius="10">
			<view style="padding: 40rpx;line-height: 60rpx;text-align: center;">
				<view v-for="item in driver.filterList" :id="item.id"
					style="margin-bottom: 20rpx;border-bottom: 1rpx solid #E5E5E5;" @click="selectDriverFn(item)">
					{{item.name}}({{item.idCard}})
				</view>
			</view>
		</u-popup>
		<u-popup :show="show" closeable closeOnClickOverlay @close="show=false">
			<view style="padding: 40rpx;">
				<u-radio-group @change="itemSelectFn" placement="column" v-model="item.itemName">
					<u-radio v-for="item in item.items" :key="item.id" :label="item.itemName" :name="item.itemName"
						style="margin-top: 30rpx;">
					</u-radio>
				</u-radio-group>
			</view>
		</u-popup>
		<u-modal :show="modal.visible" showCancelButton closeOnClickOverlay @cancel="modal.visible=false"
			@confirm="addHsPeopleFn">
			<view style="">
				<u--input placeholder="姓名" border="surround" v-model="modal.form.name"></u--input>
				<u--input style="margin-top: 20rpx;" placeholder="联系号码" border="surround" v-model="modal.form.phone">
				</u--input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				car: {
					carInput: false,
					filterList: [],
				},
				driver: {
					show: false,
					filterList: [],
				},
				customerId: '1',
				itemList: [],
				form: {
					customerId: '',
					customerIndex: 0,
					countryIndex: 0,
					goodsIndex: 0,
					cardNo: '',
					cardSize: '',
					goodsName: '',
					netWeight: '',
					chinaCarNo: '',
					driverName: '',
					driverPhone: ''

				},
				show: false,
				item: {
					items: []
				},
				customer: {
					index: 0,
					customerList: [],
				},
				carList: [],
				driverList: [],
				country: {
					index: 0,
					list: ['越南车', '中国车']
				},
				goods: {
					index: 0,
					goodsList: []
				},
				hs: {
					visible: false,
					list: []
				},
				modal: {
					visible: false,
					form: {
						name: '',
						phone: ''
					}
				}
			}
		},
		onShow() {
			this.customerId = uni.getStorageSync('customerId');
		},
		computed: {
			totalPrice() {
				let itemList = this.itemList.filter(obj => obj.itemName);
				let price = 0;
				for (let i in itemList) {
					let type = itemList[i];
					let items = type.items;
					for (let j in items) {
						let item = items[j];
						if (item.itemName == type.itemName) {
							price += item.price;
							break;
						}
					}
				}
				return price;
			}
		},
		created() {
			this.getItemList();
			if (this.customerId == '1') {
				this.getCustomerList();
			}
			this.getCarList();
			this.getDriverList();
			this.getGoodsList();
		},
		mounted() {
			setTimeout(() => {
				this.checkStore();
			}, 1000)
		},
		methods: {
			addHsFn() {
				this.hs.visible = true;
			},
			showHsModal() {
				Object.assign(this.modal, {
					visible: true,
					form: {
						name: '',
						phone: '',
						index: -1
					}
				});
			},
			addHsPeopleFn() {
				if (!this.modal.form.name) {
					this.$common.toast('请输入名称');
					return;
				}
				if (!this.modal.form.phone) {
					this.$common.toast('请输入联系号码');
					return;
				}
				let dbIndex = this.modal.form.index;
				if (dbIndex >= 0) {
					this.hs.list[dbIndex].name = this.modal.form.name;
					this.hs.list[dbIndex].phone = this.modal.form.phone;
				} else {
					this.modal.form.index = this.hs.list.length;
					this.hs.list.push(this.modal.form);
				}
				this.modal.visible = false;
				this.handler();
			},
			editFn(data) {
				Object.assign(this.modal, {
					visible: true,
					form: data
				})
			},
			deleteFn(data) {
				this.hs.list.splice(data.index, 1);
				if (data.id) {
					this.$api.deleteHsPeople({
						id: data.id
					});
				}
			},
			getGoodsList() {
				this.$api.getGoodsList().then(resp => {
					this.goods.goodsList = resp.data;
				})
			},
			getDriverList() {
				this.$api.getDriverList().then(resp => {
					this.driverList = resp.data;
				})
			},
			idCardInput() {
				let val = this.form.driverIdCard;
				let list = this.driverList.filter(obj => obj.idCard.indexOf(val) !== -1);
				if (list.length > 0 && val) {
					this.driver.show = true;
					this.driver.filterList = list;
				} else {
					this.driver.show = false;
				}
			},
			selectDriverFn(item) {
				this.form.driverIdCard = item.idCard;
				this.form.driverName = item.name;
				this.form.driverPhone = item.phone
				let that = this;
				setTimeout(() => {
					that.driver.show = false;
				}, 150)
			},
			getCarList() {
				this.$api.getCarList().then(resp => {
					this.carList = resp.data;
				})
			},
			carInputFn() {
				let val = this.form.cardNo;
				let list = this.carList.filter(obj => obj.cardNo.indexOf(val) !== -1);
				if (list.length > 0 && val) {
					this.car.carInput = true;
					this.car.filterList = list;
				} else {
					this.car.carInput = false;
				}
				this.handler();
			},
			selectCarNo(item) {
				this.form.cardNo = item.cardNo;
				this.form.cardSize = item.cardSize;
				this.form.netWeight = item.lastNetWeight;
				let names = this.goods.goodsList.map(obj => obj.name);
				let index = names.indexOf(item.lastGoodsName);
				this.goods.index = index == -1 ? 0 : index;
				this.country.index = this.country.list.indexOf(item.countryName)
				let that = this;
				this.handler();
				setTimeout(() => {
					this.car.carInput = false;
				}, 150)

			},
			getCustomerList() {
				this.$api.getCustomerList().then(resp => {
					this.customer.customerList = resp.data;
				})
			},
			getItemList() {
				this.$api.getItemList().then(resp => {
					this.itemList = resp.data;
				})
			},
			selectItemFn(item) {
				this.item = item;
				this.show = true;

			},
			itemSelectFn(data) {
				this.show = false;
				this.item.itemName = data;
				this.handler();
			},
			handler() {
				let goodsIndex = this.goods.index;
				let countryIndex = this.country.index;
				this.form.goodsName = this.goods.goodsList[goodsIndex].name;
				this.form.countryName = this.country.list[countryIndex];
				this.form.goodsIndex = goodsIndex;
				this.form.countryIndex = countryIndex;
				this.form.peopleJson = JSON.stringify(this.hs.list);
				let customerId = this.customerId;
				if (customerId == '1') {
					let customerIndex = this.customer.index;
					this.form.customerId = this.customer.customerList[customerIndex].id;
					this.form.customerIndex = customerIndex;
				}
				let that = this;
				uni.setStorage({
					key: 'business_' + customerId,
					data: that.form
				})
			},
			checkStore() {
				let customerId = this.customerId;
				let data = uni.getStorageSync('business_' + customerId)
				if (data) {
					let that = this;
					uni.showModal({
						title: '提示',
						content: '您上次录入数据未提交，是否继续？',
						cancelText: '重新录入',
						confirmText: '继续',
						success(res) {
							if (res.confirm) {
								that.rebackStore(data);
							} else {
								uni.removeStorageSync('business_' + customerId)
							}
						}
					})
				}
			},
			rebackStore(data) {
				this.form = data;

				this.goods.index = data.goodsIndex ? data.goodsIndex : 0;
				this.customer.index = data.customerIndex ? data.customerIndex : 0;
				this.country.index = data.countryIndex ? data.countryIndex : 0;
				this.hs.list = data.peopleJson ? JSON.parse(data.peopleJson) : []
				setTimeout(() => {
					this.car.carInput = false;
					this.driver.show = false;
				}, 150)
			},
			check() {
				this.handler();
				if (!this.form.cardNo) {
					this.$common.toast('请录入境外车牌号')
					return false;
				}
				if (!this.form.cardSize) {
					this.$common.toast('请录入车辆规格')
					return false;
				}

				if (!this.form.chinaCarNo) {
					this.$common.toast('请录入中国车牌')
					return false;
				}
				if (!this.form.driverName) {
					this.$common.toast('请录入中国司机')
					return false;
				}
				if (!this.form.driverPhone) {
					this.$common.toast('请录入司机联系号码')
					return false;
				}
				let typeList = this.itemList.filter(obj => obj.itemName);
				if (typeList.length == 0) {
					this.$common.toast('至少选择一项业务项')
					return false;
				}
				if (typeList.filter(obj => obj.name.indexOf('核酸') !== -1).length > 0 && this.hs.list.length == 0) {
					this.$common.toast('录入核酸检测人员')
					return false;
				}
				let list = [];
				for (let i in typeList) {
					let type = typeList[i];
					type.num = 1;
					for (let j in type.items) {
						let item = type.items[j];
						if (type.itemName == item.itemName) {
							type.itemId = item.id;
							console.log(1121)
							break;
						}
					}
					list.push({
						itemId: type.itemId,
						num: type.num
					})
				}
				this.form.itemJson = JSON.stringify(list);
				if (this.customerId == '1') {
					this.form.customerId = this.customer.customerList[this.customer.index].id;
				} else {
					this.form.customerId = this.customerId;
				}

				return true;
			},
			saveFn() {
				if (this.check()) {
					this.$api.saveBusiness(this.form).then(resp => {
						if (resp.code == 200) {
							uni.removeStorageSync('business_' + this.customerId);
							this.$common.toast('录入成功');
							this.hs.list = [];
							setTimeout(() => {
								this.$common.to('/pages/business-order/business-order')
							}, 1000)
						}
					})
				}
			},
			bindPickerChange(e) {
				var nowId = e.target.id; //当前picker的ID id需要自己设置 在picker中
				var value = e.detail.value; //当前picker选中的值
				switch (nowId) { //根据ID判断是哪个picker
					case "qy": //picker的ID
						this.customer.index = value;
						break;
					case "hw": //picker的ID
						this.goods.index = value;
						break;
					case "gj": //picker的ID
						this.country.index = value;
						break;
				}
				this.handler();
			},
		}
	}
</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;
	}

	.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>