| | |
| | | <template> |
| | | <el-table :data="tableData" :border="border" style="width: 100%"> |
| | | <el-table :data="tableData" :border="border" style="width: 100%"> |
| | | <el-table-column label="煤种" min-width="120"> |
| | | <template #default="{ row, $index }"> |
| | | <el-select |
| | | clearable |
| | | :model-value="getCoalNameById(row.coalId) || row.coalId" |
| | | placeholder="请选择煤种" |
| | | @change="(value) => handleCoalSelectChange(row, value)" |
| | | filterable |
| | | :key="`coalId-select-${$index}-${weekList.length}`" |
| | | <el-select |
| | | clearable |
| | | :model-value="getCoalNameById(row.coalId) || row.coalId" |
| | | placeholder="请选择煤种" |
| | | @change="(value) => handleCoalSelectChange(row, value)" |
| | | filterable |
| | | :key="`coalId-select-${$index}-${weekList.length}`" |
| | | > |
| | | <el-option |
| | | v-for="(item, index) of weekList" |
| | | :key="`option-${index}-${item.key}`" |
| | | :label="item.value" |
| | | :value="item.value" |
| | | v-for="(item, index) of weekList" |
| | | :key="`option-${index}-${item.key}`" |
| | | :label="item.value" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </template> |
| | |
| | | <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)" |
| | | 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)" |
| | | v-model="row.laborCost" |
| | | placeholder="请输入人工成本" |
| | | type="number" |
| | | @input="handleInput('laborCost', $index, $event)" |
| | | > |
| | | <template #suffix> |
| | | <i style="font-style: normal">元</i> |
| | |
| | | <el-table-column label="能耗成本" min-width="120"> |
| | | <template #default="{ row, $index }"> |
| | | <el-input |
| | | v-model="row.energyConsumptionCost" |
| | | placeholder="请输入能耗成本" |
| | | type="number" |
| | | @input="handleInput('energyConsumptionCost', $index, $event)" |
| | | v-model="row.energyConsumptionCost" |
| | | placeholder="请输入能耗成本" |
| | | type="number" |
| | | @input="handleInput('energyConsumptionCost', $index, $event)" |
| | | > |
| | | <template #suffix> |
| | | <i style="font-style: normal">元</i> |
| | |
| | | <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)" |
| | | v-model="row.equipmentDepreciation" |
| | | placeholder="请输入设备折旧" |
| | | type="number" |
| | | @input="handleInput('equipmentDepreciation', $index, $event)" |
| | | > |
| | | <template #suffix> |
| | | <i style="font-style: normal">元</i> |
| | |
| | | <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)" |
| | | v-model="row.purchasePrice" |
| | | placeholder="请输入采购单价" |
| | | type="number" |
| | | @input="handleInput('purchasePrice', $index, $event)" |
| | | > |
| | | <template #suffix> |
| | | <i style="font-style: normal">元</i> |
| | |
| | | <el-table-column label="总成本" min-width="120"> |
| | | <template #default="{ row, $index }"> |
| | | <el-input |
| | | disabled |
| | | v-model="row.totalCost" |
| | | placeholder="总成本" |
| | | type="number" |
| | | :readonly="autoCalculate" |
| | | @input="handleInput('totalCost', $index, $event)" |
| | | disabled |
| | | v-model="row.totalCost" |
| | | placeholder="总成本" |
| | | type="number" |
| | | :readonly="autoCalculate" |
| | | @input="handleInput('totalCost', $index, $event)" |
| | | > |
| | | <template #suffix> |
| | | <i style="font-style: normal">元</i> |
| | |
| | | <el-table-column label="生产人" min-width="120"> |
| | | <template #default="{ row, $index }"> |
| | | <el-select |
| | | clearable |
| | | :model-value="getUserNameById(row.producer) || row.producer" |
| | | placeholder="请选择生产人" |
| | | @change="(value) => handleUserSelectChange(row, value)" |
| | | filterable |
| | | :key="`producer-select-${$index}-${userList.length}`" |
| | | clearable |
| | | :model-value="getUserNameById(row.producer) || row.producer" |
| | | placeholder="请选择生产人" |
| | | @change="(value) => handleUserSelectChange(row, value)" |
| | | filterable |
| | | :key="`producer-select-${$index}-${userList.length}`" |
| | | > |
| | | <el-option |
| | | v-for="(item, index) of userList" |
| | | :key="`option-${index}-${item.key}`" |
| | | :label="item.value" |
| | | :value="item.value" |
| | | v-for="(item, index) of userList" |
| | | :key="`option-${index}-${item.key}`" |
| | | :label="item.value" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | v-if="showOperations" |
| | | label="操作" |
| | | width="120" |
| | | fixed="right" |
| | | v-if="showOperations" |
| | | label="操作" |
| | | width="120" |
| | | fixed="right" |
| | | > |
| | | <template #default="{ $index }"> |
| | | <el-button |
| | | type="danger" |
| | | size="small" |
| | | @click="handleDelete($index)" |
| | | :icon="Delete" |
| | | type="danger" |
| | | size="small" |
| | | @click="handleDelete($index)" |
| | | :icon="Delete" |
| | | > |
| | | 删除 |
| | | </el-button> |
| | |
| | | </template> |
| | | |
| | | <script setup name="ProductionDetailsTable"> |
| | | import { ref, computed, watch, onMounted, nextTick } from "vue"; |
| | | import { Delete } from "@element-plus/icons-vue"; |
| | | import { getCoalFieldList } from "@/api/basicInformation/coalQualityMaintenance"; |
| | | import { getCoalInfoList } from "@/api/production"; |
| | | import { userListAll } from "@/api/publicApi"; |
| | | import {ref, computed, watch, onMounted, nextTick} from "vue"; |
| | | import {Delete} from "@element-plus/icons-vue"; |
| | | import {getCoalFieldList} from "@/api/basicInformation/coalQualityMaintenance"; |
| | | import {getCoalInfoList} from "@/api/production"; |
| | | import {userListAll} from "@/api/publicApi"; |
| | | |
| | | const props = defineProps({ |
| | | modelValue: { |
| | | type: Array, |
| | |
| | | |
| | | // 如果开启自动计算总成本 |
| | | if ( |
| | | props.autoCalculate && |
| | | [ |
| | | "laborCost", |
| | | "energyCost", |
| | | "equipmentDepreciation", |
| | | "purchasePrice", |
| | | ].includes(field) |
| | | props.autoCalculate && |
| | | [ |
| | | "laborCost", |
| | | "energyCost", |
| | | "equipmentDepreciation", |
| | | "purchasePrice", |
| | | ].includes(field) |
| | | ) { |
| | | calculateTotalCost(newData[index]); |
| | | } |
| | | |
| | | tableData.value = newData; |
| | | emit("input-change", { field, index, value, row: newData[index] }); |
| | | emit("input-change", {field, index, value, row: newData[index]}); |
| | | }; |
| | | |
| | | // 计算总成本 |
| | |
| | | const purchasePrice = parseFloat(row.purchasePrice) || 0; |
| | | |
| | | row.totalCost = ( |
| | | laborCost + |
| | | energyCost + |
| | | equipmentDepreciation + |
| | | purchasePrice |
| | | laborCost + |
| | | energyCost + |
| | | equipmentDepreciation + |
| | | purchasePrice |
| | | ).toFixed(2); |
| | | }; |
| | | |
| | |
| | | if (newValue && weekList.value.length > 0) { |
| | | // 当数据加载完成且weekList已获取时,确保显示正确 |
| | | } |
| | | }, { deep: true }); |
| | | }, {deep: true}); |
| | | |
| | | // 监听weekList变化,当下拉数据加载完成后处理显示 |
| | | watch(weekList, (newList) => { |
| | |
| | | tableData.value = tempData; |
| | | }); |
| | | } |
| | | }, { deep: true }); |
| | | }, {deep: true}); |
| | | |
| | | onMounted(async()=>{ |
| | | onMounted(async () => { |
| | | let res = await getCoalInfoList() |
| | | console.log(res); |
| | | res.data.forEach(item => { |
| | | let obj = {}; |
| | | obj.value = item.coal; |
| | | obj.key = item.id; |
| | | weekList.value.push(obj); |
| | | weekList.value.push(obj); |
| | | }); |
| | | let ress = await userListAll(); |
| | | ress.data.forEach(item => { |
| | | let obj = {}; |
| | | obj.value = item.nickName; |
| | | obj.key = item.userId; |
| | | userList.value.push(obj); |
| | | userList.value.push(obj); |
| | | }); |
| | | // 通知父组件weekList已加载完成 |
| | | nextTick(() => { |
| | |
| | | } |
| | | }; |
| | | const userList = ref([]); |
| | | const getUserList = (async()=>{ |
| | | const getUserList = (async () => { |
| | | let res = await userListAll(); |
| | | if (res.code === 200) { |
| | | userList.value = res.data.map((item) => ({ |
| | |
| | | if (newValue && userList.value.length > 0) { |
| | | // 当数据加载完成且weekList已获取时,确保显示正确 |
| | | } |
| | | }, { deep: true }); |
| | | }, {deep: true}); |
| | | |
| | | // 监听userList变化,当下拉数据加载完成后处理显示 |
| | | watch(userList, (newList) => { |
| | |
| | | tableData.value = tempData; |
| | | }); |
| | | } |
| | | }, { deep: true }); |
| | | }, {deep: true}); |
| | | |
| | | const getUserNameById = (id) => { |
| | | const producer = userList.value.find(item => item.key == id); |