add-edit.vue 9.2 KB
<template>
	<view>
		<view class="content-top">
			<view class="content-item u-f u-f-aic plr-10">
				<view class="title require u-f1">
					物料名称
				</view>
				<view class="inp u-f3">
					<input v-model="form.name" placeholder="请输入" />
				</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">
					<input v-model="form.code" placeholder="请输入" />
				</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="materialPickerChange" :value="typeIndex" :range-key="'name'" :range="materialTypeArr">
						<view class="u-f u-f-aic fr">
							<view class="uni-input"><text class="placeholder-color" v-if="typeIndex == -1">请选择</text><text v-else>{{materialTypeArr[typeIndex].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-jce u-f-aic">
							<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-f3">
					<input v-model="form.spec" placeholder="请输入" />
				</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.spec" placeholder="请输入" />
				</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.daysToExpire" placeholder="请输入" />
				</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.minShelfLifeDays" placeholder="请输入" />
				</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.trackSerialNum" placeholder="请输入" />
				</view>
			</view>
			<view class="content-item u-f u-f-aic plr-10">
				<view class="title u-f1">
					自动生成序列号
				</view>
				<view class="inp u-f2 u-radio">
					<radio :checked="false" v-if="form.autoGenSerialNum == 0" @tap="genSerialClick(0)" />
					<radio :checked="true" @tap="genSerialClick(1)" v-else />
				</view>
			</view>
			<view class="content-item u-f u-f-aic plr-10">
				<view class="title u-f1">
					停用
				</view>
				<view class="inp u-f3 u-radio">
					<radio :checked="false" v-if="form.enable == 0" @tap="enableClick(0)" />
					<radio :checked="true" @tap="enableClick(1)" v-else />
				</view>
			</view>
		</view>
		<view class="footer u-f u-f-aic">
			<button class="btn" :loading="loading" type="warn" @tap="save" :disabled="disabled">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				materialTypeArr: [],
				companyArr: [],
				typeIndex: -1,
				companyIndex: -1,
				loading: false,
				disabled: false,
				form: {
					code: undefined,
					name: undefined,
					spec: undefined,
					unit: undefined,
					type: undefined,
					daysToExpire: undefined,
					minShelfLifeDays: undefined,
					trackSerialNum: undefined,
					companyCode: undefined,
					autoGenSerialNum: 0,
					enable: 0
				},
				timer: null,
				type: ''
			}
		},
		onLoad(option) {
			console.log(option)
			this.getMaterialType();
			this.getCompanies();
			this.type = option.type;
			if (option.type == 'add') {
				this.getMaterialCode();
				this.form = {
					code: undefined,
					name: undefined,
					spec: undefined,
					unit: undefined,
					type: undefined,
					daysToExpire: undefined,
					minShelfLifeDays: undefined,
					trackSerialNum: undefined,
					companyCode: undefined,
					autoGenSerialNum: 0,
					enable: 0
				}
			} else {
				this.$http.material.getCurrMaterial(option.id).then(res => {
					if (res.data.code == 200) {
						console.log(res)
						this.form = res.data.data;
						this.typeIndex = this.materialTypeArr.findIndex((item, index) => item.code == this.form.type);
						this.companyIndex = this.companyArr.findIndex((item, index) => item.code == this.form.companyCode);
					}
				})
			}

		},
		onReady() {
			if (this.type == 'add') {
				uni.setNavigationBarTitle({
					title: '新增物料'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '修改物料'
				})
			}
		},
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		methods: {
			// 获取物料编码
			getMaterialCode() {
				this.$http.material.createMaterialCode().then(res => {
					this.form.code = res.data.data
				})
			},
			// 获取物料类型
			getMaterialType() {
				this.$http.material.getMaterialType().then(res => {
					console.log(res);
					this.materialTypeArr = res.data.data
				})
			},
			// 获取用户可操作货主
			getCompanies() {
				this.$http.dict.getCompaniesByToken().then(res => {
					console.log(res)
					this.companyArr = res.data
				})
			},
			// 物料类型选择点击
			materialPickerChange(e) {
				this.typeIndex = e.target.value;
				this.form.type = this.materialTypeArr[this.typeIndex].code;
			},
			// 货主选择点击
			companyPickerChange(e) {
				this.companyIndex = e.target.value;
				this.form.companyCode = this.companyArr[this.companyIndex].code;
			},
			// 自动生成序列号单选框点击
			genSerialClick(value) {
				if (value == 0) {
					this.form.autoGenSerialNum = 1
				} else {
					this.form.autoGenSerialNum = 0
				}
			},

			// 停用单选框点击
			enableClick(value) {
				if (value == 0) {
					this.form.enable = 1
				} else {
					this.form.enable = 0
				}
			},

			// 保存按钮操作
			save() {
				if (this.loading) {
					return false;
				}
				if (!this.form.name.trim()) {
					uni.showModal({
						title: '提示',
						content: '请输入物料名称!',
						showCancel: false
					});
					return
				}
				if (!this.form.code.trim()) {
					uni.showModal({
						title: '提示',
						content: '请输入物料编码!',
						showCancel: false
					});
					return
				}
				if (this.form.type == undefined) {
					uni.showModal({
						title: '提示',
						content: '物料类型不能为空!',
						showCancel: false
					});
					return
				}
				if (this.form.companyCode == undefined) {
					uni.showModal({
						title: '提示',
						content: '货主不能为空!',
						showCancel: false
					});
					return
				}
				this.loading = true;
				this.disabled = true;
				if (this.type == 'add') {
					this.$http.material.addMaterial(this.form).then(res => {
						console.log(res);
						if (res.data.code == 200) {
							this.loading = false;
							this.disabled = false;
							uni.$emit('addUpdateMaterial');
							this.timer = setTimeout(() => {
								uni.navigateBack()
							}, 500)
						} else {
							uni.showModal({
								title: '提示',
								content: res.data.msg
							});
							this.loading = false;
							this.disabled = false;
						}

					}).catch(err => {
						this.loading = false;
						this.disabled = false;
					})
				} else {
					this.$http.material.updateMaterial(this.form).then(res => {
						console.log(res);
						if (res.data.code == 200) {
							this.loading = false;
							this.disabled = false;
							uni.$emit('editUpdateMaterial');
							this.timer = setTimeout(() => {
								uni.navigateBack()
							}, 500)
						} 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>
	.content-top {
		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;

		}
	}
</style>