<template>
|
<div class="production-container">
|
<div class="search-bar">
|
<el-input v-model="searchForm.keyword" placeholder="请输入关键词" clearable />
|
<el-input v-model="searchForm.addUser" placeholder="请输入人" clearable />
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
</div>
|
|
<div class="operation-bar">
|
<el-button type="primary" @click="handleAdd">新增配项</el-button>
|
<el-button type="success" @click="handleAddBatch">新增加工</el-button>
|
<el-button type="warning">修改</el-button>
|
<el-button type="danger">删除</el-button>
|
<el-button type="info">导出</el-button>
|
</div>
|
|
<el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55" />
|
<el-table-column prop="sequence" label="序号" width="80" />
|
<el-table-column prop="category" label="煤种" width="120" />
|
<el-table-column prop="unit" label="单位" width="100" />
|
<el-table-column prop="productionVolume" label="生产数量" width="120" />
|
<el-table-column prop="laborCost" label="人工成本" width="120" />
|
<el-table-column prop="materialCost" label="原料成本" width="120" />
|
<el-table-column prop="equipmentCost" label="设备费用" width="120" />
|
<el-table-column prop="totalCost" label="总成本" width="120" />
|
<el-table-column prop="totalPrice" label="总成本" width="120" />
|
<el-table-column prop="profit" label="利润" width="100" />
|
<el-table-column prop="reviewer" label="复记人" width="120" />
|
<el-table-column prop="date" label="日期" width="120" />
|
<el-table-column label="操作" fixed="right" width="220">
|
<template #default="scope">
|
<el-button type="primary" link @click="handleEdit(scope.row)">登记</el-button>
|
<el-button type="success" link @click="handleEdit(scope.row)">编辑</el-button>
|
<el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
|
<el-button type="warning" link @click="handleExport(scope.row)">导出</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="pagination">
|
<el-pagination
|
v-model:current-page="pagination.currentPage"
|
v-model:page-size="pagination.pageSize"
|
:page-sizes="[10, 20, 30, 50]"
|
:total="pagination.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
|
<!-- 弹窗组件 -->
|
<ProductionDialog-dialog
|
v-model:visible="dialogVisible"
|
:type="dialogType"
|
:row-data="currentRow"
|
@success="handleDialogSuccess"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { getProductionList, addProduction, updateProduction, deleteProduction, exportProduction } from '@/api/production'
|
import ProductionDialog from './components/ProductionDialog.vue'
|
|
// 搜索表单数据
|
const searchForm = reactive({
|
keyword: '',
|
addUser: ''
|
})
|
|
// 表格数据
|
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 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: '生产数量',
|
laborCost: '人工成本',
|
materialCost: '原料成本',
|
equipmentCost: '设备费用',
|
totalCost: '总成本',
|
totalPrice: '总成本',
|
profit: '利润',
|
reviewer: '复记人',
|
date: '日期'
|
}],
|
total: 0
|
}
|
}
|
|
|
tableData.value = res.data.list
|
pagination.total = res.data.total
|
} catch (error) {
|
console.error('获取数据失败:', 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 handleAdd = () => {
|
dialogType.value = 'add'
|
dialogVisible.value = true
|
}
|
|
// 新增加工
|
const handleAddBatch = () => {
|
dialogType.value = 'add'
|
dialogVisible.value = true
|
}
|
|
// 编辑
|
const handleEdit = (row) => {
|
currentRow.value = row
|
dialogType.value = 'edit'
|
dialogVisible.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) {
|
console.error(dialogType.value === 'add' ? '新增失败:' : '更新失败:', error)
|
ElMessage.error(dialogType.value === 'add' ? '新增失败' : '更新失败')
|
}
|
}
|
|
// 删除
|
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) {
|
console.error('导出失败:', error)
|
ElMessage.error('导出失败')
|
}
|
}
|
|
// 处理每页显示数量变化
|
const handleSizeChange = (val) => {
|
pagination.pageSize = val
|
getList()
|
}
|
|
// 处理页码变化
|
const handleCurrentChange = (val) => {
|
pagination.currentPage = val
|
getList()
|
}
|
|
// 组件挂载时加载数据
|
onMounted(() => {
|
getList()
|
})
|
</script>
|
|
<style scoped>
|
.production-container {
|
padding: 20px;
|
}
|
|
.search-bar {
|
margin-bottom: 20px;
|
display: flex;
|
gap: 10px;
|
}
|
|
.operation-bar {
|
margin-bottom: 20px;
|
display: flex;
|
gap: 10px;
|
}
|
|
.pagination {
|
margin-top: 20px;
|
display: flex;
|
justify-content: flex-end;
|
}
|
</style>
|
