merchant_feedov_web/src/views/flowPool/index.vue

<!-- 流量池 -->
<template>
  <div class="container">
    <!-- 搜索条件区 -->
    <div class="search-section">
      <a-form :model="searchForm" layout="inline">
        <a-form-item field="label" :label="$t('flowPool.label')">
          <a-input v-model="searchForm.label" :placeholder="$t('lotCard.please') + $t('flowPool.label')" allow-clear />
        </a-form-item>
        <a-form-item field="label" :label="$t('flowPool.status')">
          <a-select v-model="value" :style="{ width: '240px' }" :placeholder="$t('flowPool.flowPoolStatus')">
            <a-option v-for="item of trafficList" :value="item.id" :label="item.label" />
          </a-select>
        </a-form-item>
        <a-form-item field="label" :label="$t('flowPool.operator')">
          <a-select v-model="value" :style="{ width: '240px' }" :placeholder="$t('flowPool.operatorName')">
            <a-option v-for="item of sourceList" :value="item.id" :label="item.label" />
          </a-select>
        </a-form-item>
        <a-form-item field="label" :label="$t('flowPool.start_time')">
          <a-date-picker style="width: 200px;" :placeholder="$t('flowPool.start_timeName')" />
        </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>

    <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="columns" :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">预警</a>
        <!-- 删除 -->
        <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')" :cancel-text="$t('form.Cancel')"
          @ok="handleDel(record.id)">
          <a class="a-link" href="javascript:;" style="margin-right: 1rem" v-if="role == 1">{{
            $t('form.Delete')
          }}</a>
        </a-popconfirm>
      </template>

    </a-table>



    <add v-model:model-value="showAdd" status="1" :typeCurrent="typeCurrent" :record="record" @submit="intData()"></add>
    <Forewarning v-model:modelValue="visibleForewarning" :FormDataList="FormDataList" @submit="intData()" />
    <openExport v-model:model-value="ShowOpenExport" />

  </div>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance, nextTick, watch, toRefs } from "vue";
import { columns } from "./config";
import { Message } from '@arco-design/web-vue'
import {
  deleteTrafficPool,
  lotCatdList,
} from "@/api/path/flowPool.api"
import { useSystemStore } from "@/store/modules/systemStore"
import {Getdictionary} from '@/mixins/index.js'
import Forewarning from "./components/forewarning.vue";
import add from './components/add.vue'
import openExport from "./components/openExport.vue"
const systemStore = useSystemStore()
const state = ref({
  role: systemStore.getRole,
  formRef: null,
  searchForm: {
    "label": "",
    "trafficPoolType": "1"
  },
  pagination: {
    total: 0,
    pageSize: 10,
    current: 1,
  },
  sourceList: [],
  trafficList: [],
  typeList: [],
  tariffIdList: [],
  ShowOpenExport: false,
  visibleForewarning: false,
  showAdd: false,
  typeCurrent: 1,
  record: {},
  dataSource: [],
  FormDataList: {}
})
const {
  role,
  searchForm,
  pagination,
  typeCurrent,
  sourceList,
  trafficList,
  ShowOpenExport,
  visibleForewarning,
  showAdd,
  record,
  dataSource,
  FormDataList
} = toRefs(state.value)
const { proxy } = getCurrentInstance()

const intData = async () => {
  const param = {
    current: pagination.value.current,
    size: pagination.value.pageSize,
    ...searchForm.value,
    type: 1
  }
  const { data } = await lotCatdList(param)
  dataSource.value = (data.records || []).map((item, index) => {
    // const trafficPoolType = typeList.value.find(val => val.value == item.trafficPoolType)?.label
    const trafficPoolStatus = trafficList.value.find(val => val.value == item.status)?.label
    const sourceName = sourceList.value.find(val => val.value == item.source)?.label
    const Activated = 0 + '/' + item.iccids?.length
    const HaveBeenUsed = 0 + '/' + item.size + item.sizeType
    return {
      ...item,
      sourceName,// 运营商名称
      trafficPoolStatus,
      Activated: Activated,
      HaveBeenUsed: HaveBeenUsed,
    }
  })

  pagination.value.total = data.total
}
// 删除
const handleDel = async (id) => {
  const { code } = await deleteTrafficPool({ id })
  if (code == 200) {
    Message.success({
      content: "删除成功！",
      duration: 2000,
    })
    intData()
  }
};

const evChangePage = (page) => {
  pagination.value.current = page
  intData()
}
const handleSearch = () => {
  intData()
}
const resetSearch = () => {
  searchForm.value.label = ''
  intData()
}

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

const handelForewring = (item) => {
  FormDataList.value = item
  visibleForewarning.value = true
}

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

onMounted(async () => {
  await handleDictValue()

  await intData()
})

</script>

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

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

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

.audit-btn {
  margin-bottom: 10px;
}
</style>