From 6bc10babbad4d6d9ff894e07ae3406b37aba4cb5 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Fri, 12 Apr 2024 17:43:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BD=AF=E4=BB=B6=E5=8C=85=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ne/neSoftware/components/EditModal.vue    | 328 +++++++++++++++
 src/views/ne/neSoftware/index.vue             | 373 +++++-------------
 src/views/ne/neVersion/index.vue              | 126 +++++-
 3 files changed, 542 insertions(+), 285 deletions(-)
 create mode 100644 src/views/ne/neSoftware/components/EditModal.vue

diff --git a/src/views/ne/neSoftware/components/EditModal.vue b/src/views/ne/neSoftware/components/EditModal.vue
new file mode 100644
index 00000000..d9e250ba
--- /dev/null
+++ b/src/views/ne/neSoftware/components/EditModal.vue
@@ -0,0 +1,328 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw, watch } from 'vue';
+import { message, Form, Upload } 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';
+import useDictStore from '@/store/modules/dict';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import {
+  addNeSoftware,
+  getNeSoftware,
+  updateNeSoftware,
+} from '@/api/ne/neSoftware';
+import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { uploadFileChunk } from '@/api/tool/file';
+const { t } = useI18n();
+const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  editId: {
+    type: String,
+    default: '',
+  },
+});
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: {
+    id: string;
+    neType: string;
+    name: string;
+    path: string;
+    version: string;
+    description: string;
+  };
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**上传文件 */
+  uploadFiles: any[];
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByEdit: false,
+  title: '软件包文件',
+  from: {
+    id: '',
+    neType: '',
+    name: '',
+    path: '',
+    version: '',
+    description: '',
+  },
+  confirmLoading: false,
+  uploadFiles: [],
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    neType: [
+      {
+        required: true,
+        min: 1,
+        max: 32,
+        message: t('views.configManage.softwareManage.neTypePlease'),
+      },
+    ],
+    version: [
+      {
+        required: true,
+        min: 1,
+        max: 64,
+        message: t('views.configManage.softwareManage.versionPlease'),
+      },
+    ],
+    path: [
+      {
+        required: true,
+        message: t('views.configManage.softwareManage.updateFilePlease'),
+      },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  if (modalState.confirmLoading) return;
+  modalStateFrom
+    .validate()
+    .then(e => {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      const from = toRaw(modalState.from);
+      const software = from.id ? updateNeSoftware(from) : addNeSoftware(from);
+      software.then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('common.operateOk'),
+            duration: 3,
+          });
+          emit('ok');
+          fnModalCancel();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            duration: 3,
+          });
+        }
+        hide();
+        modalState.confirmLoading = false;
+      });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalState.confirmLoading = false;
+  modalStateFrom.resetFields();
+  modalState.uploadFiles = [];
+  emit('cancel');
+  emit('update:visible', false);
+}
+
+/**表单上传前检查或转换压缩 */
+function fnBeforeUploadFile(file: FileType) {
+  if (modalState.confirmLoading) return false;
+  const fileName = file.name;
+  const suff = fileName.substring(fileName.lastIndexOf('.'));
+  if (!['.deb', '.rpm'].includes(suff)) {
+    message.error(
+      t('views.configManage.softwareManage.onlyAble', {
+        fileText: '(.deb、.rpm)',
+      }),
+      3
+    );
+    return Upload.LIST_IGNORE;
+  }
+  // 根据给定的软件名取版本号 ims-r2.2312.x-ub22.deb
+  const matches = fileName.match(/([0-9.]+[0-9x]+)/);
+  if (matches) {
+    modalState.from.version = matches[0];
+  }
+  const neTypeIndex = fileName.indexOf('-');
+  if (neTypeIndex !== -1) {
+    modalState.from.neType = fileName.substring(0, neTypeIndex).toUpperCase();
+  }
+  return true;
+}
+
+/**表单上传文件 */
+function fnUploadFile(up: UploadRequestOption) {
+  // 发送请求
+  const hide = message.loading(t('common.loading'), 0);
+  modalState.confirmLoading = true;
+  uploadFileChunk(up.file as File, 5, 'software')
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success('上传成功', 3);
+        // 改为完成状态
+        const file = modalState.uploadFiles[0];
+        file.percent = 100;
+        file.status = 'done';
+        // 预置到表单
+        const { fileName, originalFileName } = res.data;
+        modalState.from.name = originalFileName;
+        modalState.from.path = fileName;
+      } else {
+        message.error(res.msg, 3);
+      }
+    })
+    .finally(() => {
+      hide();
+      modalState.confirmLoading = false;
+    });
+}
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param id id
+ */
+function fnModalVisibleByEdit(id?: string) {
+  if (id) {
+    const hide = message.loading(t('common.loading'), 0);
+    getNeSoftware(id)
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          Object.assign(modalState.from, res.data);
+          modalState.title = 'Update Software';
+          modalState.visibleByEdit = true;
+        } else {
+          message.error(res.msg, 3);
+        }
+      })
+      .finally(() => {
+        modalState.confirmLoading = false;
+        hide();
+      });
+
+    return;
+  }
+  modalState.title = 'Upload Software';
+  modalState.visibleByEdit = true;
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.visible,
+  val => {
+    if (val) fnModalVisibleByEdit(props.editId);
+  }
+);
+
+onMounted(() => {});
+</script>
+
+<template>
+  <a-modal
+    width="800px"
+    :keyboard="false"
+    :mask-closable="false"
+    :visible="modalState.visibleByEdit"
+    :title="modalState.title"
+    :confirm-loading="modalState.confirmLoading"
+    @ok="fnModalOk"
+    @cancel="fnModalCancel"
+  >
+    <a-form
+      name="modalStateFrom"
+      layout="horizontal"
+      :wrapper-col="{ span: 18 }"
+      :label-col="{ span: 6 }"
+      :labelWrap="true"
+    >
+      <a-form-item
+        label="Upload File"
+        name="file"
+        v-bind="modalStateFrom.validateInfos.path"
+        v-if="modalState.from.id === ''"
+      >
+        <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>
+            Upload
+          </a-button>
+        </a-upload>
+      </a-form-item>
+
+      <a-form-item
+        label="NeType"
+        name="neType"
+        v-bind="modalStateFrom.validateInfos.neType"
+      >
+        <a-auto-complete
+          v-model:value="modalState.from.neType"
+          :options="NE_TYPE_LIST.map(v => ({ value: v }))"
+          :disabled="modalState.from.id !== ''"
+        >
+          <a-input
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+            :maxlength="32"
+            :disabled="modalState.from.id !== ''"
+          >
+          </a-input>
+        </a-auto-complete>
+      </a-form-item>
+
+      <a-form-item
+        label="Version"
+        name="version"
+        v-bind="modalStateFrom.validateInfos.version"
+      >
+        <a-input
+          v-model:value="modalState.from.version"
+          allow-clear
+          :placeholder="t('common.inputPlease')"
+        ></a-input>
+      </a-form-item>
+
+      <a-form-item label="Description" name="description">
+        <a-textarea
+          v-model:value="modalState.from.description"
+          :maxlength="500"
+          :show-count="true"
+          :placeholder="t('common.inputPlease')"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/src/views/ne/neSoftware/index.vue b/src/views/ne/neSoftware/index.vue
index c03e314e..62ffbf21 100644
--- a/src/views/ne/neSoftware/index.vue
+++ b/src/views/ne/neSoftware/index.vue
@@ -1,31 +1,22 @@
 <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 {
-  Form,
-  Modal,
-  TableColumnsType,
-  Upload,
-  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';
 import useI18n from '@/hooks/useI18n';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import {
-  listNeSoftware,
-  addNeSoftware,
-  delNeSoftware,
-  getNeSoftware,
-  updateNeSoftware,
-} from '@/api/ne/neSoftware';
+import { listNeSoftware, delNeSoftware } from '@/api/ne/neSoftware';
 import { parseDateToStr } from '@/utils/date-utils';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import { uploadFileChunk } from '@/api/tool/file';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { downloadFile } from '@/api/tool/file';
+import { saveAs } from 'file-saver';
 const { t } = useI18n();
+// 异步加载组件
+const EditModal = defineAsyncComponent(
+  () => import('./components/EditModal.vue')
+);
 
 /**网元参数 */
 let neOtions = ref<Record<string, any>[]>([]);
@@ -206,195 +197,47 @@ function fnGetList(pageNum?: number) {
 type ModalStateType = {
   /**新增框或修改框是否显示 */
   visibleByEdit: boolean;
-  /**标题 */
-  title: string;
-  /**表单数据 */
-  from: {
-    id: string;
-    neType: string;
-    name: string;
-    path: string;
-    version: string;
-    description: string;
-  };
+  /**新增框或修改框ID */
+  editId: string;
   /**确定按钮 loading */
   confirmLoading: boolean;
-  /**上传文件 */
-  uploadFiles: any[];
 };
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
   visibleByEdit: false,
-  title: '软件包文件',
-  from: {
-    id: '',
-    neType: '',
-    name: '',
-    path: '',
-    version: '',
-    description: '',
-  },
+  editId: '',
   confirmLoading: false,
-  uploadFiles: [],
 });
 
-/**对话框内表单属性和校验规则 */
-const modalStateFrom = Form.useForm(
-  modalState.from,
-  reactive({
-    neType: [
-      {
-        required: true,
-        min: 1,
-        max: 32,
-        message: t('views.configManage.softwareManage.neTypePlease'),
-      },
-    ],
-    version: [
-      {
-        required: true,
-        min: 1,
-        max: 64,
-        message: t('views.configManage.softwareManage.versionPlease'),
-      },
-    ],
-    path: [
-      {
-        required: true,
-        message: t('views.configManage.softwareManage.updateFilePlease'),
-      },
-    ],
-  })
-);
-
 /**
  * 对话框弹出显示为 新增或者修改
- * @param id id
+ * @param noticeId 网元id, 不传为新增
  */
 function fnModalVisibleByEdit(id?: string) {
-  if (id) {
-    const hide = message.loading(t('common.loading'), 0);
-    getNeSoftware(id)
-      .then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          Object.assign(modalState.from, res.data);
-          modalState.title = 'Update Software';
-          modalState.visibleByEdit = true;
-        } else {
-          message.error(res.msg, 3);
-        }
-      })
-      .finally(() => {
-        modalState.confirmLoading = false;
-        hide();
-      });
-
-    return;
+  if (!id) {
+    modalState.editId = '';
+  } else {
+    modalState.editId = id;
   }
-  modalState.title = 'Upload Software';
-  modalState.visibleByEdit = true;
+  modalState.visibleByEdit = !modalState.visibleByEdit;
 }
 
 /**
  * 对话框弹出确认执行函数
  * 进行表达规则校验
  */
-function fnModalOk() {
-  if (modalState.confirmLoading) return;
-  modalStateFrom
-    .validate()
-    .then(e => {
-      modalState.confirmLoading = true;
-      const hide = message.loading(t('common.loading'), 0);
-      const from = toRaw(modalState.from);
-      const software = from.id ? updateNeSoftware(from) : addNeSoftware(from);
-      software.then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.operateOk'),
-            duration: 3,
-          });
-          fnModalCancel();
-          // 获取列表数据
-          fnGetList();
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            duration: 3,
-          });
-        }
-        hide();
-        modalState.confirmLoading = false;
-      });
-    })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-    });
+function fnModalEditOk() {
+  fnGetList(1);
 }
 
 /**
  * 对话框弹出关闭执行函数
  * 进行表达规则校验
  */
-function fnModalCancel() {
+function fnModalEditCancel() {
+  modalState.editId = '';
   modalState.visibleByEdit = false;
-  modalState.confirmLoading = false;
-  modalStateFrom.resetFields();
-  modalState.uploadFiles = [];
-}
-
-/**表单上传前检查或转换压缩 */
-function fnBeforeUploadFile(file: FileType) {
-  if (modalState.confirmLoading) return false;
-  const fileName = file.name;
-  const suff = fileName.substring(fileName.lastIndexOf('.'));
-  if (!['.deb', '.rpm'].includes(suff)) {
-    message.error(
-      t('views.configManage.softwareManage.onlyAble', {
-        fileText: '(.deb、.rpm)',
-      }),
-      3
-    );
-    return Upload.LIST_IGNORE;
-  }
-  // 根据给定的软件名取版本号 ims-r2.2312.x-ub22.deb
-  const matches = fileName.match(/([0-9.]+[0-9x]+)/);
-  if (matches) {
-    modalState.from.version = matches[0];
-  }
-  const neTypeIndex = fileName.indexOf('-');
-  if (neTypeIndex !== -1) {
-    modalState.from.neType = fileName.substring(0, neTypeIndex).toUpperCase();
-  }
-  return true;
-}
-
-/**表单上传文件 */
-function fnUploadFile(up: UploadRequestOption) {
-  // 发送请求
-  const hide = message.loading(t('common.loading'), 0);
-  modalState.confirmLoading = true;
-  uploadFileChunk(up.file as File, 5, 'software')
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success('上传成功', 3);
-        // 改为完成状态
-        const file = modalState.uploadFiles[0];
-        file.percent = 100;
-        file.status = 'done';
-        // 预置到表单
-        const { fileName, originalFileName } = res.data;
-        modalState.from.name = originalFileName;
-        modalState.from.path = fileName;
-      } else {
-        message.error(res.msg, 3);
-      }
-    })
-    .finally(() => {
-      hide();
-      modalState.confirmLoading = false;
-    });
 }
 
 /**删除软件包 */
@@ -423,6 +266,53 @@ function fnRecordDelete(id: string) {
   });
 }
 
+/**下载软件包 */
+function fnDownloadFile(row: Record<string, any>) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.configManage.softwareManage.downloadTip', {
+      fileName: row.name,
+    }),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      downloadFile(row.path)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', {
+                msg: t('common.downloadText'),
+              }),
+              duration: 2,
+            });
+            saveAs(res.data, `${row.name}`);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+        });
+    },
+  });
+}
+
+/**
+ * 记录更多操作
+ */
+function fnRecordMore(type: string | number, row: Record<string, any>) {
+  if (type === 'download') {
+    fnDownloadFile(row);
+    return;
+  }
+  if (type === 'delete') {
+    fnRecordDelete(row.id);
+    return;
+  }
+}
+
 onMounted(() => {
   // 获取网元网元列表
   useNeInfoStore()
@@ -605,14 +495,26 @@ onMounted(() => {
                   <template #icon> <ProfileOutlined /></template>
                 </a-button>
               </a-tooltip>
-              <a-tooltip placement="topRight">
-                <template #title> {{ t('common.deleteText') }}</template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnRecordDelete(record.id)"
-                >
-                  <template #icon> <DeleteOutlined /></template>
-                </a-button>
+
+              <a-tooltip placement="left">
+                <template #title>{{ t('common.moreText') }}</template>
+                <a-dropdown placement="bottomRight" trigger="click">
+                  <a-button type="link">
+                    <template #icon><EllipsisOutlined /> </template>
+                  </a-button>
+                  <template #overlay>
+                    <a-menu @click="({ key }:any) => fnRecordMore(key, record)">
+                      <a-menu-item key="download">
+                        <DownloadOutlined />
+                        {{ t('common.downloadText') }}
+                      </a-menu-item>
+                      <a-menu-item key="delete">
+                        <DeleteOutlined />
+                        {{ t('common.deleteText') }}
+                      </a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
               </a-tooltip>
             </a-space>
           </template>
@@ -620,96 +522,13 @@ onMounted(() => {
       </a-table>
     </a-card>
 
-    <!-- 上传框 -->
-    <a-modal
-      width="800px"
-      :keyboard="false"
-      :mask-closable="false"
-      :visible="modalState.visibleByEdit"
-      :title="modalState.title"
-      :confirm-loading="modalState.confirmLoading"
-      @ok="fnModalOk"
-      @cancel="fnModalCancel"
-    >
-      <a-form
-        name="modalStateFrom"
-        layout="horizontal"
-        :wrapper-col="{ span: 18 }"
-        :label-col="{ span: 6 }"
-        :labelWrap="true"
-      >
-        <a-form-item
-          label="Upload File"
-          name="file"
-          v-bind="modalStateFrom.validateInfos.path"
-          v-if="modalState.from.id === ''"
-        >
-          <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>
-              Upload
-            </a-button>
-          </a-upload>
-        </a-form-item>
-
-        <a-form-item
-          label="NeType"
-          name="neType"
-          v-bind="modalStateFrom.validateInfos.neType"
-        >
-          <a-auto-complete
-            v-model:value="modalState.from.neType"
-            :options="NE_TYPE_LIST.map(v => ({ value: v }))"
-            :disabled="modalState.from.id !== ''"
-          >
-            <a-input
-              allow-clear
-              :placeholder="t('common.inputPlease')"
-              :maxlength="32"
-              :disabled="modalState.from.id !== ''"
-            >
-            </a-input>
-          </a-auto-complete>
-        </a-form-item>
-
-        <a-form-item
-          label="Version"
-          name="version"
-          v-bind="modalStateFrom.validateInfos.version"
-        >
-          <a-input
-            v-model:value="modalState.from.version"
-            allow-clear
-            :placeholder="t('common.inputPlease')"
-          ></a-input>
-        </a-form-item>
-
-        <a-form-item label="Description" name="description">
-          <a-textarea
-            v-model:value="modalState.from.description"
-            :maxlength="500"
-            :show-count="true"
-            :placeholder="t('common.inputPlease')"
-          />
-        </a-form-item>
-      </a-form>
-    </a-modal>
+    <!-- 新增框或修改框 -->
+    <EditModal
+      v-model:visible="modalState.visibleByEdit"
+      :edit-id="modalState.editId"
+      @ok="fnModalEditOk"
+      @cancel="fnModalEditCancel"
+    ></EditModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/ne/neVersion/index.vue b/src/views/ne/neVersion/index.vue
index e378e61b..873ca828 100644
--- a/src/views/ne/neVersion/index.vue
+++ b/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>