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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user