heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/materialplan/part.vue

282 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>
</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="150" />
<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">
<el-button @click="submitForm()" type="success" size="large">全部提交</el-button>
<el-button style="margin-left: 20px" @click="withdraw()" type="danger" size="large">撤回</el-button>
</div>
</el-card>
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import download from '@/utils/download'
import * as ProcessBomApi from '@/api/heli/processbom'
import { useCommonStateWithOut } from '@/store/modules/common'
import UserSelect from "@/views/heli/hlvuestyle/userSelect.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) => {
if (val.length > 1) {
// multipleTable.value.clearSelection()
multipleTable.value=val
} else {
multipleSelection.value = val.pop()
}
}
/** 搜索按钮操作 */
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 submitForm = async () => {
const list= multipleTable.value;
if (list.length <= 0) {
message.error("提交明细不能为空,请确认");
return;
}
const firstProjectSubId = list[0].projectSubId;
for (let i = 1; i < list.length; i++) {
if (list[i].projectSubId !== firstProjectSubId) {
message.error("零件明细不属于同一个子项目,请确认");
return;
}
}
for (let i = 0; i < list.length; i++) {
if (list[i].projectMaterialPlanNo!=null){
message.error("零件"+list[i].materialName+"已生成物料需求计划,请确认")
return
}
if (list[i].boomArriveDate==null){
message.error("零件"+list[i].materialName+"要求完成日期为空,请确认")
return
}
if (list[i].duEmpId==null){
message.error("零件"+list[i].materialName+"责任人为空,请确认")
return
}
}
formLoading.value = true
try {
await MaterialPlanApi.submitForm(list)
message.success("提交成功")
// 发送操作成功的事件
getList()
emit('success')
} 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>