新增修改接口

src/api/cbc/cbe.ts

@@ -34,12 +34,8 @@ export function addCBC(data: Record<string, any>) {
 
 
 
-/**
+
- * CBC签约用户修改
+export function updateCBCStatus(data:any) {
- * @param data 签约对象
- * @returns object
- */
-export function updateCBC(data:any) {
   return request({
     url: `/psap/v1/cbc/${data.neId}/message/${data.id}/${data.status}`,
     method: 'put',
@@ -47,6 +43,18 @@ export function updateCBC(data:any) {
   });
 }
 
+
+export function updateCBC(data:any) {
+  return request({
+    url: `/psap/v1/cbc/${data.neId}/message/${data.id}`,
+    method: 'put',
+    data,
+    timeout: 180_000,
+  });
+}
+
+
+
 /**
  * CBC删除
  * @param data 签约对象

src/i18n/locales/en-US.ts

@@ -406,6 +406,15 @@ export default {
         etws:'Earthquake and Tsunami Warning System',
         cmas:'Commercial Mobile Alert System',
         createdAt:'Create Time',
+        eventNameHelp:'If it is CMAS, the recommended prefix is cmas_xxx. If it is ETWS, the recommended prefix is etws_xxx',
+        repetitionPeriodHelp:'Unit is seconds',
+        numOfBcastHelp:'Unit is seconds',
+        cellListTip:'CellId List cannot be empty',
+        cellListSonTip:'MCC、MNC、 Cannot be empty, and at least one EUTRA CellId/NR CellId must be filled in',
+        letupSure:'Do you confirm the status of the broadcast event with the modification number 【{id}】?',
+        tacHelp:'The TAC value is a decimal string, separated by ";" for multiple TAC values.',
+        cellIdHelp:'The CellId value is a hexadecimal string, separated by ";" for multiple CellId values.',
+        areaId:'The areaId value is a hexadecimal string.',
       }
     },
     dashboard: {

src/i18n/locales/zh-CN.ts

@@ -410,6 +410,15 @@ export default {
         etws:'地震海啸预警',
         cmas:'公共预警广播',
         createdAt:'创建时间',
+        eventNameHelp:'如果为CMAS,推荐前缀为cmas_xxx,如果为ETWS,推荐前缀为etws_xxx',
+        repetitionPeriodHelp:'单位是秒',
+        numOfBcastHelp:'单位是秒',
+        cellListTip:'CellId List不能为空',
+        cellListSonTip:'MCC、MNC、不能为空以及EUTRA CellId/NR CellId至少填写一个',
+        letupSure:'确认修改编号为 【{id}】 的广播事件的状态嘛?',
+        tacHelp:'TAC值是十进制字符串,通过";"分隔多个TAC值',
+        cellIdHelp:'CellId值是十六进制字符串,通过";"分隔多个CellId值',
+        areaId:'areaId值是十六进制字符串',
       }
     },
     dashboard: {

src/views/cbc/cbe/index.vue

@@ -10,7 +10,13 @@ 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 {
+  addCBC,
+  delCBC,
+  listCBC,
+  updateCBCStatus,
+  updateCBC,
+} from '@/api/cbc/cbe';
 import { parseDateToStr, parseDuration } from '@/utils/date-utils';
 
 const { t } = useI18n();
@@ -339,7 +345,7 @@ let modalState: ModalStateType = reactive({
     },
     warningMessageProfile: {
       language: 'English',
-      warningMessageText: 'it is CMAS message',
+      warningMessageText: '',
     },
     warningAreaType: 'tai', // 'tai' | 'eutra' | 'nr' |areaID
     warningAreaList: {
@@ -349,18 +355,11 @@ let modalState: ModalStateType = reactive({
           tac: '',
         },
       ],
-      eutraCellIdList: [
+      cellIdList: [
-        {
+        { plmnId: { mcc: '', mnc: '' }, eutraCellId: '', nrCellId: '' },
-          plmnId: { mcc: '', mnc: '' },
-          cellId: '',
-        },
-      ],
-      nrCellIdList: [
-        {
-          plmnId: { mcc: '', mnc: '' },
-          cellId: '',
-        },
       ],
+      eutraCellIdList: [],
+      nrCellIdList: [],
       emergencyAreaIDList: [
         {
           areaId: '',
@@ -405,6 +404,17 @@ function delNr(idx: number) {
   modalState.from.warningAreaList.nrCellIdList.splice(idx, 1);
 }
 
+function addCellId() {
+  modalState.from.warningAreaList.cellIdList.push({
+    plmnId: { mcc: '', mnc: '' },
+    eutraCellId: '',
+    nrCellId: '',
+  });
+}
+function delCellId(idx: number) {
+  modalState.from.warningAreaList.cellIdList.splice(idx, 1);
+}
+
 function addArea() {
   modalState.from.warningAreaList.emergencyAreaIDList.push({
     areaId: '',
@@ -425,9 +435,8 @@ function fnModalVisibleByEdit(record?: any) {
     modalState.openByEdit = true;
   } else {
     modalStateFrom.resetFields();
-    modalState.title = t('common.viewText') + t('views.cbc.cbe.title');
+    modalState.title = t('common.editText') + 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,
@@ -523,33 +532,52 @@ function fnModalOk() {
         }
       }
     }
-  } else if (areaType === 'eutra') {
+  } else if (areaType === 'cell') {
-    if (!areaList.eutraCellIdList || areaList.eutraCellIdList.length === 0) {
+    if (!areaList.cellIdList || areaList.cellIdList.length === 0) {
       valid = false;
-      errMsg = t('views.cbc.cbe.eutraListTip');
+      errMsg = t('views.cbc.cbe.cellListTip');
     } else {
-      for (const item of areaList.eutraCellIdList) {
+      for (const item of areaList.cellIdList) {
-        if (!item.plmnId.mcc || !item.plmnId.mnc || !item.cellId) {
+        if (
+          !item.plmnId.mcc ||
+          !item.plmnId.mnc ||
+          (!item.eutraCellId && !item.nrCellId)
+        ) {
           valid = false;
-          errMsg = t('views.cbc.cbe.eutraSonTip');
+          errMsg = t('views.cbc.cbe.cellListSonTip');
           break;
         }
       }
     }
-  } else if (areaType === 'nr') {
+  }
-    if (!areaList.nrCellIdList || areaList.nrCellIdList.length === 0) {
+  // else if (areaType === 'eutra') {
-      valid = false;
+  //   if (!areaList.eutraCellIdList || areaList.eutraCellIdList.length === 0) {
-      errMsg = t('views.cbc.cbe.nrTip');
+  //     valid = false;
-    } else {
+  //     errMsg = t('views.cbc.cbe.eutraListTip');
-      for (const item of areaList.nrCellIdList) {
+  //   } else {
-        if (!item.plmnId.mcc || !item.plmnId.mnc || !item.cellId) {
+  //     for (const item of areaList.eutraCellIdList) {
-          valid = false;
+  //       if (!item.plmnId.mcc || !item.plmnId.mnc || !item.cellId) {
-          errMsg = t('views.cbc.cbe.nrSonTip');
+  //         valid = false;
-          break;
+  //         errMsg = t('views.cbc.cbe.eutraSonTip');
-        }
+  //         break;
-      }
+  //       }
-    }
+  //     }
-  } else if (areaType === 'area') {
+  //   }
+  // } 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
@@ -571,6 +599,26 @@ function fnModalOk() {
     return;
   }
 
+  if (modalState.from.warningAreaType === 'cell') {
+    // 清空原有
+    modalState.from.warningAreaList.eutraCellIdList = [];
+    modalState.from.warningAreaList.nrCellIdList = [];
+    for (const item of modalState.from.warningAreaList.cellIdList) {
+      if (item.eutraCellId) {
+        modalState.from.warningAreaList.eutraCellIdList.push({
+          plmnId: { ...item.plmnId },
+          cellId: item.eutraCellId,
+        });
+      }
+      if (item.nrCellId) {
+        modalState.from.warningAreaList.nrCellIdList.push({
+          plmnId: { ...item.plmnId },
+          cellId: item.nrCellId,
+        });
+      }
+    }
+  }
+
   const from = Object.assign({}, toRaw(modalState.from));
   from.neId = queryParams.neId;
 
@@ -581,8 +629,10 @@ function fnModalOk() {
     .then(e => {
       modalState.confirmLoading = true;
 
+      const result = from.id ? updateCBC(from) : addCBC(from);
+
       const hide = message.loading(t('common.loading'), 0);
-      addCBC(from)
+      result
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
             message.success({
@@ -621,11 +671,11 @@ function fnModalCancel() {
 function fnRecordSend(record: any) {
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.perfManage.perfThreshold.letupSure', { id: record.id }),
+    content: t('views.cbc.cbe.letupSure', { id: record.id }),
     onOk() {
       const key = 'cbcSend';
       message.loading({ content: t('common.loading'), key });
-      updateCBC(record).then(res => {
+      updateCBCStatus(record).then(res => {
         if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
             content: 'Send',
@@ -642,6 +692,9 @@ function fnRecordSend(record: any) {
         }
       });
     },
+    onCancel() {
+      record.status = record.status === '1' ? '0' : '1';
+    },
   });
 }
 
@@ -729,16 +782,23 @@ function fnModalChange(event: any) {
         tac: '',
       },
     ],
-    eutraCellIdList: [
+    // eutraCellIdList: [
+    //   {
+    //     plmnId: { mcc: '', mnc: '' },
+    //     cellId: '',
+    //   },
+    // ],
+    // nrCellIdList: [
+    //   {
+    //     plmnId: { mcc: '', mnc: '' },
+    //     cellId: '',
+    //   },
+    // ],
+    cellIdList: [
       {
         plmnId: { mcc: '', mnc: '' },
-        cellId: '',
+        eutraCellId: '',
-      },
+        nrCellId: '',
-    ],
-    nrCellIdList: [
-      {
-        plmnId: { mcc: '', mnc: '' },
-        cellId: '',
       },
     ],
     emergencyAreaIDList: [
@@ -752,16 +812,14 @@ 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 === 'CMAS') {
     modalState.from.warningTypeProfile.warningType = '';
-    modalState.from.eventName = 'cmas_';
     modalState.from.serialNumProfile.displayMode = 'normal';
     modalState.from.warningTypeProfile.emergencyUserAlert = false;
-    modalState.from.warningTypeProfile.activatePopup = true;
+    modalState.from.warningTypeProfile.activatePopup = false;
   }
 }
 
@@ -833,7 +891,7 @@ onMounted(() => {
 
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
-              :label=" t('views.cbc.cbe.createdAt')"
+              :label="t('views.cbc.cbe.createdAt')"
               name="queryRangePicker"
             >
               <a-range-picker
@@ -903,12 +961,7 @@ onMounted(() => {
               </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">
@@ -942,7 +995,7 @@ onMounted(() => {
       <a-table
         class="table"
         row-key="id"
-        :columns="tableColumnsDnd"
+        :columns="tableColumns"
         :loading="tableState.loading"
         :data-source="tableState.data"
         :size="tableState.size"
@@ -960,12 +1013,14 @@ onMounted(() => {
           <template v-if="column.key === 'cbeId'">
             <a-space :size="8" align="center">
               <a-tooltip>
-                <template #title>{{ t('common.viewText') }}</template>
+                <template #title>{{ t('common.editText') }}</template>
                 <a-button
                   type="link"
                   @click.prevent="fnModalVisibleByEdit(record)"
                 >
-                  <template #icon><ProfileOutlined /></template>
+                  <template #icon>
+                    <FormOutlined />
+                  </template>
                 </a-button>
               </a-tooltip>
               <a-tooltip>
@@ -1026,6 +1081,7 @@ onMounted(() => {
               :label="t('views.cbc.cbe.eventName')"
               name="eventName"
               v-bind="modalStateFrom.validateInfos.eventName"
+              :help="t('views.cbc.cbe.eventNameHelp')"
             >
               <a-input
                 :disabled="modalState.from.id"
@@ -1038,12 +1094,10 @@ onMounted(() => {
           <a-col :lg="12" :md="12" :xs="24">
             <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"
                 value-format="YYYY-MM-DD HH:mm:ss"
-                placeholder="Pick a date"
                 style="width: 100%"
               />
             </a-form-item>
@@ -1052,12 +1106,10 @@ onMounted(() => {
           <a-col :lg="12" :md="12" :xs="24">
             <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"
                 value-format="YYYY-MM-DD HH:mm:ss"
-                placeholder="Pick a date"
                 style="width: 100%"
               />
             </a-form-item>
@@ -1069,9 +1121,10 @@ onMounted(() => {
               :label="t('views.cbc.cbe.repetitionPeriod')"
               name="repetitionPeriod"
               v-bind="modalStateFrom.validateInfos.repetitionPeriod"
+              :help="t('views.cbc.cbe.repetitionPeriodHelp')"
             >
               <a-input-number
-                :disabled="modalState.from.id"
+                :min="0"
                 v-model:value="modalState.from.repetitionPeriod"
                 style="width: 100%"
               ></a-input-number>
@@ -1083,9 +1136,10 @@ onMounted(() => {
               :label="t('views.cbc.cbe.numOfBcast')"
               name="numOfBcast"
               v-bind="modalStateFrom.validateInfos.numOfBcast"
+              :help="t('views.cbc.cbe.numOfBcastHelp')"
             >
               <a-input-number
-                :disabled="modalState.from.id"
+                :min="0"
                 v-model:value="modalState.from.numOfBcast"
                 style="width: 100%"
               ></a-input-number>
@@ -1107,8 +1161,8 @@ onMounted(() => {
               v-bind="modalStateFrom.validateInfos.msgPWSType"
             >
               <a-select
-                :disabled="modalState.from.id"
                 v-model:value="modalState.from.messageIdProfile.msgPWSType"
+                :disabled="modalState.from.id"
                 @change="pwsTypeChange"
               >
                 <a-select-option value="CMAS"
@@ -1129,8 +1183,8 @@ onMounted(() => {
             >
               <a-select
                 v-model:value="modalState.from.messageIdProfile.messageId"
-                :disabled="modalState.from.id"
                 style="width: 100%"
+                :disabled="modalState.from.id"
                 placeholder="Please select"
                 :options="
                   modalState.from.msgPWSType === 'ETWS'
@@ -1154,7 +1208,6 @@ onMounted(() => {
               name="displayMode"
             >
               <a-select
-                :disabled="modalState.from.id"
                 v-model:value="modalState.from.serialNumProfile.displayMode"
               >
                 <a-select-option value="normal">normal</a-select-option>
@@ -1166,7 +1219,6 @@ onMounted(() => {
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.cbc.cbe.geoScope')" name="geoScope">
               <a-select
-                :disabled="modalState.from.id"
                 v-model:value="modalState.from.serialNumProfile.geoScope"
               >
                 <a-select-option value="Cellwide">Cellwide</a-select-option>
@@ -1188,7 +1240,6 @@ onMounted(() => {
               name="warningType"
             >
               <a-select
-                :disabled="modalState.from.id"
                 v-model:value="modalState.from.warningTypeProfile.warningType"
               >
                 <a-select-option value="Earthquake">Earthquake</a-select-option>
@@ -1209,7 +1260,6 @@ onMounted(() => {
               v-bind="modalStateFrom.validateInfos.emergencyUserAlert"
             >
               <a-select
-                :disabled="modalState.from.id"
                 v-model:value="
                   modalState.from.warningTypeProfile.emergencyUserAlert
                 "
@@ -1227,7 +1277,6 @@ onMounted(() => {
               v-bind="modalStateFrom.validateInfos.activatePopup"
             >
               <a-select
-                :disabled="modalState.from.id"
                 v-model:value="modalState.from.warningTypeProfile.activatePopup"
               >
                 <a-select-option :value="true">true</a-select-option>
@@ -1243,9 +1292,12 @@ onMounted(() => {
 
         <a-row>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.cbc.cbe.language')" name="language">
+            <a-form-item
+              :label="t('views.cbc.cbe.language')"
+              name="language"
+              :label-col="{ span: 6 }"
+            >
               <a-select
-                :disabled="modalState.from.id"
                 v-model:value="modalState.from.warningMessageProfile.language"
               >
                 <a-select-option value="English">English</a-select-option>
@@ -1257,34 +1309,41 @@ onMounted(() => {
               </a-select>
             </a-form-item>
           </a-col>
+        </a-row>
+
+        <a-form-item
+          :label="t('views.cbc.cbe.warningMessageText')"
+          :label-col="{ span: 3 }"
+          name="warningMessageText"
+        >
+          <!-- <a-input
 
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.cbc.cbe.warningMessageText')"
-              name="warningMessageText"
-            >
-              <a-input
-                :disabled="modalState.from.id"
                 v-model:value="
                   modalState.from.warningMessageProfile.warningMessageText
                 "
-              ></a-input>
+              ></a-input> -->
-            </a-form-item>
+          <a-textarea
-          </a-col>
+            v-model:value="
-        </a-row>
+              modalState.from.warningMessageProfile.warningMessageText
+            "
+            :auto-size="{ minRows: 1, maxRows: 6 }"
+            :show-count="true"
+            :placeholder="t('common.inputPlease')"
+          />
+        </a-form-item>
 
         <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"
           >
             <a-radio value="tai">TAI List</a-radio>
-            <a-radio value="eutra">EUTRA CellId List</a-radio>
+            <!-- <a-radio value="eutra">EUTRA CellId List</a-radio>
-            <a-radio value="nr">NR CellId List</a-radio>
+            <a-radio value="nr">NR CellId List</a-radio> -->
+            <a-radio value="cell">CellId List</a-radio>
             <a-radio value="area">Area ID List</a-radio>
           </a-radio-group>
 
@@ -1305,7 +1364,6 @@ onMounted(() => {
             TAI
             <a-tooltip title="Add TAI">
               <a-button
-                :disabled="modalState.from.id"
                 shape="circle"
                 @click="addTai"
                 style="margin-left: 10px"
@@ -1331,11 +1389,7 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input
+                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
-                    :disabled="modalState.from.id"
-                    v-model:value="item.plmnId.mcc"
-                    placeholder="MCC"
-                  />
                 </a-form-item>
               </a-col>
 
@@ -1346,11 +1400,7 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input
+                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
-                    :disabled="modalState.from.id"
-                    v-model:value="item.plmnId.mnc"
-                    placeholder="MNC"
-                  />
                 </a-form-item>
               </a-col>
 
@@ -1360,19 +1410,15 @@ onMounted(() => {
                   name="tac"
                   :validateTrigger="[]"
                   :required="true"
+                  :help="t('views.cbc.cbe.tacHelp')"
                 >
-                  <a-input
+                  <a-input v-model:value="item.tac" placeholder="TAC" />
-                    :disabled="modalState.from.id"
-                    v-model:value="item.tac"
-                    placeholder="TAC"
-                  />
                 </a-form-item>
               </a-col>
 
               <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"
@@ -1393,7 +1439,6 @@ onMounted(() => {
             EUTRA CellId List
             <a-tooltip title="Add EUTRA">
               <a-button
-                :disabled="modalState.from.id"
                 shape="circle"
                 @click="addEutra"
                 style="margin-left: 10px"
@@ -1416,11 +1461,7 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input
+                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
-                    :disabled="modalState.from.id"
-                    v-model:value="item.plmnId.mcc"
-                    placeholder="MCC"
-                  />
                 </a-form-item>
               </a-col>
 
@@ -1431,11 +1472,7 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input
+                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
-                    :disabled="modalState.from.id"
-                    v-model:value="item.plmnId.mnc"
-                    placeholder="MNC"
-                  />
                 </a-form-item>
               </a-col>
 
@@ -1446,11 +1483,7 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input
+                  <a-input v-model:value="item.cellId" placeholder="CellId" />
-                    :disabled="modalState.from.id"
-                    v-model:value="item.cellId"
-                    placeholder="CellId"
-                  />
                 </a-form-item>
               </a-col>
 
@@ -1460,7 +1493,6 @@ 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)"
@@ -1480,12 +1512,7 @@ onMounted(() => {
           <a-divider orientation="left">
             NR CellId List
             <a-tooltip title="Add NR">
-              <a-button
+              <a-button shape="circle" @click="addNr" style="margin-left: 10px">
-                :disabled="modalState.from.id"
-                shape="circle"
-                @click="addNr"
-                style="margin-left: 10px"
-              >
                 <template #icon><plus-outlined /></template>
               </a-button> </a-tooltip
           ></a-divider>
@@ -1503,11 +1530,7 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input
+                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
-                    :disabled="modalState.from.id"
-                    v-model:value="item.plmnId.mcc"
-                    placeholder="MCC"
-                  />
                 </a-form-item>
               </a-col>
 
@@ -1518,26 +1541,13 @@ onMounted(() => {
                   :validateTrigger="[]"
                   :required="true"
                 >
-                  <a-input
+                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
-                    :disabled="modalState.from.id"
-                    v-model:value="item.plmnId.mnc"
-                    placeholder="MNC"
-                  />
                 </a-form-item>
               </a-col>
 
               <a-col :lg="12" :md="12" :xs="24">
-                <a-form-item
+                <a-form-item label="CellId" name="cellId" :validateTrigger="[]">
-                  label="CellId"
+                  <a-input v-model:value="item.cellId" placeholder="CellId" />
-                  name="cellId"
-                  :validateTrigger="[]"
-                  :required="true"
-                >
-                  <a-input
-                    :disabled="modalState.from.id"
-                    v-model:value="item.cellId"
-                    placeholder="CellId"
-                  />
                 </a-form-item>
               </a-col>
 
@@ -1545,7 +1555,6 @@ 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)"
@@ -1559,6 +1568,67 @@ onMounted(() => {
           </div>
         </div>
 
+        <div v-if="modalState.from.warningAreaType === 'cell'">
+          <a-divider orientation="left">
+            CellId List
+            <a-tooltip title="Add CellId">
+              <a-button
+                shape="circle"
+                @click="addCellId"
+                style="margin-left: 10px"
+              >
+                <template #icon><plus-outlined /></template>
+              </a-button>
+            </a-tooltip>
+          </a-divider>
+          <div
+            v-for="(item, idx) in modalState.from.warningAreaList.cellIdList"
+            :key="'cell' + idx"
+            style="margin-bottom: 8px"
+          >
+            <a-row>
+              <a-col :lg="10" :md="10" :xs="24">
+                <a-form-item label="MCC" :required="true">
+                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="10" :md="10" :xs="24">
+                <a-form-item label="MNC" :required="true">
+                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="10" :md="10" :xs="24">
+                <a-form-item label="EUTRA CellId" :help="t('views.cbc.cbe.cellIdHelp')">
+                  <a-input
+                    v-model:value="item.eutraCellId"
+                    placeholder="EUTRA CellId"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="10" :md="10" :xs="24">
+                <a-form-item label="NR CellId" :help="t('views.cbc.cbe.cellIdHelp')">
+                  <a-input
+                    v-model:value="item.nrCellId"
+                    placeholder="NR CellId"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="4">
+                <a-tooltip title="Delete CellId" v-if="idx !== 0">
+                  <a-button
+                    danger
+                    shape="circle"
+                    @click="delCellId(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'">
@@ -1566,7 +1636,6 @@ onMounted(() => {
             Area ID List
             <a-tooltip title="Add Area">
               <a-button
-                :disabled="modalState.from.id"
                 shape="circle"
                 @click="addArea"
                 style="margin-left: 10px"
@@ -1587,19 +1656,16 @@ onMounted(() => {
                   label="AreaID"
                   name="areaId"
                   :validateTrigger="[]"
+                  :help="t('views.cbc.cbe.tacHelp')"
                   :required="true"
                 >
-                  <a-input
+                  <a-input v-model:value="item.areaId" />
-                    :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)"