pco/app/pages/business-entering/business-edit.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="!hs.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="输入载重" 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="输入车牌号" 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"><text style="color: red;">*</text>预计入场：</view>
				<view class="r">
					<view class="r">
						<uni-datetime-picker placeholder="请选择" @change="expectDayChange" :clear-icon="false"
							:start="exprctStart" type="datetime" v-model="form.expectInDay" @close="closeFn" />
					</view>
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>中国车牌号：</view>
				<view class="r">
					<u-input placeholder="中国车牌号" v-model="form.chinaCarNo" />
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>中国司机：</view>
				<view class="r">
					<u-input placeholder="司机姓名" v-model="form.driverName" />
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>联系号码：</view>
				<view class="r">
					<u-input placeholder="司机联系号码" type="number" v-model="form.driverPhone" />
				</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)" style="width: 150px;">
						<u-input placeholder="请选择" v-model="item.itemName" readonly clearable>
							<u-icon name="close" v-if="item.itemName" slot="suffix" color="#E5E5E5;" size="5"
								@click="item.itemName=''"></u-icon>
						</u-input>
					</view>
					<view style="width: 20px;margin-left: 10rpx;">
						<u-input placeholder="数量" :disabled="item.inc==0" border="surround" v-model="item.num"
							type="number" style="width: 15px;" v-if="item.itemName"></u-input>
					</view>
					<view style="margin-left:30rpx;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.num,true)"></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 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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				car: {
					carInput: false,
					filterList: [],
				},
				driver: {
					show: false,
					filterList: [],
				},
				customerId: '1',
				exprctStart: new Date().getTime(),
				itemList: [],
				filterItemList: [],
				needTypeId: [],
				form: {
					customerId: '',
					customerIndex: 0,
					countryIndex: 0,
					goodsIndex: 0,
					cardNo: '',
					cardSize: '',
					goodsName: '',
					netWeight: '',
					chinaCarNo: '',
					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: ''
					}
				}
			}
		},
		onShow() {
			this.customerId = uni.getStorageSync('customerId');
		},
		onLoad(options) {
			this.form.id = options.id;
			this.getBusinessPeople();
			if (this.customerId == '1') {
				this.getCustomerList();
			}
			this.getGoodsList();
			this.getUnit();
		},
		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() {

		},
		methods: {
			getBusinessById() {
				this.$api.getBusinessById({
					id: this.form.id
				}).then(resp => {
					let data = resp.data;
					this.form = data;
					let goodsName = data.goodsName;
					this.customer.index = this.customer.customerList.map(obj => obj.name).indexOf(data
						.customerName);
					this.goods.index = this.goods.goodsList.map(o => o.name).indexOf(goodsName);
					let goods = this.goods.goodsList[this.goods.index];
					let items = data.items;
					let noNeedIds = goods.noNeedIds.split(',');
					let itemTypeList = this.itemList.filter(obj => noNeedIds.indexOf(obj.id) == -1);
					this.filterItemList = itemTypeList;
					for (let i in itemTypeList) {
						let type = itemTypeList[i];
						for (let j in items) {
							let item = items[j];
							if (item.itemTypeId == type.id) {
								type.itemName = item.itemName;
								type.num = item.num
								break;
							}
						}
					}
					setTimeout(() => {
						this.car.carInput = false;
					}, 50)
				})
			},
			getBusinessPeople() {
				this.$api.getBusinessPeople({
					businessId: this.form.id
				}).then(resp => {
					let list = resp.data;
					let index = 0;
					let r = [];
					for (let i in list) {
						r.push({
							name: list[i].name,
							phone: list[i].phone,
							index: index,
							id: list[i].id
						})
						index++;
					}
					this.hs.list = r;
				})
			},
			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.filterItemList = this.itemList.filter(obj => noNeedIds.indexOf(obj.id) == -1);
			},
			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;
			},
			getUnit() {
				this.$api.getUnitList().then(resp => {
					this.unitList = resp.data;
				})
			},
			selectCarSize(data) {
				this.form.cardSize = data.unit;
				this.car.carInput = false;
			},
			expectDayChange(date) {
				this.form.expectInDay = date;
			},
			addHsFn(num, show) {
				this.hs.num = num;
				this.hs.visible = show;
			},
			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;

			},
			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;
					this.getItemList();
				})
			},
			getItemList() {
				this.$api.getItemList().then(resp => {
					this.itemList = resp.data;
					this.getBusinessById();
				})
			},
			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)
			},
			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;
				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;
			},
			check() {
				if (!this.form.cardNo) {
					this.$common.toast('请录入境外车牌号')
					return false;
				}
				if (!this.$common.isNum(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.$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 filterItemList = this.filterItemList;
				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;
				}
			},
		}
	}
</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>