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

<template>
  <!-- 卡清单管理 -->
  <div class="container">
    <div class="head-title">
      <span>{{ route.meta.title }} </span>
      <span class="head-title-right">
        <a-popconfirm :content="$t('form.ImportConfirm')" :ok-text="$t('form.Confirm')" :cancel-text="$t('form.Cancel')"
          @ok="handleImport()">
          <a-button class="m-r-10" type="primary"> {{ $t('form.Import') }}</a-button>
        </a-popconfirm>
      </span>

    </div>
    <!-- 搜索条件区 -->
    <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>
          <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"
      :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :scroll="{ x: 'auto' }">
      <template #id="{ record }">
        <!-- 查看流量消耗 -->
        <!-- <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handletrafficUseDialog(record)">{{
          $t('lotCard.trafficUse') }}</a> -->
      </template>

    </a-table>
    <!-- 查看流量消耗 -->
    <trafficUseDialog ref="trafficUseDialogRef" />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { columns } from "./config";
import { Message, Notification } from '@arco-design/web-vue'
import { cardInfoList, cardInfoImport } from "@/api/path/lotCard.api"
import trafficUseDialog from "./trafficUseDialog.vue";
import { enum_dict } from "@/hooks/enum";

const { proxy } = getCurrentInstance()
const formRef = ref()
const searchForm = ref({
  "iccid": "",
});

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

const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false,
});
const selectedKeys = ref([])

const trafficUseDialogRef = ref()


const intData = async () => {
  const param = {
    current: pagination.value.current,
    size: pagination.value.pageSize,
    ...searchForm.value,
  }
  const { data } = await cardInfoList(param)
  dataSource.value = (data.records || []).map(item => {
    const sourceName = sourceList.value.find(sourceItem => sourceItem.value == item.source)?.label || ''
    const serviceName = serviceList.value.find(serviceItem => serviceItem.value == item.service_usage_mode)?.label || ''
    const statusName = statusList.value.find(statusItem => statusItem.value == item.status)?.label || ''
    console.log(statusList, statusName, "statusList")
    return {
      ...item,
      sourceName,
      serviceName,
      statusName
    }
  })
  pagination.value.total = data.total
}

const handleImport = async () => {
  if (!searchForm.value.iccid) {
    Message.warning({
      content: '请先输入ICCID,可输入多个以逗号分隔,然后再点击导入！',
      duration: 2000,
    })
    return
  }
  const iccids = searchForm.value.iccid.split(',')
  const iccidList = iccids.map(item => {
    return {
      iccid: item
    }
  })
  const { code, data } = await cardInfoImport({ iccidList })
  if (code == 200) {
    Message.success({
      content: data,
      duration: 2000,
    })
    intData()
  }

};

const handletrafficUseDialog = (data) => {
  console.log(data.iccid, "data.iccid")
  trafficUseDialogRef.value.open(data.iccid)
}


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


// 获取字典
const handleDictValue = () => {
  const dictList = JSON.parse(window.localStorage.getItem('dictList')) ?? []
  sourceList.value = dictList.filter((item) => item.type_key == enum_dict.SOURCE)
  statusList.value = dictList.filter((item) => item.type_key == enum_dict.MAIN_CARD_STATUS)
  serviceList.value = dictList.filter((item) => item.type_key == enum_dict.ACTIVATION_PACKAGE)
}

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>