增加碳立方-磅单页面

huminmin

2026-01-29 0299e8928340b844552c33751df1ffd2cc34b208

增加碳立方-磅单页面

 src/api/carboncubes/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
import request from '@/utils/request'

// èŽ·å–碳立方-榜单
export function getCarboncubeList(query) {
    return request({
        url: '/carboncubes/page',
        method: 'get',
        params: query
    })
}

 src/views/carboncubes/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,126 @@
<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>