feat: 基站状态记录上报和导出功能

src/views/ne-data/base-station/components/list.vue

@@ -1,27 +1,36 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, toRaw, computed } from 'vue';
+import {
+  reactive,
+  ref,
+  onMounted,
+  toRaw,
+  computed,
+  defineAsyncComponent,
+} from 'vue';
 import { Form, message, Modal } from 'ant-design-vue';
 import { SizeType } from 'ant-design-vue/es/config-provider';
 import { ColumnsType } from 'ant-design-vue/es/table';
 import { ProModal } from 'antdv-pro-modal';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+const { t } = useI18n();
 import {
   addAMFNbState,
   delAMFNbState,
   editAMFNbState,
   listAMFNbStatelist,
 } from '@/api/neData/amf';
-const { t } = useI18n();
-import { useRoute } from 'vue-router';
 import {
   addMMENbState,
   delMMENbState,
   editMMENbState,
   listMMENbStatelist,
 } from '@/api/neData/mme';
-const route = useRoute();
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import saveAs from 'file-saver';
+import { writeSheet } from '@/utils/execl-utils';
+// 异步加载组件
+const HistoryModal = defineAsyncComponent(() => import('./history.vue'));
 
 const nbState = ref<DictType[]>([
   {
@@ -302,6 +311,8 @@ const stateNum = computed(() => {
 type ModalStateType = {
   /**新增框或修改框是否显示 */
   openByEdit: boolean;
+  /**历史框 */
+  openByHistory: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -313,6 +324,7 @@ type ModalStateType = {
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
   openByEdit: false,
+  openByHistory: false,
   title: 'NB Config List',
   from: {
     address: '',
@@ -432,9 +444,77 @@ function fnModalOk() {
  */
 function fnModalCancel() {
   modalState.openByEdit = false;
+  modalState.openByHistory = false;
   modalStateFrom.resetFields();
 }
 
+/**跳转字典数据页面 */
+function fnHistoryView() {
+  modalState.openByHistory = true;
+}
+
+/**导出当前列表 */
+function fnExportList() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.neData.baseStation.exportTip'),
+    onOk: async () => {
+      if (modalState.confirmLoading) return;
+      modalState.confirmLoading = true;
+
+      let rows: Record<string, any>[] = [];
+      // 勾选的网元数据
+      if (tableState.selectedRowKeys.length > 0) {
+        rows = tableState.data.filter(item =>
+          tableState.selectedRowKeys.includes(item.index)
+        );
+      } else {
+        rows = tableState.data;
+      }
+
+      const dataArr: Record<string, any>[] = [];
+      for (const row of rows) {
+        let data: any = {};
+        data[t('views.neData.baseStation.name')] = row.name;
+        data[t('views.neData.baseStation.position')] = row.position;
+        data[t('views.neData.baseStation.address')] = row.address;
+        data[t('views.neData.baseStation.nbName')] = row.nbName;
+        data[t('views.neData.baseStation.ueNum')] = row.ueNum;
+        nbState.value.find(item => {
+          if (item.value === row.state) {
+            data[t('views.neData.baseStation.state')] = item.label;
+          }
+        });
+        data[t('views.neData.baseStation.time')] = row.time || '-';
+        dataArr.push(data);
+      }
+
+      // 导出
+      writeSheet(dataArr, 'Sheet1', {
+        header: [
+          t('views.neData.baseStation.name'),
+          t('views.neData.baseStation.position'),
+          t('views.neData.baseStation.address'),
+          t('views.neData.baseStation.nbName'),
+          t('views.neData.baseStation.ueNum'),
+          t('views.neData.baseStation.state'),
+          t('views.neData.baseStation.time'),
+        ],
+      }).then(fileBlob =>
+        saveAs(
+          fileBlob,
+          `${t('views.neData.baseStation.state')}_${t(
+            'views.neData.baseStation.list'
+          )}_${Date.now()}.xlsx`
+        )
+      );
+
+      modalState.confirmLoading = false;
+      tableState.selectedRowKeys = [];
+    },
+  });
+}
+
 onMounted(() => {
   // 获取网元网元列表
   useNeInfoStore()
@@ -450,8 +530,7 @@ onMounted(() => {
           });
           neCascaderOptions.value = arr;
           // 无查询参数neType时 默认选择AMF
-          const queryNeType = (route.query.neType as string) || 'AMF';
-          const item = arr.find(s => s.value === queryNeType);
+          const item = arr.find(s => s.value === 'AMF');
           if (item && item.children) {
             const info = item.children[0];
             neTypeAndId.value = [info.neType, info.neId];
@@ -554,6 +633,14 @@ onMounted(() => {
             <template #icon><DeleteOutlined /></template>
             {{ t('common.deleteText') }}
           </a-button>
+          <a-button type="default" @click.prevent="fnHistoryView()">
+            <template #icon><ContainerOutlined /></template>
+            {{ t('views.neData.baseStation.history') }}
+          </a-button>
+          <a-button type="dashed" @click.prevent="fnExportList()">
+            <template #icon><ExportOutlined /></template>
+            {{ t('common.export') }}
+          </a-button>
         </a-space>
       </template>
 
@@ -677,6 +764,15 @@ onMounted(() => {
         </a-form-item>
       </a-form>
     </ProModal>
+
+    <!-- 状态历史框 -->
+    <HistoryModal
+      v-model:open="modalState.openByHistory"
+      :title="t('views.neData.baseStation.history')"
+      :ne-type="neTypeAndId[0]"
+      :ne-id="neTypeAndId[1]"
+      @cancel="fnModalCancel"
+    ></HistoryModal>
   </div>
 </template>