✨ 上传任务列表.
This commit is contained in:
lijiahangmax
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
47
orion-ops-ui/src/views/exec/upload-task/index.vue
Normal file
47
orion-ops-ui/src/views/exec/upload-task/index.vue
Normal file
@@ -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>
|
||||
33
orion-ops-ui/src/views/exec/upload-task/types/const.ts
Normal file
33
orion-ops-ui/src/views/exec/upload-task/types/const.ts
Normal file
@@ -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];
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user