adweb3-web/src/views/adweb/data/components/SupplierList.vue

<template>
    <a-card title="供应商">
        <div>
        <a-table
            :columns="columns"
            :data-source="tableData"
            :loading="loading"
            row-key="fk"
            :pagination="false"
        />
    </div>
    </a-card>
   
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, computed } from 'vue';

const props = defineProps({
    supplierData: {  // 修改属性名
        type: Object,
        required: true
    }
});
const loading = ref(false);

const columns = [
    {
        title: '供应商名称',
        dataIndex: 'val',
        key: 'val',
    },
    {
        title: '采购商数量',
        dataIndex: 'num_buyer',
        key: 'num_buyer',
        customRender: ({ text }) => {
          return text ? text.toLocaleString('en-US') : '0';
        },
    },
    {
        title: '金额($)',
        dataIndex: 'sum_amount',
        key: 'sum_amount',
        customRender: ({ text }) => formatNumber(text),
    },
    {
        title: '重量(KG)',
        dataIndex: 'sum_weight',
        key: 'sum_weight',
        customRender: ({ text }) => formatNumber(text),
    },
    {
        title: '交易次数',
        dataIndex: 'count',
        key: 'count',
        customRender: ({ text }) => {
          return text ? text.toLocaleString('en-US') : '0';
        },
    },
];
// 计算表格数据
const tableData = computed(() => {
    if (!props.supplierData?.buckets) return [];  // 修改属性名
    
    return props.supplierData.buckets;
});
// 格式化函数
const formatNumber = (value: number | string) => {
      if (!value) return '0.00';
      return Number(value).toLocaleString('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      });
    };

onMounted(async () => {
   
});
// 监听数据变化
watch(
    () => props.supplierData // 修改属性名
);
</script>

<style scoped>
/* Add any necessary styles here */
</style>