|
|
@@ -0,0 +1,821 @@
|
|
|
+<!-- 后流量池 -->
|
|
|
+<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="trafficPoolType" :label="$t('flowPool.trafficPoolType')">
|
|
|
+ <a-select v-model="formState.traffic_pool_type"
|
|
|
+ :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.trafficPoolType')"
|
|
|
+ style="width: 170px;">
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <div class="audit-btn">
|
|
|
+ <a-button @click="dictShowModel(1, null)" type="text">
|
|
|
+ <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"
|
|
|
+ :rowSelection="rowSelection" v-model:selected-keys="selectedKeys" :scroll="{ x: 'auto' }">
|
|
|
+ <template #id="{ record }">
|
|
|
+ <!-- 修改 -->
|
|
|
+ <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)">{{
|
|
|
+ $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)">
|
|
|
+ <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="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 :label="$t('flowPool.simRariff')" field="sim_tariff_id">
|
|
|
+ <a-select v-model="formState.sim_tariff_id"
|
|
|
+ :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.expireTime')" field="expire_time">
|
|
|
+ <a-date-picker v-model="formState.expire_time" 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="poolSize">
|
|
|
+ <a-input v-model="formState.poolSize" :placeholder="$t('flowPool.poolSize')" />
|
|
|
+ <a-select v-model="formState.poolSizeUnit" 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 } 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";
|
|
|
+
|
|
|
+
|
|
|
+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 rowSelection = reactive({
|
|
|
+ type: 'checkbox',
|
|
|
+ showCheckedAll: true,
|
|
|
+ onlyCurrent: false,
|
|
|
+});
|
|
|
+const selectedKeys = ref([])
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const intData = async () => {
|
|
|
+ const param = {
|
|
|
+ current: pagination.value.current,
|
|
|
+ size: pagination.value.pageSize,
|
|
|
+ traffic_pool_type: "2",
|
|
|
+ ...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
|
|
|
+ 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 handleDel = async (id) => {
|
|
|
+ const { code } = await deleteTrafficPool({ id })
|
|
|
+ if (code == 200) {
|
|
|
+ Message.success({
|
|
|
+ content: "删除成功！",
|
|
|
+ duration: 2000,
|
|
|
+ })
|
|
|
+ intData()
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+//
|
|
|
+
|
|
|
+const handleSearch = () => {
|
|
|
+ intData()
|
|
|
+}
|
|
|
+const resetSearch = () => {
|
|
|
+ proxy.$refs.formRef.resetFields()
|
|
|
+ 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({
|
|
|
+ "id": "",
|
|
|
+ // 流量包名称
|
|
|
+ "label": "",
|
|
|
+ // 流量池类型: 1: 前流量池 2: 后流量池
|
|
|
+ "traffic_pool_type": "2",
|
|
|
+ // 来源
|
|
|
+ "source": "",
|
|
|
+ // 流量包状态：1：正常（发布计划状态）2：线下暂停销售
|
|
|
+ "status": "",
|
|
|
+ // 流量池ID
|
|
|
+ "sim_tariff_id": null,
|
|
|
+ // 过期时间
|
|
|
+ "expire_time": "",
|
|
|
+ // ICCID列表
|
|
|
+ "iccids": ["89852342022040149139", "89852342022060861597"]
|
|
|
+});
|
|
|
+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', }],
|
|
|
+ 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', }],
|
|
|
+ sim_tariff_id: [{ required: true, trigger: 'change', }],
|
|
|
+ expire_time: [{ required: true, trigger: 'change', }],
|
|
|
+ // pricing: [{ required: true, trigger: 'change', }],
|
|
|
+ // currency: [{ required: true, trigger: 'change', }],
|
|
|
+};
|
|
|
+
|
|
|
+const earlyList = [
|
|
|
+ { value: 1, label: '手工停机' },
|
|
|
+
|
|
|
+];
|
|
|
+
|
|
|
+// 退订
|
|
|
+const handleUnsubscribeDialog = async (record) => {
|
|
|
+ // 订阅关系状态
|
|
|
+ // 1：未激活
|
|
|
+ // 2: 已过期
|
|
|
+ // 3: 已激活99：已退款
|
|
|
+ let param = {}
|
|
|
+ let statusFlag = true
|
|
|
+ if (selectedKeys.value.length > 0) {
|
|
|
+ statusFlag = false
|
|
|
+ param = {
|
|
|
+ ids: selectedKeys.value
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (record && record.id) {
|
|
|
+ statusFlag = false
|
|
|
+ param = {
|
|
|
+ ids: [record.id]
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(param, "param")
|
|
|
+ if (!statusFlag) {
|
|
|
+
|
|
|
+ const { code, data } = await orderCancel(param)
|
|
|
+
|
|
|
+ if (code == 200) {
|
|
|
+ Message.success({
|
|
|
+ content: data,
|
|
|
+ duration: 2000,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ Message.warning({
|
|
|
+ content: $t('lotCard.tipsOrder'),
|
|
|
+ duration: 2000,
|
|
|
+ })
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 提交
|
|
|
+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
|
|
|
+ }
|
|
|
+ handleTariff()
|
|
|
+ formRef.value.resetFields();
|
|
|
+ typeCurrent.value = type;
|
|
|
+ activeKey.value = "1"
|
|
|
+ nextTick(() => {
|
|
|
+ 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]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// 获取资费列表选择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;
|
|
|
+ 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">
|
|
|
+.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>
|
wanghairong