流量池

src/i18n/zh/flowPool.js

@@ -5,6 +5,7 @@ export default {
     trafficPoolType: "流量池类型",
     trafficPoolStatus: "流量池状态",
     simRariffId: "资费ID",
+    simRariff: "资费",
     expireTime: "过期时间",
     updated_at: "更新日期",
 

src/views/flowPool/config.js

@@ -2,23 +2,23 @@ export const columns = [
     { title: window.$t('flowPool.poolNumber'), dataIndex: 'poolNumber', align: 'center', width: 200 },
     { title: window.$t('flowPool.label'), dataIndex: 'label', align: 'center', width: 200 },
     { title: window.$t('flowPool.trafficPoolType'), dataIndex: 'trafficPoolType', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.trafficPoolStatus'), dataIndex: 'trafficPoolStatus', align: 'center', width: 200 },
+    { title: window.$t('flowPool.trafficPoolStatus'), dataIndex: 'trafficPoolStatus', align: 'center', width: 200 },
+    { title: window.$t('flowPool.cardFlow'), dataIndex: 'cardFlow', align: 'center', width: 200 },
+    { title: window.$t('flowPool.UsedMonth'), dataIndex: 'UsedMonth', align: 'center', width: 200 },
+    { title: window.$t('flowPool.surplusFlow'), dataIndex: 'surplusFlow', align: 'center', width: 200 },
+    // { title: window.$t('flowPool.warnStatus'), dataIndex: 'warnStatus', align: 'center', width: 200 },
+    { title: window.$t('flowPool.exceededFlow'), dataIndex: 'exceededFlow', align: 'center', width: 200 },
     { title: window.$t('flowPool.source'), dataIndex: 'sourceName', align: 'center', width: 200 },
     { title: window.$t('flowPool.cardRariffName'), dataIndex: 'cardRariffName', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.cardFlow'), dataIndex: 'cardFlow', align: 'center', width: 200 },
     { title: window.$t('flowPool.cardNum'), dataIndex: 'cardNum', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.UsedMonth'), dataIndex: 'UsedMonth', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.surplusFlow'), dataIndex: 'surplusFlow', align: 'center', width: 200 },
     { title: window.$t('flowPool.totalFlow'), dataIndex: 'totalFlow', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.warnStatus'), dataIndex: 'warnStatus', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.exceededFlow'), dataIndex: 'exceededFlow', align: 'center', width: 200 },
     { title: window.$t('flowPool.updated_at'), dataIndex: 'updated_at', align: 'center', width: 200 },
     {
         title: window.$t('global.common.operations'),
         dataIndex: 'id',
         slotName: 'id',
         align: 'center',
-        width: 180,
+        width: 250,
         fixed: "right",
     }
 ]

src/views/flowPool/index.vue

@@ -4,7 +4,10 @@
         <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>
+                <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>
         <!-- 搜索条件区 -->
@@ -16,7 +19,8 @@
                 </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')">
+                        :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>
@@ -30,35 +34,54 @@
             </a-form>
         </div>
 
-        <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }">
+        <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 class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(3, record)">{{
-                    $t('flowPool.exportCard') }}</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">
-                        <a-form-item :label="$t('flowPool.label')" field="label"
-                            :placeholder="$t('form.PleaseEnterThe') + $t('flowPool.label')">
-                            <a-input v-model="formState.label" />
+                    <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"
@@ -81,10 +104,21 @@
                                     }}</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>
                             <a-button type="primary" html-type="submit" style="margin-right: 10px;">{{
                                 $t('form.Confirm')
-                            }}</a-button>
+                                }}</a-button>
                             <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>
                         </a-form-item>
                     </a-form>
@@ -263,6 +297,8 @@ 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";
 
 
@@ -301,12 +337,13 @@ const intData = async () => {
     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 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/月",
@@ -314,7 +351,6 @@ const intData = async () => {
             UsedMonth: "1.00G",
             surplusFlow: "99.0G",
             totalFlow: "100.0G",
-            warnStatus,
             exceededFlow: "--",
         }
     })
@@ -356,6 +392,7 @@ const typeCurrent = ref(null);
 const sourceList = ref([])
 const trafficList = ref([])
 const typeList = ref([])
+const tariffIdList = ref([])
 
 // 详情---------------------------
 const openExport = ref(false);
@@ -424,7 +461,7 @@ const formState = ref({
     // 流量包状态：1：正常（发布计划状态）2：线下暂停销售
     "status": "",
     // 流量池ID
-    "sim_tariff_id": 0,
+    "sim_tariff_id": null,
     // 过期时间
     "expire_time": "",
     // ICCID列表
@@ -466,32 +503,56 @@ const rules = {
     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', }],
+    sim_tariff_id: [{ required: true, trigger: 'change', }],
+    expire_time: [{ required: true, trigger: 'change', }],
+    // pricing: [{ required: true, trigger: 'change', }],
+    // currency: [{ required: true, trigger: 'change', }],
 };
 
-// 流量池用户选项
-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 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 }) => {
@@ -530,6 +591,7 @@ const dictShowModel = (type, data) => {
         openExport.value = true;
         return
     }
+    handleTariff()
     formRef.value.resetFields();
     typeCurrent.value = type;
     activeKey.value = "1"
@@ -547,6 +609,23 @@ const dictShowModel = (type, data) => {
     }
 
 }
+
+// 获取资费列表选择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;
@@ -569,6 +648,9 @@ const handleDictValue = () => {
 }
 
 
+
+
+
 onMounted(() => {
     handleDictValue()
     intData()
@@ -621,6 +703,10 @@ silent-expire-alarm {
     margin-bottom: 20px;
 }
 
+.audit-btn {
+    margin-bottom: 10px;
+}
+
 
 .echarts-box {
     // width: 100%;