aiot-app/pages/put_storage/add/index.vue

<template>
	<view class="">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="新增入库单" @clickLeft="onBack">
		</uni-nav-bar>
		<view class="p10">
			<u--form :model="form" labelPosition="left" :rules="rules" label-width="140rpx">
				<u-form-item label="入库单号" prop="code" borderBottom>
					<u--input v-model="form.code" disabled placeholder="自动生成"></u--input>
				</u-form-item>
				<u-form-item label="入库类型" prop="entryTypeValue" borderBottom>
					<u--input v-model="entryTypeValue" placeholder="请选择入库类型" @click.native="show=true" readonly>
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="入库时间" prop="entryTime" borderBottom>
					<u--input v-model="entryTime" placeholder="请选择入库时间" @click.native="showCalendar=true" readonly>
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="登记时间" prop="registrationTime" borderBottom>
					<u--input v-model="form.registrationTime" disabled placeholder="登记时间"></u--input>
				</u-form-item>
				<u-form-item label="登记人" prop="registrant.name" borderBottom>
					<u--input v-model="form.registrant.name" disabled placeholder="登记人"></u--input>
				</u-form-item>
				<u-form-item label="部门" prop="registrationDept" borderBottom>
					<u--input v-model="form.registrationDept" disabled placeholder="部门"></u--input>
				</u-form-item>
				<u-form-item label="备注" prop="remark" borderBottom>
					<u--textarea v-model="form.remark" confirm-type="send" count placeholder="请输入备注"></u--textarea>
				</u-form-item>
			</u--form>

		</view>
		<view class="mt10">
			<CellTip title="选择归还区域" class="area_tips">
				<view class="right">
					<u-button size="small" type="primary" @click="select_type">选择备件类型</u-button>
				</view>
			</CellTip>
			<uni-swipe-action v-if="orderList.length !== 0">
				<uni-swipe-action-item class="customeSwipe" @click="swipeAction(index)" :right-options="options"
					v-for="(item,index) in orderList" :key="index">
					<view> 
						<!-- sparepartTypeCode.name -->
						<OrderList lable1="编码:" :value1="item.code" lable2="名称:" :value2="item.name" lable3="规格:"
							:value3="item.spec" lable4="型号:" :value4="item.model" lable5="库存:" :value5="item.stock"
							lable6="单位:" :value6="item.unit">
							<u--input placeholder="请输入批次号" v-model="item.batchNo"></u--input>
							<u--input placeholder="请输入入库数量" v-model="item.receipt"></u--input>
							<u--input placeholder="请输入最小包装单位" v-model="item.leastPack"></u--input>
							<u--input readonly placeholder="请选择仓库地址" @click.native="selectAddress(index)"
								v-model="item.warehouse">
								<template slot="suffix">
									<!-- <u-icon name="arrow-right"></u-icon> -->
									<uni-icons type="right" size="30"></uni-icons>
								</template>
							</u--input>
						</OrderList>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
			<view class="no_data" v-else>
				<u-empty mode="data"></u-empty>
			</view>       
		</view>
		<view class="btnList">
			<!-- <u-button type="success">暂存</u-button> -->
			<u-button type="primary" @click="submit">提交</u-button>
			<u-button @click="cancelPage">取消</u-button>
		</view>
		<u-picker :show="show" :columns="columns" key-name="name" @cancel="show=false" @confirm="onConfirm"></u-picker>
		<u-calendar :show="showCalendar" @close="showCalendar=false" class="customCalendar" @confirm="handleConfirm">
		</u-calendar>
		<u-picker :show="showPicker" ref="uPicker" :loading="loading " :columns="columnsPicker" keyName="name"
			@cancel="showPicker=false" @change="changeHandler" @confirm="handleConfirmPicker">
		</u-picker>
	</view>
</template>

<script>
	import CellTip from '@/components/CellTip.vue'
	import OrderList from '../components/OrderList.vue'
	import {
		get,
		post,
		postJ
	} from "@/utils/api.js"
	export default {
		components: {
			CellTip,
			OrderList
		},
		data() {
			return {
				orderList: [],
				showPicker: false,
				columns: [],
				loading: false,
				entryTypeValue: "",
				showCalendar: false,
				entryTime: "",
				columnsPicker: [],
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				rules: {},
				columnData: [],
				warehouseIndex: 0,
				form: {
					code: "",
					entryType: "",
					entryTime: "",
					registrationTime: "",
					registrant: {
						name: ""
					},
					registrationDept: "",
					remark: ""
				}
			}
		},
		onShow() {
			this.orderList = this.$store.state.tour_tally.selectSparepart ? this.$store.state.tour_tally.selectSparepart :
				[]
			this.init()
		},
		methods: {
			onBack() {
				this.$store.dispatch("tour_tally/setSelectSparepart", [])
				uni.redirectTo({
					url: "/pages/put_storage/order/index"
				})
			},
			swipeAction(idx) {
				this.orderList.splice(idx, 1)
				this.$store.dispatch("tour_tally/setSelectSparepart", this.orderList)
			},
			submit() {
				this.form.spareparts = this.orderList
				this.form.entryTypeValue = this.form.entryType.id
				postJ(this.apiUrl + "/feature/book/sparepartsEntry/putWarehouse", this.form).then(res => {
					// console.log(res)
					if (res.success) {
						uni.showToast({
							title: "操作成功"
						})
						setTimeout(() => {
							this.cancelPage()
						}, 2000)
					}
				})
			},
			cancelPage() {
				this.$store.dispatch("tour_tally/setSelectSparepart", [])
				uni.redirectTo({
					url: "/pages/put_storage/order/index"
				})
			},
			selectAddress(idx) {
				this.showPicker = true
				this.warehouseIndex = idx
			},
			handleConfirmPicker(e) {
				this.orderList[this.warehouseIndex].warehouse = ""
				e.value.forEach((item, index) => {

					let name = index == 0 ? "deviceWarehouse" : index == 2 ? "deviceStoreArea" : "deviceStoreSpace"
					if (index === e.value.length - 1) {
						this.orderList[this.warehouseIndex][name] = item ? item.name : ""
					} else {
						this.orderList[this.warehouseIndex][name] = {
							id: item ? item.code : "",
							name: ""
						}
					}

					this.orderList[this.warehouseIndex].warehouse +=
						`${index==0?'':item?"/":""}${item?item.name:""}`
				})
				// console.log(this.orderList[this.warehouseIndex])
				this.$forceUpdate()
				this.showPicker = false

			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					this.loading = true
					this.getColumnsPicker(e.value[0].code)
				}

			},
			onConfirm(e) {
				// console.log(e)
				this.form.entryType = {
					id: e.value[0].value,
					name: e.value[0].name
				}
				this.entryTypeValue = e.value[0].name
				this.show = false
			},
			handleConfirm(e) {
				// console.log(e)
				this.form.entryTime = e[0] + " 00:00:00"
				this.entryTime = e[0]
				this.showCalendar = false
			},
			pickerList() {
				return new Promise((reslove, reject) => {
					post(this.apiUrl + "/wms/warehouse/list").then(res => {
						reslove(res.data)
					})
				})
			},
			init() {
				uni.showLoading({
					title: "加载中"
				})
				Promise.all([this.loadCreate(), this.putType(), this.pickerList()]).then(res => {
					uni.hideLoading()
					this.form = res[0]
					this.columns = [res[1]]
					this.columnsPicker = [res[2].items]
					this.getColumnsPicker()
				})
			},
			getColumnsPicker(code) {
				// console.log(code)
				let pickerCode = code ? code : this.columnsPicker[0][0].code
				get(this.apiUrl + "/wms/warehouse/infoByCode?code=" + pickerCode).then(res => {
					// console.log(res)
					if (res.success) {
						let uPicker = this.$refs.uPicker
						res.data.storeAreas.forEach(item => {
							item.spaceList.forEach(el => {
								el.name = el.code
							})
						})
						if (res.data.storeAreas && res.data.storeAreas.length !== 0) {
							uPicker.setColumnValues(1, res.data.storeAreas)
							uPicker.setColumnValues(2, res.data.storeAreas[0].spaceList)
						} else {
							uPicker.setColumnValues(1, [])
							uPicker.setColumnValues(2, [])
						}

					}
					this.loading = false
				})
			},
			loadCreate() {
				return new Promise((reslove, reject) => {
					get(this.apiUrl + "/feature/book/sparepartsEntry/create").then(res => {
						// console.log(res)
						if (res.success) {
							reslove(res.data)
						}
					})
				})

			},
			putType() {
				return new Promise((reslove, reject) => {
					get(this.apiUrl + "/feature/book/sparepartsEntry/putType").then(res => {
						// console.log(res)
						if (res.success) {
							reslove(res.data)
						}
					})
				})
			},
			select_type() {
				uni.redirectTo({
					url: "/pages/put_storage/linkage/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.p10 {
		padding: 20rpx;
	}

	.customeSwipe {
		/deep/ .u-input {
			border-bottom: 1px solid #ccc;
		}

		/deep/ .u-input:last-child {
			border-bottom: none;
		}
	}

	.btnList {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		z-index: 999;

		/deep/ .u-button {
			width: 50% !important;
		}
	}

	.mt10 {
		margin-top: 20rpx;
		padding-bottom: 160rpx;
		position: relative;
	}

	.right {
		position: absolute;
		right: 20rpx;
	}

	.no_data {
		margin-top: 80rpx;
	}

	/deep/ .u-picker__view__column__item {
		height: 88rpx !important;
		line-height: 88rpx !important;
	}

	/deep/ .uni-picker-view-indicator {
		height: 88rpx !important;
		line-height: 88rpx !important;
	}

	.customCalendar {
		/deep/.u-button {
			width: 100% !important;
		}
	}
</style>