qnadmin/src/views/stock/Consume/addConsume.vue

<template>
	<div>
		<el-drawer class="edit-drawer" title="消耗品调拨" size="650px" :visible.sync="visible"
			direction="rtl" :modal="modal" :wrapper-closable="false" @close="close">
			<el-form ref="form" :rules="rules" size="small" :model="form" label-width="120px">
				<el-form-item label="选择商品:" prop="goodsId">
					<el-input v-model="base_form.goodsName" style="width: 200px"
						:disabled="!base_form.shopName " readonly placeholder="请选择商品">
						<i slot="suffix" class="el-input__icon el-icon-search" @click="openGoodsModel"></i>
					</el-input>
				</el-form-item>
				<el-form-item label="出库数量" prop="number">
					<el-input-number v-model="form.number" controls-position="right" :min="1"></el-input-number>
				</el-form-item>
				<el-form-item style="text-align: right; padding-right: 10px">
					<el-button type="primary" @click="confirm">确 定</el-button>
					<el-button @click="close">取 消</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
		<!--    商品列表-->
		<GoodsWarehouse v-if="show_goods" :modal="false" :shop-id="base_form.shopId" goods-warehouse
			:is-check="false" :is-show="show_goods" :enable="true" @cancel="show_goods = false" @confirm="selGoods" />
	</div>
</template>

<script>
	import {
		// postClassDetails,
		allocationConsume
	} from "@/api/Stock";
	import {
	  getGoodsBasicInfoById,
	} from "@/api/goods";
	import {
		mapGetters
	} from "vuex";
	import GoodsWarehouse from "@/component/goods/GoodsWarehouse";
	export default {
		name: "AddConsume",
		components: {
			GoodsWarehouse
		},
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			isEdit: {
				type: Boolean,
				default: false,
			},
			// 是否需要遮罩层
			modal: {
				type: Boolean,
				default: true,
			},
		},

		data() {
			return {
				// 显示选择商品
				show_goods: false,
				form: {
					// 选中的商品ID
					goodsId: '',
					//数量
					number: '',
				},
				base_form: {
					// 商店id
					shopId: '',
					shopName: '',
					// 商品名称
					goodsName: ''
				},
				rules: {
					number: [{
						required: true,
						message: "请输入商品数量",
						trigger: "blur"
					}],
					basicGoodsId: [{
						required: true,
						message: "请选择商品",
						trigger: "blur"
					}],
				}
			};
		},
		computed: {
			...mapGetters({
				systemType: "MUser/systemType",
				storeData: "MUser/storeData",
			}),
		},
		created() {
			// 判断是否为门店页面
			if ([2, 3].includes(this.systemType)) {
				this.base_form.shopId = this.storeData.id; // 店铺
				this.base_form.shopName = this.storeData.name; // 店铺
			}
		},
		methods: {
			// 选择商品
			async selGoods(row,) {
				//保存选中商品
				this.form.goodsId = row[0].id;
				this.base_form.goodsName = row[0].title;
			},
			// 打开商品选择
			openGoodsModel() {
				if (!this.base_form.shopName ) return;
				this.show_goods = true;
			},
			close() {
				this.$emit("close");
			},
			// 提交
			async confirm() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						const data = await allocationConsume({
							"id": this.form.goodsId, //仓库商品id
							"number": this.form.number //调拨数量
						});
						this.$message({
							message: data.data,
							type: "success",
						});

						this.close();
						this.$emit("confirm");
					}
				});
			},
		},
	};
</script>

<style scoped>
	.btn-up {
		position: relative;
	}

	.btn-department {
		position: absolute;
		left: 270px;
		top: 4px;
	}

	.btn-role-up {
		position: relative;
	}

	.add-role {
		position: absolute;
		left: 270px;
		top: 4px;
	}

	.creat-shop {
		color: #1890ff;
		font-size: 12px;
	}
</style>