<template>
|
<div class="app-container">
|
<div class="search_form">
|
<el-form :model="searchForm" :inline="true">
|
<el-form-item label="供应商名称：">
|
<el-input
|
v-model="searchForm.supplierName"
|
placeholder="请输入"
|
clearable
|
prefix-icon="Search"
|
@change="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="采购合同号：">
|
<el-input
|
v-model="searchForm.purchaseContractNumber"
|
style="width: 240px"
|
placeholder="请输入"
|
clearable
|
prefix-icon="Search"
|
@change="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="销售合同号：">
|
<el-input
|
v-model="searchForm.salesContractNo"
|
placeholder="请输入"
|
clearable
|
prefix-icon="Search"
|
@change="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="项目名称：">
|
<el-input
|
v-model="searchForm.projectName"
|
placeholder="请输入"
|
clearable
|
prefix-icon="Search"
|
@change="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="录入日期：">
|
<el-date-picker
|
v-model="searchForm.entryDate"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
type="daterange"
|
placeholder="请选择"
|
clearable
|
@change="changeDaterange"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery">搜索</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<div class="table_list">
|
<el-table
|
:data="tableData"
|
border
|
v-loading="tableLoading"
|
:expand-row-keys="expandedRowKeys"
|
:row-key="(row) => row.id"
|
show-summary
|
:summary-method="summarizeMainTable"
|
@expand-change="expandChange"
|
height="calc(100vh - 21.5em)"
|
>
|
<el-table-column type="expand">
|
<template #default="props">
|
<el-table
|
:data="props.row.children"
|
border
|
show-summary
|
:summary-method="summarizeChildrenTable"
|
>
|
<el-table-column align="center" label="序号" type="index" width="60" />
|
<el-table-column label="产品大类" prop="productCategory" />
|
<el-table-column label="规格型号" prop="specificationModel" />
|
<el-table-column label="单位" prop="unit" />
|
<el-table-column label="数量" prop="quantity" />
|
<el-table-column label="可用数量" prop="availableQuality" />
|
<el-table-column label="退货数量" prop="returnQuality" />
|
<el-table-column label="税率(%)" prop="taxRate" />
|
<el-table-column label="含税单价(元)" prop="taxInclusiveUnitPrice" :formatter="formattedNumber" />
|
<el-table-column label="含税总价(元)" prop="taxInclusiveTotalPrice" :formatter="formattedNumber" />
|
<el-table-column label="不含税总价(元)" prop="taxExclusiveTotalPrice" :formatter="formattedNumber" />
|
</el-table>
|
</template>
|
</el-table-column>
|
<el-table-column align="center" label="序号" type="index" width="60" />
|
<el-table-column label="采购合同号" prop="purchaseContractNumber" width="160" show-overflow-tooltip />
|
<el-table-column label="销售合同号" prop="salesContractNo" width="160" show-overflow-tooltip />
|
<el-table-column label="供应商名称" prop="supplierName" width="160" show-overflow-tooltip />
|
<el-table-column label="项目名称" prop="projectName" width="320" show-overflow-tooltip />
|
<el-table-column label="收货状态" prop="status" width="100" show-overflow-tooltip>
|
<template #default="scope">
|
<el-tag :type="getReceiptStatusType(scope.row.status)" size="small">
|
{{ receiptStatusText[scope.row.status] || '未知状态' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="审批状态" prop="approvalStatus" width="100" show-overflow-tooltip>
|
<template #default="scope">
|
<el-tag :type="getApprovalStatusType(scope.row.approvalStatus)" size="small">
|
{{ approvalStatusText[scope.row.approvalStatus] || '未知状态' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="签订日期" prop="executionDate" width="100" show-overflow-tooltip />
|
<el-table-column label="付款方式" prop="paymentMethod" width="100" show-overflow-tooltip />
|
<el-table-column label="合同金额(元)" prop="contractAmount" width="200" show-overflow-tooltip :formatter="formattedNumber" />
|
<el-table-column label="录入人" prop="recorderName" width="120" show-overflow-tooltip />
|
<el-table-column label="录入日期" prop="entryDate" width="100" show-overflow-tooltip />
|
<el-table-column label="备注" prop="remarks" width="200" show-overflow-tooltip />
|
<el-table-column fixed="right" label="操作" width="120" align="center">
|
<template #default="scope">
|
<el-button
|
link
|
type="primary"
|
:disabled="isConfirmed(scope.row)"
|
@click="confirmReceipt(scope.row)"
|
>
|
{{ isConfirmed(scope.row) ? '已收货' : '确认收货' }}
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page="page.current"
|
:limit="page.size"
|
@pagination="paginationChange"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { onMounted, reactive, ref } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import dayjs from 'dayjs'
|
import Pagination from '@/components/PIMTable/Pagination.vue'
|
import { productList, purchaseListPage, updateApprovalStatus } from '@/api/procurementManagement/procurementLedger.js'
|
|
const tableData = ref([])
|
const tableLoading = ref(false)
|
const total = ref(0)
|
const expandedRowKeys = ref([])
|
const receiptResultMap = ref({})
|
|
const page = reactive({
|
current: 1,
|
size: 100
|
})
|
|
const searchForm = reactive({
|
supplierName: '',
|
purchaseContractNumber: '',
|
salesContractNo: '',
|
projectName: '',
|
entryDate: [],
|
entryDateStart: undefined,
|
entryDateEnd: undefined
|
})
|
|
const approvalStatusText = {
|
1: '待审核',
|
2: '审批中',
|
3: '审批通过',
|
4: '审批失败'
|
}
|
|
const receiptStatusText = {
|
1: '待收货',
|
2: '收货中',
|
3: '已收货'
|
}
|
|
const getApprovalStatusType = (status) => {
|
const typeMap = {
|
1: 'info',
|
2: 'warning',
|
3: 'success',
|
4: 'danger'
|
}
|
return typeMap[status]
|
}
|
|
const getReceiptStatusType = (status) => {
|
const typeMap = {
|
1: 'info',
|
2: 'warning',
|
3: 'success'
|
}
|
return typeMap[status]
|
}
|
|
const formattedNumber = (_row, _column, cellValue) => {
|
const value = Number(cellValue)
|
return Number.isFinite(value) ? value.toFixed(2) : '0.00'
|
}
|
|
const createSummary = (columns, data, sumFields) => {
|
const sums = []
|
columns.forEach((column, index) => {
|
if (index === 0) {
|
sums[index] = '合计'
|
return
|
}
|
if (!sumFields.includes(column.property)) {
|
sums[index] = ''
|
return
|
}
|
const totalValue = data.reduce((sum, item) => sum + Number(item?.[column.property] || 0), 0)
|
sums[index] = Number.isFinite(totalValue) ? totalValue.toFixed(2) : '0.00'
|
})
|
return sums
|
}
|
|
const summarizeMainTable = ({ columns, data }) => createSummary(columns, data, ['contractAmount'])
|
|
const summarizeChildrenTable = ({ columns, data }) =>
|
createSummary(columns, data, ['quantity', 'availableQuality', 'returnQuality', 'taxInclusiveUnitPrice', 'taxInclusiveTotalPrice', 'taxExclusiveTotalPrice'])
|
|
const isConfirmed = (row) => Number(row?.status) === 3 || Boolean(receiptResultMap.value[row?.id])
|
|
const handleQuery = () => {
|
page.current = 1
|
getList()
|
}
|
|
const changeDaterange = (value) => {
|
if (value) {
|
searchForm.entryDateStart = dayjs(value[0]).format('YYYY-MM-DD')
|
searchForm.entryDateEnd = dayjs(value[1]).format('YYYY-MM-DD')
|
} else {
|
searchForm.entryDateStart = undefined
|
searchForm.entryDateEnd = undefined
|
}
|
handleQuery()
|
}
|
|
const paginationChange = (obj) => {
|
page.current = obj.page
|
page.size = obj.limit
|
getList()
|
}
|
|
const expandChange = async (row, expandedRows) => {
|
if (expandedRows.length > 0) {
|
expandedRowKeys.value = []
|
try {
|
const res = await productList({ salesLedgerId: row.id, type: 2 })
|
const index = tableData.value.findIndex((item) => item.id === row.id)
|
if (index > -1) {
|
tableData.value[index].children = res.data || []
|
expandedRowKeys.value.push(row.id)
|
}
|
} catch (_error) {
|
ElMessage.error('加载产品列表失败')
|
const index = expandedRows.findIndex((item) => item.id === row.id)
|
if (index > -1) {
|
expandedRows.splice(index, 1)
|
}
|
}
|
} else {
|
expandedRowKeys.value = []
|
}
|
}
|
|
const getList = () => {
|
tableLoading.value = true
|
const { entryDate, ...rest } = searchForm
|
purchaseListPage({ ...rest, ...page, approvalStatus: 3 })
|
.then((res) => {
|
tableData.value = (res.data?.records || []).map((record) => ({
|
...record,
|
children: []
|
}))
|
total.value = res.data?.total || 0
|
expandedRowKeys.value = []
|
})
|
.finally(() => {
|
tableLoading.value = false
|
})
|
}
|
|
const confirmReceipt = async (row) => {
|
try {
|
await ElMessageBox.confirm('是否确认收货？', '确认收货', {
|
type: 'warning',
|
confirmButtonText: '确认',
|
cancelButtonText: '取消'
|
})
|
|
await updateApprovalStatus({
|
id: row.id,
|
status: 3
|
})
|
|
receiptResultMap.value[row.id] = true
|
ElMessage.success('确认收货成功')
|
getList()
|
} catch (error) {
|
if (error !== 'cancel' && error !== 'close') {
|
ElMessage.error('确认收货失败')
|
}
|
}
|
}
|
|
onMounted(() => {
|
getList()
|
})
|
</script>
|
