feat: 软件包上传组件

src/views/ne/neVersion/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, toRaw } from 'vue';
+import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { TableColumnsType, message } from 'ant-design-vue/lib';
+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 useNeInfoStore from '@/store/modules/neinfo';
@@ -12,6 +12,11 @@ import { listNeVersion } from '@/api/ne/neVersion';
 import { parseDateToStr } from '@/utils/date-utils';
 const { t } = useI18n();
 
+// 异步加载组件
+const EditModal = defineAsyncComponent(
+  () => import('../neSoftware/components/EditModal.vue')
+);
+
 /**网元参数 */
 let neOtions = ref<Record<string, any>[]>([]);
 
@@ -99,16 +104,16 @@ let tableColumns = ref<TableColumnsType>([
     maxWidth: 200,
   },
   {
-    title: 'preVersion',
+    title: 'Previous Version',
     dataIndex: 'preVersion',
     align: 'left',
-    width: 100,
+    width: 150,
     resizable: true,
-    minWidth: 100,
+    minWidth: 150,
     maxWidth: 200,
   },
   {
-    title: 'newVersion',
+    title: 'New Version',
     dataIndex: 'newVersion',
     align: 'left',
     width: 100,
@@ -208,6 +213,93 @@ function fnGetList(pageNum?: number) {
   });
 }
 
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByEdit: false,
+  confirmLoading: false,
+});
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param noticeId 网元id, 不传为新增
+ */
+function fnModalVisibleByEdit() {
+  modalState.visibleByEdit = true;
+}
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalEditOk() {
+  fnGetList(1);
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalEditCancel() {
+  modalState.visibleByEdit = false;
+}
+
+/**升级到新版本 */
+function fnRecordUpdate(id: string) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: 'Removing software packages?',
+    onOk() {
+      if (modalState.confirmLoading) return;
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      // installNeSoftware({
+      //   software: from,
+      //   preinput: {},
+      //   action: 'install',
+      // })
+      //   .then(res => {
+      //     if (res.code === RESULT_CODE_SUCCESS) {
+      //       installState.setp = 'log';
+      //       installState.setpLog = res.data;
+      //       message.success('软件安装成功', 3);
+      //       // 记录当前步骤状态信息
+      //       stepState.states[stepState.current] = {
+      //         from: from,
+      //         preinput: preinput,
+      //       };
+      //       stepState.stepNext = true;
+      //     } else {
+      //       message.error(res.msg, 3);
+      //     }
+      //   })
+      //   .finally(() => {
+      //     hide();
+      //     installState.confirmLoading = false;
+      //   });
+    },
+  });
+}
+
+/**
+ * 记录更多操作
+ */
+function fnRecordMore(type: string | number, row: Record<string, any>) {
+  if (type === 'download') {
+    return;
+  }
+  if (type === 'delete') {
+    return;
+  }
+}
+
 onMounted(() => {
   // 获取网元网元列表
   useNeInfoStore()
@@ -287,7 +379,12 @@ onMounted(() => {
 
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
-      <template #title> </template>
+      <template #title>
+        <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+          <template #icon><PlusOutlined /></template>
+          Upload Software
+        </a-button>
+      </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
@@ -360,7 +457,13 @@ onMounted(() => {
           <template v-if="column.key === 'id'">
             <a-space :size="8" align="center">
               <a-tooltip>
-                <template #title>{{ t('common.viewText') }}</template>
+                <template #title>Update To Previous version</template>
+                <a-button type="link" @click.prevent="">
+                  <template #icon><ProfileOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip>
+                <template #title>Update To New Version</template>
                 <a-button type="link" @click.prevent="">
                   <template #icon><ProfileOutlined /></template>
                 </a-button>
@@ -370,6 +473,13 @@ onMounted(() => {
         </template>
       </a-table>
     </a-card>
+
+    <!-- 新增框或修改框 -->
+    <EditModal
+      v-model:visible="modalState.visibleByEdit"
+      @ok="fnModalEditOk"
+      @cancel="fnModalEditCancel"
+    ></EditModal>
   </PageContainer>
 </template>