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

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

@@ -1,18 +1,19 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, watch } from 'vue';
-import { message, Form, Modal } from 'ant-design-vue/lib';
-import useI18n from '@/hooks/useI18n';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Form, Modal } from 'ant-design-vue/es';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
 import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
 import { getNeInfo, addNeInfo, updateNeInfo } from '@/api/ne/neInfo';
 import { neHostAuthorizedRSA, testNeHost } from '@/api/ne/neHost';
 import useDictStore from '@/store/modules/dict';
+import useI18n from '@/hooks/useI18n';
 const { getDict } = useDictStore();
 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,
   },
@@ -87,7 +88,7 @@ function fnHostAuthorized(row: Record<string, any>) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -98,7 +99,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   title: '网元',
   from: {
     id: undefined,
@@ -214,7 +215,7 @@ function fnModalVisibleByEdit(editId: string) {
   if (!editId) {
     modalStateFrom.resetFields();
     modalState.title = t('views.ne.neInfo.addTitle');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -225,7 +226,7 @@ function fnModalVisibleByEdit(editId: string) {
       if (res.code === RESULT_CODE_SUCCESS) {
         Object.assign(modalState.from, res.data);
         modalState.title = t('views.ne.neInfo.editTitle');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('common.getInfoFail'), 2);
       }
@@ -274,11 +275,11 @@ 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);
 }
 
 /**表单修改网元类型 */
@@ -341,7 +342,7 @@ function fnNeIPChange(e: any) {
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) fnModalVisibleByEdit(props.editId);
   }
@@ -372,10 +373,10 @@ onMounted(() => {
     :drag="true"
     :width="800"
     :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"
@@ -387,7 +388,7 @@ onMounted(() => {
       :label-col="{ span: 6 }"
       :labelWrap="true"
     >
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.ne.common.neType')"
@@ -409,7 +410,7 @@ onMounted(() => {
                     <template #title>
                       {{ t('views.ne.common.neTypeTip') }}
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -437,7 +438,7 @@ onMounted(() => {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.ne.common.neId')"
@@ -456,7 +457,7 @@ onMounted(() => {
                   <template #title>
                     {{ t('views.ne.common.neIdTip') }}
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                 </a-tooltip>
               </template>
             </a-input>
@@ -479,7 +480,7 @@ onMounted(() => {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.ne.common.ipAddr')"
@@ -500,7 +501,7 @@ onMounted(() => {
                       {{ t('views.ne.common.ipAddrTip') }}
                     </div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                 </a-tooltip>
               </template>
             </a-input>
@@ -525,7 +526,7 @@ onMounted(() => {
                   <template #title>
                     <div>{{ t('views.ne.common.portTip') }}</div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                 </a-tooltip>
               </template>
             </a-input-number>
@@ -553,13 +554,13 @@ onMounted(() => {
                   {{ t('views.ne.common.rmUidTip') }}
                 </div>
               </template>
-              <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
             </a-tooltip>
           </template>
         </a-input>
       </a-form-item>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item :label="t('views.ne.neInfo.neAddress')" name="neAddress">
             <a-input
@@ -573,7 +574,7 @@ onMounted(() => {
                   <template #title>
                     <div>{{ t('views.ne.neInfo.neAddressTip') }}</div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                 </a-tooltip>
               </template>
             </a-input>
@@ -591,7 +592,7 @@ onMounted(() => {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.ne.neInfo.vendorName')"
@@ -649,7 +650,7 @@ onMounted(() => {
               {{ `${host.hostType.toUpperCase()} ${host.port}` }}
             </span>
           </template>
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item :label="t('views.ne.neHost.addr')">
                 <a-input
@@ -662,7 +663,10 @@ onMounted(() => {
               </a-form-item>
             </a-col>
             <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item :label="t('views.ne.neHost.port')" name="port">
+              <a-form-item
+                :label="t('views.ne.neHost.port')"
+                name="neHost.port"
+              >
                 <a-input-number
                   v-model:value="host.port"
                   :min="10"
@@ -690,7 +694,7 @@ onMounted(() => {
             </a-input>
           </a-form-item>
 
-          <a-row :gutter="16" v-if="host.hostType === 'ssh'">
+          <a-row v-if="host.hostType === 'ssh'">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item :label="t('views.ne.neHost.user')">
                 <a-input