增加预警:增加字段:分模块

src/api/path/flowPool.api.js

@@ -32,4 +32,14 @@ export  function  updateCardList (params) {
 // 流量池接口
 export function lotCatdList(data){
     return service.post('/admin/platform/trafficPoolList', data)
-}
+}
+
+// 创建预警
+export  function  createWarning(data){
+    return service.post('/admin/alert/warningCreate',data)
+}
+
+// 修改预警
+export  function  updateWarning(data){
+    return service.post('/admin/alert/warningUpdate',data)
+}

src/views/flowPool/add.vue

@@ -0,0 +1,236 @@
+<script setup>
+import {ref, onMounted, toRefs, toRef, watch} from 'vue';
+import {Message} from "@arco-design/web-vue";
+import {
+  addTrafficPool,
+  updateTrafficPool,
+  updateCardList
+} from "@/api/path/flowPool.api"
+import {tariffList} from "@/api/path/tariffManagement.api"
+import {Getdictionary} from '@/mixins/index.js'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  status: {
+    type: [String, Number],
+    default: ''
+  },
+  typeCurrent: {
+    type: [String, Number],
+    default: ''
+  },
+  record: {
+    type: [Array, Object],
+    default: () => {
+    }
+  }
+})
+
+const modelValue = toRef(props, 'modelValue')
+const status = toRef(props, 'status')
+const typeCurrent = toRef(props, 'typeCurrent')
+const record = toRef(props, 'record')
+const emit = defineEmits(['update:modelValue', 'submit'])
+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',}],
+  size: [{required: true, trigger: 'change',}],
+  sizeType: [{required: true, trigger: 'change',}],
+};
+const state = ref({
+  typeList: [],
+  tariffIdList: [],
+  formState: {
+    "label": "",
+    "trafficPoolType": props.status,
+    "source": "",
+    "status": "",
+    "simTariffId": null,
+    "expireTime": "",
+    "iccids": [],
+    "size": null,
+    "sizeType": ""
+  },
+  card: [],
+  formRef: null,
+  sourceList: [],
+  trafficList: [],
+})
+
+const {typeList, tariffIdList, formState, card, formRef, sourceList, trafficList} = toRefs(state.value)
+
+// 提交
+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()
+          emit('submit', true)
+        }
+      } else {
+        const {code, data} = await addTrafficPool(formState.value)
+        if (code == 200) {
+          Message.success({
+            content: "添加成功！",
+            duration: 2000,
+          })
+          resetForm()
+          emit('submit', true)
+        }
+      }
+    }
+  });
+}
+
+// 获取资费列表选择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 = () => {
+  emit('update:modelValue', false)
+  formState.value = {
+    "label": "",
+    "trafficPoolType": "2",
+    "source": "",
+    "status": "",
+    "simTariffId": null,
+    "expireTime": "",
+    "iccids": [],
+    "size": null,
+    "sizeType": ""
+  }
+}
+
+// 获取字典
+const handleDictValue = async () => {
+  sourceList.value = await Getdictionary('source')
+  trafficList.value = await Getdictionary('trafficPacketStatus')
+  typeList.value = await Getdictionary('trafficPoolType')
+}
+
+
+const selectChange = (val)=>{
+  updateCardList({id: val}).then(res => {
+    if (res.code === 200) {
+      card.value = res.data
+    }
+  })
+}
+
+watch(() => props.record, val => {
+  if(props.typeCurrent==2){
+    formState.value = val
+  }
+}, {deep: true})
+
+onMounted(()=>{
+  handleDictValue()
+  handleTariff()
+})
+
+</script>
+
+<template>
+  <a-modal :render-to-body="false"
+           :title="typeCurrent == 1 ? $t('form.Add') : typeCurrent == 2 ? $t('form.Edit') : $t('flowPool.Detail')"
+           v-model:visible="modelValue" @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.simRariff')" field="simTariffId">
+            <a-select v-model="formState.simTariffId" @change="selectChange"
+                      :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" v-if="status==2">
+            <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-tabs>
+
+  </a-modal>
+</template>
+
+<style scoped lang="less">
+
+</style>

src/views/flowPool/forewarning.vue

@@ -0,0 +1,276 @@
+<script setup>
+import {ref, onMounted, toRefs, toRef, watch} from 'vue';
+import {Message} from "@arco-design/web-vue";
+import {Getdictionary} from '@/mixins/index.js'
+import {createWarning, updateWarning} from '@/api/path/flowPool.api.js'
+import {value} from "lodash/seq.js";
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  FormDataList: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const modelValue = toRef(props, 'modelValue')
+const FormDataList = toRef(props, 'FormDataList')
+const emit = defineEmits(['update:modelValue', 'submit'])
+const state = ref({
+  formWarning: {
+    "userId": null, // 用户ID
+    "poolId": null, // 流量池ID
+    "clientPooPc": null, // 客户端-池预警设置:端流量池预计
+    "clientPooPcWarnSwitch": false, // 客户端-池预警设置:达量预警
+    "clientPooPcStop": "", // 客户端-池预警设置:达量停机
+    "clientPooPcStopSwitch": false, // 客户端-池预警设置:达量停机开关
+    "clientPooPcStopNetwork": "", // 客户端-池预警设置:达量断网
+    "clientPooPcStopNetworkSwitch": false, // 客户端-池预警设置:达量断网开关
+    "clientNotifyNumber": null, // 客户端-池预警设置:通知次数 次/月
+    "clientSingleCardWarn": "", // 客户端-单卡预警设置:单卡预警 M
+    "clientSingleCardWarnSwitch": false, // 客户端-单卡预警设置:单卡预警 M 开关
+    "clientSingleCardWarnStop": "", // 客户端-单卡预警设置:达量停机
+    "clientSingleCardWarnStopSwitch": false, // 客户端-单卡预警设置:达量停机开关
+    "clientSingleCardWarnStopNetwork": "", // 客户端-单卡预警设置:达量断网
+    "clientSingleCardWarnStopNetworkSwitch": false, // 客户端-单卡预警设置:达量断网开关
+    "manageWarn": null, // 管理端-预警设置:单卡预警 M
+    "manageWarnSwitch": false, // 管理端-预警设置:单卡预警 M 开关
+    "manageWarnSwitchStop": "", // 管理端-预警设置:达量停机
+    "manageWarnSwitchStopSwitch": false, // 管理端-预警设置:达量停机开关
+    "manageWarnStopNetwork": "", // 管理端-预警设置:达量断网
+    "manageWarnStopNetworkSwitch": false // 管理端-预警设置:达量断网开关
+  },
+  formRef: null,
+  earlyList: []
+})
+
+const {formWarning, formRef, earlyList} = toRefs(state.value)
+
+const rules = {
+  clientPooPc: [{required: true, trigger: 'change',}],
+  clientPooPcStop: [{required: true, trigger: 'change',}],
+  clientPooPcStopNetwork: [{required: true, trigger: 'change',}],
+  clientNotifyNumber: [{required: true, trigger: 'change',}],
+  clientSingleCardWarn: [{required: true, trigger: 'change',}],
+  clientSingleCardWarnStop: [{required: true, trigger: 'change',}],
+  clientSingleCardWarnStopNetwork: [{required: true, trigger: 'change',}],
+  manageWarn: [{required: true, trigger: 'change',}],
+  manageWarnSwitchStop: [{required: true, trigger: 'change',}],
+  manageWarnStopNetwork: [{required: true, trigger: 'change',}],
+};
+
+// 取消
+const resetForm = () => {
+  emit('update:modelValue', false)
+  formWarning.value = {
+    "userId": null, // 用户ID
+    "clientPooPc": null, // 客户端-池预警设置:端流量池预计
+    "clientPooPcWarnSwitch": false, // 客户端-池预警设置:达量预警
+    "clientPooPcStop": "", // 客户端-池预警设置:达量停机
+    "clientPooPcStopSwitch": false, // 客户端-池预警设置:达量停机开关
+    "clientPooPcStopNetwork": "", // 客户端-池预警设置:达量断网
+    "clientPooPcStopNetworkSwitch": false, // 客户端-池预警设置:达量断网开关
+    "clientNotifyNumber": null, // 客户端-池预警设置:通知次数 次/月
+    "clientSingleCardWarn": "", // 客户端-单卡预警设置:单卡预警 M
+    "clientSingleCardWarnSwitch": false, // 客户端-单卡预警设置:单卡预警 M 开关
+    "clientSingleCardWarnStop": "", // 客户端-单卡预警设置:达量停机
+    "clientSingleCardWarnStopSwitch": false, // 客户端-单卡预警设置:达量停机开关
+    "clientSingleCardWarnStopNetwork": "", // 客户端-单卡预警设置:达量断网
+    "clientSingleCardWarnStopNetworkSwitch": false, // 客户端-单卡预警设置:达量断网开关
+    "manageWarn": null, // 管理端-预警设置:单卡预警 M
+    "manageWarnSwitch": false, // 管理端-预警设置:单卡预警 M 开关
+    "manageWarnSwitchStop": "", // 管理端-预警设置:达量停机
+    "manageWarnSwitchStopSwitch": false, // 管理端-预警设置:达量停机开关
+    "manageWarnStopNetwork": "", // 管理端-预警设置:达量断网
+    "manageWarnStopNetworkSwitch": false // 管理端-预警设置:达量断网开关
+  }
+}
+
+const handleSubmit = ({values, error}) => {
+  formRef.value.validate(async (errors) => {
+    if (!errors) {
+      Object.keys(formWarning.value).forEach(key => {
+        if (typeof formWarning.value[key] === 'boolean') {
+          formWarning.value[key] = formWarning.value[key] ? "1" : "2";
+        }
+      });
+      console.log(formWarning.value)
+      formWarning.value.clientPooPc = Number(formWarning.value.clientPooPc)
+      formWarning.value.clientNotifyNumber = Number(formWarning.value.clientNotifyNumber)
+      formWarning.value.manageWarn = Number(formWarning.value.manageWarn)
+      formWarning.value.clientSingleCardWarn = String(formWarning.value.clientSingleCardWarn)
+
+      let res = formWarning.value.id ? await updateWarning(formWarning.value) : await createWarning(formWarning.value)
+      if (res.code === 200) {
+        Message.success('操作成功')
+        emit('update:modelValue', false)
+        emit('submit', true)
+        resetForm()
+      }
+    } else {
+      console.error('Validation failed', errors);
+    }
+  })
+}
+
+const handleDictValue = async () => {
+  earlyList.value = await Getdictionary('forewarning')
+}
+
+watch(() => props.FormDataList, val => {
+  if (!val.id) return
+  formWarning.value.userId = val.userId
+  formWarning.value.poolId = val.id
+  if (val.alert.id !== '') {
+    delete formWarning.value.poolId
+
+    Object.keys(formWarning.value).forEach(key=>{
+      if(typeof formWarning.value[key] === 'boolean'){
+        formWarning.value[key] = val.alert[key]==1
+      }else{
+        formWarning.value[key] = val.alert[key]
+      }
+    })
+    formWarning.value.id = val.id
+    formWarning.value.clientSingleCardWarn = Number(formWarning.value.clientSingleCardWarn)
+  }
+  console.log(formWarning.value)
+}, {immediate: true})
+
+onMounted(() => {
+  handleDictValue()
+})
+</script>
+
+<template>
+  <a-modal title="预警池"
+           v-model:visible="modelValue" @onCancel="resetForm" centered :maskClosable="false" :footer="null" width="55%">
+    <a-tabs>
+      <a-tab-pane key="1" :title="$t('flowPool.warnTabs')">
+        <a-form :model="formWarning" direction="inline" ref="formRef" :rules="rules">
+          <div class="form-pool-tit">
+            <div class="pool-icon"></div>
+            客户端·池预警设置
+          </div>
+          <a-form-item field="clientPooPc" tooltip="请输入" label="总用量占比">
+            <a-input-number v-model="formWarning.clientPooPc" :style="{ width: '320px' }"
+                            placeholder="请输入" allow-clear hide-button>
+              <template #suffix>
+                %
+              </template>
+            </a-input-number>
+            <a-checkbox v-model="formWarning.clientPooPcWarnSwitch">达量预警</a-checkbox>
+          </a-form-item>
+          <a-form-item field="clientPooPcStop" label="达量停机">
+            <a-select v-model="formWarning.clientPooPcStop" 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 v-model="formWarning.clientPooPcStopSwitch">达量停机</a-checkbox>
+          </a-form-item>
+          <a-form-item field="clientArriveStopNetwork" label="达量断网">
+            <a-select v-model="formWarning.clientPooPcStopNetwork" 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 v-model="formWarning.clientPooPcStopNetworkSwitch">达量断网</a-checkbox>
+          </a-form-item>
+          <a-form-item field="clientNotifyNumber" label="提醒次数">
+            <a-input-number v-model="formWarning.clientNotifyNumber" :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="clientSingleCardWarn" tooltip="请输入" label="单卡用量预警">
+            <a-input-number v-model="formWarning.clientSingleCardWarn" :style="{ width: '320px' }"
+                            placeholder="请输入" allow-clear hide-button>
+            </a-input-number>
+            <a-checkbox v-model="formWarning.clientSingleCardWarnSwitch">达量预警</a-checkbox>
+          </a-form-item>
+          <a-form-item field="clientSingleCardWarnStop" label="达量停机">
+            <a-select v-model="formWarning.clientSingleCardWarnStop" 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 v-model="formWarning.clientSingleCardWarnStopSwitch">达量停机</a-checkbox>
+          </a-form-item>
+          <a-form-item field="clientSingleCardWarnStopNetwork" label="达量断网">
+            <a-select v-model="formWarning.clientSingleCardWarnStopNetwork" 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 v-model="formWarning.clientSingleCardWarnStopNetworkSwitch">达量断网</a-checkbox>
+          </a-form-item>
+          <div class="form-pool-tit">
+            <div class="pool-icon"></div>
+            管理端预警设置
+          </div>
+          <a-form-item field="manageWarn" tooltip="请输入" label="池已用量预警">
+            <a-input-number v-model="formWarning.manageWarn" :style="{ width: '320px' }"
+                            placeholder="请输入" allow-clear hide-button>
+              <template #suffix>
+                %
+              </template>
+            </a-input-number>
+            <a-checkbox v-model="formWarning.manageWarnSwitch">达量预警</a-checkbox>
+          </a-form-item>
+          <a-form-item field="manageWarnSwitchstop" label="达量停机">
+            <a-select v-model="formWarning.manageWarnSwitchStop" 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 v-model="formWarning.manageWarnSwitchStopSwitch">达量停机</a-checkbox>
+          </a-form-item>
+          <a-form-item field="manageWarnStopNetwork" label="达量断网">
+            <a-select v-model="formWarning.manageWarnStopNetwork" 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 v-model="formWarning.manageWarnStopNetworkSwitch">达量断网</a-checkbox>
+          </a-form-item>
+          <a-form-item>
+            <a-button type="primary" @click="handleSubmit"
+                      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>
+</template>
+
+<style scoped lang="less">
+.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;
+
+  }
+}
+</style>

src/views/flowPool/index.vue

@@ -1,15 +1,6 @@
 <!-- 流量池 -->
 <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">
@@ -58,12 +49,8 @@
            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 class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handelForewring(record)"
+           v-if="role == 1">预警</a>
         <!-- 删除 -->
         <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')"
                       :cancel-text="$t('form.Cancel')" @ok="handleDel(record.id)">
@@ -71,183 +58,14 @@
               $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.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.TimeName')" 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>
-              <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>
+    <add  v-model:model-value="showAdd" status="1" :typeCurrent="typeCurrent" :record="record" @submit="intData()"></add>
+    <Forewarning v-model:modelValue="visibleForewarning" :FormDataList="FormDataList" @submit="intData()"/>
 
     <a-modal v-model:visible="openExport" @ok="handleOk" @cancel="handleCancel" width="1000px">
       <template #title>
@@ -315,48 +133,85 @@
 </template>
 
 <script setup>
-import {onMounted, ref, reactive, getCurrentInstance, nextTick, watch} from "vue";
-import {useRoute} from "vue-router";
+import {onMounted, ref, reactive, getCurrentInstance, nextTick, watch, toRefs} from "vue";
 import {columns} from "./config";
 import {Message, Notification} from '@arco-design/web-vue'
 import {
   deleteTrafficPool,
-  addTrafficPool,
-  updateTrafficPool,
   lotCatdList,
-  getCardList,
-  updateCardList
 } from "@/api/path/flowPool.api"
-import {tariffList} from "@/api/path/tariffManagement.api"
 import {useSystemStore} from "@/store/modules/systemStore"
-
-
-import {Getdictionary} from '@/mixins/index.js'
-
+import Forewarning from "./forewarning.vue";
+import add from './add.vue'
 const systemStore = useSystemStore()
-const role = ref(systemStore.getRole)
-const {proxy} = getCurrentInstance()
-const formRef = ref()
-const searchForm = ref({
-  "label": "",
-  "trafficPoolType": "1"
-});
-
-const dataSource = ref([]);
-const route = useRoute();
-const pagination = ref({
-  total: 0,
-  pageSize: 10,
-  current: 1,
-})
-// 卡信息列表
-const paginationCard = ref({
-  total: 0,
-  pageSize: 10,
-  current: 1,
+const state = ref({
+  role: systemStore.getRole,
+  formRef: null,
+  searchForm: {
+    "label": "",
+    "trafficPoolType": "1"
+  },
+  pagination: {
+    total: 0,
+    pageSize: 10,
+    current: 1,
+  },
+  paginationCard: {
+    total: 0,
+    pageSize: 10,
+    current: 1,
+  },
+  sourceList: [],
+  trafficList: [],
+  typeList: [],
+  tariffIdList: [],
+  openExport: false,
+  dataExport: [],
+  visibleForewarning:false,
+  showAdd:false,
+  typeCurrent:1,
+  record:{},
+  dataSource:[],
+  FormDataList:{}
 })
-
-
+const {
+  role,
+  searchForm,
+  pagination,
+  paginationCard,
+  typeCurrent,
+  sourceList,
+  trafficList,
+  openExport,
+  dataExport,
+  visibleForewarning,
+  showAdd,
+  record,
+  dataSource,
+  FormDataList
+} = toRefs(state.value)
+const {proxy} = getCurrentInstance()
+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 intData = async () => {
   const param = {
     current: pagination.value.current,
@@ -377,13 +232,11 @@ const intData = async () => {
       trafficPoolStatus,
       Activated: Activated,
       HaveBeenUsed: HaveBeenUsed,
-      poolNumber: "NR0" + (index + 1),
     }
   })
+
   pagination.value.total = data.total
 }
-
-
 // 删除
 const handleDel = async (id) => {
   const {code} = await deleteTrafficPool({id})
@@ -400,7 +253,6 @@ const evChangePage = (page) => {
   pagination.value.current = page
   intData()
 }
-
 // 卡信息
 const evChangePageCard = (page) => {
   paginationCard.value.current = page
@@ -415,200 +267,22 @@ const resetSearch = () => {
   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 card = 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();
-// -------------------------------
-
-const formState = ref({
-  "id": "",
-  // 流量包名称
-  "label": "",
-  // 流量池类型: 1: 前流量池 2: 后流量池
-  "trafficPoolType": "1",
-  // 来源
-  "source": "",
-  // 流量包状态：1：正常（发布计划状态）2：线下暂停销售
-  "status": "",
-  // 流量池ID
-  "simTariffId": null,
-  // 过期时间
-  "expireTime": "",
-  // ICCID列表
-  "iccids": []
-});
-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',}],
-};
-
-// 提交
-const handleSubmit = ({values, errors}) => {
-  formRef.value.validate(async (errors) => {
-    if (!errors) {
-      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;
-    getCardList({iccid: data.id, current: 1, size: 10}).then((res) => {
-      dataExport.value = res.data.records || []
-      paginationCard.value.total = res.data.total
-    })
-    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]
-      }
-    });
-    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
-      }
-    })
-  }
+  typeCurrent.value = type
+  record.value = data
+  showAdd.value = true
 }
 
-// 取消
-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')
+const handelForewring = (item)=>{
+  FormDataList.value = item
+  visibleForewarning.value = true
 }
 
-
-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">
@@ -679,23 +353,6 @@ silent-expire-alarm {
   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 {

src/views/flowPool/rearFlowPool/index.vue

@@ -58,12 +58,8 @@
            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 class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handelForewring(record)"
+           v-if="role == 1">预警</a>
         <!-- 删除 -->
         <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')"
                       :cancel-text="$t('form.Cancel')" @ok="handleDel(record.id)" v-if="role == 1">
@@ -78,192 +74,8 @@
       </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>
-
+    <add v-model:modelValue="showAdd" status="2" :typeCurrent="typeCurrent" :record="record" @submit="intData()"></add>
+    <Forewarning v-model:modelValue="visibleForewarning" :FormDataList="FormDataList" @submit="intData()"/>
     <a-modal v-model:visible="openExport" @ok="handleOk" @cancel="handleCancel" width="1000px">
       <template #title>
         批量导入
@@ -334,23 +146,18 @@ import {columns} from "../config";
 import {Message, Notification} from '@arco-design/web-vue'
 import {
   deleteTrafficPool,
-  addTrafficPool,
-  updateTrafficPool,
   lotCatdList,
-  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'
-
+import add from '../add.vue'
+import Forewarning from '../forewarning.vue'
 const systemStore = useSystemStore()
 const role = ref(systemStore.getRole)
-const card = ref([])
-
+const typeCurrent = ref(1)
+const visibleForewarning = ref(false)
+const FormDataList = ref({})
+const record = ref({})
 const {proxy} = getCurrentInstance()
-const formRef = ref()
 const searchForm = ref({
   "label": "",
 });
@@ -416,17 +223,9 @@ 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 showAdd = ref(false)
 // 详情---------------------------
 const openExport = ref(false);
 const columnsExport = [
@@ -481,166 +280,21 @@ const dataExport = reactive([{
   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
-  }
+  typeCurrent.value = type
+  record.value = data
+  showAdd.value = true
 }
 
-// 获取资费列表选择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 handelForewring = (item)=>{
+  FormDataList.value = item
+  visibleForewarning.value = true
 }
 
-// 取消
-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()
 })
 

src/views/lotCard/cardList/trafficUseDialog.vue

@@ -1,156 +1,158 @@
 <template>
-    <a-modal width="70%" :visible="visible" :title="'卡详情' + Card_info.iccid" :hide-cancel='true'
-        :ok-text="$t('lotCard.close')" @ok="handleSubmit" @cancel="handleCancel" draggable>
-        <!-- 卡片信息 -->
-        <a-row class="grid-demo" :gutter="24">
+  <a-modal width="70%" :visible="visible" :title="'卡详情' + Card_info.iccid" :hide-cancel='true'
+           :ok-text="$t('lotCard.close')" @ok="handleSubmit" @cancel="handleCancel" draggable>
+    <!-- 卡片信息 -->
+    <a-row class="grid-demo" :gutter="24">
+      <a-col :span="12">
+        <a-form :model="Card_info" auto-label-width label-align="left" class="toal_Form">
+          <a-row :gutter="10">
             <a-col :span="12">
-                <a-form :model="Card_info" auto-label-width label-align="left" class="toal_Form">
-                    <a-row :gutter="10">
-                        <a-col :span="12">
-                            <a-form-item label="ICCID">
-                                {{ Card_info.iccid }}
-                            </a-form-item>
-                        </a-col>
+              <a-form-item label="ICCID">
+                {{ Card_info.iccid }}
+              </a-form-item>
+            </a-col>
 
-                        <a-col :span="12">
-                            <a-form-item label="IMSI">
-                                {{ Card_info.account }}
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item label="IMSI">
-                                {{ Card_info.currentImsi }}
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item label="SIM货币余额">
-                                {{ Card_info.moneyBalances }}
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item label="激活日期">
-                                {{ Card_info.activeTime }}
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item label="到期日期">
-                                {{ Card_info.closeTime }}
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item label="有效期">
-                                {{ Card_info.validMonth }}月
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item label="供应商">
-                                {{ Card_info.currentImsiProvider }}
-                            </a-form-item>
-                        </a-col>
-                    </a-row>
-                </a-form>
-                <p>当前套餐信息</p>
-                <a-form :model="dataPackage" auto-label-width label-align="left">
-                    <a-row :gutter="10" wrap>
-                        <a-col :span="12">
-                            <a-form-item label="套餐名称">
-                                {{ dataPackage?.productName }}
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item label="套餐状态">
-                                {{ dataPackage?.status == 1 ? '已激活' : (dataPackage?.status == 2 ? '关闭' :
-                                    dataPackage?.status == 3 ? '已过期' : '未使用') }}
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item label="有效期">
-                                {{ dataPackage?.validMonth }}月
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item label="是否赠送套餐">
-                                {{ dataPackage?.present == 0 ? '否' : '是' }}
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item label="套餐激活日期">
-                                {{ dataPackage?.activeTime }}
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item label="套餐过期日期">
-                                {{ dataPackage?.expiryTime }}
-                            </a-form-item>
-                        </a-col>
-                        <div class="line"></div>
-                        <a-col :span="12">
-                            <a-form-item label="套餐可用流量">
-                                {{ dataPackage?.dataTotal == -1 ? '无限流量' : dataPackage?.dataTotal }}MB
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item label="套餐已使用流量">
-                                {{ dataPackage?.dataUsage }}MB
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item label="套餐今日使用流量">
-                                {{ dataPackage?.dataToday }}MB
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item label="套餐有效天数">
-                                {{ dataPackage?.validDays }}
-                            </a-form-item>
-                        </a-col>
-                    </a-row>
-                </a-form>
+            <a-col :span="12">
+              <a-form-item label="IMSI">
+                {{ Card_info.account }}
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="IMSI">
+                {{ Card_info.currentImsi }}
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="SIM货币余额">
+                {{ Card_info.moneyBalances }}
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="激活日期">
+                {{ Card_info.activeTime }}
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="到期日期">
+                {{ Card_info.closeTime }}
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="有效期">
+                {{ Card_info.validMonth }}月
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="供应商">
+                {{ Card_info.currentImsiProvider }}
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+        <p>当前套餐信息</p>
+        <a-form :model="dataPackage" auto-label-width label-align="left">
+          <a-row :gutter="10" wrap>
+            <a-col :span="12">
+              <a-form-item label="套餐名称">
+                {{ dataPackage?.productName }}
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="套餐状态">
+                {{
+                  dataPackage?.status == 1 ? '已激活' : (dataPackage?.status == 2 ? '关闭' :
+                      dataPackage?.status == 3 ? '已过期' : '未使用')
+                }}
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="有效期">
+                {{ dataPackage?.validMonth }}月
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="是否赠送套餐">
+                {{ dataPackage?.present == 0 ? '否' : '是' }}
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="套餐激活日期">
+                {{ dataPackage?.activeTime }}
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="套餐过期日期">
+                {{ dataPackage?.expiryTime }}
+              </a-form-item>
             </a-col>
+            <div class="line"></div>
             <a-col :span="12">
-                <a-tabs>
-                    <a-tab-pane key="1" title="月用量">
-                        <div class="chart" style="width:100%" id="chartContainer" />
-                    </a-tab-pane>
-                    <a-tab-pane key="2" title="卡套餐信息">
-                        <a-table :columns="columnsCard" :data="dataCard" :scroll="{ x: 'auto' }" :pagination="false" />
-                    </a-tab-pane>
-                    <a-tab-pane key="3" title="预警信息">
-                        Content of Tab Panel 3
-                    </a-tab-pane>
-                    <a-tab-pane key="4" title="充值记录">
-                        <a-table :columns="columnsTopup" :data="dataTopup" />
-                    </a-tab-pane>
-                    <a-tab-pane key="5" title="使用量">
-                        <a-table :columns="columnsAmount" :data="dataAmount" :scroll="{ x: 'auto' }"
-                            :pagination="false" />
-                    </a-tab-pane>
-                    <a-tab-pane key="6" title="操作记录">
-                        Content of Tab Panel 3
-                    </a-tab-pane>
-                </a-tabs>
+              <a-form-item label="套餐可用流量">
+                {{ dataPackage?.dataTotal == -1 ? '无限流量' : dataPackage?.dataTotal }}MB
+              </a-form-item>
             </a-col>
-        </a-row>
+            <a-col :span="12">
+              <a-form-item label="套餐已使用流量">
+                {{ dataPackage?.dataUsage }}MB
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="套餐今日使用流量">
+                {{ dataPackage?.dataToday }}MB
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="套餐有效天数">
+                {{ dataPackage?.validDays }}
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-col>
+      <a-col :span="12">
+        <a-tabs>
+          <a-tab-pane key="1" title="月用量">
+            <div class="chart" style="width:100%" id="chartContainer"/>
+          </a-tab-pane>
+          <a-tab-pane key="2" title="卡套餐信息">
+            <a-table :columns="columnsCard" :data="dataCard" :scroll="{ x: 'auto' }" :pagination="false"/>
+          </a-tab-pane>
+          <a-tab-pane key="3" title="预警信息">
+            Content of Tab Panel 3
+          </a-tab-pane>
+          <a-tab-pane key="4" title="充值记录">
+            <a-table :columns="columnsTopup" :data="dataTopup" :scroll="{ x: 'auto' }"/>
+          </a-tab-pane>
+          <a-tab-pane key="5" title="使用量">
+            <a-table :columns="columnsAmount" :data="dataAmount" :scroll="{ x: 'auto' }"
+                     :pagination="false"/>
+          </a-tab-pane>
+          <a-tab-pane key="6" title="操作记录">
+            Content of Tab Panel 3
+          </a-tab-pane>
+        </a-tabs>
+      </a-col>
+    </a-row>
 
-        <template #footer>
-            <div class="footer_button">
-                <!-- <a-button type="primary" status="warning">同步卡信息 V</a-button> -->
-                <a-button type="primary" status="warning" @click="SIMCardService(0)">暂停SIM卡服务</a-button>
-                <a-button type="primary" status="warning" @click="SIMCardService(1)">恢复SIM卡服务</a-button>
-                <a-button type="primary" status="warning">关闭SIM卡</a-button>
-            </div>
-        </template>
-    </a-modal>
+    <template #footer>
+      <div class="footer_button">
+        <!-- <a-button type="primary" status="warning">同步卡信息 V</a-button> -->
+        <a-button type="primary" status="warning" @click="SIMCardService(0)">暂停SIM卡服务</a-button>
+        <a-button type="primary" status="warning" @click="SIMCardService(1)">恢复SIM卡服务</a-button>
+        <a-button type="primary" status="warning">关闭SIM卡</a-button>
+      </div>
+    </template>
+  </a-modal>
 </template>
 <script setup>
-import { onMounted, ref } from "vue";
-import { getDataCDR, PauseSIMService, RecoverSIMService, OffSIMCard } from '@/api/path/lotCard.api'
-import { Getdictionary } from '@/mixins/index'
-import { Message } from '@arco-design/web-vue'
+import {onMounted, ref} from "vue";
+import {getDataCDR, PauseSIMService, RecoverSIMService, OffSIMCard} from '@/api/path/lotCard.api'
+import {Getdictionary} from '@/mixins/index'
+import {Message} from '@arco-design/web-vue'
 // 图表插件
 import * as echarts from "echarts";
-const props = defineProps({
-});
+
+const props = defineProps({});
 
 const emit = defineEmits(['submit']);
 const visible = ref(false)
@@ -160,247 +162,255 @@ const dataSource = ref([]);
 
 // 图表插件
 const option = ref({
-    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],
-            type: 'bar',
-        }
-    ],
+  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],
+      type: 'bar',
+    }
+  ],
 })
 
 // 卡套餐信息
 const columnsCard = [
-    {
-        title: '套餐名称',
-        dataIndex: 'productName',
-        align: 'center', ellipsis: true
-    }, {
-        title: '套餐状态',
-        dataIndex: 'status',
-        align: 'center', ellipsis: true
-    },
-    {
-        title: '有效期(月)',
-        dataIndex: 'validMonth',
-        align: 'center', ellipsis: true
-    },
-    {
-        title: '可用流量',
-        dataIndex: 'dataTotal',
-        align: 'center', ellipsis: true
-    },
-    {
-        title: '已使用流量',
-        dataIndex: 'dataUsage',
-        align: 'center', ellipsis: true
-    },
-    {
-        title: '今日使用流量',
-        dataIndex: 'dataToday',
-        align: 'center', ellipsis: true
-    },
-    {
-        title: '套餐有效期(天数)',
-        dataIndex: 'validDays',
-        align: 'center', ellipsis: true
-    },
-    {
-        title: '激活日期',
-        dataIndex: 'activeTime',
-        align: 'center', ellipsis: true
-    },
-    {
-        title: '过期日期',
-        dataIndex: 'expiryTime',
-        align: 'center', ellipsis: true
-    },
+  {
+    title: '套餐名称',
+    dataIndex: 'productName',
+    align: 'center', ellipsis: true
+  }, {
+    title: '套餐状态',
+    dataIndex: 'status',
+    align: 'center', ellipsis: true
+  },
+  {
+    title: '有效期(月)',
+    dataIndex: 'validMonth',
+    align: 'center', ellipsis: true
+  },
+  {
+    title: '可用流量',
+    dataIndex: 'dataTotal',
+    align: 'center', ellipsis: true
+  },
+  {
+    title: '已使用流量',
+    dataIndex: 'dataUsage',
+    align: 'center', ellipsis: true
+  },
+  {
+    title: '今日使用流量',
+    dataIndex: 'dataToday',
+    align: 'center', ellipsis: true
+  },
+  {
+    title: '套餐有效期(天数)',
+    dataIndex: 'validDays',
+    align: 'center', ellipsis: true
+  },
+  {
+    title: '激活日期',
+    dataIndex: 'activeTime',
+    align: 'center', ellipsis: true
+  },
+  {
+    title: '过期日期',
+    dataIndex: 'expiryTime',
+    align: 'center', ellipsis: true
+  },
 ]
 const dataCard = ref([])
 
 // 充值信息
 const columnsTopup = [
-    {
-        title: '订单号',
-        dataIndex: 'productName',
-    },
-    {
-        title: 'ICCID',
-        dataIndex: 'productName',
-    },
-    {
-        title: '购买套餐',
-        dataIndex: 'productName',
-    },
-    {
-        title: '订单类型',
-        dataIndex: 'productName',
-    },
-    {
-        title: '套餐价格',
-        dataIndex: 'productName',
-    },
-    {
-        title: '运营商',
-        dataIndex: 'productName',
-    },
-    {
-        title: '支付状态',
-        dataIndex: 'productName',
-    },
-    {
-        title: '下单日期',
-        dataIndex: 'productName',
-    },
+  {
+    title: '订单号',
+    dataIndex: 'productName',
+    ellipsis: true
+  },
+  {
+    title: 'ICCID',
+    dataIndex: 'productName',
+    ellipsis: true
+  },
+  {
+    title: '购买套餐',
+    dataIndex: 'productName',
+    ellipsis: true
+  },
+  {
+    title: '订单类型',
+    dataIndex: 'productName',
+    ellipsis: true
+  },
+  {
+    title: '套餐价格',
+    dataIndex: 'productName',
+    ellipsis: true
+  },
+  {
+    title: '运营商',
+    dataIndex: 'productName',
+    ellipsis: true
+  },
+  {
+    title: '支付状态',
+    dataIndex: 'productName',
+    ellipsis: true
+  },
+  {
+    title: '下单日期',
+    dataIndex: 'productName',
+    ellipsis: true
+  },
 ]
 const dataTopup = ref([])
 // 使用量
 const columnsAmount = [
-    {
-        title: '编号',
-        dataIndex: 'productId',
-        align: 'center', ellipsis: true
-    },
-    {
-        title: 'IMIS',
-        dataIndex: 'imsi',
-        align: 'center', ellipsis: true
-    },
+  {
+    title: '编号',
+    dataIndex: 'productId',
+    align: 'center', ellipsis: true
+  },
+  {
+    title: 'IMIS',
+    dataIndex: 'imsi',
+    align: 'center', ellipsis: true
+  },
 
-    {
-        title: 'SIM账户(卡号)',
-        dataIndex: 'account',
-        align: 'center', ellipsis: true
-    },
-    {
-        title: '流量(MB)',
-        dataIndex: 'usage',
-        align: 'center', ellipsis: true
-    },
-    {
-        title: '流量产生国家货地区编号',
-        dataIndex: 'countryNo',
-        align: 'center', ellipsis: true
-    },
-    {
-        title: '详单日期',
-        dataIndex: 'date',
-        align: 'center', ellipsis: true
-    },
+  {
+    title: 'SIM账户(卡号)',
+    dataIndex: 'account',
+    align: 'center', ellipsis: true
+  },
+  {
+    title: '流量(MB)',
+    dataIndex: 'usage',
+    align: 'center', ellipsis: true
+  },
+  {
+    title: '流量产生国家货地区编号',
+    dataIndex: 'countryNo',
+    align: 'center', ellipsis: true
+  },
+  {
+    title: '详单日期',
+    dataIndex: 'date',
+    align: 'center', ellipsis: true
+  },
 ]
 const dataAmount = ref([])
 const open = (data) => {
-    if (!data) {
-        return
+  if (!data) {
+    return
+  }
+  dataSource.value = []
+  Card_info.value = data
+  dataPackage.value = data.dataPackage[0]
+  // 卡套餐信息
+  dataCard.value = (data.dataPackage || []).map(val => {
+    const status = val.status == 1 ? '已激活' : (val.status == 2 ? '关闭' :
+        val.status == 3 ? '已过期' : '未使用')
+    const tatal = val.dataTotal == -1 ? '无限流量' : val.dataTotal
+    return {
+      ...val,
+      status: status,
+      dataTotal: tatal
     }
-    dataSource.value = []
-    Card_info.value = data
-    dataPackage.value = data.dataPackage[0]
-    // 卡套餐信息
-    dataCard.value = (data.dataPackage || []).map(val => {
-        const status = val.status == 1 ? '已激活' : (val.status == 2 ? '关闭' :
-            val.status == 3 ? '已过期' : '未使用')
-        const tatal = val.dataTotal == -1 ? '无限流量' : val.dataTotal
-        return {
-            ...val,
-            status: status,
-            dataTotal: tatal
-        }
-    })
-    intData()
-    visible.value = true
+  })
+  intData()
+  visible.value = true
 }
 
 // 使用量
 const intData = async () => {
-    // 获取今天的日期
-    const today = new Date();
-    const toDay = today.toISOString().split('T')[0];
+  // 获取今天的日期
+  const today = new Date();
+  const toDay = today.toISOString().split('T')[0];
 
-    // 获取三个月前的日期
-    const pastDate = new Date(today);
-    pastDate.setMonth(today.getMonth() - 3); // 减去三个月
-    const formattedDate = pastDate.toISOString().split('T')[0];
+  // 获取三个月前的日期
+  const pastDate = new Date(today);
+  pastDate.setMonth(today.getMonth() - 3); // 减去三个月
+  const formattedDate = pastDate.toISOString().split('T')[0];
 
-    // 获取 CDR 数据
-    let res = await getDataCDR({
-        iccid: Card_info.value.iccid,
-        source: Card_info.value.source,
-        startDate: formattedDate,
-        endDate: toDay
-    });
+  // 获取 CDR 数据
+  let res = await getDataCDR({
+    iccid: Card_info.value.iccid,
+    source: Card_info.value.source,
+    startDate: formattedDate,
+    endDate: toDay
+  });
 
-    dataAmount.value = res.data
+  dataAmount.value = res.data
 
 
-    // 定义季度时间段
-    const time = ['1-3', '4-6', '7-9', '9-12'];
+  // 定义季度时间段
+  const time = ['1-3', '4-6', '7-9', '9-12'];
 
-    // 获取当前年份
-    const year = today.getFullYear();
-    for (let val of time) {
-        // 拆分每个时间段，获取开始月和结束月
-        const [startMonth, endMonth] = val.split('-');
-        const startDate = `${year}-${startMonth}-01`; // 格式化开始日期
-        const endDate = `${year}-${endMonth}-01`; // 格式化结束日期
+  // 获取当前年份
+  const year = today.getFullYear();
+  for (let val of time) {
+    // 拆分每个时间段，获取开始月和结束月
+    const [startMonth, endMonth] = val.split('-');
+    const startDate = `${year}-${startMonth}-01`; // 格式化开始日期
+    const endDate = `${year}-${endMonth}-01`; // 格式化结束日期
 
-        // 获取每个时间段的数据
-        let res = await getDataCDR({
-            iccid: Card_info.value.iccid,
-            source: Card_info.value.source,
-            startDate: startDate,
-            endDate: endDate
-        });
+    // 获取每个时间段的数据
+    let res = await getDataCDR({
+      iccid: Card_info.value.iccid,
+      source: Card_info.value.source,
+      startDate: startDate,
+      endDate: endDate
+    });
 
-        // 将当前时间段的数据中的 'usage' 字段合并到 series[0].data 数组中
-        const usageData = (res.data || [])
-            .filter(val => val.usage !== undefined)
-            .map(val => val.usage);
-        option.value.series[0].data.push(...usageData);
-        initChart()
-    }
+    // 将当前时间段的数据中的 'usage' 字段合并到 series[0].data 数组中
+    const usageData = (res.data || [])
+        .filter(val => val.usage !== undefined)
+        .map(val => val.usage);
+    option.value.series[0].data.push(...usageData);
+    initChart()
+  }
 }
 
 // SIM卡操作
 const SIMCardService = async (index) => {
-    const Inform = {
-        iccid: Card_info.value.iccid, source: Card_info.value.source
-    }
-    // 暂停SIM卡
-    let res = index == 0 ? await PauseSIMService(Inform) : (index == 1 ? await RecoverSIMService(Inform) : '')
-    if (res.code === 200) {
-        Message.success({
-            content: res.message,
-            duration: 2000,
-        })
-        handleSubmit()
-    }
+  const Inform = {
+    iccid: Card_info.value.iccid, source: Card_info.value.source
+  }
+  // 暂停SIM卡
+  let res = index == 0 ? await PauseSIMService(Inform) : (index == 1 ? await RecoverSIMService(Inform) : '')
+  if (res.code === 200) {
+    Message.success({
+      content: res.message,
+      duration: 2000,
+    })
+    handleSubmit()
+  }
 }
 const handleSubmit = () => {
-    emit('submit', true);
-    visible.value = false
+  emit('submit', true);
+  visible.value = false
 };
 
 const handleCancel = () => {
-    visible.value = false
+  visible.value = false
 };
 
 // 图表
 const initChart = () => {
-    const dom = echarts.init(document.getElementById("chartContainer"));
-    dom.setOption(option.value);
-    window.addEventListener("resize",()=>{
-        dom.resize();
-    })
+  const dom = echarts.init(document.getElementById("chartContainer"));
+  dom.setOption(option.value);
+  window.addEventListener("resize", () => {
+    dom.resize();
+  })
 }
 
-defineExpose({ open })
+defineExpose({open})
 
 
 onMounted(() => {
@@ -409,32 +419,32 @@ onMounted(() => {
 
 <style scoped lang="less">
 .toal_Form {
-    padding-bottom: 10px;
-    border-bottom: 1px solid #ccc;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ccc;
 }
 
 p {
-    font-size: 20px;
-    color: black;
+  font-size: 20px;
+  color: black;
 }
 
 .line {
-    margin: 15px 0;
-    border-bottom: 1px solid #ccc;
-    width: 100%;
+  margin: 15px 0;
+  border-bottom: 1px solid #ccc;
+  width: 100%;
 }
 
 .footer_button {
-    display: flex;
-    justify-content: start;
+  display: flex;
+  justify-content: start;
 
-    button {
-        margin-right: 15px;
-    }
+  button {
+    margin-right: 15px;
+  }
 }
 
 .chart {
-    height: 310px;
-    width: 100%;
+  height: 310px;
+  width: 100%;
 }
 </style>

src/views/system/dict/index.vue

@@ -3,8 +3,8 @@
     <div class="head-title">
       <span> 字典管理 </span>
       <div class="form-row">
-        <a-input v-model="formData.typeLabel" style="margin: 0 0.6rem" placeholder="请输入字典名称" />
-        <a-input v-model="formData.typeKey" style="margin: 0 0.6rem" placeholder="请输入字典类型" />
+        <a-input v-model="formData.typeLabel" style="margin: 0 0.6rem" placeholder="请输入字典名称"/>
+        <a-input v-model="formData.typeKey" style="margin: 0 0.6rem" placeholder="请输入字典类型"/>
         <a-button type="primary" style="margin: 0 0.6rem" @click="intData">查询</a-button>
         <a-button style="margin: 0 0.6rem 0 0" @click="resetSelectData">重置</a-button>
         <a-button type="primary" @click="dictShowModel(1, null)">添加字典</a-button>
@@ -14,11 +14,12 @@
     <a-table :data="dataSource" row-key="typeKey" :columns="columns" :scroll="{ x: 'auto' }" :pagination="false">
       <template #operation="{ record }">
         <a class="a-link" href="javascript:;" style="margin: 0 0.4rem;" @click="dictShowModel(2, record)"
-          v-if="!record.typeKey">修改</a>
+           v-if="!record.typeKey">修改</a>
         <a class="a-link" href="javascript:;" style="margin: 0 0.4rem;" @click="dictShowModel(3, record)"
-          v-if="record.typeKey">添加</a>
+           v-if="record.typeKey">添加</a>
 
-        <a-popconfirm :content="`是否确认删除字典编号为 ${record.id} 的数据项?`" @ok="deleteChange(record.id)" type="warning">
+        <a-popconfirm :content="`是否确认删除字典编号为 ${record.id} 的数据项?`" @ok="deleteChange(record.id)"
+                      type="warning">
           <a class="a-link" href="javascript:;" style="color: red;margin: 0 0.4rem;">删除</a>
         </a-popconfirm>
 
@@ -26,23 +27,24 @@
     </a-table>
 
     <!-- 弹框 -->
-    <a-modal :title="typeCurrent !== 2 ? '添加字典' : '修改字典'" v-model:visible="visible" @onCancel="resetForm" centered
-      :maskClosable="false" :footer="null">
+    <a-modal :title="typeCurrent !== 2 ? '添加字典' : '修改字典'" 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="标签名称" field="typeLabel" v-if="typeCurrent == 1">
-          <a-input v-model="formState.typeLabel" />
+          <a-input v-model="formState.typeLabel"/>
         </a-form-item>
         <a-form-item label="标签类型" field="typeKey" v-if="typeCurrent == 1">
-          <a-input v-model="formState.typeKey" />
+          <a-input v-model="formState.typeKey"/>
         </a-form-item>
         <a-form-item label="字典名称" field="label">
-          <a-input v-model="formState.label" />
+          <a-input v-model="formState.label"/>
         </a-form-item>
         <a-form-item label="数据键值" field="value">
-          <a-input v-model="formState.value" />
+          <a-input v-model="formState.value"/>
         </a-form-item>
         <a-form-item label="备注" field="remark">
-          <a-textarea v-model="formState.remark" />
+          <a-textarea v-model="formState.remark"/>
         </a-form-item>
         <a-form-item>
           <a-button type="primary" html-type="submit" style="margin-right: 10px;">确定</a-button>
@@ -54,8 +56,8 @@
 </template>
 
 <script setup>
-import { onMounted, ref, reactive, h } from "vue";
-import { dictionaryList, dictionaryAdd, dictionaryDelete, dictionaryUpdate, dictionaryDeleteAll } from '@/api/path/dict';
+import {onMounted, ref, reactive, h} from "vue";
+import {dictionaryList, dictionaryAdd, dictionaryDelete, dictionaryUpdate, dictionaryDeleteAll} from '@/api/path/dict';
 
 const visible = ref(false);
 const typeCurrent = ref(null);
@@ -66,10 +68,10 @@ const formData = ref({
   typeLabel: '',
 });
 const columns = ref([
-  { title: '标签名称', dataIndex: 'typeLabel', align: 'center', width: 120 },
-  { title: '标签类型', dataIndex: 'typeKey', align: 'center', width: 150 },
-  { title: '字典名称', dataIndex: 'label', align: 'center', width: 120 },
-  { title: '数据键值', dataIndex: 'value', align: 'center', width: 120 },
+  {title: '标签名称', dataIndex: 'typeLabel', align: 'center', width: 120},
+  {title: '标签类型', dataIndex: 'typeKey', align: 'center', width: 150},
+  {title: '字典名称', dataIndex: 'label', align: 'center', width: 120},
+  {title: '数据键值', dataIndex: 'value', align: 'center', width: 120},
   {
     title: '操作',
     dataIndex: 'id',
@@ -80,7 +82,7 @@ const columns = ref([
   }
 ])
 const rules = {
-  label: [{ required: true, trigger: 'change', }],
+  label: [{required: true, trigger: 'change',}],
   value: [
     {
       required: true,
@@ -135,7 +137,7 @@ const intData = async () => {
 
 }
 // 提交
-const handleSubmit = async ({ values, errors }) => {
+const handleSubmit = async ({values, errors}) => {
   const submitData = {
     label: formState.label,
     value: formState.value,
@@ -152,7 +154,7 @@ const handleSubmit = async ({ values, errors }) => {
 }
 // 删除
 const deleteChange = (e) => {
-  dictionaryDelete({ id: e }).then(res => {
+  dictionaryDelete({id: e}).then(res => {
     intData();
   })
 }
@@ -160,6 +162,7 @@ const deleteChange = (e) => {
 const dictShowModel = (type, data) => {
   typeCurrent.value = type;
   visible.value = true;
+  console.log(type)
   if (type == 2) {
     dataSource.value.forEach(res => {
       res.children.forEach(val => {
@@ -174,14 +177,8 @@ const dictShowModel = (type, data) => {
       })
     })
   } else if (type == 3) {
-    dataSource.value.forEach(res => {
-      res.children.forEach(val => {
-        if (val.id == data.id) {
-          formState.typeKey = res.typeKey
-          formState.typeLabel = res.typeLabel
-        }
-      })
-    })
+    formState.typeKey = data.typeKey
+    formState.typeLabel = data.typeLabel
   }
 
 }
@@ -208,7 +205,6 @@ const resetSelectData = () => {
 }
 
 
-
 onMounted(() => {
   intData();
 })

src/views/tariffManagement/config.js

@@ -35,9 +35,9 @@ export const columnsCustomer = [
     // { title: window.$t('tariffManagement.billingType'), dataIndex: 'billingTypeName', align: 'center', width: 200 },
     { title: window.$t('tariffManagement.billingCycle'), dataIndex: 'billingCycleName', align: 'center', width: 200,ellipsis:true },
     // { title: window.$t('tariffManagement.bagSize'), dataIndex: 'bagSize', align: 'center', width: 200 },
-    { title: '结算周期', dataIndex: 'bagSize', align: 'center', width: 200 },
+    { title: '结算周期', dataIndex: 'billingCycleName', align: 'center', width: 200 },
     { title: '流量资费价格', dataIndex: 'bagSize', align: 'center', width: 200 },
-    { title: '充值定价', dataIndex: 'bagSize', align: 'center', width: 200 },
+    { title: '充值定价', dataIndex: '', align: 'center', width: 200 },
     { title: window.$t('tariffManagement.pricing'), dataIndex: 'pricingName', align: 'center', width: 200 ,ellipsis:true},
     // { title: window.$t('tariffManagement.billingMethod'), dataIndex: 'billing_method', align: 'center', width: 200 },
     { title: window.$t('tariffManagement.settlementCycleLabel'), dataIndex: 'settlementCycle', align: 'center', width: 200,ellipsis:true },

src/views/tariffManagement/customer/NewCustomerForm.vue

@@ -1,39 +1,39 @@
 <template>
   <a-modal :visible="visible" :title="editMode ? $t('customer.editCustomer') : $t('customer.addCustomer')"
-    :loading="loading" @ok="handleSubmit" @cancel="handleCancel" :width="720" :okText="$t('customer.confirm')">
+           :loading="loading" @ok="handleSubmit" @cancel="handleCancel" :width="720" :okText="$t('customer.confirm')">
     <a-tabs>
       <!-- 基本信息 Tab -->
       <a-tab-pane key="1" :title="$t('customer.basicInfo')">
         <a-form :model="formData" :rules="rules" ref="formRef" :label-col-props="{ span: 6 }"
-          :wrapper-col-props="{ span: 18 }">
+                :wrapper-col-props="{ span: 18 }">
           <a-divider>{{ $t('customer.basicInfoSection') }}</a-divider>
           <!-- Customer Code -->
           <a-form-item field="zip" :label="$t('customer.customerCode')" required validate-trigger="blur">
             <a-input v-model="formData.zip" :placeholder="$t('customer.enterCustomerCode')" :max-length="60"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
 
           <a-form-item field="email" :label="$t('customer.emailName')" required validate-trigger="blur">
             <a-input v-model="formData.email" :placeholder="$t('customer.emailType')" :max-length="60"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
           <a-form-item field="phone" :label="$t('customer.phoneName')" required validate-trigger="blur">
-            <a-input v-model="formData.phone" :placeholder="$t('customer.phoneType')" show-word-limit />
+            <a-input v-model="formData.phone" :placeholder="$t('customer.phoneType')" show-word-limit/>
           </a-form-item>
           <!-- Customer Name -->
           <a-form-item field="name" :label="$t('customer.customerName')" required validate-trigger="blur">
             <a-input v-model="formData.name" :placeholder="$t('customer.enterCustomerName')" :max-length="60"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
           <!-- Account Number -->
           <a-form-item field="username" :label="$t('customer.accountNumber')" required validate-trigger="blur">
             <a-input v-model="formData.username" :placeholder="$t('customer.enterAccountNumber')" :max-length="60"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
           <!-- Password -->
           <a-form-item field="password" :label="$t('customer.password')" required validate-trigger="blur">
             <a-input-password v-model="formData.password" :placeholder="$t('customer.enterPassword')" :max-length="60"
-              show-word-limit />
+                              show-word-limit/>
             <a-button type="primary" @click="generatePassword">{{ $t('customer.generatePassword') }}</a-button>
           </a-form-item>
           <!--          role-->
@@ -52,17 +52,17 @@
           <!-- Remark -->
           <a-form-item field="note" :label="$t('customer.remark')" required validate-trigger="blur">
             <a-input v-model="formData.note" :placeholder="$t('customer.enterRemark')" :max-length="60"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
           <!-- Account Balance -->
           <a-form-item field="amount" :label="$t('customer.accountBalance')" required validate-trigger="blur">
             <a-input-number v-model="formData.amount" :min="0" :precision="2" :step="100"
-              :suffix="$t('customer.currency')" />
+                            :suffix="$t('customer.currency')"/>
           </a-form-item>
           <!-- Address -->
           <a-form-item field="addr" :label="$t('customer.address')" required validate-trigger="blur">
             <a-input v-model="formData.addr" :placeholder="$t('customer.addressMessage')" :max-length="50"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
           <!-- Status -->
           <a-form-item field="state" :label="$t('customer.statusName')" required validate-trigger="blur">
@@ -79,23 +79,23 @@
       <!-- SMS 信息 Tab -->
       <a-tab-pane key="2" :title="$t('customer.smsInfoSection')">
         <a-form :model="formData" :rules="rules" ref="formRef" :label-col-props="{ span: 6 }"
-          :wrapper-col-props="{ span: 18 }">
+                :wrapper-col-props="{ span: 18 }">
           <a-divider>{{ $t('customer.smsInfoSection') }}</a-divider>
           <a-form-item field="sms" :label="$t('customer.smsSubCode')" required validate-trigger="blur">
             <a-input v-model="formData.sms" :placeholder="$t('customer.enterSmsSubCode')" :max-length="60"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
           <a-form-item field="smsSignature" :label="$t('customer.smsName')" required validate-trigger="blur">
             <a-input v-model="formData.smsSignature" :placeholder="$t('customer.enterSmsName')" :max-length="60"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
           <a-form-item field="loginSms" :label="$t('customer.loginSmsTemplate')" required validate-trigger="blur">
             <a-input v-model="formData.loginSms" :placeholder="$t('customer.enterLoginSmsTemplate')" :max-length="60"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
           <a-form-item field="warnSms" :label="$t('customer.alarmSmsTemplate')" required validate-trigger="blur">
             <a-input v-model="formData.warnSms" :placeholder="$t('customer.enterAlarmSmsTemplate')" :max-length="60"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
         </a-form>
       </a-tab-pane>
@@ -103,43 +103,43 @@
       <!-- Billing Information Tab -->
       <a-tab-pane key="3" :title="$t('customer.billingInfo')">
         <a-form :model="formData" :rules="rules" ref="formRef" :label-col-props="{ span: 6 }"
-          :wrapper-col-props="{ span: 18 }">
+                :wrapper-col-props="{ span: 18 }">
           <a-divider>{{ $t('customer.InvoiceInformation') }}</a-divider>
           <a-form-item field="invoiceTitle" :label="$t('customer.invoiceTitle')" required validate-trigger="blur">
             <a-input v-model="formData.invoiceTitle" :placeholder="$t('customer.enterInvoiceTitle')" :max-length="60"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
           <a-form-item field="invoiceType" :label="$t('customer.invoice_vatTextType')" required validate-trigger="blur">
             <a-select v-model="formData.invoiceType" :style="{ width: '100%' }"
-              :placeholder="$t('customer.invoice_vatTextTypeSelect')">
-              <a-option v-for="item of invoiceList" :value="item.value" :label="item.label" />
+                      :placeholder="$t('customer.invoice_vatTextTypeSelect')">
+              <a-option v-for="item of invoiceList" :value="item.value" :label="item.label"/>
             </a-select>
           </a-form-item>
           <a-form-item field="invoiceAddr" :label="$t('customer.registeredAddress')" required validate-trigger="blur">
             <a-input v-model="formData.invoiceAddr" :placeholder="$t('customer.enterRegisteredAddress')"
-              :max-length="60" show-word-limit />
+                     :max-length="60" show-word-limit/>
           </a-form-item>
           <a-form-item field="invoiceZip" :label="$t('customer.invoiceCode')" required validate-trigger="blur">
             <a-input v-model="formData.invoiceZip" :placeholder="$t('customer.InvoiceCodeName')" :max-length="60"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
           <a-form-item field="invoiceEmail" :label="$t('customer.invoiceEmailName')" required validate-trigger="blur">
             <a-input v-model="formData.invoiceEmail" :placeholder="$t('customer.invoiceEmailNameType')" :max-length="60"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
           <a-form-item field="bankName" :label="$t('customer.bankName')" required validate-trigger="blur">
             <a-input v-model="formData.bankName" :placeholder="$t('customer.enterBankName')" :max-length="60"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
           <a-form-item field="bankAccount" :label="$t('customer.BankNumber')" required validate-trigger="blur">
             <a-input v-model="formData.bankAccount" :placeholder="$t('customer.BankNumberName')" :max-length="60"
-              show-word-limit />
+                     show-word-limit/>
           </a-form-item>
           <a-form-item field="bankBranch" :label="$t('customer.bank_branchName')" required validate-trigger="blur">
-            <a-input v-model="formData.bankBranch" :placeholder="$t('customer.bank_branchNameType')" show-word-limit />
+            <a-input v-model="formData.bankBranch" :placeholder="$t('customer.bank_branchNameType')" show-word-limit/>
           </a-form-item>
           <a-form-item field="businessLicense" :label="$t('customer.BusinessLicense')" required validate-trigger="blur">
-            <upload v-model="formData.businessLicense" />
+            <upload v-model="formData.businessLicense"/>
           </a-form-item>
         </a-form>
       </a-tab-pane>
@@ -147,15 +147,68 @@
       <!-- Tax Registration Tab -->
       <a-tab-pane key="4" :title="$t('customer.TaxRegistration')">
         <a-form :model="formData" :rules="rules" ref="formRef" :label-col-props="{ span: 8 }"
-          :wrapper-col-props="{ span: 16 }">
+                :wrapper-col-props="{ span: 16 }">
           <a-divider>{{ $t('customer.TaxRegistrationText') }}</a-divider>
           <a-form-item field="taxRegistrationCertificate" :label="$t('customer.photocopy')" required
-            validate-trigger="blur">
-            <upload v-model:modelValue="formData.taxRegistrationCertificate" />
+                       validate-trigger="blur">
+            <upload v-model:modelValue="formData.taxRegistrationCertificate"/>
           </a-form-item>
           <a-form-item field="taxpayerQualification" :label="$t('customer.CertificationQualification')" required
-            validate-trigger="blur">
-            <upload v-model:modelValue="formData.taxpayerQualification" />
+                       validate-trigger="blur">
+            <upload v-model:modelValue="formData.taxpayerQualification"/>
+          </a-form-item>
+        </a-form>
+      </a-tab-pane>
+
+      <a-tab-pane key="5" title="预警">
+        <a-form :model="formData" :rules="rules" ref="formRef" :label-col-props="{ span: 4 }"
+                :wrapper-col-props="{ span: 20 }">
+          <a-divider>预警设置</a-divider>
+          <a-form-item field="amountWarn" label="账号余额报警" required
+                       validate-trigger="blur">
+            <a-input v-model="formData.amountWarn" placeholder="请输入" :max-length="60" :style="{ width: '320px' }"
+                     show-word-limit/>
+          </a-form-item>
+          <a-form-item field="arriveWarn" label="达量预警" required
+                       validate-trigger="blur">
+            <a-input-number v-model="formData.arriveWarn" :style="{ width: '320px' }"
+                            placeholder="请输入" allow-clear hide-button>
+              <template #suffix>
+                %
+              </template>
+            </a-input-number>
+          </a-form-item>
+          <a-form-item field="arriveStop" label="达量停机" required
+                       validate-trigger="blur">
+            <a-input-number v-model="formData.arriveStop" :style="{ width: '320px' }"
+                            placeholder="请输入" allow-clear hide-button>
+              <template #suffix>
+                %
+              </template>
+            </a-input-number>
+            <a-radio-group v-model="formData.arriveStopOperation" :options="reachList"></a-radio-group>
+          </a-form-item>
+          <a-form-item field="arriveStop" label="达量断网" required
+                       validate-trigger="blur">
+            <a-input-number v-model="formData.arriveStop" :style="{ width: '320px' }"
+                            placeholder="请输入" allow-clear hide-button>
+              <template #suffix>
+                %
+              </template>
+            </a-input-number>
+            <a-radio-group v-model="formData.arriveStopNetwork" :options="reachList"></a-radio-group>
+          </a-form-item>
+          <a-form-item field="warnPhone" label="预警手机" required
+                       validate-trigger="blur">
+            <a-input-number v-model="formData.warnPhone" :style="{ width: '320px' }"
+                            placeholder="请输入" allow-clear hide-button>
+            </a-input-number>
+          </a-form-item>
+          <a-form-item field="warnEmail" label="预警邮箱" required
+                       validate-trigger="blur">
+            <a-input-number v-model="formData.warnEmail" :style="{ width: '320px' }"
+                            placeholder="请输入" allow-clear hide-button>
+            </a-input-number>
           </a-form-item>
         </a-form>
       </a-tab-pane>
@@ -165,17 +218,19 @@
 
 
 <script setup>
-import { ref, watch, onMounted } from 'vue';
-import { Message } from '@arco-design/web-vue';
-import { useI18n } from 'vue-i18n';
-import { useSystemStore } from '@/store/modules/systemStore.js'
-import { dictionaryDetail } from '@/api/path/dict.js'
+import {ref, watch, onMounted} from 'vue';
+import {Message} from '@arco-design/web-vue';
+import {useI18n} from 'vue-i18n';
+import {useSystemStore} from '@/store/modules/systemStore.js'
+import {dictionaryDetail} from '@/api/path/dict.js'
 import Upload from "@/components/upload/index.vue";
-import { systemFindRoleList } from "@/api/path/system.api.js";
-import { addCustomer, updateCustomer } from "@/api/customer.js";
-const { t } = useI18n();
+import {systemFindRoleList} from "@/api/path/system.api.js";
+import {addCustomer, updateCustomer} from "@/api/customer.js";
+
+const {t} = useI18n();
 const systemStore = useSystemStore()
-import { encryptByDES } from '@/utils/crypto.js'
+import {encryptByDES} from '@/utils/crypto.js'
+
 const props = defineProps({
   visible: Boolean,
   editMode: Boolean,
@@ -185,34 +240,29 @@ const props = defineProps({
 
 const invoiceList = ref([])
 const roles = ref([])
-const userTypeList = ref([])
 watch(
-  () => props.editData,
-  (newVal) => {
-    if (newVal && props.editMode) {
-      // 深拷贝编辑数据
-      const editDataCopy = JSON.parse(JSON.stringify(newVal));
+    () => props.editData,
+    (newVal) => {
+      if (newVal && props.editMode) {
+        // 深拷贝编辑数据
+        const editDataCopy = JSON.parse(JSON.stringify(newVal));
 
-      // 将 formData 中嵌套的 info 展平为一层
-      const flattenedFormData = ref(Object.fromEntries(Object.entries(editDataCopy).flatMap(([key, value]) => typeof value === 'object' && value !== null && !Array.isArray(value) ? Object.entries(value) : [[key, value]])));
-      if (editDataCopy.info) {
-        delete editDataCopy.info;
+        // 将 formData 中嵌套的 info 展平为一层
+        const flattenedFormData = ref(Object.fromEntries(Object.entries(editDataCopy).flatMap(([key, value]) => typeof value === 'object' && value !== null && !Array.isArray(value) ? Object.entries(value) : [[key, value]])));
+        if (editDataCopy.info) {
+          delete editDataCopy.info;
+        }
+        const formDataList = {...editDataCopy, ...flattenedFormData.value}
+        formData.value = formDataList
       }
-      const formDataList = { ...editDataCopy, ...flattenedFormData.value }
-      formData.value = formDataList
-      // Object.keys(formData.value).forEach(key => {
-      //   if (formDataList[key]) {
-      //     formData.value[key] = formDataList[key];
-      //   }
-      // });
-    }
-  },
-  { deep: true, immediate: true }
+    },
+    {deep: true, immediate: true}
 );
 
 const emit = defineEmits(['update:visible', 'submit']);
 
 const formRef = ref(null);
+const reachList = ref([])
 const formData = ref({
   username: "",
   state: "",
@@ -238,37 +288,44 @@ const formData = ref({
   bankBranch: "",
   businessLicense: "",
   taxRegistrationCertificate: "",
-  taxpayerQualification: ""
+  taxpayerQualification: "",
+  amountWarn: '',
+  arriveWarn: '',
+  arriveStop: '',
+  arriveStopOperation: '',
+  arriveStopNetwork: '',
+  warnPhone: '',
+  warnEmail: ''
 });
 
 const rules = {
-  userName: [{ required: true, message: t('customer.enterAccountNumber') }],
-  state: [{ required: true, message: t('customer.stateType') }],
-  name: [{ required: true, message: t('customer.nameType') }],
-  password: [{ required: true, message: t('customer.passwordRequired') }],
+  userName: [{required: true, message: t('customer.enterAccountNumber')}],
+  state: [{required: true, message: t('customer.stateType')}],
+  name: [{required: true, message: t('customer.nameType')}],
+  password: [{required: true, message: t('customer.passwordRequired')}],
   // roleIds: [{required: true, message: t('customer.roleIdsType')}],
   // userType: [{required: true, message: t('customer.userTypeType')}],
-  phone: [{ required: true, message: t('customer.phoneType') }],
-  email: [{ required: true, message: t('customer.emailType') }],
-  addr: [{ required: true, message: t('customer.addressRequired') }],
-  amount: [{ required: true, message: t('customer.amountRequired') }],
-  bankAccount: [{ required: true, message: t('customer.bankAccountRequired') }],
-  bankBranch: [{ required: true, message: t('customer.bankBranchRequired') }],
-  bankName: [{ required: true, message: t('customer.bankNameRequired') }],
-  businessLicense: [{ required: true, message: t('customer.businessLicenseRequired') }],
-  invoiceAddr: [{ required: true, message: t('customer.invoiceAddressRequired') }],
-  invoiceEmail: [{ required: true, message: t('customer.invoiceEmailRequired') }],
-  invoiceTitle: [{ required: true, message: t('customer.invoiceTitleRequired') }],
-  invoiceType: [{ required: true, message: t('customer.invoiceTypeRequired') }],
-  invoiceZip: [{ required: true, message: t('customer.invoiceZipRequired') }],
-  loginSms: [{ required: true, message: t('customer.loginSMSTemplateRequired') }],
-  note: [{ required: true, message: t('customer.noteRequired') }],
-  sms: [{ required: true, message: t('customer.smsRequired') }],
-  smsSignature: [{ required: true, message: t('customer.smsSignatureRequired') }],
-  warnSms: [{ required: true, message: t('customer.warnSMSTemplateRequired') }],
-  zip: [{ required: true, message: t('customer.zipCodeRequired') }],
-  taxRegistrationCertificate: [{ required: true, message: t('customer.taxRegistrationCertificateRequired') }],
-  taxpayerQualification: [{ required: true, message: t('customer.taxpayerQualificationRequired') }]
+  phone: [{required: true, message: t('customer.phoneType')}],
+  email: [{required: true, message: t('customer.emailType')}],
+  addr: [{required: true, message: t('customer.addressRequired')}],
+  amount: [{required: true, message: t('customer.amountRequired')}],
+  bankAccount: [{required: true, message: t('customer.bankAccountRequired')}],
+  bankBranch: [{required: true, message: t('customer.bankBranchRequired')}],
+  bankName: [{required: true, message: t('customer.bankNameRequired')}],
+  businessLicense: [{required: true, message: t('customer.businessLicenseRequired')}],
+  invoiceAddr: [{required: true, message: t('customer.invoiceAddressRequired')}],
+  invoiceEmail: [{required: true, message: t('customer.invoiceEmailRequired')}],
+  invoiceTitle: [{required: true, message: t('customer.invoiceTitleRequired')}],
+  invoiceType: [{required: true, message: t('customer.invoiceTypeRequired')}],
+  invoiceZip: [{required: true, message: t('customer.invoiceZipRequired')}],
+  loginSms: [{required: true, message: t('customer.loginSMSTemplateRequired')}],
+  note: [{required: true, message: t('customer.noteRequired')}],
+  sms: [{required: true, message: t('customer.smsRequired')}],
+  smsSignature: [{required: true, message: t('customer.smsSignatureRequired')}],
+  warnSms: [{required: true, message: t('customer.warnSMSTemplateRequired')}],
+  zip: [{required: true, message: t('customer.zipCodeRequired')}],
+  taxRegistrationCertificate: [{required: true, message: t('customer.taxRegistrationCertificateRequired')}],
+  taxpayerQualification: [{required: true, message: t('customer.taxpayerQualificationRequired')}]
 };
 
 
@@ -313,12 +370,17 @@ const generatePassword = () => {
 
 
 const getDistList = async () => {
-  let code = ['invoiceVat'];
+  let code = ['invoiceVat','reach'];
 
   for (let i = 0; i < code.length; i++) {
-    let res = await dictionaryDetail({ typeKey: code[i] });
+    let res = await dictionaryDetail({typeKey: code[i]});
     if (res.code === 200) {
-      invoiceList.value = res.data;
+      if(i==0){
+        invoiceList.value = res.data;
+      }else{
+        reachList.value = res.data;
+      }
+
     }
   }
 }

src/views/tariffManagement/index.vue

@@ -251,6 +251,7 @@ const intData = async () => {
     const billingCycleName = cycleist.value.find(val => val.value == item.billingCycle)?.label
     const pricingCurrty = currency.value.find(val => val.value == item.currency)?.label || '人民币'
     const Activated = item.trafficBilling + '/' + item.trafficBillingType
+    const bagSize = item.pricing+'/'+item.mrcAmount+'/'+item.networkAccessFee
     return {
       ...item,
       sourceName,
@@ -258,6 +259,7 @@ const intData = async () => {
       billingCycleName,
       Activated: Activated,
       status: "正常",
+      bagSize
     }
   })
   pagination.value.total = data.total