feat: 页面调整组件属性升级

src/views/ne/neInfo/components/OAMModal.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { reactive, toRaw, watch } from 'vue';
-import { message, Form } from 'ant-design-vue/lib';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Form } from 'ant-design-vue/es';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { getOAMFile, saveOAMFile } from '@/api/ne/neInfo';
 const { t } = useI18n();
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
 const props = defineProps({
-  visible: {
+  open: {
     type: Boolean,
     default: false,
   },
@@ -25,7 +26,7 @@ const props = defineProps({
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**是否同步 */
@@ -38,7 +39,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   title: 'OAM Configuration',
   sync: true,
   from: {
@@ -87,7 +88,7 @@ function fnModalVisibleByTypeAndId(neType: string, neId: string) {
           kpiTimer: data.kpiConfig.timer,
         });
         modalState.title = t('views.ne.neInfo.oam.title');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(res.msg, 3);
       }
@@ -142,16 +143,16 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
   emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) {
       if (props.neType && props.neId) {
@@ -166,10 +167,10 @@ watch(
   <ProModal
     :drag="true"
     :destroyOnClose="true"
-    :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
+    :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
     :keyboard="false"
     :mask-closable="false"
-    :visible="modalState.visibleByEdit"
+    :open="modalState.openByEdit"
     :title="modalState.title"
     :confirm-loading="modalState.confirmLoading"
     @ok="fnModalOk"
@@ -196,7 +197,7 @@ watch(
 
       <a-collapse class="collapse" ghost>
         <a-collapse-panel header="OAM">
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.ne.neInfo.oam.oamEnable')"
@@ -239,7 +240,7 @@ watch(
           </a-form-item>
         </a-collapse-panel>
         <a-collapse-panel header="SNMP">
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.ne.neInfo.oam.snmpEnable')"
@@ -271,7 +272,7 @@ watch(
           </a-row>
         </a-collapse-panel>
         <a-collapse-panel header="KPI">
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.ne.neInfo.oam.kpiEnable')"