190 lines
6.7 KiB
Vue
190 lines
6.7 KiB
Vue
<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="projectSubCode" min-width="200" label="子项目编码" align="center"/>
|
||
<el-table-column prop="boomName" min-width="200" label="物料名称" align="center"/>
|
||
<el-table-column prop="boomSpec" 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="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" type="primary" v-if="formData.status == 1"
|
||
size="large">批 准</el-button>
|
||
<el-button @click="reject" v-if="formData.status == 1" size="large" type="danger">驳 回</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 * as UserApi from '@/api/system/user'
|
||
|
||
import { dateFormatter1} from '@/utils/formatTime'
|
||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||
|
||
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,
|
||
})
|
||
|
||
const approve = async () => {
|
||
await PartPurchaseOrderApi.approval(formData.value.id)
|
||
message.success("批准成功");
|
||
formData.value = await PartPurchaseOrderApi.getPurchaseOrderMake(query.id)
|
||
formData.value.type = query.type
|
||
getList();
|
||
}
|
||
|
||
const handleReject = async () => {
|
||
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() => {
|
||
// updateParams.reason = reason
|
||
// 这里可以执行提交驳回逻辑
|
||
await PartPurchaseOrderApi.reject(formData.value.id)
|
||
message.success("驳回成功");
|
||
router.push({ path: '/purchase/PurchaseOrderMake'});
|
||
tagsViewStore.delVisitedView(router.currentRoute.value)
|
||
}
|
||
|
||
const cancel = async () => {
|
||
router.push({ path: '/purchase/PurchaseOrderMake'});
|
||
}
|
||
|
||
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.getDetail(queryParams)
|
||
formData.value.matBoomDOList = data.list
|
||
total.value = data.total
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
</script>
|