<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']">导出
|
</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:receivableBillManagement:view']"> 结算
|
</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:view']"> 结算明细
|
</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.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" />
|
<BillSettlementHistory ref="historyRef" :type="activeType" />
|
<NestedDetailDialog ref="feeDetailRef" :type="activeType" />
|
<OperationLogModal ref="logModalRef" />
|
|
</template>
|
|
<script setup name="receivableBillManagement" lang="ts">
|
import { ReceivableBillManagementI, addReceivableBillManagement, delReceivableBillManagement, exportReceivableBillManagement, getReceivableBillManagement, listReceivableBillManagement, updateReceivableBillManagement,receivableBillManagementVoid } from "@/api/cwgl/receivableBillManagement";
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import { computed, reactive, ref, toRefs } 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 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, // 增加宽度以容纳日期范围
|
|
},
|
businessStartDateArray: {
|
label: '业务期间',
|
formatter: (row) => {
|
if (row.businessEndDate && row.businessStartDate) {
|
return `${row.businessStartDate} 至 ${row.businessEndDate}`;
|
}
|
return row.periodType || '-';
|
}
|
},
|
businessDateArray: {
|
label: '账单周期',
|
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,
|
|
},
|
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 handleRefresh = (data) => {
|
console.log(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');
|
|
}
|
});
|
}
|
|
</script>
|
