ethereum_viewer_webapp/src/components/viewer/Table.vue

<template>
  <div class="table-container">
    <v-card elevation="0">
      <!-- 表格上功能区 -->
      <v-card-title>
        <v-container id="dataTableHeader">
          <v-row>
            <v-col cols="4">
              {{ page.name }}
            </v-col>
            <v-col cols="8">
              <v-text-field hide-details single-line label="Local Search" append-icon="mdi-magnify" v-model="table.search"/>
            </v-col>
          </v-row>
        </v-container>
      </v-card-title>

      <!-- 表格主体 -->
      <v-data-table calculate-widths multi-sort hide-default-footer
                    :group-by="table.groupBy" :group-desc="table.groupDesc"
                    :headers="table.headers" :items="table.data" :search="table.search" :loading="table.loading"
                    :items-per-page="table.pageSize"
                    :sort-by="table.sortBy" :sort-desc="table.sortDesc">
        <!-- 操作区 -->
        <template v-slot:item.option="{ item }">
          <div>
            <v-row>
              <v-col cols="5">
                <v-btn icon elevation="0" color="red" large @click="deleteByHash(item.hash)">
                  <v-icon large>mdi-delete-forever-outline</v-icon>
                </v-btn>
              </v-col>
            </v-row>
          </div>
        </template>
        <!-- Block -->
        <template v-slot:item.block="{ item }">
          <div>
            {{ item.block }}
          </div>
        </template>
        <!-- Hash -->
        <template v-slot:item.hash="{ item }">
          <v-btn v-if="item.hash.indexOf('0x') !== -1" outlined text target="_blank" :href="'https://www.oklink.com/en/ethw/tx/' + item.hash">
            {{ hashKit.head5(item.hash) + '..' }}
          </v-btn>
          <v-chip v-else label target="_blank">
            {{ hashKit.head5(item.hash) + '..' }}
          </v-chip>
        </template>
        <!-- From -->
        <template v-slot:item.from="{ item }">
          <v-chip label color="green lighten-3" target="_blank" @click="httpKit.jumpToEthw(item.from)">
            {{ hashKit.headAndEnd2(item.from) }}
          </v-chip>
        </template>
        <!-- to -->
        <template v-slot:item.to="{ item }">
          <v-chip v-if="!item.toName" label color="indigo lighten-4"  @click="httpKit.jumpToEthw(item.to)">
            {{ hashKit.headAndEnd2(item.to) }}
          </v-chip>
          <v-chip v-else label color="indigo lighten-4" @click="httpKit.jumpToEthw(item.to)">
            {{ item.toName }}
          </v-chip>
        </template>
        <template v-slot:item.type="{ item }">
          <div v-if="item.type !== undefined && item.type !== ''">
            {{ item.type }}
          </div>
          <div v-else>
            [type]
          </div>
        </template>
        <template v-slot:item.index="{ item }">
          <div v-if="item.index !== undefined">
            {{ item.index }}
          </div>
          <div v-else>
            [index]
          </div>
        </template>
        <template v-slot:item.status="{ item }">
          <div v-if="item.state !== undefined">
            {{ item.status }}
          </div>
          <div v-else>
            [status]
          </div>
        </template>
        <template v-slot:item.isMev="{ item }">
          {{ item.isMev }}
        </template>
        <template v-slot:item.isBot="{ item }">
          {{ item.isBot }}
        </template>
        <template v-slot:item.maybeBot="{ item }">
          {{ item.maybeBot }}
        </template>
        <template v-slot:item.pending="{ item }">
          <div v-if="item.pending !== undefined">
            {{ item.pending }}
          </div>
          <div v-else>
            [pending]
          </div>
        </template>
        <!--tradeInfo-->
        <template v-slot:item.transferList="{ item }">
          <div v-if="page.name === 'Pending Page'">
            <div class="tradeInfoBtn" @click="showTradeInfo(item)">
              <v-chip v-for="tokenAddress in item.tokenAddressList" :key='tokenAddress'
                      :color="item.tokenMap[tokenAddress] ? hashKit.generateColorByHash(tokenAddress) : undefined" class="tokenChip">
                {{ item.tokenMap[tokenAddress] ? item.tokenMap[tokenAddress] : '**' + hashKit.headAndEnd2(tokenAddress) }}
              </v-chip>
            </div>
          </div>
          <div v-else>
            <TradeInfo :item="item"></TradeInfo>
          </div>
        </template>
        <template v-slot:item.comment="{ item }">
          <div v-if="item.comment">
            <span class="memo-span">{{ item.comment }}</span>
          </div>
          <div v-else>
            [comment]
          </div>
        </template>
      </v-data-table>

      <!-- 底部分页 -->
      <div class="mt-2">
        <v-row>
          <v-col cols="2"></v-col>
          <v-col cols="2">
            <v-text-field type="number" required label="page" v-model="tempPage" @change="inputPageNum" />
          </v-col>
          <v-col cols="4">
            <v-pagination :disabled="table.loading" :length="99" v-model="table.pageNum" @input="generateTableDataAgain"></v-pagination>
          </v-col>
        </v-row>
      </div>
    </v-card>

    <v-dialog v-model="dialog.visible" max-width="800">
      <v-card>
        <v-card-title>交易详情</v-card-title>
        <v-card-text><TradeInfo :item="dialog.data"></TradeInfo></v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
              color="primary"
              text
              @click="dialog.visible = false"
          >
            我知道了
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import TradeInfo from '@/components/viewer/table/TradeInfoDetails'
import HashKit from '@/plugins/kit/HashKit'
import HttpKit from '@/plugins/kit/HttpKit'

export default {
  name: 'Table',
  components: {TradeInfo},
  props: ['query', 'page', 'table'],
  inject: ['generateTableData'],
  data: () => ({
    hashKit: HashKit,
    httpKit: HttpKit,
    dialog: {
      data: [],
      visible: false
    },
    tempPage: 1
  }),
  methods: {
    async deleteByHash(hash_code) {
      if (confirm('要删吗?\n' + hash_code)) {
        // const rst = await EthMev.deleteByHash(hash_code)
        //
        // if (rst.data.state) {
        //   this.$msgkit.success(rst.data.msg)
        //
        //   await this.pullData()
        // } else {
        //   this.$msgkit.error(rst.data.msg)
        // }
      }
    },
    showTradeInfo(item) {
      this.dialog.data = item
      this.dialog.visible = true
    },
    async inputPageNum() {
      console.log(typeof this.tempPage, parseInt(this.tempPage))
      this.table.pageNum = parseInt(this.tempPage)
      await this.generateTableDataAgain()
    },
    async generateTableDataAgain() {
      this.tempPage = this.table.pageNum
      await this.generateTableData()
    }
  }
}
</script>

<style scoped>
.table-container {
  width: 100%;
}

#dataTableHeader {
  max-width: none;
}
.tokenChip {
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
}
.tradeInfoBtn {
  padding: 15px !important;
  border: grey 2px solid;
}
.tradeInfoBtn:hover {
  background: beige;
}
.memo-span {
  width: 200px;
  display:block;
  padding: 10px;
}
</style>