| | |
| | | <template> |
| | | <div class="production-container"> |
| | | <div> |
| | | <!-- 搜索表单 --> |
| | | <el-form :inline="true" :model="queryParams" class="search-form"> |
| | | <el-form-item label="搜索"> |
| | |
| | | <el-button type="success" :icon="Plus" @click="openDialog('add')"> |
| | | 新增加工 |
| | | </el-button> |
| | | <el-button type="danger" :icon="Delete" :disabled="!selectedRows.length" @click="() => deleteSelected(delPM)"> |
| | | <el-button |
| | | type="danger" |
| | | :icon="Delete" |
| | | :disabled="!selectedRows.length" |
| | | @click="() => deleteSelected(delPM)" |
| | | > |
| | | 删除 |
| | | </el-button> |
| | | </div> <!-- 数据表格 --> |
| | | </div> |
| | | <!-- 数据表格 --> |
| | | <ETable |
| | | :showOverflowTooltip="false" |
| | | :loading="loading" |
| | |
| | | :current-page="queryParams.current" |
| | | :page-size="queryParams.size" |
| | | @selection-change="handleSelectionChange" |
| | | @edit="row => openDialog('edit', row)" |
| | | @edit="(row) => openDialog('edit', row)" |
| | | :show-selection="true" |
| | | :border="true" |
| | | :maxHeight="480" |
| | | > <template #coal="{ row }"> |
| | | @viewRow="(row) => (viewRow('viewRow', row))" |
| | | :operations="['edit', 'viewRow']" |
| | | :operationsWidth="200" |
| | | :show-overflow-tooltip="false" |
| | | style="width: 100%; height: calc(100vh - 26em)" |
| | | > |
| | | <template #coalId="{ row }"> |
| | | <div class="coal-tags"> |
| | | <el-tag v-for="coal in parseCoalArray(row.coal)" :key="coal" size="small"> |
| | | {{ getCoalNameById(coal) }} |
| | | </el-tag> |
| | | <span v-if="!row.coal">--</span> |
| | | <template v-if="row.coalId"> |
| | | <el-tag |
| | | v-for="coal in parseCoalArray(row.coalId)" |
| | | :key="coal" |
| | | size="small" |
| | | type="primary" |
| | | class="coal-tag" |
| | | > |
| | | {{ getDisplayCoalName(coal) }} |
| | | </el-tag> |
| | | </template> |
| | | <span v-else class="no-data">--</span> |
| | | </div> |
| | | </template> |
| | | </ETable> <!-- 分页组件 --> |
| | | </ETable> |
| | | <!-- 分页组件 --> |
| | | <Pagination |
| | | :layout="'total, prev, pager, next, jumper'" |
| | | :total="total" |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { onMounted } from "vue"; |
| | | import { onMounted, ref } from "vue"; |
| | | import { ElMessage } from "element-plus"; |
| | | import { Plus, Delete } from "@element-plus/icons-vue"; |
| | | import ProductionDialog from "./components/ProductionDialog.vue"; |
| | |
| | | import { useTableData } from "./components/useTableData.js"; |
| | | import { useDialog } from "./components/useDialog.js"; |
| | | import { useCoalData } from "./components/useCoalData.js"; |
| | | import { getCoalInfoList } from "@/api/production"; |
| | | |
| | | // 煤种信息列表 |
| | | const coalInfoList = ref([]); |
| | | |
| | | // 表格列配置 |
| | | const columns = [ |
| | | { prop: "coal", label: "煤种", minWidth: 150, slot: 'coal' }, |
| | | { prop: "coalId", label: "煤种", minWidth: 150, slot: true }, |
| | | { prop: "productionQuantity", label: "生产数量", minWidth: 120 }, |
| | | { prop: "laborCost", label: "人工成本", minWidth: 150 }, |
| | | { prop: "energyConsumptionCost", label: "能耗成本", minWidth: 120 }, |
| | |
| | | handleReset, |
| | | handlePageChange, |
| | | handleSelectionChange, |
| | | deleteSelected |
| | | deleteSelected, |
| | | } = useTableData(getProductionMasterList, { pageSize: 10 }); |
| | | |
| | | // 使用对话框组合式函数 |
| | |
| | | dialogType, |
| | | dialogRef, |
| | | openDialog, |
| | | handleDialogSuccess: onDialogSuccess |
| | | viewRow, |
| | | handleDialogSuccess: onDialogSuccess, |
| | | } = useDialog(); |
| | | |
| | | // 使用煤种数据组合式函数 |
| | | const { getCoalNameById, getCoalData } = useCoalData(); |
| | | |
| | | // 获取煤种显示名称(带备用逻辑) |
| | | const getDisplayCoalName = (coalId) => { |
| | | // 优先使用 useCoalData 的方法 |
| | | let name = getCoalNameById(coalId); |
| | | |
| | | // 如果没有找到,尝试从 coalInfoList 中查找 |
| | | if (name === coalId && coalInfoList.value.length > 0) { |
| | | const found = coalInfoList.value.find((item) => item.id == coalId); |
| | | name = found ? found.coal : coalId; |
| | | } |
| | | |
| | | return name || coalId; |
| | | }; |
| | | |
| | | // 处理生产数据更新 |
| | | const handleProductionAndProcessing = (row, rows) => { |
| | | const index = tableData.value.findIndex(item => item.id === rows.id); |
| | | const index = tableData.value.findIndex((item) => item.id === rows.id); |
| | | if (index !== -1) { |
| | | tableData.value[index] = { ...tableData.value[index], ...row }; |
| | | } |
| | |
| | | ElMessage.success("操作成功"); |
| | | }); |
| | | }; |
| | | |
| | | // 组件挂载时加载数据 |
| | | onMounted(async () => { |
| | | await getCoalData(); // 预加载煤种数据 |
| | | getList(); |
| | | try { |
| | | // 并行加载煤种数据和表格数据 |
| | | await Promise.all([ |
| | | getCoalData(), // 预加载煤种数据 |
| | | (async () => { |
| | | const res = await getCoalInfoList(); |
| | | if (res.code === 200) { |
| | | coalInfoList.value = res.data; |
| | | } |
| | | })(), |
| | | ]); |
| | | |
| | | // 加载表格数据 |
| | | getList(); |
| | | } catch (error) { |
| | | ElMessage.error("数据加载失败,请刷新页面重试"); |
| | | } |
| | | }); |
| | | </script> |
| | | |
| | |
| | | width: 20%; |
| | | } |
| | | } |
| | | |
| | | .search-form { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | justify-content: flex-start; |
| | | align-items: center; |
| | | margin-bottom: 20px; |
| | | |
| | |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | |
| | | .coal-tags { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 4px; |
| | | |
| | | .el-tag { |
| | | align-items: center; |
| | | |
| | | .coal-tag { |
| | | margin-right: 4px; |
| | | margin-bottom: 4px; |
| | | |
| | | |
| | | &:last-child { |
| | | margin-right: 0; |
| | | } |
| | | } |
| | | |
| | | .no-data { |
| | | color: #999; |
| | | font-style: italic; |
| | | } |
| | | } |
| | | </style> |