zhongshen_project/addon/cashier---/source/os/components/ns-exwarehouse/ns-exwarehouse.vue

<template>
	<view class="ns-to">
		<view class="title">
			产品{{ keys_type }}
			<text class="iconfont iconguanbi1" @click="close"></text>
		</view>
		<view class="ns-body" v-if="sku_list.length">
			<view class="item-type1">
				<view class="item-left">产品名称：</view>
				<view>{{ sku_list[0].goods_name }}</view>
			</view>
			<view class="item-type1 item-type2">
				<view class="item-left">{{ keys_type }}类型：</view>
				<view class="type2-right type3-right" v-if="documentTypeList.length > 0">
					<picker @change="bindtypeChange" :value="type_index" :range="documentTypeList" :range-key="'name'">
						<view class="uni-input">
							{{ documentTypeList[type_index].name }}
							<text class="iconfont iconxiala"></text>
						</view>
					</picker>
				</view>
			</view>
			<view class="item-type1 item-type2" v-if="sku_list.length > 1">
				<view class="item-left">规格选择：</view>
				<view class="type2-right type3-right">
					<picker @change="bindskuChange" :value="sku_index" :range="sku_list" :range-key="'spec_name'">
						<view class="uni-input">
							{{ sku_list[sku_index].spec_name }}
							<text class="iconfont iconxiala"></text>
						</view>
					</picker>
				</view>
			</view>
			<view class="item-type1">
				<view class="item-left">当前库存：</view>
				<view>{{ sku_list[sku_index].stock }}</view>
			</view>

			<view class="item-type1 item-type4">
				<view class="item-left">{{ keys_type }}时间：</view>
				<view class="type2-right type3-right"><uni-datetime-picker type="datetime" v-model="dateTime" @change="changeTime" /></view>
			</view>

			<view class="item-type1">
				<view class="item-left">{{ keys_type }}数量：</view>
				<view class="item-right"><input type="number" v-model="num" :placeholder="'请输入' + keys_type + '数量'" /></view>
			</view>

			<view class="item-type1" v-if="keys == 'input'">
				<view class="item-left">{{ keys_type }}单价：</view>
				<view class="item-right"><input type="digit" v-model="price" :placeholder="'请输入' + keys_type + '单价'" /></view>
			</view>

			<view class="item-type1" v-if="keys == 'input'">
				<view class="item-left">总金额：</view>
				<view>{{ parseFloat(parseFloat(num) * parseFloat(price).toFixed(2)).toFixed(2) }}</view>
			</view>

			<view class="item-type3">
				<view class="item-left">备注：</view>
				<view class="item-right"><textarea class="textarea" maxlength="100" placeholder="请输入备注，不能超过100个字符" v-model="remark"></textarea></view>
			</view>

			<view class="bottom-btn">
				<button type="primary" class="primary-btn btn" @click="operation">保存</button>
				<button type="primary" class="default-btn btn save" @click="close">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
import unidatetimepicker from '@/components/uni-datetime-picker/uni-datetime-picker.vue';
export default {
	components: {
		unidatetimepicker
	},
	props: {
		documentTypeList: {
			type: Array,
			default: () => {
				return [];
			}
		},
		sku_list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		//弹窗 -- 标题（出库 || 入库）
		keys: {
			type: String,
			default: () => {
				return '';
			}
		}
	},
	data() {
		return {
			//出入库选择
			type_index: 0,
			//规格选择
			sku_index: 0,
			//时间数据
			dateTime: '',
			// 入库数量
			num: 0,
			// 入库单价
			price: 0,
			//发表留言
			remark: '',
			// 出入库时间
			time: '',
			//出路库类型
			keys_type: '入库',
			// 防重复操作
			set_judge: false
		};
	},
	mounted() {
		if (this.keys == 'output') {
			this.keys_type = '出库';
		} else {
			this.keys_type = '入库';
		}
		let myDate = new Date();
		let Y = myDate.getFullYear();
		let M = myDate.getMonth() + 1;
		let D = myDate.getDate();
		let H = myDate.getHours();
		let Min = myDate.getMinutes();
		this.$nextTick(() => {
			this.dateTime = Y + '-' + M + '-' + D + ' ' + H + ':' + Min + ':00';
		});
	},
	methods: {
		// 出入库类型选择
		bindtypeChange(e) {
			this.type_index = e.detail.value;
		},
		// 规格选择
		bindskuChange(e) {
			this.sku_index = e.detail.value;
		},
		// 弹窗关闭
		close() {
			this.$emit('close', 'put');
		},
		// 设置时间
		changeTime(e) {
			this.time = e;
		},
		// 请求出库入库操作
		operation() {
			if (this.set_judge) return;
			this.set_judge = true;
			let data = {
				sku_id: this.sku_list[this.sku_index].sku_id,
				remark: this.remark,
				goods_num: this.num,
				time: this.time,
				key: this.documentTypeList[this.type_index].key
			};
			if (this.num < 0 || this.num == 0) {
				this.$util.showToast({
					title: this.keys_type + '数量必须为大于0的整数'
				});
				this.set_judge = false;
				return;
			}
			if (this.keys == 'input') {
				data.goods_price = this.price;
			} else {
				if (parseFloat(this.num) > parseFloat(this.sku_list[this.sku_index].stock)) {
					this.$util.showToast({
						title: '出库数量，请勿大于当前库存'
					});
					this.set_judge = false;
					return;
				}
			}
			this.$emit('operation', data, res => {
				this.set_judge = res.judge;
			});
		}
	},
	watch: {
		num() {
			if (!this.num) {
				this.num = 0;
			}
			this.$forceUpdate();
		},
		price() {
			if (!this.price) {
				this.price = 0;
			}
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss" scoped>
.ns-to {
	width: 100%;
	height: 100%;
	background: #ffffff;
	border-radius: 0.04rem;
	view {
		color: #303133 !important;
	}
	.title {
		width: 100%;
		height: 0.5rem;
		border-bottom: 0.01rem solid #e6e6e6;
		font-size: 0.16rem;
		line-height: 0.5rem;
		text-align: center;
		position: relative;
		font-weight: bold;
		.iconguanbi1 {
			font-size: 0.2rem;
			position: absolute;
			top: 50%;
			right: 0.15rem;
			transform: translateY(-50%);
			font-weight: 500;
		}
	}
	.ns-body {
		width: 100%;
		height: calc(100% - 0.5rem);
		padding: 0.15rem 0.15rem 0.2rem 0.15rem;
		box-sizing: border-box;
		.item-type1 {
			display: flex;
			align-items: center;
			margin-top: 0.2rem;
			view {
				font-size: 0.16rem;
			}
			.item-left {
				width: 1.6rem;
				text-align: right;
				padding-right: 0.15rem;
			}
			.item-right {
				width: 2.1rem;
				height: 0.3rem;
				border: 0.01rem solid #e6e6e6;
				display: flex;
				align-items: center;
				padding-left: 0.1rem;
				input {
					font-size: 0.14rem;
				}
			}
		}
		.item-type2 {
			.type2-right {
				// text-align: right;
			}
			.type3-right {
				width: 2.2rem;
				height: 0.32rem;
				line-height: 0.32rem;
				border: 0.01rem solid #e6e6e6;
				padding-left: 0.1rem;
				.uni-input {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.iconxiala {
					font-size: 0.2rem;
					margin-right: 0.15rem;
				}
			}
		}
		.item-type3 {
			margin-top: 0.2rem;
			view {
				font-size: 0.16rem;
				float: left;
			}
			.item-left {
				width: 1.6rem;
				text-align: right;
				padding-right: 0.15rem;
			}
			.item-right {
				width: 2.1rem;
				height: 1rem;
				padding: 0.1rem;
				border: 0.01rem solid #e6e6e6;
				.textarea {
					width: 100%;
					height: 100%;
					font-size: 0.14rem;
				}
			}
		}
		.item-type3:after {
			content: '';
			height: 0;
			display: block;
			clear: both;
			overflow: hidden;
		}

		.item-type4 {
			.type2-right {
				text-align: left;
				width: 2.2rem;
				height: 0.3rem;
				/deep/ .uni-date {
					height: 100% !important;
				}
			}
		}

		.bottom-btn {
			width: 100%;
			padding-top: 0.4rem;
			.btn {
				float: right;
			}
			.save {
				margin-right: 0.1rem;
			}
		}
		.bottom-btn:after {
			content: '';
			height: 0;
			display: block;
			clear: both;
			overflow: hidden;
		}
	}
}
/deep/ .uni-date-editor {
	height: 100% !important;
}
/deep/ .uni-date-editor--x {
	height: 100% !important;
}
/deep/ .uni-date-single {
	height: 100% !important;
}
/deep/ .uni-date-editor--x .uni-date__icon-clear {
	top: -0.03rem;
}
</style>