ucard-back-front/src/views/card/CardBlockchainTransaction/index.vue

<template>
  <div
    id="card_BlockchainTransaction"
    v-loading="pictLoading"
    class="view"
    :element-loading-background="'rgba(43, 48, 67, 0.65)'"
    :element-loading-spinner="'el-icon-loading'"
  >
    <div class="crm_search">
      <el-form ref="formRef" :model="search" label-width="">
        <el-row>
          <el-col :span="24" :md="24" :lg="24">
            <el-form-item>
              <el-select
                v-model="search.tag"
                class="crm_search_down crm-border-radius-no"
                :placeholder="t('Placeholder.Choose')"
              >
                <el-option
                  v-for="option in tagOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="margin-right: 10px">
              <el-input
                v-if="search.tag == 1"
                v-model.trim="search.cId"
                class="crm-border-left-no crm-border-radius-no"
                clearable
                :placeholder="t('Placeholder.Input')"
                @keyup.enter="toSearch"
              ></el-input>
              <el-input
                v-if="search.tag == 2"
                v-model.trim="search.mobile"
                class="crm-border-left-no crm-border-radius-no"
                clearable
                :placeholder="t('Placeholder.Input')"
                @keyup.enter="toSearch"
              ></el-input>
              <el-input
                v-if="search.tag == 3"
                v-model.trim="search.email"
                class="crm-border-left-no crm-border-radius-no"
                clearable
                :placeholder="t('Placeholder.Input')"
                @keyup.enter="toSearch"
              ></el-input>
            </el-form-item>
            <el-form-item style="margin-right: 10px">
              <el-input
                v-model.trim="search.address"
                class="crm-border-radius-no"
                clearable
                :placeholder="t('Ucard.BlockchainTransaction.address')"
                @keyup.enter="toSearch"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model.trim="search.unit"
                class="crm-border-radius-no"
                clearable
                :placeholder="t('Ucard.BlockchainTransaction.unit')"
                @keyup.enter="toSearch"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="crm-border-radius-no crm-border-left-no"
                icon="el-icon-search"
                @click="toSearch"
              ></el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            v-if="display['R-Card-BlockchainTransaction-Export']?.show"
            type="primary"
            style="margin-left: 8px"
            :loading="exportLoading"
            @click="exportList"
          >
            {{ t('Btn.Export') }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="mock_tableData" stripe style="width: 100%">
      <el-table-column prop="" align="left" :label="t('Label.CidAccount')">
        <template #default="{ row }">
          <span>{{ row.cId || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" align="left" :label="t('Label.Name')">
        <template #default="{ row }">
          <span v-if="row.firstName">
            {{ row.firstName + ' ' }}
          </span>
          <span v-if="row.middle">{{ row.middle + ' ' }}</span>
          <span v-if="row.lastName">{{ row.lastName }}</span>
          <span v-if="!row.firstName && !row.lastName && !row.middle">{{ '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="email" align="left" :label="t('Label.Email')">
        <template #default="{ row }">
          {{ row.email || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="mobile" align="left" :label="t('Label.Mobile')">
        <template #default="{ row }"> {{ row.areaCode }} {{ row.mobile }} </template>
      </el-table-column>
      <el-table-column prop="blockchain" align="left" :label="t('Ucard.Blockchain.pageT2')">
        <template #default="{ row }">
          {{ row.blockchain || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="country" align="left" :label="t('Ucard.DepositAddress.p1')">
        <template #default="{ row }">
          {{ row.country || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="address" align="left" :label="t('Ucard.DepositAddress.p2')">
        <template #default="{ row }">
          {{ row.address || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="unit" align="left" :label="t('Ucard.BlockchainTransaction.p1')">
        <template #default="{ row }">
          {{ row.unit || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="amount" align="left" :label="t('Ucard.BlockchainTransaction.p2')">
        <template #default="{ row }">
          {{ row.amount || '--' }}
        </template>
      </el-table-column>
    </el-table>
    <PagePagination
      :pager-info="pagerInfo"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script setup>
  import { ref, reactive, computed, onMounted, inject } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { ElMessage } from 'element-plus'
  import Service from '@/service/ucard'
  import Config from '@/config/index'
  import { exportExcel } from '@/utils/export'
  import PagePagination from '@/components/pagePagination/index.vue'

  const { t } = useI18n()
  const { Code } = Config
  const Session = inject('session')
  const pigeon = inject('pigeon')

  // 响应式数据
  const pictLoading = ref(false)
  const exportLoading = ref(false)
  const mock_tableData = ref([])
  const formRef = ref(null)

  const search = reactive({
    tag: 1,
    cId: '',
    email: '',
    mobile: '',
    address: '',
    unit: '',
  })

  const pagerInfo = reactive({
    row: 10,
    current: 1,
    pageTotal: 0,
    rowTotal: 0,
  })

  // 计算属性
  const display = computed(() => {
    return JSON.parse(Session.Get('display', true))
  })

  const tagOptions = computed(() => [
    { label: t('Label.CidAccount'), value: 1 },
    { label: t('Ucard.KycAuth.item2'), value: 2 },
    { label: t('Ucard.KycAuth.item3'), value: 3 },
  ])

  // 生命周期
  onMounted(() => {
    searchFunc()
  })

  // 方法
  // 获取列表数据
  const searchFunc = async () => {
    pictLoading.value = true
    if (!display.value['R-Card-BlockchainTransaction-Page']?.show) {
      ElMessage.warning(t('Msg.NotDisplay'))
      pictLoading.value = false
      return
    }

    const res = await Service.getBlockchainTransactionPage({
      ...search,
      page: {
        current: pagerInfo.current,
        row: pagerInfo.row,
      },
    })

    if (res.code == Code.StatusOK) {
      mock_tableData.value = res.data
      if (res.page != null) {
        pagerInfo.rowTotal = res.page.rowTotal
        pagerInfo.pageTotal = res.page.pageTotal
      } else {
        pagerInfo.rowTotal = 0
      }
      ElMessage.success(t('Msg.SearchSuccess'))
    } else {
      ElMessage.error(res.msg)
    }
    pictLoading.value = false
  }

  // 搜索
  const toSearch = () => {
    pagerInfo.current = 1
    searchFunc()
  }

  // 分页返回数据
  const handleSizeChange = (val) => {
    pagerInfo.row = val
    searchFunc()
  }

  const handleCurrentChange = (val) => {
    pagerInfo.current = val
    searchFunc()
  }

  // 导出
  const exportList = async () => {
    exportLoading.value = true
    try {
      await exportExcel(
        pigeon,
        '/wasabi/encrypted/wallet/transaction/list/export',
        { ...search },
        'Encrypted_Wallet_Transactions'
      )
    } catch (error) {
      ElMessage.error(t('Msg.ExportFail'))
    } finally {
      exportLoading.value = false
    }
  }
</script>