From 792ec067ab0b5232438a7bcb06ea0fe142e91a04 Mon Sep 17 00:00:00 2001
From: lijiahangmax <ljh1553488six@139.com>
Date: Sat, 11 May 2024 00:17:13 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E4=B8=8A=E4=BC=A0=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E5=88=97=E8=A1=A8.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/router/routes/modules/exec.ts         |   6 +-
 .../components/upload-task-clear-modal.vue    | 162 +++++++++
 .../components/upload-task-table.vue          | 325 ++++++++++++++++++
 .../src/views/exec/upload-task/index.vue      |  47 +++
 .../src/views/exec/upload-task/types/const.ts |  33 ++
 .../exec/upload-task/types/table.columns.ts   |  70 ++++
 6 files changed, 640 insertions(+), 3 deletions(-)
 create mode 100644 orion-ops-ui/src/views/exec/upload-task/components/upload-task-clear-modal.vue
 create mode 100644 orion-ops-ui/src/views/exec/upload-task/components/upload-task-table.vue
 create mode 100644 orion-ops-ui/src/views/exec/upload-task/index.vue
 create mode 100644 orion-ops-ui/src/views/exec/upload-task/types/const.ts
 create mode 100644 orion-ops-ui/src/views/exec/upload-task/types/table.columns.ts

diff --git a/orion-ops-ui/src/router/routes/modules/exec.ts b/orion-ops-ui/src/router/routes/modules/exec.ts
index 15fdb633..d62abb9a 100644
--- a/orion-ops-ui/src/router/routes/modules/exec.ts
+++ b/orion-ops-ui/src/router/routes/modules/exec.ts
@@ -23,9 +23,9 @@ const EXEC: AppRouteRecordRaw[] = [
         component: () => import('@/views/exec/batch-upload/index.vue'),
       },
       {
-        name: 'uploadTaskLog',
-        path: '/upload-log',
-        component: () => import('@/views/exec/upload-task-log/index.vue'),
+        name: 'uploadTask',
+        path: '/upload-task',
+        component: () => import('@/views/exec/upload-task/index.vue'),
       },
       {
         name: 'execTemplate',
diff --git a/orion-ops-ui/src/views/exec/upload-task/components/upload-task-clear-modal.vue b/orion-ops-ui/src/views/exec/upload-task/components/upload-task-clear-modal.vue
new file mode 100644
index 00000000..bae36103
--- /dev/null
+++ b/orion-ops-ui/src/views/exec/upload-task/components/upload-task-clear-modal.vue
@@ -0,0 +1,162 @@
+<template>
+  <a-modal v-model:visible="visible"
+           body-class="modal-form-large"
+           title-align="start"
+           title="清理上传任务"
+           :top="80"
+           :align-center="false"
+           :draggable="true"
+           :mask-closable="false"
+           :unmount-on-close="true"
+           :ok-button-props="{ disabled: loading }"
+           :cancel-button-props="{ disabled: loading }"
+           :on-before-ok="handlerOk"
+           @close="handleClose">
+    <a-spin class="full" :loading="loading">
+      <a-form :model="formModel"
+              ref="formRef"
+              label-align="right"
+              :auto-label-width="true">
+        <!-- 上传时间 -->
+        <a-form-item field="createTimeRange" label="上传时间">
+          <a-range-picker v-model="formModel.createTimeRange"
+                          :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+                          show-time
+                          format="YYYY-MM-DD HH:mm:ss" />
+        </a-form-item>
+        <!-- 上传用户 -->
+        <a-form-item field="userId" label="上传用户">
+          <user-selector v-model="formModel.userId"
+                         placeholder="请选择上传用户"
+                         allow-clear />
+        </a-form-item>
+        <!-- 远程路径 -->
+        <a-form-item field="remotePath" label="远程路径">
+          <a-input v-model="formModel.remotePath"
+                   placeholder="请输入远程路径"
+                   allow-clear />
+        </a-form-item>
+        <!-- 上传描述 -->
+        <a-form-item field="description" label="上传描述">
+          <a-input v-model="formModel.description"
+                   placeholder="请输入上传描述"
+                   allow-clear />
+        </a-form-item>
+        <!-- 上传状态 -->
+        <a-form-item field="status" label="上传状态">
+          <a-select v-model="formModel.status"
+                    :options="toOptions(uploadTaskStatusKey)"
+                    placeholder="请选择状态"
+                    allow-clear />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'uploadTaskFormModal'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { UploadTaskQueryRequest } from '@/api/exec/upload-task';
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import { uploadTaskStatusKey } from '../types/const';
+  import { getUploadTaskCount, clearUploadTask } from '@/api/exec/upload-task';
+  import { Message, Modal } from '@arco-design/web-vue';
+  import { useDictStore } from '@/store';
+  import UserSelector from '@/components/user/user/selector/index.vue';
+
+  const emits = defineEmits(['clear']);
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+  const { toOptions } = useDictStore();
+
+  const formRef = ref<any>();
+  const formModel = ref<UploadTaskQueryRequest>({});
+
+  const defaultForm = (): UploadTaskQueryRequest => {
+    return {
+      userId: undefined,
+      remotePath: undefined,
+      description: undefined,
+      status: undefined,
+      createTimeRange: undefined,
+    };
+  };
+
+  // 打开
+  const open = (record: any) => {
+    renderForm({ ...defaultForm(), ...record });
+    setVisible(true);
+  };
+
+  // 渲染表单
+  const renderForm = (record: any) => {
+    formModel.value = Object.assign({}, record);
+  };
+
+  defineExpose({ open });
+
+  // 确定
+  const handlerOk = async () => {
+    setLoading(true);
+    try {
+      // 获取总数量
+      const { data } = await getUploadTaskCount(formModel.value);
+      if (data) {
+        // 清空
+        doClear(data);
+      } else {
+        // 无数据
+        Message.warning('当前条件未查询到数据');
+      }
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+    return false;
+  };
+
+  // 执行删除
+  const doClear = (count: number) => {
+    Modal.confirm({
+      title: '删除清空',
+      content: `确定要删除 ${count} 条数据吗? 确定后将立即删除且无法恢复!`,
+      onOk: async () => {
+        setLoading(true);
+        try {
+          // 调用删除
+          await clearUploadTask(formModel.value);
+          emits('clear');
+          // 清空
+          setVisible(false);
+          handlerClear();
+        } catch (e) {
+        } finally {
+          setLoading(false);
+        }
+      }
+    });
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/orion-ops-ui/src/views/exec/upload-task/components/upload-task-table.vue b/orion-ops-ui/src/views/exec/upload-task/components/upload-task-table.vue
new file mode 100644
index 00000000..7877fff9
--- /dev/null
+++ b/orion-ops-ui/src/views/exec/upload-task/components/upload-task-table.vue
@@ -0,0 +1,325 @@
+<template>
+  <!-- 搜索 -->
+  <a-card class="general-card table-search-card">
+    <query-header :model="formModel"
+                  label-align="left"
+                  :itemOptions="{ 5: { span: 2 } }"
+                  @submit="fetchTableData"
+                  @reset="fetchTableData"
+                  @keyup.enter="() => fetchTableData()">
+      <!-- id -->
+      <a-form-item field="id" label="id">
+        <a-input-number v-model="formModel.id"
+                        placeholder="请输入id"
+                        allow-clear
+                        hide-button />
+      </a-form-item>
+      <!-- 上传用户 -->
+      <a-form-item field="userId" label="上传用户">
+        <user-selector v-model="formModel.userId"
+                       placeholder="请选择上传用户"
+                       allow-clear />
+      </a-form-item>
+      <!-- 远程路径 -->
+      <a-form-item field="remotePath" label="远程路径">
+        <a-input v-model="formModel.remotePath"
+                 placeholder="请输入远程路径"
+                 allow-clear />
+      </a-form-item>
+      <!-- 上传描述 -->
+      <a-form-item field="description" label="上传描述">
+        <a-input v-model="formModel.description"
+                 placeholder="请输入上传描述"
+                 allow-clear />
+      </a-form-item>
+      <!-- 上传状态 -->
+      <a-form-item field="status" label="上传状态">
+        <a-select v-model="formModel.status"
+                  :options="toOptions(uploadTaskStatusKey)"
+                  placeholder="请选择状态"
+                  allow-clear />
+      </a-form-item>
+      <!-- 上传时间 -->
+      <a-form-item field="createTimeRange" label="上传时间">
+        <a-range-picker v-model="formModel.createTimeRange"
+                        :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+                        show-time
+                        format="YYYY-MM-DD HH:mm:ss" />
+      </a-form-item>
+    </query-header>
+  </a-card>
+  <!-- 表格 -->
+  <a-card class="general-card table-card">
+    <template #title>
+      <!-- 左侧操作 -->
+      <div class="table-left-bar-handle">
+        <!-- 标题 -->
+        <div class="table-title">
+          上传任务列表
+        </div>
+      </div>
+      <!-- 右侧操作 -->
+      <div class="table-right-bar-handle">
+        <a-space>
+          <!-- 上传 -->
+          <a-button v-permission="['asset:upload-task:upload']"
+                    type="primary"
+                    @click="$router.push({ name: 'batchUpload' })">
+            上传
+            <template #icon>
+              <icon-upload />
+            </template>
+          </a-button>
+          <!-- 清空 -->
+          <a-button v-permission="['asset:upload-task:management:clear']"
+                    status="danger"
+                    @click="openClear">
+            清空
+            <template #icon>
+              <icon-close />
+            </template>
+          </a-button>
+          <!-- 删除 -->
+          <a-popconfirm :content="`确认删除选中的 ${selectedKeys.length} 条记录吗?`"
+                        position="br"
+                        type="warning"
+                        @ok="deleteSelectRows">
+            <a-button v-permission="['asset:upload-task:delete']"
+                      type="secondary"
+                      status="danger"
+                      :disabled="selectedKeys.length === 0">
+              删除
+              <template #icon>
+                <icon-delete />
+              </template>
+            </a-button>
+          </a-popconfirm>
+        </a-space>
+      </div>
+    </template>
+    <!-- table -->
+    <a-table row-key="id"
+             ref="tableRef"
+             :loading="loading"
+             :columns="columns"
+             v-model:selected-keys="selectedKeys"
+             :row-selection="rowSelection"
+             :data="tableRenderData"
+             :pagination="pagination"
+             :bordered="false"
+             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
+             @page-size-change="(size) => fetchTableData(1, size)">
+      <!-- 上传路径 -->
+      <template #remotePath="{ record }">
+        <span class="text-copy span-blue" @click="copy(record.remotePath)">
+          {{ record.remotePath }}
+        </span>
+      </template>
+      <!-- 文件数量 -->
+      <template #fileCount="{ record }">
+        <span class="span-blue">
+          {{ record.fileCount }}
+        </span>
+      </template>
+      <!-- 主机数量 -->
+      <template #hostCount="{ record }">
+        <span class="span-blue">
+          {{ record.hostCount }}
+        </span>
+      </template>
+      <!-- 上传状态 -->
+      <template #status="{ record }">
+        <a-tag :color="getDictValue(uploadTaskStatusKey, record.status, 'color')">
+          {{ getDictValue(uploadTaskStatusKey, record.status) }}
+        </a-tag>
+      </template>
+      <!-- 操作 -->
+      <template #handle="{ record }">
+        <div class="table-handle-wrapper">
+          <!-- 详情 -->
+          <a-button v-permission="['asset:upload-task:query']"
+                    type="text"
+                    size="mini"
+                    @click="emits('openDetail', record.id)">
+            详情
+          </a-button>
+          <!-- 取消 -->
+          <a-popconfirm v-if="record.status === UploadTaskStatus.WAITING || record.status === UploadTaskStatus.UPLOADING"
+                        content="确定要取消上传吗?"
+                        position="left"
+                        type="warning"
+                        @ok="doCancel(record)">
+            <a-button v-permission="['asset:upload-task:upload']"
+                      type="text"
+                      size="mini">
+              取消
+            </a-button>
+          </a-popconfirm>
+          <!-- 删除 -->
+          <a-popconfirm content="确认删除这条记录吗?"
+                        position="left"
+                        type="warning"
+                        @ok="deleteRow(record)">
+            <a-button v-permission="['asset:upload-task:delete']"
+                      type="text"
+                      size="mini"
+                      status="danger">
+              删除
+            </a-button>
+          </a-popconfirm>
+        </div>
+      </template>
+    </a-table>
+  </a-card>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'uploadTaskTable'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { UploadTaskQueryRequest, UploadTaskQueryResponse } from '@/api/exec/upload-task';
+  import { reactive, ref, onMounted, onUnmounted } from 'vue';
+  import { batchDeleteUploadTask, deleteUploadTask, getUploadTaskPage, cancelUploadTask, getUploadTaskStatus } from '@/api/exec/upload-task';
+  import { Message } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
+  import columns from '../types/table.columns';
+  import { UploadTaskStatus, uploadTaskStatusKey } from '../types/const';
+  import { usePagination, useRowSelection } from '@/types/table';
+  import { useDictStore } from '@/store';
+  import { copy } from '@/hooks/copy';
+  import UserSelector from '@/components/user/user/selector/index.vue';
+
+  const emits = defineEmits(['openClear', 'openDetail']);
+
+  const pagination = usePagination();
+  const rowSelection = useRowSelection();
+  const { loading, setLoading } = useLoading();
+  const { toOptions, getDictValue } = useDictStore();
+
+  const intervalId = ref();
+  const selectedKeys = ref<number[]>([]);
+  const tableRenderData = ref<UploadTaskQueryResponse[]>([]);
+  const formModel = reactive<UploadTaskQueryRequest>({
+    id: undefined,
+    userId: undefined,
+    remotePath: undefined,
+    description: undefined,
+    status: undefined,
+    createTimeRange: undefined,
+  });
+
+  // 打开清理
+  const openClear = () => {
+    emits('openClear', { ...formModel, id: undefined });
+  };
+
+  // 执行取消
+  const doCancel = async (record: UploadTaskQueryResponse) => {
+    try {
+      setLoading(true);
+      // 取消
+      await cancelUploadTask(record.id, false);
+      // 设置状态
+      record.status = UploadTaskStatus.CANCELED;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 删除选中行
+  const deleteSelectRows = async () => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await batchDeleteUploadTask(selectedKeys.value);
+      Message.success(`成功删除 ${selectedKeys.value.length} 条数据`);
+      selectedKeys.value = [];
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 删除当前行
+  const deleteRow = async ({ id }: {
+    id: number
+  }) => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await deleteUploadTask(id);
+      Message.success('删除成功');
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 加载状态
+  const fetchTaskStatus = async () => {
+    const unCompleteIdList = tableRenderData.value
+      .filter(s => s.status === UploadTaskStatus.WAITING || s.status === UploadTaskStatus.UPLOADING)
+      .map(s => s.id);
+    if (!unCompleteIdList.length) {
+      return;
+    }
+    // 加载未完成的状态
+    const { data } = await getUploadTaskStatus(unCompleteIdList, false);
+    data.forEach(s => {
+      const tableRow = tableRenderData.value.find(r => r.id === s.id);
+      if (!tableRow) {
+        return;
+      }
+      tableRow.status = s.status;
+    });
+  };
+
+  // 加载数据
+  const doFetchTableData = async (request: UploadTaskQueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await getUploadTaskPage(request);
+      tableRenderData.value = data.rows;
+      pagination.total = data.total;
+      pagination.current = request.page;
+      pagination.pageSize = request.limit;
+      selectedKeys.value = [];
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 切换页码
+  const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
+    doFetchTableData({ page, limit, ...form });
+  };
+
+  defineExpose({
+    fetchTableData
+  });
+
+  onMounted(() => {
+    // 加载数据
+    fetchTableData();
+    // 注册状态轮询
+    intervalId.value = setInterval(fetchTaskStatus, 10000);
+  });
+
+  onUnmounted(() => {
+    // 卸载状态轮询
+    clearInterval(intervalId.value);
+  });
+
+</script>
+
+<style lang="less" scoped>
+</style>
diff --git a/orion-ops-ui/src/views/exec/upload-task/index.vue b/orion-ops-ui/src/views/exec/upload-task/index.vue
new file mode 100644
index 00000000..f7a94445
--- /dev/null
+++ b/orion-ops-ui/src/views/exec/upload-task/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="layout-container" v-if="render">
+    <!-- 列表-表格 -->
+    <upload-task-table ref="table"
+                       @open-clear="(e) => clear.open(e)"
+                       @open-detail="(e) => detail.open(e)" />
+    <!-- 清理模态框 -->
+    <upload-task-clear-modal ref="clear"
+                             @clear="clearCallback" />
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'uploadTask'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { ref, onBeforeMount } from 'vue';
+  import { useDictStore } from '@/store';
+  import { dictKeys } from './types/const';
+  import UploadTaskTable from './components/upload-task-table.vue';
+  import UploadTaskClearModal from './components/upload-task-clear-modal.vue';
+
+  const render = ref(false);
+  const table = ref();
+  const detail = ref();
+  const clear = ref();
+
+  // 清理回调
+  const clearCallback = () => {
+    table.value.fetchTableData();
+  };
+
+  // 加载字典值
+  onBeforeMount(async () => {
+    const dictStore = useDictStore();
+    await dictStore.loadKeys(dictKeys);
+    render.value = true;
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/orion-ops-ui/src/views/exec/upload-task/types/const.ts b/orion-ops-ui/src/views/exec/upload-task/types/const.ts
new file mode 100644
index 00000000..eb24662c
--- /dev/null
+++ b/orion-ops-ui/src/views/exec/upload-task/types/const.ts
@@ -0,0 +1,33 @@
+// 上传任务状态
+export const UploadTaskStatus = {
+  // 等待中
+  WAITING: 'WAITING',
+  // 上传中
+  UPLOADING: 'UPLOADING',
+  // 已完成
+  FINISHED: 'FINISHED',
+  // 已完成
+  FAILED: 'FAILED',
+  // 已取消
+  CANCELED: 'CANCELED',
+};
+
+// 上传任务文件状态
+export const UploadTaskFileStatus = {
+  // 等待中
+  WAITING: 'WAITING',
+  // 上传中
+  UPLOADING: 'UPLOADING',
+  // 已完成
+  FINISHED: 'FINISHED',
+  // 已完成
+  FAILED: 'FAILED',
+  // 已取消
+  CANCELED: 'CANCELED',
+};
+
+// 上传任务状态 字典项
+export const uploadTaskStatusKey = 'uploadTaskStatus';
+
+// 加载的字典值
+export const dictKeys = [uploadTaskStatusKey];
diff --git a/orion-ops-ui/src/views/exec/upload-task/types/table.columns.ts b/orion-ops-ui/src/views/exec/upload-task/types/table.columns.ts
new file mode 100644
index 00000000..a7c352f5
--- /dev/null
+++ b/orion-ops-ui/src/views/exec/upload-task/types/table.columns.ts
@@ -0,0 +1,70 @@
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+import { dateFormat } from '@/utils';
+
+const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    slotName: 'id',
+    width: 70,
+    align: 'left',
+    fixed: 'left',
+  }, {
+    title: '上传用户',
+    dataIndex: 'username',
+    slotName: 'username',
+    align: 'left',
+    width: 118,
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '上传描述',
+    dataIndex: 'description',
+    slotName: 'description',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '远程路径',
+    dataIndex: 'remotePath',
+    slotName: 'remotePath',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '上传状态',
+    dataIndex: 'status',
+    slotName: 'status',
+    align: 'center',
+    width: 138,
+  }, {
+    title: '文件数量',
+    dataIndex: 'fileCount',
+    slotName: 'fileCount',
+    width: 98,
+    align: 'center',
+  }, {
+    title: '主机数量',
+    dataIndex: 'hostCount',
+    slotName: 'hostCount',
+    width: 98,
+    align: 'center',
+  }, {
+    title: '上传时间',
+    dataIndex: 'createTime',
+    slotName: 'createTime',
+    align: 'center',
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(new Date(record.createTime));
+    },
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 180,
+    align: 'center',
+    fixed: 'right',
+  },
+] as TableColumnData[];
+
+export default columns;