feat: 跟踪任务功能详情文件页面

src/views/traceManage/task-hlr/index.vue

@@ -12,7 +12,10 @@ import {
   listTaskHLR,
   startTaskHLR,
   stopTaskHLR,
+  fileTaskHLR,
 } from '@/api/traceManage/taskHLR';
+import { getNeFile } from '@/api/tool/neFile';
+import saveAs from 'file-saver';
 const { t } = useI18n();
 
 /**开始结束时间 */
@@ -47,6 +50,7 @@ function fnQueryReset() {
     pageNum: 1,
     pageSize: 20,
   });
+  queryRangePicker.value = ['', ''];
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
@@ -81,22 +85,26 @@ let tableColumns: ColumnsType = reactive([
     title: t('common.rowId'),
     dataIndex: 'id',
     align: 'right',
+    width: 50,
   },
   {
     title: t('views.traceManage.task.imsi'),
     dataIndex: 'imsi',
     align: 'left',
+    width: 150,
   },
   {
     title: t('views.traceManage.task.msisdn'),
     dataIndex: 'msisdn',
     align: 'left',
+    width: 150,
   },
-  {
-    title: t('views.traceManage.task.status'),
-    dataIndex: 'status',
-    align: 'left',
-  },
+  // {
+  //   title: t('views.traceManage.task.status'),
+  //   dataIndex: 'status',
+  //   align: 'left',
+  //   width: 100,
+  // },
   {
     title: t('views.traceManage.task.startTime'),
     dataIndex: 'startTime',
@@ -105,6 +113,7 @@ let tableColumns: ColumnsType = reactive([
       if (!opt.value) return '';
       return parseDateToStr(opt.value);
     },
+    width: 150,
   },
   {
     title: t('views.traceManage.task.endTime'),
@@ -114,6 +123,7 @@ let tableColumns: ColumnsType = reactive([
       if (!opt.value) return '';
       return parseDateToStr(opt.value);
     },
+    width: 150,
   },
   {
     title: t('common.operate'),
@@ -150,21 +160,30 @@ let tablePagination = reactive({
   },
 });
 
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
 /**
  * 信息删除
  * @param row 记录编号ID
  */
-function fnRecordDelete(id: string) {
+function fnRecordDelete(row: Record<string, any>) {
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.traceManage.task.delTaskTip', { num: id }),
+    content: t('views.traceManage.task.delTaskTip', { id: row.id }),
     onOk() {
       const key = 'delTraceTask';
       message.loading({ content: t('common.loading'), key });
-      delTaskHLR(id).then(res => {
+      // 进行中的先停止任务后删除记录
+      if (row.status === '1') {
+        stopTaskHLR({ id: row.id });
+      }
+      delTaskHLR(row.id).then(res => {
         if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
-            content: t('views.traceManage.task.delTask', { num: id }),
+            content: t('views.traceManage.task.delTask', { id: row.id }),
             key,
             duration: 2,
           });
@@ -188,6 +207,11 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
+  if (!queryRangePicker.value) {
+    queryRangePicker.value = ['', ''];
+  }
+  queryParams.startTime = queryRangePicker.value[0];
+  queryParams.endTime = queryRangePicker.value[1];
   listTaskHLR(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       // 取消勾选
@@ -214,16 +238,21 @@ function fnGetList(pageNum?: number) {
  * @param row 记录编号ID
  */
 function fnRecordStop(id: string) {
+  if (!id || modalState.confirmLoading) return;
+  if (id === '0') {
+    id = tableState.selectedRowKeys.join(',');
+  }
+
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.traceManage.task.stopTaskTip', { num: id }),
+    content: t('views.traceManage.task.stopTaskTip', { id }),
     onOk() {
       const key = 'delTraceTask';
       message.loading({ content: t('common.loading'), key });
       stopTaskHLR({ id }).then(res => {
         if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
-            content: t('views.traceManage.task.stopTask', { num: id }),
+            content: t('views.traceManage.task.stopTask', { id }),
             key,
             duration: 2,
           });
@@ -254,6 +283,10 @@ type ModalStateType = {
   from: Record<string, any>;
   /**确定按钮 loading */
   confirmLoading: boolean;
+  /**文件列表数据 */
+  fileList: any[];
+  /**错误信息 */
+  fileErrMsg: string;
 };
 
 /**对话框对象信息状态 */
@@ -261,9 +294,6 @@ let modalState: ModalStateType = reactive({
   visibleByView: false,
   visibleByEdit: false,
   title: '',
-  neType: [],
-  neTypeInterface: [],
-  neTypeInterfaceSelect: [],
   timeRangePicker: ['', ''],
   from: {
     id: undefined,
@@ -275,6 +305,8 @@ let modalState: ModalStateType = reactive({
     msisdn: '',
   },
   confirmLoading: false,
+  fileList: [],
+  fileErrMsg: '',
 });
 
 /**对话框内表单属性和校验规则 */
@@ -290,7 +322,7 @@ const modalStateFrom = Form.useForm(
     // 跟踪用户
     imsi: [
       {
-        required: true,
+        required: false,
         message: t('views.traceManage.task.imsiPlease'),
       },
     ],
@@ -310,29 +342,34 @@ function fnRangePickerChange(item: any, _: any) {
 }
 
 /**
- * 对话框弹出显示为 新增或者修改
- * @param noticeId 网元id, 不传为新增
+ * 对话框弹出显示
  */
-function fnModalVisibleByVive(row: Record<string, any>) {
+function fnModalVisibleByVive(id: Record<string, any>) {
   if (modalState.confirmLoading) return;
   const hide = message.loading(t('common.loading'), 0);
   modalState.confirmLoading = true;
-  // getTraceTask(id).then(res => {
-  //   modalState.confirmLoading = false;
-  //   hide();
-  //   if (res.code === RESULT_CODE_SUCCESS) {
-  //     modalState.neType = [res.data.neType, res.data.neId];
-  //     modalState.timeRangePicker = [res.data.startTime, res.data.endTime];
-  //     modalState.from = Object.assign(modalState.from, res.data);
+  fileTaskHLR({ id }).then(res => {
+    modalState.fileErrMsg = '';
+    modalState.fileList = [];
+    modalState.confirmLoading = false;
+    hide();
+    if (res.code === RESULT_CODE_SUCCESS) {
+      for (const item of res.data) {
+        if (item.err != '') {
+          modalState.fileErrMsg += `${item.neId}: ${item.err} \n`;
+          continue;
+        }
+        modalState.fileList.push(item);
+      }
 
-  //     modalState.confirmLoading = false;
-  //     hide();
-  //     modalState.title = t('views.traceManage.task.viewTask');
-  //     modalState.visibleByView = true;
-  //   } else {
-  //     message.error(t('views.traceManage.task.errorTaskInfo'), 3);
-  //   }
-  // });
+      modalState.confirmLoading = false;
+      hide();
+      modalState.title = t('views.traceManage.task.viewTask');
+      modalState.visibleByView = true;
+    } else {
+      message.error(t('views.traceManage.task.errorTaskInfo'), 3);
+    }
+  });
 }
 
 /**
@@ -352,12 +389,21 @@ function fnModalVisibleByEdit(id?: string) {
  * 进行表达规则校验
  */
 function fnModalOk() {
+  const from = toRaw(modalState.from);
+  if (from.imsi === '' && from.msisdn === '') {
+    message.warning({
+      content: t('views.traceManage.task.imsiORmsisdn'),
+      duration: 3,
+    });
+    return;
+  }
+
   modalStateFrom
     .validate()
     .then(e => {
       modalState.confirmLoading = true;
       const hide = message.loading(t('common.loading'), 0);
-      const from = toRaw(modalState.from);
+
       startTaskHLR(from)
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
@@ -396,6 +442,50 @@ function fnModalCancel() {
   modalState.timeRangePicker = ['', ''];
 }
 
+/**下载触发等待 */
+let downLoading = ref<boolean>(false);
+
+/**信息文件下载 */
+function fnDownloadFile(row: Record<string, any>) {
+  if (downLoading.value) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.logManage.neFile.downTip', { fileName: row.fileName }),
+    onOk() {
+      downLoading.value = true;
+      const hide = message.loading(t('common.loading'), 0);
+      const path = row.filePath.substring(0, row.filePath.lastIndexOf('/'));
+      getNeFile({
+        neType: row.neType,
+        neId: row.neId,
+        path: path,
+        fileName: row.fileName,
+        delTemp: true,
+      })
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', {
+                msg: t('common.downloadText'),
+              }),
+              duration: 2,
+            });
+            saveAs(res.data, `${row.fileName}`);
+          } else {
+            message.error({
+              content: t('views.logManage.neFile.downTipErr'),
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          downLoading.value = false;
+        });
+    },
+  });
+}
+
 onMounted(() => {
   // 获取列表数据
   fnGetList();
@@ -471,10 +561,22 @@ 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="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.confirmLoading"
+            @click.prevent="fnRecordStop('0')"
+          >
+            <template #icon><StopOutlined /></template>
+            {{ t('views.traceManage.task.textStop') }}
+          </a-button>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
@@ -499,6 +601,12 @@ onMounted(() => {
         :size="tableState.size"
         :pagination="tablePagination"
         :scroll="{ x: true }"
+        :row-selection="{
+          type: 'checkbox',
+          columnWidth: '48px',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'id'">
@@ -515,21 +623,18 @@ onMounted(() => {
                   <template #icon><StopOutlined /></template>
                 </a-button>
               </a-tooltip>
-              <a-tooltip v-if="record.status === '0'">
+              <a-tooltip>
                 <template #title>{{ t('common.viewText') }}</template>
                 <a-button
                   type="link"
-                  @click.prevent="fnModalVisibleByVive(record)"
+                  @click.prevent="fnModalVisibleByVive(record.id)"
                 >
                   <template #icon><ProfileOutlined /></template>
                 </a-button>
               </a-tooltip>
-              <a-tooltip v-if="record.status === '0'">
+              <a-tooltip>
                 <template #title>{{ t('common.deleteText') }}</template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnRecordDelete(record.id)"
-                >
+                <a-button type="link" @click.prevent="fnRecordDelete(record)">
                   <template #icon><DeleteOutlined /></template>
                 </a-button>
               </a-tooltip>
@@ -539,6 +644,56 @@ onMounted(() => {
       </a-table>
     </a-card>
 
+    <!-- 详情框 -->
+    <ProModal
+      :drag="true"
+      :visible="modalState.visibleByView"
+      :title="modalState.title"
+      @cancel="fnModalCancel"
+      :footer="null"
+    >
+      <a-form
+        name="fileList"
+        layout="horizontal"
+        autocomplete="off"
+        :label-col="{ span: 5 }"
+        :label-wrap="true"
+      >
+        <a-form-item
+          :label="t('views.traceManage.task.traceFile')"
+          name="fileTree"
+          v-show="modalState.fileList.length > 0"
+        >
+          <a-tree
+            :height="250"
+            :tree-data="modalState.fileList"
+            :field-names="{ title: 'fileName', key: 'filePath' }"
+          >
+            <template #title="item">
+              <span>{{ item.fileName }}</span>
+              <span
+                class="fileTree-download"
+                @click.prevent="fnDownloadFile(item)"
+              >
+                {{ t('common.downloadText') }}
+              </span>
+            </template>
+          </a-tree>
+        </a-form-item>
+        <a-form-item
+          :label="t('views.traceManage.task.errMsg')"
+          name="fileErrMsg"
+          v-show="modalState.fileErrMsg.length > 0"
+        >
+          <a-textarea
+            v-model:value="modalState.fileErrMsg"
+            :auto-size="{ minRows: 2, maxRows: 6 }"
+            :disabled="true"
+          />
+        </a-form-item>
+      </a-form>
+    </ProModal>
+
     <!-- 新增框或修改框 -->
     <ProModal
       :drag="true"
@@ -638,4 +793,10 @@ onMounted(() => {
 .table :deep(.ant-pagination) {
   padding: 0 24px;
 }
+
+.fileTree-download {
+  margin-left: 12px;
+  color: #eb2f96;
+  text-decoration: underline;
+}
 </style>