manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 执行模板交互优化.

Browse Source
This commit is contained in:
lijiahangmax
2024-04-12 00:09:18 +08:00
parent d757e13b46
commit c26e749b0c
8 changed files with 198 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
orion-ops-ui/src/views/exec/exec-command/components/exec-command-panel.vue
View File

@@ -259,10 +259,15 @@
.exec-form-container { .exec-form-container {
.selected-host { .selected-host {
width: 100%; width: 100%;
height: 32px;
padding: 0 8px;
border-radius: 2px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
color: var(--color-text-2); color: var(--color-text-2);
background: var(--color-fill-2);
transition: all 0.3s;
&-count { &-count {
font-size: 16px; font-size: 16px;
@@ -270,13 +275,17 @@
display: inline-block; display: inline-block;
margin: 0 6px; margin: 0 6px;
} }
&:hover {
background: var(--color-fill-3);
}
} }
} }
:deep(.panel-header) { :deep(.panel-header) {
width: 100%; width: 100%;
height: 28px; height: 28px;
margin-bottom: 4px; margin-bottom: 12px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;

6
orion-ops-ui/src/views/exec/exec-job/components/exec-job-detail-drawer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<a-drawer v-model:visible="visible" <a-drawer v-model:visible="visible"
title="计划执行任务详情" title="计划任务详情"
width="50%" width="60%"
:mask-closable="false" :mask-closable="false"
:unmount-on-close="true" :unmount-on-close="true"
ok-text="关闭" ok-text="关闭"
@@ -124,7 +124,7 @@
<style lang="less" scoped> <style lang="less" scoped>
.detail-container { .detail-container {
padding: 24px; padding: 24px 8px 24px 24px;
} }
:deep(.arco-descriptions-item-value) { :deep(.arco-descriptions-item-value) {

14
orion-ops-ui/src/views/exec/exec-job/components/exec-job-form-drawer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<a-drawer v-model:visible="visible" <a-drawer v-model:visible="visible"
:title="title" :title="title"
width="70%" width="60%"
:mask-closable="false" :mask-closable="false"
:unmount-on-close="true" :unmount-on-close="true"
:ok-button-props="{ disabled: loading }" :ok-button-props="{ disabled: loading }"
@@ -11,7 +11,8 @@
<a-spin class="full spin-wrapper" :loading="loading"> <a-spin class="full spin-wrapper" :loading="loading">
<a-form :model="formModel" <a-form :model="formModel"
ref="formRef" ref="formRef"
layout="vertical" label-align="left"
:auto-label-width="true"
:rules="formRules"> :rules="formRules">
<a-row :gutter="16"> <a-row :gutter="16">
<!-- 任务名称 --> <!-- 任务名称 -->
@@ -74,7 +75,7 @@
:wrapper-col-props="{ span: 24 }" :wrapper-col-props="{ span: 24 }"
:help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'"> :help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
<exec-editor v-model="formModel.command" <exec-editor v-model="formModel.command"
containerClass="command-editor" container-class="command-editor"
theme="vs-dark" theme="vs-dark"
:parameter="jobBuiltinsParams" /> :parameter="jobBuiltinsParams" />
</a-form-item> </a-form-item>
@@ -128,7 +129,7 @@
// 打开新增 // 打开新增
const openAdd = () => { const openAdd = () => {
title.value = '添加计划执行'; title.value = '添加计划任务';
isAddHandle.value = true; isAddHandle.value = true;
renderForm({ ...defaultForm() }); renderForm({ ...defaultForm() });
setVisible(true); setVisible(true);
@@ -136,7 +137,7 @@
// 打开修改 // 打开修改
const openUpdate = async (id: any) => { const openUpdate = async (id: any) => {
title.value = '修改计划执行'; title.value = '修改计划任务';
isAddHandle.value = false; isAddHandle.value = false;
renderForm({}); renderForm({});
setVisible(true); setVisible(true);
@@ -229,6 +230,7 @@
width: 100%; width: 100%;
height: 32px; height: 32px;
padding: 0 8px; padding: 0 8px;
border-radius: 2px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -249,7 +251,7 @@
.command-editor { .command-editor {
width: 100%; width: 100%;
height: calc(100vh - 318px); height: calc(100vh - 264px);
} }
</style> </style>

136
orion-ops-ui/src/views/exec/exec-template/components/exec-template-exec-drawer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<a-drawer v-model:visible="visible" <a-drawer v-model:visible="visible"
title="执行命令" title="执行命令"
:width="470" width="60%"
:mask-closable="false" :mask-closable="false"
:unmount-on-close="true" :unmount-on-close="true"
:ok-button-props="{ disabled: loading }" :ok-button-props="{ disabled: loading }"
@@ -12,49 +12,61 @@
<!-- 命令表单 --> <!-- 命令表单 -->
<a-form :model="formModel" <a-form :model="formModel"
ref="formRef" ref="formRef"
label-align="left"
:auto-label-width="true"
:rules="formRules"> :rules="formRules">
<!-- 执行主机 --> <a-row :gutter="16">
<a-form-item field="hostIdList" label="执行主机"> <!-- 执行描述 -->
<div class="selected-host"> <a-col :span="10">
<!-- 已选择数量 --> <a-form-item field="description" label="执行描述">
<span class="usn" v-if="formModel.hostIdList?.length"> <a-input v-model="formModel.description"
已选择<span class="selected-host-count span-blue">{{ formModel.hostIdList?.length }}</span>台主机 placeholder="请输入执行描述"
</span> allow-clear />
<span class="usn pointer span-blue" @click="openSelectHost"> </a-form-item>
{{ formModel.hostIdList?.length ? '重新选择' : '选择主机' }} </a-col>
</span> <!-- 执行主机 -->
</div> <a-col :span="7">
</a-form-item> <a-form-item field="hostIdList" label="执行主机">
<!-- 执行描述 --> <div class="selected-host">
<a-form-item field="description" label="执行描述"> <!-- 已选择数量 -->
<a-input v-model="formModel.description" <span class="usn" v-if="formModel.hostIdList?.length">
placeholder="请输入执行描述" 已选择<span class="selected-host-count span-blue">{{ formModel.hostIdList?.length }}</span>台主机
allow-clear /> </span>
</a-form-item> <span class="usn pointer span-blue" @click="openSelectHost">
<!-- 超时时间 --> {{ formModel.hostIdList?.length ? '重新选择' : '选择主机' }}
<a-form-item field="timeout" </span>
label="超时时间"> </div>
<a-input-number v-model="formModel.timeout" </a-form-item>
placeholder="为0则不超时" </a-col>
:min="0" <!-- 超时时间 -->
:max="100000" <a-col :span="7">
hide-button> <a-form-item field="timeout"
<template #suffix> label="超时时间">
秒 <a-input-number v-model="formModel.timeout"
</template> placeholder="为0则不超时"
</a-input-number> :min="0"
</a-form-item> :max="100000"
<!-- 执行命令 --> hide-button>
<a-form-item field="command" <template #suffix>
label="执行命令" 秒
:hide-label="true" </template>
:wrapper-col-props="{ span: 24 }" </a-input-number>
:help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'"> </a-form-item>
<exec-editor v-model="formModel.command" </a-col>
containerClass="command-editor" <!-- 执行命令 -->
theme="vs-dark" <a-col :span="24">
:parameter="parameterSchema" /> <a-form-item field="command"
</a-form-item> 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-form>
<!-- 命令参数 --> <!-- 命令参数 -->
<a-divider v-if="parameterSchema.length" <a-divider v-if="parameterSchema.length"
@@ -66,18 +78,21 @@
<a-form v-if="parameterSchema.length" <a-form v-if="parameterSchema.length"
:model="parameterFormModel" :model="parameterFormModel"
ref="parameterFormRef" ref="parameterFormRef"
label-align="right" label-align="left"
:label-col-props="{ span: 5 }" :auto-label-width="true">
:wrapper-col-props="{ span: 18 }"> <a-row :gutter="16">
<a-form-item v-for="item in parameterSchema" <a-col v-for="item in parameterSchema"
:key="item.name" :key="item.name"
:field="item.name as string" :span="12">
:label="item.name" <a-form-item :field="item.name as string"
required> :label="item.name"
<a-input v-model="parameterFormModel[item.name as string]" required>
:placeholder="item.desc" <a-input v-model="parameterFormModel[item.name as string]"
allow-clear /> :placeholder="item.desc"
</a-form-item> allow-clear />
</a-form-item>
</a-col>
</a-row>
</a-form> </a-form>
</a-spin> </a-spin>
</a-drawer> </a-drawer>
@@ -206,9 +221,14 @@
.selected-host { .selected-host {
width: 100%; width: 100%;
height: 32px;
padding: 0 8px;
border-radius: 2px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: var(--color-fill-2);
transition: all 0.3s;
&-count { &-count {
font-size: 16px; font-size: 16px;
@@ -216,11 +236,15 @@
display: inline-block; display: inline-block;
margin: 0 6px; margin: 0 6px;
} }
&:hover {
background: var(--color-fill-3);
}
} }
.command-editor { .command-editor {
width: 100%; width: 100%;
height: 44vh; height: 65vh;
} }
</style> </style>

172
orion-ops-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<a-drawer v-model:visible="visible" <a-drawer v-model:visible="visible"
width="60%"
:title="title" :title="title"
:width="470"
:mask-closable="false" :mask-closable="false"
:unmount-on-close="true" :unmount-on-close="true"
:ok-button-props="{ disabled: loading }" :ok-button-props="{ disabled: loading }"
@@ -11,82 +11,90 @@
<a-spin class="full modal-form" :loading="loading"> <a-spin class="full modal-form" :loading="loading">
<a-form :model="formModel" <a-form :model="formModel"
ref="formRef" ref="formRef"
label-align="left"
:auto-label-width="true"
:rules="formRules"> :rules="formRules">
<!-- 模板名称 --> <a-row :gutter="16">
<a-form-item field="name" label="模板名称"> <!-- 模板名称 -->
<a-input v-model="formModel.name" <a-col :span="14">
placeholder="请输入模板名称" <a-form-item field="name" label="模板名称">
allow-clear /> <a-input v-model="formModel.name"
</a-form-item> placeholder="请输入模板名称"
<!-- 超时时间 -->
<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="参数名称 (必填)"
allow-clear /> allow-clear />
<a-input class="parameter-item-default" </a-form-item>
v-model="item.defaultValue" </a-col>
placeholder="默认值 (非必填)" <!-- 超时时间 -->
allow-clear /> <a-col :span="10">
<a-input class="parameter-item-description" <a-form-item field="timeout" label="超时时间">
v-model="item.desc" <a-input-number v-model="formModel.timeout"
placeholder="描述 (非必填)" placeholder="为0则不超时"
allow-clear /> :min="0"
<span class="parameter-item-close click-icon-wrapper" :max="100000"
title="移除" hide-button>
@click="removeParameter(i)"> <template #suffix>
<icon-close /> 秒
</span> </template>
</a-input-group> </a-input-number>
</template> </a-form-item>
<!-- 无参数 --> </a-col>
<template v-else> <!-- 模板命令 -->
<span class="no-parameter"> <a-col :span="24">
<icon-empty class="mr4" />无参数 <a-form-item field="command"
</span> label="模板命令"
</template> :hide-label="true"
</a-form-item> :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-form>
</a-spin> </a-spin>
</a-drawer> </a-drawer>
@@ -224,16 +232,7 @@
<style lang="less" scoped> <style lang="less" scoped>
.parameter-form-item { .parameter-form-item {
user-select: none; user-select: none;
margin-top: 4px;
:deep(.arco-form-item-label) {
width: 100%;
}
.parameter-label-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
:deep(.arco-form-item-content) { :deep(.arco-form-item-content) {
flex-direction: column; flex-direction: column;
@@ -244,6 +243,7 @@
} }
.parameter-item { .parameter-item {
width: 100%;
margin-bottom: 12px; margin-bottom: 12px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -295,7 +295,7 @@
.command-editor { .command-editor {
width: 100%; width: 100%;
height: 50vh; height: 65vh;
} }
</style> </style>

16
orion-ops-ui/src/views/host/command-snippet/components/command-snippet-form-drawer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<a-drawer v-model:visible="visible" <a-drawer v-model:visible="visible"
width="40%"
:title="title" :title="title"
:width="388"
:mask-closable="false" :mask-closable="false"
:unmount-on-close="true" :unmount-on-close="true"
:ok-button-props="{ disabled: loading }" :ok-button-props="{ disabled: loading }"
@@ -11,10 +11,8 @@
<a-spin class="full form-container" :loading="loading"> <a-spin class="full form-container" :loading="loading">
<a-form :model="formModel" <a-form :model="formModel"
ref="formRef" ref="formRef"
label-align="right" label-align="left"
layout="vertical" :auto-label-width="true"
:label-col-props="{ span: 6 }"
:wrapper-col-props="{ span: 18 }"
:rules="formRules"> :rules="formRules">
<!-- 名称 --> <!-- 名称 -->
<a-form-item field="name" label="名称"> <a-form-item field="name" label="名称">
@@ -29,9 +27,9 @@
<!-- 代码片段 --> <!-- 代码片段 -->
<a-form-item field="command" <a-form-item field="command"
label="代码片段" label="代码片段"
style="margin: 0;"> :hide-label="true">
<editor v-model="formModel.command" <editor v-model="formModel.command"
containerClass="command-editor" container-class="command-editor"
language="shell" language="shell"
theme="vs-dark" theme="vs-dark"
:suggestions="true" :suggestions="true"
@@ -145,11 +143,11 @@
<style lang="less" scoped> <style lang="less" scoped>
.form-container { .form-container {
padding: 12px; padding: 16px;
} }
.command-editor { .command-editor {
height: calc(100vh - 330px); height: calc(100vh - 262px);
} }
</style> </style>

2
orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
View File

@@ -221,6 +221,8 @@
setLoading(true); setLoading(true);
await refreshCache(); await refreshCache();
Message.success('刷新成功 页面缓存刷新后生效'); Message.success('刷新成功 页面缓存刷新后生效');
// 加载字典数据
fetchTableData();
} catch (e) { } catch (e) {
} finally { } finally {
setLoading(false); setLoading(false);

2
orion-ops-ui/src/views/system/menu/components/menu-table.vue
View File

@@ -296,6 +296,8 @@
setFetchLoading(true); setFetchLoading(true);
await refreshCache(); await refreshCache();
Message.success('刷新成功 页面缓存刷新后生效'); Message.success('刷新成功 页面缓存刷新后生效');
// 加载菜单数据
await loadMenuData(true);
} catch (e) { } catch (e) {
} finally { } finally {
setFetchLoading(false); setFetchLoading(false);