完善cbc页面

src/api/cbc/cbe.ts

@@ -9,7 +9,7 @@ import { request } from '@/plugins/http-fetch';
  */
 export function listCBC(query: Record<string, any>) {
   return request({
-    url: `/psap/v1/cbc/001/message/list`,
+    url: `/psap/v1/cbc/${query.neId}/message/list`,
     method: 'get',
     params: query,
     timeout: 30_000,

src/i18n/locales/en-US.ts

@@ -370,6 +370,36 @@ export default {
         agentName: 'Agent Name',
       }
     },
+    cbc:{
+      cbe:{
+        title: ' CBC Event',
+        delTip: 'Confirm deletion of the event data item numbered [{num}]?',
+        eventName: 'Event Name',
+        startTime: 'Start Time',
+        endTime: 'End Time',
+        repetitionPeriod: 'Repetition Period',
+        numOfBcast: 'Number of Broadcasts',
+        msgPWSType: 'Message Type',
+        messageId: 'Message ID',
+        displayMode: 'Display Mode',
+        geoScope:' Geographic Scope',
+        emergencyUserAlert: 'Emergency User Alert',
+        activatePopup: 'Activate Popup',
+        warningType: 'Warning Type',
+        language:' Language',
+        warningMessageText:' Broadcast Content',
+        status: 'Status',
+        warningAreaType: 'Warning Area Type',
+        taiListTip:'TAI List cannot be empty',
+        taiSonTip:'TAI List each item MCC, MNC, TAC cannot be empty',
+        eutraListTip:'EUTRA CellId List cannot be empty',
+        eutraSonTip:'EUTRA CellId List each item MCC, MNC, CellId cannot be empty',
+        nrTip:'NR CellId List cannot be empty',
+        nrSonTip:'NR CellId List each item MCC, MNC, CellId cannot be empty',
+        areaTip:'Area ID List cannot be empty',
+        areaSonTip:'Area ID List each item AreaID cannot be empty',
+      }
+    },
     dashboard: {
       overview:{
         title: "Core Network Dashboard",

src/i18n/locales/zh-CN.ts

@@ -1,3 +1,7 @@
+import { language } from "@/plugins/http-fetch";
+import { eventData } from "@/views/dashboard/overview/hooks/useUserActivity";
+import { start, status } from "nprogress";
+
 export default {
   // 语言
   i18n: '中文',
@@ -370,6 +374,36 @@ export default {
         agentName: '座席名称',
       }
     },
+    cbc:{
+      cbe:{
+        title: '广播事件',
+        delTip: '确认删除编号为【{num}】的CBC事件吗？',
+        eventName: '事件名称',
+        startTime: '开始时间',
+        endTime: '结束时间',
+        repetitionPeriod: '广播周期',
+        numOfBcast: '广播次数',
+        msgPWSType: '广播消息类型',
+        messageId: '广播消息编号',
+        displayMode: '显示模式',
+        geoScope:'广播覆盖范围',
+        emergencyUserAlert: '紧急用户提示',
+        activatePopup: '弹窗提示',
+        warningType: '预警类型标识',
+        language:'语言',
+        warningMessageText:'广播内容',
+        status: '状态',
+        warningAreaType: '预警区域类型',
+        taiListTip:'TAI List 不能为空',
+        taiSonTip:'TAI List 每项的 MCC、MNC、TAC 都不能为空',
+        eutraListTip:'EUTRA CellId List 不能为空',
+        eutraSonTip:'EUTRA CellId List 每项的 MCC、MNC、CellId 都不能为空',
+        nrTip:'NR CellId List 不能为空',
+        nrSonTip:'NR CellId List 每项的 MCC、MNC、CellId 都不能为空',
+        areaTip:'Area ID List 不能为空',
+        areaSonTip:'Area ID List 每项的 AreaID 都不能为空',
+      }
+    },
     dashboard: {
       overview:{
         title: "核心网系统看板",

src/views/cbc/cbe/index.vue

@@ -87,7 +87,7 @@ let tableColumns: ColumnsType = [
     width: 100,
   },
   {
-    title: 'eventName',
+    title: t('views.cbc.cbe.eventName'),
     dataIndex: 'messageJson',
     align: 'left',
     width: 150,
@@ -97,7 +97,7 @@ let tableColumns: ColumnsType = [
     },
   },
   {
-    title: 'Start Time',
+    title: t('views.cbc.cbe.startTime'),
     dataIndex: 'messageJson',
     align: 'left',
     width: 150,
@@ -107,7 +107,7 @@ let tableColumns: ColumnsType = [
     },
   },
   {
-    title: 'Repetition Period',
+    title: t('views.cbc.cbe.repetitionPeriod'),
     dataIndex: 'messageJson',
     align: 'left',
     width: 150,
@@ -117,7 +117,7 @@ let tableColumns: ColumnsType = [
     },
   },
   {
-    title: 'Num Of Bcast',
+    title: t('views.cbc.cbe.numOfBcast'),
     dataIndex: 'messageJson',
     align: 'left',
     width: 150,
@@ -127,18 +127,7 @@ let tableColumns: ColumnsType = [
     },
   },
   {
-    title: 'Concurrent Warning Message Ind',
+    title: t('views.cbc.cbe.status'),
-    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',
@@ -296,10 +285,6 @@ type ModalStateType = {
   openByView: boolean;
   /**新增框或修改框是否显示 */
   openByEdit: boolean;
-  /**批量新增否显示 */
-  openByBatch: boolean;
-  /**批量删除否显示 */
-  openByBatchDel: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -314,32 +299,39 @@ type ModalStateType = {
 let modalState: ModalStateType = reactive({
   openByView: false,
   openByEdit: false,
-  openByBatch: false,
-  openByBatchDel: false,
   title: 'CBC CBE',
   from: {
     id: undefined,
-    eventName: '',
+    eventName: 'cmas_',
     startTime: '',
     repetitionPeriod: '',
     neId: '',
 
     // amDat
     numOfBcast: '',
-    concurrentWarningMessageInd: true,
     //messageIdProfile
-    msgPWSType: 'CAMS', //
+    messageIdProfile: {
-    messageId: '',
+      msgPWSType: 'CAMS', //
+      messageId: 4370,
+    },
 
     //serialNumProfile
-    displayMode: '',
+    serialNumProfile: {
-    geoScope: '', // 0x00:EPC和5GC 0x01:5GC 0x02:EPC 0x03:EPC+5GC
+      displayMode: 'normal',
-    messageCode: '',
+      geoScope: 'PLMNwide',
+      messageCode: '',
+    },
 
     //warningTypeProfile
-    warningType: '',
+    warningTypeProfile: {
-    emergencyUserAlert: true,
+      warningType: '',
-    activatePopup: false,
+      emergencyUserAlert: 'false',
+      activatePopup: 'true',
+    },
+    warningMessageProfile: {
+      language: 'English',
+      warningMessageText: 'it is CMAS message',
+    },
     warningAreaType: 'tai', // 'tai' | 'eutra' | 'nr' |areaID
     warningAreaList: {
       taiList: [
@@ -417,11 +409,21 @@ function delArea(idx: number) {
  * 对话框弹出显示为 新增或者修改
  * @param noticeId 网元id, 不传为新增
  */
-function fnModalVisibleByEdit(id?: string) {
+function fnModalVisibleByEdit(record?: any) {
-  if (!id) {
+  if (!record) {
     modalStateFrom.resetFields();
-    modalState.title = t('common.addText') + t('views.neUser.sub.subInfo');
+    modalState.title = t('common.addText') + t('views.cbc.cbe.title');
     modalState.openByEdit = true;
+  } else {
+    modalStateFrom.resetFields();
+    modalState.title = t('common.addText') + t('views.cbc.cbe.title');
+    modalState.openByEdit = true;
+    console.log('record', record);
+    modalState.from = Object.assign(modalState.from, record.messageJson, {
+      id: record.id,
+      status: record.status,
+      neId: record.neId,
+    });
   }
 }
 
@@ -432,43 +434,43 @@ const modalStateFrom = Form.useForm(
     eventName: [
       {
         required: true,
-        //message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
+        message: t('views.cbc.cbe.eventName') + t('common.unableNull'),
       },
     ],
     repetitionPeriod: [
       {
         required: true,
-        //message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
+        message: t('views.cbc.cbe.repetitionPeriod') + t('common.unableNull'),
       },
     ],
     numOfBcast: [
       {
         required: true,
-        //message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
+        message: t('views.cbc.cbe.numOfBcast') + t('common.unableNull'),
       },
     ],
     msgPWSType: [
       {
         required: true,
-        //message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
+        message: t('views.cbc.cbe.msgPWSType') + t('common.unableNull'),
       },
     ],
     messageId: [
       {
         required: true,
-        //message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
+        message: t('views.cbc.cbe.messageId') + t('common.unableNull'),
       },
     ],
     emergencyUserAlert: [
       {
         required: true,
-        //message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
+        message: t('views.cbc.cbe.emergencyUserAlert') + t('common.unableNull'),
       },
     ],
     activatePopup: [
       {
         required: true,
-        //message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
+        message: t('views.cbc.cbe.activatePopup') + t('common.unableNull'),
       },
     ],
     // ['warningAreaList.taiList']: [
@@ -494,8 +496,74 @@ const modalStateFrom = Form.useForm(
  * 进行表达规则校验
  */
 function fnModalOk() {
+  // 区域列表必填校验
+  const areaType = modalState.from.warningAreaType;
+  const areaList = modalState.from.warningAreaList;
+  let valid = true;
+  let errMsg = '';
+  if (areaType === 'tai') {
+    if (!areaList.taiList || areaList.taiList.length === 0) {
+      valid = false;
+      errMsg = t('views.cbc.cbe.taiListTip');
+    } else {
+      for (const item of areaList.taiList) {
+        if (!item.plmnId.mcc || !item.plmnId.mnc || !item.tac) {
+          valid = false;
+          errMsg = t('views.cbc.cbe.taiSonTip');
+          break;
+        }
+      }
+    }
+  } else if (areaType === 'eutra') {
+    if (!areaList.eutraCellIdList || areaList.eutraCellIdList.length === 0) {
+      valid = false;
+      errMsg = t('views.cbc.cbe.eutraListTip');
+    } else {
+      for (const item of areaList.eutraCellIdList) {
+        if (!item.plmnId.mcc || !item.plmnId.mnc || !item.cellId) {
+          valid = false;
+          errMsg = t('views.cbc.cbe.eutraSonTip');
+          break;
+        }
+      }
+    }
+  } else if (areaType === 'nr') {
+    if (!areaList.nrCellIdList || areaList.nrCellIdList.length === 0) {
+      valid = false;
+      errMsg = t('views.cbc.cbe.nrTip');
+    } else {
+      for (const item of areaList.nrCellIdList) {
+        if (!item.plmnId.mcc || !item.plmnId.mnc || !item.cellId) {
+          valid = false;
+          errMsg = t('views.cbc.cbe.nrSonTip');
+          break;
+        }
+      }
+    }
+  } else if (areaType === 'area') {
+    if (
+      !areaList.emergencyAreaIDList ||
+      areaList.emergencyAreaIDList.length === 0
+    ) {
+      valid = false;
+      errMsg = t('views.cbc.cbe.areaTip');
+    } else {
+      for (const item of areaList.emergencyAreaIDList) {
+        if (!item.areaId) {
+          valid = false;
+          errMsg = t('views.cbc.cbe.areaSonTip');
+          break;
+        }
+      }
+    }
+  }
+  if (!valid) {
+    message.error(errMsg, 3);
+    return;
+  }
+
   const from = Object.assign({}, toRaw(modalState.from));
-    from.neId = queryParams.neId;
+  from.neId = queryParams.neId;
 
   //return;
 
@@ -508,44 +576,12 @@ function fnModalOk() {
       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,
@@ -611,7 +647,7 @@ function fnRecordDelete(id: string) {
 
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.neUser.auth.delSure', {}),
+    content: t('views.cbc.cbe.delTip', { num: id }),
     onOk() {
       modalState.loadDataLoading = true;
       const hide = message.loading(t('common.loading'), 0);
@@ -681,7 +717,6 @@ function fnGetList(pageNum?: number) {
 }
 
 function fnModalChange(event: any) {
-  console.log(event);
   modalState.from.warningAreaList = {
     taiList: [
       {
@@ -709,6 +744,22 @@ function fnModalChange(event: any) {
   };
 }
 
+function pwsTypeChange(value: any) {
+  if (value === 'ETWS') {
+    modalState.from.warningTypeProfile.warningType = 'TEST';
+    modalState.from.eventName = 'etws_';
+    modalState.from.serialNumProfile.displayMode = 'immediate';
+    modalState.from.warningTypeProfile.emergencyUserAlert = 'true';
+    modalState.from.warningTypeProfile.activatePopup = 'true';
+  } else if (value === 'CAMS') {
+    modalState.from.warningTypeProfile.warningType = '';
+    modalState.from.eventName = 'cmas_';
+    modalState.from.serialNumProfile.displayMode = 'normal';
+    modalState.from.warningTypeProfile.emergencyUserAlert = 'false';
+    modalState.from.warningTypeProfile.activatePopup = 'true';
+  }
+}
+
 onMounted(() => {
   // 获取网元网元列表
   useNeInfoStore()
@@ -763,7 +814,7 @@ onMounted(() => {
           </a-col>
 
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item label="status" name="status">
+            <a-form-item :label="t('views.cbc.cbe.status')" name="status">
               <a-select
                 v-model:value="queryParams.status"
                 :options="[
@@ -777,7 +828,7 @@ onMounted(() => {
 
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.monitor.jobLog.createTime')"
+              :label="t('views.cbc.cbe.startTime')"
               name="queryRangePicker"
             >
               <a-range-picker
@@ -903,11 +954,21 @@ onMounted(() => {
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'cbeId'">
             <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.viewText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByEdit(record)"
+                >
+                  <template #icon><ProfileOutlined /></template>
+                </a-button>
+              </a-tooltip>
               <a-tooltip>
                 <template #title>{{ t('common.deleteText') }}</template>
                 <a-button
                   type="link"
                   danger
+                  :disabled="record.status === 'ACTIVE'"
                   @click.prevent="fnRecordDelete(record.id)"
                 >
                   <template #icon>
@@ -957,18 +1018,22 @@ onMounted(() => {
         <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              label="eventName"
+              :label="t('views.cbc.cbe.eventName')"
               name="eventName"
               v-bind="modalStateFrom.validateInfos.eventName"
             >
-              <a-input v-model:value="modalState.from.eventName"></a-input>
+              <a-input
+                :disabled="modalState.from.id"
+                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-form-item :label="t('views.cbc.cbe.startTime')" name="startTime">
               <a-date-picker
+                :disabled="modalState.from.id"
                 v-model:value="modalState.from.startTime"
                 show-time
                 type="date"
@@ -980,8 +1045,9 @@ onMounted(() => {
           </a-col>
 
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="endTime" name="endTime">
+            <a-form-item :label="t('views.cbc.cbe.endTime')" name="endTime">
               <a-date-picker
+                :disabled="modalState.from.id"
                 v-model:value="modalState.from.endTime"
                 show-time
                 type="date"
@@ -995,11 +1061,12 @@ onMounted(() => {
         <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              label="repetitionPeriod"
+              :label="t('views.cbc.cbe.repetitionPeriod')"
               name="repetitionPeriod"
               v-bind="modalStateFrom.validateInfos.repetitionPeriod"
             >
               <a-input-number
+                :disabled="modalState.from.id"
                 v-model:value="modalState.from.repetitionPeriod"
                 style="width: 100%"
               ></a-input-number>
@@ -1008,11 +1075,12 @@ onMounted(() => {
 
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              label="numOfBcast"
+              :label="t('views.cbc.cbe.numOfBcast')"
               name="numOfBcast"
               v-bind="modalStateFrom.validateInfos.numOfBcast"
             >
               <a-input-number
+                :disabled="modalState.from.id"
                 v-model:value="modalState.from.numOfBcast"
                 style="width: 100%"
               ></a-input-number>
@@ -1026,12 +1094,16 @@ onMounted(() => {
         <a-row>
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
-              label="msgPWSType"
+              :label="t('views.cbc.cbe.msgPWSType')"
               name="msgPWSType"
               :label-col="{ span: 6 }"
               v-bind="modalStateFrom.validateInfos.msgPWSType"
             >
-              <a-select v-model:value="modalState.from.msgPWSType">
+              <a-select
+                :disabled="modalState.from.id"
+                v-model:value="modalState.from.messageIdProfile.msgPWSType"
+                @change="pwsTypeChange"
+              >
                 <a-select-option value="CAMS">CAMS</a-select-option>
                 <a-select-option value="ETWS">ETWS</a-select-option>
               </a-select>
@@ -1040,12 +1112,13 @@ onMounted(() => {
 
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
-              label="messageId"
+              :label="t('views.cbc.cbe.messageId')"
               name="messageId"
               v-bind="modalStateFrom.validateInfos.messageId"
             >
               <a-select
-                v-model:value="modalState.from.messageId"
+                v-model:value="modalState.from.messageIdProfile.messageId"
+                :disabled="modalState.from.id"
                 style="width: 100%"
                 placeholder="Please select"
                 :options="
@@ -1063,14 +1136,30 @@ onMounted(() => {
 
         <a-row>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="displayMode" name="displayMode">
+            <a-form-item
-              <a-input v-model:value="modalState.from.displayMode"></a-input>
+              :label="t('views.cbc.cbe.displayMode')"
+              name="displayMode"
+            >
+              <a-select
+                :disabled="modalState.from.id"
+                v-model:value="modalState.from.serialNumProfile.displayMode"
+              >
+                <a-select-option value="normal">normal</a-select-option>
+                <a-select-option value="immediate">immediate</a-select-option>
+              </a-select>
             </a-form-item>
           </a-col>
 
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="geoScope" name="geoScope">
+            <a-form-item :label="t('views.cbc.cbe.geoScope')" name="geoScope">
-              <a-input v-model:value="modalState.from.geoScope"></a-input>
+              <a-select
+                :disabled="modalState.from.id"
+                v-model:value="modalState.from.serialNumProfile.geoScope"
+              >
+                <a-select-option value="Cellwide">Cellwide</a-select-option>
+                <a-select-option value="PLMNwide">PLMNwide</a-select-option>
+                <a-select-option value="Area">Area</a-select-option>
+              </a-select>
             </a-form-item>
           </a-col>
         </a-row>
@@ -1079,30 +1168,56 @@ onMounted(() => {
 
         <a-row>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="warningType" name="warningType">
+            <a-form-item
-              <a-input v-model:value="modalState.from.warningType"></a-input>
+              :label="t('views.cbc.cbe.warningType')"
+              name="warningType"
+            >
+              <a-select
+                :disabled="modalState.from.id"
+                v-model:value="modalState.from.warningTypeProfile.warningType"
+              >
+                <a-select-option value="Earthquake">Earthquake</a-select-option>
+                <a-select-option value="Tsunami">Tsunami</a-select-option>
+                <a-select-option value="EarthquakeAndTsunami"
+                  >EarthquakeAndTsunami</a-select-option
+                >
+                <a-select-option value="Test">Test</a-select-option>
+                <a-select-option value="Other">Other</a-select-option>
+              </a-select>
             </a-form-item>
           </a-col>
 
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              label="UserAlert"
+              :label="t('views.cbc.cbe.emergencyUserAlert')"
               name="emergencyUserAlert"
               v-bind="modalStateFrom.validateInfos.emergencyUserAlert"
             >
-              <a-input
+              <a-select
-                v-model:value="modalState.from.emergencyUserAlert"
+                :disabled="modalState.from.id"
-              ></a-input>
+                v-model:value="
+                  modalState.from.warningTypeProfile.emergencyUserAlert
+                "
+              >
+                <a-select-option value="true">true</a-select-option>
+                <a-select-option value="false">false</a-select-option>
+              </a-select>
             </a-form-item>
           </a-col>
 
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              label="activatePopup"
+              :label="t('views.cbc.cbe.activatePopup')"
               name="activatePopup"
               v-bind="modalStateFrom.validateInfos.activatePopup"
             >
-              <a-input v-model:value="modalState.from.activatePopup"></a-input>
+              <a-select
+                :disabled="modalState.from.id"
+                v-model:value="modalState.from.warningTypeProfile.activatePopup"
+              >
+                <a-select-option value="true">true</a-select-option>
+                <a-select-option value="false">false</a-select-option>
+              </a-select>
             </a-form-item>
           </a-col>
         </a-row>
@@ -1111,22 +1226,42 @@ onMounted(() => {
 
         <a-row>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="language" name="language">
+            <a-form-item :label="t('views.cbc.cbe.language')" name="language">
-              <a-input v-model:value="modalState.from.language"></a-input>
+              <a-select
+                :disabled="modalState.from.id"
+                v-model:value="modalState.from.warningMessageProfile.language"
+              >
+                <a-select-option value="English">English</a-select-option>
+                <a-select-option value="French">French</a-select-option>
+                <a-select-option value="Spanish">Spanish</a-select-option>
+                <a-select-option value="Chinese">Chinese</a-select-option>
+                <a-select-option value="Japanese">Japanese</a-select-option>
+                <a-select-option value="Korean">Korean</a-select-option>
+              </a-select>
             </a-form-item>
           </a-col>
 
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="warningMessageText" name="warningMessageText">
+            <a-form-item
+              :label="t('views.cbc.cbe.warningMessageText')"
+              name="warningMessageText"
+            >
               <a-input
-                v-model:value="modalState.from.warningMessageText"
+                :disabled="modalState.from.id"
+                v-model:value="
+                  modalState.from.warningMessageProfile.warningMessageText
+                "
               ></a-input>
             </a-form-item>
           </a-col>
         </a-row>
 
-        <a-form-item label="Warning Area Type" name="warningAreaType">
+        <a-form-item
+          :label="t('views.cbc.cbe.warningAreaType')"
+          name="warningAreaType"
+        >
           <a-radio-group
+            :disabled="modalState.from.id"
             v-model:value="modalState.from.warningAreaType"
             @change="fnModalChange"
           >
@@ -1135,6 +1270,16 @@ onMounted(() => {
             <a-radio value="nr">NR CellId List</a-radio>
             <a-radio value="area">Area ID List</a-radio>
           </a-radio-group>
+
+          <!-- <a-select
+                v-model:value="modalState.from.warningAreaType"
+                    @change="fnModalChange"
+              >
+                <a-select-option value="tai">TAI List</a-select-option>
+                <a-select-option value="eutra">EUTRA CellId List</a-select-option>
+                <a-select-option value="nr">NR CellId List</a-select-option>
+                <a-select-option value="area">Area ID List</a-select-option>
+              </a-select> -->
         </a-form-item>
 
         <!-- TAI List -->
@@ -1143,6 +1288,7 @@ onMounted(() => {
             TAI
             <a-tooltip title="Add TAI">
               <a-button
+                :disabled="modalState.from.id"
                 shape="circle"
                 @click="addTai"
                 style="margin-left: 10px"
@@ -1168,7 +1314,11 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
+                  <a-input
+                    :disabled="modalState.from.id"
+                    v-model:value="item.plmnId.mcc"
+                    placeholder="MCC"
+                  />
                 </a-form-item>
               </a-col>
 
@@ -1179,7 +1329,11 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
+                  <a-input
+                    :disabled="modalState.from.id"
+                    v-model:value="item.plmnId.mnc"
+                    placeholder="MNC"
+                  />
                 </a-form-item>
               </a-col>
 
@@ -1190,15 +1344,18 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input v-model:value="item.tac" placeholder="TAC" />
+                  <a-input
+                    :disabled="modalState.from.id"
+                    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
+                    :disabled="modalState.from.id"
                     danger
                     shape="circle"
                     v-if="idx !== 0"
@@ -1219,6 +1376,7 @@ onMounted(() => {
             EUTRA CellId List
             <a-tooltip title="Add EUTRA">
               <a-button
+                :disabled="modalState.from.id"
                 shape="circle"
                 @click="addEutra"
                 style="margin-left: 10px"
@@ -1241,7 +1399,11 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
+                  <a-input
+                    :disabled="modalState.from.id"
+                    v-model:value="item.plmnId.mcc"
+                    placeholder="MCC"
+                  />
                 </a-form-item>
               </a-col>
 
@@ -1252,7 +1414,11 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
+                  <a-input
+                    :disabled="modalState.from.id"
+                    v-model:value="item.plmnId.mnc"
+                    placeholder="MNC"
+                  />
                 </a-form-item>
               </a-col>
 
@@ -1263,7 +1429,11 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input v-model:value="item.cellId" placeholder="CellId" />
+                  <a-input
+                    :disabled="modalState.from.id"
+                    v-model:value="item.cellId"
+                    placeholder="CellId"
+                  />
                 </a-form-item>
               </a-col>
 
@@ -1273,6 +1443,7 @@ onMounted(() => {
                 <a-tooltip title="Delete EUTRA" v-if="idx !== 0">
                   <a-button
                     danger
+                    :disabled="modalState.from.id"
                     shape="circle"
                     v-if="idx !== 0"
                     @click="delEutra(idx)"
@@ -1292,7 +1463,12 @@ onMounted(() => {
           <a-divider orientation="left">
             NR CellId List
             <a-tooltip title="Add NR">
-              <a-button shape="circle" @click="addNr" style="margin-left: 10px">
+              <a-button
+                :disabled="modalState.from.id"
+                shape="circle"
+                @click="addNr"
+                style="margin-left: 10px"
+              >
                 <template #icon><plus-outlined /></template>
               </a-button> </a-tooltip
           ></a-divider>
@@ -1310,7 +1486,11 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
+                  <a-input
+                    :disabled="modalState.from.id"
+                    v-model:value="item.plmnId.mcc"
+                    placeholder="MCC"
+                  />
                 </a-form-item>
               </a-col>
 
@@ -1321,7 +1501,11 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
+                  <a-input
+                    :disabled="modalState.from.id"
+                    v-model:value="item.plmnId.mnc"
+                    placeholder="MNC"
+                  />
                 </a-form-item>
               </a-col>
 
@@ -1332,7 +1516,11 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input v-model:value="item.cellId" placeholder="CellId" />
+                  <a-input
+                    :disabled="modalState.from.id"
+                    v-model:value="item.cellId"
+                    placeholder="CellId"
+                  />
                 </a-form-item>
               </a-col>
 
@@ -1340,6 +1528,7 @@ onMounted(() => {
                 <a-tooltip title="Delete NR" v-if="idx !== 0">
                   <a-button
                     danger
+                    :disabled="modalState.from.id"
                     shape="circle"
                     v-if="idx !== 0"
                     @click="delNr(idx)"
@@ -1360,6 +1549,7 @@ onMounted(() => {
             Area ID List
             <a-tooltip title="Add Area">
               <a-button
+                :disabled="modalState.from.id"
                 shape="circle"
                 @click="addArea"
                 style="margin-left: 10px"
@@ -1377,18 +1567,22 @@ onMounted(() => {
             <a-row>
               <a-col :lg="12" :md="12" :xs="24">
                 <a-form-item
-                  label="areaId"
+                  label="AreaID"
                   name="areaId"
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input v-model:value="item.areaId" />
+                  <a-input
+                    :disabled="modalState.from.id"
+                    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
+                    :disabled="modalState.from.id"
                     shape="circle"
                     v-if="idx !== 0"
                     @click="delArea(idx)"