sooka_consult_uniapp/pages/quotations/quotationsSecond.vue

<template>
  <view>
    <view class="uni-container">
      <uni-table>
        <uni-tr>
          <uni-th width="80" align="center">名称</uni-th>
          <uni-th width="80" align="center">类型</uni-th>
          <uni-th width="80" align="center">价格</uni-th>
          <uni-th width="100" align="center">时间</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in quotationsList" :key="index">
          <uni-td align="center">{{ item.productName }}
          </uni-td>
          <uni-td align="center">
            <view class="name">{{ item.type }}</view>
          </uni-td>
          <uni-td align="center">{{ item.price }}
          </uni-td>
          <uni-td align="center">{{ item.createTime }}
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
  </view>
</template>

<script>
import {listConfig, QuotationsList, listQuotations} from "@/api/quotations/quotations";
import upload from '../../components/upload/index.vue'

export default {
  components: {
    upload
  },
  data() {
    return {
      //父组件传值
      FatherType: '',
      //是否显示弹出层
      open: false,
      //悬浮按钮右对齐
      right: 'right',
      //悬浮按钮下对齐
      bottom: 'bottom',
      //分类列表
      categories: [
        // 这里是一级分类的数据
      ],
      // 行情列表
      quotationsList: [
        // 这里是列表的数据
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        id: null,
        type: null,
        types: [],
      },
      //表单数据
      form: {},

      //分类树列表
      forms: {},
      imageList: []
    }
  },
  onPullDownRefresh() {
    this.queryParams.pageNum = 1;
    this.quotationsList = [];
    this.getList()
  },
  //上拉加载
  onReachBottom() {
    if (this.status === 'noMore') {
      return;
    }
    this.queryParams.pageNum++;
    this.getList();
  },
  onLoad(e) {
    this.FatherType = e.type;
    this.getList();
  },
  methods: {
     getList() {
      //获取分类树的方法
       listConfig().then(response => {
            this.categories = this.findNodes(response.data.quotations, this.FatherType)
            //categories是一个数组,把他数组中的每一个id属性都取出来并添加到this.queryParams.types中
            this.queryParams.types = this.categories.map(item => item.id);
         listQuotations(this.queryParams).then(response => {
           if (this.queryParams.pageNum === 1) {
             this.quotationsList = this.dataFormat(response.rows)
           } else {
             this.quotationsList = this.quotationsList.concat(this.dataFormat(response.rows));
           }
           // 判断是否还有更多数据
           if (response.rows.length < this.queryParams.pageSize) {
             this.status = 'noMore'; // 没有更多数据
           } else {
             this.status = 'more'; // 还有更多数据
           }
         })
          }
      );
      // 这里是获取列表的方法

      uni.stopPullDownRefresh();
    },
    findNodes(tree, id) {
      let result = [];
      for (let v in tree) {
        let node = tree[v];
        if (node.id == id || node.parentId == id) {
          result.push(node)
        };
        if (node.children) {
          result = result.concat(this.findNodes(node.children, id));
        }
      }
      return result;
    },
    //格式化时间
    dataFormat(rows) {
      // 创建一个映射对象，键是id，值是productName
      const idToProductName = this.categories.reduce((acc, cur) => {
        acc[cur.id] = cur.productName;
        return acc;
      }, {});
      return rows.map(item => {
        let date = new Date(item.createTime);
        item.createTime = date.toLocaleDateString('zh-CN', {dateStyle: 'short'});
        // 使用映射对象将type的值从id转换为productName
        item.type = idToProductName[item.type] || item.type;
        return item;
      });
    },
    //根据分类id查询列表
    change(e) {
      listQuotations(this.queryParams).then(response => {
        if (this.queryParams.pageNum === 1) {
          this.quotationsList = this.dataFormat(response.rows)
        } else {
          this.quotationsList = this.quotationsList.concat(this.dataFormat(response.rows));
        }
        // 判断是否还有更多数据
        if (response.rows.length < this.queryParams.pageSize) {
          this.status = 'noMore'; // 没有更多数据
        } else {
          this.status = 'more'; // 还有更多数据
        }
      });
    },
    updateImg(imgList) {
      this.imageList = imgList;
    }

  }
}
</script>

<style>
.grid-item-box {
  flex: 1;
// position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 0;
}

.image {
  height: 100%;
  width: 100%;
}


</style>