<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:payableBillManagement:edit']"
|
@click="handleUpdate">修改
|
</el-button>
|
<el-button type="danger" icon="Delete" :disabled="pageF.multiple" @click="handleDelete"
|
v-hasPermi="['cwgl:payableBillManagement:remove']">删除
|
</el-button> -->
|
<el-button type="warning" plain icon="Download" @click="handleExport"
|
v-hasPermi="['cwgl:payableBillManagement:export']">导出
|
</el-button>
|
</template>
|
|
<template #menu="{ size, row, index }">
|
<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:payableBillManagement: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:payableBillManagement: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:payableBillManagement: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:payableBillManagement:list']"> 结算明细
|
</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" type="primary" :underline="false" plain :size="size" @click="handleViewFeeDetail(row)"
|
v-hasPermi="['cwgl:payableBillManagement:view']"> 详情
|
</el-link>
|
|
<el-link class="link-btn" v-if="row.status == 0" type="primary" :underline="false" plain
|
@click="handleInvalid(row)" v-hasPermi="['cwgl:payableBillManagement:invalid']"> 作废
|
</el-link>
|
|
<el-button type="text" icon="View" @click="handleFlow(row)"
|
v-hasPermi="['cwgl:payableBillManagement:flow']">日志</el-button>
|
|
</template>
|
</avue-crud>
|
</basicContainer>
|
<SettlementDialog ref="settleDialogRef" :type="currentType" @success="handleRefresh" />
|
<BillSettlementHistory ref="historyRef" :type="activeType" />
|
<NestedDetailDialog ref="feeDetailRef" :type="activeType" />
|
<OperationLogModal ref="logModalRef" />
|
<!-- 开票 -->
|
<makeOutInvoice ref="makeOutInvoiceRef" :type="makeType" :InvoiceDetails="InvoiceDetails" @success="makeOutInvoiceFresh" />
|
|
<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">确 定1</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup name="payableBillManagement" lang="ts">
|
import { payableBillManagementInvoice,invoiceAmount,PayableBillManagementI,payableBillManagementVoid, addPayableBillManagement, delPayableBillManagement, exportPayableBillManagement, getPayableBillManagement, listPayableBillManagement, updatePayableBillManagement,receivableBillManagementAudit } from "@/api/cwgl/payableBillManagement";
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import { listPayableInvoiceBusiness,} from "@/api/cwgl/payableInvoiceBusiness";
|
|
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 { listPayableBillManagementLog } from "@/api/cwgl/payableBillManagementLog";
|
import SettlementDialog from '@/components/SettlementDialog/index.vue';
|
import { addPayableBillSettlementDetail, } from "@/api/cwgl/payableBillSettlementDetail";
|
import OperationLogModal from '@/components/OperationLogModal/index.vue';
|
import BillSettlementHistory from '../../../components/BillSettlementHistory/index.vue';
|
import NestedDetailDialog from '../../../components/NestedDetailDialog/index.vue';
|
import makeOutInvoice from '@/components/makeOutInvoice/index.vue';
|
|
const { proxy } = useCurrentInstance();
|
const crudRef = ref();
|
|
const permissionList = computed(() => {
|
return {
|
addBtn: hasPermission(["cwgl:payableBillManagement:add"]),
|
delBtn: hasPermission(["cwgl:payableBillManagement:remove"]),
|
editBtn: hasPermission(["cwgl:payableBillManagement:edit"]),
|
viewBtn: hasPermission(["cwgl:payableBillManagement:query"]),
|
}
|
})
|
|
const data = reactive({
|
form: <PayableBillManagementI>{},
|
queryParams: <PayableBillManagementI & PageQueryInterface>{},
|
page: <PagesInterface>{
|
pageSize: 10,
|
total: 0,
|
currentPage: 1,
|
},
|
selectionList: [],
|
})
|
const { queryParams, form, page, selectionList } = toRefs(data);
|
const option = ref({
|
pageKey: 'PayableBillManagement',
|
rowKey: 'id',
|
delBtn: false,
|
addBtn: false,
|
viewBtn: false,
|
editBtn: false,
|
labelWidth: 150,
|
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"
|
}
|
],
|
},
|
supplierName: {
|
label: '供应商名称',
|
minWidth: 150,
|
search: true,
|
|
rules: [
|
{
|
required: true,
|
message: "供应商名称不能为空", trigger: "blur"
|
}
|
],
|
},
|
isInternalSettlement: {
|
label: '是否内部结算',
|
minWidth: 120,
|
type: 'select', dataType: 'string', dicUrl: '/system/dict/data/type/sys_whether_type',
|
rules: [
|
{
|
required: true,
|
message: "是否内部结算不能为空", trigger: "change"
|
}
|
],
|
},
|
internalSettlementUnit: {
|
label: '内部结算单位',
|
minWidth: 120,
|
|
},
|
documentCount: {
|
label: '单据数量',
|
minWidth: 120,
|
|
},
|
totalAmount: {
|
label: '应结算金额',
|
minWidth: 120,
|
|
},
|
// currency: {
|
// label: '币制',
|
|
// },
|
currency: {
|
label: '币制',
|
minWidth: 120,
|
type: 'select', dataType: 'string', dicUrl: '/system/dict/data/type/sys_currency',
|
rules: [
|
{
|
required: true,
|
message: "币制不能为空", trigger: "change"
|
}
|
],
|
},
|
discountAmount: {
|
label: '减免金额',
|
minWidth: 120,
|
|
},
|
paidAmount: {
|
label: '已付金额',
|
minWidth: 120,
|
},
|
pendingAmount: {
|
label: '待付金额',
|
minWidth: 120,
|
},
|
// exchangeRate: {
|
// label: '汇率',
|
// },
|
// cnyAmount: {
|
// label: '人民币金额',
|
// },
|
periodType: {
|
label: '周期类型',
|
minWidth: 120,
|
rules: [
|
{
|
required: true,
|
message: "周期类型不能为空", trigger: "change"
|
}
|
],
|
},
|
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 || '-';
|
}
|
},
|
// businessStartDate: {
|
// label: '业务期间开始日期',
|
// rules: [
|
// {
|
// required: true,
|
// message: "业务期间开始日期不能为空", trigger: "blur"
|
// }
|
// ],
|
// },
|
// businessEndDate: {
|
// label: '业务期间结束日期',
|
// rules: [
|
// {
|
// required: true,
|
// message: "业务期间结束日期不能为空", trigger: "blur"
|
// }
|
// ],
|
// },
|
billGenerateDate: {
|
label: '账单生成日期',
|
minWidth: 200,
|
|
rules: [
|
{
|
required: true,
|
message: "账单生成日期不能为空", trigger: "blur"
|
}
|
],
|
},
|
// billingStartDate: {
|
// label: '账期开始日期',
|
// rules: [
|
// {
|
// required: true,
|
// message: "账期开始日期不能为空", trigger: "blur"
|
// }
|
// ],
|
// },
|
// billingEndDate: {
|
// label: '账期结束日期',
|
// rules: [
|
// {
|
// required: true,
|
// message: "账期结束日期不能为空", trigger: "blur"
|
// }
|
// ],
|
// },
|
|
billSendDate: {
|
label: '账单发送日期',
|
minWidth: 200,
|
|
},
|
billDueDate: {
|
label: '账单到期日期',
|
minWidth: 200,
|
|
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"
|
}
|
],
|
},
|
// remark: {
|
// label: '备注',
|
// type: 'textarea', minRows: 3, maxRows: 5,
|
// },
|
createBy: {
|
label: '创建人',
|
},
|
createTime: {
|
label: '创建时间',
|
minWidth: 200,
|
|
},
|
updateBy: {
|
label: '更新人',
|
},
|
updateTime: {
|
label: '更新时间',
|
minWidth: 200,
|
|
},
|
// deleted: {
|
// label: '删除标记(0:正常;1:删除)',
|
// },
|
}
|
})
|
|
import { onMounted } from "vue";
|
|
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: listPayableBillManagement,
|
getDetailApi: getPayableBillManagement,
|
exportApi: exportPayableBillManagement,
|
deleteApi: delPayableBillManagement,
|
addApi: addPayableBillManagement,
|
updateApi: updatePayableBillManagement,
|
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 = 'payable'
|
ids.value = row.id
|
getPayableBillManagement(row.id).then((res) => {
|
if (res.code === 200) {
|
settleDialogRef.value.open(res.data)
|
}
|
})
|
|
}
|
|
|
const handleRefresh = (data) => {
|
// ids.value
|
data.billId = ids.value
|
addPayableBillSettlementDetail(data).then((res) => {
|
if (res.code == 200) {
|
settleDialogRef.value.openIshpw()
|
proxy.$modal.msgSuccess(res.msg);
|
onLoad(page.value)
|
|
}
|
})
|
}
|
|
// 结算历史弹窗引用
|
const historyRef = ref();
|
const activeType = ref('payable');
|
/** 查看结算记录 */
|
const handleViewHistory = (row: any) => {
|
// 假设父组件通过某种方式知道当前是应收还是应付逻辑
|
// 或者直接从 row 里的某个字段判断
|
historyRef.value.open(row);
|
};
|
const feeDetailRef = ref();
|
|
/** 查看费用明细按钮点击事件 */
|
const handleViewFeeDetail = (row: any) => {
|
// 设置当前业务类型（应收页面传 'receivable'，应付页面传 'payable'）
|
activeType.value = 'payable';
|
feeDetailRef.value.open(row);
|
|
};
|
|
|
const logModalRef = ref(null);
|
const handleFlow = (row: any,) => {
|
// 这里可以从 row 中直接获取日志，或者调用后端接口查询
|
listPayableBillManagementLog({ billId: row.id }).then((res) => {
|
if (res.code == 200) {
|
logModalRef.value.open(res.rows, 'payable');
|
|
}
|
});
|
}
|
|
const handleInvalid = (row: any) => {
|
proxy.$modal.confirm(`是否作废该系统编号 ：${row.systemNo}?`).then(function () {
|
return payableBillManagementVoid(row.id);
|
}).then((res) => {
|
onLoad(page.value);
|
proxy.$modal.msgSuccess(res.msg);
|
})
|
|
}
|
|
/* 开票 */
|
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)
|
|
}
|
})
|
|
}
|
|
const makeOutInvoiceFresh = (submitData: any) => {
|
payableBillManagementInvoice(submitData,submitData.id).then(res => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess(res.msg);
|
makeOutInvoiceRef.value.openIshpw()
|
onLoad(page.value); // 刷新列表
|
}
|
})
|
|
}
|
|
const makeParticulars =(row) =>{
|
currentType.value = '应付账单开票记录'
|
InvoiceDetails.value = '开票明细'
|
ids.value = row.id
|
listPayableInvoiceBusiness({headId: row.id}).then((res) => {
|
if (res.code === 200) {
|
row.recordList=res.rows
|
makeOutInvoiceRef.value.open(row)
|
}
|
})
|
}
|
|
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 = 1;
|
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>
|
