<template>
|
<div class="app-container">
|
<el-form :model="filters" :inline="true">
|
<el-form-item label="供应商:">
|
<el-select v-model="filters.supplierId" placeholder="请选择供应商" clearable style="width: 200px;">
|
<el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="对账期间:">
|
<el-date-picker v-model="filters.startMonth" type="month" placeholder="开始月份" value-format="YYYY-MM" style="width: 140px;" />
|
<span style="margin: 0 10px;">至</span>
|
<el-date-picker v-model="filters.endMonth" type="month" placeholder="结束月份" value-format="YYYY-MM" style="width: 140px;" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="getTableData">搜索</el-button>
|
<el-button @click="resetFilters">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="table_list">
|
<div class="actions">
|
<div>
|
<el-button type="primary" @click="generateStatement" icon="Document">生成对账单</el-button>
|
</div>
|
<div>
|
<el-button @click="handleOut" icon="Download">导出对账单</el-button>
|
</div>
|
</div>
|
<PIMTable
|
rowKey="id"
|
:column="columns"
|
:tableData="dataList"
|
:page="{
|
current: pagination.currentPage,
|
size: pagination.pageSize,
|
total: pagination.total,
|
}"
|
@pagination="changePage"
|
>
|
<template #beginBalance="{ row }">
|
<span :class="row.beginBalance >= 0 ? 'text-success' : 'text-danger'">¥{{ formatMoney(row.beginBalance) }}</span>
|
</template>
|
<template #currentPayable="{ row }">
|
<span class="text-danger">¥{{ formatMoney(row.currentPayable) }}</span>
|
</template>
|
<template #currentPayment="{ row }">
|
<span class="text-success">¥{{ formatMoney(row.currentPayment) }}</span>
|
</template>
|
<template #endBalance="{ row }">
|
<span :class="row.endBalance >= 0 ? 'text-success' : 'text-danger'">¥{{ formatMoney(row.endBalance) }}</span>
|
</template>
|
<template #operation="{ row }">
|
<el-button type="primary" link @click="viewDetail(row)">查看明细</el-button>
|
<el-button type="primary" link @click="printStatement(row)">打印</el-button>
|
</template>
|
</PIMTable>
|
</div>
|
|
<el-dialog title="对账明细" v-model="detailDialogVisible" width="900px" append-to-body>
|
<div class="statement-header">
|
<h3>{{ currentSupplier }} 应付对账单</h3>
|
<p>对账期间: {{ currentPeriod }}</p>
|
</div>
|
<el-table :data="detailData" border style="width: 100%">
|
<el-table-column prop="date" label="日期" width="120" />
|
<el-table-column prop="type" label="类型" width="100">
|
<template #default="{ row }">
|
<el-tag :type="row.type === '入库' ? 'success' : row.type === '退货' ? 'danger' : 'primary'">{{ row.type }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="code" label="单据编号" width="150" />
|
<el-table-column prop="debit" label="借方(付款)" width="120">
|
<template #default="{ row }">
|
<span v-if="row.debit > 0" class="text-success">¥{{ formatMoney(row.debit) }}</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="credit" label="贷方(应付)" width="120">
|
<template #default="{ row }">
|
<span v-if="row.credit > 0" class="text-danger">¥{{ formatMoney(row.credit) }}</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="balance" label="余额" width="120">
|
<template #default="{ row }">
|
<span :class="row.balance >= 0 ? 'text-success' : 'text-danger'">¥{{ formatMoney(row.balance) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="备注" show-overflow-tooltip />
|
</el-table>
|
<template #footer>
|
<el-button @click="detailDialogVisible = false">关闭</el-button>
|
<el-button type="primary" @click="printDetail">打印</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from "vue";
|
import { ElMessage } from "element-plus";
|
|
defineOptions({
|
name: "应付对账",
|
});
|
|
const filters = reactive({
|
supplierId: "",
|
startMonth: "",
|
endMonth: "",
|
});
|
|
const pagination = reactive({
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
});
|
|
const columns = [
|
{ label: "对账单号", prop: "statementCode", width: "150" },
|
{ label: "供应商", prop: "supplierName", width: "180" },
|
{ label: "对账期间", prop: "period", width: "150" },
|
{ label: "期初余额", prop: "beginBalance", slot: "beginBalance" },
|
{ label: "本期应付", prop: "currentPayable", slot: "currentPayable" },
|
{ label: "本期付款", prop: "currentPayment", slot: "currentPayment" },
|
{ label: "期末余额", prop: "endBalance", slot: "endBalance" },
|
{ label: "操作", prop: "operation", slot: "operation", width: "150", fixed: "right" },
|
];
|
|
const dataList = ref([]);
|
const detailDialogVisible = ref(false);
|
const currentSupplier = ref("");
|
const currentPeriod = ref("");
|
const detailData = ref([]);
|
|
const supplierList = [
|
{ id: 1, name: "北京原材料供应商" },
|
{ id: 2, name: "上海电子元器件公司" },
|
{ id: 3, name: "广州包装材料厂" },
|
{ id: 4, name: "深圳五金配件公司" },
|
];
|
|
const mockData = [
|
{ id: 1, statementCode: "DZ202401001", supplierId: 1, supplierName: "北京原材料供应商", period: "2024-01", beginBalance: 20000, currentPayable: 15000, currentPayment: 10000, endBalance: 25000 },
|
{ id: 2, statementCode: "DZ202401002", supplierId: 2, supplierName: "上海电子元器件公司", period: "2024-01", beginBalance: 10000, currentPayable: 20000, currentPayment: 15000, endBalance: 15000 },
|
{ id: 3, statementCode: "DZ202402001", supplierId: 1, supplierName: "北京原材料供应商", period: "2024-02", beginBalance: 25000, currentPayable: 18000, currentPayment: 20000, endBalance: 23000 },
|
];
|
|
const formatMoney = (value) => {
|
if (value === undefined || value === null) return "0.00";
|
return Number(value).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
};
|
|
const getTableData = () => {
|
let result = [...mockData];
|
if (filters.supplierId) {
|
result = result.filter(item => item.supplierId === filters.supplierId);
|
}
|
if (filters.startMonth && filters.endMonth) {
|
result = result.filter(item => item.period >= filters.startMonth && item.period <= filters.endMonth);
|
}
|
pagination.total = result.length;
|
dataList.value = result.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize);
|
};
|
|
const resetFilters = () => {
|
filters.supplierId = "";
|
filters.startMonth = "";
|
filters.endMonth = "";
|
pagination.currentPage = 1;
|
getTableData();
|
};
|
|
const changePage = ({ current, size }) => {
|
pagination.currentPage = current;
|
pagination.pageSize = size;
|
getTableData();
|
};
|
|
const generateStatement = () => {
|
ElMessage.success("对账单生成成功");
|
const newId = mockData.length > 0 ? Math.max(...mockData.map(item => item.id)) + 1 : 1;
|
const supplier = supplierList[Math.floor(Math.random() * supplierList.length)];
|
mockData.unshift({
|
id: newId,
|
statementCode: "DZ" + Date.now(),
|
supplierId: supplier.id,
|
supplierName: supplier.name,
|
period: "2024-03",
|
beginBalance: Math.floor(Math.random() * 20000),
|
currentPayable: Math.floor(Math.random() * 25000),
|
currentPayment: Math.floor(Math.random() * 20000),
|
endBalance: Math.floor(Math.random() * 25000),
|
});
|
getTableData();
|
};
|
|
const viewDetail = (row) => {
|
currentSupplier.value = row.supplierName;
|
currentPeriod.value = row.period;
|
detailData.value = [
|
{ date: row.period + "-01", type: "期初", code: "-", debit: 0, credit: 0, balance: row.beginBalance, remark: "期初余额" },
|
{ date: row.period + "-05", type: "入库", code: "RK2024001", debit: 0, credit: 8000, balance: row.beginBalance + 8000, remark: "" },
|
{ date: row.period + "-10", type: "付款", code: "FK2024001", debit: 5000, credit: 0, balance: row.beginBalance + 3000, remark: "" },
|
{ date: row.period + "-15", type: "入库", code: "RK2024002", credit: 12000, balance: row.beginBalance + 15000, remark: "" },
|
{ date: row.period + "-20", type: "退货", code: "TH2024001", debit: 2000, credit: 0, balance: row.beginBalance + 13000, remark: "" },
|
{ date: row.period + "-25", type: "付款", code: "FK2024002", debit: row.currentPayment - 5000, balance: row.endBalance, remark: "" },
|
];
|
detailDialogVisible.value = true;
|
};
|
|
const printStatement = (row) => {
|
ElMessage.info(`打印对账单: ${row.statementCode}`);
|
};
|
|
const printDetail = () => {
|
ElMessage.info("打印明细");
|
};
|
|
const handleOut = () => {
|
ElMessage.success("导出成功");
|
};
|
|
onMounted(() => {
|
getTableData();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.actions {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 15px;
|
}
|
|
.text-success {
|
color: #67c23a;
|
}
|
|
.text-danger {
|
color: #f56c6c;
|
}
|
|
.statement-header {
|
text-align: center;
|
margin-bottom: 20px;
|
h3 {
|
margin: 0 0 10px 0;
|
}
|
p {
|
color: #909399;
|
margin: 0;
|
}
|
}
|
</style>
|
