<template>
|
<el-dialog v-model="visible" title="账单信息" width="1200px" @close="handleClose" append-to-body>
|
<div class="bill-info-container">
|
<div class="info-header">
|
|
|
<el-descriptions title="账单基本信息" :column="3" border class="mb-5">
|
<el-descriptions-item label="系统编号">{{ detailData.systemNo }}</el-descriptions-item>
|
<el-descriptions-item label="账单名称">{{ detailData.billName }}</el-descriptions-item>
|
<el-descriptions-item label="客户名称">
|
{{ detailData.customerName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="单据数量">{{ detailData.documentCount }}</el-descriptions-item>
|
<el-descriptions-item label="应结算金额"><span class="text-bold">{{ detailData.totalAmount
|
}}</span></el-descriptions-item>
|
<el-descriptions-item label="币制">{{ detailData.currency }}</el-descriptions-item>
|
<el-descriptions-item label="减免金额">{{ detailData.discountAmount }}</el-descriptions-item>
|
<el-descriptions-item label="已收金额">{{ detailData.receivedAmount
|
}}</el-descriptions-item>
|
<el-descriptions-item label="待收金额">
|
<span class="text-danger">{{ detailData.pendingAmount }}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="周期类型">{{ dictFormat(sys_period_type,detailData.periodType) }}</el-descriptions-item>
|
<el-descriptions-item label="业务期间">{{ detailData.businessStartDate }} ~ {{
|
detailData.businessEndDate
|
}}</el-descriptions-item>
|
<el-descriptions-item label="账单周期">{{ detailData.billingStartDate }} ~ {{ detailData.billingEndDate
|
}}</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
|
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" class="bill-form"
|
style="margin-top: 20px">
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="周期类型" prop="periodType">
|
<el-select v-model="formData.periodType" placeholder="请选择周期类型"
|
clearable>
|
<el-option v-for="dict in sys_period_type" :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="businessPeriod">
|
<el-date-picker v-model="formData.businessPeriod" value-format="YYYY-MM-DD" type="daterange" range-separator="→"
|
start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="账单周期" prop="billPeriod">
|
<el-date-picker v-model="formData.billPeriod" value-format="YYYY-MM-DD" type="daterange" range-separator="→"
|
start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="账单生成日期" prop="billGenerateDate">
|
<el-date-picker v-model="formData.billGenerateDate" value-format="YYYY-MM-DD" type="date" placeholder="请选择日期"
|
style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="账单发送日期" prop="billSendDate">
|
<el-date-picker v-model="formData.billSendDate" value-format="YYYY-MM-DD" type="date" placeholder="请选择日期"
|
style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="账单到期日期" prop="billDueDate">
|
<el-date-picker v-model="formData.billDueDate" value-format="YYYY-MM-DD" type="date" placeholder="请选择日期"
|
style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
|
<template #footer>
|
<div class="dialog-footer" style="text-align: center">
|
<el-button @click="visible = false">取 消</el-button>
|
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive } from 'vue';
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
const { proxy } = useCurrentInstance();
|
// 获取所需的字典
|
const { sys_period_type } = proxy.useDict(
|
'sys_period_type'
|
);
|
const visible = ref(false);
|
const formRef = ref();
|
const detailData = ref<any>({}); // 存放顶部只读数据
|
|
const formData = reactive({
|
periodType: '',
|
businessPeriod: [],
|
billPeriod: [],
|
billGenerateDate: '',
|
billSendDate: '',
|
billDueDate: ''
|
});
|
const dictFormat = (dict: any, value: any) => {
|
return proxy.selectDictLabel(dict, value);
|
};
|
const rules = {
|
periodType: [{ required: true, message: '请选择周期类型', trigger: 'change' }],
|
businessPeriod: [{ required: true, message: '请选择业务期间', trigger: 'change' }],
|
billPeriod: [{ required: true, message: '请选择账单周期', trigger: 'change' }],
|
billGenerateDate: [{ required: true, message: '请选择账单生成日期', trigger: 'change' }],
|
billSendDate: [{ required: true, message: '请选择账单发送日期', trigger: 'change' }],
|
billDueDate: [{ required: true, message: '请选择账单到期日期', trigger: 'change' }],
|
};
|
|
const openDialog = (row: any) => {
|
visible.value = true;
|
if (row) {
|
// 顶部只读展示
|
detailData.value = row;
|
|
// 表单回显初始化
|
formData.periodType = row.periodType;
|
formData.billGenerateDate = row.billGenerateDate;
|
formData.billSendDate = row.billSendDate;
|
formData.billDueDate = row.billDueDate;
|
|
// 核心：将后端字段合成前端范围数组
|
if (row.businessStartDate && row.businessEndDate) {
|
formData.businessPeriod = [row.businessStartDate, row.businessEndDate];
|
} else {
|
formData.businessPeriod = [];
|
}
|
|
if (row.billingStartDate && row.billingEndDate) {
|
formData.billPeriod = [row.billingStartDate, row.billingEndDate];
|
} else {
|
formData.billPeriod = [];
|
}
|
}
|
};
|
|
const handleClose = () => {
|
formRef.value?.resetFields();
|
visible.value = false;
|
};
|
|
const emit = defineEmits(['submit']);
|
const handleSubmit = () => {
|
formRef.value?.validate((valid: boolean) => {
|
if (valid) {
|
// 1. 浅拷贝表单数据，避免直接污染响应式对象
|
const params = { ...formData };
|
|
// 2. 注入 ID (从只读数据中获取)
|
if (detailData.value && detailData.value.id) {
|
params.id = detailData.value.id;
|
}
|
|
// 3. 拆解业务期间 [开始, 结束] -> 对应字段
|
if (formData.businessPeriod && formData.businessPeriod.length === 2) {
|
params.businessStartDate = formData.businessPeriod[0];
|
params.businessEndDate = formData.businessPeriod[1];
|
}
|
|
// 4. 拆解账单周期 [开始, 结束] -> 对应字段
|
if (formData.billPeriod && formData.billPeriod.length === 2) {
|
params.billingStartDate = formData.billPeriod[0];
|
params.billingEndDate = formData.billPeriod[1];
|
}
|
params.systemNo= detailData.systemNo
|
// 5. 抛出最终数据
|
emit('submit', params);
|
}
|
});
|
};
|
|
defineExpose({ openDialog, handleClose });
|
</script>
|
|
<style scoped>
|
:deep(.el-descriptions__label) {
|
width: 120px;
|
background-color: #f9f9f9;
|
}
|
|
.bill-form :deep(.el-form-item__label) {
|
font-weight: bold;
|
}
|
|
::v-deep .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
|
border: var(--el-descriptions-table-border);
|
padding: 8px 11px;
|
width: 200px;
|
}
|
</style>
|
