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

2024-10-28 11:02:39 +08:00
parent 670225a655
commit da0d49d306
125 changed files with 1775 additions and 3464 deletions
--- a/src/views/ne/neSoftware/components/EditModal.vue
+++ b/src/views/ne/neSoftware/components/EditModal.vue
@@ -1,21 +1,22 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, watch } from 'vue';
-import { message, Form, Upload, notification } from 'ant-design-vue/lib';
-import useI18n from '@/hooks/useI18n';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Form, Upload, notification } from 'ant-design-vue/es';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { NE_EXPAND_LIST, NE_TYPE_LIST } from '@/constants/ne-constants';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
 import {
  addNeSoftware,
  getNeSoftware,
  updateNeSoftware,
 } from '@/api/ne/neSoftware';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { FileType } from 'ant-design-vue/es/upload/interface';
 import { uploadFileChunk } 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,
  },
@@ -28,7 +29,7 @@ const props = defineProps({
 /**对话框对象信息状态类型 */
 type ModalStateType = {
  /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
  /**标题 */
  title: string;
  /**表单数据 */
@@ -50,7 +51,7 @@ type ModalStateType = {

 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
  title: '软件包文件',
  from: {
    id: '',
@@ -149,13 +150,13 @@ function fnModalOk() {
 * 进行表达规则校验
 */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
  modalState.confirmLoading = false;
  modalStateFrom.resetFields();
  modalState.uploadFiles = [];
  modalState.uploadFilesDep = [];
  emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }

 /**表单上传前检查或转换压缩 */
@@ -316,7 +317,7 @@ function fnModalVisibleByEdit(id?: string) {
        if (res.code === RESULT_CODE_SUCCESS) {
          Object.assign(modalState.from, res.data);
          modalState.title = t('views.ne.neSoftware.uploadTitle');
-          modalState.visibleByEdit = true;
+          modalState.openByEdit = true;
        } else {
          message.error(res.msg, 3);
        }
@@ -329,12 +330,12 @@ function fnModalVisibleByEdit(id?: string) {
    return;
  }
  modalState.title = t('views.ne.neSoftware.uploadTitle');
-  modalState.visibleByEdit = true;
+  modalState.openByEdit = true;
 }

 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
  val => {
    if (val) fnModalVisibleByEdit(props.editId);
  }
@@ -350,7 +351,7 @@ onMounted(() => {});
    :destroyOnClose="true"
    :keyboard="false"
    :mask-closable="false"
-    :visible="modalState.visibleByEdit"
+    :open="modalState.openByEdit"
    :title="modalState.title"
    :confirm-loading="modalState.confirmLoading"
    @ok="fnModalOk"
--- a/src/views/ne/neSoftware/components/UploadMoreFile.vue
+++ b/src/views/ne/neSoftware/components/UploadMoreFile.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, watch } from 'vue';
-import { message, Upload, notification } from 'ant-design-vue/lib';
-import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import type { FileType, UploadFile } from 'ant-design-vue/lib/upload/interface';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Upload, notification } from 'ant-design-vue/es';
+import type { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import type { FileType, UploadFile } from 'ant-design-vue/es/upload/interface';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { NE_TYPE_LIST, NE_EXPAND_LIST } from '@/constants/ne-constants';
 import { addNeSoftware } from '@/api/ne/neSoftware';
 import { uploadFileChunk } from '@/api/tool/file';
 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,
  },
@@ -27,7 +28,7 @@ const NE_TYPE_EXP = NE_EXPAND_LIST.concat(NE_TYPE_LIST);
 /**对话框对象信息状态类型 */
 type ModalStateType = {
  /**新增框或修改框是否显示 */
-  visibleByMoreFile: boolean;
+  openByMoreFile: boolean;
  /**标题 */
  title: string;
  /**表单数据 */
@@ -48,7 +49,7 @@ type ModalStateType = {

 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByMoreFile: false,
+  openByMoreFile: false,
  title: '软件包文件',
  from: [],
  confirmLoading: false,
@@ -154,13 +155,13 @@ async function fnModalOk() {
 * 进行表达规则校验
 */
 function fnModalCancel() {
-  modalState.visibleByMoreFile = false;
+  modalState.openByMoreFile = false;
  modalState.confirmLoading = false;
  modalState.from = [];
  modalState.uploadFiles = [];
  modalState.uploadFilesDep = [];
  emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }

 /**表单上传前检查或转换压缩 */
@@ -354,11 +355,11 @@ function fnUploadFileDep(up: UploadRequestOption) {

 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
  val => {
    if (val) {
      modalState.title = t('views.ne.neSoftware.uploadTitle');
-      modalState.visibleByMoreFile = true;
+      modalState.openByMoreFile = true;
    }
  }
 );
@@ -372,7 +373,7 @@ onMounted(() => {});
    :width="800"
    :keyboard="false"
    :mask-closable="false"
-    :visible="modalState.visibleByMoreFile"
+    :open="modalState.openByMoreFile"
    :title="modalState.title"
    :confirm-loading="modalState.confirmLoading"
    @ok="fnModalOk"
--- a/src/views/ne/neSoftware/index.vue
+++ b/src/views/ne/neSoftware/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal, TableColumnsType, message } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import { Modal, TableColumnsType, message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
@@ -213,20 +213,20 @@ function fnGetList(pageNum?: number) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
  /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
  /**新增框或修改框ID */
  editId: string;
  /**多文件上传 */
-  visibleByMoreFile: boolean;
+  openByMoreFile: boolean;
  /**确定按钮 loading */
  confirmLoading: boolean;
 };

 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
  editId: '',
-  visibleByMoreFile: false,
+  openByMoreFile: false,
  confirmLoading: false,
 });

@@ -240,7 +240,7 @@ function fnModalVisibleByEdit(id?: string) {
  } else {
    modalState.editId = id;
  }
-  modalState.visibleByEdit = !modalState.visibleByEdit;
+  modalState.openByEdit = !modalState.openByEdit;
 }

 /**
@@ -257,8 +257,8 @@ function fnModalEditOk() {
 */
 function fnModalEditCancel() {
  modalState.editId = '';
-  modalState.visibleByEdit = false;
-  modalState.visibleByMoreFile = false;
+  modalState.openByEdit = false;
+  modalState.openByMoreFile = false;
 }

 /**删除软件包 */
@@ -429,8 +429,7 @@ onMounted(() => {
            type="primary"
            :disabled="tableState.selectedRowKeys.length > 1"
            @click.prevent="
-              () =>
-                (modalState.visibleByMoreFile = !modalState.visibleByMoreFile)
+              () => (modalState.openByMoreFile = !modalState.openByMoreFile)
            "
          >
            <template #icon><UploadOutlined /></template>
@@ -576,7 +575,7 @@ onMounted(() => {

    <!-- 新增框或修改框 -->
    <EditModal
-      v-model:visible="modalState.visibleByEdit"
+      v-model:open="modalState.openByEdit"
      :edit-id="modalState.editId"
      @ok="fnModalEditOk"
      @cancel="fnModalEditCancel"
@@ -584,7 +583,7 @@ onMounted(() => {

    <!-- 新增多文件上传框 -->
    <UploadMoreFile
-      v-model:visible="modalState.visibleByMoreFile"
+      v-model:open="modalState.openByMoreFile"
      :ne-type="tableState.selectedRowOne.neType"
      @ok="fnModalEditOk"
      @cancel="fnModalEditCancel"