ethereum_viewer_webapp/src/components/Pending.vue

<template>
  <v-card elevation="1">
    <!-- 顶部组件 -->
    <Top :query='query' :page='page' :table='table'></Top>

    <!-- 中间表格组件 -->
    <Table :query='query' :page='page' :table='table' :tx="tx" :explorer="chain.explorer" ref="table"></Table>
  </v-card>
</template>

<script>
import Top from '@/components/viewer/pending/Top'
import Table from '@/components/viewer/pending/Table'
import TxModel from '@/plugins/model/TxModel'

export default {
  name: 'Pending',
  components: {Top, Table},
  props: ['chain'],
  data: () => ({
    tx: undefined,
    query: {
      tx: {
        block: '',
        hash: '',
        from: '',
        to: ''
      },
      transfer: {
        from: '',
        to: '',
        token: ''
      },
      autoFlushTime: 0
    },
    page: {
      name: 'Pending Page'
    },
    table: {
      search: '',
      loading: false,
      groupBy: 'blockNumber',
      groupDesc: true,
      sortBy: ['blockNumber', 'gasPrice', 'timestamp'],
      sortDesc: [true, true, false],
      pageSize: process.env.NODE_ENV === 'development' ? 20 : 200,
      pageNum: 1,
      pageLength:99,
      data: [],
      headers: [
        {text: "Option", value: 'option'},
        {text: 'Block', value: 'block'},
        {text: 'Hash', value: 'hash', width: '10%'},
        {text: 'From', value: 'from'},
        {text: 'To', value: 'to'},
        {text: 'GasPrice', value: 'gasPrice'},
        {text: 'Type', value: 'type'},
        {text: 'Index', value: 'index'},
        {text: 'maybeBot', value: 'maybeBot'},
        {text: 'ping', value: 'ping'},
        {text: 'timestamp', value: 'timestamp'},
        {text: 'transfer', value: 'transferList'},
        {text: 'comment', value: 'comment'}
      ]
    }
  }),
  methods: {
    // 获取数据
    async generateTableData() {
      this.createTx()

      this.table.loading = true
      this.table.data.length = 0

      const rst = await this.tx.find(this.query, this.table.pageNum, this.table.pageSize)

      if (rst.state) {
        this.table.data = TxModel.parseLocalRecordList(rst.data)
        this.$msgkit.success(rst.msg)
      } else {
        this.$msgkit.error(rst.msg)
      }

      this.table.loading = false
    },
    createTx() {
      if (!this.tx) this.tx = new TxModel(this.chain.id, TxModel.MODULES.PENDING)
    },
    async prePackQuery() {
      // await this.$refs.table.remButRegroupAll()
      // await this.$refs.table.remButClick()
    },
    async packQuery() {
      await this.prePackQuery()//查询数据之前移除 多余的临时标签
      await this.generateTableData()//拿到数据
      await this.afterPackQuery()//添加标签 ，添加点击按钮事件
    },
    async afterPackQuery() {
    },
  },
  provide() {
    return {
      packQuery: this.packQuery
    }
  },
  async mounted() {
    await this.packQuery()
  }
}
</script>