💄 优化表单视觉显示.

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

View File

@@ -20,8 +20,7 @@
size="small"
ref="formRef"
label-align="right"
:label-col-props="{ span: 6 }"
:wrapper-col-props="{ span: 18 }"
:auto-label-width="true"
@keyup.enter="() => fetchCardData()">
#foreach($field in ${table.fields})
<!-- $field.comment -->

View File

@@ -8,12 +8,11 @@
: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"
:label-col-props="{ span: 5 }"
:wrapper-col-props="{ span: 18 }"
:auto-label-width="true"
:rules="formRules">
#foreach($field in ${table.fields})
#if("$field.propertyName" != "id")

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="title"
:top="80"
@@ -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"
:rules="formRules">
#foreach($field in ${table.fields})
#if("$field.propertyName" != "id")

View File

@@ -67,8 +67,16 @@
}
// -- modal
.modal-form {
padding: 24px 20px 4px 20px;
.modal-form-small {
padding: 20px 20px 2px 20px;
}
.modal-form-medium {
padding: 20px 28px 4px 28px;
}
.modal-form-large {
padding: 24px 36px 4px 36px;
}
// -- card-view

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="重置密码"
:top="120"
@@ -17,8 +17,7 @@
ref="formRef"
label-align="right"
:rules="rules"
:label-col-props="{ span: 5 }"
:wrapper-col-props="{ span: 18 }">
:auto-label-width="true">
<!-- 密码 -->
<a-form-item field="beforePassword" label="原始密码">
<a-input-password v-model="formModel.beforePassword" placeholder="请输入原始密码" />

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"
@@ -15,8 +15,7 @@
<a-spin class="full" :loading="loading">
<a-form :model="formModel"
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"

View File

@@ -40,8 +40,7 @@
size="small"
ref="formRef"
label-align="right"
:label-col-props="{ span: 6 }"
:wrapper-col-props="{ span: 18 }"
:auto-label-width="true"
@keyup.enter="() => fetchCardData()">
<!-- id -->
<a-form-item field="id" label="id">
@@ -65,8 +64,8 @@
<a-form-item field="username" label="用户名">
<a-input v-model="formModel.username" placeholder="请输入用户名" allow-clear />
</a-form-item>
<!-- 主机秘钥 -->
<a-form-item field="keyId" label="主机秘钥">
<!-- 秘钥 -->
<a-form-item field="keyId" label="秘钥">
<host-key-selector v-model="formModel.keyId" allow-clear />
</a-form-item>
</a-form>

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="title"
:top="80"
@@ -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"
:rules="formRules">
<!-- 名称 -->
<a-form-item field="name" label="名称">

View File

@@ -8,15 +8,14 @@
: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-alert class="keygen-alert">
请使用 ssh-keygen -m PEM -t rsa 生成秘钥
</a-alert>
<a-form :model="formModel"
ref="formRef"
label-align="right"
:label-col-props="{ span: 4 }"
:wrapper-col-props="{ span: 20 }"
:auto-label-width="true"
:rules="formRules">
<!-- 名称 -->
<a-form-item field="name" label="名称">
@@ -240,8 +239,8 @@
}
.keygen-alert {
margin: 0 0 12px 16px;
width: calc(100% - 16px);
margin-bottom: 12px;
width: 100%;
}
.password-input {

View File

@@ -49,8 +49,7 @@
size="small"
ref="formRef"
label-align="right"
:label-col-props="{ span: 6 }"
:wrapper-col-props="{ span: 18 }"
:auto-label-width="true"
@keyup.enter="() => fetchCardData()">
<!-- id -->
<a-form-item field="id" label="主机id">

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="title"
:top="80"
@@ -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"
:rules="formRules">
<!-- 主机名称 -->
<a-form-item field="name" label="主机名称">

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"

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>
<!-- 参数表单 -->

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"

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%;

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>

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>

View File

@@ -2,7 +2,7 @@
<a-form :model="formModel"
ref="formRef"
label-align="right"
:label-col-props="{ span: 6 }"
:label-col-props="{ span: 5 }"
:wrapper-col-props="{ span: 18 }">
<!-- 验证方式 -->
<a-form-item field="authType" label="验证方式">

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"
@@ -10,8 +10,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="path"
disabled
@@ -65,7 +64,7 @@
});
// 修改预览
const updatePreview = (v: number|undefined) => {
const updatePreview = (v: number | undefined) => {
formModel.value.permission = permission10toString(v as number);
};

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="touch ? '创建文件' : '创建文件夹'"
:align-center="false"
@@ -10,15 +10,14 @@
<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="path"
label="文件路径"
:rules="[{ required: true, message: '请输入文件路径' }]">
:label="`${touch ? '文件' : '文件夹'}路径`"
:rules="[{ required: true, message: `请输入${touch ? '文件' : '文件夹'}路径` }]">
<a-input ref="pathRef"
v-model="formModel.path"
placeholder="请输入文件路径" />
:placeholder="`请输入${touch ? '文件' : '文件夹'}路径`" />
</a-form-item>
</a-form>
</a-modal>

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"
@@ -10,8 +10,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="path"
disabled

View File

@@ -1,5 +1,6 @@
<template>
<a-modal v-model:visible="visible"
body-class="modal-form-large"
title-align="start"
:title="title"
:top="80"
@@ -15,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"
:rules="formRules">
<!-- 配置项 -->
<a-form-item field="keyName" label="配置项">
@@ -257,7 +257,7 @@
}
.param-addition {
margin-right: 20px;
margin-bottom: 20px;
justify-content: flex-end;
cursor: pointer;
user-select: none;

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="title"
:top="80"
@@ -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"
:rules="formRules">
<!-- 配置项 -->
<a-form-item v-if="visible"

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="title"
:top="30"
@@ -16,8 +16,7 @@
<a-form :model="formModel"
ref="formRef"
label-align="right"
:label-col-props="{ span: 7 }"
:wrapper-col-props="{ span: 16 }"
:auto-label-width="true"
:rules="formRules">
<!-- 上级菜单 -->
<a-form-item field="parentId" label="上级菜单">

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"
@@ -15,8 +15,7 @@
<a-spin class="full" :loading="loading">
<a-form :model="formModel"
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"

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="title"
:top="80"
@@ -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"
:rules="formRules">
<!-- 角色名称 -->
<a-form-item field="name" label="角色名称">

View File

@@ -1,6 +1,6 @@
<template>
<a-modal v-model:visible="visible"
body-class="modal-form"
body-class="modal-form-small"
title-align="start"
title="分配菜单"
width="80%"

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="title"
:top="80"
@@ -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"
:rules="formRules">
<!-- 用户名 -->
<a-form-item field="username" label="用户名">

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="分配角色"
:top="120"
@@ -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="username" label="用户名">
<a-input v-model="updateUser.username" :disabled="true" />

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="重置密码"
:top="120"
@@ -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="username" label="用户名">
<a-input v-model="updateUser.username" :disabled="true" />