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

<template>
  <div inert="true">
    <a-range-picker v-model:value="date" />
    <div v-if="supplier">
      <h1>{{ supplier.name }}</h1> <!-- 添加企业名称 -->
      <p>地址: {{ supplier.address }}</p> <!-- 添加企业地址 -->
      <p>联系方式: {{ supplier.contact }}</p> <!-- 添加联系方式 -->
    </div>
  </div>
  
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { getCompanyInfo } from '../customsData.api'; // Adjust the import based on your API structure
import type { Dayjs } from 'dayjs';
type RangeValue = [Dayjs, Dayjs];
const date = ref<RangeValue>();

const props = defineProps({
  supplierId: {
    type: String,
    required: true,
  },
});

const supplier = ref<{ name: string; address: string; contact: string } | null>(null);
const loading = ref(true);

const fetchSupplierDetails = async () => {
  loading.value = true;
  const params = {
    source_type: 1,
    data_source: ['IMP_AMERICA_BL_SEA'],
    date: [20230101, 20230630],
    com_id:props.supplierId,
    com_role: 2,
  }
  const response = await getCompanyInfo(params);
  supplier.value = response.result.data.result; // Adjust based on your API response structure
  loading.value = false;
};

// Watch for changes in supplierId prop
watch(() => props.supplierId, (newId) => {
  if (newId) {
    fetchSupplierDetails();
  }
});
</script>

<style scoped lang="less">
.supplier-details {
  padding: 20px;
}

</style>