heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/materialplan/part.vue
2025-06-22 00:08:59 +08:00

302 lines
11 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<el-card class="hl-card">
<template #header>
<span>零件物料需求计划</span>
</template>
<ContentWrap class="borderxx">
<!-- 搜索工作栏 -->
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="120px">
<el-form-item label="项目名称" prop="projectName">
<el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item label="子项目名称" prop="projectSubName">
<el-input v-model="queryParams.projectSubName" placeholder="请输入子项目名称" clearable @keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item label="零件名称" prop="materialName">
<el-input v-model="queryParams.materialName" placeholder="请输入零件名称" clearable @keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item label="领件状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择标准件状态" clearable class="!w-240px">
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.HELI_MATERIAL_PLAN_BOOM_STATUS)" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="物料需求单号" prop="projectMaterialPlanNo">
<el-input v-model="queryParams.projectMaterialPlanNo" placeholder="请输入物料需求单号" clearable @keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item style="margin-left:30px">
<el-button @click="handleQuery" type="primary">
<Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" /> 重置
</el-button>
<el-button
type="success"
plain
@click="handleExportDetail"
:loading="exportLoading"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<el-card class="hl-card-info">
<template #header>
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">零件明细</span>
<el-button style="margin-left: 20px" @click="singleSubmissions()" type="success" size="large">全部提交</el-button>
<el-button style="margin-left: 20px" @click="withdraw()" type="danger" size="large">撤回</el-button>
</template>
<el-row>
<el-col>
<el-card class="hl-incard">
<el-form ref="multipleTable" :model="list" v-loading="formLoading" label-width="0" >
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" class="hl-table" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column fixed label="序号" align="center" type="index" width="60" />
<el-table-column label="工序名称" align="center" prop="procedureName" min-width="180" >
<template #default="scope">
<el-button text type="primary">
{{ scope.row.procedureName }}
</el-button>
</template>
</el-table-column>
<el-table-column label="项目名称" align="center" prop="projectName" min-width="180" />
<el-table-column label="子项目名称" align="center" prop="projectSubName" min-width="180" />
<el-table-column label="客户简码" align="center" prop="customerName" min-width="100" />
<el-table-column label="零件名称" align="center" prop="materialName" min-width="180" />
<el-table-column label="材质" align="center" prop="compositionName" min-width="120" />
<el-table-column label="数量" align="center" prop="boomAmount" min-width="120" />
<el-table-column min-width="200px" align="center" >
<template #header><span class="hl-table_header">*</span>要求完成日期</template>
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.boomArriveDate`" class="mb-0px!" >
<el-date-picker class="!w-265px" v-model="row.boomArriveDate" type="date" value-format="x" placeholder="要求完成日期" />
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="200px" align="center" >
<template #header>要求说明</template>
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.description`" class="mb-0px!" >
<el-input class="!w-265px" v-model="row.description" placeholder="要求说明" />
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="200px" align="center">
<template #header>重量(T)</template>
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.matWeight`" class="mb-0px!" >
<el-input-number v-model="row.matWeight" type="number" :precision="2" />
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="200px" align="center" >
<template #header><span class="hl-table_header">*</span>责任人</template>
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.duEmpId`" class="mb-0px!" >
<UserSelect v-model="row.duEmpId" class="!w-265px" clearable @update:newValue="handleSelectedUser($index, $event)"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="物料需求单号" align="center" prop="projectMaterialPlanNo" min-width="180" />
<el-table-column label="操作" align="center" fixed="right" min-width="120">
<template #default="scope">
<el-button link type="primary" @click="singleSubmission(scope.row)">
提交
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-form>
</el-card>
</el-col>
</el-row>
</el-card>
<div class="hl-footer text-center">
</div>
</el-card>
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import download from '@/utils/download'
import { useCommonStateWithOut } from '@/store/modules/common'
import UserSelect from "@/views/heli/materialplan/userSelectNew.vue";
import {inject, ref} from "vue";
import * as MaterialPlanApi from "@/api/heli/materialplan";
import {ElTable} from "element-plus";
const formLoading = ref(false) // 表单的加载中1修改时的数据加载2提交的按钮禁用
defineOptions({ name: 'standard' })
const reload: any = inject('reload')
const commonStore = useCommonStateWithOut()
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const router = useRouter()
const multipleTable = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref([])
const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
code: undefined,
planCode: undefined,
projectCode: undefined,
customerName: undefined,
projectName: undefined,
projectSubName: undefined,
version: undefined,
bomStatus: undefined,
remark: undefined,
status: 0,
createTime: [],
ownerName:undefined,
materialName:undefined,
projectMaterialPlanNo:undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await MaterialPlanApi.getPartPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 导出按钮操作 */
const handleExportDetail = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await MaterialPlanApi.exportPart(queryParams)
download.excel(data, '零件物料需求计划.xlsx')
} catch {
} finally {
exportLoading.value = false
}
}
const handleSelectionChange = (val) => {
// multipleTable.value.clearSelection()
multipleTable.value=val
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
const handleSelectedUser = (currentIndex, newValue: any) => {
list.value[currentIndex].duEmpId = newValue?.id
}
const singleSubmission= (val) =>{
multipleTable.value=[]
multipleTable.value.push(val)
submitForm();
}
const singleSubmissions=()=>{
submitForm();
}
const submitForm = async () => {
try {
console.log("开始提交"); // 调试点1确认函数是否触发
const list = multipleTable.value|| []; // 安全获取数据
console.log("明细数据:", list);
console.log(list.length)
// 1. 检查空数据
if (!list || list.length==null) {
message.error("提交明细不能为空,请确认");
return;
}
// 2. 检查子项目一致性
const firstProjectSubId = list[0].projectSubId;
if (list.some(item => item.projectSubId !== firstProjectSubId)) {
message.error("零件明细不属于同一个子项目,请确认");
return;
}
// 3. 校验每个零件
for (const item of list) {
if (item.projectMaterialPlanNo) {
message.error(`工序${item.procedureName}中零件 ${item.materialName} 已生成物料需求计划,请确认`);
return;
}
if (!item.boomArriveDate) { // 注意:原代码是 boomArriveDate确保拼写正确
message.error(`工序${item.procedureName}中零件 ${item.materialName} 要求完成日期为空,请确认`);
return;
}
if (!item.duEmpId) {
message.error(`工序${item.procedureName}中零件 ${item.materialName} 责任人为空,请确认`);
return;
}
}
// 4. 添加加载状态Element Plus 兼容处理)
formLoading.value = true;
// 5. 提交数据(添加超时处理)
const res = await Promise.race([
MaterialPlanApi.submitForm(list),
new Promise((_, reject) =>
setTimeout(() => reject(new Error("请求超时")), 30000)
)
]);
message.success("提交成功");
getList(); // 确保刷新完成
emit('success');
} catch (error) {
console.error("提交失败:", error);
// message.error(`操作失败: ${error.message || "未知错误"}`);
} finally {
formLoading.value = false;
}
}
const withdraw = async () => {
if (queryParams.projectMaterialPlanNo==null){
message.error("物料需求单号为空,不允许撤回")
return
}
await MaterialPlanApi.withdraw(queryParams.projectMaterialPlanNo)
message.success("撤回成功")
// 发送操作成功的事件
getList()
emit('success')
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<style>
/* 占位样式 */
</style>