sen
2026-01-14 d88f32029be10190a95dce8958398e806c19b26a
ui/admin-ui3/src/components/NestedDetailDialog/index.vue
@@ -6,10 +6,10 @@
                <el-descriptions title="账单信息" :column="3" border class="mb-5">
                    <el-descriptions-item label="系统编号">{{ billInfo.systemNo }}</el-descriptions-item>
                    <el-descriptions-item label="账单名称">{{ billInfo.billName }}</el-descriptions-item>
                    <el-descriptions-item :label="type == 'receivable' ? '客户名称' : '供应商名称'">
                        {{ billInfo.customerName }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="type == 'receivable'" label="客户名称">{{ billInfo.customerName
                        }}</el-descriptions-item>
                    <el-descriptions-item v-if="type == 'payable'" label="供应商名称">{{ billInfo.supplierName
                        }}</el-descriptions-item>
                    <el-descriptions-item label="单据数量">{{ billInfo.documentCount }}</el-descriptions-item>
                    <el-descriptions-item label="应结算金额">
                        <span class="text-bold">{{ billInfo.totalAmount }}</span>
@@ -63,11 +63,23 @@
                        </template>
                    </el-table-column>
                    <el-table-column prop="documentNo" label="单据编号" width="160" align="center" />
                    <el-table-column prop="customerName" :label="type === 'receivable' ? '客户名称' : '供应商名称'"
                        min-width="150" align="center" />
                    <el-table-column prop="projectName" label="项目名称" align="center" />
                    <el-table-column prop="receivableAmount" :label="type === 'receivable' ? '应收金额' : '应付金额'"
                    <el-table-column v-if="type == 'receivable'" prop="customerName" label="客户名称" min-width="150"
                        align="center" />
                    <el-table-column v-if="type == 'payable'" prop="supplierName" label="供应商名称" min-width="150"
                        align="center" />
                    <el-table-column prop="projectName" label="项目名称" align="center" />
                    <el-table-column v-if="type == 'receivable'" label="'应收金额" align="center">
                        <template #default="scope">
                            <div v-html="formatAmountStr(scope.row.receivableAmountStr)"></div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="type == 'payable'" label="应付金额" align="center">
                        <template #default="scope">
                            <div v-html="formatAmountStr(scope.row.payableAmountStr)"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button type="text" @click="handleExamine(scope.row)">查看
@@ -93,12 +105,15 @@
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { getReceivableBillManagement } from "@/api/cwgl/receivableBillManagement";
import { listReceivableFeeManagement } from "@/api/cwgl/receivableFeeManagement";
import { listReceivableFeeManagement, getReceivableFeeManagement } from "@/api/cwgl/receivableFeeManagement";
import useCurrentInstance from "@/utils/useCurrentInstance";
import DetailModal from '@/components/DetailModal/index.vue';
import {
    getReceivableFeeManagement,
} from "@/api/cwgl/receivableFeeManagement";
    listPayableFeeManagement, getPayableFeeManagement
} from "@/api/cwgl/payableFeeManagement";
import { getPayableBillManagement, } from "@/api/cwgl/payableBillManagement";
const { proxy } = useCurrentInstance()
const { sys_system, sys_business, sys_receipts, sys_supplier, sys_whether_type, sys_currency } = proxy.useDict(
    'sys_system',
@@ -113,6 +128,7 @@
const props = defineProps<{
    type: 'receivable' | 'payable'
}>();
console.log(props.type);
const visible = ref(false);
const loading = ref(false);
@@ -135,14 +151,27 @@
const getDataList = () => {
    if (!queryParams.relatedBillNo) return;
    loading.value = true;
    listReceivableFeeManagement(queryParams).then(res => {
        if (res.code === 200) {
            mainTableData.value = res.rows || [];
            pageF.total = res.total || 0;
        }
    }).finally(() => {
        loading.value = false;
    });
    if (props.type === 'receivable') {
        listReceivableFeeManagement(queryParams).then(res => {
            if (res.code === 200) {
                mainTableData.value = res.rows || [];
                pageF.total = res.total || 0;
            }
        }).finally(() => {
            loading.value = false;
        });
    } else {
        listPayableFeeManagement(queryParams).then(res => {
            if (res.code === 200) {
                mainTableData.value = res.rows || [];
                console.log(mainTableData.value);
                pageF.total = res.total || 0;
            }
        }).finally(() => {
            loading.value = false;
        });
    }
};
/** 打开弹窗主入口 */
@@ -158,24 +187,56 @@
/** 获取账单顶部详情信息 */
const fetchBillDetail = (id: string | number) => {
    getReceivableBillManagement(id).then((response) => {
        if (response.code == 200) {
            billInfo.value = response.data;
            queryParams.relatedBillNo = response.data.systemNo;
            visible.value = true;
            // 详情拿到后,加载表格
            getDataList();
        }
    });
    if (props.type === 'receivable') {
        getReceivableBillManagement(id).then((response) => {
            if (response.code == 200 && response.data) {
                billInfo.value = response.data;
                queryParams.relatedBillNo = response.data.systemNo;
                visible.value = true;
                // 详情拿到后,加载表格
                getDataList();
            }
        });
    } else {
        getPayableBillManagement(id).then((response) => {
            if (response.code == 200 && response.data) {
                billInfo.value = response.data;
                queryParams.relatedBillNo = response.data.systemNo;
                visible.value = true;
                // 详情拿到后,加载表格
                getDataList();
            }
        });
    }
};
const detailModalRef = ref(null);
const handleExamine = (row) => {
    getReceivableFeeManagement(row.id).then((res) => {
        if (res.code === 200) {
            detailModalRef.value.open(res.data);
        }
    });
    if (props.type === 'receivable') {
        getReceivableFeeManagement(row.id).then((res) => {
            if (res.code === 200) {
                detailModalRef.value.open(res.data);
            }
        });
    } else {
        getPayableFeeManagement(row.id).then((res) => {
            if (res.code === 200) {
                detailModalRef.value.open(res.data);
            }
        });
    }
};
/**
 * 将金额字符串中的“币”后面加上换行
 *
 */
const formatAmountStr = (str: string) => {
    if (!str) return '';
    // 正则解释:找到“港币”或“人民币”,并在其后加上换行符
    // 如果币种较多,可以统一匹配 "币 "(带空格的币)
    return str.replace(/(港币|人民币)\s+/g, '$1<br/>');
};
defineExpose({ open });
</script>