Merge branch 'main' of http://192.168.2.166:3180/OMC/ems_frontend_vue3

src/i18n/locales/en-US.ts

@@ -476,13 +476,20 @@ export default {
         loadDataConfirm: 'Are you sure you want to reload the data?',
         loadData: 'Load Data',
         loadDataTip: 'Successfully obtained updated data: {num} items. The system is updating the data internally. Please do not click repeatedly to obtain updates!!!',
-        num: 'Number allocation',
+        startIMSI: 'Start IMSI',
-        batchAddText: 'Batch Add',
+        batchAddText: 'Batch Addition',
-        batchDelText: 'Batch Delete',
+        batchDelText: 'Batch Deletion',
-        delNum:'Number of deletions',
+        numAdd: 'Number of releases',
-        imsiTip:'SUPI=MCC+MNC+MSIN MCC=mobile country code, consisting of three digits MNC=Mobile Network Number, consisting of two digits MSIN=Mobile Customer Identification Number, composed of 10 digits of equal length',
+        numDel: 'Number of deletion',
-        delSure:'Are you sure to delete the user with IMSI number: {imsi}?',
+        imsiTip: 'IMSI=MCC+MNC+MSIN',
-        noListData:'No network element list data yet',
+        imsiTip1: 'MCC=Mobile Country Code, consisting of three digits.',
+        imsiTip2: 'MNC = Mobile Network Number, consisting of two digits',
+        imsiTip3: 'MSIN = Mobile Subscriber Identification Number, consisting of 10 equal digits.',
+        amfTip: 'Authentication management field, maximum parameter length is 4',
+        algoIndexTip: 'Algorithm index, between 0 and 15',
+        kiTip: 'User signing key information, the maximum length of 32',
+        opcTip: 'The authentication key, OPC, is calculated from Ki and OP, OP is the root key of the operator, ki is the authentication key, and the maximum length is 32.',
+        delSure:'Are you sure you want to delete the user with IMSI number: {imsi}?',
       },
       sub: {
         subInfo:'Subscription Info',
@@ -492,23 +499,33 @@ export default {
         exportConfirm: 'Are you sure to export all signed user data?',
         import: 'Import',
         loadDataConfirm: 'Are you sure you want to reload the data?',
-        loadData: 'Load Data',
+        loadData: 'Updated Data',
-        loadDataTip: 'Successfully obtained updated data: {num} items. The system is updating the data internally. Please do not click repeatedly to obtain updates!!!',
+        loadDataTip: 'Successfully fetched updated data: {num} items, the system internally carries out the data update, please do not repeatedly click to get the update!!!!',
-        num: 'Number of deletions',
+        numAdd: 'Number of releases',
-        batchAddText: 'Batch Add',
+        numDel: 'Number of deletion',
-        batchDelText: 'Batch Delete',
+        batchAddText: 'Batch Addition',
+        batchDelText: 'Batch Deletion',
+        enable:'Enable',
+        disable:'Disable',
         startIMSI: 'Start IMSI',
-        msisdnTip:'Parameter maximum length: {msg}',
+        imsiTip: 'IMSI=MCC+MNC+MSIN',
-        arfbTip:'Restricted area template. In the restricted area specified by the template, the UE is not allowed to communicate with the network.',
+        imsiTip1: 'MCC=Mobile Country Code, consisting of three digits.',
-        sarTip:'Service area restriction template defines the allowed areas in which the UE can communicate with the network; defines the disallowed areas in which the UE and the network are not allowed to initiate Service Request or SM signaling to obtain user services.',
+        imsiTip2: 'MNC = Mobile Network Number, consisting of two digits',
-        micoTip:'Signed MICO business flag',
+        imsiTip3: 'MSIN = Mobile Subscriber Identification Number, consisting of 10 equal digits.',
-        rfspTip:'RFSP index, in NG-RAN, the index of a specific RRM configuration, the parameter is between 0 and 127',
+        msisdnTip: 'Maximum parameter length {num}',
-        epsFlagTip:'Whether to enable 4G EPS service, 0=disable, 1=enable',
+        inputTip: 'The maximum length of the parameter is {num}',
-        contextIdTip:'To sign up for the APN context ID, you must select it from the APN Context list.',
+        arfbTip: 'Restricted area template, in which the UE is not allowed to communicate with the network in the restricted area specified in the template',
-        staticIpTip:'Specify the static IP address used by mobile phone users when surfing the Internet. If it is "-", it means using a dynamic IP address.',
+        sarTip: 'Service Area Restriction template, defining permitted areas in which the UE can communicate with the network, and disallowed areas in which the UE and the network are not allowed to initiate Service Requests or SM signaling to obtain subscriber services',
-        epsOdbTip:"ODB (Operator-Determined Barring) operator-determined blocking, that is, the user's business ability to access the EPS network is determined by the operator. Selected --- the corresponding service is allowed Unselected --- the corresponding service is prohibited",
+        micoTip: 'Signed MICO business flag bits',
-        hplmnOdbTip:"HPLMN-ODB blocking determined by the home operator, that is, the user's service ability to access the EPS network is determined by the user's home operator. Selected --- the corresponding service is allowed Unselected -- the corresponding service is prohibited",
+        rfspTip:'RFSP index, in NG-RAN, the index of a specific RRM configuration, parameter between 0 and 127',
-        ardTip:'The access control flag (Access-Restriction-Data) can be used to distinguish 2G/3G/LTE users, which facilitates differentiated services for different types of users when 2G/3G/LTE networks coexist.',
+        ueTypeTip: 'Operator-defined subscriber UE Usage Type, integer, parameter between 0 and 127',
+        epsFlagTip: 'Enable or disable 4G EPS service',
+        contextIdTip: 'To sign up for an APN Context ID, you must select it from the APN Context list.',
+        apnContextTip: 'The list of APNs available to the phone, up to six, is defined in the HSS.',
+        staticIpTip: 'Specify the static IP address to be used by the cell phone user to access the Internet, and "-" means dynamic IP address is used.',
+        epsOdbTip: 'ODB (Operator-Determined Barring) Operator-determined blocking, i.e. the ability of a subscriber to access the EPS network is determined by the operator.',
+        hplmnOdbTip: 'HPLMN-ODB homing operator-determined blocking, i.e., the ability of a subscriber to access services in the EPS network is determined by the subscriber is homing operator',
+        ardTip:'Access-Restriction-Data (Access-Restriction-Data), can be used to distinguish between 2G/3G/LTE users, to facilitate the coexistence of 2G/3G/LTE network for different types of users to distinguish between the service',
       },
       base5G: {
         neTypePlease: 'Query network element object',

src/i18n/locales/zh-CN.ts

@@ -476,13 +476,20 @@ export default {
         loadDataConfirm: '确认要重新加载数据吗?',
         loadData: '更新数据',
         loadDataTip: '成功获取更新数据：{num}条，系统内部进行数据更新，请勿重复点击获取更新!!!',
-        num: '放号数',
+        startIMSI: '起始IMSI',
         batchAddText: '批量新增',
         batchDelText: '批量删除',
-        delNum:'删除个数',
+        numAdd: '放号个数',
-        imsiTip:' SUPI=MCC+MNC+MSIN MCC=移动国家号码, 由三位数字组成 MNC=移动网络号，由两位数字组成 MSIN=移动客户识别码,采用等长10位数字构成',
+        numDel:'删除个数',
-        delSure:'确认删除IMSI编号为: {imsi} 的用户嘛?',
+        imsiTip: 'IMSI=MCC+MNC+MSIN',
-        noListData:'暂无网元列表数据',
+        imsiTip1: 'MCC=移动国家号码, 由三位数字组成',
+        imsiTip2: 'MNC=移动网络号，由两位数字组成',
+        imsiTip3: 'MSIN=移动客户识别码，采用等长10位数字构成',
+        amfTip: '鉴权管理域，参数最大长度为 4',
+        algoIndexTip: '算法索引，介于0到15之间',
+        kiTip: '用户签权密钥信息,最大长度为32',
+        opcTip: '鉴权秘钥，OPC是由Ki和OP经过计算得来的，OP为运营商的根秘钥，ki是鉴权秘钥,最大长度为32',
+        delSure:'确认删除IMSI编号为: {imsi} 的用户吗?',
       },
       sub: {
         subInfo:'签约信息',
@@ -494,20 +501,30 @@ export default {
         loadDataConfirm: '确认要重新加载数据吗?',
         loadData: '更新数据',
         loadDataTip: '成功获取更新数据：{num}条，系统内部进行数据更新，请勿重复点击获取更新!!!',
-        num: '删除个数',
+        numAdd: '放号个数',
+        numDel: '删除个数',
         batchAddText: '批量新增',
         batchDelText: '批量删除',
+        enable:'开启',
+        disable:'关闭',
         startIMSI: '起始IMSI',
-        msisdnTip:'参数最大长度{msg}',
+        imsiTip: 'IMSI=MCC+MNC+MSIN',
-        arfbTip:'限制区域模板,在模板指定的限制区域中,UE 不允许与网络通信',
+        imsiTip1: 'MCC=移动国家号码, 由三位数字组成',
-        sarTip:'服务区域限制模板,定义允许的区域,UE在这些区域中可以和网络通信;定义不允许的区,UE和网络在这些区域中,不允许发起Service Request 或 SM信令来获取用户服务',
+        imsiTip2: 'MNC=移动网络号，由两位数字组成',
-        micoTip:'签约的MICO业务标志位',
+        imsiTip3: 'MSIN=移动客户识别码，采用等长10位数字构成',
-        rfspTip:'RFSP 索引,在 NG-RAN中,特定RRM配置的索引,参数介于0到127之间',
+        msisdnTip: '参数最大长度 {num}',
-        epsFlagTip:'是否开启4G EPS 服务,0=不开启,1=开启',
+        inputTip: '参数最大长度为 {num}',
-        contextIdTip:'签约APN 上下文ID,必须从APN Context list 中选择',
+        arfbTip: '限制区域模板，在模板指定的限制区域中，UE 不允许与网络通信',
-        staticIpTip:'指定手机用户上网时使用的静态IP地址,为"-"时表示使用动态IP地址',
+        sarTip: '服务区域限制模板，定义允许的区域，UE 在这些区域中可以和网络通信；定义不允许的区，UE 和网络在这些区域中，不允许发起Service Request 或 SM 信令来获取用户服务',
-        epsOdbTip:'ODB(Operator-Determined Barring)运营商决定的闭锁,即用户接入EPS网络的业务能力由运营商决定.选中 ---对应服务被允许 未选 --- 对应服务被禁止',
+        micoTip: '签约的 MICO 业务标志位',
-        hplmnOdbTip:'HPLMN-ODB归属运营商决定的闭锁,即用户接入EPS网络的业务能力由用户归宿运营商决定.选中 --- 对应服务被允许 未选 -- 对应服务被禁止',
+        rfspTip:'RFSP 索引，在 NG-RAN 中，特定 RRM 配置的索引,参数介于0到127之间',
+        ueTypeTip: '运营商定义的用户 UE Usage Type，整型，参数介于0到127之间',
+        epsFlagTip: '是否开启4G EPS 服务',
+        contextIdTip: '签约APN 上下文ID，必须从APN Context list 中选择。',
+        apnContextTip: '手机可用的APN列表，最多六个，在HSS中定义。',
+        staticIpTip: '指定手机用户上网时使用的静态IP地址,为"-"时表示使用动态IP地址',
+        epsOdbTip: 'ODB(Operator-Determined Barring)运营商决定的闭锁,即用户接入EPS网络的业务能力由运营商决定.选中 ---对应服务被允许 未选 --- 对应服务被禁止',
+        hplmnOdbTip: 'HPLMN-ODB归属运营商决定的闭锁,即用户接入EPS网络的业务能力由用户归宿运营商决定.选中 --- 对应服务被允许 未选 -- 对应服务被禁止',
         ardTip:'接入控制标志(Access-Restriction-Data),可用于区分2G/3G/LTE用户,便于为2G/3G/LTE网络共存时,对不同类型用户进行区分服务',
       },
       base5G: {

src/plugins/http-fetch.ts

@@ -93,7 +93,7 @@ const baseUrl = import.meta.env.PROD
 /**默认请求参数 */
 const FATCH_OPTIONS: OptionsType = {
   baseUrl: baseUrl,
-  timeout: 30_000,
+  timeout: 10_000,
   url: '',
   method: 'get',
   headers: {

src/views/configManage/configParam/index.vue

@@ -73,7 +73,7 @@ function fnTabActiveTopTag(key: string | number) {
           tableState.arrayColumns.push({
             title: t('common.operate'),
             key: 'index',
-            align: 'left',
+            align: 'center',
             fixed: 'right',
             width: 5,
           });
@@ -601,7 +601,7 @@ function arrayChildExpand(key: Record<string, any>, row: Record<string, any>) {
   tableState.arrayChildColumns.push({
     title: t('common.operate'),
     key: 'index',
-    align: 'left',
+    align: 'center',
     fixed: 'right',
     width: 5,
   });

src/views/configManage/configParamForm/index.vue

@@ -1619,6 +1619,8 @@ onMounted(() => {
         autocomplete="off"
         :validate-on-rule-change="false"
         :validateTrigger="[]"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
       >
         <a-form-item
           v-for="item in modalState.data"

src/views/configManage/configParamTree/index.vue

@@ -1663,13 +1663,15 @@ onMounted(() => {
         autocomplete="off"
         :validate-on-rule-change="false"
         :validateTrigger="[]"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
       >
         <a-form-item
           v-for="item in modalState.data"
           :label="item.display"
           :name="item.name"
           :required="item.optional === 'false'"
-          style="margin-bottom: 2px"
+          style="margin-bottom: 4px"
         >
           <a-tooltip placement="topLeft">
             <template #title v-if="item.comment">

src/views/configManage/configParamTreeTable/index.vue

@@ -113,9 +113,9 @@ function fnActiveConfigNode(key: string | number) {
           title: t('common.operate'),
           dataIndex: 'index',
           key: 'index',
-          align: 'left',
+          align: 'center',
           fixed: 'right',
-          width: 5,
+          width: 3,
         });
         arrayState.columns = columns;
 
@@ -590,9 +590,9 @@ function arrayChildExpand(
     title: t('common.operate'),
     dataIndex: 'index',
     key: 'index',
-    align: 'left',
+    align: 'center',
     fixed: 'right',
-    width: 5,
+    width: 3,
   });
   arrayChildState.columns = columns;
 
@@ -1458,13 +1458,15 @@ onMounted(() => {
         autocomplete="off"
         :validate-on-rule-change="false"
         :validateTrigger="[]"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
       >
         <a-form-item
           v-for="item in modalState.data"
           :label="item.display"
           :name="item.name"
           :required="item.optional === 'false'"
-          style="margin-bottom: 2px"
+          style="margin-bottom: 4px"
         >
           <a-tooltip placement="topLeft">
             <template #title v-if="item.comment">

src/views/neUser/auth/index.vue

@@ -112,7 +112,7 @@ let tableColumns: ColumnsType = [
   //   width: 10,
   // },
   {
-    title: 'ALGO Index',
+    title: 'Algo Index',
     dataIndex: 'algoIndex',
     align: 'center',
     width: 4,
@@ -122,7 +122,7 @@ let tableColumns: ColumnsType = [
     key: 'imsi',
     align: 'center',
     fixed: 'right',
-    width: 5,
+    width: 2,
   },
 ];
 
@@ -173,8 +173,6 @@ function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
 
 /**对话框对象信息状态类型 */
 type ModalStateType = {
-  /**详情框是否显示 */
-  visibleByView: boolean;
   /**新增框或修改框是否显示 */
   visibleByEdit: boolean;
   /**批量新增新增框是否显示 */
@@ -197,7 +195,6 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
   visibleByEdit: false,
   visibleByBatch: false,
   visibleByBatchDel: false,
@@ -207,19 +204,19 @@ let modalState: ModalStateType = reactive({
     imsi: '',
     amf: '8000',
     ki: '',
-    algoIndex: '0',
+    algoIndex: 0,
     opc: '',
   },
   BatchForm: {
-    num: '',
+    num: 1,
     imsi: '',
-    amf: '',
+    amf: '8000',
     ki: '',
-    algoIndex: '',
+    algoIndex: 0,
     opc: '',
   },
   BatchDelForm: {
-    num: '',
+    num: 1,
     imsi: '',
   },
   confirmLoading: false,
@@ -246,7 +243,7 @@ const modalStateBatchFrom = Form.useForm(
     num: [
       {
         required: true,
-        message: t('views.neUser.auth.num') + t('common.unableNull'),
+        message: t('views.neUser.auth.numAdd') + t('common.unableNull'),
       },
     ],
     imsi: [{ required: true, message: 'IMSI' + t('common.unableNull') }],
@@ -265,39 +262,13 @@ const modalStateBatchDelFrom = Form.useForm(
     num: [
       {
         required: true,
-        message: t('views.neUser.auth.delNum') + t('common.unableNull'),
+        message: t('views.neUser.auth.numDel') + t('common.unableNull'),
       },
     ],
     imsi: [{ required: true, message: 'IMSI' + t('common.unableNull') }],
   })
 );
 
-/**
- * 对话框弹出显示为 详情框
- * @param imsi 网元id, 不传为新增
- */
-function fnModalVisibleByVive(imsi: string) {
-  if (modalState.confirmLoading) return;
-  const hide = message.loading('Waiting...', 0);
-  modalState.confirmLoading = true;
-  const neID = queryParams.neId || '-';
-  getAuth(neID, imsi)
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        modalState.from = Object.assign(modalState.from, res.data);
-        modalState.title =
-          t('common.viewText') + t('views.neUser.auth.authInfo');
-        modalState.visibleByView = true;
-      } else {
-        message.error(t('common.getInfoFail'), 2);
-      }
-    })
-    .finally(() => {
-      hide();
-      modalState.confirmLoading = false;
-    });
-}
-
 /**
  * 对话框弹出显示为 新增或者修改
  * @param noticeId 网元id, 不传为新增
@@ -312,7 +283,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
     const hide = message.loading(t('common.loading'), 0);
     modalState.confirmLoading = true;
     const neID = queryParams.neId || '-';
-    getAuth(neID, row?.imsi)
+    getAuth(neID, row.imsi)
       .then(res => {
         if (res.code === RESULT_CODE_SUCCESS) {
           modalState.from = Object.assign(modalState.from, res.data);
@@ -353,14 +324,13 @@ function fnModalVisibleByBatch(batchFlag?: number) {
  * 进行表达规则校验
  */
 function fnModalOk() {
-  const neID = queryParams.neId;
-  if (!neID) return;
   modalStateFrom
     .validate()
     .then(e => {
       modalState.confirmLoading = true;
       const from = toRaw(modalState.from);
-      from.neId = neID;
+      from.neId = queryParams.neId || '-';
+      from.algoIndex = `${from.algoIndex}`;
       const result = from.id ? updateAuth(from) : addAuth(from);
       const hide = message.loading({ content: t('common.loading') });
       result
@@ -400,9 +370,8 @@ function fnBatchModalOk() {
     .then(e => {
       modalState.confirmLoading = true;
       const from = toRaw(modalState.BatchForm);
-      const neID = queryParams.neId || '-';
+      from.neID = queryParams.neId || '-';
-      // const result = from.id ? updateAuth(from) : addAuth(neID, from);
+      from.algoIndex = `${from.algoIndex}`;
-      from.neID = neID;
       const result = batchAuth(from);
       const hide = message.loading({ content: t('common.loading') });
       result
@@ -481,7 +450,6 @@ function fnBatchDelModalOk() {
  */
 function fnBatchModalCancel() {
   modalState.visibleByBatch = false;
-  modalState.visibleByView = false;
   modalStateBatchFrom.resetFields();
 }
 
@@ -491,7 +459,6 @@ function fnBatchModalCancel() {
  */
 function fnBatchDelModalCancel() {
   modalState.visibleByBatchDel = false;
-  modalState.visibleByView = false;
   modalStateBatchDelFrom.resetFields();
 }
 
@@ -501,7 +468,6 @@ function fnBatchDelModalCancel() {
  */
 function fnModalCancel() {
   modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
   modalStateFrom.resetFields();
 }
 
@@ -579,12 +545,12 @@ function fnLoadData() {
         description: t('views.neUser.auth.loadDataTip', { num: res.data }),
         duration: 10,
       });
-      // 延迟3s后关闭loading刷新列表
+      // 延迟5s后关闭loading刷新列表
       setTimeout(() => {
         modalState.loadDataLoading = false;
         tableState.loading = false; // 表格loading
         fnQueryReset();
-      }, 3000);
+      }, 5000);
     } else {
       message.error({
         content: t('common.getInfoFail'),
@@ -687,7 +653,7 @@ onMounted(() => {
         }
       } else {
         message.warning({
-          content: t('views.neUser.auth.noListData'),
+          content: t('common.noData'),
           duration: 2,
         });
       }
@@ -877,17 +843,6 @@ onMounted(() => {
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'imsi'">
             <a-space :size="8" align="center">
-              <a-tooltip>
-                <template #title>{{ t('common.viewText') }}</template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnModalVisibleByVive(record.imsi)"
-                >
-                  <template #icon>
-                    <ProfileOutlined />
-                  </template>
-                </a-button>
-              </a-tooltip>
               <a-tooltip>
                 <template #title>{{ t('common.editText') }}</template>
                 <a-button
@@ -913,53 +868,6 @@ onMounted(() => {
       </a-table>
     </a-card>
 
-    <!-- 详情框 -->
-    <a-modal
-      width="800px"
-      :visible="modalState.visibleByView"
-      :title="modalState.title"
-      @cancel="fnModalCancel"
-    >
-      <a-form layout="horizontal">
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="IMSI" name="imsi">
-              {{ modalState.from.imsi }}
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="AMF" name="amf">
-              {{ modalState.from.amf }}
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="ALGO Index" name="algo">
-              {{ modalState.from.algoIndex }}
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="KI" name="ki">
-              {{ modalState.from.ki }}
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="OPC" name="opc">
-              {{ modalState.from.opc }}
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-      <template #footer>
-        <a-button key="cancel" @click="fnModalCancel">{{
-          t('common.close')
-        }}</a-button>
-      </template>
-    </a-modal>
-
     <!-- 新增框或修改框 -->
     <a-modal
       width="800px"
@@ -971,7 +879,12 @@ onMounted(() => {
       @ok="fnModalOk"
       @cancel="fnModalCancel"
     >
-      <a-form name="modalStateFrom" layout="horizontal">
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
+      >
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
@@ -979,11 +892,18 @@ onMounted(() => {
               name="imsi"
               v-bind="modalStateFrom.validateInfos.imsi"
             >
-              <a-input
+              <a-input v-model:value="modalState.from.imsi" allow-clear>
-                v-model:value="modalState.from.imsi"
+                <template #prefix>
-                :disabled="modalState.from.id != ''"
+                  <a-tooltip placement="topLeft">
-                allow-clear
+                    <template #title>
-              >
+                      {{ t('views.neUser.auth.imsiTip') }}<br />
+                      {{ t('views.neUser.auth.imsiTip1') }}<br />
+                      {{ t('views.neUser.auth.imsiTip2') }}<br />
+                      {{ t('views.neUser.auth.imsiTip3') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
               </a-input>
             </a-form-item>
           </a-col>
@@ -996,6 +916,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
+
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
@@ -1006,18 +927,41 @@ onMounted(() => {
               <a-input
                 v-model:value="modalState.from.amf"
                 allow-clear
-              ></a-input>
+                :maxlength="4"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.auth.amfTip') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
             </a-form-item>
           </a-col>
-
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              label="ALGO Index"
+              label="Algo Index"
               name="algo"
               v-bind="modalStateFrom.validateInfos.algoIndex"
             >
-              <a-input v-model:value="modalState.from.algoIndex" allow-clear>
+              <a-input-number
-              </a-input>
+                v-model:value="modalState.from.algoIndex"
+                style="width: 100%"
+                :min="0"
+                :max="15"
+                placeholder="0 ~ 15"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.auth.algoIndexTip') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input-number>
             </a-form-item>
           </a-col>
         </a-row>
@@ -1032,8 +976,16 @@ onMounted(() => {
               <a-input
                 v-model:value="modalState.from.ki"
                 allow-clear
-                :disabled="modalState.from.id !== ''"
+                :maxlength="32"
               >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.auth.kiTip') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
               </a-input>
             </a-form-item>
           </a-col>
@@ -1046,8 +998,17 @@ onMounted(() => {
               <a-input
                 v-model:value="modalState.from.opc"
                 allow-clear
-                :disabled="modalState.from.id !== ''"
+                :maxlength="32"
-              ></a-input>
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.auth.opcTip') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
             </a-form-item>
           </a-col>
         </a-row>
@@ -1065,17 +1026,25 @@ onMounted(() => {
       @ok="fnBatchModalOk"
       @cancel="fnBatchModalCancel"
     >
-      <a-form name="modalStateBatchFrom" layout="horizontal">
+      <a-form
+        name="modalStateBatchFrom"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
+      >
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.neUser.auth.num')"
+              :label="t('views.neUser.auth.numAdd')"
               name="num"
               v-bind="modalStateBatchFrom.validateInfos.num"
             >
               <a-input-number
                 v-model:value="modalState.BatchForm.num"
                 style="width: 100%"
+                :min="1"
+                :max="100"
+                placeholder="<=100"
               ></a-input-number>
             </a-form-item>
           </a-col>
@@ -1089,6 +1058,17 @@ onMounted(() => {
               v-bind="modalStateBatchFrom.validateInfos.imsi"
             >
               <a-input v-model:value="modalState.BatchForm.imsi" allow-clear>
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.auth.imsiTip') }}<br />
+                      {{ t('views.neUser.auth.imsiTip1') }}<br />
+                      {{ t('views.neUser.auth.imsiTip2') }}<br />
+                      {{ t('views.neUser.auth.imsiTip3') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
               </a-input>
             </a-form-item>
           </a-col>
@@ -1112,20 +1092,41 @@ onMounted(() => {
               <a-input
                 v-model:value="modalState.BatchForm.amf"
                 allow-clear
-              ></a-input>
+                :maxlength="4"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.auth.amfTip') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              label="ALGO Index"
+              label="Algo Index"
               name="algo"
               v-bind="modalStateBatchFrom.validateInfos.algoIndex"
             >
-              <a-input
+              <a-input-number
                 v-model:value="modalState.BatchForm.algoIndex"
-                allow-clear
+                style="width: 100%"
+                :min="0"
+                :max="15"
+                placeholder="0 ~ 15"
               >
-              </a-input>
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.auth.algoIndexTip') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input-number>
             </a-form-item>
           </a-col>
         </a-row>
@@ -1137,7 +1138,19 @@ onMounted(() => {
               name="ki"
               v-bind="modalStateBatchFrom.validateInfos.ki"
             >
-              <a-input v-model:value="modalState.BatchForm.ki" allow-clear>
+              <a-input
+                v-model:value="modalState.BatchForm.ki"
+                allow-clear
+                :maxlength="32"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.auth.kiTip') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
               </a-input>
             </a-form-item>
           </a-col>
@@ -1150,7 +1163,17 @@ onMounted(() => {
               <a-input
                 v-model:value="modalState.BatchForm.opc"
                 allow-clear
-              ></a-input>
+                :maxlength="32"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.auth.opcTip') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
             </a-form-item>
           </a-col>
         </a-row>
@@ -1168,16 +1191,11 @@ onMounted(() => {
       @ok="fnBatchDelModalOk"
       @cancel="fnBatchDelModalCancel"
     >
-      <a-form
+      <a-form name="modalStateBatchDelFrom" layout="horizontal">
-        name="modalStateBatchDelFrom"
-        layout="horizontal"
-        :label-col="{ span: 7.5 }"
-        :labelWrap="true"
-      >
         <a-row :gutter="16">
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
-              :label="t('views.neUser.sub.startIMSI')"
+              :label="t('views.neUser.auth.startIMSI')"
               name="imsi"
               v-bind="modalStateBatchDelFrom.validateInfos.imsi"
             >
@@ -1185,7 +1203,10 @@ onMounted(() => {
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
-                      {{ t('views.neUser.auth.imsiTip') }}
+                      {{ t('views.neUser.auth.imsiTip') }}<br />
+                      {{ t('views.neUser.auth.imsiTip1') }}<br />
+                      {{ t('views.neUser.auth.imsiTip2') }}<br />
+                      {{ t('views.neUser.auth.imsiTip3') }}
                     </template>
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
@@ -1195,13 +1216,16 @@ onMounted(() => {
           </a-col>
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
-              :label="t('views.neUser.sub.num')"
+              :label="t('views.neUser.auth.numDel')"
               name="num"
               v-bind="modalStateBatchDelFrom.validateInfos.num"
             >
               <a-input-number
                 v-model:value="modalState.BatchDelForm.num"
                 style="width: 100%"
+                :min="1"
+                :max="100"
+                placeholder="<=100"
               ></a-input-number>
             </a-form-item>
           </a-col>

src/views/neUser/sub/index.vue

@@ -151,7 +151,7 @@ let tableColumns: ColumnsType = [
     key: 'imsi',
     align: 'center',
     fixed: 'right',
-    width: 5,
+    width: 2,
   },
 ];
 
@@ -240,7 +240,7 @@ let modalState: ModalStateType = reactive({
     rat: '0',
     arfb: 'def_arfb',
     sar: 'def_sar',
-    cn: '',
+    cn: '3',
     smData: '',
     smfSel: 'def_snssai',
     epsDat: '',
@@ -251,8 +251,10 @@ let modalState: ModalStateType = reactive({
     ard: [1, 7],
     epstpl: 'def_eps',
     contextId: '1',
-    apnContext: '',
+    apnContext: [1, 2, 0, 0, 0, 0],
     staticIp: '-',
+    rfsp: 1,
+    ueType: 1,
   },
   BatchForm: {
     num: '',
@@ -263,7 +265,7 @@ let modalState: ModalStateType = reactive({
     rat: '0',
     arfb: 'def_arfb',
     sar: 'def_sar',
-    cn: '',
+    cn: '3',
     smData: '',
     smfSel: 'def_snssai',
     epsDat: '',
@@ -274,8 +276,10 @@ let modalState: ModalStateType = reactive({
     ard: [1, 7],
     epstpl: 'def_eps',
     contextId: '1',
-    apnContext: '',
+    apnContext: [1, 2, 0, 0, 0, 0],
     staticIp: '-',
+    rfsp: 1,
+    ueType: 1,
   },
   BatchDelForm: {
     num: '',
@@ -401,7 +405,18 @@ function fnModalVisibleByEdit(imsi?: string) {
           res.data.hplmnOdb = hplmnArray;
           res.data.epsOdb = epsOdbArray;
 
-          modalState.from = Object.assign(modalState.from, res.data);
+          // 4G APN Context List
+          const apnContextStr = res.data.apnContext;
+          const apnContextArr = [];
+          for (let i = 0; i < apnContextStr.length; i += 2) {
+            const num = Number(`${apnContextStr[i]}${apnContextStr[i + 1]}`);
+            apnContextArr.push(num);
+          }
+
+          modalState.from = Object.assign(modalState.from, res.data, {
+            apnContext: apnContextArr,
+          });
+
           modalState.title =
             t('common.editText') + t('views.neUser.sub.subInfo');
           modalState.visibleByEdit = true;
@@ -468,7 +483,12 @@ function fnModalOk() {
       from.epsOdb = '' + parseInt(odbArr.join(''), 2);
       from.hplmnOdb = '' + parseInt(hplmnArr.join(''), 2);
       from.ard = '' + parseInt(ardArr.join(''), 2);
-      from.cn = '3';
+
+      // 4G APN Context List
+      from.apnContext = from.apnContext
+        .map((item: number) => `${item}`.padStart(2, '0'))
+        .join('');
+
       const neID = queryParams.neId || '-';
       const result = from.id ? updateSub(neID, from) : addSub(neID, from);
       const hide = message.loading({ content: t('common.loading') });
@@ -505,7 +525,7 @@ const modalStateBatchFrom = Form.useForm(
     num: [
       {
         required: true,
-        message: t('views.neUser.sub.num') + t('common.unableNull'),
+        message: t('views.neUser.sub.numAdd') + t('common.unableNull'),
       },
     ],
     imsi: [{ required: true, message: 'IMSI' + t('common.unableNull') }],
@@ -552,13 +572,16 @@ function fnBatchModalOk() {
       from.epsOdb = '' + parseInt(odbArr.join(''), 2);
       from.hplmnOdb = '' + parseInt(hplmnArr.join(''), 2);
       from.ard = '' + parseInt(ardArr.join(''), 2);
-      from.cn = '3';
+
+      // 4G APN Context List
+      from.apnContext = from.apnContext
+        .map((item: number) => `${item}`.padStart(2, '0'))
+        .join('');
+
       const neID = queryParams.neId || '-';
-      // const result = from.id ? updateAuth(from) : addAuth(neID, from);
       from.neID = neID;
-      const result = batchAddSub(from);
       const hide = message.loading({ content: t('common.loading') });
-      result
+      batchAddSub(from)
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
             message.success({
@@ -591,7 +614,7 @@ const modalStateBatchDelFrom = Form.useForm(
     num: [
       {
         required: true,
-        message: t('views.neUser.sub.num') + t('common.unableNull'),
+        message: t('views.neUser.sub.numDel') + t('common.unableNull'),
       },
     ],
     imsi: [{ required: true, message: 'IMSI' + t('common.unableNull') }],
@@ -608,13 +631,9 @@ function fnBatchDelModalOk() {
     .then(e => {
       modalState.confirmLoading = true;
       const from = toRaw(modalState.BatchDelForm);
-
+      from.neID = queryParams.neId || '-';
-      const neID = queryParams.neId || '-';
-      // const result = from.id ? updateAuth(from) : addAuth(neID, from);
-      from.neID = neID;
-      const result = batchDelSub(from);
       const hide = message.loading({ content: t('common.loading') });
-      result
+      batchDelSub(from)
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
             message.success({
@@ -746,12 +765,12 @@ function fnLoadData() {
         description: t('views.neUser.sub.loadDataTip', { num: res.data }),
         duration: 10,
       });
-      // 延迟3s后关闭loading刷新列表
+      // 延迟5s后关闭loading刷新列表
       setTimeout(() => {
         modalState.loadDataLoading = false;
         tableState.loading = false; // 表格loading
         fnQueryReset();
-      }, 3000);
+      }, 5000);
     } else {
       message.error({
         content: t('common.getInfoFail'),
@@ -854,7 +873,7 @@ onMounted(() => {
         }
       } else {
         message.warning({
-          content: t('views.neUser.auth.noListData'),
+          content: t('common.noData'),
           duration: 2,
         });
       }
@@ -1113,7 +1132,10 @@ onMounted(() => {
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
-                      {{ t('views.neUser.auth.imsiTip') }}
+                      {{ t('views.neUser.sub.imsiTip') }}<br />
+                      {{ t('views.neUser.sub.imsiTip1') }}<br />
+                      {{ t('views.neUser.sub.imsiTip2') }}<br />
+                      {{ t('views.neUser.sub.imsiTip3') }}
                     </template>
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
@@ -1127,11 +1149,15 @@ onMounted(() => {
               name="msisdn"
               v-bind="modalStateFrom.validateInfos.msisdn"
             >
-              <a-input v-model:value="modalState.from.msisdn" allow-clear>
+              <a-input
+                v-model:value="modalState.from.msisdn"
+                allow-clear
+                :maxlength="32"
+              >
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
-                      {{ t('views.neUser.sub.msisdnTip', { msg: '32' }) }}
+                      {{ t('views.neUser.sub.msisdnTip', { num: '32' }) }}
                     </template>
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
@@ -1150,7 +1176,19 @@ onMounted(() => {
               name="ambr"
               v-bind="modalStateFrom.validateInfos.ambr"
             >
-              <a-input v-model:value="modalState.from.ambr" allow-clear>
+              <a-input
+                v-model:value="modalState.from.ambr"
+                allow-clear
+                :maxlength="16"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.sub.inputTip', { num: '16' }) }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
               </a-input>
             </a-form-item>
           </a-col>
@@ -1160,7 +1198,19 @@ onMounted(() => {
               name="nssai"
               v-bind="modalStateFrom.validateInfos.nssai"
             >
-              <a-input v-model:value="modalState.from.nssai" allow-clear>
+              <a-input
+                v-model:value="modalState.from.nssai"
+                allow-clear
+                :maxlength="16"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.sub.inputTip', { num: '16' }) }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
               </a-input>
             </a-form-item>
           </a-col>
@@ -1172,11 +1222,15 @@ onMounted(() => {
               label="5G Subscribed SMF Selection Data Template"
               name="smfSel"
             >
-              <a-input v-model:value="modalState.from.smfSel" allow-clear>
+              <a-input
+                v-model:value="modalState.from.smfSel"
+                allow-clear
+                :maxlength="16"
+              >
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
-                      {{ t('views.neUser.sub.msisdnTip', { msg: '16' }) }}
+                      {{ t('views.neUser.sub.inputTip', { num: '16' }) }}
                     </template>
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
@@ -1186,7 +1240,11 @@ onMounted(() => {
           </a-col>
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item label="5G Forbidden Areas Template" name="arfb">
-              <a-input v-model:value="modalState.from.arfb" allow-clear>
+              <a-input
+                v-model:value="modalState.from.arfb"
+                allow-clear
+                :maxlength="16"
+              >
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
@@ -1206,7 +1264,11 @@ onMounted(() => {
               label="5G Service Area Restriction Template"
               name="sar"
             >
-              <a-input v-model:value="modalState.from.sar" allow-clear>
+              <a-input
+                v-model:value="modalState.from.sar"
+                allow-clear
+                :maxlength="16"
+              >
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
@@ -1218,22 +1280,15 @@ onMounted(() => {
               </a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="24" :md="24" :xs="24">
-            <a-form-item label="5G MICO Mode" name="mico">
-              <a-tooltip :title="t('views.neUser.sub.micoTip')">
-                <a-select value="1">
-                  <a-select-option value="1">Enable</a-select-option>
-                  <a-select-option value="0">Disable</a-select-option>
-                </a-select>
-              </a-tooltip>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item label="5G RFSP Index" name="rfsp">
-              <a-input value="1" allow-clear>
+              <a-input-number
+                v-model:value="modalState.from.rfsp"
+                style="width: 100%"
+                :min="0"
+                :max="127"
+                placeholder="0 ~ 127"
+              >
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
@@ -1242,12 +1297,47 @@ onMounted(() => {
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
                 </template>
-              </a-input>
+              </a-input-number>
             </a-form-item>
           </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="24" :md="24" :xs="24">
+            <a-form-item
+              label="5G MICO Mode"
+              name="mico"
+              :help="t('views.neUser.sub.micoTip')"
+            >
+              <a-select value="1">
+                <a-select-option value="1">
+                  {{ t('views.neUser.sub.enable') }}
+                </a-select-option>
+                <a-select-option value="0">
+                  {{ t('views.neUser.sub.disable') }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item label="5G UE Usage Type" name="ueType">
-              <a-input value="1" allow-clear> </a-input>
+              <a-input-number
+                v-model:value="modalState.from.ueType"
+                style="width: 100%"
+                :min="0"
+                :max="127"
+                placeholder="0 ~ 127"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.sub.ueTypeTip') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input-number>
             </a-form-item>
           </a-col>
         </a-row>
@@ -1259,11 +1349,15 @@ onMounted(() => {
               name="smData"
               v-bind="modalStateFrom.validateInfos.smData"
             >
-              <a-input v-model:value="modalState.from.smData" allow-clear>
+              <a-input
+                v-model:value="modalState.from.smData"
+                allow-clear
+                :maxlength="128"
+              >
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
-                      {{ t('views.neUser.sub.msisdnTip', { msg: '128' }) }}
+                      {{ t('views.neUser.sub.inputTip', { num: '128' }) }}
                     </template>
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
@@ -1275,11 +1369,15 @@ onMounted(() => {
         <a-row :gutter="16" v-else>
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item label="Subscribed SM Data" name="smData">
-              <a-input v-model:value="modalState.from.smData" allow-clear>
+              <a-input
+                v-model:value="modalState.from.smData"
+                allow-clear
+                :maxlength="128"
+              >
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
-                      {{ t('views.neUser.sub.msisdnTip', { msg: '128' }) }}
+                      {{ t('views.neUser.sub.inputTip', { num: '128' }) }}
                     </template>
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
@@ -1288,8 +1386,50 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
+
         <a-divider orientation="left">4G</a-divider>
 
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="4G EPS Flag"
+              name="epsFlag"
+              :help="t('views.neUser.sub.epsFlagTip')"
+            >
+              <a-select v-model:value="modalState.from.epsFlag">
+                <a-select-option value="1">
+                  {{ t('views.neUser.sub.enable') }}
+                </a-select-option>
+                <a-select-option value="0">
+                  {{ t('views.neUser.sub.disable') }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="4G EPS User Template Name"
+              name="epstpl"
+              v-bind="modalStateFrom.validateInfos.epstpl"
+            >
+              <a-input
+                v-model:value="modalState.from.epstpl"
+                allow-clear
+                :maxlength="16"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.sub.inputTip', { num: '16' }) }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
         <a-row :gutter="16">
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
@@ -1311,51 +1451,46 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-form-item
+        <a-form-item label="4G Context ID" name="contextId">
-          label="4G Context ID"
+          <a-input v-model:value="modalState.from.contextId" allow-clear>
-          name="contextId"
+            <template #prefix>
-          v-bind="modalStateFrom.validateInfos.contextId"
+              <a-tooltip placement="topLeft">
-        >
+                <template #title>
-          <a-tooltip :title="t('views.neUser.sub.contextIdTip')">
+                  {{ t('views.neUser.sub.contextIdTip') }}
-            <a-input v-model:value="modalState.from.contextId" allow-clear>
+                </template>
-            </a-input>
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-          </a-tooltip>
+              </a-tooltip>
+            </template>
+          </a-input>
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-form-item
-          <a-col :lg="12" :md="12" :xs="24">
+          label="4G APN Context List"
-            <a-form-item
+          name="apnContext"
-              label="4G EPS User Template Name"
+          :help="t('views.neUser.sub.apnContextTip')"
-              name="epstpl"
+        >
-              v-bind="modalStateFrom.validateInfos.epstpl"
+          <a-input-group compact>
-            >
+            <a-input-number
-              <a-tooltip
+              v-for="(_, i) in modalState.from.apnContext"
-                :title="t('views.neUser.sub.msisdnTip', { msg: '16' })"
+              :key="i"
-              >
+              :title="i"
-                <a-input v-model:value="modalState.from.epstpl" allow-clear>
+              style="width: 16.5%"
-                </a-input>
+              :min="0"
-              </a-tooltip>
+              :max="99"
-            </a-form-item>
+              v-model:value="modalState.from.apnContext[i]"
-          </a-col>
+            ></a-input-number>
-
+          </a-input-group>
-          <a-col :lg="12" :md="12" :xs="24">
+        </a-form-item>
-            <a-form-item label="4G EPS Flag" name="epsFlag">
-              <a-tooltip :title="t('views.neUser.sub.epsFlagTip')">
-                <a-select v-model:value="modalState.from.epsFlag">
-                  <a-select-option value="1">Enable</a-select-option>
-                  <a-select-option value="0">Disable</a-select-option>
-                </a-select>
-              </a-tooltip>
-            </a-form-item>
-          </a-col>
-        </a-row>
 
         <a-form-item
           label="4G EPS ODB"
           name="epsOdb"
           v-bind="modalStateFrom.validateInfos.epsOdb"
         >
-          <a-tooltip :title="t('views.neUser.sub.epsOdbTip')">
+          <a-tooltip
+            :title="t('views.neUser.sub.epsOdbTip')"
+            placement="topLeft"
+          >
             <a-select
               v-model:value="modalState.from.epsOdb"
               mode="multiple"
@@ -1369,7 +1504,10 @@ onMounted(() => {
         </a-form-item>
 
         <a-form-item label="4G HPLMN ODB" name="hplmnOdb">
-          <a-tooltip :title="t('views.neUser.sub.hplmnOdbTip')">
+          <a-tooltip
+            :title="t('views.neUser.sub.hplmnOdbTip')"
+            placement="topLeft"
+          >
             <a-select
               v-model:value="modalState.from.hplmnOdb"
               mode="multiple"
@@ -1382,7 +1520,7 @@ onMounted(() => {
         </a-form-item>
 
         <a-form-item label="4G Access Restriction Data" name="ard">
-          <a-tooltip :title="t('views.neUser.sub.ardTip')">
+          <a-tooltip :title="t('views.neUser.sub.ardTip')" placement="topLeft">
             <a-select
               v-model:value="modalState.from.ard"
               mode="multiple"
@@ -1417,13 +1555,16 @@ onMounted(() => {
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.neUser.auth.num')"
+              :label="t('views.neUser.sub.numAdd')"
               name="num"
               v-bind="modalStateBatchFrom.validateInfos.num"
             >
               <a-input-number
                 v-model:value="modalState.BatchForm.num"
                 style="width: 100%"
+                :min="1"
+                :max="100"
+                placeholder="<=100"
               ></a-input-number>
             </a-form-item>
           </a-col>
@@ -1439,7 +1580,10 @@ onMounted(() => {
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
-                      {{ t('views.neUser.auth.imsiTip') }}
+                      {{ t('views.neUser.sub.imsiTip') }}<br />
+                      {{ t('views.neUser.sub.imsiTip1') }}<br />
+                      {{ t('views.neUser.sub.imsiTip2') }}<br />
+                      {{ t('views.neUser.sub.imsiTip3') }}
                     </template>
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
@@ -1453,11 +1597,15 @@ onMounted(() => {
               name="msisdn"
               v-bind="modalStateBatchFrom.validateInfos.msisdn"
             >
-              <a-input v-model:value="modalState.BatchForm.msisdn" allow-clear>
+              <a-input
+                v-model:value="modalState.BatchForm.msisdn"
+                allow-clear
+                max
+              >
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
-                      {{ t('views.neUser.sub.msisdnTip', { msg: '32' }) }}
+                      {{ t('views.neUser.sub.msisdnTip', { num: '32' }) }}
                     </template>
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
@@ -1471,8 +1619,24 @@ onMounted(() => {
 
         <a-row :gutter="16">
           <a-col :lg="24" :md="24" :xs="24">
-            <a-form-item label="5G Subscribed UE AMBR Template" name="ambr">
+            <a-form-item
-              <a-input v-model:value="modalState.BatchForm.ambr" allow-clear>
+              label="5G Subscribed UE AMBR Template"
+              name="ambr"
+              v-bind="modalStateBatchFrom.validateInfos.ambr"
+            >
+              <a-input
+                v-model:value="modalState.BatchForm.ambr"
+                allow-clear
+                :maxlength="16"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.sub.inputTip', { num: '16' }) }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
               </a-input>
             </a-form-item>
           </a-col>
@@ -1482,7 +1646,19 @@ onMounted(() => {
               name="nssai"
               v-bind="modalStateBatchFrom.validateInfos.nssai"
             >
-              <a-input v-model:value="modalState.BatchForm.nssai" allow-clear>
+              <a-input
+                v-model:value="modalState.BatchForm.nssai"
+                allow-clear
+                :maxlength="16"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.sub.inputTip', { num: '16' }) }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
               </a-input>
             </a-form-item>
           </a-col>
@@ -1494,11 +1670,15 @@ onMounted(() => {
               label="5G Subscribed SMF Selection Data Template"
               name="smfSel"
             >
-              <a-input v-model:value="modalState.BatchForm.smfSel" allow-clear>
+              <a-input
+                v-model:value="modalState.BatchForm.smfSel"
+                allow-clear
+                :maxlength="16"
+              >
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
-                      {{ t('views.neUser.sub.msisdnTip', { msg: '16' }) }}
+                      {{ t('views.neUser.sub.inputTip', { num: '16' }) }}
                     </template>
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
@@ -1506,9 +1686,12 @@ onMounted(() => {
               </a-input>
             </a-form-item>
           </a-col>
-
           <a-col :lg="24" :md="24" :xs="24">
-            <a-form-item label="5G Forbidden Areas Template" name="arfb">
+            <a-form-item
+              label="5G Forbidden Areas Template"
+              name="arfb"
+              :maxlength="16"
+            >
               <a-input v-model:value="modalState.BatchForm.arfb" allow-clear>
                 <template #prefix>
                   <a-tooltip placement="topLeft">
@@ -1529,7 +1712,11 @@ onMounted(() => {
               label="5G Service Area Restriction Template"
               name="sar"
             >
-              <a-input v-model:value="modalState.BatchForm.sar" allow-clear>
+              <a-input
+                v-model:value="modalState.BatchForm.sar"
+                allow-clear
+                :maxlength="16"
+              >
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
@@ -1541,22 +1728,15 @@ onMounted(() => {
               </a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="24" :md="24" :xs="24">
-            <a-form-item label="5G MICO Mode" name="mico">
-              <a-tooltip :title="t('views.neUser.sub.micoTip')">
-                <a-select value="1">
-                  <a-select-option value="1">Enable</a-select-option>
-                  <a-select-option value="0">Disable</a-select-option>
-                </a-select>
-              </a-tooltip>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item label="5G RFSP Index" name="rfsp">
-              <a-input value="1" allow-clear>
+              <a-input-number
+                v-model:value="modalState.BatchForm.rfsp"
+                style="width: 100%"
+                :min="0"
+                :max="127"
+                placeholder="0 ~ 127"
+              >
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
@@ -1565,46 +1745,149 @@ onMounted(() => {
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
                 </template>
-              </a-input>
+              </a-input-number>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="24" :md="24" :xs="24">
+            <a-form-item
+              label="5G MICO Mode"
+              name="mico"
+              :help="t('views.neUser.sub.micoTip')"
+            >
+              <a-select value="1">
+                <a-select-option value="1">
+                  {{ t('views.neUser.sub.enable') }}
+                </a-select-option>
+                <a-select-option value="0">
+                  {{ t('views.neUser.sub.disable') }}
+                </a-select-option>
+              </a-select>
             </a-form-item>
           </a-col>
 
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item label="5G UE Usage Type" name="ueType">
-              <a-input value="1" allow-clear> </a-input>
+              <a-input-number
+                v-model:value="modalState.BatchForm.ueType"
+                style="width: 100%"
+                :min="0"
+                :max="127"
+                placeholder="0 ~ 127"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.sub.ueTypeTip') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input-number>
             </a-form-item>
           </a-col>
         </a-row>
 
-        <a-form-item
+        <a-row :gutter="16">
-          label="Subscribed SM Data"
+          <a-col :lg="24" :md="24" :xs="24">
-          name="smData"
+            <a-form-item
-          v-bind="modalStateBatchFrom.validateInfos.smData"
+              label="Subscribed SM Data"
-        >
+              name="smData"
-          <a-input v-model:value="modalState.BatchForm.smData" allow-clear>
+              v-bind="modalStateBatchFrom.validateInfos.smData"
-            <template #prefix>
+            >
-              <a-tooltip placement="topLeft">
+              <a-input
-                <template #title>
+                v-model:value="modalState.BatchForm.smData"
-                  {{ t('views.neUser.sub.msisdnTip', { msg: '128' }) }}
+                allow-clear
+                :maxlength="128"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.sub.inputTip', { num: '128' }) }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
                 </template>
-                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              </a-input>
-              </a-tooltip>
+            </a-form-item>
-            </template>
+          </a-col>
-          </a-input>
+        </a-row>
-        </a-form-item>
 
         <a-divider orientation="left">4G</a-divider>
 
-        <a-form-item
+        <a-row :gutter="16">
-          label="4G Static IP"
+          <a-col :lg="12" :md="12" :xs="24">
-          name="staticIp"
+            <a-form-item
-          v-bind="modalStateBatchFrom.validateInfos.staticIp"
+              label="4G EPS Flag"
-        >
+              name="epsFlag"
-          <a-input v-model:value="modalState.BatchForm.staticIp" allow-clear>
+              :help="t('views.neUser.sub.epsFlagTip')"
+            >
+              <a-select v-model:value="modalState.BatchForm.epsFlag">
+                <a-select-option value="1">
+                  {{ t('views.neUser.sub.enable') }}
+                </a-select-option>
+                <a-select-option value="0">
+                  {{ t('views.neUser.sub.disable') }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="4G EPS User Template Name"
+              name="epstpl"
+              v-bind="modalStateFrom.validateInfos.epstpl"
+            >
+              <a-input
+                v-model:value="modalState.BatchForm.epstpl"
+                allow-clear
+                :maxlength="16"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.sub.inputTip', { num: '16' }) }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="24" :md="24" :xs="24">
+            <a-form-item
+              label="4G Static IP"
+              v-bind="modalStateFrom.validateInfos.staticIp"
+              name="staticIp"
+            >
+              <a-input
+                v-model:value="modalState.BatchForm.staticIp"
+                allow-clear
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.neUser.sub.staticIpTip') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item label="4G Context ID" name="contextId">
+          <a-input v-model:value="modalState.BatchForm.contextId" allow-clear>
             <template #prefix>
               <a-tooltip placement="topLeft">
                 <template #title>
-                  {{ t('views.neUser.sub.staticIpTip') }}
+                  {{ t('views.neUser.sub.contextIdTip') }}
                 </template>
                 <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
               </a-tooltip>
@@ -1612,45 +1895,38 @@ onMounted(() => {
           </a-input>
         </a-form-item>
 
-        <a-form-item label="4G Context ID" name="contextId">
+        <a-form-item
-          <a-tooltip :title="t('views.neUser.sub.contextIdTip')">
+          label="4G APN Context List"
-            <a-input v-model:value="modalState.BatchForm.contextId" allow-clear>
+          name="apnContext"
-            </a-input>
+          :help="t('views.neUser.sub.apnContextTip')"
-          </a-tooltip>
+        >
+          <a-input-group compact>
+            <a-input-number
+              v-for="(_, i) in modalState.BatchForm.apnContext"
+              :key="i"
+              :title="i"
+              style="width: 16.5%"
+              :min="0"
+              :max="99"
+              v-model:value="modalState.BatchForm.apnContext[i]"
+            ></a-input-number>
+          </a-input-group>
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-form-item
-          <a-col :lg="12" :md="12" :xs="24">
+          label="4G EPS ODB"
-            <a-form-item label="4G EPS User Template Name" name="epstpl">
+          name="epsOdb"
-              <a-tooltip
+          v-bind="modalStateFrom.validateInfos.epsOdb"
-                :title="t('views.neUser.sub.msisdnTip', { msg: '16' })"
+        >
-              >
+          <a-tooltip
-                <a-input
+            :title="t('views.neUser.sub.epsOdbTip')"
-                  v-model:value="modalState.BatchForm.epstpl"
+            placement="topLeft"
-                  allow-clear
+          >
-                >
-                </a-input>
-              </a-tooltip>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="4G EPS Flag" name="epsFlag">
-              <a-tooltip :title="t('views.neUser.sub.epsFlagTip')">
-                <a-select v-model:value="modalState.BatchForm.epsFlag">
-                  <a-select-option value="1">Enable</a-select-option>
-                  <a-select-option value="0">Disable</a-select-option>
-                </a-select>
-              </a-tooltip>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-form-item label="4G EPS ODB" name="epsOdb">
-          <a-tooltip :title="t('views.neUser.sub.epsOdbTip')">
             <a-select
               v-model:value="modalState.BatchForm.epsOdb"
               mode="multiple"
               style="width: 100%"
+              placeholder="Please select"
               :options="modalStateFromOption.odbJson"
               @change=""
             >
@@ -1659,7 +1935,10 @@ onMounted(() => {
         </a-form-item>
 
         <a-form-item label="4G HPLMN ODB" name="hplmnOdb">
-          <a-tooltip :title="t('views.neUser.sub.hplmnOdbTip')">
+          <a-tooltip
+            :title="t('views.neUser.sub.hplmnOdbTip')"
+            placement="topLeft"
+          >
             <a-select
               v-model:value="modalState.BatchForm.hplmnOdb"
               mode="multiple"
@@ -1672,7 +1951,7 @@ onMounted(() => {
         </a-form-item>
 
         <a-form-item label="4G Access Restriction Data" name="ard">
-          <a-tooltip :title="t('views.neUser.sub.ardTip')">
+          <a-tooltip :title="t('views.neUser.sub.ardTip')" placement="topLeft">
             <a-select
               v-model:value="modalState.BatchForm.ard"
               mode="multiple"
@@ -1714,7 +1993,10 @@ onMounted(() => {
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
-                      {{ t('views.neUser.auth.imsiTip') }}
+                      {{ t('views.neUser.sub.imsiTip') }}<br />
+                      {{ t('views.neUser.sub.imsiTip1') }}<br />
+                      {{ t('views.neUser.sub.imsiTip2') }}<br />
+                      {{ t('views.neUser.sub.imsiTip3') }}
                     </template>
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
@@ -1724,13 +2006,16 @@ onMounted(() => {
           </a-col>
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
-              :label="t('views.neUser.sub.num')"
+              :label="t('views.neUser.sub.numDel')"
               name="num"
               v-bind="modalStateBatchDelFrom.validateInfos.num"
             >
               <a-input-number
                 v-model:value="modalState.BatchDelForm.num"
                 style="width: 100%"
+                :min="1"
+                :max="100"
+                placeholder="<=100"
               ></a-input-number>
             </a-form-item>
           </a-col>