heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/partpurchasecheck/detail.vue
2025-06-28 03:02:43 +08:00

222 lines
8.1 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" style="position: relative">
<template #header>
<span>详情页</span>
</template>
<el-form ref="formRef" :model="formData" label-width="160px" v-loading="formLoading">
<!-- 基础信息 -->
<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 :span="24">
<el-row>
<el-col :span="6">
<el-row>
<el-col :span="24">
<el-form-item label="采购单号" prop="purchaseNo">
<el-input class="!w-300px" placeholder="系统自动生成" v-model="formData.purchaseNo" disabled />
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
<!-- 需求单信息 -->
<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-table :data="formData.matBoomDOList" class="hl-table" v-loading="loading">
<el-table-column type="index" label="序号" fixed align="center" min-width="60" />
<el-table-column prop="projectName" min-width="200" label="项目名称" align="center"/>
<el-table-column prop="projectName" min-width="200" label="子项目编码" align="center"/>
<el-table-column prop="boomName" min-width="200" label="物料名称" align="center"/>
<el-table-column prop="procedureName" min-width="120" label="工序" align="center"/>
<el-table-column prop="composition" min-width="120" label="材质" align="center"/>
<el-table-column prop="boomAmount" min-width="100" label="需求数量" align="center"/>
<el-table-column prop="purchaseAmount" min-width="100" label="采购数量" align="center"/>
<el-table-column prop="requireTime" min-width="200" label="需要完成日期" align="center" :formatter="dateFormatter1"/>
<el-table-column prop="arriveTime" min-width="200" label="预计到货日期" align="center" :formatter="dateFormatter1"/>
<el-table-column prop="supplierName" min-width="100" label="供应商" align="center"/>
<el-table-column prop="description" min-width="200" label="技术要求" align="center"/>
<el-table-column prop="theWeight" min-width="100" label="理论重量(吨)" align="center"/>
<el-table-column prop="estimatedPrice" min-width="100" label="预估总价" align="center"/>
</el-table>
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</el-card>
</el-col>
</el-row>
</el-card>
</el-form>
<div class="hl-footer text-center">
<template v-if="formData.type === 'check'">
<el-button @click="approve" size="large">批 准</el-button>
<el-button @click="handleReject" size="large">驳 回</el-button>
<el-button @click="cancel" size="large">取 消</el-button>
</template>
<template v-if="formData.type === 'detail'">
<el-button @click="cancel" size="large">取 消</el-button>
</template>
</div>
</el-card>
<!-- 表单弹窗:物料列表 -->
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import * as MaterialPlanApi from '@/api/heli/materialplan'
import * as MaterialPlanDetailApi from '@/api/heli/materialplandetail'
import * as MaterialPlanBoomApi from '@/api/heli/materialplanboom'
import type { UploadUserFile } from 'element-plus'
import * as PlanApi from '@/api/heli/plan'
import * as PlanSubApi from '@/api/heli/plansub'
import * as ProjectOrderApi from '@/api/heli/projectorder'
import * as UserApi from '@/api/system/user'
import * as MaterialApi from '@/api/heli/material'
import { deleteFile, downloadFile, getFilePage } from '@/api/infra/file'
import download from '@/utils/download'
import { getAccessToken, getTenantId } from '@/utils/auth'
import {dateFormatter, dateFormatter1, formatDate} from '@/utils/formatTime'
import { useUserStore } from '@/store/modules/user'
import { useTagsViewStore } from '@/store/modules/tagsView'
import MaterialSelect from '@/views/heli/hlvuestyle/materialSelect.vue'
import booms from './boom.vue'
import * as PartPurchaseOrderApi from "@/api/heli/partpurchaseorder";
import { ElMessageBox } from 'element-plus'
import { ref } from 'vue'
const reload: any = inject('reload')
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { query } = useRoute()
const router = useRouter()
const tagsViewStore = useTagsViewStore()
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中1修改时的数据加载2提交的按钮禁用
const formData = ref({
id: undefined,
purchaseNo: undefined,
projectId: undefined,
projectPlanId: undefined,
projectPlanNo: undefined,
projectCode: undefined,
auditor: undefined,
createTime: new Date(),
status: undefined,
description: undefined,
boomItemDOList: [],
boomItemRemoveList: [],
matBoomDOList: [],
matItemRemoveList: [],
attachments: [],
type: undefined,
})
const formRef = ref() // 表单 Ref
const subFormRef = ref() // 表单 Ref
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const subBoomFormLoading = ref(false)
const subBoomFormRef = ref()
const updateParams = reactive({
id: query.id,
reason: undefined
})
const approve = async () => {
const checkParams = await PartPurchaseOrderApi.getPurchaseOrderMake(query.id)
if (checkParams.status != 1){
message.warning("该单据状态非待审核,请刷新界面!");
return;
}
await PartPurchaseOrderApi.updatePurchaseOrderMake(formData.value.id)
message.success("提交成功");
getList();
}
const handleReject = async () => {
const checkParams = await PartPurchaseOrderApi.getPurchaseOrderMake(query.id)
if (checkParams.status != 1){
message.warning("该单据状态非待审核,请刷新界面!");
return;
}
try {
const { value, action } = await ElMessageBox.prompt('请输入驳回原因', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /.+/, // 至少输入一个字符
inputErrorMessage: '内容不能为空'
})
if (action === 'confirm') {
reject(value) // 将输入内容传入 reject 方法
}
} catch (err) {
// 用户点击取消或输入不合法时会进入这里
console.log('操作取消或输入无效')
}
}
// 假设这是你要调用的 reject 方法
const reject = async(reason) => {
console.log('驳回原因:', reason)
updateParams.reason = reason
// 这里可以执行提交驳回逻辑
await PartPurchaseOrderApi.updatePurchaseOrderMakeNo(updateParams)
message.success("已驳回");
getList();
}
const cancel = async () => {
router.push({ path: '/purchase/PartPurchaseCheck'}).then(() => {
window.close();
});
}
const closeForm = async () => {
router.push({ path: '/purchase/management' })
tagsViewStore.delVisitedView(router.currentRoute.value)
}
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
purchaseOrderId: query.id
})
// 页面数据加载初始化
onMounted(async () => {
// 获取物料需求计划信息
formData.value = await PartPurchaseOrderApi.getPurchaseOrderMake(query.id)
formData.value.type = query.type
getList();
})
const getList = async () => {
loading.value = true
try {
const data = await PartPurchaseOrderApi.getPartPage(queryParams)
formData.value.matBoomDOList = data.list
total.value = data.total
} finally {
loading.value = false
}
}
</script>