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:
2026-08-13 00:02:31 +08:00
parent 748dd80d4a
commit 563909fafa
11 changed files with 371 additions and 166 deletions
+53 -12
View File
@@ -171,6 +171,27 @@
<template #detailAddress="{ row }">
<span class="port-terminal-page__detail-address">{{ row.detailAddress || '-' }}</span>
</template>
<template #detailAddress-form>
<el-input
v-model="form.detailAddress"
class="detail-address-input"
clearable
maxlength="255"
show-word-limit
placeholder="请输入"
/>
</template>
<template #remark-form>
<el-input
v-model="form.remark"
class="remark-input"
type="textarea"
:rows="2"
maxlength="200"
show-word-limit
placeholder="请输入"
/>
</template>
<template #longitude-form>
<el-input
v-model="form.longitude"
@@ -195,7 +216,7 @@
@load="onLoad(page, query)"
/>
<el-dialog title="港口码头主数据导入" append-to-body v-model="excelBox" width="555px">
<el-dialog title="港口码头主数据导入" append-to-body v-model="excelBox" width="500px">
<avue-form :option="excelOption" v-model="excelForm">
<template #excelTemplate>
<el-button type="primary" @click="handleTemplate">
@@ -369,6 +390,7 @@ export default {
height: 'auto',
calcHeight: 32,
dialogWidth: 980,
dialogCustomClass: 'port-terminal-edit-dialog',
labelPosition: 'right',
labelWidth: 'auto',
tip: false,
@@ -396,7 +418,7 @@ export default {
formslot: true,
width: 140,
span: 12,
order: 70,
order: 30,
placeholder: '请输入编码',
rules: [
{ required: true, message: '请输入编码', trigger: 'blur' },
@@ -412,7 +434,7 @@ export default {
search: true,
searchOrder: 7,
span: 12,
order: 80,
order: 20,
placeholder: '请输入',
rules: [{ required: true, message: '请输入港口/码头名称', trigger: 'blur' }],
},
@@ -424,7 +446,7 @@ export default {
searchOrder: 6,
formslot: true,
span: 24,
order: 100,
order: 10,
dicData: [
{ label: '全部', value: '' },
{ label: '港口', value: '港口' },
@@ -444,7 +466,7 @@ export default {
dicData: [],
hide: true,
span: 12,
order: 90,
order: 100,
placeholder: '请选择',
rules: [{ required: false, message: '请选择上级港口', trigger: 'change' }],
change: ({ value }) => this.handleParentChange(value),
@@ -478,7 +500,7 @@ export default {
filterable: true,
dicData: [],
span: 12,
order: 60,
order: 40,
minWidth: 140,
overHidden: false,
placeholder: '自动带出',
@@ -515,6 +537,7 @@ export default {
type: 'select',
formslot: true,
hide: true,
order: 60,
props: {
label: 'title',
value: 'id',
@@ -543,7 +566,7 @@ export default {
formslot: true,
minWidth: 130,
span: 12,
order: 20,
order: 80,
placeholder: '请输入',
overHidden: false,
rules: [
@@ -557,7 +580,7 @@ export default {
formslot: true,
minWidth: 130,
span: 12,
order: 10,
order: 90,
placeholder: '请输入',
overHidden: false,
rules: [
@@ -578,13 +601,12 @@ export default {
{
label: '详细地址',
prop: 'detailAddress',
type: 'textarea',
slot: true,
minRows: 3,
formslot: true,
span: 24,
minWidth: 220,
overHidden: false,
order: 30,
order: 70,
placeholder: '请输入',
maxlength: 255,
showWordLimit: true,
@@ -611,8 +633,9 @@ export default {
label: '备注',
prop: 'remark',
type: 'textarea',
minRows: 4,
minRows: 2,
span: 24,
formslot: true,
hide: true,
maxlength: 200,
showWordLimit: true,
@@ -1338,3 +1361,21 @@ export default {
padding: 4px 0;
}
</style>
<style lang="scss">
/* 港口码头编辑/新增弹窗:所有 input 文本框、select 下拉控件统一宽度 250px */
.port-terminal-edit-dialog {
.el-input,
.el-select {
width: 250px !important;
}
/* 详细地址为整行字段,放宽到占满整行 */
.detail-address-input {
width: 81% !important;
}
/* 备注宽度 80% */
.remark-input {
width: 80% !important;
}
}
</style>