<template> <j-modal :title="title" :width="width" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen @ok="handleOk" @cancel="handleCancel" cancelText="关闭" > <a-spin :spinning="confirmLoading"> <a-form-model ref="form" :model="model" :rules="validatorRules"> <a-row> <a-col :span="24"> <a-form-model-item label="物料" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialCode"> <j-search-select-tag v-model="model.materialCode" dict="material,name,code" placeholder="请选择物料编码" :pageSize="10" :async="true" /> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="单据数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="qty"> <a-input-number v-model="model.qty" placeholder="请输入单据数量" style="width: 100%" /> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="库存状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="inventoryStatus"> <j-dict-select-tag type="list" v-model="model.inventoryStatus" dictCode="inventory_status" placeholder="请选择库存状态" /> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="批次" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="batch"> <a-input v-model="model.batch" placeholder="请输入批次"></a-input> </a-form-model-item> </a-col> </a-row> </a-form-model> </a-spin> </j-modal> </template> <script> import { httpAction } from '@/api/manage' import { validateDuplicateValue } from '@/utils/util' import { searchMaterialByCode } from '@/api/api' export default { name: 'ReceiptDetailModal', components: {}, props: { mainId: { type: String, required: false, default: '' } }, data() { return { title: '操作', width: 800, visible: false, materialList: {}, querySource: {}, model: {}, labelCol: { xs: { span: 24 }, sm: { span: 5 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 16 } }, confirmLoading: false, validatorRules: { materialCode: [{ required: true, message: '请输入物料编码!' }], qty: [{ required: true, message: '请输入单据数量!' }], inventoryStatus: [{ required: true, message: '请输入库存状态!' }] }, url: { add: '/receipt/receiptHeader/addReceiptDetail', edit: '/receipt/receiptHeader/editReceiptDetail' } } }, created() { //备份model原始值 this.modelDefault = JSON.parse(JSON.stringify(this.model)) this.searchMaterial() }, methods: { add() { let record = { inventoryStatus: 'good' } this.edit(record) }, edit(record) { this.model = Object.assign({}, record) this.visible = true }, close() { this.$emit('close') this.visible = false this.$refs.form.clearValidate() }, searchMaterial() { const that = this that.querySource.materialCode = that.model.materialCode searchMaterialByCode(that.querySource).then(res => { that.materialList = res.result }) }, handleOk() { const that = this // 触发表单验证 this.$refs.form.validate(valid => { if (valid) { that.confirmLoading = true let httpurl = '' let method = '' if (!this.model.id) { httpurl += this.url.add method = 'post' } else { httpurl += this.url.edit method = 'put' } this.model['receiptId'] = this.mainId httpAction(httpurl, this.model, method) .then(res => { if (res.success) { that.$message.success(res.message) that.$emit('ok') } else { that.$message.warning(res.message) } }) .finally(() => { that.confirmLoading = false that.close() }) } else { return false } }) }, handleCancel() { this.close() } } } </script>