<template>
|
<el-dialog :model-value="visible"
|
:title="title"
|
width="60%"
|
:close-on-click-modal="false"
|
@update:model-value="handleVisibleChange"
|
@close="closeDialog">
|
<div class="payment-record-dialog">
|
<div class="dialog-header">
|
<span class="party-name">{{ partyName }}</span>
|
<el-button type="primary"
|
@click="openAddForm">新增</el-button>
|
</div>
|
<el-table :data="tableData"
|
border
|
v-loading="tableLoading"
|
height="380px">
|
<el-table-column align="center"
|
label="序号"
|
type="index"
|
width="60" />
|
<el-table-column label="发生日期"
|
prop="recordDate"
|
width="130"
|
show-overflow-tooltip />
|
<el-table-column label="金额(元)"
|
prop="amount"
|
width="140"
|
show-overflow-tooltip>
|
<template #default="{ row }">
|
{{ formatAmount(row.amount) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="方式"
|
prop="paymentMethod"
|
width="140"
|
show-overflow-tooltip />
|
<el-table-column label="备注"
|
prop="remark"
|
show-overflow-tooltip />
|
<el-table-column label="操作"
|
align="center"
|
width="140"
|
fixed="right">
|
<template #default="{ row }">
|
<el-button link
|
type="primary"
|
@click="openEditForm(row)">编辑</el-button>
|
<el-button link
|
type="danger"
|
@click="handleDelete(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="total > 0"
|
:total="total"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page="page.current"
|
:limit="page.size"
|
@pagination="paginationChange" />
|
</div>
|
|
<el-dialog v-model="formVisible"
|
:title="form.id ? '编辑流水' : '新增流水'"
|
width="500px"
|
append-to-body
|
:close-on-click-modal="false"
|
@close="resetForm">
|
<el-form :model="form"
|
label-width="100px"
|
:rules="rules"
|
ref="formRef">
|
<el-form-item label="发生日期"
|
prop="recordDate">
|
<el-date-picker v-model="form.recordDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
placeholder="请选择"
|
style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="金额(元)"
|
prop="amount">
|
<el-input-number v-model="form.amount"
|
:min="0"
|
:precision="2"
|
:step="0.01"
|
placeholder="请输入"
|
style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="方式"
|
prop="paymentMethod">
|
<el-input v-model="form.paymentMethod"
|
placeholder="请输入"
|
clearable />
|
</el-form-item>
|
<el-form-item label="备注"
|
prop="remark">
|
<el-input v-model="form.remark"
|
type="textarea"
|
:rows="3"
|
placeholder="请输入"
|
clearable />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary"
|
@click="submitForm">确认</el-button>
|
<el-button @click="formVisible = false">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, reactive, watch, getCurrentInstance } from "vue";
|
import { ElMessageBox } from "element-plus";
|
import pagination from "@/components/PIMTable/Pagination.vue";
|
import {
|
paymentRecordPage,
|
addPaymentRecord,
|
updatePaymentRecord,
|
delPaymentRecord,
|
} from "@/api/financialManagement/paymentRecord.js";
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
title: {
|
type: String,
|
default: "收付款流水",
|
},
|
// 1=客户，2=供应商
|
partyType: {
|
type: [String, Number],
|
required: true,
|
},
|
partyId: {
|
type: [String, Number],
|
default: "",
|
},
|
partyName: {
|
type: String,
|
default: "",
|
},
|
// 1=付款，2=回款
|
direction: {
|
type: [String, Number],
|
required: true,
|
},
|
});
|
|
const emit = defineEmits(["update:visible", "changed"]);
|
|
const { proxy } = getCurrentInstance();
|
|
const tableData = ref([]);
|
const tableLoading = ref(false);
|
const total = ref(0);
|
const page = reactive({
|
current: 1,
|
size: 10,
|
});
|
|
const formVisible = ref(false);
|
const formRef = ref(null);
|
const form = ref(buildEmptyForm());
|
const rules = {
|
recordDate: [{ required: true, message: "请选择发生日期", trigger: "change" }],
|
amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
|
};
|
|
function buildEmptyForm() {
|
return {
|
id: "",
|
recordDate: "",
|
amount: undefined,
|
paymentMethod: "",
|
remark: "",
|
};
|
}
|
|
const formatAmount = amount => {
|
return amount ? parseFloat(amount).toFixed(2) : "0.00";
|
};
|
|
const handleVisibleChange = val => {
|
emit("update:visible", val);
|
};
|
|
const closeDialog = () => {
|
page.current = 1;
|
tableData.value = [];
|
total.value = 0;
|
formVisible.value = false;
|
};
|
|
const getList = () => {
|
if (!props.partyId) {
|
tableData.value = [];
|
total.value = 0;
|
return;
|
}
|
tableLoading.value = true;
|
paymentRecordPage({
|
pageNum: page.current,
|
pageSize: page.size,
|
partyType: props.partyType,
|
partyId: props.partyId,
|
direction: props.direction,
|
})
|
.then(res => {
|
tableLoading.value = false;
|
const result = res.data || {};
|
tableData.value = result.records || [];
|
total.value = result.total || 0;
|
})
|
.catch(() => {
|
tableLoading.value = false;
|
});
|
};
|
|
const paginationChange = obj => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
const openAddForm = () => {
|
form.value = buildEmptyForm();
|
formVisible.value = true;
|
};
|
|
const openEditForm = row => {
|
form.value = {
|
id: row.id,
|
recordDate: row.recordDate || "",
|
amount: row.amount === null || row.amount === undefined ? undefined : Number(row.amount),
|
paymentMethod: row.paymentMethod || "",
|
remark: row.remark || "",
|
};
|
formVisible.value = true;
|
};
|
|
const resetForm = () => {
|
formRef.value?.resetFields();
|
form.value = buildEmptyForm();
|
};
|
|
const submitForm = () => {
|
formRef.value?.validate(valid => {
|
if (!valid) {
|
return;
|
}
|
const payload = {
|
partyType: props.partyType,
|
partyId: props.partyId,
|
direction: props.direction,
|
amount: form.value.amount,
|
recordDate: form.value.recordDate || null,
|
paymentMethod: form.value.paymentMethod,
|
remark: form.value.remark,
|
};
|
const isEdit = !!form.value.id;
|
const submitRequest = isEdit
|
? updatePaymentRecord({ ...payload, id: form.value.id })
|
: addPaymentRecord(payload);
|
submitRequest.then(() => {
|
proxy.$modal.msgSuccess(isEdit ? "修改成功" : "新增成功");
|
formVisible.value = false;
|
getList();
|
emit("changed");
|
});
|
});
|
};
|
|
const handleDelete = row => {
|
// 该接口后端无归属校验，任何登录用户可删任意流水，故确认框带上日期金额定位
|
ElMessageBox.confirm(
|
`确定删除「${row.recordDate || "未填日期"} / ${formatAmount(row.amount)} 元」这条流水吗？删除后不可恢复。`,
|
"删除流水",
|
{
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
}
|
)
|
.then(() => {
|
delPaymentRecord([row.id]).then(() => {
|
proxy.$modal.msgSuccess("删除成功");
|
getList();
|
emit("changed");
|
});
|
})
|
.catch(() => {
|
proxy.$modal.msg("已取消");
|
});
|
};
|
|
watch(
|
() => props.visible,
|
val => {
|
if (val) {
|
page.current = 1;
|
getList();
|
}
|
}
|
);
|
</script>
|
|
<style scoped lang="scss">
|
.payment-record-dialog {
|
.dialog-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 12px;
|
|
.party-name {
|
font-size: 15px;
|
font-weight: 600;
|
color: #303133;
|
}
|
}
|
}
|
</style>
|
