feat: 开站网元公告参数配置表单填写

src/views/system/quick-start/components/ConfigNeInfoPara5G.vue

@@ -3,6 +3,7 @@ import { Modal, message } from 'ant-design-vue/lib';
 import { onMounted, reactive, toRaw } from 'vue';
 import { fnToStepName } from '../hooks/useStep';
 import useI18n from '@/hooks/useI18n';
+import { savePara5GFile } from '@/api/ne/neInfo';
 const { t } = useI18n();
 
 /**对象信息信息状态类型 */
@@ -56,6 +57,27 @@ let state: StateType = reactive({
   confirmLoading: false,
 });
 
+/**保存信息 */
+function fnSave() {
+  if (state.confirmLoading) return;
+  state.confirmLoading = true;
+  savePara5GFile({
+    fileType: 'yaml',
+    content: toRaw(state.from),
+    syncNe: state.sync ? state.syncNe : [],
+  })
+    .then(res => {
+      if (state.sync) {
+        state.syncMsg = res.msg;
+      } else {
+        message.success('Save Success');
+      }
+    })
+    .finally(() => {
+      state.confirmLoading = false;
+    });
+}
+
 /**返回上一步 */
 function fnStepPrev() {
   Modal.confirm({
@@ -86,46 +108,208 @@ function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
     <h2>网元公共参数设置</h2>
 
     <a-form
-      name="syncNeModal"
+      name="para5GFileeFrom"
       layout="horizontal"
-      :label-col="{ span: 5 }"
+      :label-col="{ span: 6 }"
       :label-wrap="true"
     >
-      <a-form-item label="Sync To NE" name="sync">
-        <a-switch
-          :checked-children="t('common.switch.open')"
-          :un-checked-children="t('common.switch.shut')"
-          v-model:checked="state.sync"
-          :disabled="state.confirmLoading"
-        ></a-switch>
-      </a-form-item>
-      <a-form-item label="Select NE" name="syncNe" v-if="state.sync">
-        <a-select
-          v-model:value="state.syncNe"
-          mode="multiple"
-          :placeholder="t('common.selectPlease')"
-          :max-tag-count="3"
-          :options="state.neSelectOtions"
-        >
-          <template #maxTagPlaceholder="omittedValues">
-            <span>+ {{ omittedValues.length }} ...</span>
-          </template>
-        </a-select>
-      </a-form-item>
-      <a-form-item label="Sync Msg" name="syncMsg" v-if="state.syncMsg">
-        <a-textarea
-          :disabled="true"
-          :value="state.syncMsg"
-          :auto-size="{ minRows: 2, maxRows: 8 }"
-          style="background-color: transparent; color: rgba(0, 0, 0, 0.85)"
-        />
-      </a-form-item>
+      <a-divider orientation="left">Basic Data </a-divider>
+      <a-row :gutter="16">
+        <a-col :lg="24" :md="24" :xs="24">
+          <a-form-item
+            label="oamEnable"
+            name="oamEnable"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
+            <a-switch
+              :checked-children="t('common.switch.open')"
+              :un-checked-children="t('common.switch.shut')"
+              v-model:checked="state.from.basic.oamEnable"
+            ></a-switch>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="24" :md="24" :xs="24">
+          <a-form-item
+            label="snmpEnable"
+            name="snmpEnable"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
+            <a-switch
+              :checked-children="t('common.switch.open')"
+              :un-checked-children="t('common.switch.shut')"
+              v-model:checked="state.from.basic.snmpEnable"
+            ></a-switch>
+          </a-form-item>
+        </a-col>
+
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item label="dnn_data" name="dnn_data">
+            <a-input
+              v-model:value="state.from.basic.dnn_data"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="50"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item label="dnn_ims" name="dnn_ims">
+            <a-input
+              v-model:value="state.from.basic.dnn_ims"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="50"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item label="snssai.sd" name="snssai.sd">
+            <a-input
+              v-model:value="state.from.basic.snssai.sd"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="50"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item label="snssai.sst" name="snssai.sst">
+            <a-input
+              v-model:value="state.from.basic.snssai.sst"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="50"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item label="plmnId.mcc" name="plmnId.mcc">
+            <a-input
+              v-model:value="state.from.basic.plmnId.mcc"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="50"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item label="plmnId.mnc" name="plmnId.mnc">
+            <a-input
+              v-model:value="state.from.basic.plmnId.mnc"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="50"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+
+        <a-col :lg="24" :md="24" :xs="24">
+          <a-form-item
+            label="tac"
+            name="tac"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
+            <a-input-number
+              v-model:value="state.from.basic.tac"
+              :min="1"
+              :max="65535"
+              placeholder="1-65535"
+            ></a-input-number>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-divider orientation="left">External Data </a-divider>
+      <a-row :gutter="16">
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item label="amfn2_ip" name="amfn2_ip">
+            <a-input
+              v-model:value="state.from.external.amfn2_ip"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="50"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item label="ue_pool" name="ue_pool">
+            <a-input
+              v-model:value="state.from.external.ue_pool"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="50"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item label="upfn3_gw" name="upfn3_gw">
+            <a-input
+              v-model:value="state.from.external.upfn3_gw"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="50"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item label="upfn3_ip" name="upfn3_ip">
+            <a-input
+              v-model:value="state.from.external.upfn3_ip"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="50"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item label="upfn6_gw" name="upfn6_gw">
+            <a-input
+              v-model:value="state.from.external.upfn6_gw"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="50"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item label="upfn6_ip" name="upfn6_ip">
+            <a-input
+              v-model:value="state.from.external.upfn6_ip"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="50"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
 
     <div>
       <a-space direction="horizontal" :size="18">
         <a-button @click="fnStepPrev()"> 上一步 </a-button>
-
+        <a-button
+          type="primary"
+          :loading="state.confirmLoading"
+          @click="fnSave()"
+        >
+          保存信息
+        </a-button>
         <a-button type="dashed" @click="fnStepNext('ConfigNeInfoPara5G')">
           下一步
         </a-button>