JbSxs/0414/src/views/GoldBeanDetail.vue

<template>
  <div class="detail-container">
      <div class="search-form-container">
        <!-- 搜索表单组件，监听search事件 -->
          <SearchForm @search="handleSearch" />
      </div>
      <div class="detail-table-container">
          <DetailTable :tableData="tableData" />
      </div>
  </div>
</template>

<script>
import SearchForm from '../components/SearchForm.vue';
import DetailTable from '../components/DetailTable.vue';
import { getGoldBeanDetail } from '../api/goldBeanDetail';

export default {
  components: {
      SearchForm,
      DetailTable
  },
  data() {
    return {
      tableData: []
    };
  },
  // 组件创建时，触发一次无参数的查询
  async created() {
    await this.handleSearch({});
  },
  methods: {
     // 处理搜索事件，调用API获取金豆明细数据并更新表格数据
    async handleSearch(params) {
      try {
        const data = await getGoldBeanDetail(params);
        this.tableData = data;
      } catch (error) {
        console.error('查询失败', error);
      }
    }
  }
};
</script>

<style scoped>
.detail-container {
  display: flex;
  flex-direction: column; /* 修改为垂直布局 */
}
.search-form-container {
  width: 100%; /* 搜索表单宽度占满父容器 */
}
.detail-table-container {
  width: 100%; /* 详情表格宽度占满父容器 */
  margin-top: 20px; /* 为表格添加顶部间距 */
}
</style>