<template>
|
<basicContainer>
|
<avue-crud :option="option" :table-loading="pageF.loading" :data="tableData" :page="page"
|
:permission="permissionList" :before-open="beforeOpen" v-model="form" ref="crudRef" @row-update="rowUpdate"
|
@row-save="rowSave" @refresh-change="refreshChange" @row-del="rowDel" @search-change="searchChange"
|
@search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
|
@size-change="sizeChange" @on-load="onLoad">
|
<template #menu-left>
|
<!-- <el-button type="success" icon="Edit" :disabled="pageF.single"
|
v-hasPermi="['cwgl:receivableBillManagement:edit']" @click="handleUpdate">修改
|
</el-button>
|
<el-button type="danger" icon="Delete" :disabled="pageF.multiple" @click="handleDelete"
|
v-hasPermi="['cwgl:receivableBillManagement:remove']">删除
|
</el-button> -->
|
<el-button type="warning" plain icon="Download" @click="handleExport"
|
v-hasPermi="['cwgl:receivableBillManagement:export']">导出1
|
</el-button>
|
</template>
|
<template #menu="{ size, row, index }">
|
<el-link class="link-btn" type="primary" :underline="false" plain :size="size" @click="handleFy(row)"
|
v-hasPermi="['cwgl:receivableBillManagement:receivableBillManagement']"> 编辑
|
</el-link>
|
<el-link class="link-btn" type="primary" v-if="row.status == 0 || row.status == 1" :underline="false" plain :size="size" @click="handleSettle(row)"
|
v-hasPermi="['cwgl:receivableBillManagement:receivableBillSettlementDetail']"> 结算
|
</el-link>
|
<el-link class="link-btn" type="primary" v-if="row.status == 0 || row.status == 1" :underline="false" plain :size="size" @click="makeInvoice(row)"
|
v-hasPermi="['cwgl:receivableBillManagement:invoice']"> 开票
|
</el-link>
|
<el-link class="link-btn" type="primary" v-if="row.status == 0 || row.status == 1" :underline="false" plain :size="size" @click="makeParticulars(row)"
|
v-hasPermi="['cwgl:receivableBillManagement:amount']"> 开票明细
|
</el-link>
|
<el-link class="link-btn" type="primary" v-if="row.status == 0 || row.status == 1|| row.status == 3" :underline="false" plain :size="size" @click="handleViewHistory(row)"
|
v-hasPermi="['cwgl:receivableBillManagement:list']"> 结算明细
|
</el-link>
|
<el-link class="link-btn" type="primary" :underline="false" plain :size="size" @click="handleViewFeeDetail(row)"
|
v-hasPermi="['cwgl:receivableBillManagement:view']"> 详情
|
</el-link>
|
|
<el-link class="link-btn" v-if="row.auditStatus == 0 || row.auditStatus == 2" type="primary" :underline="false" plain :size="size"
|
@click="handleAuditClick(row)"
|
v-hasPermi="['cwgl:receivableBillManagement:audit']">
|
审核
|
</el-link>
|
|
<el-link class="link-btn" v-if="row.status == 0" type="primary"
|
:underline="false"
|
plain @click="handleInvalid(row)" v-hasPermi="['cwgl:receivableBillManagement:invalid']"> 作废
|
</el-link>
|
|
<el-button type="text" icon="View" @click="handleFlow(row)"
|
v-hasPermi="['cwgl:receivableBillManagement:flow']">日志</el-button>
|
|
</template>
|
</avue-crud>
|
</basicContainer>
|
|
<SettlementDialog ref="settleDialogRef" :type="currentType" @success="handleRefresh" />
|
<makeOutInvoice ref="makeOutInvoiceRef" :type="makeType" :InvoiceDetails="InvoiceDetails" @success="makeOutInvoiceFresh" />
|
|
|
<BillSettlementHistory ref="historyRef" :type="activeType" />
|
<NestedDetailDialog ref="feeDetailRef" :type="activeType" />
|
<OperationLogModal ref="logModalRef" />
|
<BillEditDialog ref="billDialogRef" @submit="handleBillSubmit" />
|
|
|
<el-dialog title="账单审核" v-model="auditDialogVisible" width="500px" append-to-body>
|
<el-form :model="auditForm" :rules="auditRules" ref="auditFormRef" label-width="100px">
|
<!-- <el-form-item label="账单ID" prop="billId">
|
<el-input v-model="auditForm.billId" disabled />
|
</el-form-item> -->
|
<!-- <el-form-item label="账单类型" prop="billType">
|
<el-select v-model="auditForm.billType" placeholder="请选择" style="width: 100%" disabled>
|
<el-option label="应收" :value="0" />
|
<el-option label="应付" :value="1" />
|
</el-select>
|
</el-form-item> -->
|
<el-form-item label="审核结果" prop="auditResult">
|
<el-radio-group v-model="auditForm.auditResult" @change="handleAuditResultChange" >
|
<el-radio :label="1">通过</el-radio>
|
<el-radio :label="2">驳回</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="审核意见" prop="auditComment">
|
<el-input v-model="auditForm.auditComment" type="textarea" :rows="3" placeholder="请输入审核意见" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="auditDialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="submitAudit">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup name="receivableBillManagement" lang="ts">
|
import { listReceivableInvoiceBusiness} from "@/api/cwgl/receivableInvoiceBusiness";
|
|
import { receivableBillManagementInvoice,invoiceAmount,ReceivableBillManagementI, addReceivableBillManagement, delReceivableBillManagement, exportReceivableBillManagement, getReceivableBillManagement, listReceivableBillManagement, updateReceivableBillManagement,receivableBillManagementVoid,receivableBillManagementAudit } from "@/api/cwgl/receivableBillManagement";
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import { computed, reactive, ref, toRefs,nextTick } from "vue";
|
import { PagesInterface, PageQueryInterface } from "@/utils/globalInterface";
|
import { usePagePlus } from "@/hooks/usePagePlus";
|
import { hasPermission } from "@/utils/permissionUtils";
|
import SettlementDialog from '@/components/SettlementDialog/index.vue';
|
import makeOutInvoice from '@/components/makeOutInvoice/index.vue';
|
import BillEditDialog from "../../../components/BillEditDialog/index.vue";
|
|
import BillSettlementHistory from '../../../components/BillSettlementHistory/index.vue';
|
import NestedDetailDialog from '../../../components/NestedDetailDialog/index.vue';
|
import OperationLogModal from '@/components/OperationLogModal/index.vue';
|
import { listReceivableBillManagementLog} from "@/api/cwgl/receivableBillManagementLog";
|
|
import { addReceivableBillSettlementDetail, } from "@/api/cwgl/receivableBillSettlementDetail";
|
const { proxy } = useCurrentInstance();
|
const crudRef = ref();
|
|
const permissionList = computed(() => {
|
return {
|
addBtn: hasPermission(["cwgl:receivableBillManagement:add"]),
|
delBtn: hasPermission(["cwgl:receivableBillManagement:remove"]),
|
editBtn: hasPermission(["cwgl:receivableBillManagement:edit"]),
|
viewBtn: hasPermission(["cwgl:receivableBillManagement:query"]),
|
}
|
})
|
|
const data = reactive({
|
form: <ReceivableBillManagementI>{},
|
queryParams: <ReceivableBillManagementI & PageQueryInterface>{},
|
page: <PagesInterface>{
|
pageSize: 10,
|
total: 0,
|
currentPage: 1,
|
},
|
selectionList: [],
|
})
|
const { queryParams, form, page, selectionList } = toRefs(data);
|
const option = ref({
|
pageKey: 'ReceivableBillManagement',
|
rowKey: 'id',
|
labelWidth: 150,
|
delBtn: false,
|
addBtn: false,
|
viewBtn: false,
|
editBtn: false,
|
searchLabelWidth: 120,
|
column: {
|
// id: {
|
// label: 'ID',
|
// },
|
systemNo: {
|
label: '系统编号',
|
minWidth: 150,
|
search: true,
|
|
rules: [
|
{
|
required: true,
|
message: "系统编号不能为空", trigger: "blur"
|
}
|
],
|
},
|
billName: {
|
label: '账单名称',
|
minWidth: 150,
|
search: true,
|
|
|
rules: [
|
{
|
required: true,
|
message: "账单名称不能为空", trigger: "blur"
|
}
|
],
|
},
|
customerName: {
|
label: '客户名称',
|
minWidth: 150,
|
search: true,
|
|
|
rules: [
|
{
|
required: true,
|
message: "客户名称不能为空", trigger: "blur"
|
}
|
],
|
},
|
// isInternalSettlement: {
|
// label: '是否内部结算',
|
// rules: [
|
// {
|
// required: true,
|
// message: "是否内部结算不能为空", trigger: "blur"
|
// }
|
// ],
|
// },
|
// internalSettlementUnit: {
|
// label: '内部结算单位',
|
// },
|
documentCount: {
|
label: '单据数量',
|
minWidth: 100,
|
|
},
|
totalAmount: {
|
label: '应结算金额',
|
minWidth: 100,
|
|
},
|
currency: {
|
label: '币制',
|
minWidth: 100,
|
|
},
|
discountAmount: {
|
label: '减免金额',
|
minWidth: 100,
|
|
},
|
receivedAmount: {
|
label: '已收金额',
|
minWidth: 100,
|
|
},
|
pendingAmount: {
|
label: '待收金额',
|
minWidth: 100,
|
|
},
|
// exchangeRate: {
|
// label: '汇率',
|
// },
|
// cnyAmount: {
|
// label: '人民币金额',
|
// },
|
// 在 option 的 column 中修改 periodType
|
periodType: {
|
label: '周期类型',
|
minWidth: 200, // 增加宽度以容纳日期范围
|
type: 'select', dataType: 'string', dicUrl: '/system/dict/data/type/sys_period_type',
|
|
},
|
businessStartDateArray: {
|
label: '业务期间',
|
minWidth: 200,
|
formatter: (row) => {
|
if (row.businessEndDate && row.businessStartDate) {
|
return `${row.businessStartDate} 至 ${row.businessEndDate}`;
|
}
|
return row.periodType || '-';
|
}
|
},
|
businessDateArray: {
|
label: '账单周期',
|
minWidth: 200,
|
formatter: (row) => {
|
if (row.billingStartDate && row.billingEndDate) {
|
return `${row.billingStartDate} 至 ${row.billingEndDate}`;
|
}
|
return row.periodType || '-';
|
}
|
},
|
// businessEndDate: {
|
// label: '业务期间结束日期',
|
// rules: [
|
// {
|
// required: true,
|
// message: "业务期间结束日期不能为空", trigger: "blur"
|
// }
|
// ],
|
// },
|
// billingStartDate: {
|
// label: '账期开始日期',
|
// rules: [
|
// {
|
// required: true,
|
// message: "账期开始日期不能为空", trigger: "blur"
|
// }
|
// ],
|
// },
|
// billingEndDate: {
|
// label: '账期结束日期',
|
// rules: [
|
// {
|
// required: true,
|
// message: "账期结束日期不能为空", trigger: "blur"
|
// }
|
// ],
|
// },
|
billGenerateDate: {
|
label: '账单生成日期',
|
minWidth: 150,
|
|
rules: [
|
{
|
required: true,
|
message: "账单生成日期不能为空", trigger: "blur"
|
}
|
],
|
},
|
billSendDate: {
|
label: '账单发送日期',
|
minWidth: 150,
|
|
},
|
billDueDate: {
|
label: '账单到期日期',
|
minWidth: 150,
|
|
rules: [
|
{
|
required: true,
|
message: "账单到期日期不能为空", trigger: "blur"
|
}
|
],
|
},
|
|
|
// remark: {
|
// label: '备注',
|
// type: 'textarea', minRows: 3, maxRows: 5,
|
// },
|
createBy: {
|
label: '创建人',
|
minWidth: 150,
|
|
},
|
createTime: {
|
label: '创建时间',
|
minWidth: 200,
|
|
},
|
updateBy: {
|
label: '更新人',
|
minWidth: 150,
|
|
},
|
updateTime: {
|
label: '更新时间',
|
minWidth: 200,
|
|
},
|
auditStatus: {
|
label: '审核状态',
|
minWidth: 120,
|
fixed: 'right',
|
type: 'select', dataType: 'string', dicUrl: '/system/dict/data/type/sys_accounts_statement',
|
search: true,
|
rules: [
|
{
|
required: true,
|
message: "状态不能为空", trigger: "blur"
|
}
|
],
|
},
|
status: {
|
label: '结算状态',
|
minWidth: 120,
|
fixed: 'right',
|
type: 'select', dataType: 'string', dicUrl: '/system/dict/data/type/sys_bill_status',
|
search: true,
|
rules: [
|
{
|
required: true,
|
message: "状态不能为空", trigger: "blur"
|
}
|
],
|
},
|
// deleted: {
|
// label: '删除标记(0:正常;1:删除)',
|
// },
|
}
|
})
|
|
const { tableData, pageF, rowSave, rowUpdate, rowDel, beforeOpen, searchChange,
|
searchReset, selectionChange, onLoad, currentChange, sizeChange, handleDelete, handleExport, handleUpdate, refreshChange } = usePagePlus({
|
form: form,
|
option: option,
|
queryParams: queryParams,
|
idKey: 'id',
|
page: page.value,
|
getListApi: listReceivableBillManagement,
|
getDetailApi: getReceivableBillManagement,
|
exportApi: exportReceivableBillManagement,
|
deleteApi: delReceivableBillManagement,
|
addApi: addReceivableBillManagement,
|
updateApi: updateReceivableBillManagement,
|
handleUpdateFunc: () => {
|
crudRef.value.rowEdit(selectionList.value[0]);
|
},
|
handleSelectionChangeFunc: (selection: any) => {
|
selectionList.value = selection;
|
}
|
})
|
|
const settleDialogRef = ref()
|
const currentType = ref<'receivable' | 'payable'>('receivable')
|
const ids = ref('')
|
const handleSettle = (row) => {
|
currentType.value = 'receivable'
|
ids.value = row.id
|
getReceivableBillManagement(row.id).then((res) => {
|
if (res.code === 200) {
|
settleDialogRef.value.open(res.data)
|
}
|
})
|
|
}
|
/* 开票 */
|
const makeOutInvoiceRef = ref()
|
const makeType = ref<'应付账单开票' | '应收账单开票'>('应收账单开票')
|
const InvoiceDetails = ref('')
|
|
const makeInvoice =(row) =>{
|
currentType.value = '应收账单开票'
|
InvoiceDetails.value = '本次开票信息'
|
ids.value = row.id
|
invoiceAmount(row.id).then((res)=>{
|
if(res.code==200){
|
row.invoicedAmount=res.data
|
makeOutInvoiceRef.value.open(row)
|
}
|
})
|
// headId
|
|
}
|
const makeParticulars =(row) =>{
|
currentType.value = '应收账单开票记录'
|
InvoiceDetails.value = '开票明细'
|
ids.value = row.id
|
listReceivableInvoiceBusiness({headId: row.id}).then((res) => {
|
if (res.code === 200) {
|
row.recordList=res.rows
|
makeOutInvoiceRef.value.open(row)
|
}
|
})
|
}
|
const handleRefresh = (data) => {
|
// ids.value
|
data.billId = ids.value
|
addReceivableBillSettlementDetail(data).then((res) => {
|
if (res.code == 200) {
|
settleDialogRef.value.openIshpw()
|
proxy.$modal.msgSuccess(res.msg);
|
onLoad(page.value)
|
|
}
|
})
|
}
|
// 结算历史弹窗引用
|
const historyRef = ref();
|
const activeType = ref('receivable');
|
/** 查看结算记录 */
|
const handleViewHistory = (row: any) => {
|
// 假设父组件通过某种方式知道当前是应收还是应付逻辑
|
// 或者直接从 row 里的某个字段判断
|
historyRef.value.open(row);
|
};
|
|
/* 获取结算历史数据 */
|
// 2. 定义引用和类型
|
const feeDetailRef = ref();
|
|
/** 查看费用明细按钮点击事件 */
|
const handleViewFeeDetail = (row: any) => {
|
// 设置当前业务类型（应收页面传 'receivable'，应付页面传 'payable'）
|
activeType.value = 'receivable';
|
feeDetailRef.value.open(row);
|
|
};
|
const handleInvalid = (row: any) => {
|
proxy.$modal.confirm(`是否作废该系统编号 ：${row.systemNo}?`).then(function () {
|
return receivableBillManagementVoid(row.id);
|
}).then((res) => {
|
onLoad(page.value);
|
proxy.$modal.msgSuccess(res.msg);
|
})
|
|
}
|
const logModalRef = ref(null);
|
const handleFlow = (row: any,) => {
|
// 这里可以从 row 中直接获取日志，或者调用后端接口查询
|
listReceivableBillManagementLog({billId:row.id}).then((res) => {
|
if (res.code == 200) {
|
logModalRef.value.open(res.rows,'payable');
|
|
}
|
});
|
}
|
const makeOutInvoiceFresh = (submitData: any) => {
|
// 这里调用后端的保存接口
|
receivableBillManagementInvoice(submitData,submitData.id).then(res => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess(res.msg);
|
makeOutInvoiceRef.value.openIshpw()
|
onLoad(page.value); // 刷新列表
|
}
|
})
|
|
}
|
const billDialogRef = ref();
|
|
/**
|
* 点击编辑按钮
|
*/
|
const handleFy = (row: any) => {
|
// 1. 先通过接口获取最新的统计数据（系统编号、应结金额等）
|
getReceivableBillManagement(row.id).then((res) => {
|
if (res.code === 200) {
|
// 2. 调用子组件的 openDialog 方法，并将接口返回的数据传进去
|
billDialogRef.value.openDialog(res.data);
|
}
|
});
|
};
|
/**
|
* 子组件点击“确定”后的回调
|
*/
|
const handleBillSubmit = (data: any) => {
|
console.log(data);
|
|
updateReceivableBillManagement(data).then((res) => {
|
if (res.code === 200) {
|
proxy.$message.success("修改成功");
|
billDialogRef.value.handleClose(); // 关闭弹窗
|
onLoad(page.value); // 刷新列表
|
}
|
});
|
};
|
|
|
|
// --- 新增：审核相关逻辑 ---
|
const auditDialogVisible = ref(false);
|
const auditFormRef = ref();
|
|
// 审核表单数据
|
const auditForm = reactive({
|
billId: null as number | null,
|
billType: null as number | null, // 0:应收, 1:应付
|
auditResult: null as number | null, // 1:通过, 2:驳回
|
auditComment: ''
|
});
|
const getAuditRules = () => {
|
return {
|
billId: [{ required: true, message: '账单ID不能为空', trigger: 'blur' }],
|
billType: [{ required: true, message: '账单类型不能为空', trigger: 'change' }],
|
auditResult: [{ required: true, message: '审核结果不能为空', trigger: 'change' }],
|
// 动态规则：如果 auditResult 为 2 (驳回)，则必填
|
auditComment: [
|
{
|
required: auditForm.auditResult === 2,
|
message: '驳回时必须填写审核意见',
|
trigger: 'blur'
|
}
|
]
|
};
|
};
|
const validateAuditComment = (rule: any, value: any, callback: any) => {
|
if (auditForm.auditResult === 2 && !value) {
|
callback(new Error('驳回时必须填写审核意见'));
|
} else {
|
callback();
|
}
|
};
|
// 表单校验规则
|
const auditRules = {
|
billId: [{ required: true, message: '账单ID不能为空', trigger: 'blur' }],
|
billType: [{ required: true, message: '账单类型不能为空', trigger: 'change' }],
|
auditResult: [{ required: true, message: '审核结果不能为空', trigger: 'change' }],
|
auditComment: [{ validator: validateAuditComment, trigger: 'blur' }]
|
};
|
const handleAuditResultChange = (val: number) => {
|
// 当切换审核结果时，立即触发表单校验，以更新审核意见字段的错误提示状态
|
if (auditFormRef.value) {
|
auditFormRef.value.validateField('auditComment');
|
}
|
|
// 可选：如果选择通过，可以清空之前填写的驳回意见，或者保留看业务需求
|
// if (val === 1) {
|
// auditForm.auditComment = '';
|
// }
|
};
|
/**
|
* 点击审核按钮
|
*/
|
const handleAuditClick = (row: any) => {
|
// 重置表单
|
auditForm.billId = row.id;
|
auditForm.billType = 0;
|
auditForm.auditResult = null;
|
auditForm.auditComment = '';
|
|
// 重置校验状态
|
nextTick(() => {
|
if (auditFormRef.value) {
|
auditFormRef.value.clearValidate();
|
}
|
});
|
|
auditDialogVisible.value = true;
|
};
|
|
|
/**
|
* 提交审核
|
*/
|
const submitAudit = () => {
|
auditFormRef.value.validate((valid: boolean) => {
|
if (valid) {
|
receivableBillManagementAudit(auditForm).then(res => {
|
if (res.code === 200) {
|
proxy.$modal.msgSuccess(res.msg);
|
auditDialogVisible.value = false;
|
onLoad(page.value); // 刷新列表
|
}
|
});
|
}
|
});
|
};
|
</script>
|
