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" show-zoom resize transfer show-footer>
			<template #title>
				<span>选择仓库、仓位</span>
			</template>
			<template #default>
				<by-form :propConfig="config" ref="form"></by-form>
			</template>
			<template #footer>
				<div class="btn">
					<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";
	@Component
	export default class TowInOne extends Vue {
		vxeValue : any = false
		@Prop()
		propValue : any;
		@Prop()
		propConfig : any;
		get getPropConfig() {
			return this.propConfig?.isSelect;
		}
		config = {
			attr: {
				size: 'small',
				height: 200,
			},
			columns: [
				[{
					span: 11,
					label: '仓库',
					prop: 'warehouse',
					component: 'warehouse',
					compConfig: {
						attr: {
							placeholder: '请选择仓库',
							retConfig: {
								storehouseName: 'name',
								storehouseId: 'id'
							},
						},
					}
				}, {
					span: 11,
					label: '仓位',
					prop: 'warehousePosition',
					component: 'warehouse-position',
					compConfig: {
						attr: {
							placeholder: '请选择仓位',
							retConfig: {
								storingLocationName: 'name',
								storingLocationId: 'id'
							},
						}
					}
				}]
			]
		}

		// 打开弹窗
		openModal() {
			let data = (this as any).$lodash.cloneDeep(this.propValue);
			data = data.split(',');
			setTimeout(() => {
				(this as any).$refs.form.setValue({
					warehouse: data[0],
					warehousePosition: data[1]
				})
			}, 0)
			this.vxeValue = true;
		}
		// 确定仓库仓位
		doConfirm() {
			let data : any = (this as any).$refs.form.getValue();
			data.towInOne = data.storehouseName + ',' + data.storingLocationName;
			if (!data.storehouseId || !data.storingLocationId) return this.$message.warning('仓库仓位为必填项');
			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>