<template>
|
<div class="app-container">
|
<div class="search_form">
|
<el-form :model="searchForm"
|
:inline="true">
|
<el-form-item label="生产订单号:">
|
<el-input v-model="searchForm.npsNo"
|
placeholder="请输入"
|
clearable
|
style="width: 160px;"
|
@keyup.enter="handleQuery" />
|
</el-form-item>
|
<el-form-item label="班组:">
|
<el-select v-model="searchForm.schedule"
|
placeholder="请选择"
|
clearable
|
style="width: 160px;"
|
@keyup.enter="handleQuery">
|
<el-option label="白班"
|
value="白班" />
|
<el-option label="夜班"
|
value="夜班" />
|
</el-select>
|
<!-- <el-input v-model="searchForm.schedule"
|
placeholder="请输入""
|
@keyup.enter="handleQuery" /> -->
|
</el-form-item>
|
<el-form-item label="产品名称:">
|
<el-input v-model="searchForm.productName"
|
placeholder="请输入"
|
clearable
|
style="width: 160px;"
|
@keyup.enter="handleQuery" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary"
|
@click="handleQuery">搜索</el-button>
|
<el-button type="primary"
|
@click="handleReset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div>
|
<el-button type="primary"
|
@click="handleAdd">新增</el-button>
|
<el-button @click="handleExport">导出</el-button>
|
</div>
|
</div>
|
<div class="table_list">
|
<PIMTable rowKey="id"
|
:column="tableColumn"
|
:tableData="tableData"
|
:page="page"
|
:tableLoading="tableLoading"
|
:isSelection="false"
|
@selection-change="handleSelectionChange"
|
@pagination="pagination">
|
<template #totalQuantity="{ row }">
|
<span style="font-weight: bold;color: #409eff;">{{ row.totalQuantity }}</span><span style="margin-left: 5px;color: #909399;">方</span>
|
</template>
|
<template #scrapQty="{ row }">
|
<span style="font-weight: bold;color: #b43434;">{{ row.scrapQty }}</span><span style="margin-left: 5px;color: #909399;">方</span>
|
</template>
|
<template #quantity="{ row }">
|
<span style="font-weight: bold;color: #28e431;">{{ row.quantity }}</span><span style="margin-left: 5px;color: #909399;">方</span>
|
</template>
|
</PIMTable>
|
</div>
|
<!-- 详情弹窗 -->
|
<detail-dialog v-model:visible="detailDialogVisible"
|
:data="detailData" />
|
</div>
|
</template>
|
|
<script setup>
|
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
|
import { useRouter } from "vue-router";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import dayjs from "dayjs";
|
import {
|
productionReportDelete,
|
productionReportDetail,
|
productionReportListPage,
|
} from "@/api/productionManagement/productionReporting.js";
|
import PIMTable from "@/components/PIMTable/PIMTable.vue";
|
import DetailDialog from "./detailDialog.vue";
|
|
const router = useRouter();
|
const { proxy } = getCurrentInstance();
|
|
const tableColumn = ref([
|
{
|
label: "生产订单号",
|
prop: "npsNo",
|
width: "150px",
|
},
|
{
|
label: "班组",
|
prop: "schedule",
|
width: "120px",
|
dataType: "tag",
|
formatType: params => {
|
return params === "白班" ? "primary" : "warning";
|
},
|
},
|
{
|
label: "产品编码",
|
prop: "materialCode",
|
width: "150px",
|
},
|
{
|
label: "产品名称",
|
prop: "productName",
|
width: "150px",
|
},
|
{
|
label: "规格",
|
prop: "productModelName",
|
width: "150px",
|
className: "productModelName-cell",
|
},
|
{
|
label: "产出方量",
|
prop: "totalQuantity",
|
width: "100px",
|
align: "right",
|
dataType: "slot",
|
slot: "totalQuantity",
|
},
|
{
|
label: "不合格方量",
|
prop: "scrapQty",
|
width: "100px",
|
align: "right",
|
dataType: "slot",
|
slot: "scrapQty",
|
},
|
{
|
label: "完成方量",
|
prop: "quantity",
|
width: "100px",
|
align: "right",
|
dataType: "slot",
|
slot: "quantity",
|
},
|
{
|
label: "创建人",
|
prop: "postName",
|
width: "120px",
|
dataType: "tag",
|
},
|
{
|
label: "创建时间",
|
prop: "createTime",
|
width: "160px",
|
formatData: val => (val ? dayjs(val).format("YYYY-MM-DD HH:mm:ss") : ""),
|
},
|
{
|
label: "操作",
|
dataType: "action",
|
width: "200px",
|
fixed: "right",
|
operation: [
|
{
|
name: "详情",
|
type: "text",
|
clickFun: row => {
|
handleDetail(row);
|
},
|
},
|
{
|
name: "编辑",
|
type: "text",
|
clickFun: row => {
|
handleEdit(row);
|
},
|
},
|
{
|
name: "删除",
|
type: "text",
|
clickFun: row => {
|
handleDelete(row);
|
},
|
},
|
],
|
},
|
]);
|
|
const tableData = ref([]);
|
const tableLoading = ref(false);
|
const page = reactive({
|
current: 1,
|
size: 10,
|
total: 0,
|
});
|
|
const searchForm = reactive({
|
npsNo: "",
|
schedule: "",
|
productName: "",
|
});
|
|
const form = reactive({
|
id: undefined,
|
orderId: "",
|
npsNo: "",
|
schedule: "",
|
materialCode: "",
|
productName: "",
|
productModelName: "",
|
totalQuantity: 0,
|
scrapQty: 0,
|
quantity: 0,
|
processId: "",
|
params: {},
|
});
|
|
const selectedRows = ref([]);
|
const detailDialogVisible = ref(false);
|
const detailData = ref({});
|
|
const getList = () => {
|
tableLoading.value = true;
|
productionReportListPage({
|
current: page.current,
|
size: page.size,
|
...searchForm,
|
}).then(res => {
|
tableData.value = res.data.records;
|
page.total = res.data.total;
|
tableLoading.value = false;
|
});
|
};
|
|
const handleQuery = () => {
|
page.current = 1;
|
getList();
|
};
|
|
const handleReset = () => {
|
searchForm.npsNo = "";
|
searchForm.schedule = "";
|
searchForm.productName = "";
|
page.current = 1;
|
getList();
|
};
|
|
const pagination = obj => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
const handleSelectionChange = selection => {
|
selectedRows.value = selection;
|
};
|
|
const handleAdd = () => {
|
Object.assign(form, {
|
type: "add",
|
id: undefined,
|
orderId: "",
|
npsNo: "",
|
schedule: "",
|
materialCode: "",
|
productName: "",
|
productModelName: "",
|
totalQuantity: 0,
|
scrapQty: 0,
|
quantity: 0,
|
processId: "",
|
params: {},
|
});
|
router.push({
|
path: "/productionManagement/ReportingDialog",
|
// query: { data: JSON.stringify(form) },
|
});
|
};
|
|
const handleEdit = row => {
|
// 调用详情接口获取完整数据
|
productionReportDetail(row.id)
|
.then(res => {
|
if (res.code === 200) {
|
const detailData = res.data;
|
// 构建编辑表单数据
|
const editForm = {
|
id: row.id,
|
type: "edit",
|
orderId: detailData.productOrderId || "",
|
npsNo: detailData.npsNo || "",
|
schedule: detailData.schedule || "",
|
materialCode: detailData.materialCode || "",
|
productName: detailData.productName || "",
|
productModelName: detailData.model || "",
|
totalQuantity: detailData.quantity || 0,
|
scrapQty: detailData.unqualifiedQuantity || 0,
|
quantity: detailData.qualifiedQuantity || 0,
|
createBy: detailData.postName || "",
|
createTime: detailData.createTime || new Date(),
|
processId: "",
|
params: {},
|
// 传递工序信息
|
productionProductRouteItemDtoList:
|
detailData.productionProductRouteItemDtoList || [],
|
};
|
router.push({
|
path: "/productionManagement/ReportingDialog",
|
query: { data: JSON.stringify(editForm) },
|
});
|
} else {
|
ElMessage.error("获取详情失败");
|
}
|
})
|
.catch(() => {
|
ElMessage.error("获取详情失败");
|
});
|
};
|
|
const handleDetail = row => {
|
productionReportDetail(row.id)
|
.then(res => {
|
if (res.code === 200) {
|
detailData.value = res.data;
|
detailDialogVisible.value = true;
|
} else {
|
ElMessage.error("获取详情失败");
|
}
|
})
|
.catch(() => {
|
ElMessage.error("获取详情失败");
|
});
|
};
|
|
const handleDelete = row => {
|
ElMessageBox.confirm("确认删除该条数据吗?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
productionReportDelete(row.id)
|
.then(() => {
|
ElMessage.success("删除成功");
|
getList();
|
})
|
.catch(() => {
|
ElMessage.error("删除失败");
|
});
|
})
|
.catch(() => {});
|
};
|
|
const handleExport = () => {
|
ElMessage.info("导出功能待实现");
|
};
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.app-container {
|
padding: 24px;
|
background-color: #f0f2f5;
|
min-height: calc(100vh - 48px);
|
}
|
|
.search_form {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
flex-wrap: wrap;
|
gap: 16px;
|
margin-bottom: 24px;
|
padding: 20px;
|
background-color: #ffffff;
|
border-radius: 6px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
transition: all 0.3s ease;
|
|
&:hover {
|
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
|
}
|
|
:deep(.el-form) {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 0;
|
|
.el-form-item {
|
margin-right: 16px;
|
margin-bottom: 0;
|
|
&:last-child {
|
margin-right: 0;
|
}
|
}
|
}
|
|
> div {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px;
|
flex-shrink: 0;
|
}
|
}
|
|
.table_list {
|
background-color: #ffffff;
|
border-radius: 6px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
overflow: hidden;
|
height: calc(100vh - 220px);
|
}
|
|
:deep(.el-table) {
|
border: none;
|
border-radius: 6px;
|
overflow: hidden;
|
|
.el-table__header-wrapper {
|
background-color: #fafafa;
|
|
th {
|
background-color: #fafafa;
|
font-weight: 600;
|
color: #303133;
|
border-bottom: 1px solid #ebeef5;
|
padding: 14px 0;
|
}
|
}
|
|
.el-table__body-wrapper {
|
tr {
|
transition: all 0.3s ease;
|
|
&:hover {
|
background-color: #f5f7fa;
|
}
|
|
td {
|
border-bottom: 1px solid #ebeef5;
|
padding: 12px 0;
|
}
|
}
|
|
tr.current-row {
|
background-color: #ecf5ff;
|
}
|
}
|
|
.el-table__empty-block {
|
padding: 40px 0;
|
}
|
}
|
</style>
|
<style lang="scss">
|
.productModelName-cell {
|
color: #7a7d81;
|
font-style: italic;
|
}
|
</style>
|
