From 34cbcb808afabe32c1624972f4da05597dcd3433 Mon Sep 17 00:00:00 2001
From: lai <10633968+laiyujun1@user.noreply.gitee.com>
Date: Tue, 8 Jul 2025 17:02:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Ecbc=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/cbc/cbe.ts                       |   67 +
 src/views/agentManage/callback/index.vue |    6 +-
 src/views/cbc/cbe/index.vue              | 1411 ++++++++++++++++++++++
 3 files changed, 1480 insertions(+), 4 deletions(-)
 create mode 100644 src/api/cbc/cbe.ts
 create mode 100644 src/views/cbc/cbe/index.vue

diff --git a/src/api/cbc/cbe.ts b/src/api/cbc/cbe.ts
new file mode 100644
index 00000000..7fb82137
--- /dev/null
+++ b/src/api/cbc/cbe.ts
@@ -0,0 +1,67 @@
+import { request } from '@/plugins/http-fetch';
+
+
+
+/**
+ * CBC列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listCBC(query: Record<string, any>) {
+  return request({
+    url: `/psap/v1/cbc/001/message/list`,
+    method: 'get',
+    params: query,
+    timeout: 30_000,
+  });
+}
+
+
+
+/**
+ * CBC签约用户新增
+ * @param data 签约对象
+ * @returns object
+ */
+export function addCBC(data: Record<string, any>) {
+  return request({
+    url: `/psap/v1/cbc/${data.neId}/message`,
+    method: 'post',
+    data: data,
+    timeout: 180_000,
+  });
+}
+
+
+
+/**
+ * CBC签约用户修改
+ * @param data 签约对象
+ * @returns object
+ */
+export function updateCBC(data:any) {
+  return request({
+    url: `/psap/v1/cbc/${data.neId}/message/${data.id}?status=${data.status}`,
+    method: 'put',
+    timeout: 180_000,
+  });
+}
+
+/**
+ * CBC删除
+ * @param data 签约对象
+ * @returns object
+ */
+export function delCBC(neId: string, id: string) {
+  return request({
+    url: `/psap/v1/cbc/${neId}/message/${id}`,
+    method: 'delete',
+    timeout: 180_000,
+  });
+}
+
+
+
+
+
+
diff --git a/src/views/agentManage/callback/index.vue b/src/views/agentManage/callback/index.vue
index 9278e40e..446fbe02 100644
--- a/src/views/agentManage/callback/index.vue
+++ b/src/views/agentManage/callback/index.vue
@@ -29,7 +29,7 @@ let queryParams = reactive({
   endTime: '',
   callerNumber: '',
   agentName: '',
-  status: 'New',
+  status: undefined,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -41,7 +41,7 @@ let queryParams = reactive({
 function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
     neId: '001',
-    status: 'New',
+    status: undefined,
     beginTime: '',
     endTime: '',
     callerNumber: '',
@@ -198,8 +198,6 @@ function fnGetList(pageNum?: number) {
 onMounted(() => {
   getDict('callback_status').then(res => {
     dictStatus.value = res;
-    console.log('dictStatus', dictStatus.value);
-
   });
   // 获取网元网元列表
   useNeInfoStore()
diff --git a/src/views/cbc/cbe/index.vue b/src/views/cbc/cbe/index.vue
new file mode 100644
index 00000000..d1e4580c
--- /dev/null
+++ b/src/views/cbc/cbe/index.vue
@@ -0,0 +1,1411 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal, Form, notification } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
+import useNeInfoStore from '@/store/modules/neinfo';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { addCBC, delCBC, listCBC, updateCBC } from '@/api/cbc/cbe';
+import { parseDateToStr, parseDuration } from '@/utils/date-utils';
+
+const { t } = useI18n();
+
+/**网元参数 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**记录开始结束时间 */
+let queryRangePicker = ref<[string, string]>(['', '']);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元ID */
+  neId: undefined,
+  status: undefined,
+  /**记录开始时间 */
+  startTime: '',
+  /**记录结束时间 */
+  endTime: '',
+  /**排序字段 */
+  sortField: 'id',
+  /**排序方式 */
+  sortOrder: 'asc',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    status: '',
+    sortField: 'id',
+    sortOrder: 'asc',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  queryRangePicker.value = ['', ''];
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'small',
+  seached: true,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'eventName',
+    dataIndex: 'messageJson',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const messageJson = opt.value;
+      return messageJson.eventName;
+    },
+  },
+  {
+    title: 'Start Time',
+    dataIndex: 'messageJson',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const messageJson = opt.value;
+      return messageJson.startTime;
+    },
+  },
+  {
+    title: 'Repetition Period',
+    dataIndex: 'messageJson',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const messageJson = opt.value;
+      return messageJson.repetitionPeriod;
+    },
+  },
+  {
+    title: 'Num Of Bcast',
+    dataIndex: 'messageJson',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const messageJson = opt.value;
+      return messageJson.numOfBcast;
+    },
+  },
+  {
+    title: 'Concurrent Warning Message Ind',
+    dataIndex: 'messageJson',
+    align: 'left',
+    width: 200,
+    customRender(opt) {
+      const messageJson = opt.value;
+      console.log('messageJson', messageJson);
+      return '' + messageJson.concurrentWarningMessageInd;
+    },
+  },
+  {
+    title: t('common.status'),
+    dataIndex: 'status',
+    key: 'status',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('common.operate'),
+    key: 'cbeId',
+    align: 'left',
+  },
+];
+
+/**表格字段列排序 */
+let tableColumnsDnd = ref<ColumnsType>([]);
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
+function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
+  const { field, order } = sorter;
+  if (order) {
+    queryParams.sortField = field;
+    queryParams.sortOrder = order.replace('end', '');
+  } else {
+    queryParams.sortOrder = 'asc';
+  }
+  fnGetList(1);
+}
+
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
+const modalStateFromOption = reactive({
+  etwsJson: [
+    { label: '4352(Earthquake Warning Message)', value: 4352 },
+    {
+      label: '4353(Tsunami Warning Message)',
+      value: 4353,
+    },
+    {
+      label: '4354(Earthquake and Tsunami combined Warning Message)',
+      value: 4354,
+    },
+    {
+      label: '4355( Test Message (UE may or may not discard this) )',
+      value: 4355,
+    },
+    { label: '4356(Messages related to other emergency types)', value: 4356 },
+    { label: '4357(Future Extension)', value: 4357 },
+    { label: '4358(Future Extension)', value: 4358 },
+    { label: '4359(Future Extension)', value: 4359 },
+  ],
+  cmasJson: [
+    { label: '4370(Presidential Level Alerts)', value: 4370 },
+    {
+      label:
+        '4371(Extreme Alerts with Severity of Extreme, Urgency of Immediate and Certainty of Observed)',
+      value: 4371,
+    },
+    {
+      label:
+        '4372(Extreme Alerts with Severity of Extreme, Urgency of Immediate and Certainty of Likely)',
+      value: 4372,
+    },
+    {
+      label:
+        '4373(Severe Alerts with Severity of Extreme, Urgency of Immediate and Certainty of Observed)',
+      value: 4373,
+    },
+    {
+      label:
+        '4374(Severe Alerts with Severity of Extreme, Urgency of Immediate and Certainty of Likely)',
+      value: 4374,
+    },
+    {
+      label:
+        '4375(Severe Alerts with Severity of Severe, Urgency of Immediate and Certainty of Observed)',
+      value: 4375,
+    },
+    {
+      label:
+        '4376(Severe Alerts with Severity of Severe, Urgency of Immediate and Certainty of Likely)',
+      value: 4376,
+    },
+    {
+      label:
+        '4377(Severe Alerts with Severity of Severe, Urgency of Expected and Certainty of Observed)',
+      value: 4377,
+    },
+    {
+      label:
+        '4378(Severe Alerts with Severity of Severe, Urgency of Expected and Certainty of Likely)',
+      value: 4378,
+    },
+    { label: '4379(Child Abduction Emergency (or Amber Alert) )', value: 4379 },
+    { label: '4380(Required Monthly Test)', value: 4380 },
+    { label: '4381(CMAS Exercise)', value: 4381 },
+    { label: '4382(Operator defined use)', value: 4382 },
+    { label: '4383(Future Extension)', value: 4383 },
+    { label: '4384(Future Extension)', value: 4384 },
+    { label: '4385(Future Extension)', value: 4385 },
+    { label: '4386(Future Extension)', value: 4386 },
+    { label: '4387(Future Extension)', value: 4387 },
+    { label: '4388(Future Extension)', value: 4388 },
+    { label: '4389(Future Extension)', value: 4389 },
+    { label: '4390(Future Extension)', value: 4390 },
+    { label: '4391(Future Extension)', value: 4391 },
+    { label: '4392(Future Extension)', value: 4392 },
+    { label: '4393(Future Extension)', value: 4393 },
+    { label: '4394(Future Extension)', value: 4394 },
+    { label: '4395(Future Extension)', value: 4395 },
+    { label: '4396(Future Extension)', value: 4396 },
+    { label: '4397(Future Extension)', value: 4397 },
+    { label: '4398(Future Extension)', value: 4398 },
+    { label: '4399(Future Extension)', value: 4399 },
+  ],
+});
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**详情框是否显示 */
+  openByView: boolean;
+  /**新增框或修改框是否显示 */
+  openByEdit: boolean;
+  /**批量新增否显示 */
+  openByBatch: boolean;
+  /**批量删除否显示 */
+  openByBatchDel: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**更新加载数据按钮 loading */
+  loadDataLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  openByView: false,
+  openByEdit: false,
+  openByBatch: false,
+  openByBatchDel: false,
+  title: 'CBC CBE',
+  from: {
+    id: undefined,
+    eventName: '',
+    startTime: '',
+    repetitionPeriod: '',
+    neId: '',
+
+    // amDat
+    numOfBcast: '',
+    concurrentWarningMessageInd: true,
+    //messageIdProfile
+    msgPWSType: 'CAMS', //
+    messageId: '',
+
+    //serialNumProfile
+    displayMode: '',
+    geoScope: '', // 0x00:EPC和5GC 0x01:5GC 0x02:EPC 0x03:EPC+5GC
+    messageCode: '',
+
+    //warningTypeProfile
+    warningType: '',
+    emergencyUserAlert: true,
+    activatePopup: false,
+    warningAreaType: 'tai', // 'tai' | 'eutra' | 'nr' |areaID
+    warningAreaList: {
+      taiList: [
+        {
+          plmnId: { mcc: '', mnc: '' },
+          tac: '',
+        },
+      ],
+      eutraCellIdList: [
+        {
+          plmnId: { mcc: '', mnc: '' },
+          cellId: '',
+        },
+      ],
+      nrCellIdList: [
+        {
+          plmnId: { mcc: '', mnc: '' },
+          cellId: '',
+        },
+      ],
+      emergencyAreaIDList: [
+        {
+          areaId: '',
+        },
+      ],
+    },
+  },
+  confirmLoading: false,
+  loadDataLoading: false,
+});
+
+// TAI
+function addTai() {
+  modalState.from.warningAreaList.taiList.push({
+    plmnId: { mcc: '', mnc: '' },
+    tac: '',
+  });
+}
+function delTai(idx: number) {
+  modalState.from.warningAreaList.taiList.splice(idx, 1);
+}
+
+// EUTRA
+function addEutra() {
+  modalState.from.warningAreaList.eutraCellIdList.push({
+    plmnId: { mcc: '', mnc: '' },
+    cellId: '',
+  });
+}
+function delEutra(idx: number) {
+  modalState.from.warningAreaList.eutraCellIdList.splice(idx, 1);
+}
+
+// NR
+function addNr() {
+  modalState.from.warningAreaList.nrCellIdList.push({
+    plmnId: { mcc: '', mnc: '' },
+    cellId: '',
+  });
+}
+function delNr(idx: number) {
+  modalState.from.warningAreaList.nrCellIdList.splice(idx, 1);
+}
+
+function addArea() {
+  modalState.from.warningAreaList.emergencyAreaIDList.push({
+    areaId: '',
+  });
+}
+function delArea(idx: number) {
+  modalState.from.warningAreaList.emergencyAreaIDList.splice(idx, 1);
+}
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param noticeId 网元id, 不传为新增
+ */
+function fnModalVisibleByEdit(id?: string) {
+  if (!id) {
+    modalStateFrom.resetFields();
+    modalState.title = t('common.addText') + t('views.neUser.sub.subInfo');
+    modalState.openByEdit = true;
+  }
+}
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    eventName: [
+      {
+        required: true,
+        //message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
+      },
+    ],
+    repetitionPeriod: [
+      {
+        required: true,
+        //message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
+      },
+    ],
+    numOfBcast: [
+      {
+        required: true,
+        //message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
+      },
+    ],
+    msgPWSType: [
+      {
+        required: true,
+        //message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
+      },
+    ],
+    messageId: [
+      {
+        required: true,
+        //message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
+      },
+    ],
+    emergencyUserAlert: [
+      {
+        required: true,
+        //message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
+      },
+    ],
+    activatePopup: [
+      {
+        required: true,
+        //message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
+      },
+    ],
+    // ['warningAreaList.taiList']: [
+    //   {
+    //     type: 'array',
+    //     required: true,
+    //     message: 'TAI列表不能为空',
+    //   },
+    //   {
+    //     validator: (rule:any, value:any) => {
+    //       if (!value || value.some((item:any) => !item.tac)) {
+    //         return Promise.reject('TAC不能为空');
+    //       }
+    //       return Promise.resolve();
+    //     },
+    //   },
+    // ],
+  })
+);
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  const from = Object.assign({}, toRaw(modalState.from));
+  //return;
+
+  modalStateFrom
+    .validate()
+    .then(e => {
+      modalState.confirmLoading = true;
+
+      const hide = message.loading(t('common.loading'), 0);
+      addCBC(from)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            // if (from.num === 1) {
+            //   message.success({
+            //     content: t('common.msgSuccess', { msg: modalState.title }),
+            //     duration: 3,
+            //   });
+            //   fnGetList(1);
+            // } else {
+            //   const timerS = Math.max(
+            //     Math.ceil(+from.num / 500),
+            //     `${from.num}`.length * 5
+            //   );
+            //   notification.success({
+            //     message: modalState.title,
+            //     description: t('common.operateOk'),
+            //     duration: timerS,
+            //   });
+            //   setTimeout(() => {
+            //     fnGetList(1);
+            //   }, timerS * 1000);
+            // }
+            message.success({
+              content: t('common.msgSuccess', { msg: modalState.title }),
+              duration: 3,
+            });
+            fnGetList(1);
+          } else {
+            // if (from.num === 1) {
+            //   message.error({
+            //     content: `${res.msg}`,
+            //     duration: 3,
+            //   });
+            // } else {
+            //   notification.error({
+            //     message: modalState.title,
+            //     description: res.msg,
+            //     duration: 3,
+            //   });
+            // }
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          fnModalCancel();
+          modalState.confirmLoading = false;
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.openByEdit = false;
+  //modalState.openByView = false;
+  modalStateFrom.resetFields();
+}
+
+function fnRecordSend(record: any) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.perfManage.perfThreshold.letupSure', { id: record.id }),
+    onOk() {
+      const key = 'cbcSend';
+      message.loading({ content: t('common.loading'), key });
+      updateCBC(record).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: 'Send',
+            key,
+            duration: 2,
+          });
+          fnGetList();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key: key,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**
+ * UDM签约用户删除
+ * @param imsi  编号imsi
+ */
+function fnRecordDelete(id: string) {
+  const neId = queryParams.neId;
+
+  if (!neId) return;
+
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.neUser.auth.delSure', {}),
+    onOk() {
+      modalState.loadDataLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      delCBC(neId, id)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            // const msgContent = t('common.msgSuccess', {
+            //   msg: t('common.deleteText'),
+            // });
+            // message.success({
+            //   content: `${msgContent} : ${imsiMsg}`,
+            //   duration: 3,
+            // });
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          fnGetList();
+          modalState.loadDataLoading = false;
+        });
+    },
+  });
+}
+
+/**查询网元列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+    tablePagination.current = pageNum;
+  }
+
+  if (!queryRangePicker.value) {
+    queryRangePicker.value = ['', ''];
+  }
+
+  queryParams.startTime = queryRangePicker.value[0];
+  queryParams.endTime = queryRangePicker.value[1];
+
+  listCBC(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
+
+      tablePagination.total = res.total;
+      tableState.data = res.data;
+
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+function fnModalChange(event: any) {
+  console.log(event);
+  modalState.from.warningAreaList = {
+    taiList: [
+      {
+        plmnId: { mcc: '', mnc: '' },
+        tac: '',
+      },
+    ],
+    eutraCellIdList: [
+      {
+        plmnId: { mcc: '', mnc: '' },
+        cellId: '',
+      },
+    ],
+    nrCellIdList: [
+      {
+        plmnId: { mcc: '', mnc: '' },
+        cellId: '',
+      },
+    ],
+    emergencyAreaIDList: [
+      {
+        areaId: '',
+      },
+    ],
+  };
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          let arr: Record<string, any>[] = [];
+          res.data.forEach(i => {
+            if (i.neType === 'CBC') {
+              arr.push({ value: i.neId, label: i.neName });
+            }
+          });
+          neOtions.value = arr;
+          if (arr.length > 0) {
+            queryParams.neId = arr[0].value;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item :label="t('views.neUser.sub.neType')" name="neId ">
+              <a-select
+                v-model:value="queryParams.neId"
+                :options="neOtions"
+                :placeholder="t('common.selectPlease')"
+                @change="fnGetList(1)"
+              />
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="status" name="status">
+              <a-select
+                v-model:value="queryParams.status"
+                :options="[
+                  { label: 'ACTIVE', value: 'ACTIVE' },
+                  { label: 'INACTIVE', value: 'INACTIVE' },
+                ]"
+                :placeholder="t('common.selectPlease')"
+              />
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.monitor.jobLog.createTime')"
+              name="queryRangePicker"
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                allow-clear
+                bordered
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                style="width: 100%"
+              ></a-range-picker>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon>
+                    <SearchOutlined />
+                  </template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon>
+                    <ClearOutlined />
+                  </template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <a-flex wrap="wrap" gap="small">
+          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+            <template #icon>
+              <PlusOutlined />
+            </template>
+            {{ t('common.addText') }}
+          </a-button>
+        </a-flex>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              size="small"
+            />
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon>
+                <ReloadOutlined />
+              </template>
+            </a-button>
+          </a-tooltip>
+          <TableColumnsDnd
+            cache-id="CBCData"
+            :columns="tableColumns"
+            v-model:columns-dnd="tableColumnsDnd"
+          >
+          </TableColumnsDnd>
+          <a-tooltip placement="topRight">
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown placement="bottomRight" trigger="click">
+              <a-button type="text">
+                <template #icon>
+                  <ColumnHeightOutlined />
+                </template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumnsDnd"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ y: 'calc(100vh - 480px)' }"
+        @change="fnTableChange"
+        @resizeColumn="(w: number, col: any) => (col.width = w)"
+        :row-selection="{
+          type: 'checkbox',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'cbeId'">
+            <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.deleteText') }}</template>
+                <a-button
+                  type="link"
+                  danger
+                  @click.prevent="fnRecordDelete(record.id)"
+                >
+                  <template #icon>
+                    <DeleteOutlined />
+                  </template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+
+          <template v-if="column.key === 'status'">
+            <a-switch
+              v-model:checked="record.status"
+              checked-value="ACTIVE"
+              checked-children="ACTIVE"
+              un-checked-value="INACTIVE"
+              un-checked-children="INACTIVE"
+              size="small"
+              @change="fnRecordSend(record)"
+            />
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 新增框或修改框 -->
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
+      style="top: 0px"
+      :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
+      :keyboard="false"
+      :mask-closable="false"
+      :open="modalState.openByEdit"
+      :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    >
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
+      >
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="eventName"
+              name="eventName"
+              v-bind="modalStateFrom.validateInfos.eventName"
+            >
+              <a-input v-model:value="modalState.from.eventName"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="startTime" name="startTime">
+              <a-date-picker
+                v-model:value="modalState.from.startTime"
+                show-time
+                type="date"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="Pick a date"
+                style="width: 100%"
+              />
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="endTime" name="endTime">
+              <a-date-picker
+                v-model:value="modalState.from.endTime"
+                show-time
+                type="date"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="Pick a date"
+                style="width: 100%"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="repetitionPeriod"
+              name="repetitionPeriod"
+              v-bind="modalStateFrom.validateInfos.repetitionPeriod"
+            >
+              <a-input-number
+                v-model:value="modalState.from.repetitionPeriod"
+                style="width: 100%"
+              ></a-input-number>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="numOfBcast"
+              name="numOfBcast"
+              v-bind="modalStateFrom.validateInfos.numOfBcast"
+            >
+              <a-input-number
+                v-model:value="modalState.from.numOfBcast"
+                style="width: 100%"
+              ></a-input-number>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row> </a-row>
+
+        <a-divider orientation="left"> messageIdProfile </a-divider>
+
+        <a-row>
+          <a-col :lg="24" :md="24" :xs="24">
+            <a-form-item
+              label="msgPWSType"
+              name="msgPWSType"
+              :label-col="{ span: 6 }"
+              v-bind="modalStateFrom.validateInfos.msgPWSType"
+            >
+              <a-select v-model:value="modalState.from.msgPWSType">
+                <a-select-option value="CAMS">CAMS</a-select-option>
+                <a-select-option value="ETWS">ETWS</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="24" :md="24" :xs="24">
+            <a-form-item
+              label="messageId"
+              name="messageId"
+              v-bind="modalStateFrom.validateInfos.messageId"
+            >
+              <a-select
+                v-model:value="modalState.from.messageId"
+                style="width: 100%"
+                placeholder="Please select"
+                :options="
+                  modalState.from.msgPWSType === 'ETWS'
+                    ? modalStateFromOption.etwsJson
+                    : modalStateFromOption.cmasJson
+                "
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-divider orientation="left"> serialNumProfile </a-divider>
+
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="displayMode" name="displayMode">
+              <a-input v-model:value="modalState.from.displayMode"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="geoScope" name="geoScope">
+              <a-input v-model:value="modalState.from.geoScope"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-divider orientation="left"> warningTypeProfile </a-divider>
+
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="warningType" name="warningType">
+              <a-input v-model:value="modalState.from.warningType"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="UserAlert"
+              name="emergencyUserAlert"
+              v-bind="modalStateFrom.validateInfos.emergencyUserAlert"
+            >
+              <a-input
+                v-model:value="modalState.from.emergencyUserAlert"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="activatePopup"
+              name="activatePopup"
+              v-bind="modalStateFrom.validateInfos.activatePopup"
+            >
+              <a-input v-model:value="modalState.from.activatePopup"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-divider orientation="left"> warningMessageProfile </a-divider>
+
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="language" name="language">
+              <a-input v-model:value="modalState.from.language"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="warningMessageText" name="warningMessageText">
+              <a-input
+                v-model:value="modalState.from.warningMessageText"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item label="Warning Area Type" name="warningAreaType">
+          <a-radio-group
+            v-model:value="modalState.from.warningAreaType"
+            @change="fnModalChange"
+          >
+            <a-radio value="tai">TAI List</a-radio>
+            <a-radio value="eutra">EUTRA CellId List</a-radio>
+            <a-radio value="nr">NR CellId List</a-radio>
+            <a-radio value="area">Area ID List</a-radio>
+          </a-radio-group>
+        </a-form-item>
+
+        <!-- TAI List -->
+        <div v-if="modalState.from.warningAreaType === 'tai'">
+          <a-divider orientation="left">
+            TAI
+            <a-tooltip title="Add TAI">
+              <a-button
+                shape="circle"
+                @click="addTai"
+                style="margin-left: 10px"
+              >
+                <template #icon><plus-outlined /></template>
+              </a-button> </a-tooltip
+          ></a-divider>
+
+          <!-- <a-space>
+            <a-button type="dashed" @click="addTai" size="small">添加TAI</a-button>
+          </a-space> -->
+
+          <div
+            v-for="(item, idx) in modalState.from.warningAreaList.taiList"
+            :key="'tai' + idx"
+            style="margin-bottom: 8px"
+          >
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="MCC"
+                  name="mcc"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="MNC"
+                  name="mnc"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="TAC"
+                  name="tac"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.tac" placeholder="TAC" />
+                </a-form-item>
+              </a-col>
+
+              <!-- 123 -->
+
+              <a-col :span="4">
+                <a-tooltip title="Delete Tai" v-if="idx !== 0">
+                  <a-button
+                    danger
+                    shape="circle"
+                    v-if="idx !== 0"
+                    @click="delTai(idx)"
+                    style="margin-left: 10px"
+                  >
+                    <template #icon><minus-outlined /></template
+                  ></a-button>
+                </a-tooltip>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+
+        <!-- EUTRA CellId List -->
+        <div v-if="modalState.from.warningAreaType === 'eutra'">
+          <a-divider orientation="left">
+            EUTRA CellId List
+            <a-tooltip title="Add EUTRA">
+              <a-button
+                shape="circle"
+                @click="addEutra"
+                style="margin-left: 10px"
+              >
+                <template #icon><plus-outlined /></template>
+              </a-button> </a-tooltip
+          ></a-divider>
+
+          <div
+            v-for="(item, idx) in modalState.from.warningAreaList
+              .eutraCellIdList"
+            :key="'eutra' + idx"
+            style="margin-bottom: 8px"
+          >
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="MCC"
+                  name="mcc"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="MNC"
+                  name="mnc"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="CellId"
+                  name="cellId"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.cellId" placeholder="CellId" />
+                </a-form-item>
+              </a-col>
+
+              <!-- 123 -->
+
+              <a-col :span="4">
+                <a-tooltip title="Delete EUTRA" v-if="idx !== 0">
+                  <a-button
+                    danger
+                    shape="circle"
+                    v-if="idx !== 0"
+                    @click="delEutra(idx)"
+                    style="margin-left: 10px"
+                  >
+                    <template #icon><minus-outlined /></template
+                  ></a-button>
+                </a-tooltip>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+
+        <!-- NR CellId List -->
+
+        <div v-if="modalState.from.warningAreaType === 'nr'">
+          <a-divider orientation="left">
+            NR CellId List
+            <a-tooltip title="Add NR">
+              <a-button shape="circle" @click="addNr" style="margin-left: 10px">
+                <template #icon><plus-outlined /></template>
+              </a-button> </a-tooltip
+          ></a-divider>
+
+          <div
+            v-for="(item, idx) in modalState.from.warningAreaList.nrCellIdList"
+            :key="'nr' + idx"
+            style="margin-bottom: 8px"
+          >
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="MCC"
+                  name="mcc"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="MNC"
+                  name="mnc"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="CellId"
+                  name="cellId"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.cellId" placeholder="CellId" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :span="4">
+                <a-tooltip title="Delete NR" v-if="idx !== 0">
+                  <a-button
+                    danger
+                    shape="circle"
+                    v-if="idx !== 0"
+                    @click="delNr(idx)"
+                    style="margin-left: 10px"
+                  >
+                    <template #icon><minus-outlined /></template
+                  ></a-button>
+                </a-tooltip>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+
+        <!-- area ID  List -->
+
+        <div v-if="modalState.from.warningAreaType === 'area'">
+          <a-divider orientation="left">
+            Area ID List
+            <a-tooltip title="Add Area">
+              <a-button
+                shape="circle"
+                @click="addArea"
+                style="margin-left: 10px"
+              >
+                <template #icon><plus-outlined /></template>
+              </a-button> </a-tooltip
+          ></a-divider>
+
+          <div
+            v-for="(item, idx) in modalState.from.warningAreaList
+              .emergencyAreaIDList"
+            :key="'area' + idx"
+            style="margin-bottom: 8px"
+          >
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="areaId"
+                  name="areaId"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.areaId" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="4">
+                <a-tooltip title="Delete Area" v-if="idx !== 0">
+                  <a-button
+                    danger
+                    shape="circle"
+                    v-if="idx !== 0"
+                    @click="delArea(idx)"
+                    style="margin-left: 10px"
+                  >
+                    <template #icon><minus-outlined /></template>
+                  </a-button>
+                </a-tooltip>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+      </a-form>
+    </ProModal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>