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

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { reactive, toRaw, watch } from 'vue';
-import { Form, Modal, Upload, message, notification } from 'ant-design-vue/lib';
-import useI18n from '@/hooks/useI18n';
+import { ProModal } from 'antdv-pro-modal';
+import { Form, Modal, Upload, message, notification } from 'ant-design-vue/es';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import { FileType, UploadFile } from 'ant-design-vue/lib/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import { FileType, UploadFile } from 'ant-design-vue/es/upload/interface';
 import {
   exportNeConfigBackup,
   importNeConfigBackup,
@@ -12,10 +12,11 @@ import {
 } from '@/api/ne/neConfigBackup';
 import saveAs from 'file-saver';
 import { uploadFile } from '@/api/tool/file';
+import useI18n from '@/hooks/useI18n';
 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,
   },
@@ -79,7 +80,7 @@ function typeChange(value: any) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -97,7 +98,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   title: '配置文件导入',
   from: {
     neType: '',
@@ -163,12 +164,12 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
   modalState.uploadFiles = [];
   emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**表单上传前删除 */
@@ -224,14 +225,14 @@ function fnUploadFile(up: UploadRequestOption) {
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) {
       if (props.neType && props.neId) {
         modalState.from.neType = props.neType;
         modalState.from.neId = props.neId;
         modalState.title = t('views.ne.neInfo.backConf.title');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       }
     }
   }
@@ -283,14 +284,14 @@ defineExpose({
     :width="800"
     :keyboard="false"
     :mask-closable="false"
-    :visible="modalState.visibleByEdit"
+    :open="modalState.openByEdit"
     :title="modalState.title"
     :confirm-loading="modalState.confirmLoading"
     @ok="fnModalOk"
     @cancel="fnModalCancel"
   >
     <a-form name="modalStateFrom" layout="horizontal" :label-col="{ span: 6 }">
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item :label="t('views.ne.common.neType')" name="neType">
             {{ modalState.from.neType }}