<template>
|
<div class="app-container">
|
<PageHeader content="生产报工" />
|
<div class="search_form mb20">
|
<div class="search-row">
|
<div class="search-item">
|
<span class="search_title">报工单号：</span>
|
<el-input v-model="searchForm.productNo"
|
style="width: 220px"
|
placeholder="请输入"
|
clearable
|
prefix-icon="Search"
|
@change="handleQuery" />
|
</div>
|
<div class="search-item">
|
<span class="search_title">工单编号：</span>
|
<el-input v-model="searchForm.workOrderNo"
|
style="width: 220px"
|
placeholder="请输入"
|
clearable
|
prefix-icon="Search"
|
@change="handleQuery" />
|
</div>
|
<div class="search-item">
|
<span class="search_title">报工人员：</span>
|
<el-input v-model="searchForm.nickName"
|
style="width: 220px"
|
placeholder="请输入"
|
clearable
|
prefix-icon="Search"
|
@change="handleQuery" />
|
</div>
|
<div class="search-item">
|
<span class="search_title">报工类型：</span>
|
<el-select v-model="searchForm.reportType"
|
style="width: 180px"
|
clearable
|
placeholder="请选择"
|
@change="handleQuery">
|
<el-option label="合格" :value="0" />
|
<el-option label="轻微返工" :value="1" />
|
<el-option label="严重返工" :value="2" />
|
<el-option label="报废" :value="3" />
|
</el-select>
|
</div>
|
<div class="search-item">
|
<el-button type="primary" @click="handleQuery">搜索</el-button>
|
</div>
|
</div>
|
</div>
|
|
<div class="table_list">
|
<PIMTable rowKey="id"
|
:column="tableColumn"
|
:tableData="tableData"
|
:page="page"
|
:tableLoading="tableLoading"
|
@pagination="pagination"
|
:total="page.total" />
|
</div>
|
|
<input-modal v-if="isShowInput"
|
v-model:visible="isShowInput"
|
:production-product-main-id="isShowingId" />
|
|
</div>
|
</template>
|
|
<script setup>
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
import { productionProductMainListPage } from "@/api/productionManagement/productionProductMain.js";
|
import InputModal from "@/views/productionManagement/productionReporting/Input.vue";
|
|
const tableLoading = ref(false);
|
const tableData = ref([]);
|
const page = reactive({
|
current: 1,
|
size: 10,
|
total: 0,
|
});
|
|
const data = reactive({
|
searchForm: {
|
productNo: "",
|
workOrderNo: "",
|
nickName: "",
|
reportType: "",
|
},
|
});
|
const { searchForm } = toRefs(data);
|
|
const tableColumn = [
|
{ label: "报工单号", prop: "productNo", width: 140 },
|
{ label: "报工人员", prop: "nickName", width: 120 },
|
{ label: "工序", prop: "process", width: 140 },
|
{ label: "工单编号", prop: "workOrderNo", width: 140 },
|
{ label: "产出数量", prop: "quantity", width: 120 },
|
{ label: "报废数量", prop: "scrapQty", width: 120 },
|
{ label: "工时（h）", prop: "workHour", width: 100 },
|
{ label: "报工结果", prop: "reportTypeName", width: 100 },
|
{ label: "审核状态", prop: "auditStatusName", width: 100 },
|
{ label: "创建时间", prop: "createTime", width: 160 },
|
{
|
label: "操作",
|
dataType: "action",
|
width: 120,
|
fixed: "right",
|
operation: [
|
{
|
name: "查看投入",
|
type: "text",
|
clickFun: (row) => {
|
showInput(row);
|
},
|
},
|
],
|
},
|
];
|
|
const isShowInput = ref(false);
|
const isShowingId = ref(0);
|
|
const handleQuery = () => {
|
page.current = 1;
|
getList();
|
};
|
|
const pagination = (obj) => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
const getList = () => {
|
tableLoading.value = true;
|
productionProductMainListPage({ ...searchForm.value, ...page })
|
.then((res) => {
|
tableData.value = (res.data.records || []).map((item) => ({
|
...item,
|
reportTypeName: item.reportTypeName || resolveReportTypeName(item.reportType),
|
auditStatusName: item.auditStatusName || resolveAuditStatusName(item.auditStatus),
|
}));
|
page.total = res.data.total || 0;
|
})
|
.finally(() => {
|
tableLoading.value = false;
|
});
|
};
|
|
const resolveReportTypeName = (val) => {
|
const map = {
|
0: "合格",
|
1: "轻微返工",
|
2: "严重返工",
|
3: "报废",
|
};
|
return map[Number(val)] || "—";
|
};
|
|
const resolveAuditStatusName = (val) => {
|
const map = {
|
0: "待审核",
|
1: "审核通过",
|
2: "审核不通过",
|
};
|
return map[Number(val)] || "—";
|
};
|
|
const showInput = (row) => {
|
isShowingId.value = row.id;
|
isShowInput.value = true;
|
};
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
|
<style scoped>
|
.search-row {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 12px 16px;
|
}
|
|
.search-item {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
</style>
|
