<template>
|
<div class="app-container">
|
<div class="search_form">
|
<el-form :model="searchForm"
|
:inline="true">
|
<el-form-item label="车间:">
|
<el-select v-model="searchForm.workshop"
|
placeholder="请选择"
|
clearable
|
style="width: 160px;"
|
@change="handleQuery">
|
<el-option label="车间1"
|
value="1" />
|
<el-option label="车间2"
|
value="2" />
|
<el-option label="车间3"
|
value="3" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态:">
|
<el-select v-model="searchForm.status"
|
placeholder="请选择"
|
clearable
|
style="width: 160px;"
|
@change="handleQuery">
|
<el-option label="待处理"
|
value="pending" />
|
<el-option label="进行中"
|
value="processing" />
|
<el-option label="已完成"
|
value="completed" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary"
|
@click="handleQuery">搜索</el-button>
|
</el-form-item>
|
</el-form>
|
<div>
|
<el-button type="primary"
|
@click="handleMerge">和并下发</el-button>
|
<el-button type="info"
|
@click="showCategorySummaryDialog = true">产品类别汇总</el-button>
|
<!-- <el-button type="danger"
|
@click="handleDelete">删除</el-button> -->
|
</div>
|
</div>
|
<div class="table_list">
|
<PIMTable rowKey="id"
|
:column="tableColumn"
|
:tableData="tableData"
|
:page="page"
|
:tableLoading="tableLoading"
|
:isSelection="true"
|
:selectable="isSelectable"
|
@selection-change="handleSelectionChange"
|
@pagination="pagination">
|
</PIMTable>
|
</div>
|
<!-- 合并下发弹窗 -->
|
<el-dialog v-model="isShowNewModal"
|
title="合并下发"
|
width="500px">
|
<el-form :model="mergeForm"
|
label-width="120px">
|
<el-form-item label="生产计划号">
|
<el-input v-model="mergeForm.productionPlanNo"
|
disabled />
|
</el-form-item>
|
<el-form-item label="生产计划数量">
|
<el-input-number v-model="mergeForm.totalManufactureQuantity"
|
:min="1"
|
:step="1"
|
style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input v-model="mergeForm.remark"
|
type="textarea" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="isShowNewModal = false">取消</el-button>
|
<el-button type="primary"
|
@click="handleMergeSubmit">确定下发</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<!-- 产品类别汇总弹窗 -->
|
<el-dialog v-model="showCategorySummaryDialog"
|
title="产品类别汇总统计"
|
width="400px">
|
<el-table :data="categorySummary"
|
border
|
style="width: 100%">
|
<el-table-column prop="productCategory"
|
label="产品类别"
|
align="center"
|
width="150" />
|
<el-table-column prop="totalManufactureQuantity"
|
label="总制造数量"
|
align="center" />
|
</el-table>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="showCategorySummaryDialog = false">关闭</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { onMounted, ref } from "vue";
|
import { ElMessage } from "element-plus";
|
import dayjs from "dayjs";
|
import { productOrderListPage } from "@/api/productionManagement/productionOrder.js";
|
import PIMTable from "./components/PIMTable.vue";
|
|
const tableColumn = ref([
|
{
|
label: "来源",
|
prop: "source",
|
width: "100px",
|
},
|
{
|
label: "状态",
|
prop: "status",
|
width: "80px",
|
},
|
{
|
label: "审核状态",
|
prop: "auditStatus",
|
width: "100px",
|
},
|
{
|
label: "订单号",
|
prop: "orderNo",
|
width: "120px",
|
},
|
{
|
label: "生产计划号",
|
prop: "productionPlanNo",
|
width: "140px",
|
},
|
{
|
label: "零件号",
|
prop: "partNo",
|
width: "120px",
|
},
|
{
|
label: "零件",
|
prop: "partName",
|
width: "120px",
|
},
|
{
|
label: "产品类别",
|
prop: "productCategory",
|
width: "100px",
|
},
|
{
|
label: "工艺文件号",
|
prop: "processFileNo",
|
width: "140px",
|
},
|
{
|
label: "销售数量",
|
prop: "salesQuantity",
|
width: "100px",
|
align: "right",
|
},
|
{
|
label: "制造数量",
|
prop: "manufactureQuantity",
|
width: "100px",
|
align: "right",
|
},
|
{
|
label: "零件单位",
|
prop: "partUnit",
|
width: "80px",
|
},
|
{
|
label: "主计划需求日期",
|
prop: "mainPlanDemandDate",
|
formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
|
width: "140px",
|
},
|
{
|
label: "承诺日期",
|
prop: "commitmentDate",
|
formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
|
width: "120px",
|
},
|
{
|
label: "制造属性",
|
prop: "manufactureProperty",
|
width: "100px",
|
},
|
{
|
label: "备注",
|
prop: "remark",
|
width: "150px",
|
},
|
{
|
label: "更新时间",
|
prop: "updateTime",
|
formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
|
width: "120px",
|
},
|
{
|
label: "更新人",
|
prop: "updateBy",
|
width: "100px",
|
},
|
{
|
label: "创建时间",
|
prop: "createTime",
|
formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
|
width: "120px",
|
},
|
{
|
label: "创建人",
|
prop: "createBy",
|
width: "100px",
|
},
|
{
|
dataType: "action",
|
label: "操作",
|
align: "center",
|
fixed: "right",
|
width: 200,
|
operation: [
|
{
|
name: "下发",
|
type: "text",
|
clickFun: row => {
|
// 单独下发操作
|
// 设置表单数据
|
mergeForm.productionPlanNo = row.productionPlanNo;
|
mergeForm.totalManufactureQuantity = row.manufactureQuantity;
|
mergeForm.remark = "";
|
|
// 打开弹窗
|
isShowNewModal.value = true;
|
},
|
},
|
{
|
name: "追踪进度",
|
type: "text",
|
clickFun: row => {
|
// 追踪进度操作
|
ElMessage.warning("追踪进度功能待开发");
|
},
|
},
|
],
|
},
|
]);
|
const tableData = ref([]);
|
const tableLoading = ref(false);
|
const page = reactive({
|
current: 1,
|
size: 100,
|
total: 0,
|
});
|
const selectedRows = ref([]);
|
|
// 产品类别汇总统计数据
|
const categorySummary = ref([]);
|
// 产品类别汇总弹窗控制
|
const showCategorySummaryDialog = ref(false);
|
|
// 合并下发弹窗控制
|
const isShowNewModal = ref(false);
|
// 合并下发表单数据
|
const mergeForm = reactive({
|
productionPlanNo: "",
|
totalManufactureQuantity: 0,
|
remark: "",
|
});
|
|
const data = reactive({
|
searchForm: {
|
customerName: "",
|
salesContractNo: "",
|
projectName: "",
|
productCategory: "",
|
specificationModel: "",
|
},
|
});
|
const { searchForm } = toRefs(data);
|
|
// 查询列表
|
/** 搜索按钮操作 */
|
const handleQuery = () => {
|
page.current = 1;
|
getList();
|
};
|
const pagination = obj => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
// 计算产品类别汇总统计
|
const calculateCategorySummary = () => {
|
const summary = {};
|
|
// 遍历表格数据，按产品类别汇总
|
tableData.value.forEach(row => {
|
const category = row.productCategory;
|
if (!summary[category]) {
|
summary[category] = {
|
productCategory: category,
|
totalManufactureQuantity: 0,
|
};
|
}
|
summary[category].totalManufactureQuantity += row.manufactureQuantity;
|
});
|
|
// 转换为数组格式
|
categorySummary.value = Object.values(summary);
|
};
|
|
const getList = () => {
|
tableLoading.value = true;
|
// 构造一个新的对象，不包含entryDate字段
|
const params = { ...searchForm.value, ...page };
|
params.entryDate = undefined;
|
tableData.value = [
|
{
|
id: 1,
|
source: "销售订单",
|
status: "待处理",
|
auditStatus: "已审核",
|
orderNo: "SO20260301001",
|
productionPlanNo: "PP20260301001",
|
partNo: "P001",
|
partName: "零件A",
|
productCategory: "类别1",
|
processFileNo: "PF20260301001",
|
salesQuantity: 100,
|
manufactureQuantity: 105,
|
partUnit: "个",
|
mainPlanDemandDate: "2026-03-15",
|
commitmentDate: "2026-03-10",
|
manufactureProperty: "常规",
|
remark: "",
|
updateTime: "2026-03-01",
|
updateBy: "admin",
|
createTime: "2026-03-01",
|
createBy: "admin",
|
},
|
{
|
id: 2,
|
source: "销售订单",
|
status: "待处理",
|
auditStatus: "已审核",
|
orderNo: "SO20260301002",
|
productionPlanNo: "PP20260301001",
|
partNo: "P002",
|
partName: "零件B",
|
productCategory: "类别1",
|
processFileNo: "PF20260301002",
|
salesQuantity: 200,
|
manufactureQuantity: 210,
|
partUnit: "个",
|
mainPlanDemandDate: "2026-03-15",
|
commitmentDate: "2026-03-10",
|
manufactureProperty: "常规",
|
remark: "",
|
updateTime: "2026-03-01",
|
updateBy: "admin",
|
createTime: "2026-03-01",
|
createBy: "admin",
|
},
|
{
|
id: 3,
|
source: "销售订单",
|
status: "进行中",
|
auditStatus: "已审核",
|
orderNo: "SO20260301003",
|
productionPlanNo: "PP20260301002",
|
partNo: "P003",
|
partName: "零件C",
|
productCategory: "类别2",
|
processFileNo: "PF20260301003",
|
salesQuantity: 150,
|
manufactureQuantity: 155,
|
partUnit: "个",
|
mainPlanDemandDate: "2026-03-20",
|
commitmentDate: "2026-03-15",
|
manufactureProperty: "常规",
|
remark: "",
|
updateTime: "2026-03-01",
|
updateBy: "admin",
|
createTime: "2026-03-01",
|
createBy: "admin",
|
},
|
{
|
id: 4,
|
source: "销售订单",
|
status: "进行中",
|
auditStatus: "已审核",
|
orderNo: "SO20260301004",
|
productionPlanNo: "PP20260301002",
|
partNo: "P004",
|
partName: "零件D",
|
productCategory: "类别2",
|
processFileNo: "PF20260301004",
|
salesQuantity: 300,
|
manufactureQuantity: 315,
|
partUnit: "个",
|
mainPlanDemandDate: "2026-03-20",
|
commitmentDate: "2026-03-15",
|
manufactureProperty: "常规",
|
remark: "",
|
updateTime: "2026-03-01",
|
updateBy: "admin",
|
createTime: "2026-03-01",
|
createBy: "admin",
|
},
|
{
|
id: 5,
|
source: "销售订单",
|
status: "已完成",
|
auditStatus: "已审核",
|
orderNo: "SO20260301005",
|
productionPlanNo: "PP20260301003",
|
partNo: "P005",
|
partName: "零件E",
|
productCategory: "类别3",
|
processFileNo: "PF20260301005",
|
salesQuantity: 250,
|
manufactureQuantity: 260,
|
partUnit: "个",
|
mainPlanDemandDate: "2026-03-10",
|
commitmentDate: "2026-03-05",
|
manufactureProperty: "常规",
|
remark: "",
|
updateTime: "2026-03-01",
|
updateBy: "admin",
|
createTime: "2026-03-01",
|
createBy: "admin",
|
},
|
];
|
tableLoading.value = false;
|
page.total = tableData.value.length;
|
// 计算产品类别汇总统计
|
calculateCategorySummary();
|
// productOrderListPage(params)
|
// .then(res => {
|
// tableLoading.value = false;
|
|
// tableData.value = res.data.records;
|
// page.total = res.data.total;
|
// // 计算产品类别汇总统计
|
// calculateCategorySummary();
|
// })
|
// .catch(() => {
|
// tableLoading.value = false;
|
// });
|
};
|
|
// 选中的生产计划号
|
const selectedProductionPlanNo = ref("");
|
|
// 表格选择数据
|
const handleSelectionChange = selection => {
|
selectedRows.value = selection;
|
// 如果有选中的行，记录第一个选中行的生产计划号
|
if (selection.length > 0) {
|
selectedProductionPlanNo.value = selection[0].productionPlanNo;
|
} else {
|
// 如果没有选中的行，清空生产计划号
|
selectedProductionPlanNo.value = "";
|
}
|
};
|
|
// 判断行是否可选择
|
const isSelectable = row => {
|
// 如果没有选中的行，所有行都可选择
|
if (!selectedProductionPlanNo.value) {
|
return true;
|
}
|
// 如果有选中的行，只有生产计划号相同的行才可选择
|
return row.productionPlanNo === selectedProductionPlanNo.value;
|
};
|
|
// 处理合并下发按钮点击
|
const handleMerge = () => {
|
if (selectedRows.value.length === 0) {
|
ElMessage.warning("请选择要合并下发的生产计划");
|
return;
|
}
|
|
// 计算总制造数量
|
const totalQuantity = selectedRows.value.reduce((sum, row) => {
|
return sum + row.manufactureQuantity;
|
}, 0);
|
|
// 设置表单数据
|
mergeForm.productionPlanNo = selectedProductionPlanNo.value;
|
mergeForm.totalManufactureQuantity = totalQuantity;
|
mergeForm.remark = "";
|
|
// 打开弹窗
|
isShowNewModal.value = true;
|
};
|
|
// 处理合并下发提交
|
const handleMergeSubmit = () => {
|
// 这里可以添加下发逻辑
|
ElMessage.success("合并下发成功");
|
isShowNewModal.value = false;
|
// 可以选择刷新列表或其他操作
|
};
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.search_form {
|
align-items: start;
|
}
|
|
.summary-section {
|
margin-bottom: 16px;
|
}
|
|
.horizontal-summary {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 20px;
|
padding: 10px 0;
|
}
|
|
.summary-item {
|
flex: 1;
|
min-width: 120px;
|
text-align: center;
|
padding: 10px;
|
background-color: #f5f7fa;
|
border-radius: 4px;
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
}
|
|
.summary-label {
|
font-size: 14px;
|
color: #606266;
|
margin-bottom: 5px;
|
}
|
|
.summary-value {
|
font-size: 18px;
|
font-weight: 600;
|
color: #303133;
|
}
|
|
::v-deep .yellow {
|
background-color: #faf0de;
|
}
|
|
::v-deep .pink {
|
background-color: #fae1de;
|
}
|
|
::v-deep .red {
|
background-color: #f80202;
|
}
|
|
::v-deep .purple {
|
background-color: #f4defa;
|
}
|
</style>
|
