签约用户拆分SM Data

src/views/neUser/sub/index.vue

@@ -362,6 +362,32 @@ const modalStateFromOption = reactive({
   ],
 });
 
+//新增时初始SM Data
+const bigRows = ref<any[]>([
+  {
+    id: 0,
+    sst: '',
+    sd: '',
+    smallRows: [
+      {
+        id: 0,
+        dnn: '',
+        smStaticIp: '',
+        msIp: '',
+      },
+      {
+        id: 1,
+        dnn: 'ims',
+        smStaticIp: '',
+        msIp: '',
+      },
+    ],
+  },
+]);
+
+//小数组的index
+let smallRowIndexCounter = 0;
+
 /**
  * 针对修改框的截取每位数值
  * @param num 二进制值: 10001 n:长度有几位
@@ -405,6 +431,7 @@ function fnModalVisibleByEdit(imsi?: string) {
     getSub(neID, imsi)
       .then(res => {
         if (res.code === RESULT_CODE_SUCCESS) {
+          transformFormData(res.data.smData);
           let ardAll = parseInt(res.data.ard).toString(2).padStart(8, '0');
           let hplAll = parseInt(res.data.hplmnOdb).toString(2).padStart(8, '0');
           let odbAll = parseInt(res.data.epsOdb).toString(2).padStart(9, '0');
@@ -475,13 +502,130 @@ const modalStateFrom = Form.useForm(
   })
 );
 
+/**
+ * 封装为SM Data
+ */
+function transformData(data: any) {
+  let transformedData = data.map((item: any) => {
+    if (
+      !item.sst ||
+      !item.sd ||
+      !item.smallRows.every((smallRow: any) => smallRow.dnn)
+    ) {
+      message.error({
+        content: `${t('views.neUser.sub.smDataArrTip')}`,
+        duration: 3,
+      });
+      throw new Error('sst, sd, and all dnn are required fields');
+    }
+
+    let sstSd = item.sst + '-' + item.sd;
+    let smallRowData = item.smallRows
+      .map((smallRow: any) => {
+        let parts = [smallRow.dnn];
+        if (smallRow.smStaticIp) {
+          parts.push(smallRow.smStaticIp);
+        }
+        if (smallRow.msIp) {
+          parts.push(smallRow.msIp);
+        }
+        return parts.join('-');
+      })
+      .join('&');
+
+    return sstSd + '&' + smallRowData;
+  });
+
+  return transformedData;
+}
+
+/**
+ * 拆解SM Data成表单数据
+ */
+function transformFormData(data: any) {
+  let allData = data ? data.split(';') : [];
+  let bigIDFlag = 0;
+  let smallIDFlag = 0;
+
+  let transformedData = allData.map((item: any) => {
+    let json: any = {
+      id: bigIDFlag++,
+      sst: item.split('&')[0].split('-')[0],
+      sd: item.split('&')[0].split('-')[1],
+      smallRows: [],
+    };
+    item
+      .split('&')
+      .slice(1)
+      .forEach((single: any) => {
+        let smallRowJson: any = {
+          id: smallIDFlag++,
+          dnn: single.split('-')[0],
+          smStaticIp: '',
+          msIp: '',
+        };
+        let smStaticIpArr: any = [];
+        single
+          .split('-')
+          .slice(1)
+          .forEach((dnnParts: any) => {
+            if (dnnParts.includes('/') && dnnParts.includes(':')) {
+              //IPV6
+              smStaticIpArr.push(dnnParts);
+            }
+            if (!dnnParts.includes('/') && !dnnParts.includes(':')) {
+              //IPV4
+              smStaticIpArr.push(dnnParts);
+            }
+
+            if (dnnParts.includes('/') && !dnnParts.includes(':')) {
+              //msIp
+              smallRowJson.msIp = dnnParts;
+            }
+          });
+        smallRowJson.smStaticIp = smStaticIpArr.join('-');
+        json.smallRows.push(smallRowJson);
+      });
+    return json;
+  });
+  if (transformedData.length > 0) {
+    bigRows.value = transformedData;
+  } else {
+    bigRows.value = [
+      {
+        id: 0,
+        sst: '',
+        sd: '',
+        smallRows: [
+          {
+            id: 0,
+            dnn: '',
+            smStaticIp: '',
+            msIp: '',
+          },
+          {
+            id: 1,
+            dnn: 'ims',
+            smStaticIp: '',
+            msIp: '',
+          },
+        ],
+      },
+    ];
+  }
+}
 /**
  * 对话框弹出确认执行函数
  * 进行表达规则校验
  */
 function fnModalOk() {
   const from = Object.assign({}, toRaw(modalState.from));
-
+  try {
+    from.smData = transformData(bigRows.value).join(';');
+  } catch (error: any) {
+    console.error(error.message);
+    return false;
+  }
   let validateNames = ['imsi', 'msisdn', 'staticIp'];
 
   if (from.id === '') {
@@ -575,7 +719,12 @@ const modalStateBatchFrom = Form.useForm(
  */
 function fnBatchModalOk() {
   const from = Object.assign({}, toRaw(modalState.BatchForm));
-
+  try {
+    from.smData = transformData(bigRows.value).join(';');
+  } catch (error: any) {
+    console.error(error.message);
+    return false;
+  }
   modalStateBatchFrom
     .validate()
     .then(e => {
@@ -695,6 +844,28 @@ function fnModalCancel() {
   modalState.visibleByEdit = false;
   modalState.visibleByView = false;
   modalStateFrom.resetFields();
+  bigRows.value = [
+    {
+      id: 0,
+      sst: '',
+      sd: '',
+      smallRows: [
+        {
+          id: 0,
+          dnn: '',
+          smStaticIp: '',
+          msIp: '',
+        },
+        {
+          id: 1,
+          dnn: 'ims',
+          smStaticIp: '',
+          msIp: '',
+        },
+      ],
+    },
+  ];
+  smallRowIndexCounter = 0;
 }
 
 /**
@@ -705,6 +876,28 @@ function fnBatchModalCancel() {
   modalState.visibleByBatch = false;
   modalState.visibleByView = false;
   modalStateBatchFrom.resetFields();
+  bigRows.value = [
+    {
+      id: 0,
+      sst: '',
+      sd: '',
+      smallRows: [
+        {
+          id: 0,
+          dnn: '',
+          smStaticIp: '',
+          msIp: '',
+        },
+        {
+          id: 1,
+          dnn: 'ims',
+          smStaticIp: '',
+          msIp: '',
+        },
+      ],
+    },
+  ];
+  smallRowIndexCounter = 0;
 }
 
 /**
@@ -961,6 +1154,41 @@ function fnModalUploadImportUpload(file: File) {
     });
 }
 
+function addSmallRow(bigIndex: any) {
+  const newSmallRow = {
+    id: ++smallRowIndexCounter,
+    dnn: '',
+    smStaticIp: '',
+    msIp: '',
+  };
+  bigRows.value[bigIndex].smallRows.push(newSmallRow);
+}
+
+function addBigRow() {
+  const newBigRow = {
+    id: bigRows.value.length,
+    sst: '',
+    sd: '',
+    smallRows: [
+      {
+        id: 0,
+        dnn: '',
+        smStaticIp: '',
+        msIp: '',
+      },
+    ],
+  };
+  bigRows.value.push(newBigRow);
+}
+
+function delDNN(sonIndex: any, bigIndex: any) {
+  bigRows.value[bigIndex].smallRows.splice(sonIndex, 1);
+}
+
+function delBigRow(bigIndex: any) {
+  bigRows.value.splice(bigIndex, 1);
+}
+
 onMounted(() => {
   // 获取网元网元列表
   useNeInfoStore()
@@ -1284,6 +1512,7 @@ onMounted(() => {
             <a-form-item
               label="IMSI"
               name="imsi"
+              :label-col="{ span: 5 }"
               v-bind="modalStateFrom.validateInfos.imsi"
             >
               <a-input v-model:value="modalState.from.imsi" allow-clear>
@@ -1324,52 +1553,105 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
+        <a-divider orientation="left"
+          >Subscribed SM Data
+          <a-tooltip title="Add SM Data">
+            <a-button
+              shape="circle"
+              @click="addBigRow"
+              style="margin-left: 10px"
+            >
+              <template #icon><plus-outlined /></template>
+            </a-button> </a-tooltip
+        ></a-divider>
+        <!-- 大数组布局 -->
+        <div v-for="(row, index) in bigRows" :key="String(row.id)">
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                label="SST-SD"
+                name="row.sst"
+                :label-col="{ span: 5 }"
+              >
+                <a-input-group>
+                  <a-row :gutter="8">
+                    <a-col :span="10">
+                      <a-input v-model:value="row.sst" />
+                    </a-col>
+                    <span style="margin-top: 5px">-</span>
+                    <a-col :span="12">
+                      <a-input v-model:value="row.sd" />
+                    </a-col>
+                  </a-row>
+                </a-input-group>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-row :gutter="8">
+                <a-col :span="4">
+                  <a-tooltip title="Add DNN">
+                    <a-button shape="circle" @click="addSmallRow(row.id)">
+                      <template #icon><plus-square-outlined /></template>
+                    </a-button>
+                  </a-tooltip>
+                </a-col>
+                <a-col :span="4">
+                  <a-tooltip title="Delete SM Data" v-if="index !== 0">
+                    <a-button danger shape="circle" @click="delBigRow(index)">
+                      <template #icon><minus-outlined /></template>
+                    </a-button>
+                  </a-tooltip>
+                </a-col>
+              </a-row>
+            </a-col>
+          </a-row>
 
-        <a-form-item
-          v-if="!modalState.from.id"
-          label="Subscribed SM Data"
-          :label-col="{ span: 3 }"
-          name="smData"
-          v-bind="modalStateFrom.validateInfos.smData"
-        >
-          <a-input
-            v-model:value="modalState.from.smData"
-            allow-clear
-            :maxlength="128"
+          <!-- 小数组布局 -->
+          <div
+            v-for="(smallRow, smallIndex) in row.smallRows"
+            :key="String(smallRow.id)"
           >
-            <template #prefix>
-              <a-tooltip placement="topLeft">
-                <template #title>
-                  {{ t('views.neUser.sub.smDataTip', { num: '128' }) }}
-                </template>
-                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-              </a-tooltip>
-            </template>
-          </a-input>
-        </a-form-item>
-
-        <a-form-item
-          label="Subscribed SM Data"
-          :label-col="{ span: 3 }"
-          name="smData"
-          v-else
-        >
-          <a-input
-            v-model:value="modalState.from.smData"
-            allow-clear
-            :maxlength="128"
-          >
-            <template #prefix>
-              <a-tooltip placement="topLeft">
-                <template #title>
-                  {{ t('views.neUser.sub.smDataTip', { num: '128' }) }}
-                </template>
-                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-              </a-tooltip>
-            </template>
-          </a-input>
-        </a-form-item>
-
+            <a-row :gutter="16">
+              <a-col :lg="6" :md="7" :xs="24">
+                <a-form-item
+                  label="DNN/APN"
+                  name="dnn"
+                  :label-col="{ span: 10 }"
+                >
+                  <a-input v-model:value="smallRow.dnn" allow-clear></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="8" :md="6" :xs="24">
+                <a-form-item
+                  label="Static IP"
+                  name="smStaticIp"
+                  :label-col="{ span: 5 }"
+                >
+                  <a-input
+                    v-model:value="smallRow.smStaticIp"
+                    allow-clear
+                  ></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="8" :md="8" :xs="24">
+                <a-form-item label="Routing Behind MS IP" name="msIp">
+                  <a-input v-model:value="smallRow.msIp" allow-clear></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="1" :md="1" :xs="24" v-if="smallIndex !== 0">
+                <a-tooltip title="Delete DNN">
+                  <a-button
+                    danger
+                    shape="circle"
+                    @click="delDNN(smallIndex, row.id)"
+                  >
+                    <template #icon><close-square-outlined /></template>
+                  </a-button>
+                </a-tooltip>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
         <a-collapse :bordered="false" ghost>
           <a-collapse-panel key="5G">
             <template #header>
@@ -1735,8 +2017,9 @@ onMounted(() => {
       <a-form
         name="modalStateBatchFrom"
         layout="horizontal"
-        :label-col="{ span: 6 }"
         :labelWrap="true"
+        :label-col="{ span: 6 }"
+
       >
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
@@ -1760,6 +2043,7 @@ onMounted(() => {
             <a-form-item
               label="IMSI"
               name="imsi"
+
               v-bind="modalStateBatchFrom.validateInfos.imsi"
             >
               <a-input v-model:value="modalState.BatchForm.imsi" allow-clear>
@@ -1800,31 +2084,105 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
-          <a-col :lg="24" :md="24" :xs="24">
-            <a-form-item
-              label="Subscribed SM Data"
-              name="smData"
-              :label-col="{ span: 3 }"
-              v-bind="modalStateBatchFrom.validateInfos.smData"
+        <a-divider orientation="left"
+          >Subscribed SM Data
+          <a-tooltip title="Add SM Data">
+            <a-button
+              shape="circle"
+              @click="addBigRow"
+              style="margin-left: 10px"
             >
-              <a-input
-                v-model:value="modalState.BatchForm.smData"
-                allow-clear
-                :maxlength="128"
+              <template #icon><plus-outlined /></template>
+            </a-button> </a-tooltip
+        ></a-divider>
+        <!-- 大数组布局 -->
+        <div v-for="(row, index) in bigRows" :key="String(row.id)">
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                label="SST-SD"
+                name="row.sst"
               >
-                <template #prefix>
-                  <a-tooltip placement="topLeft">
-                    <template #title>
-                      {{ t('views.neUser.sub.smDataTip', { num: '128' }) }}
-                    </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                <a-input-group>
+                  <a-row :gutter="8">
+                    <a-col :span="10">
+                      <a-input v-model:value="row.sst" />
+                    </a-col>
+                    <span style="margin-top: 5px">-</span>
+                    <a-col :span="12">
+                      <a-input v-model:value="row.sd" />
+                    </a-col>
+                  </a-row>
+                </a-input-group>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-row :gutter="8">
+                <a-col :span="4">
+                  <a-tooltip title="Add DNN">
+                    <a-button shape="circle" @click="addSmallRow(row.id)">
+                      <template #icon><plus-square-outlined /></template>
+                    </a-button>
                   </a-tooltip>
-                </template>
-              </a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
+                </a-col>
+                <a-col :span="4">
+                  <a-tooltip title="Delete SM Data" v-if="index !== 0">
+                    <a-button danger shape="circle" @click="delBigRow(index)">
+                      <template #icon><minus-outlined /></template>
+                    </a-button>
+                  </a-tooltip>
+                </a-col>
+              </a-row>
+            </a-col>
+          </a-row>
+
+          <!-- 小数组布局 -->
+          <div
+            v-for="(smallRow, smallIndex) in row.smallRows"
+            :key="String(smallRow.id)"
+          >
+          <a-row :gutter="16">
+              <a-col :lg="6" :md="7" :xs="24">
+                <a-form-item
+                  label="DNN/APN"
+                  name="dnn"
+                  :label-col="{ span: 12 }"
+                >
+                  <a-input v-model:value="smallRow.dnn" allow-clear></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="8" :md="6" :xs="24">
+                <a-form-item
+                  label="Static IP"
+                  name="smStaticIp"
+                  :label-col="{ span: 5 }"
+                >
+                  <a-input
+                    v-model:value="smallRow.smStaticIp"
+                    allow-clear
+                  ></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="8" :md="8" :xs="24">
+                <a-form-item label="Routing Behind MS IP" name="msIp">
+                  <a-input v-model:value="smallRow.msIp" allow-clear></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="1" :md="1" :xs="24" v-if="smallIndex !== 0">
+                <a-tooltip title="Delete DNN">
+                  <a-button
+                    danger
+                    shape="circle"
+                    @click="delDNN(smallIndex, row.id)"
+                  >
+                    <template #icon><close-square-outlined /></template>
+                  </a-button>
+                </a-tooltip>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+
         <a-collapse :bordered="false" ghost>
           <a-collapse-panel key="5G">
             <template #header>