aiot-app/pages/outbound/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="status" borderBottom>
					<u--input v-model="status" 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="applyDate" borderBottom>
					<u--input v-model="applyDate" placeholder="请选择申请时间" @click.native="getTimeInof('applyDate')"
						readonly>
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="领取时间" prop="getDate" borderBottom>
					<u--input v-model="getDate" placeholder="请选择领取时间" @click.native="getTimeInof('getDate')" readonly>
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="部门" prop="dept" borderBottom>
					<u--input v-model="form.dept" 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" lable7="批次条码" :value7="item.spec">
							<u--input placeholder="请输入出库数量" v-model="item.expend"></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>

	</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: [
					[{
						name: "未出库",
						value: 0,
					}, {
						name: "已出库",
						value: 1
					}]
				],
				entryTypeValue: "",
				showCalendar: false,
				entryTime: "",
				columnsPicker: [],
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				rules: {},
				columnData: [],
				warehouseIndex: 0,
				timeName: "",
				status: "",
				applyDate: "",
				getDate: "",
				form: {
					code: "",
					status: "",
					applyDate: "",
					getDate: "",
					dept: "研发部",
					remark: ""
				}
			}
		},
		onShow() {
			this.orderList = this.$store.state.tour_tally.selectSparepart ? this.$store.state.tour_tally.selectSparepart :
				[]
			this.init()
		},
		methods: {
			getTimeInof(name) {
				this.timeName = name
				this.showCalendar = true
			},
			onBack() {
				this.$store.dispatch("tour_tally/setSelectSparepart", this.orderList)
				uni.redirectTo({
					url: "/pages/outbound/order/index"
				})
			},
			swipeAction(idx) {
				this.orderList.splice(idx, 1)
				this.$store.dispatch("tour_tally/setSelectSparepart", this.orderList)
			},
			submit() {
				this.form.spareparts = this.orderList
				postJ(this.apiUrl + "/feature/book/sparepartsExport/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/outbound/order/index"
				})
			},
			selectAddress(idx) {
				this.showPicker = true
				this.warehouseIndex = idx
			},

			
			onConfirm(e) {
				this.form.status = e.value[0].value
				this.status = e.value[0].name
				this.show = false
			},
			handleConfirm(e) {
				this[this.timeName] = e[0]
				this.form[this.timeName] = e[0] + " 00:00:00"
				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.pickerList()]).then(res => {
					uni.hideLoading()
					this.form.code = res[0]
				})
			},
		
			loadCreate() {
				return new Promise((reslove, reject) => {
					get(this.apiUrl + "/feature/book/sparepartsExport/create").then(res => {
						// console.log(res)
						if (res.success) {
							reslove(res.data)
						}
					})
				})

			},

			select_type() {
				uni.redirectTo({
					url: "/pages/outbound/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>