<template>
|
<div class="app-container">
|
<div class="search_form"
|
style="margin-bottom: 20px;">
|
<span class="search_title">合作商名称：</span>
|
<el-input v-model="searchForm.partnerName"
|
style="width: 240px"
|
placeholder="输入合作商名称"
|
@change="handleQuery"
|
clearable
|
:prefix-icon="Search" />
|
<el-button type="primary"
|
@click="handleQuery"
|
style="margin-left: 10px">搜索</el-button>
|
</div>
|
<el-row :gutter="20">
|
<el-col :span="14">
|
<div class="table_list">
|
<el-table border
|
v-loading="tableLoading"
|
:data="tableData"
|
highlight-current-row
|
style="width: 100%"
|
height="calc(100vh - 18.5em)"
|
@row-click="rowClick">
|
<el-table-column align="center"
|
label="序号"
|
type="index"
|
width="60" />
|
<el-table-column label="合作商名称"
|
prop="partnerName"
|
min-width="180"
|
show-overflow-tooltip />
|
<el-table-column label="合同金额(元)"
|
prop="contractAmounts"
|
min-width="130">
|
<template #default="scope">
|
{{ formatAmount(scope.row.contractAmounts) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="付款金额(元)"
|
prop="paidAmount"
|
min-width="130">
|
<template #default="scope">
|
{{ formatAmount(scope.row.paidAmount) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="应付金额(元)"
|
prop="payableAmount"
|
min-width="130">
|
<template #default="scope">
|
<el-text type="danger">{{ formatAmount(scope.row.payableAmount) }}</el-text>
|
</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>
|
</el-col>
|
<el-col :span="10">
|
<div class="table_list">
|
<div class="detail-tip">
|
应付余额 = 已确认/已完成的委外订单金额 − 已付款；明细每行的「已付款」为合作商级合计，非订单级。
|
</div>
|
<el-table border
|
v-loading="detailLoading"
|
:data="detailTableData"
|
style="width: 100%"
|
height="calc(100vh - 21em)">
|
<el-table-column align="center"
|
label="序号"
|
type="index"
|
width="60" />
|
<el-table-column label="委外订单号"
|
prop="orderNo"
|
min-width="150"
|
show-overflow-tooltip />
|
<el-table-column label="申请日期"
|
prop="applyDate"
|
min-width="110"
|
show-overflow-tooltip />
|
<el-table-column label="订单金额(元)"
|
prop="contractAmount"
|
min-width="120">
|
<template #default="scope">
|
{{ formatAmount(scope.row.contractAmount) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="状态"
|
prop="status"
|
align="center"
|
width="90">
|
<template #default="scope">
|
<el-tag :type="statusTagType(scope.row.status)"
|
size="small">
|
{{ statusLabel(scope.row.status) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="合作商已付款(元)"
|
prop="paidAmount"
|
min-width="140">
|
<template #default="scope">
|
{{ formatAmount(scope.row.paidAmount) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="应付金额(元)"
|
prop="payableAmount"
|
min-width="120">
|
<template #default="scope">
|
<el-text type="danger">{{ formatAmount(scope.row.payableAmount) }}</el-text>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right"
|
label="操作"
|
width="110"
|
align="center">
|
<template #default="scope">
|
<el-button link
|
type="primary"
|
@click.stop="openPaymentDialog(scope.row)">新增付款</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-col>
|
</el-row>
|
<PaymentRecordDialog v-model:visible="paymentDialogVisible"
|
title="合作商付款流水"
|
:party-type="3"
|
:party-id="paymentPartyId"
|
:party-name="paymentPartyName"
|
:direction="1"
|
@changed="refreshAll" />
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, toRefs } from "vue";
|
import { Search } from "@element-plus/icons-vue";
|
import pagination from "@/components/PIMTable/Pagination.vue";
|
import PaymentRecordDialog from "@/components/PaymentRecordDialog/index.vue";
|
import {
|
partnerTransactions,
|
partnerTransactionsDetails,
|
} from "@/api/outsourcing/report.js";
|
|
const tableData = ref([]);
|
const detailTableData = ref([]);
|
const tableLoading = ref(false);
|
const detailLoading = ref(false);
|
const total = ref(0);
|
const page = reactive({ current: 1, size: 10 });
|
const currentPartnerId = ref("");
|
|
const paymentDialogVisible = ref(false);
|
const paymentPartyId = ref("");
|
const paymentPartyName = ref("");
|
|
const statusLabelMap = { 0: "草稿", 1: "已确认", 2: "已完成", 3: "已作废" };
|
const statusTagMap = { 0: "info", 1: "primary", 2: "success", 3: "danger" };
|
const statusLabel = status => statusLabelMap[status] ?? status;
|
const statusTagType = status => statusTagMap[status] || "info";
|
|
const data = reactive({
|
searchForm: {
|
partnerName: "",
|
},
|
});
|
const { searchForm } = toRefs(data);
|
|
const formatAmount = value => {
|
const num = Number(value);
|
return Number.isFinite(num) ? num.toFixed(2) : "0.00";
|
};
|
|
const getList = () => {
|
tableLoading.value = true;
|
partnerTransactions({
|
pageNum: page.current,
|
pageSize: page.size,
|
...searchForm.value,
|
})
|
.then(res => {
|
tableLoading.value = false;
|
tableData.value = res.data?.records || [];
|
total.value = res.data?.total || 0;
|
})
|
.catch(() => {
|
tableLoading.value = false;
|
});
|
};
|
|
const getDetailList = partnerId => {
|
if (!partnerId) {
|
detailTableData.value = [];
|
return;
|
}
|
detailLoading.value = true;
|
partnerTransactionsDetails(partnerId)
|
.then(res => {
|
detailLoading.value = false;
|
detailTableData.value = res.data?.records || [];
|
})
|
.catch(() => {
|
detailLoading.value = false;
|
});
|
};
|
|
const handleQuery = () => {
|
page.current = 1;
|
getList();
|
};
|
|
const paginationChange = obj => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
const rowClick = row => {
|
currentPartnerId.value = row.partnerId;
|
getDetailList(row.partnerId);
|
};
|
|
const openPaymentDialog = row => {
|
paymentPartyId.value = row.partnerId;
|
paymentPartyName.value = row.partnerName || "";
|
paymentDialogVisible.value = true;
|
};
|
|
const refreshAll = () => {
|
getList();
|
getDetailList(currentPartnerId.value);
|
};
|
|
getList();
|
</script>
|
|
<style scoped lang="scss">
|
.detail-tip {
|
margin-bottom: 10px;
|
padding: 8px 12px;
|
font-size: 12px;
|
line-height: 1.6;
|
color: #909399;
|
background: rgba(64, 158, 255, 0.08);
|
border-left: 3px solid #409eff;
|
border-radius: 3px;
|
}
|
</style>
|
