ethereum_viewer_webapp/src/components/Hddress.vue

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

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

<script>
import Top from '@/components/viewer/hddress/Top'
import Table from '@/components/viewer/hddress/Table'
import TxModel from '@/plugins/model/TxModel'
import AddressModel from "@/plugins/model/AddressModel";

export default {
  name: 'Hddress',
  components: {Top, Table},
  props: ['chain'],
  data: () => ({
    addressModel: undefined,
    editDialog: {
      item: {},
      visible: false,
      addOrUpdate: true,
    },
    query: {
      // hddress: {
      //   name: '',
      //   hash: process.env.NODE_ENV === 'development' ? '0x1a97a8fe340933a8b050dd3d1c823116d31178a253a74ea5a42ea909b37901c4' : '',
      // },
      // tx: {
      //   block: '',
      //   from: '',
      //   to: ''
      // },
      // transfer: {
      //   from: '',
      //   to: '',
      //   token: ''
      // },
      // autoFlushTime: 0
    },
    page: {
      name: 'Hddress Page'
    },
    table: {
      search: '',
      loading: false,
      groupBy: 'chainId',
      groupDesc: true,
      sortBy: ['chainId', 'index'],
      sortDesc: [true, false],
      pageSize: process.env.NODE_ENV === 'development' ? 100 : 200,
      pageNum: 1,
      pageLength:99,
      data: [],
      headers: [
        {text: 'Option', value: 'option', width: '5%'},
        {text: 'ChainId', value: 'chainId', width: '5%'},
        {text: 'Hash', value: 'hash', width: '10%'},
        {text: "Other", value: 'other'},
        {text: 'Name', value: 'name', width: '10%'},
        {text: 'Type', value: 'type'},
        {text: 'Comment', value: 'comment'},
      ]
    },
  }),
  methods: {
    // 获取数据
    async generateTableData() {
      this.createAddressModel()

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

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


      if (rst.state) {
        console.log("data--:", rst)
        this.table.data = rst.data
        console.log("data--_:", this.table.data)
        this.$msgkit.success(rst.msg)
      } else {
        this.$msgkit.error(rst.msg)
      }

      this.table.loading = false
    },
    createAddressModel() {
      if (!this.addressModel) this.addressModel = new AddressModel(this.chain.id, TxModel.MODULES.ADDRESS)
    },
    //设置 新增按钮编辑
    showVisible() {
      this.editDialog.item = {hash: '', name: ''}
      this.editDialog.visible = true
      this.editDialog.addOrUpdate = true
    },

    async prePackQuery() {
      // await this.$refs.table.remButClick()
    },
    async packQuery() {
      await this.prePackQuery()//查询数据之前移除 多余的临时标签
      await this.generateTableData()//拿到数据
      await this.afterPackQuery()//添加标签 ，添加点击按钮事件
    },
    async afterPackQuery() {
    },

  },
  provide() {
    return {
      packQuery: this.packQuery,
      showVisible: this.showVisible
    }
  },
  async mounted() {
    await this.packQuery()
  }
}
</script>