merchant_feedov_web/src/views/flowPool/rearFlowPool/index.vue

<!-- 后流量池 -->
<template>
  <div class="container">
    <!-- 搜索条件区 -->
    <div class="search-section">
      <Search :SearchForm="SearchFormList" @query="intData" @reset="reset"></Search>
    </div>

    <div class="audit-btn">
      <a-button @click="dictShowModel(1, null)" type="text" v-if="role == 1">
        <template #icon>
          <icon-plus-circle />
        </template>
        <template #default>
          {{ $t("form.Add") }}
        </template>
      </a-button>
    </div>

    <a-table row-key="id" :data="dataSource" :columns="columnsAfter" :pagination="pagination" :scroll="{ x: 'auto' }"
      @page-change="evChangePage">
      <template #id="{ record }">
        <!-- 修改 -->
        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)"
          v-if="role == 1">{{ $t("form.Edit") }}</a>
        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handelForewring(record)"
          v-if="role == 1">{{ $t('flowPool.Waring') }}</a>
        <!-- <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handelgetCard(record)">导卡</a> -->
        <!-- 删除 -->
        <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')" :cancel-text="$t('form.Cancel')"
          @ok="handleDel(record.id)" v-if="role == 1">
          <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{
            $t("form.Delete")
          }}</a>
        </a-popconfirm>
      </template>
      <template #status="{ record }">
        <a-tag :color="record.status == 1 ? '#00b42a' : '#f53f3f'">{{ trafficList.find(val => val.value ==
          record.status)?.label }}</a-tag>
      </template>
    </a-table>
    <add v-model:modelValue="showAdd" status="2" :typeCurrent="typeCurrent" :record="record" @submit="intData()"></add>
    <Forewarning v-model:modelValue="visibleForewarning" ref="forewarning" @submit="intData()" />
    <GuideCard v-model:model-value="ShowOpenExport" />
  </div>
</template>

<script setup>
import { onMounted, reactive, toRefs } from "vue";
import { columnsAfter, SearchFormList } from "../config";
import { Message } from "@arco-design/web-vue";
import { deleteTrafficPool, lotCatdList } from "@/api/path/flowPool.api";
import { useSystemStore } from "@/store/modules/systemStore";
import add from "../components/add.vue";
import Forewarning from "../components/forewarning.vue";
import { Getdictionary } from "@/mixins/index.js";
import { useI18n } from 'vue-i18n'
import Search from '@/components/Search/index.vue'
import GuideCard from '../components/GuideCard.vue'
const { t } = useI18n();
const systemStore = useSystemStore();
const state = reactive({
  dataSource: [],
  pagination: {
    total: 0,
    pageSize: 10,
    current: 1,
  },
  searchForm: {},
  role: systemStore.getRole,
  typeCurrent: 1,
  visibleForewarning: false,
  record: {},
  sourceList: [],
  trafficList: [],
  showAdd: false,
  forewarning: null,
  ShowOpenExport: false
});

const {
  dataSource,
  pagination,
  searchForm,
  role,
  typeCurrent,
  visibleForewarning,
  record,
  sourceList,
  trafficList,
  showAdd,
  forewarning,
  ShowOpenExport
} = toRefs(state);

const intData = async (item) => {
  if (item) {
    searchForm.value = item
  }
  const param = {
    current: pagination.value.current,
    size: pagination.value.pageSize,
    ...searchForm.value,
    trafficPoolType: "2",
  };
  const { data } = await lotCatdList(param);
  dataSource.value = (data.records || []).map((item, index) => {
    const trafficPoolStatus = trafficList.value.find(
      (val) => val.value == item.status
    )?.label;
    const sourceName = sourceList.value.find(
      (val) => val.value == item.source
    )?.label;
    const Activated = item.cardAct + "/" + item.iccids?.length;
    const HaveBeenUsed = item.size + item.sizeType;
    // 换算Gb
    const afterFirstConversion  = item.dataUsage / 1024
    const afterSecondConversion = afterFirstConversion / 1024;
    const result = Math.ceil(afterSecondConversion * 100) / 100;
    const dataUsage = result.toFixed(2);
    return {
      ...item,
      sourceName, // 运营商名称
      Activated: Activated,
      HaveBeenUsed: HaveBeenUsed,
      trafficPoolStatus,
      size: item.size + '/' + item.sizeType,
      dataUsage
    };
  });
  pagination.value.total = data.total;
};

// 删除
const handleDel = async (id) => {
  const { code } = await deleteTrafficPool({ id });
  if (code == 200) {
    Message.success({
      content: t('setting.deleteSuccess'),
      duration: 2000,
    });
    intData();
  }
};

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

const reset = (item) => {
  searchForm.value = item
  pagination.value.current = 1
  intData()
}

// 弹框
const dictShowModel = (type, data) => {
  typeCurrent.value = type;
  record.value = data;
  showAdd.value = true;
};

const handelForewring = (item) => {
  forewarning.value.detaile(item)
  visibleForewarning.value = true;
};

const handleDictValue = async () => {
  sourceList.value = await Getdictionary("source");
  trafficList.value = await Getdictionary("trafficPacketStatus");
};

const handelgetCard = (item) => {
  ShowOpenExport.value = true;
}

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

<style scoped lang="less">
.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;
      }
    }
  }
}

silent-expire-alarm {
  padding: 20px !important;
  // background: #fcf;
}

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

.audit-btn {
  margin-bottom: 10px;
}

.echarts-box {
  // width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;

  .chart-dom {
    width: 700px !important;
    height: 400px !important;
  }
}

.form-item-space-item {
  background-color: #f2f3f5;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.form-pool-tit {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .pool-icon {
    margin-right: 10px;
    width: 4px;
    height: 16px;
    background: #1b5df8;
    font-size: 14px;
    color: #6c6e70;
    font-family: PingFang SC;
  }
}

.export-box {
  .export-box-item {
    .box-item-title {
      display: flex;
      align-items: center;
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 10px;

      .title-icon {
        margin-right: 10px;
        width: 4px;
        height: 16px;
        background: #1b5df8;
      }
    }

    .box-item-content {
      .item-txt {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .item-txt-title {
          width: 300px;
          text-align: right;
          margin-right: 10px;
        }

        .item-txt-text {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          text-align: left;
          color: #1b5df8;
        }
      }

      .export-status {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        color: rgba(51, 51, 51, 1);
        display: flex;
        align-items: center;

        .status-icon {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>