<!-- 后流量池 -->
<template>
<div class="container">
<div class="head-title">
<span>{{ route.meta.title }} </span>
<span class="head-title-right">
<!-- <a-popconfirm :content="$t('lotCard.confirmTitleCancelOrder')" :ok-text="$t('form.Confirm')"
:cancel-text="$t('form.Cancel')" @ok="handleUnsubscribeDialog(record)">
<a-button type="primary">{{ $t('lotCard.titleCancelOrder') }}</a-button>
</a-popconfirm> -->
</span>
</div>
<!-- 搜索条件区 -->
<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-popconfirm :content="$t('lotCard.confirmTitleCancelOrder')" :ok-text="$t('form.Confirm')"
:cancel-text="$t('form.Cancel')" @ok="handleUnsubscribeDialog(record)">
<a class="a-link" href="javascript:;" style="margin-right: 1rem" >{{ $t('lotCard.titleCancelOrder')
}}</a>
</a-popconfirm> -->
<!-- 删除 -->
<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>
<!-- 导卡 -->
<!-- <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(3, record)">{{-->
<!-- $t('flowPool.exportCard')-->
<!-- }}</a>-->
</template>
</a-table>
<!-- 新增弹框 -->
<a-modal :title="typeCurrent == 1 ? $t('form.Add') : typeCurrent == 2 ? $t('form.Edit') : $t('flowPool.Detail')"
v-model:visible="visible" @onCancel="resetForm" centered :maskClosable="false" :footer="null" width="55%">
<a-tabs v-model:active-key="activeKey">
<a-tab-pane key="1" :title="$t('flowPool.infoTabs')">
<a-form ref="formRef" :rules="rules" :model="formState" @submit="handleSubmit"
style="width: 620px;">
<a-form-item :label="$t('flowPool.label')" field="label">
<a-input v-model="formState.label"
:placeholder="$t('form.PleaseEnterThe') + $t('flowPool.label')"/>
</a-form-item>
<a-form-item :label="$t('flowPool.source')" field="source">
<a-select v-model="formState.source"
:placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.source')">
<a-option v-for=" item in sourceList" :key="item.id" :value="item.value">{{
item.label
}}
</a-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('flowPool.trafficPoolStatus')" field="status">
<a-select v-model="formState.status"
:placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.trafficPoolStatus')">
<a-option v-for=" item in trafficList" :key="item.id" :value="item.value">{{
item.label
}}
</a-option>
</a-select>
</a-form-item>
<!-- <a-form-item :label="$t('flowPool.trafficPoolType')" field="trafficPoolType">
<a-select v-model="formState.trafficPoolType"
: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 :label="$t('flowPool.simRariff')" field="simTariffId">
<a-select v-model="formState.simTariffId"
:placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.simRariff')">
<a-option v-for=" item in tariffIdList" :key="item.id" :value="item.value">{{
item.label
}}
</a-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('flowPool.ICCIDlabel')" v-if="formState.simTariffId!==null">
<a-select v-model="formState.iccids" multiple
:placeholder="$t('flowPool.ICCIDName')">
<a-option v-for=" item in card" :key="item.iccid" :value="item.iccid">{{
item.iccid
}}
</a-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('flowPool.expireTime')" field="expireTime">
<a-date-picker v-model="formState.expireTime" show-time
:time-picker-props="{ defaultValue: '09:09:06' }" format="YYYY-MM-DD HH:mm:ss"/>
</a-form-item>
<a-form-item :label="$t('flowPool.poolSize')" field="size">
<a-input v-model="formState.size" :placeholder="$t('flowPool.poolSize')"/>
<a-select v-model="formState.sizeType" style="width: 80px; margin-left: 8px;">
<a-option value="KB">KB</a-option>
<a-option value="MB">MB</a-option>
<a-option value="GB">GB</a-option>
</a-select>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" style="margin-right: 10px;">{{
$t('form.Confirm')
}}
</a-button>
<a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
<!-- <a-tab-pane key="2" :title="$t('flowPool.warnTabs')">-->
<!-- <a-form :model="formWarning" direction="inline">-->
<!-- <div class="form-pool-tit">-->
<!-- <div class="pool-icon"></div>-->
<!-- 客户端·池预警设置-->
<!-- </div>-->
<!-- <a-form-item field="totalDosage" tooltip="请输入" label="总用量占比">-->
<!-- <a-input-number v-model="formWarning.totalDosage" :style="{ width: '320px' }"-->
<!-- placeholder="请输入" allow-clear hide-button>-->
<!-- <template #suffix>-->
<!-- %-->
<!-- </template>-->
<!-- </a-input-number>-->
<!-- <a-checkbox value="1" v-model="formWarning.totalDosageCheck">达量预警</a-checkbox>-->
<!-- </a-form-item>-->
<!-- <a-form-item field="stoppagePool" label="达量停机">-->
<!-- <a-select v-model="formWarning.stoppagePool" placeholder="请选择" :style="{ width: '320px' }"-->
<!-- allow-clear>-->
<!-- <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
<!-- :label="item.label"/>-->
<!-- </a-select>-->
<!-- <a-checkbox value="1" v-model="formWarning.stoppagePoolCheck">达量停机</a-checkbox>-->
<!-- </a-form-item>-->
<!-- <a-form-item field="stopNetworkPool" label="达量断网">-->
<!-- <a-select v-model="formWarning.stopNetworkPool" placeholder="请选择"-->
<!-- :style="{ width: '320px' }" allow-clear>-->
<!-- <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
<!-- :label="item.label"/>-->
<!-- </a-select>-->
<!-- <a-checkbox value="1" v-model="formWarning.stopNetworkPoolCheck">达量断网</a-checkbox>-->
<!-- </a-form-item>-->
<!-- <a-form-item field="remindTotal" label="提醒次数">-->
<!-- <a-input-number v-model="formWarning.remindTotal" :style="{ width: '320px' }"-->
<!-- placeholder="请输入" allow-clear hide-button>-->
<!-- <template #suffix>-->
<!-- 次/月-->
<!-- </template>-->
<!-- </a-input-number>-->
<!-- </a-form-item>-->
<!-- <div class="form-pool-tit">-->
<!-- <div class="pool-icon"></div>-->
<!-- 客户端·单卡预警设置-->
<!-- </div>-->
<!-- <a-form-item field="oneCardWarning" tooltip="请输入" label="单卡用量预警">-->
<!-- <a-input-number v-model="formWarning.oneCardWarning" :style="{ width: '320px' }"-->
<!-- placeholder="请输入" allow-clear hide-button>-->
<!-- </a-input-number>-->
<!-- <a-checkbox value="1" v-model="formWarning.outTotalCheck">达量预警</a-checkbox>-->
<!-- </a-form-item>-->
<!-- <a-form-item field="stoppageCard" label="达量停机">-->
<!-- <a-select v-model="formWarning.stoppageCard" placeholder="请选择" :style="{ width: '320px' }"-->
<!-- allow-clear>-->
<!-- <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
<!-- :label="item.label"/>-->
<!-- </a-select>-->
<!-- <a-checkbox value="1" v-model="formWarning.stoppageCardCheck">达量停机</a-checkbox>-->
<!-- </a-form-item>-->
<!-- <a-form-item field="stopNetworkCard" label="达量断网">-->
<!-- <a-select v-model="formWarning.stopNetworkCard" placeholder="请选择"-->
<!-- :style="{ width: '320px' }" allow-clear>-->
<!-- <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
<!-- :label="item.label"/>-->
<!-- </a-select>-->
<!-- <a-checkbox value="1" v-model="formWarning.stopNetworkCardCheck">达量断网</a-checkbox>-->
<!-- </a-form-item>-->
<!-- <div class="form-pool-tit">-->
<!-- <div class="pool-icon"></div>-->
<!-- 管理端预警设置-->
<!-- </div>-->
<!-- <a-form-item field="poolUsedWarning" tooltip="请输入" label="池已用量预警">-->
<!-- <a-input-number v-model="formWarning.poolUsedWarning" :style="{ width: '320px' }"-->
<!-- placeholder="请输入" allow-clear hide-button>-->
<!-- <template #suffix>-->
<!-- %-->
<!-- </template>-->
<!-- </a-input-number>-->
<!-- <a-checkbox value="1" v-model="formWarning.poolUsedCheck">达量预警</a-checkbox>-->
<!-- </a-form-item>-->
<!-- <a-form-item field="stoppageManagement" label="达量停机">-->
<!-- <a-select v-model="formWarning.stoppageManagement" placeholder="请选择"-->
<!-- :style="{ width: '320px' }" allow-clear>-->
<!-- <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
<!-- :label="item.label"/>-->
<!-- </a-select>-->
<!-- <a-checkbox value="1" v-model="formWarning.stoppageManagementCheck">达量停机</a-checkbox>-->
<!-- </a-form-item>-->
<!-- <a-form-item field="stopNetworkManagement" label="达量断网">-->
<!-- <a-select v-model="formWarning.stopNetworkManagement" placeholder="请选择"-->
<!-- :style="{ width: '320px' }" allow-clear>-->
<!-- <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
<!-- :label="item.label"/>-->
<!-- </a-select>-->
<!-- <a-checkbox value="1" v-model="formWarning.stopNetworkManagementCheck">达量断网</a-checkbox>-->
<!-- </a-form-item>-->
<!-- <a-form-item>-->
<!-- <a-button type="primary" html-type="submit" @click="resetForm"-->
<!-- style="margin-right: 10px;">{{-->
<!-- $t('form.Confirm')-->
<!-- }}-->
<!-- </a-button>-->
<!-- <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>-->
<!-- </a-form-item>-->
<!-- </a-form>-->
<!-- </a-tab-pane>-->
</a-tabs>
</a-modal>
<a-modal v-model:visible="openExport" @ok="handleOk" @cancel="handleCancel" width="1000px">
<template #title>
批量导入
</template>
<div class="export-box">
<div class="export-box-item">
<div class="box-item-title">
<div class="title-icon"></div>
批量导入
</div>
<div class="box-item-content">
<div class="item-txt">
<div class="item-txt-title">标题</div>
<div class="item-txt-text">联通流量卡</div>
</div>
<div class="item-txt">
<div class="item-txt-title">标题</div>
<div class="item-txt-text">联通流量卡</div>
</div>
<div class="item-txt">
<div class="item-txt-title"></div>
<div class="item-txt-text">
<a-upload action="/">
<template #upload-button>
<a-button type="primary">导入</a-button>
</template>
</a-upload>
</div>
</div>
</div>
</div>
<div class="export-box-item" style="margin-top:20px;">
<div class="box-item-title">
<div class="title-icon"></div>
导入结果
</div>
<div class="box-item-content">
<a-table :columns="columnsExport" :data="dataExport">
<template #operate="{ record }">
<a-button @click="openContract(record)" type="text">下载</a-button>
</template>
<template #status="{ record }">
<div class="export-status" v-if="record.status == 1">
<div class="status-icon" style="background: rgba(82, 196, 27, 1);"></div>
导入成功
</div>
<div class="export-status" v-if="record.status == 2">
<div class="status-icon" style="background: rgba(250, 173, 20, 1);"></div>
部分成功
</div>
<div class="export-status" v-if="record.status == 3">
<div class="status-icon" style="background: rgba(247, 66, 75, 1);"></div>
校验失败
</div>
</template>
</a-table>
</div>
</div>
</div>
</a-modal>
</div>
</template>
<script setup>
import {onMounted, ref, reactive, getCurrentInstance, nextTick, watch} from "vue";
import {useRoute} from "vue-router";
import {columns} from "../config";
import {Message, Notification} from '@arco-design/web-vue'
import {
deleteTrafficPool,
addTrafficPool,
updateTrafficPool,
trafficPoolList,
updateCardList
} 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"
import {Getdictionary} from '@/mixins/index.js'
const systemStore = useSystemStore()
const role = ref(systemStore.getRole)
const card = ref([])
const {proxy} = getCurrentInstance()
const formRef = ref()
const searchForm = ref({
"label": "",
});
const dataSource = ref([]);
const route = useRoute();
const pagination = ref({
total: 0,
pageSize: 10,
current: 1,
})
const intData = async () => {
const param = {
current: pagination.value.current,
size: pagination.value.pageSize,
...searchForm.value,
trafficPoolType: '2',
type:2
}
const {data} = await trafficPoolList(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,// 运营商名称
// trafficPoolType,
Activated:Activated,
HaveBeenUsed:HaveBeenUsed,
trafficPoolStatus,
}
})
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 activeKey = ref('1');
const visible = ref(false);
const typeCurrent = ref(null);
const sourceList = ref([])
const trafficList = ref([])
const typeList = ref([])
const tariffIdList = ref([])
// 详情---------------------------
const openExport = ref(false);
const columnsExport = [
{title: '序号', dataIndex: 'index', align: 'center', render: ({rowIndex}) => rowIndex + 1},
{
title: '操作人',
dataIndex: 'name',
},
{
title: '导入时间',
dataIndex: 'exportTime',
},
{
title: '完成时间',
dataIndex: 'successTime',
},
{
title: '状态',
slotName: 'status',
align: 'center'
},
{title: '操作', slotName: 'operate', align: 'center'},
];
const dataExport = reactive([{
key: '1',
name: 'Jane Doe',
exportTime: '2024-10-13 22:20:01',
successTime: '2024-10-13 22:20:01',
status: 1
}, {
key: '2',
name: 'Alisa Ross',
exportTime: '2024-10-13 22:20:01',
successTime: '2024-10-13 22:20:01',
status: 2
}, {
key: '3',
name: 'Kevin Sandra',
exportTime: '2024-10-13 22:20:01',
successTime: '2024-10-13 22:20:01',
status: 3
}, {
key: '4',
name: 'Ed Hellen',
exportTime: '2024-10-13 22:20:01',
successTime: '2024-10-13 22:20:01',
status: 2
}, {
key: '5',
name: 'William Smith',
exportTime: '2024-10-13 22:20:01',
successTime: '2024-10-13 22:20:01',
status: 3
}]);
// -------------------------------
const formState = ref({
// 流量包名称
"label": "",
// 流量池类型: 1: 前流量池 2: 后流量池
"trafficPoolType": "2",
// 来源
"source": "",
// 流量包状态：1：正常（发布计划状态）2：线下暂停销售
"status": "",
// 流量池ID
"simTariffId": null,
// 过期时间
"expireTime": "",
// ICCID列表
"iccids": [],
"size": null,
"sizeType": ''
});
const formWarning = reactive({
// 总用量占比
totalDosage: null,
// 总用量占比达量预警
totalDosageCheck: '',
// 达量停机
stoppagePool: '',
stoppagePoolCheck: '',
stopNetworkPool: '',
stopNetworkPoolCheck: '',
remindTotal: null,
oneCardWarning: null,
outTotalCheck: '',
stoppageCard: '',
stoppageCardCheck: '',
stopNetworkCard: '',
stopNetworkCardCheck: '',
poolUsedWarning: null,
poolUsedCheck: '',
stoppageManagement: '',
stoppageManagementCheck: '',
stopNetworkManagement: '',
stopNetworkManagementCheck: '',
})
const rules = {
label: [{required: true, trigger: 'change',}],
source: [{required: true, trigger: 'change',}],
status: [{required: true, trigger: 'change',}],
simTariffId: [{required: true, trigger: 'change',}],
expireTime: [{required: true, trigger: 'change',}],
// iccids: [{required: true, trigger: 'change',}],
size: [{required: true, trigger: 'change',}],
sizeType: [{required: true, trigger: 'change',}],
};
// 提交
const handleSubmit = ({values, errors}) => {
formRef.value.validate(async (errors) => {
if (!errors) {
values.size = Number(values.size)
if (formState.value.id) {
const {code, data} = await updateTrafficPool(formState.value)
if (code == 200) {
Message.success({
content: "修改成功！",
duration: 2000,
})
resetForm()
intData()
}
} else {
const {code, data} = await addTrafficPool(formState.value)
if (code == 200) {
Message.success({
content: "添加成功！",
duration: 2000,
})
resetForm()
intData()
}
}
}
});
}
// 弹框
const dictShowModel = (type, data) => {
if (type == 3) {
openExport.value = true;
return
}
handleTariff()
formRef.value.resetFields();
typeCurrent.value = type;
activeKey.value = "1"
nextTick(() => {
visible.value = true;
});
// 编辑
if (type == 2) {
Object.keys(formState.value).forEach(key => {
if (data[key]) {
formState.value[key] = data[key]
}
})
formState.value.id = data.id
}
}
// 获取资费列表选择id
const handleTariff = async () => {
const {code, data} = await tariffList({
"current": 1,
"size": 10
})
if (code == 200) {
tariffIdList.value = (data.records || []).map(item => {
return {
...item,
value: item.id
}
})
}
}
// 取消
const resetForm = () => {
visible.value = false;
Object.keys(formState.value).forEach(key => {
if (key != 'trafficPoolType') {
formState.value[key] = ''
}
})
delete formState.value.id
}
// --------------------------------------------------------
// 获取字典
const handleDictValue = async () => {
sourceList.value = await Getdictionary('source')
trafficList.value = await Getdictionary('trafficPacketStatus')
typeList.value = await Getdictionary('trafficPoolType')
}
watch(() => formState.value.simTariffId, val => {
if (!val) return
updateCardList({id: val}).then(res => {
if (res.code === 200) {
card.value = res.data
}
})
})
onMounted(async () => {
await handleDictValue()
await 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>