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

💄 优化表单视觉显示.

Browse Source
This commit is contained in:
lijiahang
2024-04-18 14:56:01 +08:00
parent 83ceb0e1e5
commit 33cfb13342
30 changed files with 163 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
orion-ops-ui/src/views/exec/exec-command-log/components/exec-command-log-clear-modal.vue
View File

@@ -1,6 +1,6 @@
<template>
<a-modal v-model:visible="visible"
body-class="modal-form"
body-class="modal-form-large"
title-align="start"
title="清空批量执行日志"
:align-center="false"
@@ -16,8 +16,7 @@
<a-form :model="formModel"
ref="formRef"
label-align="right"
:label-col-props="{ span: 5 }"
:wrapper-col-props="{ span: 18 }">
:auto-label-width="true">
<!-- 执行时间 -->
<a-form-item field="startTimeRange" label="执行时间">
<a-range-picker v-model="formModel.startTimeRange"

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

@@ -14,50 +14,64 @@
label-align="right"
:auto-label-width="true"
:rules="formRules">
<!-- 执行主机 -->
<a-form-item field="hostIdList" label="执行主机">
<div class="selected-host">
<!-- 已选择数量 -->
<span class="usn" v-if="formModel.hostIdList?.length">
<a-row :gutter="16">
<!-- 执行主机 -->
<a-col :span="24">
<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">
<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="scriptExec" label="脚本执行">
<div class="flex-center">
<a-switch v-model="formModel.scriptExec"
type="round"
:checked-value="EnabledStatus.ENABLED"
:unchecked-value="EnabledStatus.DISABLED" />
<div class="question-right ml8">
<a-tooltip content="启用后会将命令写入脚本文件 传输到主机后执行">
<icon-question-circle />
</a-tooltip>
</div>
</div>
</a-form-item>
</div>
</a-form-item>
</a-col>
<!-- 执行描述 -->
<a-col :span="24">
<a-form-item field="description" label="执行描述">
<a-input v-model="formModel.description"
placeholder="请输入执行描述"
allow-clear />
</a-form-item>
</a-col>
<!-- 超时时间 -->
<a-col :span="14">
<a-form-item field="timeout"
label="超时时间"
:hide-asterisk="true">
<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="10">
<a-form-item field="scriptExec"
label="脚本执行"
:hide-asterisk="true">
<div class="flex-center">
<a-switch v-model="formModel.scriptExec"
type="round"
:checked-value="EnabledStatus.ENABLED"
:unchecked-value="EnabledStatus.DISABLED" />
<div class="question-right ml8">
<a-tooltip content="启用后会将命令写入脚本文件 传输到主机后执行">
<icon-question-circle />
</a-tooltip>
</div>
</div>
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
<!-- 参数表单 -->

5
orion-ops-ui/src/views/exec/exec-job-log/components/exec-job-log-clear-modal.vue
View File

@@ -1,6 +1,6 @@
<template>
<a-modal v-model:visible="visible"
body-class="modal-form"
body-class="modal-form-large"
title-align="start"
title="清空计划任务日志"
:align-center="false"
@@ -16,8 +16,7 @@
<a-form :model="formModel"
ref="formRef"
label-align="right"
:label-col-props="{ span: 5 }"
:wrapper-col-props="{ span: 18 }">
:auto-label-width="true">
<!-- 执行时间 -->
<a-form-item field="startTimeRange" label="执行时间">
<a-range-picker v-model="formModel.startTimeRange"

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

@@ -8,7 +8,7 @@
:cancel-button-props="{ disabled: loading }"
:on-before-ok="handlerOk"
@cancel="handleClose">
<a-spin class="full spin-wrapper" :loading="loading">
<a-spin class="full modal-form-small" :loading="loading">
<a-form :model="formModel"
ref="formRef"
label-align="right"
@@ -17,7 +17,9 @@
<a-row :gutter="16">
<!-- 任务名称 -->
<a-col :span="13">
<a-form-item field="name" label="任务名称">
<a-form-item field="name"
label="任务名称"
:hide-asterisk="true">
<a-input v-model="formModel.name"
placeholder="请输入任务名称"
allow-clear />
@@ -25,7 +27,9 @@
</a-col>
<!-- 执行主机 -->
<a-col :span="11">
<a-form-item field="hostIdList" label="执行主机">
<a-form-item field="hostIdList"
label="执行主机"
:hide-asterisk="true">
<div class="selected-host">
<!-- 已选择数量 -->
<span class="usn" v-if="formModel.hostIdList?.length">
@@ -39,7 +43,9 @@
</a-col>
<!-- cron -->
<a-col :span="13">
<a-form-item field="expression" label="cron">
<a-form-item field="expression"
label="cron"
:hide-asterisk="true">
<a-input v-model="formModel.expression"
placeholder="请输入 cron 表达式"
allow-clear>
@@ -55,7 +61,9 @@
</a-col>
<!-- 超时时间 -->
<a-col :span="6">
<a-form-item field="timeout" label="超时时间">
<a-form-item field="timeout"
label="超时时间"
:hide-asterisk="true">
<a-input-number v-model="formModel.timeout"
placeholder="为0则不超时"
:min="0"
@@ -69,7 +77,9 @@
</a-col>
<!-- 脚本执行 -->
<a-col :span="5">
<a-form-item field="scriptExec" label="脚本执行">
<a-form-item field="scriptExec"
label="脚本执行"
:hide-asterisk="true">
<div class="flex-center">
<a-switch v-model="formModel.scriptExec"
type="round"
@@ -89,7 +99,6 @@
field="command"
label="执行命令"
:hide-label="true"
:wrapper-col-props="{ span: 24 }"
:help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
<template #extra>
<span v-permission="['asset:exec-template:query']"
@@ -257,9 +266,6 @@
</script>
<style lang="less" scoped>
.spin-wrapper {
padding: 16px 20px;
}
.selected-host {
width: 100%;

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

@@ -8,7 +8,7 @@
:cancel-button-props="{ disabled: loading }"
:on-before-ok="handlerOk"
@cancel="handleClose">
<a-spin class="full spin-wrapper" :loading="loading">
<a-spin class="full modal-form-small" :loading="loading">
<!-- 命令表单 -->
<a-form :model="formModel"
ref="formRef"
@@ -18,16 +18,19 @@
<a-row :gutter="16">
<!-- 执行描述 -->
<a-col :span="16">
<a-form-item field="description" label="执行描述">
<a-form-item field="description"
label="执行描述"
:hide-asterisk="true">
<a-input v-model="formModel.description"
placeholder="请输入执行描述"
allow-clear />
</a-form-item>
</a-col>
<!-- 超时时间 -->
<a-col :span="7">
<a-col :span="8">
<a-form-item field="timeout"
label="超时时间">
label="超时时间"
:hide-asterisk="true">
<a-input-number v-model="formModel.timeout"
placeholder="为0则不超时"
:min="0"
@@ -41,7 +44,9 @@
</a-col>
<!-- 执行主机 -->
<a-col :span="16">
<a-form-item field="hostIdList" label="执行主机">
<a-form-item field="hostIdList"
label="执行主机"
:hide-asterisk="true">
<div class="selected-host">
<!-- 已选择数量 -->
<span class="usn" v-if="formModel.hostIdList?.length">
@@ -55,7 +60,9 @@
</a-col>
<!-- 脚本执行 -->
<a-col :span="8">
<a-form-item field="scriptExec" label="脚本执行">
<a-form-item field="scriptExec"
label="脚本执行"
:hide-asterisk="true">
<div class="flex-center">
<a-switch v-model="formModel.scriptExec"
type="round"
@@ -74,7 +81,6 @@
<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"
@@ -233,9 +239,6 @@
</script>
<style lang="less" scoped>
.spin-wrapper {
padding: 16px 20px;
}
.selected-host {
width: 100%;
@@ -262,7 +265,7 @@
.command-editor {
width: 100%;
height: 65vh;
height: 62vh;
}
</style>

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

@@ -8,7 +8,7 @@
:cancel-button-props="{ disabled: loading }"
:on-before-ok="handlerOk"
@cancel="handleClose">
<a-spin class="full modal-form" :loading="loading">
<a-spin class="full modal-form-small" :loading="loading">
<a-form :model="formModel"
ref="formRef"
label-align="right"
@@ -17,15 +17,19 @@
<a-row :gutter="16">
<!-- 模板名称 -->
<a-col :span="12">
<a-form-item field="name" label="模板名称">
<a-form-item field="name"
label="模板名称"
:hide-asterisk="true">
<a-input v-model="formModel.name"
placeholder="请输入模板名称"
allow-clear />
</a-form-item>
</a-col>
<!-- 超时时间 -->
<a-col :span="7">
<a-form-item field="timeout" label="超时时间">
<a-col :span="6">
<a-form-item field="timeout"
label="超时时间"
:hide-asterisk="true">
<a-input-number v-model="formModel.timeout"
placeholder="为0则不超时"
:min="0"
@@ -38,8 +42,10 @@
</a-form-item>
</a-col>
<!-- 脚本执行 -->
<a-col :span="5">
<a-form-item field="scriptExec" label="脚本执行">
<a-col :span="6">
<a-form-item field="scriptExec"
label="脚本执行"
:hide-asterisk="true">
<div class="flex-center">
<a-switch v-model="formModel.scriptExec"
type="round"
@@ -58,7 +64,6 @@
<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"
@@ -70,9 +75,7 @@
<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="命令参数">
<!-- label -->
<template #label>
<span class="span-blue pointer" @click="addParameter">添加参数</span>
@@ -313,7 +316,7 @@
.command-editor {
width: 100%;
height: 65vh;
height: 62vh;
}
</style>