| | |
| | | <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> |
| | |
| | | </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)">查看 |
| | |
| | | <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', |
| | |
| | | const props = defineProps<{ |
| | | type: 'receivable' | 'payable' |
| | | }>(); |
| | | console.log(props.type); |
| | | |
| | | const visible = ref(false); |
| | | const loading = ref(false); |
| | |
| | | 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; |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | /** 打开弹窗主入口 */ |
| | |
| | | |
| | | /** 获取账单顶部详情信息 */ |
| | | 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> |