<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">
|
删除
|
</el-button>
|
</div>
|
|
<!-- 数据表格 -->
|
<ETable
|
:loading="loading"
|
:table-data="tableData"
|
:columns="columns"
|
@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">
|
{{ coal }}
|
</el-tag>
|
<span v-if="!row.coal">--</span>
|
</div>
|
</template>
|
</ETable>
|
|
<!-- 分页组件 -->
|
<Pagination
|
:total="total"
|
:page="queryParams.current"
|
:limit="queryParams.size"
|
@pagination="handlePageChange"
|
/>
|
</el-card>
|
|
<!-- 生产对话框 -->
|
<ProductionDialog
|
v-model:visible="dialogVisible"
|
ref="dialogRef"
|
:type="dialogType"
|
@success="handleDialogSuccess"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from "vue";
|
import { ElMessage, ElMessageBox } 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 } from "@/api/production";
|
|
// 表格列配置
|
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 = ref([]);
|
const loading = ref(false);
|
const total = ref(0);
|
const selectedRows = ref([]);
|
const dialogVisible = ref(false);
|
const dialogType = ref("add");
|
const dialogRef = ref(null);
|
|
// 查询参数
|
const queryParams = reactive({
|
searchAll: "",
|
current: 1,
|
size: 10,
|
});
|
|
// 获取表格数据
|
// 获取表格数据
|
const getList = async () => {
|
loading.value = true;
|
try {
|
// 构建正确的分页参数
|
const params = {
|
searchAll: queryParams.searchAll,
|
// 尝试多种常见的分页参数格式
|
current: queryParams.current,
|
size: queryParams.size,
|
page: queryParams.current,
|
pageSize: queryParams.size,
|
pageNum: queryParams.current,
|
limit: queryParams.size,
|
offset: (queryParams.current - 1) * queryParams.size
|
};
|
|
console.log('发送分页参数:', params);
|
console.log(`第${queryParams.current}页应该显示第${(queryParams.current - 1) * queryParams.size + 1}-${queryParams.current * queryParams.size}条数据`);
|
|
const res = await getProductionMasterList(params);
|
tableData.value = res.data.records || [];
|
total.value = res.data.total || 0;
|
|
console.log('接收到的数据:', {
|
当前页: queryParams.current,
|
返回条数: tableData.value.length,
|
总条数: total.value
|
});
|
} catch (error) {
|
ElMessage.error("获取数据失败");
|
console.error('API错误:', error);
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
// 搜索和重置
|
const handleSearch = () => {
|
queryParams.current = 1;
|
getList();
|
};
|
|
const handleReset = () => {
|
queryParams.searchAll = "";
|
handleSearch();
|
};
|
|
// 分页处理
|
const handlePageChange = ({ page }) => {
|
queryParams.current = page;
|
getList();
|
};
|
|
// 表格选择处理
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection;
|
};
|
|
// 打开对话框 - 统一处理新增和编辑
|
const openDialog = (type, row = null) => {
|
dialogType.value = type;
|
dialogVisible.value = true;
|
|
if (type === 'add') {
|
dialogRef.value?.Initialization();
|
} else if (type === 'edit' && row) {
|
dialogRef.value?.editInitialization({ ...row });
|
}
|
};
|
|
// 对话框成功回调
|
const handleDialogSuccess = () => {
|
getList();
|
ElMessage.success("操作成功");
|
};
|
|
// 解析煤种数组 - 简化逻辑
|
const parseCoalArray = (coalString) => {
|
if (!coalString) return [];
|
|
if (Array.isArray(coalString)) return coalString;
|
|
return String(coalString)
|
.replace(/^\[|\]$/g, '')
|
.split(',')
|
.map(item => item.trim())
|
.filter(Boolean);
|
};
|
|
// 组件挂载时加载数据
|
onMounted(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>
|
