fix: 网元软件/版本/授权页面

src/api/ne/neInfo.ts

@@ -111,20 +111,26 @@ export function getTypeAndIDNeInfo(neType: string, neId: string) {
  * 网元端配置文件读取
  * @param neType 网元类型
  * @param neId 网元ID
- * @param filePath 不带文件时重新覆盖返回目录列表
+ * @param filePath oam_manager.yaml 不带文件时重新覆盖返回目录列表
+ * @param fileType yaml 根据指定文件类型进行解析序列出map->json
  * @returns object
  */
-export function getConfigFile(neType: string, neId: string, filePath: string) {
+export function getConfigFile(data: Record<string, any>) {
   return request({
     url: '/ne/info/configFile',
     method: 'get',
-    params: { neType, neId, filePath },
+    params: data,
   });
 }
 
 /**
  * 网元端配置文件写入
- * @param data  neType网元类型 neId网元ID filePath文件 content内容 sync同步到网元
+ * @param neType 网元类型
+ * @param neId 网元ID
+ * @param filePath oam_manager.yaml 不带文件时重新覆盖返回目录列表
+ * @param fileType yaml 解析内容数据到对应文件类型
+ * @param content txt内容为字符串 其他文件格式都用json对象
+ * @param sync  同步到网元
  * @returns object
  */
 export function saveConfigFile(data: Record<string, any>) {

src/api/ne/neLicense.ts

@@ -26,45 +26,6 @@ export function getNeLicense(licenseId: string | number) {
   });
 }
 
-/**
- * 网元授权新增
- * @param data 网元对象
- * @returns object
- */
-export function addNeLicense(data: Record<string, any>) {
-  return request({
-    url: `/ne/license`,
-    method: 'post',
-    data: data,
-  });
-}
-
-/**
- * 网元授权修改
- * @param data 网元对象
- * @returns object
- */
-export function updateNeLicense(data: Record<string, any>) {
-  return request({
-    url: `/ne/license`,
-    method: 'put',
-    data: data,
-  });
-}
-
-/**
- * 网元授权删除
- * @param id 信息ID
- * @returns object
- */
-export function delNeLicense(licenseIds: string | number) {
-  return request({
-    url: `/ne/license/${licenseIds}`,
-    method: 'delete',
-    timeout: 60_000,
-  });
-}
-
 /**
  * 网元授权激活授权申请码
  * @param neType 网元类型
@@ -81,7 +42,7 @@ export function codeNeLicense(neType: string, neId: string) {
 
 /**
  * 网元授权激活授权文件替换
- * @param data 网元对象
+ * @param data 网元对象 {"neType": "", "neId": "", "licensePath": "", "reload": true}
  * @returns object
  */
 export function changeNeLicense(data: Record<string, any>) {

src/api/ne/neSoftware.ts

@@ -66,13 +66,13 @@ export function delNeSoftware(softwareIds: string | number) {
 }
 
 /**
- * 网元软件包安装检查
+ * 网元软件包安装
- * @param data 网元对象
+ * @param data {software:软件信息,preinput:{},action:"install"}
  * @returns object
  */
-export function checkInstallNeSoftware(data: Record<string, any>) {
+export function installNeSoftware(data: Record<string, any>) {
   return request({
-    url: `/ne/software/checkInstall`,
+    url: `/ne/software/install`,
     method: 'post',
     data: data,
     timeout: 180_000,

src/views/ne/neLicense/index.vue

@@ -0,0 +1,765 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import {
+  Form,
+  Modal,
+  TableColumnsType,
+  Upload,
+  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 useDictStore from '@/store/modules/dict';
+
+import { NE_TYPE_LIST } from '@/constants/ne-constants';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import {
+  changeNeLicense,
+  getNeLicense,
+  listNeLicense,
+  stateNeLicense,
+} from '@/api/ne/neLicense';
+import { parseDateToStr } from '@/utils/date-utils';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { uploadFile } from '@/api/tool/file';
+import { useClipboard } from '@vueuse/core';
+import saveAs from 'file-saver';
+const { copy } = useClipboard({ legacy: true });
+const { t } = useI18n();
+const { getDict } = useDictStore();
+
+/**字典数据-状态 */
+let dictStatus = ref<DictType[]>([]);
+
+/**网元参数 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neType: undefined,
+  /**网元ID */
+  neId: '',
+  /**过期时间 */
+  expiryDate: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    neType: undefined,
+    neId: '',
+    expiryDate: '',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**斑马纹 */
+  striped: boolean;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  striped: false,
+  seached: false,
+  data: [],
+});
+
+/**表格字段列 */
+let tableColumns = ref<TableColumnsType>([
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'neType',
+    dataIndex: 'neType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'neId',
+    dataIndex: 'neId',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'status',
+    dataIndex: 'status',
+    key: 'status',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'serialNum',
+    dataIndex: 'serialNum',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'expiryDate',
+    dataIndex: 'expiryDate',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'remark',
+    dataIndex: 'remark',
+    key: 'remark',
+    align: 'left',
+    width: 150,
+    resizable: true,
+    minWidth: 100,
+    maxWidth: 200,
+  },
+  {
+    title: 'updateTime',
+    dataIndex: 'updateTime',
+    align: 'center',
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value);
+    },
+    width: 150,
+  },
+  {
+    title: t('common.operate'),
+    key: 'id',
+    align: 'left',
+    fixed: 'right',
+    width: 150,
+  },
+]);
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+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;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  listNeLicense(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    } else {
+      tablePagination.total = 0;
+      tableState.data = [];
+    }
+    tableState.loading = false;
+  });
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: {
+    id: string;
+    neType: string;
+    neId: string;
+    activationRequestCode: string;
+    licensePath: string;
+    remark: string;
+    reload: boolean;
+  };
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**上传文件 */
+  uploadFiles: any[];
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByEdit: false,
+  title: '授权文件',
+  from: {
+    id: '',
+    neType: '',
+    neId: '',
+    activationRequestCode: '',
+    licensePath: '',
+    remark: '',
+    reload: false,
+  },
+  confirmLoading: false,
+  uploadFiles: [],
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    neType: [
+      {
+        required: true,
+        message: "Please input NE Type",
+      },
+    ],
+    neId: [
+      {
+        required: true,
+        message: "Please input NE ID",
+      },
+    ],
+    licensePath: [
+      {
+        required: true,
+        message: "Please upload file",
+      },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param licenseId id
+ */
+function fnModalVisibleByEdit(licenseId: string) {
+  if (modalState.confirmLoading) return;
+  const hide = message.loading(t('common.loading'), 0);
+  getNeLicense(licenseId)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        Object.assign(modalState.from, res.data);
+        modalState.from.licensePath = '';
+        modalState.title = 'Update License';
+        modalState.visibleByEdit = true;
+      } else {
+        message.error(res.msg, 3);
+      }
+    })
+    .finally(() => {
+      modalState.confirmLoading = false;
+      hide();
+    });
+}
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+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);
+      changeNeLicense(from).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 fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalState.confirmLoading = false;
+  modalStateFrom.resetFields();
+  modalState.uploadFiles = [];
+}
+
+/**表单上传前检查或转换压缩 */
+function fnBeforeUploadFile(file: FileType) {
+  if (modalState.confirmLoading) return false;
+  if (!file.name.endsWith('.ini')) {
+    message.error('只支持上传文件格式 .ini', 3);
+    return Upload.LIST_IGNORE;
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    message.error('文件必须小于2MB', 3);
+    return Upload.LIST_IGNORE;
+  }
+  return true;
+}
+
+/**表单上传文件 */
+function fnUploadFile(up: UploadRequestOption) {
+  // 发送请求
+  const hide = message.loading(t('common.loading'), 0);
+  modalState.confirmLoading = true;
+  let formData = new FormData();
+  formData.append('file', up.file);
+  formData.append('subPath', 'license');
+  uploadFile(formData)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success('upload success', 3);
+        // 改为完成状态
+        const file = modalState.uploadFiles[0];
+        file.percent = 100;
+        file.status = 'done';
+        // 预置到表单
+        const { fileName } = res.data;
+        modalState.from.licensePath = fileName;
+      } else {
+        message.error(res.msg, 3);
+      }
+    })
+    .finally(() => {
+      hide();
+      modalState.confirmLoading = false;
+    });
+}
+
+/**复制授权申请码 */
+function fnCopyCode() {
+  const code = modalState.from.activationRequestCode;
+  if (!code) return;
+  copy(code).then(() => {
+    message.success('copy success', 3);
+  });
+}
+
+/**下载授权申请码文件 */
+function fnDownCode() {
+  const { activationRequestCode, neType, neId } = modalState.from;
+  if (!activationRequestCode) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: 'Confirm to download the Code as a file for saving?',
+    onOk() {
+      const blob = new Blob([activationRequestCode], {
+        type: 'text/plain',
+      });
+      saveAs(blob, `${neType}_${neId}_code.txt`);
+    },
+  });
+}
+
+/**刷新网元授权信息 */
+function fnRecordRefresh(row: Record<string, any>) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: 'Refresh Ne License info?',
+    onOk() {
+      if (modalState.confirmLoading) return;
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      stateNeLicense(row.neType, row.neId)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            // 获取列表数据
+            fnGetList();
+          } else {
+            message.error(res.msg, 3);
+          }
+        })
+        .finally(() => {
+          modalState.confirmLoading = false;
+          hide();
+        });
+    },
+  });
+}
+
+onMounted(() => {
+  // 初始字典数据
+  getDict('ne_license_status').then(res => {
+    dictStatus.value = res;
+  });
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        neOtions.value = useNeInfoStore().getNeSelectOtions;
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="neType" name="neId ">
+              <a-auto-complete
+                v-model:value="queryParams.neType"
+                :options="NE_TYPE_LIST.map(v => ({ value: v }))"
+                :allow-clear="true"
+                :placeholder="t('common.inputPlease')"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="neId" name="neId">
+              <a-input
+                v-model:value="queryParams.neId"
+                :allow-clear="true"
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="expiryDate" name="expiryDate">
+              <a-input
+                v-model:value="queryParams.expiryDate"
+                :allow-clear="true"
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <a-space :size="8" align="center"> </a-space>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              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()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip placement="topRight">
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown placement="bottomRight" trigger="click">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumns"
+        :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)"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'status'">
+            <DictTag :options="dictStatus" :value="record.status" />
+          </template>
+          <template v-if="column.key === 'remark'">
+            <a-tooltip placement="topLeft">
+              <template #title>{{ record.remark }}</template>
+              <div
+                style="
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  cursor: pointer;
+                  width: 50px;
+                "
+                :style="{ width: column.width + 'px' }"
+              >
+                {{ record.remark }}
+              </div>
+            </a-tooltip>
+          </template>
+          <template v-if="column.key === 'id'">
+            <a-space :size="8" align="center">
+              <a-tooltip placement="topRight">
+                <template #title>Change License</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByEdit(record.id)"
+                >
+                  <template #icon><InteractionOutlined /> </template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip placement="topRight">
+                <template #title>Refresh Info</template>
+                <a-button type="link" @click.prevent="fnRecordRefresh(record)">
+                  <template #icon><SecurityScanOutlined /> </template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+      </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="t('views.configManage.license.neType')"
+          name="neType"
+          v-bind="modalStateFrom.validateInfos.neType"
+        >
+          <a-input v-model:value="modalState.from.neType" :disabled="true" />
+        </a-form-item>
+        <a-form-item
+          :label="t('views.configManage.license.neId')"
+          name="neId"
+          v-bind="modalStateFrom.validateInfos.neId"
+        >
+          <a-input v-model:value="modalState.from.neId" :disabled="true" />
+        </a-form-item>
+
+        <a-form-item
+          label="ActivationRequestCode"
+          name="activationRequestCode"
+          v-bind="modalStateFrom.validateInfos.activationRequestCode"
+        >
+          <a-input-group compact>
+            <a-input
+              v-model:value="modalState.from.activationRequestCode"
+              :disabled="true"
+              style="width: calc(100% - 64px)"
+            />
+            <a-tooltip title="Copy">
+              <a-button type="default" @click="fnCopyCode()">
+                <template #icon><CopyOutlined /></template>
+              </a-button>
+            </a-tooltip>
+            <a-tooltip title="Download">
+              <a-button type="primary" @click="fnDownCode()">
+                <template #icon><DownloadOutlined /></template>
+              </a-button>
+            </a-tooltip>
+          </a-input-group>
+        </a-form-item>
+
+        <a-form-item
+          :label="t('views.configManage.license.updateFile')"
+          name="file"
+          v-bind="modalStateFrom.validateInfos.licensePath"
+        >
+          <a-upload
+            name="file"
+            v-model:file-list="modalState.uploadFiles"
+            accept=".ini"
+            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="NE Reload" name="reload">
+          <a-switch v-model:checked="modalState.from.reload"> </a-switch>
+        </a-form-item>
+
+        <a-form-item label="Remark" name="remark">
+          <a-textarea
+            v-model:value="modalState.from.remark"
+            :maxlength="200"
+            :show-count="true"
+            :placeholder="t('common.inputPlease')"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+
+.table :deep(.table-striped) td {
+  background-color: #fafafa;
+}
+</style>

src/views/ne/neSoftware/index.vue

@@ -0,0 +1,724 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import {
+  Form,
+  Modal,
+  TableColumnsType,
+  Upload,
+  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 { 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';
+const { t } = useI18n();
+
+/**网元参数 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neType: undefined,
+  /**包名称 */
+  name: '',
+  /**包版本 */
+  version: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    neType: undefined,
+    name: '',
+    version: '',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**斑马纹 */
+  striped: boolean;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  striped: false,
+  seached: false,
+  data: [],
+});
+
+/**表格字段列 */
+let tableColumns = ref<TableColumnsType>([
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'neType',
+    dataIndex: 'neType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'name',
+    dataIndex: 'name',
+    align: 'left',
+    width: 250,
+    resizable: true,
+    minWidth: 150,
+    maxWidth: 400,
+  },
+  {
+    title: 'version',
+    dataIndex: 'version',
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: 'description',
+    dataIndex: 'description',
+    key: 'description',
+    align: 'left',
+    width: 200,
+    resizable: true,
+    minWidth: 100,
+    maxWidth: 400,
+  },
+  {
+    title: 'createTime',
+    dataIndex: 'createTime',
+    align: 'center',
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value);
+    },
+    width: 150,
+  },
+  {
+    title: t('common.operate'),
+    key: 'id',
+    align: 'left',
+  },
+]);
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+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;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  listNeSoftware(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    } else {
+      tablePagination.total = 0;
+      tableState.data = [];
+    }
+    tableState.loading = false;
+  });
+}
+
+/**对话框对象信息状态类型 */
+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'),
+      },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @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;
+}
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+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 fnModalCancel() {
+  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;
+    });
+}
+
+/**删除软件包 */
+function fnRecordDelete(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);
+      delNeSoftware(id)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            // 获取列表数据
+            fnGetList();
+          } else {
+            message.error(res.msg, 3);
+          }
+        })
+        .finally(() => {
+          modalState.confirmLoading = false;
+          hide();
+        });
+    },
+  });
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        neOtions.value = useNeInfoStore().getNeSelectOtions;
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="neType" name="neId ">
+              <a-auto-complete
+                v-model:value="queryParams.neType"
+                :options="NE_TYPE_LIST.map(v => ({ value: v }))"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="name" name="name">
+              <a-input
+                v-model:value="queryParams.name"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="Version" name="version">
+              <a-input
+                v-model:value="queryParams.version"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <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>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              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()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip placement="topRight">
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown placement="bottomRight" trigger="click">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumns"
+        :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)"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'description'">
+            <a-tooltip placement="topLeft">
+              <template #title>{{ record.description }}</template>
+              <div
+                style="
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  cursor: pointer;
+                  width: 50px;
+                "
+                :style="{ width: column.width + 'px' }"
+              >
+                {{ record.description }}
+              </div>
+            </a-tooltip>
+          </template>
+          <template v-if="column.key === 'id'">
+            <a-space :size="8" align="center">
+              <a-tooltip placement="topRight">
+                <template #title> {{ t('common.editText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByEdit(record.id)"
+                >
+                  <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>
+            </a-space>
+          </template>
+        </template>
+      </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>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+
+.table :deep(.table-striped) td {
+  background-color: #fafafa;
+}
+</style>

src/views/ne/neVersion/index.vue

@@ -0,0 +1,384 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { 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 { listNeVersion } from '@/api/ne/neVersion';
+import { parseDateToStr } from '@/utils/date-utils';
+const { t } = useI18n();
+
+/**网元参数 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neType: undefined,
+  /**网元ID */
+  neId: '',
+  /**版本 */
+  version: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    neType: undefined,
+    neId: '',
+    version: '',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**斑马纹 */
+  striped: boolean;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  striped: false,
+  seached: false,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns = ref<TableColumnsType>([
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'neType',
+    dataIndex: 'neType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'neId',
+    dataIndex: 'neId',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'version',
+    dataIndex: 'version',
+    align: 'left',
+    width: 100,
+    resizable: true,
+    minWidth: 100,
+    maxWidth: 200,
+  },
+  {
+    title: 'preVersion',
+    dataIndex: 'preVersion',
+    align: 'left',
+    width: 100,
+    resizable: true,
+    minWidth: 100,
+    maxWidth: 200,
+  },
+  {
+    title: 'newVersion',
+    dataIndex: 'newVersion',
+    align: 'left',
+    width: 100,
+    resizable: true,
+    minWidth: 100,
+    maxWidth: 200,
+  },
+  {
+    title: 'status',
+    dataIndex: 'status',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'updateTime',
+    dataIndex: 'updateTime',
+    align: 'center',
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value);
+    },
+    width: 150,
+  },
+  {
+    title: t('common.operate'),
+    key: 'id',
+    align: 'left',
+  },
+]);
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+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;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  listNeVersion(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    } else {
+      tablePagination.total = 0;
+      tableState.data = [];
+    }
+    tableState.loading = false;
+  });
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        neOtions.value = useNeInfoStore().getNeSelectOtions;
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="neType" name="neId ">
+              <a-auto-complete
+                v-model:value="queryParams.neType"
+                :options="NE_TYPE_LIST.map(v => ({ value: v }))"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="neId" name="neId">
+              <a-input
+                v-model:value="queryParams.neId"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="Version" name="version">
+              <a-input
+                v-model:value="queryParams.version"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title> </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              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()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip placement="topRight">
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown placement="bottomRight" trigger="click">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumns"
+        :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)"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'id'">
+            <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.viewText') }}</template>
+                <a-button type="link" @click.prevent="">
+                  <template #icon><ProfileOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+
+.table :deep(.table-striped) td {
+  background-color: #fafafa;
+}
+</style>