style(dialogs): 统一全站自定义表单弹窗样式为客商档案风格
- 新增全局弹窗表单标准类 .dialog-form--carded,实现卡片白底分组风格 - 规范表单标签宽度为 calc(6em + 24px),右对齐且垂直居中 - 统一 input/select/cascader/tree-select/date-editor/textarea 等控件宽度为 250px - 保持 radio/checkbox 组宽度自适应 - 应用样式改造多个弹窗组件:流程变更、流程删除、参数编辑、锁定用户、解锁确认、用户编辑与修改密码、新建导入 - 港口码头编辑弹窗内 input 宽度统一为 250px,调整详细地址为单行输入框并放宽宽度 - 调整备注字段文本域高度,优化整体弹窗表单布局与风格统一
This commit is contained in:
+46
-28
@@ -126,37 +126,55 @@
|
||||
<el-dialog
|
||||
:title="title"
|
||||
v-model="box"
|
||||
width="50%"
|
||||
width="560px"
|
||||
:before-close="beforeClose"
|
||||
append-to-body
|
||||
class="dialog-form--carded"
|
||||
>
|
||||
<el-form :disabled="view" ref="form" :model="form" label-width="auto">
|
||||
<!-- 表单字段 -->
|
||||
<el-form-item label="参数名:" prop="paramName">
|
||||
<el-input v-model="form.paramName" placeholder="请输入参数名" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="paramKey">
|
||||
<template #label>
|
||||
<el-tooltip content="参数键为系统内部唯一标识,请勿随意修改" placement="top">
|
||||
<el-icon style="margin-right: 4px; vertical-align: middle; color: #909399; cursor: pointer"><el-icon-question-filled /></el-icon>
|
||||
</el-tooltip>
|
||||
<span>参数键:</span>
|
||||
</template>
|
||||
<el-input v-model="form.paramKey" placeholder="请输入参数键" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="paramValue">
|
||||
<template #label>
|
||||
<el-tooltip content="包含敏感关键词的配置不展示具体数值" placement="top">
|
||||
<el-icon style="margin-right: 4px; vertical-align: middle; color: #909399; cursor: pointer"><el-icon-question-filled /></el-icon>
|
||||
</el-tooltip>
|
||||
<span>参数值:</span>
|
||||
</template>
|
||||
<el-input v-model="form.paramValue" placeholder="请输入参数值" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注:" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<section-card title="参数信息">
|
||||
<el-form
|
||||
:disabled="view"
|
||||
ref="form"
|
||||
:model="form"
|
||||
label-position="right"
|
||||
label-width="calc(6em + 24px)"
|
||||
>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="参数名" prop="paramName">
|
||||
<el-input v-model="form.paramName" placeholder="请输入参数名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="paramKey">
|
||||
<template #label>
|
||||
<el-tooltip content="参数键为系统内部唯一标识,请勿随意修改" placement="top">
|
||||
<el-icon style="margin-right: 4px; vertical-align: middle; color: #909399; cursor: pointer"><el-icon-question-filled /></el-icon>
|
||||
</el-tooltip>
|
||||
<span>参数键</span>
|
||||
</template>
|
||||
<el-input v-model="form.paramKey" placeholder="请输入参数键" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="paramValue">
|
||||
<template #label>
|
||||
<el-tooltip content="包含敏感关键词的配置不展示具体数值" placement="top">
|
||||
<el-icon style="margin-right: 4px; vertical-align: middle; color: #909399; cursor: pointer"><el-icon-question-filled /></el-icon>
|
||||
</el-tooltip>
|
||||
<span>参数值</span>
|
||||
</template>
|
||||
<el-input v-model="form.paramValue" placeholder="请输入参数值" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</section-card>
|
||||
<!-- 表单按钮 -->
|
||||
<template #footer>
|
||||
<span v-if="!view" class="dialog-footer">
|
||||
|
||||
Reference in New Issue
Block a user