🔨 计划任务详情.

This commit is contained in:
lijiahangmax
2024-04-11 21:49:49 +08:00
parent ee7f1042a0
commit 8d550b9057
7 changed files with 104 additions and 146 deletions

View File

@@ -15,7 +15,7 @@
* 🔨 优化 orion-ops-framework 配置规范化 * 🔨 优化 orion-ops-framework 配置规范化
* 🔨 优化 前端 props 命名规范化 * 🔨 优化 前端 props 命名规范化
[如何升级](/about/update.md?id=_v103) [如何升级](/about/update.md?id=_v104)
## v1.0.3 ## v1.0.3

View File

@@ -61,7 +61,6 @@
// 表达式正确 // 表达式正确
next.value = data.next; next.value = data.next;
setVisible(true); setVisible(true);
} else { } else {
// 表达式错误 // 表达式错误
setVisible(false); setVisible(false);

View File

@@ -101,16 +101,12 @@
import { dateFormat } from '@/utils'; import { dateFormat } from '@/utils';
import { copy } from '@/hooks/copy'; import { copy } from '@/hooks/copy';
const { getDictValue } = useDictStore(); const { getDictValue, toOptions } = useDictStore();
const { visible, setVisible } = useVisible(); const { visible, setVisible } = useVisible();
const { loading, setLoading } = useLoading(); const { loading, setLoading } = useLoading();
const record = ref<HostConnectLogQueryResponse>({} as HostConnectLogQueryResponse); const record = ref<HostConnectLogQueryResponse>({} as HostConnectLogQueryResponse);
const emits = defineEmits(['clear']);
const { toOptions } = useDictStore();
// 打开 // 打开
const open = (s: any) => { const open = (s: any) => {
record.value = s; record.value = s;

View File

@@ -1,70 +1,73 @@
<template> <template>
<a-drawer v-model:visible="visible" <a-drawer v-model:visible="visible"
:title="title" title="计划执行任务详情"
:width="470" width="50%"
:mask-closable="false" :mask-closable="false"
:unmount-on-close="true" :unmount-on-close="true"
:ok-button-props="{ disabled: loading }" ok-text="关闭"
:cancel-button-props="{ disabled: loading }" :hide-cancel="true"
:on-before-ok="handlerOk"
@cancel="handleClose"> @cancel="handleClose">
<a-spin class="full modal-form" :loading="loading"> <a-descriptions class="detail-container"
<a-form :model="formModel" size="large"
ref="formRef" table-layout="fixed"
label-align="right" :label-style="{ width: '90px' }"
:label-col-props="{ span: 5 }" :column="2">
:wrapper-col-props="{ span: 18 }" <!-- 任务id -->
:rules="formRules"> <a-descriptions-item label="任务id">
<!-- 任务名称 --> <span class="text-copy"
<a-form-item field="name" label="任务名称"> title="复制"
<a-input v-model="formModel.name" @click="copy(record.id+'')">
placeholder="请输入任务名称" {{ record.id }}
allow-clear /> </span>
</a-form-item> </a-descriptions-item>
<!-- 执行序列 --> <!-- 任务名称 -->
<a-form-item field="execSeq" label="执行序列"> <a-descriptions-item label="任务名称">
<a-input-number v-model="formModel.execSeq" {{ record.name }}
placeholder="请输入执行序列" </a-descriptions-item>
hide-button /> <!-- cron -->
</a-form-item> <a-descriptions-item label="cron">
<!-- cron 表达式 --> <span class="text-copy"
<a-form-item field="expression" label="cron 表达式"> title="复制"
<a-input v-model="formModel.expression" @click="copy(record.expression)">
placeholder="请输入cron 表达式" {{ record.expression }}
allow-clear /> </span>
</a-form-item> </a-descriptions-item>
<!-- 超时时间 --> <!-- 超时时间 -->
<a-form-item field="timeout" label="超时时间"> <a-descriptions-item label="超时时间">
<a-input-number v-model="formModel.timeout" {{ record.timeout }}
placeholder="请输入超时时间" </a-descriptions-item>
hide-button /> <!-- 任务状态 -->
</a-form-item> <a-descriptions-item label="任务状态">
<!-- 执行命令 --> <a-tag :color="getDictValue(execJobStatusKey, record.status, 'color')">
<a-form-item field="command" label="执行命令"> {{ getDictValue(execJobStatusKey, record.status) }}
<a-input v-model="formModel.command" </a-tag>
placeholder="请输入执行命令" </a-descriptions-item>
allow-clear /> <!-- 修改时间 -->
</a-form-item> <a-descriptions-item label="修改时间">
<!-- 命令参数 --> {{ dateFormat(new Date(record.updateTime)) }}
<a-form-item field="parameterSchema" label="命令参数"> </a-descriptions-item>
<a-input v-model="formModel.parameterSchema" <!-- 执行主机 -->
placeholder="请输入命令参数" <a-descriptions-item :span="3">
allow-clear /> <template #label>
</a-form-item> <span class="host-label">执行主机</span>
<!-- 任务状态 --> </template>
<a-form-item field="status" label="任务状态"> <a-space wrap>
<a-select v-model="formModel.status" <a-tag v-for="host in record.hostList"
:options="toOptions(execJobStatusKey)" :key="host.id">
placeholder="任务状态" /> {{ host.name }}
</a-form-item> </a-tag>
<!-- 最近执行id --> </a-space>
<a-form-item field="recentLogId" label="最近执行id"> </a-descriptions-item>
<a-input-number v-model="formModel.recentLogId" <!-- 执行命令 -->
placeholder="请输入最近执行id" <a-descriptions-item label="执行命令" :span="3">
hide-button /> <editor v-model="record.command"
</a-form-item> language="shell"
</a-form> theme="vs-dark"
</a-spin> container-class="command-editor"
:readonly="true"
:suggestions="false" />
</a-descriptions-item>
</a-descriptions>
</a-drawer> </a-drawer>
</template> </template>
@@ -75,93 +78,38 @@
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import type { ExecJobUpdateRequest } from '@/api/exec/exec-job'; import type { ExecJobQueryResponse } from '@/api/exec/exec-job';
import { ref } from 'vue'; import { ref } from 'vue';
import useLoading from '@/hooks/loading'; import useLoading from '@/hooks/loading';
import useVisible from '@/hooks/visible'; import useVisible from '@/hooks/visible';
import formRules from '../types/form.rules';
import { execJobStatusKey } from '../types/const';
import { createExecJob, updateExecJob } from '@/api/exec/exec-job';
import { Message } from '@arco-design/web-vue';
import { useDictStore } from '@/store'; import { useDictStore } from '@/store';
import { dateFormat } from '@/utils';
import { copy } from '@/hooks/copy';
import { getExecJob } from '@/api/exec/exec-job';
import { execJobStatusKey } from '@/views/exec/exec-job/types/const';
const emits = defineEmits(['added', 'updated']); const { getDictValue, toOptions } = useDictStore();
const { visible, setVisible } = useVisible(); const { visible, setVisible } = useVisible();
const { loading, setLoading } = useLoading(); const { loading, setLoading } = useLoading();
const { toOptions } = useDictStore();
const title = ref<string>(); const record = ref<ExecJobQueryResponse>({} as ExecJobQueryResponse);
const isAddHandle = ref<boolean>(true);
const formRef = ref<any>();
const formModel = ref<ExecJobUpdateRequest>({});
const defaultForm = (): ExecJobUpdateRequest => { // 打开
return { const open = async (id: any) => {
id: undefined, // 查询计划任务
name: undefined,
execSeq: undefined,
expression: undefined,
timeout: undefined,
command: undefined,
parameterSchema: undefined,
status: undefined,
recentLogId: undefined,
};
};
// 打开新增
const openAdd = () => {
title.value = '添加计划执行';
isAddHandle.value = true;
renderForm({ ...defaultForm() });
setVisible(true);
};
// 打开修改
const openUpdate = (record: any) => {
title.value = '修改计划执行';
isAddHandle.value = false;
renderForm({ ...defaultForm(), ...record });
setVisible(true);
};
// 渲染表单
const renderForm = (record: any) => {
formModel.value = Object.assign({}, record);
};
defineExpose({ openAdd, openUpdate });
// 确定
const handlerOk = async () => {
setLoading(true);
try { try {
// 验证参数 setLoading(true);
const error = await formRef.value.validate(); const { data } = await getExecJob(id);
if (error) { record.value = data;
return false; setVisible(true);
}
if (isAddHandle.value) {
// 新增
await createExecJob(formModel.value);
Message.success('创建成功');
emits('added');
} else {
// 修改
await updateExecJob(formModel.value);
Message.success('修改成功');
emits('updated');
}
// 清空
handlerClear();
} catch (e) { } catch (e) {
return false;
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
defineExpose({ open });
// 关闭 // 关闭
const handleClose = () => { const handleClose = () => {
handlerClear(); handlerClear();
@@ -175,5 +123,20 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.detail-container {
padding: 24px;
}
:deep(.arco-descriptions-item-value) {
color: var(--color-text-1);
}
.host-label {
margin-top: -8px;
display: block;
}
.command-editor {
height: calc(100vh - 378px);
}
</style> </style>

View File

@@ -249,7 +249,7 @@
.command-editor { .command-editor {
width: 100%; width: 100%;
height: 48vh; height: calc(100vh - 318px);
} }
</style> </style>

View File

@@ -107,8 +107,8 @@
{{ getDictValue(execJobStatusKey, record.status) }} {{ getDictValue(execJobStatusKey, record.status) }}
</a-tag> </a-tag>
</template> </template>
<!-- 最近任务状态 --> <!-- 最近任务 -->
<template #recentLogStatus="{ record }"> <template #recentLog="{ record }">
<!-- 最近任务 --> <!-- 最近任务 -->
<div class="flex-center" v-if="record.recentLogId"> <div class="flex-center" v-if="record.recentLogId">
<!-- 执行状态 --> <!-- 执行状态 -->

View File

@@ -38,9 +38,9 @@ const columns = [
align: 'center', align: 'center',
width: 112, width: 112,
}, { }, {
title: '最近任务状态', title: '最近任务',
dataIndex: 'recentLogStatus', dataIndex: 'recentLog',
slotName: 'recentLogStatus', slotName: 'recentLog',
align: 'left', align: 'left',
width: 184, width: 184,
}, { }, {