<template>
|
<el-dialog :model-value="dialogFormVisible" :title="operationType === 'add' ? '新增材料库存' : '编辑材料库存'" width="70%"
|
@update:model-value="$emit('update:dialogFormVisible', $event)" @close="closeDia">
|
<el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="产品大类：" prop="productCategory">
|
<el-input disabled v-model="form.productCategory" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="规格型号：" prop="specificationModel">
|
<el-input disabled v-model="form.specificationModel" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="单位：" prop="unit">
|
<el-input disabled v-model="form.unit" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="物品类型：" prop="itemType">
|
<el-input disabled v-model="form.itemType" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="入库时间：" prop="createTime">
|
<el-date-picker style="width: 100%" v-model="form.createTime" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
|
type="date" placeholder="请选择" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="库存数量：" prop="inboundNum">
|
<el-input v-model="form.inboundNum" placeholder="请输入" clearable @input="calculateTotalPrice" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="已出库数量：" prop="totalInboundNum">
|
<el-input disabled v-model="form.totalInboundNum" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="待出库数量：" prop="inboundNum0">
|
<el-input disabled v-model="form.inboundNum0" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="单价(元)：" prop="taxInclusiveUnitPrice">
|
<el-input v-model="form.taxInclusiveUnitPrice" placeholder="请输入" clearable @input="calculateTotalPrice" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="总价(元)：" prop="taxInclusiveTotalPrice">
|
<el-input disabled v-model="form.taxInclusiveTotalPrice" placeholder="自动计算" clearable />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确认</el-button>
|
<el-button @click="closeDia">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, reactive, toRefs, watch } from 'vue'
|
|
const props = defineProps({
|
dialogFormVisible: Boolean,
|
operationType: String,
|
formData: Object
|
})
|
|
const emit = defineEmits(['update:dialogFormVisible', 'submit', 'close'])
|
|
const formRef = ref()
|
|
const data = reactive({
|
form: {
|
productCategory: '',
|
specificationModel: '',
|
unit: '',
|
itemType: '',
|
createTime: '',
|
inboundNum: '',
|
totalInboundNum: '',
|
inboundNum0: '',
|
taxInclusiveUnitPrice: '',
|
taxInclusiveTotalPrice: ''
|
},
|
rules: {
|
productCategory: [{ required: true, message: '请输入产品大类', trigger: 'blur' }],
|
specificationModel: [{ required: true, message: '请输入规格型号', trigger: 'blur' }],
|
unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
|
itemType: [{ required: true, message: '请输入物品类型', trigger: 'blur' }],
|
createTime: [{ required: true, message: '请选择入库时间', trigger: 'change' }],
|
inboundNum: [{ required: true, message: '请输入库存数量', trigger: 'blur' }],
|
taxInclusiveUnitPrice: [{ required: true, message: '请输入单价', trigger: 'blur' }]
|
}
|
})
|
|
const { form, rules } = toRefs(data)
|
|
// 计算总价：总价 = 单价 × 剩余库存
|
const calculateTotalPrice = () => {
|
const unitPrice = parseFloat(form.value.taxInclusiveUnitPrice) || 0
|
const stockQuantity = parseFloat(form.value.inboundNum) || 0 // 库存数量
|
const outboundQuantity = parseFloat(form.value.totalInboundNum) || 0 // 已出库数量
|
const remainingStock = stockQuantity - outboundQuantity // 剩余库存
|
form.value.taxInclusiveTotalPrice = (unitPrice * remainingStock).toFixed(2)
|
}
|
|
// 监听formData变化
|
watch(() => props.formData, (newVal) => {
|
if (newVal) {
|
form.value = { ...newVal }
|
// 数据变化后重新计算总价
|
calculateTotalPrice()
|
}
|
}, { immediate: true })
|
|
// 提交表单
|
const submitForm = () => {
|
formRef.value.validate(valid => {
|
if (valid) {
|
emit('submit', form.value)
|
}
|
})
|
}
|
|
// 关闭弹框
|
const closeDia = () => {
|
emit('close')
|
emit('update:dialogFormVisible', false)
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
.dialog-footer {
|
text-align: center;
|
}
|
</style>
|
