<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:fundFlow:edit']"
|
@click="handleUpdate">修改
|
</el-button>
|
<el-button type="danger" icon="Delete" :disabled="pageF.multiple" @click="handleDelete"
|
v-hasPermi="['cwgl:fundFlow:remove']">删除
|
</el-button> -->
|
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['cwgl:fundFlow:export']">导出
|
</el-button>
|
<el-button type="warning" plain icon="Upload" @click="handleImport"
|
v-hasPermi="['cwgl:fundFlow:import']">导入
|
</el-button>
|
<el-button type="primary" plain icon="Refresh" @click="handleSync"
|
v-hasPermi="['cwgl:fundFlow:sync']">同步银行流水
|
</el-button>
|
</template>
|
<template #menu="{ size, row, index }">
|
<el-link v-if="row.status == '0'" class="link-btn" type="primary" icon="Edit" :underline="false" :size="size"
|
@click="crudRef.rowEdit(row, index)"> 修改
|
</el-link>
|
|
<el-link v-if="row.status == '0'" class="link-btn" type="primary" icon="Position" :underline="false"
|
:size="size" @click="makeInvoice(row)" v-hasPermi="['cwgl:fundFlow:confirm']"> 确认
|
</el-link>
|
<el-link v-if="row.status == '0'" class="link-btn" type="primary" icon="Delete" :underline="false" :size="size"
|
@click="crudRef.rowDel(row, index)"> 删除
|
</el-link>
|
<el-link v-if="['1', '2'].includes(String(row.status))" class="link-btn" type="primary" icon="Position"
|
:underline="false" :size="size" @click="handleClaim(row)" v-hasPermi="['cwgl:fundFlow:claim']">
|
账单认领
|
</el-link>
|
<el-link v-if="['1', '2','3'].includes(String(row.status))" class="link-btn" type="primary" icon="Position"
|
:underline="false" :size="size" @click="handleDetails(row)" v-hasPermi="['cwgl:fundFlow:edit']">
|
认领明细
|
</el-link>
|
<el-button type="text" icon="View" @click="handleFlow(row)"
|
v-hasPermi="['cwgl:fundFlow:flow']">日志</el-button>
|
<!-- <el-button type="text" icon="View" @click="handleFlow(row)"
|
v-hasPermi="['cwgl:invoiceManage:flow']">日志</el-button> -->
|
|
</template>
|
</avue-crud>
|
</basicContainer>
|
<OperationLogModal ref="logModalRef" />
|
<XlsFileImport title="资金流水导入" uploadUrl="/cwgl/fundFlow/importData" templateUrl="/cwgl/fundFlow/importTemplate"
|
:open="pageF.importOpen" @submit="importSubmit" @cancel="pageF.importOpen = false" />
|
|
<ClaimBillDialog ref="claimDialogRef" @submit="handleClaimSubmit" />
|
|
<!-- 同步银行流水对话框 -->
|
<el-dialog title="同步银行流水" v-model="syncDialogVisible" width="500px" append-to-body>
|
<el-form ref="syncFormRef" :model="syncForm" :rules="syncRules" label-width="100px">
|
<el-form-item label="账号" prop="acctNum">
|
<el-input v-model="syncForm.acctNum" placeholder="请输入银行账号" clearable />
|
</el-form-item>
|
<el-form-item label="开始日期" prop="startDate">
|
<el-date-picker v-model="syncForm.startDate" type="date" value-format="YYYY-MM-DD"
|
placeholder="请选择开始日期" style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="结束日期" prop="endDate">
|
<el-date-picker v-model="syncForm.endDate" type="date" value-format="YYYY-MM-DD"
|
placeholder="请选择结束日期" style="width: 100%" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="syncDialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="handleSyncSubmit" :loading="syncLoading">确 定</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup name="fundFlow" lang="ts">
|
import { FundFlowI, addFundFlow, delFundFlow, addFundFlowClaimDetailClaim, exportFundFlow, confirmFundFlow, getFundFlow, listFundFlow, updateFundFlow, syncFromCmbs } from "@/api/cwgl/fundFlow";
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import { listFundFlowLog} from "@/api/cwgl/fundFlowLog";
|
|
import { computed, reactive, ref, toRefs } from "vue";
|
import { PagesInterface, PageQueryInterface } from "@/utils/globalInterface";
|
import { usePagePlus } from "@/hooks/usePagePlus";
|
import { hasPermission } from "@/utils/permissionUtils";
|
import { listFundFlowClaimDetail } from "@/api/cwgl/fundFlowClaimDetail";
|
import OperationLogModal from '@/components/OperationLogModal/index.vue';
|
|
import ClaimBillDialog from "../../../components/ClaimBillDialog/index.vue";
|
|
const { proxy } = useCurrentInstance();
|
const crudRef = ref();
|
|
const permissionList = computed(() => {
|
return {
|
addBtn: hasPermission(["cwgl:fundFlow:add"]),
|
delBtn: hasPermission(["cwgl:fundFlow:remove"]),
|
editBtn: hasPermission(["cwgl:fundFlow:edit"]),
|
viewBtn: hasPermission(["cwgl:fundFlow:query"]),
|
}
|
})
|
|
const data = reactive({
|
form: <FundFlowI>{},
|
queryParams: <FundFlowI & PageQueryInterface>{},
|
page: <PagesInterface>{
|
pageSize: 10,
|
total: 0,
|
currentPage: 1,
|
},
|
selectionList: [],
|
})
|
const { queryParams, form, page, selectionList } = toRefs(data);
|
const option = ref({
|
pageKey: 'FundFlow',
|
rowKey: 'id',
|
searchSpan: 5,
|
labelWidth: 180,
|
searchLabelWidth: 150,
|
delBtn: false,
|
editBtn: false,
|
column: {
|
// id: {
|
// label: 'ID',
|
// },
|
bankFlowNo: {
|
label: '银行流水号',
|
minWidth: 120,
|
search: true,
|
rules: [
|
{
|
required: true,
|
message: "银行流水号不能为空", trigger: "blur"
|
}
|
],
|
},
|
company: {
|
label: '单位',
|
minWidth: 120,
|
},
|
ourAccount: {
|
label: '本方账号',
|
search: true,
|
minWidth: 120,
|
},
|
ourBankName: {
|
label: '本方账户开户行',
|
minWidth: 120,
|
},
|
incomeExpenseFlag: {
|
label: '收支标识',
|
type: 'radio', // 设置为单选按钮
|
search: true, // 如果需要在搜索栏也显示
|
dicUrl: '/system/dict/data/type/sys_income_expenses',
|
rules: [
|
{
|
required: true,
|
message: "请选择收支标识",
|
trigger: "blur"
|
}
|
],
|
},
|
transactionAmount: {
|
label: '交易金额',
|
rules: [
|
{
|
required: true,
|
message: "交易金额不能为空",
|
trigger: "blur"
|
}
|
],
|
},
|
currency: {
|
label: '交易币种',
|
search: true,
|
minWidth: 120,
|
dataType: 'string',
|
type: 'select',
|
// addDisplay: false, // 新增时不显示
|
// editDisplay: false, // 修改时不显示
|
viewDisplay: false,
|
dicUrl: '/system/dict/data/type/sys_currency',
|
},
|
counterpartyAccount: {
|
minWidth: 150,
|
label: '对方账号',
|
search: true,
|
},
|
counterpartyName: {
|
minWidth: 150,
|
label: '对方户名',
|
search: true,
|
},
|
transactionDate: {
|
minWidth: 200,
|
// search: true,
|
label: '交易日期',
|
type: 'datetime', // 类型改为 datetime
|
format: 'YYYY-MM-DD HH:mm:ss', // 界面显示的格式
|
valueFormat: 'YYYY-MM-DD HH:mm:ss', // 提交给后台的数据格式
|
// search: true, // 如果开启搜索
|
rules: [
|
{
|
required: true,
|
message: "请选择交易日期",
|
trigger: "change"
|
}
|
],
|
|
},
|
purpose: {
|
label: '用途',
|
minWidth: 150,
|
},
|
summary: {
|
label: '摘要',
|
type: 'textarea', minRows: 3, maxRows: 5,
|
hide: true,
|
},
|
remarks: {
|
label: '附言',
|
hide: true,
|
type: 'textarea', minRows: 3, maxRows: 5,
|
},
|
status: {
|
minWidth: 120,
|
label: '状态',
|
fixed: 'right',
|
value: '0',
|
addDisplay: false, // 表单不显示
|
editDisplay: false,
|
viewDisplay: true,
|
dicUrl: '/system/dict/data/type/sys_capital_status',
|
},
|
// createBy: {
|
// label: '创建者',
|
// },
|
// createTime: {
|
// label: '创建时间',
|
// },
|
// updateBy: {
|
// label: '更新者',
|
// },
|
// updateTime: {
|
// label: '更新时间',
|
// },
|
// delFlag: {
|
// label: '删除标志',
|
// },
|
}
|
})
|
|
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: listFundFlow,
|
getDetailApi: getFundFlow,
|
exportApi: exportFundFlow,
|
deleteApi: delFundFlow,
|
addApi: addFundFlow,
|
updateApi: updateFundFlow,
|
handleUpdateFunc: () => {
|
crudRef.value.rowEdit(selectionList.value[0]);
|
},
|
handleSelectionChangeFunc: (selection: any) => {
|
selectionList.value = selection;
|
}
|
})
|
|
|
const makeInvoice = (row: any) => {
|
proxy.$modal.confirm('是否确认银行流水号为"' + row.bankFlowNo + '"?').then(function () {
|
return confirmFundFlow(row.id);
|
}).then(() => {
|
onLoad(page.value);
|
proxy.$modal.msgSuccess("确认成功");
|
}).catch(() => { });
|
}
|
|
|
const claimDialogRef = ref();
|
// fundFlowId
|
|
const handleClaim = (row: any) => {
|
getFundFlow(row.id).then((response) => {
|
if (response.code == 200) {
|
listFundFlowClaimDetail({ fundFlowId: row.id }).then((res) => {
|
if (res.code == 200) {
|
response.data.claimDetails = res.rows;
|
claimDialogRef.value.open(response.data);
|
claimDialogRef.value.open(response.data, 'edit');
|
}
|
})
|
}
|
})
|
|
};
|
|
const handleClaimSubmit = (payload) => {
|
addFundFlowClaimDetailClaim(payload.claimDetails, payload.id).then((response) => {
|
if (response.code == 200) {
|
onLoad(page.value);
|
proxy.$modal.msgSuccess("认领成功");
|
claimDialogRef.value.handleCancel();
|
}
|
})
|
// console.log("最终提交给后端的数据包:", payload);
|
};
|
|
const handleDetails = (row: any) => {
|
getFundFlow(row.id).then((response) => {
|
if (response.code == 200) {
|
listFundFlowClaimDetail({ fundFlowId: row.id }).then((res) => {
|
if (res.code == 200) {
|
response.data.claimDetails = res.rows;
|
claimDialogRef.value.open(response.data, 'view');
|
|
}
|
})
|
}
|
})
|
|
};
|
|
const logModalRef = ref(null);
|
const handleFlow = (row: any,) => {
|
// 这里可以从 row 中直接获取日志，或者调用后端接口查询
|
listFundFlowLog({flowId:row.id}).then((res) => {
|
if (res.code == 200) {
|
logModalRef.value.open(res.rows,'payable');
|
}
|
});
|
}
|
const handleImport = () => {
|
pageF.importOpen = true;
|
}
|
const importSubmit = () => {
|
pageF.importOpen = false;
|
onLoad(page.value);
|
};
|
|
// 同步银行流水
|
const syncDialogVisible = ref(false);
|
const syncLoading = ref(false);
|
const syncFormRef = ref();
|
const syncForm = reactive({
|
acctNum: '',
|
startDate: '',
|
endDate: ''
|
});
|
const syncRules = {
|
acctNum: [{ required: true, message: '请输入银行账号', trigger: 'blur' }],
|
startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
|
endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }]
|
};
|
|
const handleSync = () => {
|
syncForm.acctNum = '';
|
syncForm.startDate = '';
|
syncForm.endDate = '';
|
syncDialogVisible.value = true;
|
};
|
|
const handleSyncSubmit = () => {
|
syncFormRef.value?.validate((valid: boolean) => {
|
if (!valid) return;
|
syncLoading.value = true;
|
syncFromCmbs(syncForm).then((response: any) => {
|
syncLoading.value = false;
|
if (response.code === 200) {
|
proxy.$modal.msgSuccess(response.msg || '同步成功');
|
syncDialogVisible.value = false;
|
onLoad(page.value);
|
} else {
|
proxy.$modal.msgError(response.msg || '同步失败');
|
}
|
}).catch((err) => {
|
syncLoading.value = false;
|
proxy.$modal.msgError('同步失败: ' + (err.msg || err.message || ''));
|
});
|
});
|
};
|
/* listFundFlowClaimDetail */
|
</script>
|
