<template>
|
<div class="app-container">
|
<!-- 搜索表单 -->
|
<el-form :inline="true" :model="queryParams" class="search-form">
|
<el-form-item label="搜索">
|
<el-input
|
v-model="queryParams.searchAll"
|
placeholder="请输入关键词"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!-- 主要内容区域 -->
|
<el-card>
|
<!-- 操作按钮 -->
|
<div class="toolbar">
|
<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>
|
</div>
|
<!-- 数据表格 -->
|
<ETable
|
:showOverflowTooltip="false"
|
:loading="loading"
|
:table-data="tableData"
|
:columns="columns"
|
:current-page="queryParams.current"
|
:page-size="queryParams.size"
|
@selection-change="handleSelectionChange"
|
@edit="(row) => openDialog('edit', row)"
|
:show-selection="true"
|
:border="true"
|
@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">
|
<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>
|
<!-- 分页组件 -->
|
<Pagination
|
:layout="'total, prev, pager, next, jumper'"
|
:total="total"
|
v-model:page="queryParams.current"
|
:limit="queryParams.size"
|
@pagination="handlePageChange"
|
/>
|
</el-card>
|
|
<!-- 生产对话框 -->
|
<!-- handleProductionAndProcessing -->
|
<ProductionDialog
|
v-model:visible="dialogVisible"
|
ref="dialogRef"
|
:type="dialogType"
|
@update:productionAndProcessing="handleProductionAndProcessing"
|
@success="handleDialogSuccess"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
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 ETable from "@/components/Table/ETable.vue";
|
import Pagination from "@/components/Pagination/index.vue";
|
import { getProductionMasterList, delPM } from "@/api/production";
|
import { parseCoalArray } from "@/utils/production";
|
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: "coalId", label: "煤种", minWidth: 150, slot: true },
|
{ prop: "productionQuantity", label: "生产数量", minWidth: 120 },
|
{ prop: "laborCost", label: "人工成本", minWidth: 150 },
|
{ prop: "energyConsumptionCost", label: "能耗成本", minWidth: 120 },
|
{ prop: "equipmentDepreciation", label: "设备折旧", minWidth: 143 },
|
{ prop: "totalCost", label: "总成本", minWidth: 150 },
|
];
|
|
// 使用表格数据组合式函数
|
const {
|
tableData,
|
loading,
|
total,
|
selectedRows,
|
queryParams,
|
getList,
|
handleSearch,
|
handleReset,
|
handlePageChange,
|
handleSelectionChange,
|
deleteSelected,
|
} = useTableData(getProductionMasterList, { pageSize: 10 });
|
|
// 使用对话框组合式函数
|
const {
|
dialogVisible,
|
dialogType,
|
dialogRef,
|
openDialog,
|
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);
|
if (index !== -1) {
|
tableData.value[index] = { ...tableData.value[index], ...row };
|
}
|
};
|
|
// 对话框成功回调
|
const handleDialogSuccess = () => {
|
onDialogSuccess(() => {
|
getList();
|
ElMessage.success("操作成功");
|
});
|
};
|
|
// 组件挂载时加载数据
|
onMounted(async () => {
|
try {
|
// 并行加载煤种数据和表格数据
|
await Promise.all([
|
getCoalData(), // 预加载煤种数据
|
(async () => {
|
const res = await getCoalInfoList();
|
if (res.code === 200) {
|
coalInfoList.value = res.data;
|
}
|
})(),
|
]);
|
|
// 加载表格数据
|
getList();
|
} catch (error) {
|
ElMessage.error("数据加载失败，请刷新页面重试");
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.production-container {
|
padding: 20px;
|
|
.el-card:nth-child(1) {
|
margin-bottom: 20px;
|
}
|
}
|
|
.search-bar {
|
margin-bottom: 20px;
|
display: flex;
|
gap: 10px;
|
|
.el-input {
|
width: 20%;
|
}
|
}
|
|
.search-form {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
margin-bottom: 20px;
|
|
.el-form-item {
|
margin-right: 10px;
|
}
|
|
.el-button {
|
margin-left: 10px;
|
}
|
}
|
|
.coal-tags {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 4px;
|
align-items: center;
|
|
.coal-tag {
|
margin-right: 4px;
|
margin-bottom: 4px;
|
|
&:last-child {
|
margin-right: 0;
|
}
|
}
|
|
.no-data {
|
color: #999;
|
font-style: italic;
|
}
|
}
|
</style>
|
