<template>
|
<div class="production-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"
|
:maxHeight="480"
|
> <template #coal="{ 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>
|
</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 } 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";
|
|
// 表格列配置
|
const columns = [
|
{ prop: "coal", label: "煤种", minWidth: 150, slot: 'coal' },
|
{ 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 },
|
{ prop: "producer", label: "生产人", minWidth: 150 },
|
];
|
|
// 使用表格数据组合式函数
|
const {
|
tableData,
|
loading,
|
total,
|
selectedRows,
|
queryParams,
|
getList,
|
handleSearch,
|
handleReset,
|
handlePageChange,
|
handleSelectionChange,
|
deleteSelected
|
} = useTableData(getProductionMasterList, { pageSize: 10 });
|
|
// 使用对话框组合式函数
|
const {
|
dialogVisible,
|
dialogType,
|
dialogRef,
|
openDialog,
|
handleDialogSuccess: onDialogSuccess
|
} = useDialog();
|
|
// 使用煤种数据组合式函数
|
const { getCoalNameById, getCoalData } = useCoalData();
|
|
// 处理生产数据更新
|
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 () => {
|
await getCoalData(); // 预加载煤种数据
|
getList();
|
});
|
</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: space-between;
|
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;
|
|
.el-tag {
|
margin-right: 4px;
|
margin-bottom: 4px;
|
|
&:last-child {
|
margin-right: 0;
|
}
|
}
|
}
|
</style>
|
