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;margin-top: 40rpx;">
				<u-button type="primary" @click="hs.visible=false" text="返回" style="width: 20px;" size="mini" />
				<u-button type="primary" @click="showHsModal" text="添加" v-show="hs.num>hs.list.length" 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="china.visible">
			<view class="top">
				<text class="title">中国车录入</text>
			</view>
			<view style="display: flex;margin-top: 40rpx;">
				<u-button type="primary" @click="china.visible=false" text="返回" style="width: 20px;" size="mini" />
				<u-button type="primary" @click="showChinaModal" text="添加" icon="plus" style="width: 20px;"
					size="mini" />
			</view>
			<u-row style="margin-top: 70rpx;">
				<u-col span="3" style="text-align: center;">车牌号</u-col>
				<u-col span="3" style="text-align: center;">联系人</u-col>
				<u-col span="3" style="text-align: center;">联系号码</u-col>
				<u-col span="3" style="text-align: center;">操作</u-col>
			</u-row>
			<u-row v-for="(item,index) in china.list" style="margin-top: 40rpx;">
				<u-col span="3" style="text-align: center;">{{item.carNo}}</u-col>
				<u-col span="3" style="text-align: center;">{{item.driverName}}</u-col>
				<u-col span="3" style="text-align: center;">{{item.driverPhone}}</u-col>
				<u-col span="3" style="text-align: center;">
					<u-row>
						<u-col span="6">
							<u-button type="primary" text="编辑" style="width: 20px;" @click="editChinaCar(item,index)" size="mini">
							</u-button>
						</u-col>
						<u-col span="6">
							<u-button type="error" style="width: 20px;" text="删除" @click="deleteChinaCar(item,index)" size="mini">
							</u-button>
						</u-col>
					</u-row>
				</u-col>
			</u-row>
		</view>
		<view class="box" v-show="!hs.visible&&!china.visible">
			<view class="top">
				<text class="title">业务录入</text>
			</view>
			<view class="item" v-show="customerId=='1'">
				<view class="l"><text style="color: red;">*</text>企业名称：</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"><text style="color: red;">*</text>货物：</view>
				<view class="r">
					<picker v-if="goods.goodsList.length>0" class="p-picker" id="hw" @change="whChange($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"><text style="color: red;">*</text>载重：</view>
				<view class="r">
					<u-input type="number" placeholder="输入载重" @input="handler()" v-model="form.netWeight">
						<text slot="suffix">吨</text>
					</u-input>
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>境外车牌：</view>
				<view class="r">
					<u-input placeholder="输入车牌号" @input="handler()" v-model="form.cardNo" />
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>境外车规格：</view>
				<view class="r">
					<u-input type="number" placeholder="输入车辆规格" @blur="car.carInput=false" @input="carSizeInput"
						v-model="form.cardSize">
						<text slot="suffix">米</text>
					</u-input>
				</view>
			</view>
			<view class="item">
				<view class="l">中国车：</view>
				<view class="r">
					<u-input placeholder="中国车" v-model="chinaCarNo" readonly>
						<text slot="suffix" style="font-size: 50rpx;" @click="addCar">+</text>
					</u-input>
				</view>
			</view>
			<view class="item-line">
				业务项
			</view>
			<view class="item" v-for="item in filterItemList" :key="item.id" v-if="item.items.length>0">
				<view class="l"><text v-if="needTypeId.indexOf(item.id)!==-1" style="color: red;">*</text>{{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="数量" :disabled="item.inc==0" 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&&item.name.indexOf('核酸')!==-1"
						@click="addHsFn(item.itemName,item.num)"></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&&!china.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 filterUnitList" :id="item.id"
					style="margin-bottom: 20rpx;border-bottom: 1rpx solid #E5E5E5;" @click="selectCarSize(item)">
					{{item.unit}}
				</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"
						v-if="form.netWeight >= item.minWeight 
						&& form.netWeight < item.maxWeight
						&&form.cardSize<=item.carLength
						&&form.cardSize>=item.minLength" 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>
		<u-modal :show="chinaAddModal.visible" title="中国车" @confirm="sureCarFn" @cancel="chinaAddModal.visible=false"
			showCancelButton cancelText="关闭">
			<view class="slot-content">
				<u-row>
					<u-col span="4">车牌号</u-col>
					<u-col span="8">
						<u--input placeholder="车牌号" v-model="chinaAddModal.form.carNo"></u--input>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">联系人</u-col>
					<u-col span="8">
						<u--input placeholder="联系人" v-model="chinaAddModal.form.driverName"></u--input>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">联系号码</u-col>
					<u-col span="8">
						<u--input placeholder="联系号码" v-model="chinaAddModal.form.driverPhone"></u--input>
					</u-col>
				</u-row>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				car: {
					carInput: false,
					filterList: [],
				},
				driver: {
					show: false,
					filterList: [],
				},
				customerId: '1',
				exprctStart: new Date().getTime(),
				itemList: [],
				filterItemList: [],
				needTypeId: [],
				noNeedIds: [],
				form: {
					customerId: '',
					customerIndex: 0,
					countryIndex: 0,
					goodsIndex: 0,
					cardNo: '',
					cardSize: '',
					goodsName: '',
					netWeight: '',
					driverName: '',
					driverPhone: '',
					expectInDay: ''

				},
				show: false,
				item: {
					items: []
				},
				customer: {
					index: 0,
					customerList: [],
				},
				carList: [],
				driverList: [],
				unitList: [],
				filterUnitList: [],
				country: {
					index: 0,
					list: ['越南车', '中国车']
				},
				goods: {
					index: 0,
					goodsList: []
				},
				hs: {
					visible: false,
					num: 1,
					list: []
				},
				modal: {
					visible: false,
					form: {
						name: '',
						phone: ''
					}
				},
				china: {
					visible: false,
					index:-1,
					list: []
				},
				chinaAddModal: {
					visible: false,
					form: {
						carNo: '',
						driverName: '',
						driverPhone: ''
					}
				}
			}
		},
		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;
			},
			chinaCarNo(){
				return this.china.list.map(obj=>obj.carNo).join("、");
			}
		},
		created() {
			if (this.customerId == '1') {
				this.getCustomerList();
			}
			this.getGoodsList();
			this.getUnit();
		},
		methods: {
			addCar() {
				this.china.visible = true;
			},
			showChinaModal() {
				Object.assign(this.chinaAddModal, {
					visible: true,
					index:-1,
					form: {
						carNo: '',
						driverName: '',
						driverPhone: ''
					}
				})
			},
			sureCarFn() {
				let form = this.chinaAddModal.form;
				let carNo = form.carNo;
				let phone = form.driverPhone;
				if (carNo && !this.$common.isCarNo(carNo)) {
					this.$common.toast('请输入正确的车牌号')
					return;
				}
				if (phone && !this.$common.isPhone(phone)) {
					this.$common.toast('请输入正确的手机号')
					return;
				}
				let list = this.china.list;
				let index=this.chinaAddModal.index;
				console.log(this.chinaAddModal.index)
				if(index>-1){
					list.splice(index, 1)
				}
				list.push(form)
				this.chinaAddModal.visible = false;
			},
			deleteChinaCar(item,index){
				this.china.list.splice(index,1);
			},
			editChinaCar(item,index){
				Object.assign(this.chinaAddModal, {
					visible: true,
					index:index,
					form: item
				})
			},
			whChange(event) {
				let index = event.detail.value; //当前picker选中的值
				this.goods.index = index;
				let goods = this.goods.goodsList[index];
				let noNeedIds = goods.noNeedIds.split(',');
				this.needTypeId = goods.needIds.split(',');
				this.noNeedIds = goods.noNeedIds.split(',')
				this.filterItemList = this.itemList.filter(obj => noNeedIds.indexOf(obj.id) == -1);
				this.handler();
			},
			carSizeInput() {
				let carSize = this.form.cardSize;
				let filterUnitList = this.unitList.filter(obj => obj.unit.indexOf(carSize) !== -1);
				this.car.carInput = filterUnitList.length > 0;
				this.filterUnitList = filterUnitList;
				this.handler();
			},
			getUnit() {
				this.$api.getUnitList().then(resp => {
					this.unitList = resp.data;
				})
			},
			selectCarSize(data) {
				this.form.cardSize = data.unit;
				this.car.carInput = false;
				this.handler();
			},
			expectDayChange(date) {
				this.form.expectInDay = date;
				this.handler();
			},
			addHsFn(itemName, num) {
				this.hs.visible = true;
				this.hs.num = num;
			},
			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.isPhone(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;
					let goods = resp.data[0];
					let noNeedIds = goods.noNeedIds.split(',');
					this.needTypeId = goods.needIds.split(',')
					this.noNeedIds = goods.noNeedIds.split(',')
					this.$api.getItemList().then(resp => {
						let list = resp.data;
						this.itemList = list;
						this.filterItemList = list.filter(obj => noNeedIds.indexOf(obj.id) == -1);
						this.checkStore();
					})
				})
			},
			handlerTypeItem(goods) {

			},
			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)
			},
			carInputFn() {
				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;
				})
			},

			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 inputItem = this.filterItemList.filter(obj => obj.itemName).map(o => {
					return {
						typeId: o.id,
						itemName: o.itemName,
						num: o.num
					}
				});
				this.form.inputItemJson = JSON.stringify(inputItem);
				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.hs.list = data.peopleJson ? JSON.parse(data.peopleJson) : [];
				if (data.inputItemJson) {
					let inputItemList = JSON.parse(data.inputItemJson);
					let filterList = this.filterItemList;
					for (let i in filterList) {
						let type = filterList[i];
						for (let j in inputItemList) {
							let s = inputItemList[j];
							if (type.id == s.typeId) {
								type.itemName = s.itemName;
								type.num = s.num;
								break;
							}
						}
					}
				}
				setTimeout(() => {
					this.car.carInput = false;
				}, 100)
			},
			check() {
				this.handler();
				if (!this.form.cardNo) {
					this.$common.toast('请录入境外车牌号')
					return false;
				}
				if (!this.$common.isNum(this.form.cardSize)) {
					this.$common.toast('车辆规格请录入数字')
					return false;
				}

				if (!this.chinaCarNo) {
					this.$common.toast('请录入中国车牌')
					return false;
				}
				if (!this.form.driverName) {
					this.$common.toast('请录入中国司机')
					return false;
				}
				if (!this.$common.isPhone(this.form.driverPhone)) {
					this.$common.toast('司机联系号码不正确')
					return false;
				}
				if (!this.form.netWeight || !this.$common.isNum(this.form.netWeight)) {
					this.$common.toast('载重必须输入数字')
					return false;
				}
				let typeList = this.filterItemList.filter(obj => obj.itemName);
				if (typeList.length == 0) {
					this.$common.toast('至少选择一项业务项')
					return false;
				}
				let noNeedIds = this.noNeedIds;
				let filterItemList = this.filterItemList.filter(obj => noNeedIds.indexOf(obj.id) == -1);
				for (let j in this.needTypeId) {
					let id = this.needTypeId[j];
					for (let i in filterItemList) {
						let type = filterItemList[i];
						if (id == type.id && !type.itemName) {
							this.$common.toast('[' + type.name + ']必选')
							return;
						}
					}
				}
				let peopleList = this.hs.list;
				if (typeList.filter(obj => obj.name.indexOf('人') !== -1 &&
						obj.name.indexOf('核酸') !== -1).length > 0 &&
					peopleList.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;
							break;
						}
					}
					list.push({
						itemId: type.itemId,
						num: type.num
					})
				}
				this.form.itemJson = JSON.stringify(list);
				this.form.peopleJson = JSON.stringify(peopleList);
				this.form.items = null;
				if (this.customerId == '1') {
					this.form.customerId = this.customer.customerList[this.customer.index].id;
				} else {
					this.form.customerId = this.customerId;
				}
				this.form.goodsName = this.goods.goodsList[this.goods.index].name;

				return true;
			},
			saveFn() {
				if (this.check()) {
					let obj = this.$common.removeNull(this.form);
					this.$api.saveBusiness(obj).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>