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

<!-- 流量池 -->
<template>
    <div class="container">
        <div class="head-title">
            <span>{{ route.meta.title }} </span>
            <span class="head-title-right">
            </span>
        </div>
        <!-- 搜索条件区 -->
        <div class="search-section">
            <a-form :model="searchForm" ref="formRef" 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="traffic_pool_type" :label="$t('flowPool.trafficPoolType')">
                    <a-select v-model="searchForm.traffic_pool_type" style="width: 200px;"
                        :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.trafficPoolType')">
                        <a-option v-for=" item in typeList" :key="item.id" :value="item.value">{{ item.label
                            }}</a-option>
                    </a-select>
                </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="id" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
            @page-change="evChangePage">
            <template #id="{ record }">
            </template>

        </a-table>


    </div>
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance, nextTick } from "vue";
import { useRoute } from "vue-router";
import { columns } from "./config";
import { Message, Notification } from '@arco-design/web-vue'
import { deleteTrafficPool, addTrafficPool, updateTrafficPool, trafficPoolList } from "@/api/path/flowPool.api"
import { tariffList } from "@/api/path/tariffManagement.api"
import { orderCancel } from "@/api/path/lotCard.api"
import { enum_dict } from "@/hooks/enum";
import { useSystemStore } from "@/store/modules/systemStore"


const systemStore = useSystemStore()
const role = ref(systemStore.getRole)
const { proxy } = getCurrentInstance()
const formRef = ref()
const searchForm = ref({
    "label": "",
    "traffic_pool_type": ""
});

const typeList = ref([]);
const trafficList = ref([]);
const sourceList = 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 intData = async () => {
    const param = {
        current: pagination.value.current,
        size: pagination.value.pageSize,
        ...searchForm.value,
    }
    const { data } = await trafficPoolList(param)
    dataSource.value = (data.records || []).map((item, index) => {
        const trafficPoolType = typeList.value.find(val => val.value == item.traffic_pool_type)?.label
        const trafficPoolStatus = trafficList.value.find(val => val.value == item.status)?.label
        const sourceName = sourceList.value.find(val => val.value == item.source)?.label
        console.log(item, "item-------------------------");

        return {
            ...item,
            sourceName,// 运营商名称
            trafficPoolType,
            trafficPoolStatus,
            poolNumber: "NR0" + (index + 1),
            cardRariffName: "监控1G月租",
            cardFlow: "1G/月",
            cardNum: "11/100",
            UsedMonth: "1.00G",
            surplusFlow: "99.0G",
            totalFlow: "100.0G",
            exceededFlow: "--",
        }
    })
    pagination.value.total = data.total
}




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

const handleSearch = () => {
    intData()
}
const resetSearch = () => {
    searchForm.value.label = ''
    intData()
}


// --------------------------------------------------------
// 获取字典
const handleDictValue = () => {
    const dictList = JSON.parse(window.localStorage.getItem('dictList')) ?? []
    sourceList.value = dictList.filter((item) => item.typeKey == enum_dict.SOURCE)
    trafficList.value = dictList.filter((item) => item.typeKey == enum_dict.TRAFFIC_PACKET_STATUS)
    typeList.value = dictList.filter((item) => item.typeKey == enum_dict.TRAFFIC_POOL_TYPE)
}





onMounted(() => {
    handleDictValue()
    intData()
})



</script>

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

.head-title-right {}

.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>