add.vue 6.7 KB
<template>
	<view>
		<view class="header">
			<view class="content">
				<view class="content-item u-f u-f-aic plr-10">
					<view class="title require u-f1">
						盘点类型
					</view>
					<view class="inp u-f3">
						<picker @change="typePickerChange" :value="typeIndex" :range-key="'dictLabel'"
							:range="countTypeArr">
							<view class="u-f u-f-aic fr">
								<view class="uni-input"><text class="placeholder-color"
										v-if="typeIndex == -1">请选择</text><text
										v-else>{{countTypeArr[typeIndex].dictLabel}}</text></view>
							</view>
						</picker>
					</view>
				</view>
				<view class="content-item u-f u-f-aic plr-10">
					<view class="title require u-f1">
						盘点方式
					</view>
					<view class="inp u-f3">
						<picker @change="preferencePickerChange" :value="preferenceIndex" :range-key="'name'"
							:range="preferenceArr">
							<view class="u-f u-f-aic fr">
								<view class="uni-input"><text class="placeholder-color"
										v-if="preferenceIndex == -1">请选择</text><text
										v-else>{{preferenceArr[preferenceIndex].name}}</text></view>
							</view>
						</picker>
					</view>
				</view>
				<view class="content-item u-f u-f-aic plr-10">
					<view class="title require u-f1">
						货主
					</view>
					<view class="inp u-f3">
						<picker @change="companyPickerChange" :value="companyIndex" :range-key="'name'"
							:range="companyArr">
							<view class="u-f u-f-aic fr">
								<view class="uni-input"><text class="placeholder-color"
										v-if="companyIndex == -1">请选择</text><text
										v-else>{{companyArr[companyIndex].name}}</text></view>
							</view>
						</picker>
					</view>
				</view>
				<view class="content-item u-f u-f-aic plr-10">
					<view class="title u-f1">
						原始盘点内部号
					</view>
					<view class="inp u-f2">
						<input v-model="form.countOrderId" />
					</view>
				</view>
				<view class="content-item u-f u-f-aic plr-10">
					<view class="title u-f1">
						源盘点单号
					</view>
					<view class="inp u-f3">
						<input v-model="form.sourceCode" />
					</view>
				</view>

				<view class="content-item u-f u-f-aic plr-10">
					<view class="title u-f1">
						抽盘范围(单位 %)
					</view>
					<view class="inp u-f1">
						<input v-model="form.range" />
					</view>
				</view>
				<view class="content-item u-f u-f-aic plr-10">
					<view class="title u-f1">
						备注
					</view>
					<view class="inp u-f3">
						<input v-model="form.remark" />
					</view>
				</view>
			</view>
		</view>

		<view class="footer u-f u-f-aic">
			<button class="btn u-f u-f-jcc u-f-aic" :loading="loading" type="warn" @tap="save" :disabled="disabled">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				disabled: false,
				form: {
					countType: '',
					preferenceCode: '',
					companyCode: '',
					countOrderId: '',
					sourceCode: '',
					remark: '',
					range: null,
				},
				typeIndex: -1,
				preferenceIndex: -1,
				companyIndex: -1,
				countTypeArr: [],
				preferenceArr: [],
				companyArr: [],
				timer: null
			}
		},
		onLoad() {
			this.getDicts("cyclecountType").then(res => {

				this.countTypeArr = res.data.data;
			});
			this.$api.dict.getCompaniesByToken().then(res => {

				this.companyArr = res.data
			});
			this.$api.cycle.listCycleCountPreference().then(res => {

				this.preferenceArr = res.data.rows;
			})
		},
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		methods: {
			// 盘点类型选择点击
			typePickerChange(e) {
				this.typeIndex = e.target.value;
				this.form.countType = this.countTypeArr[this.typeIndex].dictValue;
			},
			// 盘点方式选择点击
			preferencePickerChange(e) {
				this.preferenceIndex = e.target.value;
				this.form.preferenceCode = this.preferenceArr[this.preferenceIndex].code;
			},
			// 货主选择点击
			companyPickerChange(e) {
				this.companyIndex = e.target.value;
				this.form.companyCode = this.companyArr[this.companyIndex].code;
			},
			// 保存按钮操作
			save() {
				if (this.loading) {
					return false;
				}
				if (!this.form.countType) {
					uni.showModal({
						title: '提示',
						content: '盘点类型不能为空!',
						showCancel: false
					});
					return
				}
				if (!this.form.preferenceCode) {
					uni.showModal({
						title: '提示',
						content: '盘点方式不能为空!',
						showCancel: false
					});
					return
				}
				if (!this.form.companyCode) {
					uni.showModal({
						title: '提示',
						content: '货主不能为空!',
						showCancel: false
					});
					return
				}
				if (!(/^([1-9]?\d|100)$/).test(this.form.range) && this.form.range) {
					uni.showModal({
						title: '提示',
						content: '抽盘范围只能1~100内正数!',
						showCancel: false
					});
					return
				}

				this.loading = true;
				this.disabled = true;
				this.$api.cycle.addCycleCountHeader(this.form).then(res => {
					if (res.data.code == 200) {
						this.$prePage()._data.queryParams.pageNum = 1;
						this.$prePage().getCycleCountHeader();
						this.$wx.showToast({
							title: '保存成功!'
						});
						this.timer = setTimeout(() => {
							uni.navigateBack();
							this.loading = false;
							this.disabled = false;
						}, 400)
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg
						});
						this.loading = false;
						this.disabled = false;
					}

				}).catch(err => {
					this.loading = false;
					this.disabled = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		overflow-y: auto;

		.content {
			background-color: $uni-bg-color;

			.content-item {
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 2rpx solid $uni-border-color;

				.title {
					font-size: $uni-font-size-lg;
				}

				.inp {
					text-align: right;
					font-size: $uni-font-size-lg;

					/deep/ uni-radio .uni-radio-input {
						margin-right: 0;
					}

					.picker {
						justify-content: flex-end;
					}
				}

				.require {
					position: relative;

					// padding-left: 10rpx;
					&::after {
						position: absolute;
						content: '*';
						color: red;
						font-size: 48rpx;
						top: 6rpx;
						left: -20rpx;
					}
				}
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		border-top: 2rpx solid #E1F3D8;

		.btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			text-align: center;
			font-size: $uni-font-size-lg;
			border-radius: 50rpx;
			margin: 0 30rpx;
			background-color: $uni-color-primary;
            &:after {
            	border: none;
            }
		}
	}
</style>