| | |
|---|
| | | <template> |
|---|
| | | <div class="production-container"> |
|---|
| | | <div class="app-container"> |
|---|
| | | <!-- 搜索表单 --> |
|---|
| | | <el-form :inline="true" :model="queryParams" class="search-form"> |
|---|
| | | <el-form-item label="搜索"> |
|---|
| | |
|---|
| | | @edit="row => openDialog('edit', row)" |
|---|
| | | :show-selection="true" |
|---|
| | | :border="true" |
|---|
| | | :maxHeight="480" |
|---|
| | | style="width: 100%;height: calc(100vh - 26em)" |
|---|
| | | > |
|---|
| | | <template #coal="{ row }"> |
|---|
| | | <div class="coal-tags"> |
|---|
| | |
|---|
| | | import {useTableData} from "./components/useTableData.js"; |
|---|
| | | import {useDialog} from "./components/useDialog.js"; |
|---|
| | | import {useCoalData} from "./components/useCoalData.js"; |
|---|
| | | import {getCoalInfoList} from "@/api/production"; |
|---|
| | | |
|---|
| | | // 表格列配置 |
|---|
| | | const columns = [ |
|---|
| | | {prop: "coal", label: "煤种", minWidth: 150, slot: 'coal'}, |
|---|
| | | {prop: "coalId", label: "煤种", minWidth: 150, |
|---|
| | | formatter: (row) => { |
|---|
| | | return coalInfoList.value.find(item => item.id == row.coalId)?.coal || '--'; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | {prop: "productionQuantity", label: "生产数量", minWidth: 120}, |
|---|
| | | {prop: "laborCost", label: "人工成本", minWidth: 150}, |
|---|
| | | {prop: "energyConsumptionCost", label: "能耗成本", minWidth: 120}, |
|---|
| | |
|---|
| | | ElMessage.success("操作成功"); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | const coalInfoList = ref([]); |
|---|
| | | // 组件挂载时加载数据 |
|---|
| | | onMounted(async () => { |
|---|
| | | await getCoalData(); // 预加载煤种数据 |
|---|
| | | getList(); |
|---|
| | | let res = await getCoalInfoList() |
|---|
| | | coalInfoList.value = res.data; |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | |
|---|
