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

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, watch } from 'vue';
-import { Form, Modal, Upload, message } from 'ant-design-vue/lib';
+import { ProModal } from 'antdv-pro-modal';
+import { Form, Modal, Upload, message } from 'ant-design-vue/es';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import {
@@ -8,16 +9,16 @@ import {
   getNeLicense,
   getNeLicenseByTypeAndID,
 } from '@/api/ne/neLicense';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import { FileType } from 'ant-design-vue/es/upload/interface';
 import { uploadFile } from '@/api/tool/file';
 import { useClipboard } from '@vueuse/core';
 import saveAs from 'file-saver';
 const { copy } = useClipboard({ legacy: true });
 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,
   },
@@ -45,7 +46,7 @@ const props = defineProps({
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -66,7 +67,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   title: '授权文件',
   from: {
     id: '',
@@ -136,12 +137,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);
 }
 
 /**表单上传前检查或转换压缩 */
@@ -227,7 +228,7 @@ function fnModalVisibleById(id: string) {
         modalState.from.licensePath = '';
         modalState.from.reload = props.reload;
         modalState.title = t('views.ne.neLicense.updateTtile');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(res.msg, 3);
       }
@@ -252,7 +253,7 @@ function fnModalVisibleByTypeAndId(neType: string, neId: string) {
         modalState.from.licensePath = '';
         modalState.from.reload = props.reload;
         modalState.title = t('views.ne.neLicense.updateTtile');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(res.msg, 3);
       }
@@ -265,7 +266,7 @@ function fnModalVisibleByTypeAndId(neType: string, neId: string) {
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) {
       if (props.editId) {
@@ -288,7 +289,7 @@ onMounted(() => {});
     :destroyOnClose="true"
     :keyboard="false"
     :mask-closable="false"
-    :visible="modalState.visibleByEdit"
+    :open="modalState.openByEdit"
     :title="modalState.title"
     :confirm-loading="modalState.confirmLoading"
     @ok="fnModalOk"
@@ -301,7 +302,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-col="{ span: 12 }"

src/views/ne/neLicense/components/UploadLicenseFile.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { reactive, onMounted, watch, PropType, h } from 'vue';
-import { message, notification, Upload } from 'ant-design-vue/lib';
-import useI18n from '@/hooks/useI18n';
+import { message, notification, Upload } 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 } from 'ant-design-vue/lib/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import { FileType } from 'ant-design-vue/es/upload/interface';
+import { ProModal } from 'antdv-pro-modal';
 import { uploadFile } from '@/api/tool/file';
 import { changeNeLicense } from '@/api/ne/neLicense';
+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,
   },
@@ -24,7 +25,7 @@ const props = defineProps({
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByUploadFile: boolean;
+  openByUploadFile: boolean;
   /**标题 */
   title: string;
   /**授权文件路径 */
@@ -37,7 +38,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByUploadFile: false,
+  openByUploadFile: false,
   licensePath: '',
   uploadFiles: [],
   title: '授权文件',
@@ -117,12 +118,12 @@ async function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByUploadFile = false;
+  modalState.openByUploadFile = false;
   modalState.confirmLoading = false;
   modalState.licensePath = '';
   modalState.uploadFiles = [];
   emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**表单上传前检查或转换压缩 */
@@ -172,11 +173,11 @@ function fnUploadFile(up: UploadRequestOption) {
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) {
       modalState.title = t('views.ne.neLicense.updateTtile');
-      modalState.visibleByUploadFile = true;
+      modalState.openByUploadFile = true;
     }
   }
 );
@@ -190,7 +191,7 @@ onMounted(() => {});
     :destroyOnClose="true"
     :keyboard="false"
     :mask-closable="false"
-    :visible="modalState.visibleByUploadFile"
+    :open="modalState.openByUploadFile"
     :title="modalState.title"
     :confirm-loading="modalState.confirmLoading"
     :cancel-button-props="{ disabled: modalState.confirmLoading }"