feat: 软件包多文件上传

src/views/ne/neSoftware/index.vue

@@ -13,10 +13,14 @@ import { parseDateToStr } from '@/utils/date-utils';
 import { downloadFile } from '@/api/tool/file';
 import { saveAs } from 'file-saver';
 const { t } = useI18n();
+
 // 异步加载组件
 const EditModal = defineAsyncComponent(
   () => import('./components/EditModal.vue')
 );
+const UploadMoreFile = defineAsyncComponent(
+  () => import('./components/UploadMoreFile.vue')
+);
 
 /**网元参数 */
 let neOtions = ref<Record<string, any>[]>([]);
@@ -55,8 +59,6 @@ type TabeStateType = {
   loading: boolean;
   /**紧凑型 */
   size: SizeType;
-  /**斑马纹 */
-  striped: boolean;
   /**搜索栏 */
   seached: boolean;
   /**记录数据 */
@@ -67,7 +69,6 @@ type TabeStateType = {
 let tableState: TabeStateType = reactive({
   loading: false,
   size: 'middle',
-  striped: false,
   seached: false,
   data: [],
 });
@@ -161,11 +162,6 @@ function fnTableSize({ key }: MenuInfo) {
   tableState.size = key as SizeType;
 }
 
-/**表格斑马纹 */
-function fnTableStriped(_record: unknown, index: number): any {
-  return tableState.striped && index % 2 === 1 ? 'table-striped' : undefined;
-}
-
 /**查询列表, pageNum初始页数 */
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
@@ -199,6 +195,8 @@ type ModalStateType = {
   visibleByEdit: boolean;
   /**新增框或修改框ID */
   editId: string;
+  /**多文件上传 */
+  visibleByMoreFile: boolean;
   /**确定按钮 loading */
   confirmLoading: boolean;
 };
@@ -207,6 +205,7 @@ type ModalStateType = {
 let modalState: ModalStateType = reactive({
   visibleByEdit: false,
   editId: '',
+  visibleByMoreFile: false,
   confirmLoading: false,
 });
 
@@ -238,6 +237,7 @@ function fnModalEditOk() {
 function fnModalEditCancel() {
   modalState.editId = '';
   modalState.visibleByEdit = false;
+  modalState.visibleByMoreFile = false;
 }
 
 /**删除软件包 */
@@ -393,10 +393,19 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
-          <template #icon><PlusOutlined /></template>
-          {{ t('common.addText') }}
-        </a-button>
+        <a-space :size="8" align="center">
+          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+            <template #icon><PlusOutlined /></template>
+            {{ t('common.addText') }}
+          </a-button>
+          <a-button
+            type="primary"
+            @click.prevent="() => (modalState.visibleByMoreFile = !modalState.visibleByMoreFile)"
+          >
+            <template #icon><PlusOutlined /></template>
+            More File Upload
+          </a-button>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
@@ -411,15 +420,6 @@ onMounted(() => {
               size="small"
             />
           </a-tooltip>
-          <a-tooltip>
-            <template #title>{{ t('common.zebra') }}</template>
-            <a-switch
-              v-model:checked="tableState.striped"
-              :checked-children="t('common.switch.show')"
-              :un-checked-children="t('common.switch.hide')"
-              size="small"
-            />
-          </a-tooltip>
           <a-tooltip>
             <template #title>{{ t('common.reloadText') }}</template>
             <a-button type="text" @click.prevent="fnGetList()">
@@ -461,7 +461,6 @@ onMounted(() => {
         :loading="tableState.loading"
         :data-source="tableState.data"
         :size="tableState.size"
-        :row-class-name="fnTableStriped"
         :pagination="tablePagination"
         :scroll="{ y: 'calc(100vh - 480px)' }"
         @resizeColumn="(w:number, col:any) => (col.width = w)"
@@ -529,6 +528,13 @@ onMounted(() => {
       @ok="fnModalEditOk"
       @cancel="fnModalEditCancel"
     ></EditModal>
+
+    <!-- 新增多文件上传框 -->
+    <UploadMoreFile
+      v-model:visible="modalState.visibleByMoreFile"
+      @ok="fnModalEditOk"
+      @cancel="fnModalEditCancel"
+    ></UploadMoreFile>
   </PageContainer>
 </template>
 
@@ -536,8 +542,4 @@ onMounted(() => {
 .table :deep(.ant-pagination) {
   padding: 0 24px;
 }
-
-.table :deep(.table-striped) td {
-  background-color: #fafafa;
-}
 </style>