oms/src/views/audit/warehousing/components/towInOne.vue

<template>
	<div class="clearfix parentC">
		<div class="inputC">{{propValue}}</div>
		<div v-if="getPropConfig">
			<div class="selectC" v-if="propValue" key="propValue1" @click="openModal">更换</div>
			<div class="selectC" v-else key="propValue2" @click="vxeValue = true;">选择</div>
		</div>
		<vxe-modal v-model="vxeValue" width="800" height="170" show-zoom resize transfer show-footer>
			<template #title>
				<span>选择仓库、仓位</span>
			</template>
			<template #default>
				<by-form :propConfig="config" ref="form" style="margin-top: 10px;"></by-form>
			</template>
			<template #footer>
				<div class="btn">
					<el-button size="small" @click="vxeValue=false">取消</el-button>
					<el-button type="primary" size="small" @click="doConfirm">确定</el-button>
				</div>
			</template>
		</vxe-modal>
	</div>
</template>

<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import api from "@/api/order";
	@Component
	export default class TowInOne extends Vue {
		vxeValue : any = false
		@Prop()
		propValue : any;
		@Prop()
		parentValue : any;
		@Prop()
		propConfig : any;
		get getPropConfig() {
			let boolean : any = null
			if (this.parentValue.submitState && this.parentValue.submitState === 1) {
				boolean = false
			} else {
				boolean = true
			};
			return boolean
		}
		config = {
			attr: {
				size: 'small',
				height: 43,
			},
			columns: [
				[{
					span: 11,
					label: '仓库',
					prop: 'storehouseName',
					component: 'warehouse',
					compConfig: {
						attr: {
							placeholder: '请选择仓库',
							retConfig: {
								storehouseName: 'name',
								storehouseId: 'id'
							},
						},
					}
				}, {
					span: 11,
					label: '仓位',
					prop: 'storingLocationName',
					component: 'warehouse-position',
					compConfig: {
						attr: {
							placeholder: '请选择仓位',
							retConfig: {
								storingLocationName: 'name',
								storingLocationId: 'id'
							},
						}
					}
				}]
			]
		}
		created() {
			// console.log(this.getPropConfig());
		}
		// 打开弹窗
		openModal() {
			let data = (this as any).$lodash.cloneDeep(this.propValue);
			data = data.split(',');
			console.log(data);
			console.log(this.parentValue);
			setTimeout(() => {
				(this as any).$refs.form.setValue({
					storehouseName: this.parentValue.storehouseName,
					storehouseId: this.parentValue.storehouseId,
					storingLocationName: this.parentValue.storingLocationName,
					storingLocationId: this.parentValue.storingLocationId,
				})
			}, 0)
			this.vxeValue = true;
		}
		// 确定仓库仓位
		doConfirm() {
			let data : any = (this as any).$refs.form.getValue();
			console.log('data', data);
			// console.log(this.parentValue);
			if (!data.storehouseId || !data.storingLocationId) return this.$message.warning('仓库仓位为必填项');
			data.towInOne = data.storehouseName + ',' + data.storingLocationName;
			if (this.parentValue.materialSku) {
				let loading = this.$loading({ target: '.main-container' });
				api.getInventoryByStoridAndSkuid({
					storidId: data.storingLocationId,
					skuid: this.parentValue.materialSku,
				}).then((res : any) => {
					if (res.code === 200) {
						data.inventory = res.data;
						this.$emit('onChange', data);
						loading.close();
						this.vxeValue = false;
					}
				}).catch(() => loading.close())
			} else {
				this.$emit('onChange', data);
				this.vxeValue = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.parentC {
		display: flex;
		align-items: center;

		.inputC {
			float: left;
			width: calc(100% - 54px);
		}

		.selectC {
			float: left;
			margin-left: 10px;
			color: #fff;
			background-color: #0089ff;
			padding: 0 10px;
			border-radius: 12px;
			cursor: pointer;
		}
	}
</style>