feat: 网元公共参数页面同步操作改弹出窗显示操作信息

src/views/ne/neConfPara5G/index.vue

@@ -8,24 +8,29 @@ import { getPara5GFilee, savePara5GFile } from '@/api/ne/neInfo';
 import useNeInfoStore from '@/store/modules/neinfo';
 const { t } = useI18n();
 
-/**对话框对象信息状态类型 */
+/**对象信息信息状态类型 */
-type ModalStateType = {
+type StateType = {
+  /**保存选择同步到网元窗 */
+  visible: boolean;
   /**网元选择 */
   neSelectOtions: any[];
   /**同步到网元 */
   sync: boolean;
   syncNe: string[];
+  syncMsg: string;
   /**表单数据 */
   from: Record<string, any>;
   /**确定按钮 loading */
   confirmLoading: boolean;
 };
 
-/**对话框对象信息状态 */
+/**对象信息状态 */
-let modalState: ModalStateType = reactive({
+let state: StateType = reactive({
+  visible: false,
   neSelectOtions: [],
   sync: false,
   syncNe: [],
+  syncMsg: '',
   from: {
     basic: {
       dnn_data: 'internet',
@@ -54,47 +59,51 @@ let modalState: ModalStateType = reactive({
   confirmLoading: false,
 });
 
-/**获取文件数据*/
+/**对话框弹出确认执行函数*/
-function fnGetData() {
+function fnModalOk() {
-  if (modalState.confirmLoading) return;
+  if (state.confirmLoading) return;
-  modalState.confirmLoading = true;
+  state.confirmLoading = true;
-  getPara5GFilee('yaml')
+  savePara5GFile({
+    fileType: 'yaml',
+    content: toRaw(state.from),
+    syncNe: state.sync ? state.syncNe : [],
+  })
     .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
+      if (state.sync) {
-        Object.assign(modalState.from, res.data);
+        state.syncMsg = res.msg;
       } else {
-        message.error({
+        message.success('Save Success');
-          content: res.msg,
-          duration: 3,
-        });
       }
     })
     .finally(() => {
-      modalState.confirmLoading = false;
+      state.confirmLoading = false;
     });
 }
 
+/**对话框弹出关闭执行函数*/
+function fnModalCancel() {
+  state.visible = false;
+  state.sync = false;
+  state.syncNe = [];
+}
+
 /**保存文件数据*/
 function fnSaveData() {
-  if (modalState.confirmLoading) return;
+  state.visible = true;
-  modalState.confirmLoading = true;
+}
-  savePara5GFile({
+
-    fileType: 'yaml',
+/**获取文件数据*/
-    content: toRaw(modalState.from),
+function fnGetData() {
-    syncNe: modalState.sync ? modalState.syncNe : [],
+  if (state.confirmLoading) return;
-  })
+  state.confirmLoading = true;
+  getPara5GFilee('yaml')
     .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
+      if (typeof res.data === 'object') {
-        message.success('Save complete!');
+        Object.assign(state.from, res.data);
-      } else {
-        message.error({
-          content: t('common.operateErr'),
-          duration: 3,
-        });
       }
     })
     .finally(() => {
-      modalState.confirmLoading = false;
+      state.confirmLoading = false;
     });
 }
 
@@ -104,8 +113,8 @@ onMounted(() => {
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
         for (const row of res.data) {
-          modalState.neSelectOtions.push({
+          state.neSelectOtions.push({
-            label: `${row.neType} : ${row.ip}`,
+            label: `[${row.neType} ${row.neId}] ${row.neName}`,
             value: `${row.neType}@${row.neId}`,
           });
         }
@@ -127,39 +136,14 @@ onMounted(() => {
   <PageContainer>
     <a-card :bordered="false">
       <!-- 插槽-卡片左侧侧 -->
-      <template #title>
+      <template #title> </template>
-        <a-form layout="inline">
-          <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="modalState.sync"
-              :disabled="modalState.confirmLoading"
-            ></a-switch>
-          </a-form-item>
-          <a-form-item label="NE Select" name="syncNe" v-if="modalState.sync">
-            <a-select
-              v-model:value="modalState.syncNe"
-              mode="multiple"
-              style="width: 480px"
-              :placeholder="t('common.selectPlease')"
-              :max-tag-count="2"
-              :options="modalState.neSelectOtions"
-            >
-              <template #maxTagPlaceholder="omittedValues">
-                <span>+ {{ omittedValues.length }} ...</span>
-              </template>
-            </a-select>
-          </a-form-item>
-        </a-form>
-      </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
         <a-space :size="8" align="center">
           <a-button
             type="default"
-            :disabled="modalState.confirmLoading"
+            :disabled="state.confirmLoading"
             @click.prevent="fnGetData()"
           >
             <template #icon><ReloadOutlined /></template>
@@ -167,9 +151,10 @@ onMounted(() => {
           </a-button>
           <a-button
             type="primary"
-            :loading="modalState.confirmLoading"
+            :loading="state.confirmLoading"
             @click="fnSaveData()"
           >
+            <template #icon><SaveOutlined /></template>
             Save
           </a-button>
         </a-space>
@@ -183,10 +168,39 @@ onMounted(() => {
       >
         <a-divider orientation="left">Basic Data </a-divider>
         <a-row :gutter="16">
-          <a-col :lg="6" :md="12" :xs="24">
+          <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="modalState.from.basic.dnn_data"
+                v-model:value="state.from.basic.dnn_data"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -194,10 +208,10 @@ onMounted(() => {
               </a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="dnn_ims" name="dnn_ims">
               <a-input
-                v-model:value="modalState.from.basic.dnn_ims"
+                v-model:value="state.from.basic.dnn_ims"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -205,52 +219,10 @@ onMounted(() => {
               </a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="oamEnable" name="oamEnable">
-              <a-switch
-                :checked-children="t('common.switch.open')"
-                :un-checked-children="t('common.switch.shut')"
-                v-model:checked="modalState.from.basic.oamEnable"
-              ></a-switch>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item label="snmpEnable" name="snmpEnable">
-              <a-switch
-                :checked-children="t('common.switch.open')"
-                :un-checked-children="t('common.switch.shut')"
-                v-model:checked="modalState.from.basic.snmpEnable"
-              ></a-switch>
-            </a-form-item>
-          </a-col>
-
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item label="plmnId.mcc" name="plmnId.mcc">
-              <a-input
-                v-model:value="modalState.from.basic.plmnId.mcc"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item label="plmnId.mnc" name="plmnId.mnc">
-              <a-input
-                v-model:value="modalState.from.basic.plmnId.mnc"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :lg="6" :md="12" :xs="24">
             <a-form-item label="snssai.sd" name="snssai.sd">
               <a-input
-                v-model:value="modalState.from.basic.snssai.sd"
+                v-model:value="state.from.basic.snssai.sd"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -258,10 +230,10 @@ onMounted(() => {
               </a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="snssai.sst" name="snssai.sst">
               <a-input
-                v-model:value="modalState.from.basic.snssai.sst"
+                v-model:value="state.from.basic.snssai.sst"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -270,10 +242,38 @@ onMounted(() => {
             </a-form-item>
           </a-col>
 
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="tac" name="tac">
+            <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="modalState.from.basic.tac"
+                v-model:value="state.from.basic.tac"
                 :min="1"
                 :max="65535"
                 placeholder="1-65535"
@@ -284,10 +284,10 @@ onMounted(() => {
 
         <a-divider orientation="left">External Data </a-divider>
         <a-row :gutter="16">
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="amfn2_ip" name="amfn2_ip">
               <a-input
-                v-model:value="modalState.from.external.amfn2_ip"
+                v-model:value="state.from.external.amfn2_ip"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -295,10 +295,10 @@ onMounted(() => {
               </a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="ue_pool" name="ue_pool">
               <a-input
-                v-model:value="modalState.from.external.ue_pool"
+                v-model:value="state.from.external.ue_pool"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -306,10 +306,10 @@ onMounted(() => {
               </a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="upfn3_gw" name="upfn3_gw">
               <a-input
-                v-model:value="modalState.from.external.upfn3_gw"
+                v-model:value="state.from.external.upfn3_gw"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -317,10 +317,10 @@ onMounted(() => {
               </a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="upfn3_ip" name="upfn3_ip">
               <a-input
-                v-model:value="modalState.from.external.upfn3_ip"
+                v-model:value="state.from.external.upfn3_ip"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -328,10 +328,10 @@ onMounted(() => {
               </a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="upfn6_gw" name="upfn6_gw">
               <a-input
-                v-model:value="modalState.from.external.upfn6_gw"
+                v-model:value="state.from.external.upfn6_gw"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -339,10 +339,10 @@ onMounted(() => {
               </a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="upfn6_ip" name="upfn6_ip">
               <a-input
-                v-model:value="modalState.from.external.upfn6_ip"
+                v-model:value="state.from.external.upfn6_ip"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -353,6 +353,55 @@ onMounted(() => {
         </a-row>
       </a-form>
     </a-card>
+
+    <!-- 保存选择同步网元 -->
+    <a-modal
+      width="500px"
+      :keyboard="false"
+      :mask-closable="false"
+      :visible="state.visible"
+      title="保存信息"
+      :confirm-loading="state.confirmLoading"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    >
+      <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>
+    </a-modal>
   </PageContainer>
 </template>