--新增签约用户

src/api/neUser/sub.ts

@@ -1,4 +1,5 @@
 import { request } from '@/plugins/http-fetch';
+import { toRaw } from 'vue';
 
 /**
  * 签约列表导出
@@ -86,6 +87,27 @@ export function updateSub(data: Record<string, any>) {
  * @returns object
  */
 export function addSub(neID: string, data: Record<string, any>) {
+  console.log(data);
+  let ardArr = [0, 0, 0, 0, 0, 0, 0, 0];
+  let hplmnArr = [0, 0, 0, 0, 0, 0, 0, 0];
+  let odbArr = [0, 0, 0, 0, 0, 0, 0, 0];
+
+  data.ard.forEach((item: any) => {
+    ardArr[item] = 1;
+  });
+
+  data.hplmnOdb.forEach((item: any) => {
+    hplmnArr[item] = 1;
+  });
+
+  data.epsOdb.forEach((item: any) => {
+    odbArr[item] = 1;
+  });
+
+  data.epsOdb = '' + parseInt(odbArr.join(''), 2);
+  data.hplmnOdb = '' + parseInt(hplmnArr.join(''), 2);
+  data.ard = '' + parseInt(ardArr.join(''), 2);
+  data.cn = '3';
   return request({
     url: `/udmUserManage/v1/sub/${neID}`,
     method: 'post',

src/views/neUser/sub/index.vue

@@ -199,20 +199,20 @@ let modalState: ModalStateType = reactive({
   from: {
     msisdn: '',
     imsi: '',
-    ambr: '',
+    ambr: 'def_ambr',
-    nssai: '',
+    nssai: 'def_nssai',
     rat: '',
-    arfb: '',
+    arfb: 'def_arfb',
-    sar: '',
+    sar: 'def_sar',
     cn: '',
     smData: '',
-    smfSel: '',
+    smfSel: 'def_snssai',
     epsDat: '',
     neId: '',
-    epsFlag: '',
+    epsFlag: '1',
-    epsOdb: '',
+    epsOdb: [],
-    hplmnOdb: '',
+    hplmnOdb: [],
-    ard: '',
+    ard: [],
     epstpl: '',
     contextId: '',
     apnContext: '',
@@ -222,6 +222,53 @@ let modalState: ModalStateType = reactive({
   loadDataLoading: false,
 });
 
+/**表单中多选的OPTION */
+const modalStateFromOption = reactive({
+  ardJson: [
+    { label: 'UTRAN Not Allowed', value: 0 },
+    { label: 'GERAN Not Allowed', value: 1 },
+    { label: 'GAN Not Allowed', value: 2 },
+    { label: 'I HSPA Evolution Not Allowed', value: 3 },
+    { label: 'WB E-UTRAN Not Allowed', value: 4 },
+    { label: 'HO To Non-3GPP Access Not Allowed', value: 5 },
+    { label: 'NB IoT Not Allowed', value: 6 },
+    { label: 'Enhanced Coverage Not Allowed', value: 7 },
+  ],
+  odbJson: [
+    {
+      label:
+        'Barring of all outgoing international calls except those directed to the home PLMN country and outgoing inter-zonal calls barred',
+      value: 0,
+    },
+    { label: 'All Packet Oriented Services Barred', value: 1 },
+    { label: 'Roamer Access HPLMN-AP Barred', value: 2 },
+    { label: 'Roamer Access to VPLMN-AP Barred', value: 3 },
+    { label: 'Barring of all outgoing calls', value: 4 },
+    { label: 'Barring of all outgoing international calls', value: 5 },
+    {
+      label:
+        'Barring of all outgoing international calls except those directed to the home PLMN country',
+      value: 6,
+    },
+    { label: 'Barring of outgoing inter-zonal calls', value: 7 },
+    {
+      label:
+        'Barring of all outgoing inter-zonal calls except those directed to the home PLMN country barred',
+      value: 7,
+    },
+  ],
+  hplmnOdb: [
+    { label: 'HPLMN specific barring type 1', value: 0 },
+    { label: 'HPLMN specific barring type 2', value: 1 },
+    { label: 'HPLMN specific barring type 3', value: 2 },
+    { label: 'HPLMN specific barring type 4', value: 3 },
+    { label: 'HPLMN specific barring type 5', value: 4 },
+    { label: 'HPLMN specific barring type 6', value: 5 },
+    { label: 'HPLMN specific barring type 7', value: 6 },
+    { label: 'HPLMN specific barring type 8', value: 7 },
+  ],
+});
+
 /**对话框内表单属性和校验规则 */
 const modalStateFrom = Form.useForm(
   modalState.from,
@@ -525,11 +572,15 @@ onMounted(() => {
             <a-form-item>
               <a-space :size="8">
                 <a-button type="primary" @click.prevent="fnGetList">
-                  <template #icon><SearchOutlined /></template>
+                  <template #icon>
+                    <SearchOutlined />
+                  </template>
                   {{ t('common.search') }}
                 </a-button>
                 <a-button type="default" @click.prevent="fnQueryReset">
-                  <template #icon><ClearOutlined /></template>
+                  <template #icon>
+                    <ClearOutlined />
+                  </template>
                   {{ t('common.reset') }}
                 </a-button>
               </a-space>
@@ -544,7 +595,9 @@ onMounted(() => {
       <template #title>
         <a-space :size="8" align="center">
           <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
-            <template #icon><PlusOutlined /></template>
+            <template #icon>
+              <PlusOutlined />
+            </template>
             {{ t('common.addText') }}
           </a-button>
 
@@ -561,13 +614,17 @@ onMounted(() => {
               :disabled="modalState.loadDataLoading"
               :loading="modalState.loadDataLoading"
             >
-              <template #icon><SyncOutlined /></template>
+              <template #icon>
+                <SyncOutlined />
+              </template>
               {{ t('views.neUser.sub.loadData') }}
             </a-button>
           </a-popconfirm>
 
           <a-button type="dashed" @click.prevent="fnModalImportOpen">
-            <template #icon><ImportOutlined /></template>
+            <template #icon>
+              <ImportOutlined />
+            </template>
             {{ t('views.neUser.sub.import') }}
           </a-button>
 
@@ -580,7 +637,9 @@ onMounted(() => {
             @cancel="fnExportList('csv')"
           >
             <a-button type="dashed">
-              <template #icon><ExportOutlined /></template>
+              <template #icon>
+                <ExportOutlined />
+              </template>
               {{ t('views.neUser.sub.export') }}
             </a-button>
           </a-popconfirm>
@@ -602,14 +661,18 @@ onMounted(() => {
           <a-tooltip>
             <template #title>{{ t('common.reloadText') }}</template>
             <a-button type="text" @click.prevent="fnGetList">
-              <template #icon><ReloadOutlined /></template>
+              <template #icon>
+                <ReloadOutlined />
+              </template>
             </a-button>
           </a-tooltip>
           <a-tooltip>
             <template #title>{{ t('common.sizeText') }}</template>
             <a-dropdown trigger="click">
               <a-button type="text">
-                <template #icon><ColumnHeightOutlined /></template>
+                <template #icon>
+                  <ColumnHeightOutlined />
+                </template>
               </a-button>
               <template #overlay>
                 <a-menu
@@ -652,7 +715,9 @@ onMounted(() => {
                   type="link"
                   @click.prevent="fnModalVisibleByEdit(record.imsi)"
                 >
-                  <template #icon><FormOutlined /></template>
+                  <template #icon>
+                    <FormOutlined />
+                  </template>
                 </a-button>
               </a-tooltip>
               <a-tooltip>
@@ -661,7 +726,9 @@ onMounted(() => {
                   type="link"
                   @click.prevent="fnRecordDelete(record.imsi)"
                 >
-                  <template #icon><DeleteOutlined /></template>
+                  <template #icon>
+                    <DeleteOutlined />
+                  </template>
                 </a-button>
               </a-tooltip>
             </a-space>
@@ -672,7 +739,7 @@ onMounted(() => {
 
     <!-- 新增框或修改框 -->
     <a-modal
-      width="800px"
+      width="1000px"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -684,7 +751,8 @@ onMounted(() => {
       <a-form
         name="modalStateFrom"
         layout="horizontal"
-        :label-col="{ span: 7 }"
+        :label-col="{ span: 7.5 }"
+        :labelWrap="true"
       >
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
@@ -703,7 +771,7 @@ onMounted(() => {
                     <template #title>
                       SUPI=MCC+MNC+MSIN MCC=移动国家号码, 由三位数字组成
                       MNC=移动网络号，由两位数字组成
-                      MSIN=移动客户识别码，采用等长10位数字构成
+                      MSIN=移动客户识别码,采用等长10位数字构成
                     </template>
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
@@ -711,7 +779,7 @@ onMounted(() => {
               </a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
+          <!-- <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               label="cn"
               name="cn"
@@ -723,9 +791,227 @@ onMounted(() => {
                 placeholder="请输入cn"
               ></a-input>
             </a-form-item>
+          </a-col> -->
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="MSISDN"
+              name="msisdn"
+              v-bind="modalStateFrom.validateInfos.msisdn"
+            >
+              <a-input
+                v-model:value="modalState.from.msisdn"
+                allow-clear
+                placeholder="请输入msisdn"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title> 参数最大长度32 </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="12" :md="12" :xs="24">
+            <a-form-item
+              label="5G Subscribed UE AMBR template"
+              name="ambr"
+              v-bind="modalStateFrom.validateInfos.ambr"
+            >
+              <a-input v-model:value="modalState.from.ambr" allow-clear>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="5G Subscribed SNSSAIs template"
+              name="nssai"
+              v-bind="modalStateFrom.validateInfos.nssai"
+            >
+              <a-input v-model:value="modalState.from.nssai" allow-clear>
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="5G UE Usage Type" name="ueType">
+              <a-input value="1" allow-clear> </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="5G Forbidden Areas template" name="arfb">
+              <a-input v-model:value="modalState.from.arfb" allow-clear>
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      限制区域模板,在模板指定的限制区域中,UE 不允许与网络通信
+                    </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="12" :md="12" :xs="24">
+            <a-form-item
+              label="5G Service Area Restriction template"
+              name="sar"
+            >
+              <a-input v-model:value="modalState.from.sar" allow-clear>
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      服务区域限制模板,定义允许的区域,UE
+                      在这些区域中可以和网络通信;定义不允许的区,UE
+                      和网络在这些区域中,不允许发起Service Request 或 SM
+                      信令来获取用户服务
+                    </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="5G RFSP Index" name="rfsp">
+              <a-input value="1" allow-clear>
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      RFSP 索引,在 NG-RAN中,特定RRM配置的索引,参数介于0到127之间
+                    </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="12" :md="12" :xs="24">
+            <a-form-item label="5G MICO mode" name="mico">
+              <a-tooltip title="签约的MICO业务标志位">
+                <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-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="5G Subscribed SMF Selection Data template"
+              name="smfSel"
+            >
+              <a-input v-model:value="modalState.from.smfSel" allow-clear>
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title> 参数最大长度为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="12" :md="12" :xs="24">
+            <a-form-item label="Subscribed SM Data" name="smData">
+              <a-input v-model:value="modalState.from.smData" allow-clear>
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title> 参数最大长度为128 </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="4G EPS flag" name="epsFlag">
+              <a-tooltip title="是否开启4G EPS 服务,0=不开启,1=开启">
+                <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="ODB(Operator-Determined Barring)运营商决定的闭锁,即用户接入EPS网络的业务能力由运营商决定.选中 ---对应服务被允许 未选 --- 对应服务被禁止"
+          >
+            <a-select
+              v-model:value="modalState.from.epsOdb"
+              mode="multiple"
+              style="width: 100%"
+              placeholder="Please select"
+              :options="modalStateFromOption.odbJson"
+              @change=""
+            >
+            </a-select>
+          </a-tooltip>
+        </a-form-item>
+
+        <a-form-item label="4G HPLMN odb" name="hplmnOdb">
+          <a-tooltip
+            title="HPLMN-ODB
+                归属运营商决定的闭锁,即用户接入EPS网络的业务能力由用户归宿运营商决定.选中 --- 对应服务被允许 未选 -- 对应服务被禁止"
+          >
+            <a-select
+              v-model:value="modalState.from.hplmnOdb"
+              mode="multiple"
+              style="width: 100%"
+              placeholder="Please select"
+              :options="modalStateFromOption.hplmnOdb"
+              @change=""
+            >
+            </a-select>
+          </a-tooltip>
+        </a-form-item>
+
+        <a-form-item label="4G Access Restriction Data" name="ard">
+          <a-tooltip
+            title="接入控制标志(Access-Restriction-Data),可用于区分2G/3G/LTE用户,便于为2G/3G/LTE网络共存时,对不同类型用户进行区分服务"
+          >
+            <a-select
+              v-model:value="modalState.from.ard"
+              mode="multiple"
+              style="width: 100%"
+              placeholder="Please select"
+              :options="modalStateFromOption.ardJson"
+              @change=""
+            >
+              <template #suffixIcon>
+                <a-tooltip placement="topLeft">
+                  <template #title>
+                    指定手机用户上网时使用的静态IP地址,为空时表示使用动态IP地址
+                  </template>
+                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                </a-tooltip>
+              </template>
+            </a-select>
+          </a-tooltip>
+        </a-form-item>
+
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
@@ -733,12 +1019,14 @@ onMounted(() => {
               name="epstpl"
               v-bind="modalStateFrom.validateInfos.epstpl"
             >
+              <a-tooltip title="参数最大长度为16">
                 <a-input
                   v-model:value="modalState.from.epstpl"
                   allow-clear
-                placeholder="请输入KI"
+                  placeholder="请输入4G EPS User Template Name"
                 >
                 </a-input>
+              </a-tooltip>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -747,16 +1035,17 @@ onMounted(() => {
               name="contextId"
               v-bind="modalStateFrom.validateInfos.contextId"
             >
+              <a-tooltip title="签约APN 上下文ID,必须从APN Context list 中选择">
                 <a-input
                   v-model:value="modalState.from.contextId"
                   allow-clear
                   placeholder="请输入4G Context ID"
                 >
                 </a-input>
+              </a-tooltip>
             </a-form-item>
           </a-col>
         </a-row>
-
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
@@ -772,7 +1061,7 @@ onMounted(() => {
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
-                      指定手机用户上网时使用的静态IP地址，为空时表示使用动态IP地址
+                      指定手机用户上网时使用的静态IP地址,为空时表示使用动态IP地址
                     </template>
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>