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>

 src/views/salesOutbound/components/formDia.vue

@@ -33,13 +33,13 @@
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="煤种" prop="coalId">
              <el-select v-model="form.coalId" placeholder="请选择煤种" @change="setInfo" :disabled="operationType === 'view'" filterable>
            <el-form-item label="煤种" prop="stockId">
              <el-select v-model="form.stockId" placeholder="请选择煤种" @change="setInfo" :disabled="operationType === 'view'" filterable>
                <el-option
                    v-for="item in coalOptions"
                    :key="item.coalId"
                    :key="item.id"
                    :label="item.coal"
                    :value="item.coalId"
                    :value="item.id"
                />
              </el-select>
            </el-form-item>
@@ -152,6 +152,7 @@
  form: {
    saleDate: '',
    customerId: '',
    stockId: '',
    coalId: '',
    unit: '',
    saleQuantity: '',
@@ -170,7 +171,7 @@
  rules: {
    saleDate: [{ required: true, message: "请选择日期", trigger: "change" },],
        customerId: [{ required: true, message: "请选择客户", trigger: "change" },],
        coalId: [{ required: true, message: "请选择煤种", trigger: "change" },],
    stockId: [{ required: true, message: "请选择煤种", trigger: "change" },],
        unit: [{ required: true, message: "请输入", trigger: "blur" },],
        saleQuantity: [{ required: true, message: "请输入", trigger: "blur" },],
        salePrice: [{ required: true, message: "请输入", trigger: "blur" },],
@@ -228,11 +229,13 @@
    form.value.inventoryQuantity = coalOptions.value[index].inventoryQuantity
    form.value.priceIncludingTax = coalOptions.value[index].priceIncludingTax
    form.value.unit = coalOptions.value[index].unit
    form.value.coalId = coalOptions.value[index].coalId
  }
  if (!val) {
    form.value.inventoryQuantity = ''
    form.value.priceIncludingTax = ''
    form.value.unit = ''
    form.value.coalId = ''
  }
}
// è®¡ç®—