| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="search_form"> |
| | | <div> |
| | | <el-form :inline="true" :model="searchForm" style="width: 100%"> |
| | | <el-row justify="space-between"> |
| | | <el-col :span="20"> |
| | | <el-form-item label="供应商名称/合同号"> |
| | | <el-input |
| | | v-model="searchForm.supplierNameOrContractNo" |
| | | style="width: 240px" |
| | | placeholder="输入供应商名称/合同号搜索" |
| | | clearable |
| | | prefix-icon="Search" |
| | | @change="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="不显示待回款"> |
| | | <el-checkbox |
| | | v-model="searchForm.status" |
| | | :label="0" |
| | | @change="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="handleQuery"> 搜索 </el-button> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item style="float: right; margin-right: unset"> |
| | | <el-button type="primary" @click="openForm('add')"> |
| | | 新增付款 |
| | | </el-button> |
| | | <el-button type="danger" plain @click="handleDelete"> |
| | | 删除 |
| | | </el-button> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <!-- <div> |
| | | <span class="search_title">供应商名称/合同号:</span> |
| | | <el-input v-model="searchForm.supplierNameOrContractNo" style="width: 240px" placeholder="输入供应商名称/合同号搜索" |
| | | @change="handleQuery" clearable :prefix-icon="Search" /> |
| | | <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button> |
| | | <el-input |
| | | v-model="searchForm.supplierNameOrContractNo" |
| | | style="width: 240px" |
| | | placeholder="输入供应商名称/合同号搜索" |
| | | @change="handleQuery" |
| | | clearable |
| | | :prefix-icon="Search" |
| | | /> |
| | | <el-button |
| | | type="primary" |
| | | @click="handleQuery" |
| | | style="margin-left: 10px" |
| | | > |
| | | 搜索 |
| | | </el-button> |
| | | </div> |
| | | <div> |
| | | <el-button type="primary" @click="openForm('add')">新增付款</el-button> |
| | | <el-button type="danger" plain @click="handleDelete">删除</el-button> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | <div class="table_list"> |
| | | <PIMTable :column="tableColumn" :tableData="tableData" :page="page" :isSelection="true" |
| | | <PIMTable |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :page="page" |
| | | :isSelection="true" |
| | | :isShowSummary="isShowSummarySon" |
| | | :summaryMethod="summarizeMainTable1" |
| | | :handleSelectionChange="handleSelectionChange" :tableLoading="tableLoading" @pagination="pagination" |
| | | :total="total"></PIMTable> |
| | | :handleSelectionChange="handleSelectionChange" |
| | | :tableLoading="tableLoading" |
| | | @pagination="pagination" |
| | | :total="total" |
| | | ></PIMTable> |
| | | </div> |
| | | <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '新增付款登记' : '编辑付款登记'" width="60%" |
| | | @close="closeDia"> |
| | | <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef"> |
| | | <el-dialog |
| | | v-model="dialogFormVisible" |
| | | :title="operationType === 'add' ? '新增付款登记' : '编辑付款登记'" |
| | | width="60%" |
| | | @close="closeDia" |
| | | > |
| | | <el-form |
| | | :model="form" |
| | | label-width="140px" |
| | | label-position="top" |
| | | :rules="rules" |
| | | ref="formRef" |
| | | > |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="采购合同号:" prop="purchaseContractNumber"> |
| | | <el-input v-model="form.purchaseContractNumber" placeholder="自动填充" clearable disabled /> |
| | | <el-input |
| | | v-model="form.purchaseContractNumber" |
| | | placeholder="自动填充" |
| | | clearable |
| | | disabled |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="销售合同号:" prop="salesContractNo"> |
| | | <el-input v-model="form.salesContractNo" placeholder="自动填充" clearable disabled /> |
| | | <el-input |
| | | v-model="form.salesContractNo" |
| | | placeholder="自动填充" |
| | | clearable |
| | | disabled |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="供应商名称:" prop="supplierName"> |
| | | <el-input v-model="form.supplierName" placeholder="自动填充" clearable disabled /> |
| | | <el-input |
| | | v-model="form.supplierName" |
| | | placeholder="自动填充" |
| | | clearable |
| | | disabled |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="发票号:" prop="invoiceNumber"> |
| | | <el-input v-model="form.invoiceNumber" placeholder="自动填充" clearable disabled /> |
| | | <el-input |
| | | v-model="form.invoiceNumber" |
| | | placeholder="自动填充" |
| | | clearable |
| | | disabled |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="发票金额(元):" prop="invoiceAmount"> |
| | | <el-input type="number" :step="0.01" v-model="form.invoiceAmount" placeholder="自动填充" clearable disabled /> |
| | | <el-input |
| | | type="number" |
| | | :step="0.01" |
| | | v-model="form.invoiceAmount" |
| | | placeholder="自动填充" |
| | | clearable |
| | | disabled |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="本次付款金额:" prop="currentPaymentAmount"> |
| | | <el-input type="number" :step="0.01" v-model="form.currentPaymentAmount" placeholder="请输入" clearable /> |
| | | <el-input |
| | | type="number" |
| | | :step="0.01" |
| | | v-model="form.currentPaymentAmount" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="付款方式:" prop="paymentMethod"> |
| | | <el-select v-model="form.paymentMethod" placeholder="请选择" clearable> |
| | | <el-select |
| | | v-model="form.paymentMethod" |
| | | placeholder="请选择" |
| | | clearable |
| | | > |
| | | <el-option label="电汇" value="电汇" /> |
| | | <el-option label="承兑" value="承兑" /> |
| | | </el-select> |
| | |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="登记人:" prop="registrant"> |
| | | <el-input v-model="form.registrant" placeholder="请输入" clearable disabled /> |
| | | <el-input |
| | | v-model="form.registrant" |
| | | placeholder="请输入" |
| | | clearable |
| | | disabled |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="付款日期:" prop="paymentDate"> |
| | | <el-date-picker disabled style="width: 100%" v-model="form.paymentDate" value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" type="date" placeholder="请选择" clearable /> |
| | | <el-date-picker |
| | | disabled |
| | | style="width: 100%" |
| | | v-model="form.paymentDate" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | type="date" |
| | | placeholder="请选择" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="登记日期:" prop="registrationtDate"> |
| | | <el-input v-model="form.registrationtDate" placeholder="请输入" clearable disabled /> |
| | | <el-input |
| | | v-model="form.registrationtDate" |
| | | placeholder="请输入" |
| | | clearable |
| | | disabled |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref } from 'vue' |
| | | import { ref } from "vue"; |
| | | import { Search } from "@element-plus/icons-vue"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import useUserStore from "@/store/modules/user.js"; |
| | | import { |
| | | byPurchaseId, |
| | | paymentRegistrationAdd, paymentRegistrationDel, |
| | | paymentRegistrationAdd, |
| | | paymentRegistrationDel, |
| | | paymentRegistrationEdit, |
| | | getTicketNo |
| | | getTicketNo, |
| | | } from "@/api/procurementManagement/paymentEntry.js"; |
| | | import {invoiceListPage} from "@/api/procurementManagement/procurementInvoiceLedger.js" |
| | | const { proxy } = getCurrentInstance() |
| | | import { invoiceListPage } from "@/api/procurementManagement/procurementInvoiceLedger.js"; |
| | | import useFormData from "@/hooks/useFormData"; |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | | const tableColumn = ref([ |
| | | { |
| | | label: '采购合同号', |
| | | prop: 'purchaseContractNumber', |
| | | label: "采购合同号", |
| | | prop: "purchaseContractNumber", |
| | | }, |
| | | { |
| | | label: '销售合同号', |
| | | prop: 'salesContractNo', |
| | | label: "销售合同号", |
| | | prop: "salesContractNo", |
| | | }, |
| | | { |
| | | label: '供应商名称', |
| | | prop: 'supplierName', |
| | | label: "供应商名称", |
| | | prop: "supplierName", |
| | | }, |
| | | { |
| | | label: '发票号', |
| | | prop: 'invoiceNumber' |
| | | label: "发票号", |
| | | prop: "invoiceNumber", |
| | | }, |
| | | { |
| | | label: '发票金额(元)', |
| | | prop: 'invoiceAmount', |
| | | label: "发票金额(元)", |
| | | prop: "invoiceAmount", |
| | | formatData: (params) => { |
| | | return parseFloat(params).toFixed(2); |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | label: '已付款金额(元)', |
| | | prop: 'paymentAmountTotal', |
| | | label: "已付款金额(元)", |
| | | prop: "paymentAmountTotal", |
| | | formatData: (params) => { |
| | | return parseFloat(params).toFixed(2); |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | label: '待付款金额(元)', |
| | | prop: 'unPaymentAmountTotal', |
| | | label: "待付款金额(元)", |
| | | prop: "unPaymentAmountTotal", |
| | | formatData: (params) => { |
| | | return parseFloat(params).toFixed(2); |
| | | } |
| | | }, |
| | | ]) |
| | | const tableData = ref([]) |
| | | const selectedRows = ref([]) |
| | | const tableLoading = ref(false) |
| | | const invoiceNumberList = ref([]) |
| | | const userStore = useUserStore() |
| | | }, |
| | | ]); |
| | | const tableData = ref([]); |
| | | const selectedRows = ref([]); |
| | | const tableLoading = ref(false); |
| | | const invoiceNumberList = ref([]); |
| | | const userStore = useUserStore(); |
| | | const page = reactive({ |
| | | current: 1, |
| | | size: 100, |
| | | }) |
| | | const total = ref(0) |
| | | }); |
| | | const total = ref(0); |
| | | |
| | | // 用户信息表单弹框数据 |
| | | const operationType = ref('') |
| | | const dialogFormVisible = ref(false) |
| | | const operationType = ref(""); |
| | | const dialogFormVisible = ref(false); |
| | | const data = reactive({ |
| | | searchForm: { |
| | | supplierNameOrContractNo: '', |
| | | supplierNameOrContractNo: "", |
| | | status: false, |
| | | }, |
| | | form: { |
| | | purchaseContractNumber:'', |
| | | purchaseLedgerId: '', |
| | | salesContractNo: '', |
| | | supplierName: '', |
| | | invoiceNumber: '', |
| | | invoiceAmount: '', |
| | | taxRate: '', |
| | | currentPaymentAmount: '', |
| | | paymentMethod: '', |
| | | registrant: '', |
| | | registrantId: '', |
| | | paymentDate: '', |
| | | purchaseContractNumber: "", |
| | | purchaseLedgerId: "", |
| | | salesContractNo: "", |
| | | supplierName: "", |
| | | invoiceNumber: "", |
| | | invoiceAmount: "", |
| | | taxRate: "", |
| | | currentPaymentAmount: "", |
| | | paymentMethod: "", |
| | | registrant: "", |
| | | registrantId: "", |
| | | paymentDate: "", |
| | | registrationtDate: "", |
| | | }, |
| | | rules: { |
| | | purchaseLedgerId: [{ required: true, message: "请选择", trigger: "change" }], |
| | | currentPaymentAmount: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | purchaseLedgerId: [ |
| | | { required: true, message: "请选择", trigger: "change" }, |
| | | ], |
| | | currentPaymentAmount: [ |
| | | { required: true, message: "请输入", trigger: "blur" }, |
| | | ], |
| | | paymentMethod: [{ required: true, message: "请选择", trigger: "change" }], |
| | | invoiceNumber: [{ required: true, message: "请选择采购合同号", trigger: "change" }], |
| | | } |
| | | }) |
| | | const { searchForm, form, rules } = toRefs(data) |
| | | invoiceNumber: [ |
| | | { required: true, message: "请选择采购合同号", trigger: "change" }, |
| | | ], |
| | | }, |
| | | }); |
| | | const { form, rules } = toRefs(data); |
| | | const { form: searchForm, resetForm } = useFormData(data.searchForm); |
| | | const isShowSummarySon = ref(true); |
| | | |
| | | // 子表合计方法 |
| | | const summarizeMainTable1 = (param) => { |
| | | return proxy.summarizeTable(param, ['invoiceAmount', 'paymentAmountTotal', 'unPaymentAmountTotal'], { |
| | | return proxy.summarizeTable( |
| | | param, |
| | | ["invoiceAmount", "paymentAmountTotal", "unPaymentAmountTotal"], |
| | | { |
| | | ticketsNum: { noDecimal: true }, // 不保留小数 |
| | | futureTickets: { noDecimal: true }, // 不保留小数 |
| | | }); |
| | | } |
| | | ); |
| | | }; |
| | | // 查询列表 |
| | | /** 搜索按钮操作 */ |
| | | const handleQuery = () => { |
| | | page.current = 1 |
| | | getList() |
| | | } |
| | | page.current = 1; |
| | | getList(); |
| | | }; |
| | | const pagination = (obj) => { |
| | | page.current = obj.page; |
| | | page.size = obj.limit; |
| | | getList() |
| | | } |
| | | getList(); |
| | | }; |
| | | const getList = () => { |
| | | tableLoading.value = true |
| | | invoiceListPage({ ...searchForm.value, ...page }).then(res => { |
| | | tableLoading.value = false |
| | | tableData.value = res.records |
| | | total.value = res.total |
| | | }) |
| | | } |
| | | tableLoading.value = true; |
| | | invoiceListPage({ ...searchForm, ...page }).then((res) => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.records; |
| | | total.value = res.total; |
| | | }); |
| | | }; |
| | | // 表格选择数据 |
| | | const handleSelectionChange = (selection) => { |
| | | selectedRows.value = selection |
| | | } |
| | | selectedRows.value = selection; |
| | | }; |
| | | // 打开弹框 |
| | | const openForm = (type, row) => { |
| | | if(selectedRows.value.length !== 1 ) { |
| | | proxy.$message.error("请选择一条发票数据") |
| | | return |
| | | proxy.$message.error("请选择一条发票数据"); |
| | | return; |
| | | } |
| | | operationType.value = type |
| | | form.value = {} |
| | | form.value = {...selectedRows.value[0]} |
| | | form.value.ticketRegistrationId = selectedRows.value[0].id |
| | | form.value.id = null |
| | | operationType.value = type; |
| | | form.value = {}; |
| | | form.value = { ...selectedRows.value[0] }; |
| | | form.value.ticketRegistrationId = selectedRows.value[0].id; |
| | | form.value.id = null; |
| | | // 查询采购合同号 |
| | | form.value.registrationtDate = getCurrentDate(); |
| | | form.value.paymentDate = getCurrentDate(); |
| | | form.value.registrant = userStore.name |
| | | dialogFormVisible.value = true |
| | | } |
| | | form.value.registrant = userStore.name; |
| | | dialogFormVisible.value = true; |
| | | }; |
| | | // 选择发票号以后给发票金额赋值 |
| | | const setInvoiceAmount = (value) => { |
| | | if (value) { |
| | | invoiceNumberList.value.forEach(item => { |
| | | invoiceNumberList.value.forEach((item) => { |
| | | if (item.invoiceNumber === value) { |
| | | form.value.invoiceAmount = item.invoiceAmount |
| | | form.value.ticketRegistrationId = item.id |
| | | form.value.invoiceAmount = item.invoiceAmount; |
| | | form.value.ticketRegistrationId = item.id; |
| | | } |
| | | }) |
| | | }); |
| | | } else { |
| | | form.value.invoiceAmount = '' |
| | | form.value.invoiceAmount = ""; |
| | | } |
| | | } |
| | | }; |
| | | // 选择采购合同号赋值 |
| | | const setInfo = (value) => { |
| | | getTicketNo({ id: value }).then((res) => { |
| | | invoiceNumberList.value = res.data |
| | | }) |
| | | invoiceNumberList.value = res.data; |
| | | }); |
| | | if (value) { |
| | | byPurchaseId(value).then(res => { |
| | | form.value.salesContractNo = res.data.salesContractNo |
| | | form.value.supplierName = res.data.supplierName |
| | | form.value.taxRate = res.data.taxRate |
| | | form.value.supplierId = res.data.supplierId |
| | | }) |
| | | byPurchaseId(value).then((res) => { |
| | | form.value.salesContractNo = res.data.salesContractNo; |
| | | form.value.supplierName = res.data.supplierName; |
| | | form.value.taxRate = res.data.taxRate; |
| | | form.value.supplierId = res.data.supplierId; |
| | | }); |
| | | } else { |
| | | form.value.salesContractNo = '' |
| | | form.value.supplierName = '' |
| | | form.value.taxRate = '' |
| | | form.value.supplierId = '' |
| | | form.value.salesContractNo = ""; |
| | | form.value.supplierName = ""; |
| | | form.value.taxRate = ""; |
| | | form.value.supplierId = ""; |
| | | } |
| | | } |
| | | }; |
| | | // 提交表单 |
| | | const submitForm = () => { |
| | | proxy.$refs["formRef"].validate(valid => { |
| | | proxy.$refs["formRef"].validate((valid) => { |
| | | if (valid) { |
| | | if (operationType.value === "edit") { |
| | | submitEdit() |
| | | submitEdit(); |
| | | } else { |
| | | submitAdd() |
| | | submitAdd(); |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | }); |
| | | }; |
| | | // 提交新增 |
| | | const submitAdd = () => { |
| | | paymentRegistrationAdd(form.value).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功") |
| | | closeDia() |
| | | getList() |
| | | }) |
| | | } |
| | | paymentRegistrationAdd(form.value).then((res) => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | getList(); |
| | | }); |
| | | }; |
| | | // 提交修改 |
| | | const submitEdit = () => { |
| | | paymentRegistrationEdit(form.value).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功") |
| | | closeDia() |
| | | getList() |
| | | }) |
| | | } |
| | | paymentRegistrationEdit(form.value).then((res) => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | getList(); |
| | | }); |
| | | }; |
| | | // 关闭弹框 |
| | | const closeDia = () => { |
| | | proxy.resetForm("formRef") |
| | | dialogFormVisible.value = false |
| | | } |
| | | proxy.resetForm("formRef"); |
| | | dialogFormVisible.value = false; |
| | | }; |
| | | // 删除 |
| | | const handleDelete = () => { |
| | | let ids = [] |
| | | let ids = []; |
| | | if (selectedRows.value.length > 0) { |
| | | ids = selectedRows.value.map(item => item.id); |
| | | ids = selectedRows.value.map((item) => item.id); |
| | | } else { |
| | | proxy.$modal.msgWarning('请选择数据') |
| | | return |
| | | proxy.$modal.msgWarning("请选择数据"); |
| | | return; |
| | | } |
| | | ElMessageBox.confirm( |
| | | '选中的内容将被删除,是否确认删除?', |
| | | '删除提示', { |
| | | confirmButtonText: '确认', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | } |
| | | ).then(() => { |
| | | tableLoading.value = true |
| | | paymentRegistrationDel(ids).then(res => { |
| | | proxy.$modal.msgSuccess("删除成功") |
| | | getList() |
| | | }).finally(() => { |
| | | tableLoading.value = false |
| | | ElMessageBox.confirm("选中的内容将被删除,是否确认删除?", "删除提示", { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }) |
| | | }).catch(() => { |
| | | proxy.$modal.msg("已取消") |
| | | .then(() => { |
| | | tableLoading.value = true; |
| | | paymentRegistrationDel(ids) |
| | | .then((res) => { |
| | | proxy.$modal.msgSuccess("删除成功"); |
| | | getList(); |
| | | }) |
| | | } |
| | | .finally(() => { |
| | | tableLoading.value = false; |
| | | }); |
| | | }) |
| | | .catch(() => { |
| | | proxy.$modal.msg("已取消"); |
| | | }); |
| | | }; |
| | | // 获取当前日期并格式化为 YYYY-MM-DD |
| | | function getCurrentDate() { |
| | | const today = new Date(); |
| | | const year = today.getFullYear(); |
| | | const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始 |
| | | const day = String(today.getDate()).padStart(2, '0'); |
| | | const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从0开始 |
| | | const day = String(today.getDate()).padStart(2, "0"); |
| | | return `${year}-${month}-${day}`; |
| | | } |
| | | getList() |
| | | getList(); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"></style> |
| | | <style scoped lang="scss"> |
| | | .table_list { |
| | | margin-top: unset; |
| | | } |
| | | </style> |