|
|
@@ -1,79 +1,90 @@
|
|
|
<!-- 流量池 -->
|
|
|
<template>
|
|
|
- <div class="silent-expire-alarm">
|
|
|
+ <div class="container">
|
|
|
+ <div class="head-title">
|
|
|
+ <span>{{ route.meta.title }} </span>
|
|
|
+ <span class="head-title-right">
|
|
|
+ <a-button class="m-r-10" type="primary" @click="dictShowModel(1, null)">{{ $t('form.Add') }}</a-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
<!-- 搜索条件区 -->
|
|
|
<div class="search-section">
|
|
|
<a-form :model="searchForm" layout="inline">
|
|
|
- <a-form-item field="poolNumber" label="ICCID">
|
|
|
- <a-input v-model="searchForm.poolNumber" placeholder="请输入流量池编号" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item field="poolNumber" label="IMSI">
|
|
|
- <a-input v-model="searchForm.poolNumber" placeholder="请输入流量池编号" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item field="poolNumber" label="IMEI">
|
|
|
- <a-input v-model="searchForm.poolNumber" placeholder="请输入流量池编号" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item field="poolNumber" label="MSISDN">
|
|
|
- <a-input v-model="searchForm.poolNumber" placeholder="请输入流量池编号" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item field="poolNumber" label=" 用户">
|
|
|
- <a-input v-model="searchForm.poolNumber" placeholder="请输入流量池编号" allow-clear />
|
|
|
+ <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="poolNumber" label="订单编号">
|
|
|
- <a-input v-model="searchForm.poolNumber" placeholder="请输入流量池编号" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item field="customerName" label="运营商">
|
|
|
- <a-select v-model="value" :style="{ width: '200px' }" placeholder="Please select ...">
|
|
|
- <a-option v-for="item of poolUser" :value="item.value" :label="item.label" :key="item.value" />
|
|
|
+ <a-form-item field="trafficPoolType" :label="$t('flowPool.trafficPoolType')">
|
|
|
+ <a-select v-model="formState.traffic_pool_type"
|
|
|
+ :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 field="customerName" label="卡套餐">
|
|
|
- <a-select v-model="value" :style="{ width: '200px' }" placeholder="Please select ...">
|
|
|
- <a-option v-for="item of poolUser" :value="item.value" :label="item.label" :key="item.value" />
|
|
|
- </a-select>
|
|
|
+ <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-item field="customerName" label="流量状态">
|
|
|
- <a-select v-model="value" :style="{ width: '200px' }" placeholder="Please select ...">
|
|
|
- <a-option v-for="item of poolUser" :value="item.value" :label="item.label" :key="item.value" />
|
|
|
- </a-select>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }">
|
|
|
+ <template #id="{ record }">
|
|
|
+ <!-- 查看 -->
|
|
|
+ <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(3, record)">{{
|
|
|
+ $t('flowPool.Detail') }}</a>
|
|
|
+ <!-- 修改 -->
|
|
|
+ <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)">{{
|
|
|
+ $t('form.Edit') }}</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">{{ $t('form.Delete')
|
|
|
+ }}</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </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">
|
|
|
+ <a-form ref="formRef" :rules="rules" :model="formState" @submit="handleSubmit">
|
|
|
+ <a-form-item :label="$t('flowPool.label')" field="label">
|
|
|
+ <a-input v-model="formState.label" />
|
|
|
</a-form-item>
|
|
|
- <a-form-item field="customerName" label="卡状态">
|
|
|
- <a-select v-model="value" :style="{ width: '200px' }" placeholder="Please select ...">
|
|
|
- <a-option v-for="item of poolUser" :value="item.value" :label="item.label" :key="item.value" />
|
|
|
+ <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 field="customerName" label="预警状态">
|
|
|
- <a-select v-model="value" :style="{ width: '200px' }" placeholder="Please select ...">
|
|
|
- <a-option v-for="item of poolUser" :value="item.value" :label="item.label" :key="item.value" />
|
|
|
+ <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 field="customerName" label="沉默期时间">
|
|
|
- <a-date-picker style="width: 200px;" />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item field="customerName" label="卡导入时间">
|
|
|
- <a-range-picker @change="onChange" @select="onSelect" style="width: 254px;" />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item field="customerName" label="卡到期时间">
|
|
|
- <a-range-picker @change="onChange" @select="onSelect" style="width: 254px;" />
|
|
|
+ <a-form-item :label="$t('flowPool.trafficPoolType')" field="traffic_pool_type">
|
|
|
+ <a-select v-model="formState.traffic_pool_type"
|
|
|
+ :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">搜索</a-button>
|
|
|
- <a-button @click="resetSearch">重置</a-button>
|
|
|
- </a-space>
|
|
|
+ <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>
|
|
|
- </div>
|
|
|
- <!-- 数据表格 -->
|
|
|
- <a-table row-key="poolNumber" v-model:selectedKeys="selectedKeys" :row-selection="rowSelection"
|
|
|
- :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: '100%', y: '650px' }">
|
|
|
- <template #operate="{ record }">
|
|
|
- <a-button @click="openContract(record)" type="text">卡操作</a-button>
|
|
|
- <a-button @click="openContract(record)" type="text">换卡</a-button>
|
|
|
- <a-button @click="openContract(record)" type="text">充值二维码</a-button>
|
|
|
- <a-button @click="exportCard(record)" type="text">卡详情</a-button>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
<a-modal v-model:visible="openExport" @ok="handleOk" @cancel="handleCancel" width="1400px">
|
|
|
<template #title>
|
|
|
卡详情
|
|
|
@@ -286,193 +297,147 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue';
|
|
|
-import { Message } from '@arco-design/web-vue';
|
|
|
-import * as echarts from 'echarts'
|
|
|
-// 创造一个响应式对象来保存echarts对象
|
|
|
-const chartDom = ref(null);
|
|
|
-let chartInstance = null;
|
|
|
-
|
|
|
-// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
|
|
|
-onMounted(async () => {
|
|
|
- await nextTick(); // 确保DOM已经渲染完成
|
|
|
- chartInstance = echarts.init(chartDom.value);
|
|
|
- const option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: [120, 200, 150, 80, 70, 110, 130, 20, 28, 100, 123, 134],
|
|
|
- type: 'bar'
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- chartInstance.setOption(option);
|
|
|
-});
|
|
|
+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 { enum_dict } from "@/hooks/enum";
|
|
|
+import { useSystemStore } from '@/store/modules/systemStore'
|
|
|
|
|
|
-// 销毁ECharts实例
|
|
|
-onUnmounted(() => {
|
|
|
- if (chartInstance != null && chartInstance.dispose) {
|
|
|
- chartInstance.dispose();
|
|
|
- }
|
|
|
-});
|
|
|
-const selectedKeys = ref([]);
|
|
|
-const rowSelection = reactive({
|
|
|
- type: 'checkbox',
|
|
|
- showCheckedAll: true,
|
|
|
- onlyCurrent: false,
|
|
|
-});
|
|
|
-const searchForm = reactive({
|
|
|
- cardNumber: '',
|
|
|
- customerName: '',
|
|
|
-});
|
|
|
-// 流量池用户选项
|
|
|
-const poolUser = [
|
|
|
- { value: 1, label: '阿里巴巴' },
|
|
|
- { value: 2, label: '腾讯' },
|
|
|
- { value: 3, label: '字节跳动' },
|
|
|
- { value: 4, label: '百度' },
|
|
|
- { value: 5, label: '小红书' },
|
|
|
|
|
|
-];
|
|
|
-const customerNameOpt = [
|
|
|
- { value: 1, label: '广州联通' },
|
|
|
- { value: 2, label: '湖北移动' },
|
|
|
- { value: 3, label: '浙江电信' },
|
|
|
- { value: 4, label: '湖北联通' },
|
|
|
- { value: 5, label: '湖北电信' },
|
|
|
-
|
|
|
-];
|
|
|
-const moneyNameOpt = [
|
|
|
- { value: 1, label: '移动20G' },
|
|
|
- { value: 2, label: '监控1G月租' },
|
|
|
- { value: 3, label: '联通100G' },
|
|
|
- { value: 4, label: '电信200G' },
|
|
|
- { value: 5, label: '监控2G月租' },
|
|
|
+const { proxy } = getCurrentInstance()
|
|
|
+const formRef = ref()
|
|
|
+const searchForm = ref({
|
|
|
+ "label": "",
|
|
|
+});
|
|
|
|
|
|
-];
|
|
|
-const columns = [
|
|
|
- { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1, width: 80 },
|
|
|
- { title: '流量池编号', dataIndex: 'poolNumber', width: 150, align: 'center' },
|
|
|
- { title: '流量池名称', dataIndex: 'poolName', width: 120, align: 'center' },
|
|
|
- { title: '供应商名称', dataIndex: 'customerName', width: 120, align: 'center' },
|
|
|
- { title: '资费名称', dataIndex: 'moneyName', width: 120, align: 'center' },
|
|
|
- { title: '已激活卡数/总卡数量', dataIndex: 'cardMsg', width: 200, align: 'center' },
|
|
|
- { title: '已使用流量/总流量(G)', dataIndex: 'trafficMsg', width: 200, align: 'center' },
|
|
|
- { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
|
|
|
- { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
|
|
|
- { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
|
|
|
- { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
|
|
|
- { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
|
|
|
- { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
|
|
|
- { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
|
|
|
- { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
|
|
|
- { title: '更新日期', dataIndex: 'updateTime' },
|
|
|
- { title: '操作', slotName: 'operate', align: 'center', width: 400, fixed: 'right' },
|
|
|
-];
|
|
|
const tableData = ref([
|
|
|
{
|
|
|
- poolNumber: '13800138001',
|
|
|
- poolName: '广州移动',
|
|
|
- customerName: '泰国True',
|
|
|
- moneyName: '移动200G',
|
|
|
- cardMsg: '11/100',
|
|
|
- trafficMsg: '20/200',
|
|
|
- updateTime: '2024-10-11'
|
|
|
- // operate:'上传合同'
|
|
|
- },
|
|
|
- {
|
|
|
- poolNumber: '13800138002',
|
|
|
- poolName: '广州移动',
|
|
|
- customerName: '泰国True',
|
|
|
- moneyName: '移动200G',
|
|
|
- cardMsg: '11/100',
|
|
|
- trafficMsg: '20/200',
|
|
|
- updateTime: '2024-10-11'
|
|
|
- // operate:'上传合同'
|
|
|
- },
|
|
|
- {
|
|
|
- poolNumber: '13800138003',
|
|
|
- poolName: '广州移动',
|
|
|
- customerName: '泰国True',
|
|
|
- moneyName: '移动200G',
|
|
|
- cardMsg: '11/100',
|
|
|
- trafficMsg: '20/200',
|
|
|
- updateTime: '2024-10-11'
|
|
|
- // operate:'上传合同'
|
|
|
+ label: "监控1G月租",
|
|
|
+ source: "泰国AIS",// 运营商名称
|
|
|
+ trafficPoolType: "前向池",
|
|
|
+ trafficPoolStatus: "前向池",
|
|
|
+ simRariffId: "1",
|
|
|
+ expireTime: "2025-01-02 15:04:05",
|
|
|
+
|
|
|
+ poolNumber: "NR026",
|
|
|
+ cardRariffName: "监控1G月租",
|
|
|
+ cardFlow: "1G/月",
|
|
|
+ cardNum: "11/100",
|
|
|
+ UsedMonth: "1.00G",
|
|
|
+ surplusFlow: "99.0G",
|
|
|
+ totalFlow: "100.0G",
|
|
|
+ warnStatus: "正常",
|
|
|
+ exceededFlow: "--",
|
|
|
},
|
|
|
{
|
|
|
- poolNumber: '13800138004',
|
|
|
- poolName: '广州移动',
|
|
|
- customerName: '泰国True',
|
|
|
- moneyName: '移动200G',
|
|
|
- cardMsg: '11/100',
|
|
|
- trafficMsg: '20/200',
|
|
|
- updateTime: '2024-10-11'
|
|
|
- // operate:'上传合同'
|
|
|
+ label: "监控1G月租",
|
|
|
+ source: "泰国AIS",// 运营商名称
|
|
|
+ trafficPoolType: "后向池",
|
|
|
+ trafficPoolStatus: "后向池",
|
|
|
+ simRariffId: "1",
|
|
|
+ expireTime: "2025-01-02 15:04:05",
|
|
|
+
|
|
|
+ poolNumber: "NR027",
|
|
|
+ cardRariffName: "监控1G月租",
|
|
|
+ cardFlow: "1G/月",
|
|
|
+ cardNum: "11/100",
|
|
|
+ UsedMonth: "1.00G",
|
|
|
+ surplusFlow: "99.0G",
|
|
|
+ totalFlow: "100.0G",
|
|
|
+ warnStatus: "告警",
|
|
|
+ exceededFlow: "0.2G",
|
|
|
},
|
|
|
- // 可以添加更多模拟数据...
|
|
|
-]);
|
|
|
-// 上传合同的弹框
|
|
|
-const pagination = reactive({
|
|
|
- total: tableData.value.length,
|
|
|
- current: 1,
|
|
|
+])
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+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 openContract = (item) => {
|
|
|
- console.log(item, '???')
|
|
|
+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 warnStatus = trafficList.value.find(val => val.value == item.status)?.label
|
|
|
+ const sourceName = sourceList.value.find(val => val.value == item.source)?.label
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ sourceName,// 运营商名称
|
|
|
+ trafficPoolType,
|
|
|
+ poolNumber: "NR0" + (index + 1),
|
|
|
+ cardRariffName: "监控1G月租",
|
|
|
+ cardFlow: "1G/月",
|
|
|
+ cardNum: "11/100",
|
|
|
+ UsedMonth: "1.00G",
|
|
|
+ surplusFlow: "99.0G",
|
|
|
+ totalFlow: "100.0G",
|
|
|
+ warnStatus,
|
|
|
+ exceededFlow: "--",
|
|
|
+ }
|
|
|
+ })
|
|
|
+ pagination.value.total = data.total
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 删除
|
|
|
+const handleDel = async (id) => {
|
|
|
+ const { code } = await deleteTrafficPool({ id })
|
|
|
+ if (code == 200) {
|
|
|
+ Message.success({
|
|
|
+ content: "删除成功！",
|
|
|
+ duration: 2000,
|
|
|
+ })
|
|
|
+ intData()
|
|
|
+ }
|
|
|
};
|
|
|
+
|
|
|
+//
|
|
|
+
|
|
|
const handleSearch = () => {
|
|
|
- console.log('Search form data:', searchForm);
|
|
|
- Message.success('执行搜索操作');
|
|
|
-};
|
|
|
+ intData()
|
|
|
+}
|
|
|
const resetSearch = () => {
|
|
|
- Object.keys(searchForm).forEach(key => {
|
|
|
- if (Array.isArray(searchForm[key])) {
|
|
|
- searchForm[key] = [];
|
|
|
- } else {
|
|
|
- searchForm[key] = null;
|
|
|
- }
|
|
|
- });
|
|
|
- Message.success('搜索条件已重置');
|
|
|
-};
|
|
|
-// 新增流量池时的基本信息
|
|
|
-const formPool = reactive({
|
|
|
- poolNumber: '',
|
|
|
- poolName: '',
|
|
|
- customerName: '',
|
|
|
- moneyName: '',
|
|
|
- user: ''
|
|
|
-})
|
|
|
-const formWarning = reactive({
|
|
|
- // 总用量占比
|
|
|
- totalDosage: '',
|
|
|
- // 总用量占比达量预警
|
|
|
- totalDosageCheck: '',
|
|
|
- // 达量停机
|
|
|
- stoppagePool: '',
|
|
|
- stoppagePoolCheck: '',
|
|
|
- stopNetworkPool: '',
|
|
|
- stopNetworkPoolCheck: '',
|
|
|
- remindTotal: '',
|
|
|
- oneCardWarning: '',
|
|
|
- outTotalCheck: '',
|
|
|
- stoppageCard: '',
|
|
|
- stoppageCardCheck: '',
|
|
|
- stopNetworkCard: '',
|
|
|
- stopNetworkCardCheck: '',
|
|
|
- poolUsedWarning: '',
|
|
|
- poolUsedCheck: '',
|
|
|
- stoppageManagement: '',
|
|
|
- stoppageManagementCheck: '',
|
|
|
- stopNetworkManagement: '',
|
|
|
- stopNetworkManagementCheck: '',
|
|
|
-})
|
|
|
+ proxy.$refs.formRef.resetFields()
|
|
|
+ intData()
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// -------------------弹窗数据------------------------------------
|
|
|
+const visible = ref(false);
|
|
|
+const typeCurrent = ref(null);
|
|
|
+const sourceList = ref([])
|
|
|
+const trafficList = ref([])
|
|
|
+const typeList = ref([])
|
|
|
+
|
|
|
+// 详情---------------------------
|
|
|
const openExport = ref(false);
|
|
|
const columnsExport = [
|
|
|
{ title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
|
|
|
@@ -526,49 +491,169 @@ const dataExport = reactive([{
|
|
|
successTime: '2024-10-13 22:20:01',
|
|
|
status: 3
|
|
|
}]);
|
|
|
-// 点击导卡按钮
|
|
|
-const exportCard = () => {
|
|
|
- openExport.value = true;
|
|
|
+// -------------------------------
|
|
|
+
|
|
|
+const formState = ref({
|
|
|
+ "id": "",
|
|
|
+ // 流量包名称
|
|
|
+ "label": "",
|
|
|
+ // 流量池类型: 1: 前流量池 2: 后流量池
|
|
|
+ "traffic_pool_type": "",
|
|
|
+ // 来源
|
|
|
+ "source": "",
|
|
|
+ // 流量包状态：1：正常（发布计划状态）2：线下暂停销售
|
|
|
+ "status": "",
|
|
|
+ // 流量池ID
|
|
|
+ "sim_tariff_id": 0,
|
|
|
+ // 过期时间
|
|
|
+ "expire_time": "",
|
|
|
+ // ICCID列表
|
|
|
+ "iccids": ["89852342022040149139", "89852342022060861597"]
|
|
|
+});
|
|
|
+
|
|
|
+const rules = {
|
|
|
+ label: [{ required: true, trigger: 'change', }],
|
|
|
+ sim_data_plan_id: [{ required: true, trigger: 'change', }],
|
|
|
+ user_id: [{ required: true, trigger: 'change', }],
|
|
|
+ source: [{ required: true, trigger: 'change', }],
|
|
|
+ traffic_type: [{ required: true, trigger: 'change', }],
|
|
|
+ billing_type: [{ required: true, trigger: 'change', }],
|
|
|
+ bag_size: [{ required: true, trigger: 'change', }],
|
|
|
+ billing_cycle: [{ required: true, trigger: 'change', }],
|
|
|
+ traffic_pool_type: [{ required: true, trigger: 'change', }],
|
|
|
+ settlement_cycle: [{ required: true, trigger: 'change', }],
|
|
|
+ pricing: [{ required: true, trigger: 'change', }],
|
|
|
+ currency: [{ required: true, trigger: 'change', }],
|
|
|
};
|
|
|
-const onChange = () => {
|
|
|
+
|
|
|
+
|
|
|
+// 提交
|
|
|
+const handleSubmit = ({ values, errors }) => {
|
|
|
+ formRef.value.validate(async (errors) => {
|
|
|
+ if (!errors) {
|
|
|
+ values.user_id = Number(values.user_id)
|
|
|
+ if (formState.value.id) {
|
|
|
+ const { code, data } = await updateTrafficPool(values)
|
|
|
+
|
|
|
+ if (code == 200) {
|
|
|
+ Message.success({
|
|
|
+ content: "修改成功！",
|
|
|
+ duration: 2000,
|
|
|
+ })
|
|
|
+ visible.value = false;
|
|
|
+ intData()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ const { code, data } = await addTrafficPool(values)
|
|
|
+ if (code == 200) {
|
|
|
+ Message.success({
|
|
|
+ content: "添加成功！",
|
|
|
+ duration: 2000,
|
|
|
+ })
|
|
|
+ visible.value = false;
|
|
|
+ intData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
}
|
|
|
+// 弹框
|
|
|
+const dictShowModel = (type, data) => {
|
|
|
+ if (type == 3) {
|
|
|
+ openExport.value = true;
|
|
|
+ return
|
|
|
+ }
|
|
|
+ formRef.value.resetFields();
|
|
|
+ typeCurrent.value = type;
|
|
|
+ visible.value = true;
|
|
|
+ // 编辑
|
|
|
+ if (type == 2) {
|
|
|
+ // Object.assign(formState.value, data);
|
|
|
+ Object.keys(formState.value).forEach(key => {
|
|
|
+ if (data[key]) {
|
|
|
+ formState.value[key] = data[key]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+// 取消
|
|
|
+const resetForm = () => {
|
|
|
+ visible.value = false;
|
|
|
+ formRef.value.resetFields();
|
|
|
+}
|
|
|
+
|
|
|
+// 卡详情
|
|
|
+
|
|
|
const handleOk = () => {
|
|
|
}
|
|
|
const handleCancel = () => {
|
|
|
}
|
|
|
+// --------------------------------------------------------
|
|
|
+// 获取字典
|
|
|
+const handleDictValue = () => {
|
|
|
+ const dictList = JSON.parse(window.localStorage.getItem('dictList')) ?? []
|
|
|
+ sourceList.value = dictList.filter((item) => item.type_key == enum_dict.SOURCE)
|
|
|
+ trafficList.value = dictList.filter((item) => item.type_key == enum_dict.TRAFFIC_PACKET_STATUS)
|
|
|
+ typeList.value = dictList.filter((item) => item.type_key == enum_dict.TRAFFIC_POOL_TYPE)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ handleDictValue()
|
|
|
+ intData()
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
-.silent-expire-alarm {
|
|
|
- padding: 20px !important;
|
|
|
- // background: #fcf;
|
|
|
+.head-title-right {
|
|
|
+ .m-r-10 {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.search-section {
|
|
|
+ margin-top: 20px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
-.arco-table-th {
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
+.container {
|
|
|
+ .head-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
|
|
|
-.form-pool-tit {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .form-row {
|
|
|
+ display: flex;
|
|
|
|
|
|
- .pool-icon {
|
|
|
- margin-right: 10px;
|
|
|
- width: 4px;
|
|
|
- height: 16px;
|
|
|
- background: #1B5DF8;
|
|
|
- font-size: 14px;
|
|
|
- color: #6C6E70;
|
|
|
- font-family: PingFang SC;
|
|
|
+ .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;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
.export-box {
|
|
|
width: 100%;
|
|
|
display: flex;
|
wanghairong