<template>
|
<div class="production-container">
|
<el-form :inline="true" :model="searchForm" class="search-form" style="width: 100%">
|
<el-form-item label="搜索">
|
<el-input v-model="searchForm.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>
|
<el-button type="success" :icon="Plus" @click="handleAddBatch">新增加工</el-button>
|
<el-button type="danger" :icon="Delete">删除</el-button>
|
<el-button type="info" :icon="Download">导出</el-button>
|
<ETable :loading="loading" :table-data="tableData" :columns="columns" @selection-change="handleSelectionChange"
|
@edit="handleEdit" @view-detail="handleViewDetail" :show-selection="true" :border="true" :maxHeight="480" />
|
<Pagination v-model:currentPage="pagination.currentPage" v-model:pageSize="pagination.pageSize"
|
:total="pagination.total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
|
</el-card>
|
<ProductionDialog v-model:visible="dialogVisible" ref="childRef" :type="dialogType"
|
@success="handleDialogSuccess" />
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from "vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import { Plus, Delete, Download, List } 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";
|
const childRef = ref(null);
|
const columns = [
|
{ prop: "category", label: "煤种", width: 150 },
|
{ prop: "unit", label: "单位", width: 120 },
|
{ prop: "productionVolume", label: "生产数量", width: 150 },
|
{ prop: "laborCost", label: "人工成本", width: 150 },
|
{ prop: "materialCost", label: "原料成本", width: 120 },
|
{ prop: "equipmentCost", label: "设备费用", width: 143 },
|
{ prop: "totalCost", label: "总成本", width: 150 },
|
{ prop: "totalPrice", label: "总售价", width: 150 },
|
{ prop: "profit", label: "利润", width: 100 },
|
{ prop: "reviewer", label: "复记人", width: 120 },
|
{ prop: "date", label: "日期", width: 150 },
|
];
|
|
// 搜索表单数据
|
const searchForm = reactive({
|
searchAll:""
|
});
|
|
// 表格数据
|
const tableData = ref([]);
|
const loading = ref(false);
|
|
// 分页数据
|
const pagination = reactive({
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
});
|
|
// 选中的行数据
|
const selectedRows = ref([]);
|
|
// 弹窗相关
|
const dialogVisible = ref(false);
|
const dialogType = ref("add");
|
const currentRow = ref(null);
|
|
// 生产明细对话框控制
|
const detailDialogVisible = ref(false);
|
const currentDetailRow = ref(null);
|
|
// 获取表格数据
|
const getList = async () => {
|
loading.value = true;
|
try {
|
const params = {
|
...searchForm,
|
pageNum: pagination.currentPage,
|
pageSize: pagination.pageSize,
|
};
|
// const res = await getProductionList(params)
|
// 假数据
|
const res = {
|
data: {
|
list: [
|
{
|
sequence: 1,
|
category: "无烟煤",
|
unit: "吨",
|
productionVolume: 100,
|
laborCost: "300",
|
materialCost: "200",
|
equipmentCost: "100",
|
totalCost: "600",
|
totalPrice: "800",
|
profit: "200",
|
reviewer: "张三",
|
date: "2023-10-01",
|
},
|
{
|
sequence: 12,
|
category: "无烟煤",
|
unit: "吨",
|
productionVolume: 100,
|
laborCost: "3100",
|
materialCost: "2020",
|
equipmentCost: "1300",
|
totalCost: "6030",
|
totalPrice: "8300",
|
profit: "2300",
|
reviewer: "张三",
|
date: "2025-10-02",
|
},
|
],
|
total: 2,
|
},
|
};
|
|
tableData.value = res.data.list;
|
pagination.total = res.data.total;
|
} catch (error) {
|
ElMessage.error("获取数据失败");
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
// 处理表格选择变化
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection;
|
};
|
|
// 搜索方法
|
const handleSearch = () => {
|
pagination.currentPage = 1;
|
getList();
|
};
|
|
// 重置搜索
|
const handleReset = () => {
|
searchForm.keyword = "";
|
searchForm.addUser = "";
|
handleSearch();
|
};
|
|
// 新增加工
|
const handleAddBatch = () => {
|
dialogType.value = "add";
|
dialogVisible.value = true;
|
childRef.value.Initialization();
|
};
|
|
// 编辑
|
const handleEdit = (row) => {
|
currentRow.value = row;
|
dialogType.value = "edit";
|
dialogVisible.value = true;
|
};
|
|
// 打开生产明细对话框
|
const handleViewDetail = (row) => {
|
currentDetailRow.value = row;
|
detailDialogVisible.value = true;
|
};
|
|
// 处理弹窗提交
|
const handleDialogSuccess = async (formData) => {
|
try {
|
if (dialogType.value === "add") {
|
await addProduction(formData);
|
ElMessage.success("新增成功");
|
} else {
|
await updateProduction({
|
...formData,
|
id: currentRow.value.id,
|
});
|
ElMessage.success("更新成功");
|
}
|
getList();
|
} catch (error) {
|
ElMessage.error(dialogType.value === "add" ? "新增失败" : "更新失败");
|
}
|
};
|
|
// 处理生产明细弹窗提交
|
const handleDetailDialogSuccess = async (formData) => {
|
try {
|
ElMessage.success("保存成功");
|
getList();
|
} catch (error) {
|
ElMessage.error("保存失败");
|
}
|
};
|
|
// 删除
|
const handleDelete = (row) => {
|
ElMessageBox.confirm("确认删除该记录吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(async () => {
|
try {
|
await deleteProduction(row.id);
|
ElMessage.success("删除成功");
|
getList();
|
} catch (error) {
|
console.error("删除失败:", error);
|
ElMessage.error("删除失败");
|
}
|
})
|
.catch(() => {
|
ElMessage.info("已取消删除");
|
});
|
};
|
|
// 导出
|
const handleExport = async (row) => {
|
try {
|
const res = await exportProduction({ id: row.id });
|
const blob = new Blob([res], { type: "application/vnd.ms-excel" });
|
const fileName = `生产加工记录_${new Date().getTime()}.xlsx`;
|
if ("download" in document.createElement("a")) {
|
const elink = document.createElement("a");
|
elink.download = fileName;
|
elink.style.display = "none";
|
elink.href = URL.createObjectURL(blob);
|
document.body.appendChild(elink);
|
elink.click();
|
URL.revokeObjectURL(elink.href);
|
document.body.removeChild(elink);
|
} else {
|
navigator.msSaveBlob(blob, fileName);
|
}
|
} catch (error) {
|
ElMessage.error("导出失败");
|
}
|
};
|
|
// 处理每页显示数量变化
|
const handleSizeChange = (val) => {
|
pagination.pageSize = val;
|
getList();
|
};
|
|
// 处理页码变化
|
const handleCurrentChange = (val) => {
|
pagination.currentPage = val;
|
getList();
|
};
|
|
// 组件挂载时加载数据
|
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;
|
}
|
}
|
</style>
|
