<template>
|
<div class="app-container">
|
<div class="search_form">
|
<div>
|
<span class="search_title">采购合同号：</span>
|
<el-input
|
v-model="searchForm.purchaseContractNumber"
|
style="width: 240px"
|
placeholder="请输入"
|
@change="handleQuery"
|
clearable
|
:prefix-icon="Search"
|
/>
|
<span class="search_title" style="margin-left: 10px">供应商：</span>
|
<el-input
|
v-model="searchForm.supplierName"
|
style="width: 240px"
|
placeholder="请输入"
|
@change="handleQuery"
|
clearable
|
:prefix-icon="Search"
|
/>
|
<span class="search_title" style="margin-left: 10px">来票日期：</span>
|
<el-date-picker
|
style="width: 240px"
|
v-model="searchForm.issueDate"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
type="daterange"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
clearable
|
@change="changeDateRange"
|
@clear="clearRange"
|
/>
|
<el-button type="primary" @click="handleQuery" style="margin-left: 10px"
|
>搜索</el-button
|
>
|
</div>
|
<div>
|
<el-button @click="handleOut">导出</el-button>
|
</div>
|
</div>
|
<div class="table_list">
|
<el-table
|
:data="tableData"
|
border
|
v-loading="tableLoading"
|
:expand-row-keys="expandedRowKeys"
|
:row-key="(row) => row.id"
|
show-summary
|
:summary-method="summarizeMainTable"
|
@expand-change="expandChange"
|
height="calc(100vh - 18.5em)"
|
>
|
<el-table-column align="center" label="序号" type="index" width="55" />
|
<el-table-column type="expand">
|
<template #default="props">
|
<el-table
|
:data="props.row.children"
|
border
|
show-summary
|
:summary-method="summarizeChildrenTable"
|
>
|
<el-table-column
|
align="center"
|
label="序号"
|
type="index"
|
width="60"
|
/>
|
<el-table-column label="产品大类" prop="productCategory" />
|
<el-table-column label="规格型号" prop="specificationModel" />
|
<el-table-column label="单位" prop="unit" />
|
<el-table-column label="数量" prop="quantity" />
|
<el-table-column label="税率(%)" prop="taxRate" />
|
<el-table-column
|
label="含税单价(元)"
|
prop="taxInclusiveUnitPrice"
|
:formatter="formattedNumber"
|
/>
|
<el-table-column
|
label="含税总价(元)"
|
prop="taxInclusiveTotalPrice"
|
:formatter="formattedNumber"
|
/>
|
<el-table-column
|
label="不含税总价(元)"
|
prop="taxExclusiveTotalPrice"
|
:formatter="formattedNumber"
|
/>
|
<el-table-column label="本次来票数" prop="ticketsNum" />
|
<el-table-column
|
label="本次来票金额(元)"
|
prop="ticketsAmount"
|
:formatter="formattedNumber"
|
/>
|
<el-table-column label="未来票数" prop="futureTickets" />
|
<el-table-column
|
label="未来票金额(元)"
|
prop="futureTicketsAmount"
|
:formatter="formattedNumber"
|
/>
|
</el-table>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="采购合同号"
|
prop="purchaseContractNumber"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
label="销售合同号"
|
prop="salesContractNo"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
label="供应商名称"
|
prop="supplierName"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
label="发票号"
|
prop="invoiceNumber"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
label="合同金额(元)"
|
prop="invoiceAmount"
|
show-overflow-tooltip
|
:formatter="formattedNumber"
|
/>
|
<el-table-column label="开票人" prop="issUer" show-overflow-tooltip />
|
<el-table-column
|
label="开票日期"
|
prop="issueDate"
|
show-overflow-tooltip
|
/>
|
</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>
|
</div>
|
</template>
|
|
<script setup>
|
import pagination from "@/components/PIMTable/Pagination.vue";
|
import { ref } from "vue";
|
import { Search } from "@element-plus/icons-vue";
|
import { ElMessageBox } from "element-plus";
|
import { productRecordList } from "@/api/procurementManagement/procurementInvoiceLedger.js";
|
import { invoiceListPage } from "@/api/procurementManagement/procurementInvoiceLedger.js";
|
import dayjs from "dayjs";
|
|
const { proxy } = getCurrentInstance();
|
const tableData = ref([]);
|
const tableLoading = ref(false);
|
const page = reactive({
|
current: 1,
|
size: 100,
|
});
|
const total = ref(0);
|
// 用户信息表单弹框数据
|
const data = reactive({
|
searchForm: {
|
purchaseContractNumber: "",
|
supplierName: "",
|
issueDate: [
|
dayjs().startOf("month").format("YYYY-MM-DD"),
|
dayjs().endOf("month").format("YYYY-MM-DD"),
|
],
|
issueDateStart: dayjs().startOf("month").format("YYYY-MM-DD"),
|
issueDateEnd: dayjs().endOf("month").format("YYYY-MM-DD"),
|
},
|
form: {
|
issueDate: "", // 开票日期
|
purchaseLedgerId: "",
|
purchaseLedgerNo: "",
|
issUerId: "", // 开票人id
|
issUer: "", // 开票人姓名
|
},
|
rules: {
|
purchaseLedgerId: [
|
{ required: true, message: "请选择", trigger: "change" },
|
],
|
},
|
});
|
const { searchForm } = toRefs(data);
|
|
// 查询列表
|
/** 搜索按钮操作 */
|
const handleQuery = () => {
|
page.current = 1;
|
getList();
|
};
|
const paginationChange = (obj) => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
const getList = () => {
|
tableLoading.value = true;
|
const { issueDate, ...rest } = searchForm.value;
|
invoiceListPage({ ...rest, ...page })
|
.then((res) => {
|
tableLoading.value = false;
|
tableData.value = res.records;
|
tableData.value.map((item) => {
|
item.children = [];
|
});
|
total.value = res.total;
|
expandedRowKeys.value = [];
|
})
|
.catch(() => {
|
tableLoading.value = false;
|
});
|
};
|
const formattedNumber = (row, column, cellValue) => {
|
return parseFloat(cellValue).toFixed(2);
|
};
|
// 表格选择数据
|
const expandedRowKeys = ref([]);
|
// 展开行
|
const expandChange = (row, expandedRows) => {
|
if (expandedRows.length > 0) {
|
expandedRowKeys.value = [];
|
try {
|
productRecordList({ id: row.id }).then((res) => {
|
const index = tableData.value.findIndex((item) => item.id === row.id);
|
if (index > -1) {
|
tableData.value[index].children = res;
|
}
|
expandedRowKeys.value.push(row.id);
|
});
|
} catch (error) {
|
console.log(error);
|
}
|
} else {
|
expandedRowKeys.value = [];
|
}
|
};
|
// 主表合计方法
|
const summarizeMainTable = (param) => {
|
return proxy.summarizeTable(param, ["invoiceAmount"], {
|
ticketsNum: { noDecimal: true }, // 不保留小数
|
futureTickets: { noDecimal: true }, // 不保留小数
|
});
|
};
|
// 子表合计方法
|
const summarizeChildrenTable = (param) => {
|
return proxy.summarizeTable(
|
param,
|
[
|
"taxInclusiveUnitPrice",
|
"taxInclusiveTotalPrice",
|
"taxExclusiveTotalPrice",
|
"ticketsNum",
|
"ticketsAmount",
|
"futureTickets",
|
"futureTicketsAmount",
|
],
|
{
|
ticketsNum: { noDecimal: true }, // 不保留小数
|
futureTickets: { noDecimal: true }, // 不保留小数
|
}
|
);
|
};
|
|
// 导出
|
const handleOut = () => {
|
ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
proxy.download("/purchase/registration/export", {}, "来票登记.xlsx");
|
})
|
.catch(() => {
|
proxy.$modal.msg("已取消");
|
});
|
};
|
|
const changeDateRange = (date) => {
|
if (date) {
|
searchForm.receiptPaymentDateStart = date[0];
|
searchForm.receiptPaymentDateEnd = date[1];
|
getList();
|
}
|
};
|
|
const clearRange = () => {
|
searchForm.value.issueDate = [];
|
searchForm.value.issueDateStart = undefined;
|
searchForm.value.issueDateEnd = undefined;
|
getList();
|
};
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
|
<style scoped lang="scss"></style>
|
