<template>
|
<el-dialog
|
v-model="dialogVisible"
|
:title="dialogType === 'add' ? '新增生产加工' : '编辑生产加工'"
|
width="800px"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<el-form
|
ref="formRef"
|
:model="formData"
|
:rules="rules"
|
label-width="120px"
|
class="production-form"
|
>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="煤种" prop="category">
|
<el-select v-model="formData.category" placeholder="请选择煤种" clearable style="width: 100%">
|
<el-option label="炼焦" value="炼焦" />
|
<el-option label="气煤" value="气煤" />
|
<el-option label="无烟煤" value="无烟煤" />
|
<el-option label="长焰煤" value="长焰煤" />
|
<el-option label="贫煤" value="贫煤" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="单位" prop="unit">
|
<el-select v-model="formData.unit" placeholder="请选择单位" clearable style="width: 100%">
|
<el-option label="吨位" value="吨位" />
|
<el-option label="千克" value="千克" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="生产数量" prop="productionVolume">
|
<el-input-number
|
v-model="formData.productionVolume"
|
:min="0"
|
:precision="2"
|
style="width: 100%"
|
@change="calculateTotal"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="人工成本" prop="laborCost">
|
<el-input-number
|
v-model="formData.laborCost"
|
:min="0"
|
:precision="2"
|
style="width: 100%"
|
@change="calculateTotal"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="原料成本" prop="materialCost">
|
<el-input-number
|
v-model="formData.materialCost"
|
:min="0"
|
:precision="2"
|
style="width: 100%"
|
@change="calculateTotal"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="设备费用" prop="equipmentCost">
|
<el-input-number
|
v-model="formData.equipmentCost"
|
:min="0"
|
:precision="2"
|
style="width: 100%"
|
@change="calculateTotal"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="总成本" prop="totalCost">
|
<el-input-number
|
v-model="formData.totalCost"
|
:min="0"
|
:precision="2"
|
style="width: 100%"
|
disabled
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="总价格" prop="totalPrice">
|
<el-input-number
|
v-model="formData.totalPrice"
|
:min="0"
|
:precision="2"
|
style="width: 100%"
|
@change="calculateProfit"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="利润" prop="profit">
|
<el-input-number
|
v-model="formData.profit"
|
:min="0"
|
:precision="2"
|
style="width: 100%"
|
disabled
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="复记人" prop="reviewer">
|
<el-input v-model="formData.reviewer" placeholder="请输入复记人" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="日期" prop="date">
|
<el-date-picker
|
v-model="formData.date"
|
type="date"
|
placeholder="请选择日期"
|
style="width: 100%"
|
value-format="YYYY-MM-DD"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, reactive, watch } from 'vue'
|
import { ElMessage } from 'element-plus'
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
type: {
|
type: String,
|
default: 'add' // 'add' 或 'edit'
|
},
|
rowData: {
|
type: Object,
|
default: () => ({})
|
}
|
})
|
|
const emit = defineEmits(['update:visible', 'success'])
|
|
const dialogVisible = ref(false)
|
const dialogType = ref('add')
|
const loading = ref(false)
|
const formRef = ref(null)
|
|
// 表单数据
|
const formData = reactive({
|
category: '',
|
unit: '',
|
productionVolume: 0,
|
laborCost: 0,
|
materialCost: 0,
|
equipmentCost: 0,
|
totalCost: 0,
|
totalPrice: 0,
|
profit: 0,
|
reviewer: '',
|
date: ''
|
})
|
|
// 表单验证规则
|
const rules = {
|
category: [{ required: true, message: '请选择煤种', trigger: 'change' }],
|
unit: [{ required: true, message: '请选择单位', trigger: 'change' }],
|
productionVolume: [{ required: true, message: '请输入生产数量', trigger: 'blur' }],
|
laborCost: [{ required: true, message: '请输入人工成本', trigger: 'blur' }],
|
materialCost: [{ required: true, message: '请输入原料成本', trigger: 'blur' }],
|
equipmentCost: [{ required: true, message: '请输入设备费用', trigger: 'blur' }],
|
totalPrice: [{ required: true, message: '请输入总价格', trigger: 'blur' }],
|
reviewer: [{ required: true, message: '请输入复记人', trigger: 'blur' }],
|
date: [{ required: true, message: '请选择日期', trigger: 'change' }]
|
}
|
|
// 监听visible变化
|
watch(() => props.visible, (val) => {
|
dialogVisible.value = val
|
if (val) {
|
dialogType.value = props.type
|
if (props.type === 'edit') {
|
Object.assign(formData, props.rowData)
|
}
|
}
|
})
|
|
// 监听dialogVisible变化
|
watch(() => dialogVisible.value, (val) => {
|
emit('update:visible', val)
|
})
|
|
// 计算总成本
|
const calculateTotal = () => {
|
formData.totalCost = (
|
formData.laborCost +
|
formData.materialCost +
|
formData.equipmentCost
|
)
|
calculateProfit()
|
}
|
|
// 计算利润
|
const calculateProfit = () => {
|
formData.profit = formData.totalPrice - formData.totalCost
|
}
|
|
// 提交表单
|
const handleSubmit = async () => {
|
if (!formRef.value) return
|
|
await formRef.value.validate((valid) => {
|
if (valid) {
|
loading.value = true
|
// 触发成功事件，传递表单数据
|
emit('success', { ...formData })
|
loading.value = false
|
handleClose()
|
}
|
})
|
}
|
|
// 关闭弹窗
|
const handleClose = () => {
|
dialogVisible.value = false
|
formRef.value?.resetFields()
|
Object.assign(formData, {
|
category: '',
|
unit: '',
|
productionVolume: 0,
|
laborCost: 0,
|
materialCost: 0,
|
equipmentCost: 0,
|
totalCost: 0,
|
totalPrice: 0,
|
profit: 0,
|
reviewer: '',
|
date: ''
|
})
|
}
|
</script>
|
|
<style scoped>
|
.production-form {
|
padding: 20px;
|
}
|
|
.dialog-footer {
|
display: flex;
|
justify-content: flex-end;
|
gap: 10px;
|
}
|
|
:deep(.el-form-item__label) {
|
font-weight: bold;
|
}
|
|
:deep(.el-input-number) {
|
width: 100%;
|
}
|
|
:deep(.el-select) {
|
width: 100%;
|
}
|
</style>
|
