<template>
|
<basicContainer>
|
<div class="account-analysis-detail">
|
<avue-crud ref="crudRef" v-model="form" v-model:search="searchForm" :page="page" :option="option"
|
:data="tableData" :table-loading="loading" :row-class-name="rowClassName" @on-load="onLoad"
|
@search-change="searchChange" @search-reset="searchReset" @refresh-change="refreshChange"
|
@current-change="currentChange" @size-change="sizeChange">
|
<template #businessType-form="{ row, disabled }">
|
<template v-if="disabled">
|
<span>{{ dictFormat(sys_account_business, row?.businessType || form?.businessType) }}</span>
|
</template>
|
</template>
|
<template #menu-left>
|
<el-button type="warning" icon="Download"
|
style="background-color: #eb9e44; border-color: #eb9e44; color: #fff;" @click="handleExport">导出</el-button>
|
<el-button icon="Back" @click="goReturn">返回</el-button>
|
</template>
|
|
<template #menu="{ row }">
|
<el-button type="primary" link underline="never" icon="Edit"
|
v-hasPermi="['cwgl:receivableBillManagement:edit']" @click="handleEditOpen(row)">编辑</el-button>
|
|
<el-button type="primary" link underline="never" icon="View" @click="crudRef.rowView(row)">查看</el-button>
|
|
<el-link type="primary" icon="el-icon-document" v-hasPermi="['cwgl:receivableBillManagement:log']"
|
underline="never" @click="handleFlow(row)" style="margin-left: 12px;">日志</el-link>
|
</template>
|
</avue-crud>
|
</div>
|
|
<OperationLogModal ref="logModalRef" />
|
|
<!-- 编辑弹窗（直接写在当前页面，无需拆分组件） -->
|
<el-dialog v-model="editDialogVisible" title="编辑账款分析信息" width="900px" destroy-on-close
|
@closed="handleEditDialogClosed">
|
<el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="120px" class="edit-form">
|
<el-row :gutter="20">
|
<!-- 第一行 -->
|
<el-col :span="8">
|
<el-form-item label="结算种类" prop="businessType">
|
<el-select v-model="editForm.businessType" placeholder="请选择结算种类" style="width: 100%">
|
<el-option v-for="dict in sys_account_business" :key="dict.value" :label="dict.label"
|
:value="dict.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="结算期" prop="settlementPeriod">
|
<el-input v-model="editForm.settlementPeriod" placeholder="请输入结算期" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="NC账面结算日期" prop="ncSettlementDate">
|
<el-date-picker v-model="editForm.ncSettlementDate" type="date" placeholder="请选择日期" format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<!-- 第二行 -->
|
<el-col :span="8">
|
<el-form-item label="NC账面结算金额" prop="ncSettlementAmount">
|
<el-input-number v-model="editForm.ncSettlementAmount" :precision="2" :min="0" placeholder="请输入金额"
|
style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="16">
|
<el-form-item label="备注" prop="accountRemark">
|
<el-input v-model="editForm.accountRemark" type="textarea" :rows="2" placeholder="请输入备注"
|
style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<!-- 第三行 -->
|
<el-col :span="8">
|
<el-form-item label="预期利息" prop="overdueInterest">
|
<el-input-number v-model="editForm.overdueInterest" :precision="2" :min="0" placeholder="请输入预期利息"
|
style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<template #footer>
|
<el-button @click="editDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleEditSubmit">确定</el-button>
|
</template>
|
</el-dialog>
|
</basicContainer>
|
</template>
|
|
<script setup name="AccountAnalysisDetail" lang="ts">
|
import { ref, reactive, computed, watch, nextTick } from 'vue';
|
import { useRoute } from 'vue-router';
|
import router from "@/router";
|
import { agingAnalysisList, listAccountLog, updateAccountAnalysis, receivableBillManagementAccountAnalysis } from "@/api/cwgl/analysisManagement";
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import OperationLogModal from '@/components/OperationLogModal/index.vue';
|
import { download } from "@/utils/request";
|
const { proxy } = useCurrentInstance();
|
const { sys_account_business } = proxy.useDict('sys_account_business');
|
|
/**
|
* 字典公共转换函数
|
*/
|
const dictFormat = (dict: any, value: any) => {
|
const dictData = Array.isArray(dict) ? dict : (dict?.value || []);
|
if (value === undefined || value === null || value === '') return '';
|
return proxy.selectDictLabel(dictData, value);
|
};
|
|
const route = useRoute();
|
const crudRef = ref();
|
const loading = ref(false);
|
const tableData = ref<any[]>([]);
|
const form = ref({});
|
const searchForm = ref<any>({});
|
const highlightSystemNo = ref('');
|
const logModalRef = ref<any>(null);
|
|
// --- 编辑弹窗相关（核心：合并到当前页面）---
|
const editDialogVisible = ref(false); // 弹窗显示状态
|
const editFormRef = ref(); // 表单ref
|
// 编辑表单数据
|
const editForm = reactive({
|
id: '', // 行ID
|
businessType: '', // 结算种类
|
settlementPeriod: '', // 结算期
|
ncSettlementDate: '', // NC账面结算日期
|
ncSettlementAmount: 0, // NC账面结算金额
|
accountRemark: '', // 备注
|
overdueInterest: 0 // 预期利息
|
});
|
// 表单校验规则
|
const editRules = reactive({
|
// businessType: [{ required: true, message: '请选择结算种类', trigger: 'change' }],
|
// settlementPeriod: [{ required: true, message: '请输入结算期', trigger: 'blur' }],
|
// ncSettlementDate: [{ required: true, message: '请选择NC账面结算日期', trigger: 'change' }],
|
// ncSettlementAmount: [{ required: true, message: '请输入NC账面结算金额', trigger: 'blur' }]
|
});
|
|
// 分页配置
|
const page = reactive({
|
pageSize: 10,
|
currentPage: 1,
|
total: 0
|
});
|
|
// --- Avue 配置 ---
|
const option = computed(() => ({
|
// height: 'auto',
|
// calcHeight: 30,
|
searchShow: true,
|
searchMenuSpan: 6,
|
border: true,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
viewBtn: false,
|
dicCache: true,
|
menuWidth: 220,
|
labelWidth: 150,
|
page: true,
|
pagination: true,
|
searchLabelWidth: 120,
|
showSummary: true,
|
// 强制指定合计文案（如果 method 返回空，它作为保底）
|
sumText: '合计',
|
sumColumnList: [
|
{ name: 'repaymentAmount', type: 'sum' },
|
{ name: 'ncSettlementAmount', type: 'sum' },
|
{ name: 'unInvoicedAmount', type: 'sum' }
|
],
|
column: [
|
{ label: '结算单位', prop: 'customerName', minWidth: 180, fixed: true, overHidden: true },
|
{
|
label: '结算种类',
|
prop: 'businessType',
|
type: 'select',
|
dataType: 'string',
|
dicUrl: '/system/dict/data/type/sys_account_business',
|
display: true,
|
detail: true,
|
formatter: (row: any, value: any) => dictFormat(sys_account_business, value)
|
},
|
{ label: '账单系统编号', prop: 'systemNo', search: true, width: 180 },
|
{ label: '结算期', prop: 'settlementPeriod', width: 200 },
|
{
|
label: 'NC账面结算',
|
children: [
|
{ label: '日期', prop: 'ncSettlementDate', width: 110 },
|
{ label: '结算金额', prop: 'ncSettlementAmount', width: 110 },
|
]
|
},
|
{
|
label: '还款',
|
children: [
|
{ label: '还款最后期限', prop: 'billDueDate', width: 120 },
|
{ label: '还款日', prop: 'latestRepaymentDate', width: 110 },
|
{ label: '还款金额', prop: 'latestRepaymentAmount', width: 110 },
|
// { label: '最新还款日期', prop: 'latestRepaymentDate', width: 110 },
|
// { label: '最新还款金额', prop: 'latestRepaymentAmount', width: 110 },
|
|
]
|
},
|
{
|
label: '发票跟踪',
|
children: [
|
{ label: '开票日期', prop: 'latestInvoiceTime', width: 110 },
|
{ label: '开票金额', prop: 'totalInvoiceAmount', width: 110 },
|
{ label: '未开票金额', prop: 'unInvoicedAmount', width: 110 },
|
]
|
},
|
{ label: '备注', prop: 'accountRemark', width: 120 },
|
{ label: '尚欠金额', prop: 'pendingAmount', width: 100 },
|
{ label: '逾期天数', prop: 'overdueDays', width: 90 },
|
{ label: '逾期利息', prop: 'overdueInterest', width: 100 },
|
]
|
}));
|
|
// --- 逻辑处理 ---
|
const initSearchFromRoute = () => {
|
const routeCustomerName = route.query.customerName;
|
if (routeCustomerName) {
|
searchForm.value.customerName = routeCustomerName;
|
}
|
};
|
initSearchFromRoute();
|
|
watch(() => route.query, (newQuery) => {
|
if (route.name === 'AccountAnalysisDetail') {
|
searchForm.value = {};
|
if (newQuery.customerName) {
|
searchForm.value.customerName = newQuery.customerName;
|
}
|
page.currentPage = 1;
|
onLoad(page);
|
}
|
}, { deep: true });
|
|
const onLoad = (pageParams: any, searchParams = {}) => {
|
loading.value = true;
|
const query = {
|
pageNum: pageParams.currentPage || page.currentPage,
|
pageSize: pageParams.pageSize || page.pageSize,
|
...searchForm.value,
|
...searchParams
|
};
|
|
receivableBillManagementAccountAnalysis(query).then(res => {
|
tableData.value = res.rows || [];
|
page.total = res.total || 0;
|
loading.value = false;
|
}).catch(() => {
|
loading.value = false;
|
});
|
};
|
|
const searchChange = (params: any, done: () => void) => {
|
// if (params.systemNo) {
|
// highlightSystemNo.value = params.systemNo;
|
// const index = tableData.value.findIndex(item => item.systemNo === params.systemNo);
|
|
// if (index !== -1) {
|
// nextTick(() => {
|
// const target = document.querySelector('.highlight-row');
|
// if (target) {
|
// target.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
// }
|
// });
|
// done();
|
// return;
|
// } else {
|
// proxy.$message.warning('当前页未找到该编号，正在尝试全局搜索...');
|
// }
|
// }
|
|
page.currentPage = 1;
|
highlightSystemNo.value = '';
|
onLoad(page, params);
|
done();
|
};
|
|
const searchReset = () => {
|
highlightSystemNo.value = '';
|
searchForm.value = {};
|
if (route.query.customerName) {
|
searchForm.value.customerName = route.query.customerName;
|
}
|
page.currentPage = 1;
|
onLoad(page);
|
};
|
|
const currentChange = (val: number) => {
|
page.currentPage = val;
|
};
|
|
const sizeChange = (val: number) => {
|
page.pageSize = val;
|
};
|
|
const handleFlow = (row: any) => {
|
listAccountLog({ headId: row.id }).then((res) => {
|
if (res.code == 200) {
|
logModalRef.value.open(res.rows, 'payable');
|
}
|
});
|
};
|
|
const refreshChange = () => onLoad(page);
|
|
const rowClassName = ({ row }: { row: any }) => {
|
// return (highlightSystemNo.value && row.systemNo === highlightSystemNo.value) ? 'highlight-row' : '';
|
};
|
|
const goReturn = () => router.push('/basic/analysisManagement');
|
|
// --- 编辑弹窗核心方法 ---
|
// 打开编辑弹窗（回显数据）
|
const handleEditOpen = (row: any) => {
|
editDialogVisible.value = true;
|
// 回显行数据到表单
|
Object.assign(editForm, {
|
id: row.id,
|
businessType: row.businessType,
|
settlementPeriod: row.settlementPeriod,
|
ncSettlementDate: row.ncSettlementDate,
|
ncSettlementAmount: row.ncSettlementAmount || 0,
|
accountRemark: row.accountRemark,
|
overdueInterest: row.overdueInterest || 0
|
});
|
// 清空表单校验
|
nextTick(() => {
|
editFormRef.value?.clearValidate();
|
});
|
};
|
|
// 编辑表单提交
|
const handleEditSubmit = async () => {
|
if (!editFormRef.value) return;
|
try {
|
// 表单校验
|
await editFormRef.value.validate();
|
loading.value = true;
|
// 调用更新接口
|
const res = await updateAccountAnalysis(editForm);
|
if (res.code === 200) {
|
proxy.$message.success('编辑成功');
|
editDialogVisible.value = false;
|
// 刷新表格数据
|
onLoad(page);
|
} else {
|
proxy.$message.error(res.msg || '编辑失败');
|
}
|
} catch (err) {
|
proxy.$message.warning('请完善必填项');
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
// 弹窗关闭重置
|
const handleEditDialogClosed = () => {
|
// 清空表单数据
|
Object.assign(editForm, {
|
id: '',
|
businessType: '',
|
settlementPeriod: '',
|
ncSettlementDate: '',
|
ncSettlementAmount: 0,
|
accountRemark: '',
|
overdueInterest: 0
|
});
|
// 重置表单校验
|
editFormRef.value?.resetFields();
|
};
|
/* 导出按钮 */
|
function handleExport() {
|
download(
|
'/cwgl/receivableBillManagement/accountAnalysis/export',
|
{
|
...form.value,
|
},
|
`report_${new Date().getTime()}.xlsx`
|
)
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.account-analysis-detail {
|
width: 100%;
|
}
|
|
/* 搜索高亮样式 */
|
:deep(.el-table .highlight-row) {
|
background-color: #fff9c4 !important;
|
transition: background-color 0.3s;
|
|
td.el-table__cell {
|
background-color: #fff9c4 !important;
|
}
|
}
|
|
/* 增强多级表头视觉效果 */
|
:deep(.el-table__header-wrapper) {
|
th {
|
background-color: #f8f9fa !important;
|
color: #333;
|
font-weight: bold;
|
text-align: center !important;
|
}
|
}
|
|
/* 合计行样式 */
|
:deep(.el-table__footer-wrapper) {
|
td {
|
color: #f56c6c;
|
font-weight: bold;
|
background-color: #fffdfd;
|
}
|
}
|
|
/* 编辑弹窗表单样式 */
|
.edit-form {
|
padding: 10px 20px;
|
}
|
|
/* 强制在合计行的第一个非复选框单元格（责任人列）显示文案 */
|
:deep(.el-table__footer-wrapper .el-table__cell.avue-crud__color .cell),
|
:deep(.el-table__footer-wrapper .el-table__cell:nth-child(2) .cell) {
|
visibility: visible !important;
|
}
|
|
/* 如果是多选框列导致的遮挡，通过伪元素强行在第二列注入 */
|
:deep(.el-table__footer-wrapper tr td:nth-child(2) .cell::before) {
|
content: '合计';
|
font-weight: bold;
|
color: #333;
|
}
|
|
|
</style>
|
