pref: 网元软件多上传选择弹窗组件

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

@@ -276,7 +276,7 @@ onMounted(() => {});
             <template #icon>
               <UploadOutlined />
             </template>
-            Upload
+            {{ t('views.ne.neSoftware.upload') }}
           </a-button>
         </a-upload>
       </a-form-item>

src/views/ne/neSoftware/components/UploadMoreFile.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, watch } from 'vue';
-import { message, Form, Upload } from 'ant-design-vue/lib';
+import { message, Form, Upload, notification } from 'ant-design-vue/lib';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
@@ -15,6 +15,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  /**网元类型，指定上传 */
+  neType: {
+    type: String,
+  },
 });
 
 /**对话框对象信息状态类型 */
@@ -28,7 +32,7 @@ type ModalStateType = {
     neType: string;
     name: string;
     path: string;
-    status: 'done' | 'uploading';
+    status: 'done' | 'uploading' | 'error';
     uid: string;
     version: string;
     description: string;
@@ -54,6 +58,13 @@ let modalState: ModalStateType = reactive({
  */
 function fnModalOk() {
   if (modalState.confirmLoading) return;
+  if (modalState.uploadFiles.length < 1) {
+    message.warning({
+      content: t('views.ne.neSoftware.uploadNotFile'),
+      duration: 3,
+    });
+    return;
+  }
   // 处理上传文件过滤
   const uploadFiles = toRaw(modalState.uploadFiles);
   const from = toRaw(modalState.from);
@@ -127,29 +138,46 @@ function fnBeforeUploadFile(file: FileType) {
     neType = fileName.substring(0, neTypeIndex).toUpperCase();
   }
   if (!NE_TYPE_LIST.includes(neType)) {
-    message.error(fileName + ' 未解析出对应的网元类型', 3);
+    notification.warning({
+      message: fileName,
+      description: t('views.ne.neSoftware.fileCheckType'),
+    });
     return Upload.LIST_IGNORE;
   }
-  // 根据给定的软件名取版本号 ims-r2.2312.x-ub22.deb
+  // 根据给定的软件名取版本号 amf-r2.2404.xx-ub22.deb
   let version = '';
   const matches = fileName.match(/([0-9.]+[0-9x]+)/);
   if (matches) {
     version = matches[0];
   } else {
-    message.error(fileName + ' 未解析出对应的版本号', 3);
+    notification.warning({
+      message: fileName,
+      description: t('views.ne.neSoftware.fileCheckVer'),
+    });
     return Upload.LIST_IGNORE;
   }
 
-  // 批量文件信息
+  // 非单网元上传
-  const hasItem = modalState.from.find(
+  if (!props.neType) {
-    item =>
+    // 多文件上传时检查是否有同类型网元包
-      item.name === fileName &&
+    const hasItem = modalState.from.find(item => item.neType === neType);
-      item.neType === neType &&
+    if (hasItem) {
-      item.version === version
+      notification.warning({
-  );
+        message: fileName,
-  if (hasItem) {
+        description: t('views.ne.neSoftware.fileTypeExists'),
-    message.error(`The same file already exists ${fileName}`, 3);
+      });
-    return Upload.LIST_IGNORE;
+      return Upload.LIST_IGNORE;
+    }
+  } else {
+    if (props.neType !== neType) {
+      notification.warning({
+        message: fileName,
+        description: t('views.ne.neSoftware.fileTypeNotEq', {
+          txt: props.neType,
+        }),
+      });
+      return Upload.LIST_IGNORE;
+    }
   }
 
   modalState.from.push({
@@ -185,6 +213,7 @@ function fnUploadFile(up: UploadRequestOption) {
       fromItem.status = 'done';
       fromItem.path = res.data.fileName;
     } else {
+      fromItem.status = 'error';
       message.error(res.msg, 3);
     }
   });
@@ -195,7 +224,7 @@ watch(
   () => props.visible,
   val => {
     if (val) {
-      modalState.title = 'Upload More Software (TODO: 并发时 dpkg LOCK 改为队列等待安装)';
+      modalState.title = t('views.ne.neSoftware.uploadBatch');
       modalState.visibleByMoreFile = true;
     }
   }
@@ -222,38 +251,108 @@ onMounted(() => {});
       :label-col="{ span: 6 }"
       :labelWrap="true"
     >
-      <a-form-item
+      <template v-if="props.neType">
-        :label="`Upload File (Max: ${NE_TYPE_LIST.length})`"
+        <a-form-item :label="t('views.ne.common.neType')" name="neType">
-        name="file"
+          <a-tag color="processing">
-        help="仅支持文件名称解析如：网元类型-版本号-操作系统.文件格式"
+            {{ props.neType }}
-      >
+          </a-tag>
-        <a-upload
+        </a-form-item>
-          name="file"
-          v-model:file-list="modalState.uploadFiles"
-          accept=".rpm,.deb"
-          list-type="text"
-          :multiple="true"
-          :max-count="NE_TYPE_LIST.length"
-          :show-upload-list="false"
-          :before-upload="fnBeforeUploadFile"
-          :custom-request="fnUploadFile"
-          :disabled="modalState.confirmLoading"
-        >
-          <a-button type="primary">
-            <template #icon>
-              <UploadOutlined />
-            </template>
-            Upload
-          </a-button>
-        </a-upload>
-      </a-form-item>
 
-      <div :key="item.uid" v-for="item in modalState.from">
+        <a-form-item
-        {{ item.neType }} - {{ item.name }} - {{ item.version }} -
+          :label="t('views.ne.neSoftware.path')"
-        {{ item.status }}
+          name="file"
-      </div>
+          :help="t('views.ne.neSoftware.uploadFileName')"
+        >
+          <a-upload
+            name="file"
+            v-model:file-list="modalState.uploadFiles"
+            accept=".rpm,.deb"
+            list-type="text"
+            :max-count="1"
+            :show-upload-list="{
+              showPreviewIcon: false,
+              showRemoveIcon: false,
+              showDownloadIcon: false,
+            }"
+            :before-upload="fnBeforeUploadFile"
+            :custom-request="fnUploadFile"
+            :disabled="modalState.confirmLoading"
+          >
+            <a-button type="primary">
+              <template #icon>
+                <UploadOutlined />
+              </template>
+              {{ t('views.ne.neSoftware.upload') }}
+            </a-button>
+          </a-upload>
+        </a-form-item>
+      </template>
+
+      <template v-else>
+        <a-form-item :label="t('common.description')">
+          {{
+            t('views.ne.neSoftware.uploadBatchMax', {
+              txt: NE_TYPE_LIST.length,
+            })
+          }}
+          <br />
+          {{ t('views.ne.neSoftware.uploadFileName') }}
+        </a-form-item>
+        <a-form-item :label="t('views.ne.neSoftware.path')" name="file">
+          <a-upload
+            name="file"
+            v-model:file-list="modalState.uploadFiles"
+            accept=".rpm,.deb"
+            list-type="text"
+            :multiple="true"
+            :max-count="NE_TYPE_LIST.length"
+            :show-upload-list="false"
+            :before-upload="fnBeforeUploadFile"
+            :custom-request="fnUploadFile"
+            :disabled="modalState.confirmLoading"
+          >
+            <a-button type="primary">
+              <template #icon>
+                <UploadOutlined />
+              </template>
+              {{ t('views.ne.neSoftware.upload') }}
+            </a-button>
+          </a-upload>
+        </a-form-item>
+
+        <div class="moreFile">
+          <p :key="item.uid" v-for="item in modalState.from">
+            <template v-if="item.status === 'done'">
+              <a-alert
+                :message="`${item.neType}-${item.version}`"
+                type="success"
+                show-icon
+              />
+            </template>
+            <template v-if="item.status === 'uploading'">
+              <a-alert
+                :message="`${item.neType}-${item.version}`"
+                type="info"
+                show-icon
+              />
+            </template>
+            <template v-if="item.status === 'error'">
+              <a-alert
+                :message="`${item.neType}-${item.version}`"
+                type="error"
+                show-icon
+              />
+            </template>
+          </p>
+        </div>
+      </template>
     </a-form>
   </a-modal>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.moreFile {
+  max-height: 300px;
+  overflow-y: auto;
+}
+</style>