<template>
|
<el-table :data="tableData" :border="border" style="width: 100%">
|
<el-table-column label="煤种" min-width="120">
|
<template #default="{ row, $index }">
|
<el-input
|
v-model="row.coalType"
|
placeholder="请输入煤种"
|
@input="handleInput('coalType', $index, $event)"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="热值" min-width="120">
|
<template #default="{ row, $index }">
|
<el-input
|
v-model="row.calorificValue"
|
placeholder="请输入热值"
|
@input="handleInput('calorificValue', $index, $event)"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="生产数量" min-width="120">
|
<template #default="{ row, $index }">
|
<el-input
|
v-model="row.productionQuantity"
|
placeholder="请输入生产数量"
|
type="number"
|
@input="handleInput('productionQuantity', $index, $event)"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="人工成本" min-width="120">
|
<template #default="{ row, $index }">
|
<el-input
|
v-model="row.laborCost"
|
placeholder="请输入人工成本"
|
type="number"
|
@input="handleInput('laborCost', $index, $event)"
|
>
|
<template #suffix>
|
<i style="font-style:normal;">元</i>
|
</template>
|
</el-input>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="能耗成本" min-width="120">
|
<template #default="{ row, $index }">
|
<el-input
|
v-model="row.energyCost"
|
placeholder="请输入能耗成本"
|
type="number"
|
@input="handleInput('energyCost', $index, $event)"
|
>
|
<template #suffix>
|
<i style="font-style:normal;">元</i>
|
</template>
|
</el-input>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="设备折旧" min-width="120">
|
<template #default="{ row, $index }">
|
<el-input
|
v-model="row.equipmentDepreciation"
|
placeholder="请输入设备折旧"
|
type="number"
|
@input="handleInput('equipmentDepreciation', $index, $event)"
|
>
|
<template #suffix>
|
<i style="font-style:normal;">元</i>
|
</template>
|
</el-input>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="采购单价" min-width="120">
|
<template #default="{ row, $index }">
|
<el-input
|
v-model="row.purchasePrice"
|
placeholder="请输入采购单价"
|
type="number"
|
@input="handleInput('purchasePrice', $index, $event)"
|
>
|
<template #suffix>
|
<i style="font-style:normal;">元</i>
|
</template>
|
</el-input>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="总成本" min-width="120">
|
<template #default="{ row, $index }">
|
<el-input
|
v-model="row.totalCost"
|
placeholder="总成本"
|
type="number"
|
:readonly="autoCalculate"
|
@input="handleInput('totalCost', $index, $event)"
|
>
|
<template #suffix>
|
<i style="font-style:normal;">元</i>
|
</template>
|
</el-input>
|
</template>
|
</el-table-column>
|
<el-table-column v-if="showOperations" label="操作" width="120" fixed="right">
|
<template #default="{ $index }">
|
<el-button
|
type="danger"
|
size="small"
|
@click="handleDelete($index)"
|
:icon="Delete"
|
>
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</template>
|
|
<script setup name="ProductionDetailsTable">
|
import { ref, computed, watch } from 'vue'
|
import { Delete } from '@element-plus/icons-vue'
|
|
const props = defineProps({
|
modelValue: {
|
type: Array,
|
default: () => []
|
},
|
border: {
|
type: Boolean,
|
default: false
|
},
|
showOperations: {
|
type: Boolean,
|
default: true
|
},
|
autoCalculate: {
|
type: Boolean,
|
default: true
|
}
|
})
|
|
const emit = defineEmits(['update:modelValue', 'input-change', 'delete-row'])
|
|
// 使用 v-model 进行双向绑定
|
const tableData = computed({
|
get() {
|
return props.modelValue
|
},
|
set(value) {
|
emit('update:modelValue', value)
|
}
|
})
|
|
// 处理输入变化
|
const handleInput = (field, index, value) => {
|
const newData = [...tableData.value]
|
newData[index][field] = value
|
|
// 如果开启自动计算总成本
|
if (props.autoCalculate && ['laborCost', 'energyCost', 'equipmentDepreciation', 'purchasePrice'].includes(field)) {
|
calculateTotalCost(newData[index])
|
}
|
|
tableData.value = newData
|
emit('input-change', { field, index, value, row: newData[index] })
|
}
|
|
// 计算总成本
|
const calculateTotalCost = (row) => {
|
const laborCost = parseFloat(row.laborCost) || 0
|
const energyCost = parseFloat(row.energyCost) || 0
|
const equipmentDepreciation = parseFloat(row.equipmentDepreciation) || 0
|
const purchasePrice = parseFloat(row.purchasePrice) || 0
|
|
row.totalCost = (laborCost + energyCost + equipmentDepreciation + purchasePrice).toFixed(2)
|
}
|
|
// 删除行
|
const handleDelete = (index) => {
|
const newData = [...tableData.value]
|
newData.splice(index, 1)
|
tableData.value = newData
|
emit('delete-row', index)
|
}
|
|
// 暴露方法给父组件使用
|
defineExpose({
|
calculateTotalCost,
|
addRow: (rowData = {}) => {
|
const defaultRow = {
|
coalType: '',
|
calorificValue: '',
|
productionQuantity: '',
|
laborCost: '',
|
energyCost: '',
|
equipmentDepreciation: '',
|
purchasePrice: '',
|
totalCost: '',
|
...rowData
|
}
|
tableData.value = [...tableData.value, defaultRow]
|
},
|
clearData: () => {
|
tableData.value = []
|
}
|
})
|
</script>
|
|
<style scoped>
|
:deep(.el-input__inner) {
|
text-align: center;
|
}
|
|
:deep(.el-table .el-table__cell) {
|
padding: 8px 0;
|
}
|
</style>
|
