🎨 执行模板交互优化.
This commit is contained in:
lijiahangmax
@@ -259,10 +259,15 @@
|
||||
.exec-form-container {
|
||||
.selected-host {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--color-text-2);
|
||||
background: var(--color-fill-2);
|
||||
transition: all 0.3s;
|
||||
|
||||
&-count {
|
||||
font-size: 16px;
|
||||
@@ -270,13 +275,17 @@
|
||||
display: inline-block;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-fill-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.panel-header) {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<a-drawer v-model:visible="visible"
|
||||
title="计划执行任务详情"
|
||||
width="50%"
|
||||
title="计划任务详情"
|
||||
width="60%"
|
||||
:mask-closable="false"
|
||||
:unmount-on-close="true"
|
||||
ok-text="关闭"
|
||||
@@ -124,7 +124,7 @@
|
||||
|
||||
<style lang="less" scoped>
|
||||
.detail-container {
|
||||
padding: 24px;
|
||||
padding: 24px 8px 24px 24px;
|
||||
}
|
||||
|
||||
:deep(.arco-descriptions-item-value) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<a-drawer v-model:visible="visible"
|
||||
:title="title"
|
||||
width="70%"
|
||||
width="60%"
|
||||
:mask-closable="false"
|
||||
:unmount-on-close="true"
|
||||
:ok-button-props="{ disabled: loading }"
|
||||
@@ -11,7 +11,8 @@
|
||||
<a-spin class="full spin-wrapper" :loading="loading">
|
||||
<a-form :model="formModel"
|
||||
ref="formRef"
|
||||
layout="vertical"
|
||||
label-align="left"
|
||||
:auto-label-width="true"
|
||||
:rules="formRules">
|
||||
<a-row :gutter="16">
|
||||
<!-- 任务名称 -->
|
||||
@@ -74,7 +75,7 @@
|
||||
:wrapper-col-props="{ span: 24 }"
|
||||
:help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
|
||||
<exec-editor v-model="formModel.command"
|
||||
containerClass="command-editor"
|
||||
container-class="command-editor"
|
||||
theme="vs-dark"
|
||||
:parameter="jobBuiltinsParams" />
|
||||
</a-form-item>
|
||||
@@ -128,7 +129,7 @@
|
||||
|
||||
// 打开新增
|
||||
const openAdd = () => {
|
||||
title.value = '添加计划执行';
|
||||
title.value = '添加计划任务';
|
||||
isAddHandle.value = true;
|
||||
renderForm({ ...defaultForm() });
|
||||
setVisible(true);
|
||||
@@ -136,7 +137,7 @@
|
||||
|
||||
// 打开修改
|
||||
const openUpdate = async (id: any) => {
|
||||
title.value = '修改计划执行';
|
||||
title.value = '修改计划任务';
|
||||
isAddHandle.value = false;
|
||||
renderForm({});
|
||||
setVisible(true);
|
||||
@@ -229,6 +230,7 @@
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -249,7 +251,7 @@
|
||||
|
||||
.command-editor {
|
||||
width: 100%;
|
||||
height: calc(100vh - 318px);
|
||||
height: calc(100vh - 264px);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<a-drawer v-model:visible="visible"
|
||||
title="执行命令"
|
||||
:width="470"
|
||||
width="60%"
|
||||
:mask-closable="false"
|
||||
:unmount-on-close="true"
|
||||
:ok-button-props="{ disabled: loading }"
|
||||
@@ -12,49 +12,61 @@
|
||||
<!-- 命令表单 -->
|
||||
<a-form :model="formModel"
|
||||
ref="formRef"
|
||||
label-align="left"
|
||||
:auto-label-width="true"
|
||||
:rules="formRules">
|
||||
<!-- 执行主机 -->
|
||||
<a-form-item field="hostIdList" label="执行主机">
|
||||
<div class="selected-host">
|
||||
<!-- 已选择数量 -->
|
||||
<span class="usn" v-if="formModel.hostIdList?.length">
|
||||
已选择<span class="selected-host-count span-blue">{{ formModel.hostIdList?.length }}</span>台主机
|
||||
</span>
|
||||
<span class="usn pointer span-blue" @click="openSelectHost">
|
||||
{{ formModel.hostIdList?.length ? '重新选择' : '选择主机' }}
|
||||
</span>
|
||||
</div>
|
||||
</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="timeout"
|
||||
label="超时时间">
|
||||
<a-input-number v-model="formModel.timeout"
|
||||
placeholder="为0则不超时"
|
||||
:min="0"
|
||||
:max="100000"
|
||||
hide-button>
|
||||
<template #suffix>
|
||||
秒
|
||||
</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<!-- 执行命令 -->
|
||||
<a-form-item field="command"
|
||||
label="执行命令"
|
||||
:hide-label="true"
|
||||
:wrapper-col-props="{ span: 24 }"
|
||||
:help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
|
||||
<exec-editor v-model="formModel.command"
|
||||
containerClass="command-editor"
|
||||
theme="vs-dark"
|
||||
:parameter="parameterSchema" />
|
||||
</a-form-item>
|
||||
<a-row :gutter="16">
|
||||
<!-- 执行描述 -->
|
||||
<a-col :span="10">
|
||||
<a-form-item field="description" label="执行描述">
|
||||
<a-input v-model="formModel.description"
|
||||
placeholder="请输入执行描述"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!-- 执行主机 -->
|
||||
<a-col :span="7">
|
||||
<a-form-item field="hostIdList" label="执行主机">
|
||||
<div class="selected-host">
|
||||
<!-- 已选择数量 -->
|
||||
<span class="usn" v-if="formModel.hostIdList?.length">
|
||||
已选择<span class="selected-host-count span-blue">{{ formModel.hostIdList?.length }}</span>台主机
|
||||
</span>
|
||||
<span class="usn pointer span-blue" @click="openSelectHost">
|
||||
{{ formModel.hostIdList?.length ? '重新选择' : '选择主机' }}
|
||||
</span>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!-- 超时时间 -->
|
||||
<a-col :span="7">
|
||||
<a-form-item field="timeout"
|
||||
label="超时时间">
|
||||
<a-input-number v-model="formModel.timeout"
|
||||
placeholder="为0则不超时"
|
||||
:min="0"
|
||||
:max="100000"
|
||||
hide-button>
|
||||
<template #suffix>
|
||||
秒
|
||||
</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!-- 执行命令 -->
|
||||
<a-col :span="24">
|
||||
<a-form-item field="command"
|
||||
label="执行命令"
|
||||
:hide-label="true"
|
||||
:wrapper-col-props="{ span: 24 }"
|
||||
:help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
|
||||
<exec-editor v-model="formModel.command"
|
||||
container-class="command-editor"
|
||||
theme="vs-dark"
|
||||
:parameter="parameterSchema" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- 命令参数 -->
|
||||
<a-divider v-if="parameterSchema.length"
|
||||
@@ -66,18 +78,21 @@
|
||||
<a-form v-if="parameterSchema.length"
|
||||
:model="parameterFormModel"
|
||||
ref="parameterFormRef"
|
||||
label-align="right"
|
||||
:label-col-props="{ span: 5 }"
|
||||
:wrapper-col-props="{ span: 18 }">
|
||||
<a-form-item v-for="item in parameterSchema"
|
||||
:key="item.name"
|
||||
:field="item.name as string"
|
||||
:label="item.name"
|
||||
required>
|
||||
<a-input v-model="parameterFormModel[item.name as string]"
|
||||
:placeholder="item.desc"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
label-align="left"
|
||||
:auto-label-width="true">
|
||||
<a-row :gutter="16">
|
||||
<a-col v-for="item in parameterSchema"
|
||||
:key="item.name"
|
||||
:span="12">
|
||||
<a-form-item :field="item.name as string"
|
||||
:label="item.name"
|
||||
required>
|
||||
<a-input v-model="parameterFormModel[item.name as string]"
|
||||
:placeholder="item.desc"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-drawer>
|
||||
@@ -206,9 +221,14 @@
|
||||
|
||||
.selected-host {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--color-fill-2);
|
||||
transition: all 0.3s;
|
||||
|
||||
&-count {
|
||||
font-size: 16px;
|
||||
@@ -216,11 +236,15 @@
|
||||
display: inline-block;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-fill-3);
|
||||
}
|
||||
}
|
||||
|
||||
.command-editor {
|
||||
width: 100%;
|
||||
height: 44vh;
|
||||
height: 65vh;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<a-drawer v-model:visible="visible"
|
||||
width="60%"
|
||||
:title="title"
|
||||
:width="470"
|
||||
:mask-closable="false"
|
||||
:unmount-on-close="true"
|
||||
:ok-button-props="{ disabled: loading }"
|
||||
@@ -11,82 +11,90 @@
|
||||
<a-spin class="full modal-form" :loading="loading">
|
||||
<a-form :model="formModel"
|
||||
ref="formRef"
|
||||
label-align="left"
|
||||
:auto-label-width="true"
|
||||
:rules="formRules">
|
||||
<!-- 模板名称 -->
|
||||
<a-form-item field="name" label="模板名称">
|
||||
<a-input v-model="formModel.name"
|
||||
placeholder="请输入模板名称"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 超时时间 -->
|
||||
<a-form-item field="timeout"
|
||||
label="超时时间">
|
||||
<a-input-number v-model="formModel.timeout"
|
||||
placeholder="为0则不超时"
|
||||
:min="0"
|
||||
:max="100000"
|
||||
hide-button>
|
||||
<template #suffix>
|
||||
秒
|
||||
</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<!-- 模板命令 -->
|
||||
<a-form-item field="command"
|
||||
label="模板命令"
|
||||
:hide-label="true"
|
||||
:wrapper-col-props="{ span: 24 }"
|
||||
:help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
|
||||
<exec-editor v-model="formModel.command"
|
||||
containerClass="command-editor"
|
||||
theme="vs-dark"
|
||||
:parameter="parameter" />
|
||||
</a-form-item>
|
||||
<!-- 命令参数 -->
|
||||
<a-form-item field="parameter"
|
||||
class="parameter-form-item"
|
||||
label="命令参数"
|
||||
:label-col-props="{ span: 24 }"
|
||||
:wrapper-col-props="{ span: 24 }">
|
||||
<!-- label -->
|
||||
<template #label>
|
||||
<div class="parameter-label-wrapper">
|
||||
<span>命令参数</span>
|
||||
<span class="span-blue pointer" @click="addParameter">添加参数</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 参数 -->
|
||||
<template v-if="parameter.length">
|
||||
<a-input-group v-for="(item, i) in parameter"
|
||||
:key="i"
|
||||
class="parameter-item"
|
||||
:class="[ i === parameter.length - 1 ? 'parameter-item-last' : '' ]">
|
||||
<a-input class="parameter-item-name"
|
||||
v-model="item.name"
|
||||
placeholder="参数名称 (必填)"
|
||||
<a-row :gutter="16">
|
||||
<!-- 模板名称 -->
|
||||
<a-col :span="14">
|
||||
<a-form-item field="name" label="模板名称">
|
||||
<a-input v-model="formModel.name"
|
||||
placeholder="请输入模板名称"
|
||||
allow-clear />
|
||||
<a-input class="parameter-item-default"
|
||||
v-model="item.defaultValue"
|
||||
placeholder="默认值 (非必填)"
|
||||
allow-clear />
|
||||
<a-input class="parameter-item-description"
|
||||
v-model="item.desc"
|
||||
placeholder="描述 (非必填)"
|
||||
allow-clear />
|
||||
<span class="parameter-item-close click-icon-wrapper"
|
||||
title="移除"
|
||||
@click="removeParameter(i)">
|
||||
<icon-close />
|
||||
</span>
|
||||
</a-input-group>
|
||||
</template>
|
||||
<!-- 无参数 -->
|
||||
<template v-else>
|
||||
<span class="no-parameter">
|
||||
<icon-empty class="mr4" />无参数
|
||||
</span>
|
||||
</template>
|
||||
</a-form-item>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!-- 超时时间 -->
|
||||
<a-col :span="10">
|
||||
<a-form-item field="timeout" label="超时时间">
|
||||
<a-input-number v-model="formModel.timeout"
|
||||
placeholder="为0则不超时"
|
||||
:min="0"
|
||||
:max="100000"
|
||||
hide-button>
|
||||
<template #suffix>
|
||||
秒
|
||||
</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!-- 模板命令 -->
|
||||
<a-col :span="24">
|
||||
<a-form-item field="command"
|
||||
label="模板命令"
|
||||
:hide-label="true"
|
||||
:wrapper-col-props="{ span: 24 }"
|
||||
:help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
|
||||
<exec-editor v-model="formModel.command"
|
||||
container-class="command-editor"
|
||||
theme="vs-dark"
|
||||
:parameter="parameter" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!-- 命令参数 -->
|
||||
<a-col :span="24">
|
||||
<a-form-item field="parameter"
|
||||
class="parameter-form-item"
|
||||
label="命令参数"
|
||||
:label-col-props="{ span: 24 }"
|
||||
:wrapper-col-props="{ span: 24 }">
|
||||
<!-- label -->
|
||||
<template #label>
|
||||
<span class="span-blue pointer" @click="addParameter">添加参数</span>
|
||||
</template>
|
||||
<!-- 参数 -->
|
||||
<template v-if="parameter.length">
|
||||
<a-input-group v-for="(item, i) in parameter"
|
||||
:key="i"
|
||||
class="parameter-item"
|
||||
:class="[ i === parameter.length - 1 ? 'parameter-item-last' : '' ]">
|
||||
<a-input class="parameter-item-name"
|
||||
v-model="item.name"
|
||||
placeholder="参数名称 (必填)"
|
||||
allow-clear />
|
||||
<a-input class="parameter-item-default"
|
||||
v-model="item.defaultValue"
|
||||
placeholder="默认值 (非必填)"
|
||||
allow-clear />
|
||||
<a-input class="parameter-item-description"
|
||||
v-model="item.desc"
|
||||
placeholder="描述 (非必填)"
|
||||
allow-clear />
|
||||
<span class="parameter-item-close click-icon-wrapper"
|
||||
title="移除"
|
||||
@click="removeParameter(i)">
|
||||
<icon-close />
|
||||
</span>
|
||||
</a-input-group>
|
||||
</template>
|
||||
<!-- 无参数 -->
|
||||
<template v-else>
|
||||
<span class="no-parameter">
|
||||
<icon-empty class="mr4" />无参数
|
||||
</span>
|
||||
</template>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-drawer>
|
||||
@@ -224,16 +232,7 @@
|
||||
<style lang="less" scoped>
|
||||
.parameter-form-item {
|
||||
user-select: none;
|
||||
|
||||
:deep(.arco-form-item-label) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.parameter-label-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
margin-top: 4px;
|
||||
|
||||
:deep(.arco-form-item-content) {
|
||||
flex-direction: column;
|
||||
@@ -244,6 +243,7 @@
|
||||
}
|
||||
|
||||
.parameter-item {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -295,7 +295,7 @@
|
||||
|
||||
.command-editor {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
height: 65vh;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<a-drawer v-model:visible="visible"
|
||||
width="40%"
|
||||
:title="title"
|
||||
:width="388"
|
||||
:mask-closable="false"
|
||||
:unmount-on-close="true"
|
||||
:ok-button-props="{ disabled: loading }"
|
||||
@@ -11,10 +11,8 @@
|
||||
<a-spin class="full form-container" :loading="loading">
|
||||
<a-form :model="formModel"
|
||||
ref="formRef"
|
||||
label-align="right"
|
||||
layout="vertical"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
label-align="left"
|
||||
:auto-label-width="true"
|
||||
:rules="formRules">
|
||||
<!-- 名称 -->
|
||||
<a-form-item field="name" label="名称">
|
||||
@@ -29,9 +27,9 @@
|
||||
<!-- 代码片段 -->
|
||||
<a-form-item field="command"
|
||||
label="代码片段"
|
||||
style="margin: 0;">
|
||||
:hide-label="true">
|
||||
<editor v-model="formModel.command"
|
||||
containerClass="command-editor"
|
||||
container-class="command-editor"
|
||||
language="shell"
|
||||
theme="vs-dark"
|
||||
:suggestions="true"
|
||||
@@ -145,11 +143,11 @@
|
||||
|
||||
<style lang="less" scoped>
|
||||
.form-container {
|
||||
padding: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.command-editor {
|
||||
height: calc(100vh - 330px);
|
||||
height: calc(100vh - 262px);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -221,6 +221,8 @@
|
||||
setLoading(true);
|
||||
await refreshCache();
|
||||
Message.success('刷新成功 页面缓存刷新后生效');
|
||||
// 加载字典数据
|
||||
fetchTableData();
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
|
||||
@@ -296,6 +296,8 @@
|
||||
setFetchLoading(true);
|
||||
await refreshCache();
|
||||
Message.success('刷新成功 页面缓存刷新后生效');
|
||||
// 加载菜单数据
|
||||
await loadMenuData(true);
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setFetchLoading(false);
|
||||
|
||||
Reference in New Issue
Block a user