merchant_feedov_web/src/views/lotCard/cardList/index.vue

<template>
  <!-- 卡清单管理 -->
  <div class="container">
    <!-- 搜索条件区 -->
    <div class="search-section">
      <a-form :model="searchForm" ref="formRef" layout="inline">
        <a-form-item field="iccid" :label="$t('lotCard.iccid')">
          <a-input v-model="searchForm.iccid" :placeholder="$t('lotCard.please') + $t('lotCard.iccid')" allow-clear />
        </a-form-item>
        <!--        主卡状态-->
        <a-form-item field="iccid" :label="$t('lotCard.iccidType')">
          <a-select v-model="value" :style="{ width: '240px' }" :placeholder="$t('lotCard.iccidTypeName')">
            <a-option v-for="item of statusList" :value="item.id" :label="item.label" />
          </a-select>
        </a-form-item>
        <!--        来源-->
        <a-form-item field="iccid" :label="$t('lotCard.sourceCard')">
          <a-select v-model="value" :style="{ width: '240px' }" :placeholder="$t('lotCard.sourceCardType')">
            <a-option v-for="item of sourceList" :value="item.id" :label="item.label" />
          </a-select>
        </a-form-item>
        <!--        创建时间-->
        <a-form-item field="iccid" :label="$t('lotCard.statrt_time')">
          <a-date-picker style="width: 200px;" ::placeholder="$t('lotCard.statrt_timeType')" />
        </a-form-item>
        <!--        更新时间-->
        <a-form-item field="iccid" :label="$t('lotCard.Renewal_time')">
          <a-date-picker style="width: 200px;" ::placeholder="$t('lotCard.Renewal_timeType')" />
        </a-form-item>
        <a-form-item>

          <a-space>
            <a-button type="primary" @click="handleSearch">{{ $t('form.Search') }}</a-button>
            <a-button @click="resetSearch">{{ $t('form.Reset') }}</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>

    <a-table row-key="iccid" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
      @page-change="evChangePage">
      <template #poolNum="{ record }">
        <span>{{ record.poolName }}</span>
        <br/>
        <span>{{ record.poolId }}</span>
      </template>
      <template #dataUsageTotal="{ record }">
        <span>{{ record.dataUsageTotal }}MB</span>
      </template>
      <template #id="{ record }">
        <!-- 查看流量消耗 -->
        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handletrafficUseDialog(record)">详情</a>
      </template>

    </a-table>
    <!-- 查看流量消耗 -->
    <trafficUseDialog ref="trafficUseDialogRef" @submit="intData()" />


  </div>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance, h } from "vue";
import { columns } from "./config";
import { cardInfoList } from "@/api/path/lotCard.api"
import trafficUseDialog from "./trafficUseDialog.vue";
import { Getdictionary } from '@/mixins/index.js'
const { proxy } = getCurrentInstance()
const formRef = ref()
const searchForm = ref({
  "iccid": "",
});

const statusList = ref([]);
const sourceList = ref([]);
const serviceList = ref([]);
const dataSource = ref([]);
const pagination = ref({
  total: 0,
  pageSize: 10,
  current: 1,
})

const trafficUseDialogRef = ref()


const intData = async () => {
  const param = {
    current: pagination.value.current,
    size: pagination.value.pageSize,
    ...searchForm.value,
  }
  const soureName = await Getdictionary('source')
  const accountStatusName = await Getdictionary('account')
  const { data } = await cardInfoList(param)
  dataSource.value = (data.records || []).map((item,index) => {
    const payType = item.payType == 0 ? 'Prepay' : 'Postpay';
    // const dataPackage = item.Info.dataPackage.map(res => res.productName).join(',');
    const soure = soureName.find(val => val.value == item.source)?.label
    const accountStatus = accountStatusName.find(val => val.value == item.Info.accountStatus)?.label
    return {
      ...item,
      ...item.Info,
      payType: payType,
      // dataPackageName: dataPackage,
      sourceName: soure,
      accountStatus,
      forewarningStatus:'正常',
      HistoricalUsage:'10/G',
      poolNum:"-",
      SilenceEndtime:'2025-2-3',
      usedFlowrate:'14G',
      usableFlowrate:'3G',
      usedBg:'50MB',
      usableBg:'140MB',
    }
  })
  pagination.value.total = data.total
}

// 详情
const handletrafficUseDialog = (data) => {
  trafficUseDialogRef.value.open(data)
}


const evChangePage = (page) => {
  pagination.value.current = page
  intData()
}


const handleSearch = () => {
  formRef.value.validate((errors) => {
    if (!errors) {
      intData()
    }
  });
}


// 获取字典
const handleDictValue = async () => {
  sourceList.value = await Getdictionary('source')
  statusList.value = await Getdictionary('mainCardStatus')
  serviceList.value = await Getdictionary('activationPackageMethod')
}

const resetSearch = () => {
  proxy.$refs.formRef.resetFields()
  intData()
}

onMounted(() => {
  handleDictValue()
  intData()
})
</script>

<style scoped lang="less">
.head-title-right {
  .m-r-10 {
    margin-right: 10px;
  }

}

.search-section {
  margin-top: 20px;
  margin-bottom: 20px;
}

.container {
  .head-title {
    display: flex;
    justify-content: space-between;
  }

  .form-row {
    display: flex;

    .form-row-col {
      width: 25%;
      display: flex;
      align-items: center;

      .form-row-label {
        width: 120px;
        text-align: right;
      }
    }
  }
}
</style>