ethereum_viewer_webapp/src/components/viewer/newhistory/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 + '  block: ' + query.tx.block }}
            </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>

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

      <!-- 表格主体 -->
      <v-data-table calculate-widths multi-sort hide-default-footer
                    class="history-table"
                    @current-items="currentItems"
                    @input="input"
                    @item-selected="itemSelected"
                    @item-expanded="itemExpanded"
                    @page-count="pageCount"
                    @pagination="pagination"
                    @toggle-select-all="toggleSelectAll"
                    @update:expanded="updateExpanded"
                    @update:group-by="updateGroupBy"
                    @update:group-desc="updateGroupEesc"
                    @update:items-per-page="updateItemsPerPage"
                    @update:multi-sort="updateMultiSort"
                    @update:must-sort="updateMustSort"
                    @update:options="updateOptions"
                    @update:page="updatePage"
                    @update:sort-by="updateSortBy"
                    @update:sort-desc="updateSortDesc"
                    @toggle="toggle"

                    @dblclick:row="dblclickRow"
                    :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 large icon elevation="0" color="primary" @click="editItem(item)">
                  <v-icon>mdi-table-edit</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"
                 @click="httpKit.jumpToExplorer(item.hash, 'tx')">
            {{ 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 v-if="!item.fromName" label color="indigo lighten-3" @click="httpKit.jumpToExplorer(item.to)">
            {{ hashKit.headAndEnd2(item.from) }}
          </v-chip>
          <v-chip v-else label color="green lighten-3" target="_blank" @click="httpKit.jumpToExplorer(item.from)">
            {{ item.fromName }}
          </v-chip>
        </template>
        <!-- to -->
        <template v-slot:item.to="{ item }">
          <v-chip v-if="!item.toName" label color="indigo lighten-4" @click="httpKit.jumpToExplorer(item.to)">
            {{ hashKit.headAndEnd2(item.to) }}
          </v-chip>
          <v-chip v-else label color="indigo lighten-4" @click="httpKit.jumpToExplorer(item.to)">
            {{ item.toName }}
          </v-chip>
        </template>
        <template v-slot:item.gasPrice="{ item }">
          <div v-if="item.gasPrice != -1 && item.gasPrice !== undefined">
            {{ item.gasPrice }}
          </div>
          <div v-else>
            [gasPrice]
          </div>
        </template>
        <template v-slot:item.type="{ item }">
          <div v-if="item.type !== '' && item.type !== undefined">
            {{ item.type }}
          </div>
          <div v-else>
            [type]
          </div>
        </template>
        <template v-slot:item.index="{ item }">
          <div v-if="item.index !== '' && item.index !== undefined">
            {{ item.index }}
          </div>
          <div v-else>
            [index]
          </div>
        </template>
        <template v-slot:item.status="{ item }">
          <div v-if="item.status !== '' && item.status !== undefined">
            {{ item.status }}
          </div>
          <div v-else>
            [status]
          </div>
        </template>
        <template v-slot:item.ping="{ item }">
          <div v-if="item.ping !== undefined">
            {{ item.ping }}
          </div>
          <div v-else>
            [ping]
          </div>
        </template>
        <template v-slot:item.isMev="{ item }">
          <BooleanViewer :value="item.isMev"></BooleanViewer>
        </template>
        <template v-slot:item.isBot="{ item }">
          <BooleanViewer :value="item.isBot"></BooleanViewer>
        </template>
        <template v-slot:item.maybeBot="{ item }">
          <BooleanViewer :value="item.maybeBot"></BooleanViewer>
        </template>
        <template v-slot:item.timestamp="{ item }">
          {{ formatTimeBySixBitTimestamp(item.timestamp) }}
        </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>
        <!--tradeInfo-->
        <template v-slot:item.transferList="{ item }">
          <div v-if="page.name === 'History Page'">
            <div class="tradeInfoBtn" @click="showTradeInfo(item)">
              <v-chip v-for="trade in item.transferList"
                      label class="ma-2 tradeLabel" style="max-width: 100px;">
                {{
                  (trade.tokenSymbol === undefined ? ('**' + hashKit.headAndEnd2(trade.token)) : (trade.tokenSymbol === '' ? '[no name]' : trade.tokenSymbol))
                }}
              </v-chip>
            </div>
          </div>
          <div v-else>
            <TradeInfo :item="item"></TradeInfo>
          </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="table.pageLength" v-model="table.pageNum"
                          @input="generateTableDataAgain"></v-pagination>
          </v-col>
        </v-row>
      </div>
    </v-card>

    <!-- 展示transfer的详情 -->
    <v-dialog v-model="transferDetailsDialog.visible" max-width="800">
      <v-card elevation="0">
        <v-card-title>交易详情</v-card-title>
        <v-card-text>
          <TradeInfo :item="transferDetailsDialog.data"></TradeInfo>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="transferDetailsDialog.visible = false">我知道了</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- 编辑框 -->
    <v-dialog v-model="editDialog.visible" max-width="1200">
      <v-card elevation="0">
        <v-card-title>编辑详情</v-card-title>
        <v-card-text>
          <v-row>
            <v-col cols="12">
              <v-text-field disabled label="hash" v-model="editDialog.item.hash"></v-text-field>
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="12">
              <v-text-field label="comment" v-model="editDialog.item.comment"></v-text-field>
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="6">
              <v-text-field disabled label="from" v-model="editDialog.item.from"></v-text-field>
            </v-col>
            <v-col cols="6">
              <v-text-field label="fromName" v-model="editDialog.item.fromName"></v-text-field>
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="6">
              <v-text-field disabled label="to" v-model="editDialog.item.to"></v-text-field>
            </v-col>
            <v-col cols="6">
              <v-text-field label="toName" v-model="editDialog.item.toName"></v-text-field>
            </v-col>
          </v-row>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="updateAdapter">提交编辑</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import TradeInfo from '@/components/viewer/newhistory/table/TradeInfoDetails'
import BooleanViewer from '@/components/viewer/newhistory/table/BooleanViewer'
import HashKit from '@/plugins/kit/HashKit'
import HttpKit from '@/plugins/kit/HttpKit'
import TimeKit from '@/plugins/kit/TimeKit'
import AddressModel from "@/plugins/model/AddressModel";
import jquery from 'jquery'

export default {
  name: 'Table',
  components: {BooleanViewer, TradeInfo},
  props: ['query', 'page', 'table', 'tx'],
  inject: ['packQuery'],
  data: () => ({
    hashKit: HashKit,
    httpKit: HttpKit,
    timeKit: TimeKit,
    transferDetailsDialog: {
      data: [],
      visible: false
    },
    editDialog: {
      item: {},
      visible: false
    },
    tempPage: 1,
    addressModel: undefined,
    dblclickRowUrl: "https://tools.blocksec.com/tx/eth/",
  }),
  methods: {
    async deleteByHash(hash_code, item) {
      if (confirm('要删吗?\n' + hash_code)) {
        // console.log(JSON.stringify(item))
        this.$msgkit.warning('还没有做，别急啊')
        // 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)
        // }
      }
    },
    async updateAdapter() {
      this.createAddressModel()

      const updateItem = this.editDialog.item
      const txBaseItem = {
        hash: updateItem.hash,
        comment: updateItem.comment
      }
      const fromAddrBaseItem = {
        hash: updateItem.from,
        name: updateItem.fromName
      }
      const toAddrBaseItem = {
        hash: updateItem.to,
        name: updateItem.toName
      }

      const rst1 = await this.tx.updateTxBaseModel(txBaseItem)
      const rst2 = await this.addressModel.updateAddressBaseModel(fromAddrBaseItem)
      const rst3 = await this.addressModel.updateAddressBaseModel(toAddrBaseItem)

      if (rst1.state && rst2.state && rst3.state) {
        this.$msgkit.success('更新成功')

        this.editDialog.visible = false
      } else {
        this.$msgkit.error(`rst1: ${rst1.msg}, rst2: ${rst2.msg}, rst3: ${rst3.msg}`)
      }
    },
    showTradeInfo(item) {
      console.log(">>", item)
      this.transferDetailsDialog.data = item
      this.transferDetailsDialog.visible = true
    },
    async inputPageNum() {
      this.table.pageNum = parseInt(this.tempPage)
      await this.generateTableDataAgain()
    },
    async generateTableDataAgain() {
      this.tempPage = this.table.pageNum
      this.table.data = []


      await this.packQuery()
    },
    formatTimeBySixBitTimestamp(sixBitTimestamp) {
      let lastThreeBit = (sixBitTimestamp + '').slice(-3)
      return this.timeKit.getTime(sixBitTimestamp) + lastThreeBit
    },
    editItem(item) {
      this.editDialog.item = item
      this.editDialog.visible = true
    },
    createAddressModel() {
      if (!this.addressModel) this.addressModel = new AddressModel(this.tx.chainId, AddressModel.MODULES.unknown)
    },


    currentItems(val) {
      // console.log("currentItems:", val)
    },
    input(val) {
      // console.log("input:", val)
    },
    itemSelected(val) {
      // console.log("itemSelected:", val)
    },
    pageCount(val) {
      // console.log("pageCount:", val)
    },
    pagination(val) {
      // console.log("pagination:", val)

    },
    toggleSelectAll(val) {
      // console.log("toggleSelectAll:", val)
    },
    updateExpanded(val) {
      // console.log("updateExpanded:", val)
    },
    updateGroupBy(val) {
      // console.log("updateGroupBy:", val)
    },
    updateGroupEesc(val) {
      // console.log("updateGroupEesc:", val)
    },
    updateItemsPerPage(val) {
      // console.log("updateItemsPerPage:", val)
    },

    updateMultiSort(val) {
      // console.log("updateMultiSort:", val)
    },

    updateMustSort(val) {
      // console.log("updateMustSort:", val)
    },

    updateOptions(val) {
      // console.log("updateOptions:", val)
    },

    updatePage(val) {
      // console.log("updatePage:", val)
    },
    updateSortBy(val) {
      // console.log("updateSortBy:", val)
    },
    updateSortDesc(val) {
      // console.log("updateSortDesc:", val)
    },

    itemExpanded(item, val) {
      // console.log("itemExpanded:", item, val)
    },

    toggle(val) {
      // console.log("toggle:", val)
    },
    dblclickRow(event, value) {
      // console.log("dblclickRow:", event, value)
    },

  },
  async mounted() {
    // let vm = new Vue({
    //   el: "td.text-start",
    //   click: () => {
    //     console.log('点击')
    //   }
    // });

    // $("td.text-start").on("click",this,function (){
    //   console.log('点击')
    // });
  }
}
</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>