From 1fab9b3d97c03e37c86cc3126d3ba0ddce591687 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Wed, 24 Apr 2024 15:30:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=80=E7=AB=99=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=9A=84=E9=83=A8=E5=88=86=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ConfigNeInfoPara5G.vue         | 133 +++++++++++++++++-
 .../components/SoftwareLicense.vue            |   2 +-
 src/views/system/quick-build/hooks/useStep.ts |   4 +
 src/views/system/quick-build/index.vue        |   2 +-
 4 files changed, 132 insertions(+), 9 deletions(-)

diff --git a/src/views/system/quick-build/components/ConfigNeInfoPara5G.vue b/src/views/system/quick-build/components/ConfigNeInfoPara5G.vue
index 1a07016c..098ba814 100644
--- a/src/views/system/quick-build/components/ConfigNeInfoPara5G.vue
+++ b/src/views/system/quick-build/components/ConfigNeInfoPara5G.vue
@@ -1,17 +1,136 @@
 <script setup lang="ts">
+import { Modal, message } from 'ant-design-vue/lib';
+import { onMounted, reactive, toRaw } from 'vue';
 import { fnToStepName } from '../hooks/useStep';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+
+/**对象信息信息状态类型 */
+type StateType = {
+  /**保存选择同步到网元窗 */
+  visible: boolean;
+  /**网元选择 */
+  neSelectOtions: any[];
+  /**同步到网元 */
+  sync: boolean;
+  syncNe: string[];
+  syncMsg: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对象信息状态 */
+let state: StateType = reactive({
+  visible: false,
+  neSelectOtions: [],
+  sync: false,
+  syncNe: [],
+  syncMsg: '',
+  from: {
+    basic: {
+      dnn_data: 'internet',
+      dnn_ims: 'ims',
+      oamEnable: true,
+      plmnId: {
+        mcc: '001',
+        mnc: '01',
+      },
+      snmpEnable: false,
+      snssai: {
+        sd: '000001',
+        sst: '1',
+      },
+      tac: 4388,
+    },
+    external: {
+      amfn2_ip: '192.168.8.120',
+      ue_pool: '10.2.1.0/24',
+      upfn3_gw: '192.168.1.1',
+      upfn3_ip: '192.168.8.190/24',
+      upfn6_gw: '192.168.1.1',
+      upfn6_ip: '192.168.8.191/24',
+    },
+  },
+  confirmLoading: false,
+});
+
+/**返回上一步 */
+function fnStepPrev() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: '确认要放弃当前变更返回上一步吗？',
+    onOk() {
+      fnToStepName('ConfigNeInfo');
+    },
+  });
+}
+
+/**下一步操作 */
+function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
+  if (stepName === 'ConfigNeInfoPara5G') {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: '确认要下一步进行各网元安装吗？',
+      onOk() {
+        fnToStepName('SoftwareInstall');
+      },
+    });
+  }
+}
 </script>
 
 <template>
   <div>
-    <div>网元公共参数设置</div>
+    <h2>网元公共参数设置</h2>
 
-    <a-button style="margin-left: 8px" @click="fnToStepName('ConfigNeInfo')">
-      上一步
-    </a-button>
-    <a-button type="primary" @click="fnToStepName('SoftwareInstall')">
-      下一步
-    </a-button>
+    <a-form
+      name="syncNeModal"
+      layout="horizontal"
+      :label-col="{ span: 5 }"
+      :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-form>
+
+    <div>
+      <a-space direction="horizontal" :size="18">
+        <a-button @click="fnStepPrev()"> 上一步 </a-button>
+
+        <a-button type="dashed" @click="fnStepNext('ConfigNeInfoPara5G')">
+          下一步
+        </a-button>
+      </a-space>
+    </div>
   </div>
 </template>
 
diff --git a/src/views/system/quick-build/components/SoftwareLicense.vue b/src/views/system/quick-build/components/SoftwareLicense.vue
index c59d0783..9c10a2f8 100644
--- a/src/views/system/quick-build/components/SoftwareLicense.vue
+++ b/src/views/system/quick-build/components/SoftwareLicense.vue
@@ -8,7 +8,7 @@ import { stepState, fnToStepName, fnStepPrev } from '../hooks/useStep';
     <a-button style="margin-left: 8px" @click="fnToStepName('SoftwareInstall')">
       上一步
     </a-button>
-    <a-button type="primary" @click="fnToStepName('End')"> 跳过 </a-button>
+    <a-button type="primary" @click="fnToStepName('Done')"> 结束 </a-button>
   </div>
 </template>
 
diff --git a/src/views/system/quick-build/hooks/useStep.ts b/src/views/system/quick-build/hooks/useStep.ts
index 5e872c0b..7f313c20 100644
--- a/src/views/system/quick-build/hooks/useStep.ts
+++ b/src/views/system/quick-build/hooks/useStep.ts
@@ -21,6 +21,7 @@ type StepStateType = {
 /**步骤信息状态 */
 export const stepState: StepStateType = reactive({
   stepName: 'Start',
+
   current: 0,
   steps: [
     {
@@ -54,11 +55,14 @@ export const stepState: StepStateType = reactive({
 
 /**步骤信息状态复位 */
 export function fnRestStepState() {
+  stepState.stepName = 'Start';
+
   stepState.current = 0;
   stepState.stepNext = false;
   stepState.states = [];
 }
 
+/**跳转步骤组件 */
 export function fnToStepName(stepName: string) {
   stepState.stepName = stepName;
 }
diff --git a/src/views/system/quick-build/index.vue b/src/views/system/quick-build/index.vue
index 621cec47..6788f4d9 100644
--- a/src/views/system/quick-build/index.vue
+++ b/src/views/system/quick-build/index.vue
@@ -67,7 +67,6 @@ onMounted(() => {
   position: relative;
   width: 100%;
   min-height: 100%;
-  padding-top: 164px;
 
   // background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
 
@@ -82,5 +81,6 @@ onMounted(() => {
   min-width: 360px;
   margin: 0 auto;
   border-radius: 6px;
+  top: 4vh;
 }
 </style>