From e3f83a0b9863da10526f24ff4b0f4697d158523e Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 5 Sep 2024 17:30:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B7=9F=E8=B8=AA=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/traceManage/taskHLR.ts           |  52 ++
 src/views/traceManage/task-hlr/index.vue | 641 +++++++++++++++++++++++
 2 files changed, 693 insertions(+)
 create mode 100644 src/api/traceManage/taskHLR.ts
 create mode 100644 src/views/traceManage/task-hlr/index.vue

diff --git a/src/api/traceManage/taskHLR.ts b/src/api/traceManage/taskHLR.ts
new file mode 100644
index 00000000..4bdb9a88
--- /dev/null
+++ b/src/api/traceManage/taskHLR.ts
@@ -0,0 +1,52 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 查询跟踪任务列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listTaskHLR(query: Record<string, any>) {
+  return request({
+    url: '/trace/task/hlr/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+/**
+ * 跟踪任务删除
+ * @param ids 任务ID
+ * @returns object
+ */
+export function delTaskHLR(ids: string | number) {
+  return request({
+    url: `/trace/task/hlr/${ids}`,
+    method: 'delete',
+  });
+}
+
+/**
+ * 跟踪任务创建
+ * @param data 对象
+ * @returns object
+ */
+export function startTaskHLR(data: Record<string, any>) {
+  return request({
+    url: '/trace/task/hlr/start',
+    method: 'post',
+    data: data,
+  });
+}
+
+/**
+ * 跟踪任务停止
+ * @param data 对象
+ * @returns object
+ */
+export function stopTaskHLR(data: Record<string, any>) {
+  return request({
+    url: '/trace/task/hlr/stop',
+    method: 'post',
+    data: data,
+  });
+}
diff --git a/src/views/traceManage/task-hlr/index.vue b/src/views/traceManage/task-hlr/index.vue
new file mode 100644
index 00000000..f69713c0
--- /dev/null
+++ b/src/views/traceManage/task-hlr/index.vue
@@ -0,0 +1,641 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw, ref } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { Form, message, Modal } from 'ant-design-vue/lib';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+import { ColumnsType } from 'ant-design-vue/lib/table';
+import { parseDateToStr } from '@/utils/date-utils';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useI18n from '@/hooks/useI18n';
+import {
+  delTaskHLR,
+  listTaskHLR,
+  startTaskHLR,
+  stopTaskHLR,
+} from '@/api/traceManage/taskHLR';
+const { t } = useI18n();
+
+/**开始结束时间 */
+let queryRangePicker = ref<[string, string]>(['', '']);
+
+/**查询参数 */
+let queryParams = reactive({
+  imsi: '',
+  msisdn: '',
+  /**记录时间 */
+  startTime: '',
+  endTime: '',
+  /**排序字段 */
+  sortField: '',
+  /**排序方式 */
+  sortOrder: 'asc',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    imsi: '',
+    msisdn: '',
+    startTime: '',
+    endTime: '',
+    sortField: '',
+    sortOrder: 'asc',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  seached: true,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = reactive([
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'right',
+  },
+  {
+    title: t('views.traceManage.task.imsi'),
+    dataIndex: 'imsi',
+    align: 'left',
+  },
+  {
+    title: t('views.traceManage.task.msisdn'),
+    dataIndex: 'msisdn',
+    align: 'left',
+  },
+  {
+    title: t('views.traceManage.task.status'),
+    dataIndex: 'status',
+    align: 'left',
+  },
+  {
+    title: t('views.traceManage.task.startTime'),
+    dataIndex: 'startTime',
+    align: 'left',
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value);
+    },
+  },
+  {
+    title: t('views.traceManage.task.endTime'),
+    dataIndex: 'endTime',
+    align: 'left',
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value);
+    },
+  },
+  {
+    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();
+  },
+});
+
+/**
+ * 信息删除
+ * @param row 记录编号ID
+ */
+function fnRecordDelete(id: string) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.traceManage.task.delTaskTip', { num: id }),
+    onOk() {
+      const key = 'delTraceTask';
+      message.loading({ content: t('common.loading'), key });
+      delTaskHLR(id).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('views.traceManage.task.delTask', { num: id }),
+            key,
+            duration: 2,
+          });
+          fnGetList();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key: key,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**查询信息列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  listTaskHLR(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);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+/**
+ * 信息停止
+ * @param row 记录编号ID
+ */
+function fnRecordStop(id: string) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.traceManage.task.stopTaskTip', { num: 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 }),
+            key,
+            duration: 2,
+          });
+          fnGetList();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key: key,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**详情框是否显示 */
+  visibleByView: boolean;
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**任务开始结束时间 */
+  timeRangePicker: [string, string];
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByView: false,
+  visibleByEdit: false,
+  title: '',
+  neType: [],
+  neTypeInterface: [],
+  neTypeInterfaceSelect: [],
+  timeRangePicker: ['', ''],
+  from: {
+    id: undefined,
+    startTime: 0,
+    endTime: 0,
+    remark: '',
+    // 跟踪类型用户
+    imsi: '',
+    msisdn: '',
+  },
+  confirmLoading: false,
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    endTime: [
+      {
+        required: false,
+        message: t('views.traceManage.task.rangePickerPlease'),
+      },
+    ],
+    // 跟踪用户
+    imsi: [
+      {
+        required: true,
+        message: t('views.traceManage.task.imsiPlease'),
+      },
+    ],
+    msisdn: [
+      {
+        required: false,
+        message: t('views.traceManage.task.msisdnPlease'),
+      },
+    ],
+  })
+);
+
+/**开始结束时间选择对应修改 */
+function fnRangePickerChange(item: any, _: any) {
+  modalState.from.startTime = +item[0];
+  modalState.from.endTime = +item[1];
+}
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param noticeId 网元id, 不传为新增
+ */
+function fnModalVisibleByVive(row: 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);
+
+  //     modalState.confirmLoading = false;
+  //     hide();
+  //     modalState.title = t('views.traceManage.task.viewTask');
+  //     modalState.visibleByView = true;
+  //   } else {
+  //     message.error(t('views.traceManage.task.errorTaskInfo'), 3);
+  //   }
+  // });
+}
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param id 不传为新增
+ */
+function fnModalVisibleByEdit(id?: string) {
+  if (!id) {
+    fnModalCancel();
+    modalState.title = t('views.traceManage.task.addTask');
+    modalState.visibleByEdit = true;
+  }
+}
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  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) {
+            message.success({
+              content: t('common.msgSuccess', { msg: modalState.title }),
+              duration: 3,
+            });
+            fnModalCancel();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+          fnGetList(1);
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByView = false;
+  modalState.visibleByEdit = false;
+  modalState.confirmLoading = false;
+  modalStateFrom.resetFields();
+  modalState.timeRangePicker = ['', ''];
+}
+
+onMounted(() => {
+  // 获取列表数据
+  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="IMSI" name="imsi ">
+              <a-input
+                v-model:value="queryParams.imsi"
+                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="MSISDN" name="msisdn ">
+              <a-input
+                v-model:value="queryParams.msisdn"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.traceManage.task.time')"
+              name="queryRangePicker"
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                allow-clear
+                bordered
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="x"
+                :placeholder="[
+                  t('views.traceManage.task.startTime'),
+                  t('views.traceManage.task.endTime'),
+                ]"
+                style="width: 100%"
+              ></a-range-picker>
+            </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 placement="topRight">
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ x: true }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'id'">
+            <a-space :size="8" align="center">
+              <a-tooltip v-if="record.status === '1'">
+                <template #title>
+                  {{ t('views.traceManage.task.textStop') }}
+                </template>
+                <a-button
+                  type="link"
+                  danger
+                  @click.prevent="fnRecordStop(record.id)"
+                >
+                  <template #icon><StopOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip v-if="record.status === '0'">
+                <template #title>{{ t('common.viewText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByVive(record)"
+                >
+                  <template #icon><ProfileOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip v-if="record.status === '0'">
+                <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>
+
+    <!-- 新增框或修改框 -->
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
+      :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"
+        :label-col="{ span: 4 }"
+        :label-wrap="true"
+      >
+        <!-- 用户跟踪 -->
+        <a-form-item
+          :label="t('views.traceManage.task.imsi')"
+          name="imsi"
+          v-bind="modalStateFrom.validateInfos.imsi"
+        >
+          <a-input
+            v-model:value="modalState.from.imsi"
+            allow-clear
+            :placeholder="t('views.traceManage.task.imsiPlease')"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  <div>{{ t('views.traceManage.task.imsiTip') }}</div>
+                </template>
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              </a-tooltip>
+            </template>
+          </a-input>
+        </a-form-item>
+        <a-form-item
+          :label="t('views.traceManage.task.msisdn')"
+          name="msisdn"
+          v-bind="modalStateFrom.validateInfos.msisdn"
+        >
+          <a-input
+            v-model:value="modalState.from.msisdn"
+            allow-clear
+            :placeholder="t('views.traceManage.task.msisdnPlease')"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  <div>{{ t('views.traceManage.task.msisdnTip') }}</div>
+                </template>
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              </a-tooltip>
+            </template>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item
+          :label="t('views.traceManage.task.rangePicker')"
+          name="endTime"
+          v-bind="modalStateFrom.validateInfos.endTime"
+        >
+          <a-range-picker
+            v-model:value="modalState.timeRangePicker"
+            allow-clear
+            bordered
+            :show-time="{ format: 'HH:mm:ss' }"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="x"
+            :placeholder="[
+              t('views.traceManage.task.startTime'),
+              t('views.traceManage.task.endTime'),
+            ]"
+            style="width: 100%"
+            @change="fnRangePickerChange"
+          ></a-range-picker>
+        </a-form-item>
+        <a-form-item :label="t('views.traceManage.task.remark')" name="remark">
+          <a-textarea
+            v-model:value="modalState.from.remark"
+            :auto-size="{ minRows: 2, maxRows: 6 }"
+            :maxlength="250"
+            :show-count="true"
+            :placeholder="t('views.traceManage.task.remarkPlease')"
+          />
+        </a-form-item>
+      </a-form>
+    </ProModal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>