<template>
|
<div class="app-container">
|
<el-card>
|
<!-- 标签页 -->
|
<el-tabs
|
v-model="activeTab"
|
class="info-tabs"
|
>
|
<el-tab-pane
|
v-for="tab in tabs"
|
:key="tab.name"
|
:label="tab.label"
|
:name="tab.name"
|
/>
|
</el-tabs>
|
|
<div>
|
<data-table
|
:border="true"
|
:columns="columns"
|
:loading="loading"
|
style="width: 100%; height: calc(100vh - 29em)"
|
:show-selection="true"
|
:table-data="tableData"
|
:operationsWidth="200"
|
:showOperations="false"
|
/>
|
</div>
|
<pagination
|
v-if="total > 0"
|
:layout="'total, prev, pager, next, jumper'"
|
:limit="pageSizes"
|
:page="pageNum"
|
:total="total"
|
@pagination="handPagination"
|
/>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup>
|
import {
|
onMounted,
|
reactive,
|
ref,
|
} from "vue";
|
import { ElMessage } from "element-plus";
|
import { getCarboncubeList } from "@/api/carboncubes/index.js";
|
import DataTable from "@/components/Table/ETable.vue";
|
import Pagination from "@/components/Pagination/index.vue";
|
|
// 页面状态控制
|
const loading = ref(false);
|
const activeTab = ref("PURCHASE");
|
|
// 标签页配置
|
const tabs = reactive([
|
{ name: "PURCHASE", label: "到货磅单" },
|
{ name: "SELL", label: "发货磅单" },
|
]);
|
|
// 分页状态管理
|
const pageNum = ref(1);
|
const pageSizes = ref(10);
|
const total = ref(0);
|
|
// 表格状态管理
|
const tableData = ref([]);
|
const columns = computed(() => {
|
const baseColumns = [
|
{ prop: "coal", label: "煤种类型", minWidth: 170 },
|
{ prop: "billNumber", label: "磅单编号", minWidth: 100 },
|
{ prop: "number", label: "数量", minWidth: 150 },
|
{ prop: "priceIncludingTax", label: "含税单价", minWidth: 120 },
|
{ prop: "createUser", label: "登记人", minWidth: 120 },
|
{ prop: "createTime", label: "登记日期", minWidth: 120 },
|
];
|
|
// 根据类型添加不同的第一列
|
if (activeTab.value === "SELL") {
|
return [
|
{ prop: "customerName", label: "客户名称", minWidth: 100 },
|
...baseColumns
|
];
|
} else {
|
return [
|
{ prop: "supplierName", label: "供应商名称", minWidth: 100 },
|
...baseColumns
|
];
|
}
|
});
|
|
watch(() => [pageNum.value, pageSizes.value, activeTab.value], () => getList());
|
|
const handPagination = (val) => {
|
pageNum.value = val.page;
|
pageSizes.value = val.limit;
|
getList();
|
};
|
|
const getList = () => {
|
loading.value = true;
|
const apiParams = {
|
current: pageNum.value,
|
pageSize: pageSizes.value,
|
orderType: activeTab.value,
|
};
|
getCarboncubeList(apiParams).then((res) => {
|
if (res.code !== 200) {
|
ElMessage.error("获取数据失败：" + (res?.msg || "未知错误"));
|
return;
|
}
|
|
tableData.value = res.data.records || [];
|
total.value = res.total || 0;
|
}).catch((err) => {
|
console.log(err);
|
}).finally(() => {
|
loading.value = false;
|
})
|
}
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
