196 lines
6.4 KiB
Vue
196 lines
6.4 KiB
Vue
|
<template>
|
||
|
|
<Dialog :title="dialogTitle" v-model="dialogVisible" width="1200px">
|
||
|
|
<el-form
|
||
|
|
ref="formRef"
|
||
|
|
:model="formData"
|
||
|
|
label-width="100px"
|
||
|
|
v-loading="formLoading"
|
||
|
|
>
|
||
|
|
<!-- 基础信息 -->
|
||
|
|
<el-card class="mb-4">
|
||
|
|
<template #header>
|
||
|
|
<span>基础信息</span>
|
||
|
|
</template>
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="采购单号">
|
||
|
|
<el-input v-model="formData.purOrdNo" disabled />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="订单日期">
|
||
|
|
<el-input v-model="formData.purDate" disabled />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="单据类型">
|
||
|
|
<el-input :value="formData.billType === '1' ? '标准采购申请' : '设备采购申请'" disabled />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="单据状态">
|
||
|
|
<el-tag v-if="formData.purStatus === '1'" type="info">已创建</el-tag>
|
||
|
|
<el-tag v-else-if="formData.purStatus === '2'" type="warning">已确认</el-tag>
|
||
|
|
<el-tag v-else-if="formData.purStatus === '3'" type="success">已审批</el-tag>
|
||
|
|
<el-tag v-else-if="formData.purStatus === '4'" type="danger">已驳回</el-tag>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20" class="mt-4">
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="供应商">
|
||
|
|
<el-input v-model="formData.supplierName" disabled />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="采购部门">
|
||
|
|
<el-input v-model="formData.purDeptName" disabled />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="采购人员">
|
||
|
|
<el-input v-model="formData.purEmpName" disabled />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="验收方式">
|
||
|
|
<el-input :value="formData.acceptMeth === '1' ? '数量验收' : '金额验收'" disabled />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20" class="mt-4">
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-form-item label="备注">
|
||
|
|
<el-input v-model="formData.remark" type="textarea" :rows="2" disabled />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<!-- 采购物料信息 -->
|
||
|
|
<el-card>
|
||
|
|
<template #header>
|
||
|
|
<span>采购物料信息</span>
|
||
|
|
</template>
|
||
|
|
<el-table :data="itemList" show-summary border :summary-method="getSummary">
|
||
|
|
<el-table-column label="序号" type="index" width="60px" align="center" />
|
||
|
|
<el-table-column label="物料编码" prop="materialCode" width="120px" align="center" />
|
||
|
|
<el-table-column label="物料名称" prop="materialName" width="150px" align="center" />
|
||
|
|
<el-table-column label="规格型号" prop="spec" width="100px" align="center" />
|
||
|
|
<el-table-column label="单位" prop="unit" width="80px" align="center" />
|
||
|
|
<el-table-column label="采购数量" prop="purQty" width="100px" align="center" />
|
||
|
|
<el-table-column label="要求交货日期" prop="reqDeliveryDate" width="130px" align="center" />
|
||
|
|
<el-table-column label="采购单价" prop="priceTax" width="100px" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<span style="color: #409EFF;">{{ scope.row.priceTax }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="税率(%)" prop="taxRatio" width="80px" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
{{ scope.row.taxRatio }}%
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="采购总价" prop="totalPrice" width="100px" align="center" />
|
||
|
|
<el-table-column label="备注" prop="remark" width="100px" align="center" />
|
||
|
|
</el-table>
|
||
|
|
</el-card>
|
||
|
|
</el-form>
|
||
|
|
<template #footer>
|
||
|
|
<el-button @click="dialogVisible = false">关 闭</el-button>
|
||
|
|
</template>
|
||
|
|
</Dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, reactive } from 'vue'
|
||
|
|
import * as PurOrderApi from '@/api/biz/purorder'
|
||
|
|
import * as PurOrderItemApi from '@/api/biz/purorderitem'
|
||
|
|
|
||
|
|
const message = useMessage()
|
||
|
|
|
||
|
|
const dialogVisible = ref(false)
|
||
|
|
const dialogTitle = ref('采购订单详情')
|
||
|
|
const formLoading = ref(false)
|
||
|
|
|
||
|
|
const formData = reactive({
|
||
|
|
id: undefined,
|
||
|
|
purOrdNo: undefined,
|
||
|
|
purDate: undefined,
|
||
|
|
billType: undefined,
|
||
|
|
purStatus: undefined,
|
||
|
|
supplierName: undefined,
|
||
|
|
purDeptName: undefined,
|
||
|
|
purEmpName: undefined,
|
||
|
|
acceptMeth: undefined,
|
||
|
|
remark: undefined,
|
||
|
|
})
|
||
|
|
|
||
|
|
const itemList = ref<any[]>([])
|
||
|
|
|
||
|
|
// 打开弹窗
|
||
|
|
const open = async (id: number) => {
|
||
|
|
formLoading.value = true
|
||
|
|
dialogVisible.value = true
|
||
|
|
|
||
|
|
try {
|
||
|
|
const data = await PurOrderApi.getPurOrder(id)
|
||
|
|
Object.assign(formData, data)
|
||
|
|
|
||
|
|
// 加载子表数据
|
||
|
|
const itemData = await PurOrderItemApi.getPurOrderItemPage({
|
||
|
|
pageNo: 1,
|
||
|
|
pageSize: 100,
|
||
|
|
purId: id
|
||
|
|
})
|
||
|
|
itemList.value = (itemData.list || []).map((item: any) => ({
|
||
|
|
materialCode: item.materialCode,
|
||
|
|
materialName: item.materialName,
|
||
|
|
spec: item.spec,
|
||
|
|
unit: item.unit,
|
||
|
|
purQty: item.purQty,
|
||
|
|
reqDeliveryDate: item.reqDeliveryDate,
|
||
|
|
priceTax: item.priceTax,
|
||
|
|
taxRatio: item.taxRatio,
|
||
|
|
totalPrice: item.totalPrice,
|
||
|
|
remark: item.remark,
|
||
|
|
}))
|
||
|
|
} catch (error) {
|
||
|
|
message.error('获取详情失败')
|
||
|
|
} finally {
|
||
|
|
formLoading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 合计方法
|
||
|
|
const getSummary = (param: any) => {
|
||
|
|
const { columns, data } = param
|
||
|
|
const sums: any[] = []
|
||
|
|
|
||
|
|
columns.forEach((column: any, index: number) => {
|
||
|
|
if (index === 0) {
|
||
|
|
sums[index] = '合计'
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (['purQty', 'totalPrice'].includes(column.property)) {
|
||
|
|
const values = data.map((item: any) => Number(item[column.property]) || 0)
|
||
|
|
sums[index] = values.reduce((prev: number, curr: number) => prev + curr, 0)
|
||
|
|
} else {
|
||
|
|
sums[index] = ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
return sums
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
open,
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
:deep(.el-table__footer-wrapper td) {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|