<template>
|
<el-dialog v-model="visible" title="生成应收账单" width="1000px" destroy-on-close @closed="handleClosed">
|
<div class="dialog-content">
|
<h3 class="section-title">是否根据以下数据生成应收账单</h3>
|
|
<el-form :model="formData" ref="formRef" label-position="left" label-width="80px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="账单名称" prop="billName"
|
:rules="[{ required: true, message: '请输入账单名称', trigger: 'blur' }]">
|
<el-input v-model="formData.billName" placeholder="请输入账单名称" />
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="账单类型" prop="billType"
|
:rules="[{ required: true, message: '请选择账单类型', trigger: 'change' }]">
|
<el-radio-group v-model="formData.billType">
|
<el-radio :label="0">人民币账单</el-radio>
|
<el-radio :label="1">港币账单</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-descriptions :column="3" border class="mb-6">
|
<el-descriptions-item label="单据数量">
|
{{ statistics.documentCount }}
|
</el-descriptions-item>
|
<el-descriptions-item label="汇率 (港币兑人民币)">
|
{{ statistics.rate }}
|
</el-descriptions-item>
|
<!-- <el-descriptions-item label="汇率 (人民币兑港币)">
|
{{ statistics.rateInverse || '-' }}
|
</el-descriptions-item> -->
|
<el-descriptions-item label="应收金额">
|
<span class="text-bold">{{ statistics.totalReceivableAmount }}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="应收金额 (以人民币计)">
|
<span class="text-primary">{{ statistics.totalAmountRmb }}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="应收金额 (以港币计)">
|
<span class="text-success">{{ statistics.totalAmountHkd }}</span>
|
</el-descriptions-item>
|
</el-descriptions>
|
|
<div class="table-header">
|
<h3 class="section-title">账单明细</h3>
|
</div>
|
<el-table :data="detailList" border stripe height="300px" style="width: 100%">
|
<el-table-column prop="systemNo" label="系统编号" width="120" />
|
<el-table-column prop="sourceSystem" label="来源系统" width="120">
|
<template #default="scope">
|
{{ dictFormat(sys_system, scope.row.sourceSystem) }}
|
</template>
|
</el-table-column><!-- sys_system -->
|
<el-table-column prop="businessSector" label="业务板块" width="120">
|
<template #default="scope">
|
{{ dictFormat(sys_business, scope.row.businessSector) }}
|
</template>
|
</el-table-column>
|
<!-- sys_business -->
|
<el-table-column prop="documentType" label="单据类型" width="120">
|
<template #default="scope">
|
{{ dictFormat(sys_receipts, scope.row.documentType) }}
|
</template>
|
</el-table-column><!-- sys_receipts -->
|
<el-table-column prop="documentNo" label="单据编号" width="150" />
|
<el-table-column prop="customerName" label="客户名称" width="150" />
|
<el-table-column prop="projectName" label="项目名称" width="150" />
|
<el-table-column prop="receivableAmount" label="应收金额" align="right" />
|
<el-table-column prop="currency" label="币制" width="100">
|
<template #default="scope">
|
{{ dictFormat(sys_currency, scope.row.currency) }}
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<template #footer>
|
<el-button @click="cancel">取消</el-button>
|
<el-button type="primary" @click="handleConfirm" >确认生成</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive } from 'vue';
|
import { ElMessage } from 'element-plus';
|
import CustomerSelectDialog from '../CustomerSelectDialog/index';
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
|
const { proxy } = useCurrentInstance()
|
const { sys_system, sys_business, sys_receipts, sys_supplier, sys_whether_type, sys_currency } = proxy.useDict(
|
'sys_system',
|
'sys_business',
|
'sys_receipts',
|
'sys_supplier',
|
'sys_whether_type', 'sys_currency'
|
)
|
const dictFormat = (dict: any, value: any) => {
|
return proxy.selectDictLabel(dict, value);
|
}
|
// 定义接口结构
|
interface StatisticsData {
|
documentCount: number;
|
rate: number;
|
rateInverse?: number; // 转换后的反向汇率
|
totalReceivableAmount: number;
|
totalAmountRmb: number;
|
totalAmountHkd: number;
|
}
|
const formRef = ref();
|
const visible = ref(false);
|
const loading = ref(false);
|
const detailList = ref<any[]>([]);
|
const statistics = ref<Partial<StatisticsData>>({});
|
|
const formData = reactive({
|
billType: 0,
|
billName: ''
|
});
|
|
const emit = defineEmits(['confirm']);
|
|
// 暴露给父组件的打开方法
|
const open = (data: any, selectionList: any[]) => {
|
visible.value = true;
|
if (data) {
|
if (data) {
|
// 假设 data 的结构就是 mainForm 需要的结构
|
Object.assign(statistics.value, data);
|
// 确保后端返回的明细字段名与此一致
|
if (selectionList.length > 0) {
|
detailList.value = [...selectionList];
|
}
|
}
|
|
}
|
};
|
// 3. 确认生成按钮逻辑
|
const handleConfirm = async () => {
|
if (!formRef.value) return;
|
|
// 手动触发表单校验
|
await formRef.value.validate((valid: boolean) => {
|
if (valid) {
|
loading.value = true;
|
emit('confirm', statistics.value, formData);
|
|
// 注意：通常在这里不直接关闭，而是等父组件请求成功后由父组件调用 cancel()
|
} else {
|
console.log('校验失败');
|
}
|
});
|
};
|
|
const handleClosed = () => {
|
// 重置数据
|
detailList.value = [];
|
statistics.value = {};
|
formData.billType = 0;
|
formData.billName = ''; // 记得重置名称
|
if (formRef.value) formRef.value.resetFields(); // 清除校验残余
|
};
|
const cancel = () => {
|
|
visible.value = false;
|
handleClosed()
|
};
|
// 暴露方法
|
defineExpose({ open, cancel });
|
</script>
|
|
<style scoped>
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
margin-bottom: 20px;
|
color: #303133;
|
}
|
|
.mb-6 {
|
margin-bottom: 24px;
|
}
|
|
.table-header {
|
margin-top: 20px;
|
border-top: 1px solid #ebeef5;
|
padding-top: 20px;
|
}
|
|
.text-bold {
|
font-weight: bold;
|
}
|
|
.text-primary {
|
color: #409eff;
|
font-weight: bold;
|
}
|
|
.text-success {
|
color: #67c23a;
|
font-weight: bold;
|
}
|
|
:deep(.el-descriptions__label) {
|
width: 180px;
|
background-color: #f5f7fa;
|
}
|
</style>
|
