style(ui): 调整多处textarea的最小行数及优化样式
- 将多处备注和说明的textarea控件minRows由4改为2,提升界面紧凑性 - 修改.port-terminal-edit-dialog弹窗内input和textarea的自动完成功能为关闭状态 - 调整部分弹窗宽度和备注输入框宽度样式,适配更佳显示效果 - 新增铁路车站编辑弹窗标签宽度108px修正样式,覆盖默认auto计算值 - 删除element-ui.scss中多余的margin-bottom样式 - 为port-terminal相关弹窗footer去除顶部边框,优化视觉分割
This commit is contained in:
@@ -172,7 +172,7 @@ export const getCargoTypeOption = ctx => ({
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
placeholder: '请输入',
|
placeholder: '请输入',
|
||||||
|
|||||||
@@ -137,7 +137,7 @@ export const createOption = () => ({
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
minWidth: 160,
|
minWidth: 160,
|
||||||
overHidden: true,
|
overHidden: true,
|
||||||
|
|||||||
@@ -254,7 +254,7 @@ export const option = createCrudOption([
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
maxlength: 200,
|
maxlength: 200,
|
||||||
showWordLimit: true,
|
showWordLimit: true,
|
||||||
|
|||||||
@@ -127,7 +127,7 @@ export const option = {
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
maxlength: 500,
|
maxlength: 500,
|
||||||
|
|||||||
@@ -101,7 +101,7 @@ export const option = {
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
addDisplay: false,
|
addDisplay: false,
|
||||||
|
|||||||
@@ -362,7 +362,7 @@ export const option = {
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
order: 330,
|
order: 330,
|
||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
|
|||||||
@@ -500,7 +500,7 @@ export const option = {
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
order: 810,
|
order: 810,
|
||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
@@ -640,7 +640,7 @@ export const option = {
|
|||||||
label: '承运信息',
|
label: '承运信息',
|
||||||
prop: 'carrierJson',
|
prop: 'carrierJson',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
hide: true,
|
hide: true,
|
||||||
display: false,
|
display: false,
|
||||||
@@ -652,7 +652,7 @@ export const option = {
|
|||||||
label: '过程配置',
|
label: '过程配置',
|
||||||
prop: 'processJson',
|
prop: 'processJson',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
hide: true,
|
hide: true,
|
||||||
display: false,
|
display: false,
|
||||||
@@ -664,7 +664,7 @@ export const option = {
|
|||||||
label: '运费信息',
|
label: '运费信息',
|
||||||
prop: 'freightJson',
|
prop: 'freightJson',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
hide: true,
|
hide: true,
|
||||||
display: false,
|
display: false,
|
||||||
|
|||||||
@@ -147,7 +147,7 @@ export const option = {
|
|||||||
label: '事故原因及损坏情况',
|
label: '事故原因及损坏情况',
|
||||||
prop: 'accidentReasonDamage',
|
prop: 'accidentReasonDamage',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
search: true,
|
search: true,
|
||||||
minWidth: 220,
|
minWidth: 220,
|
||||||
|
|||||||
@@ -137,7 +137,7 @@ export const option = {
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
overHidden: true,
|
overHidden: true,
|
||||||
|
|||||||
@@ -118,7 +118,7 @@ export const option = {
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
overHidden: true,
|
overHidden: true,
|
||||||
|
|||||||
@@ -155,7 +155,7 @@ export const option = {
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
overHidden: true,
|
overHidden: true,
|
||||||
|
|||||||
@@ -127,7 +127,7 @@ export const option = {
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
overHidden: true,
|
overHidden: true,
|
||||||
|
|||||||
@@ -123,7 +123,7 @@ export const option = {
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
overHidden: true,
|
overHidden: true,
|
||||||
|
|||||||
@@ -65,7 +65,7 @@ export const option = {
|
|||||||
label: '变更内容',
|
label: '变更内容',
|
||||||
prop: 'changeContent',
|
prop: 'changeContent',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
search: true,
|
search: true,
|
||||||
minWidth: 260,
|
minWidth: 260,
|
||||||
@@ -79,7 +79,7 @@ export const option = {
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
overHidden: true,
|
overHidden: true,
|
||||||
|
|||||||
@@ -315,7 +315,6 @@
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||||
margin-bottom: 8px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
@@ -758,3 +757,7 @@
|
|||||||
opacity: 0.55;
|
opacity: 0.55;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.avue-crud__dialog .avue-dialog__footer{
|
||||||
|
border-top: 0 !important;
|
||||||
|
}
|
||||||
|
|||||||
@@ -429,7 +429,7 @@ export default {
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
hide: true,
|
hide: true,
|
||||||
maxlength: 200,
|
maxlength: 200,
|
||||||
|
|||||||
@@ -271,7 +271,7 @@ export default {
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
hide: true,
|
hide: true,
|
||||||
maxlength: 200,
|
maxlength: 200,
|
||||||
|
|||||||
@@ -75,6 +75,7 @@
|
|||||||
filterable
|
filterable
|
||||||
:disabled="isParentRegionLocked"
|
:disabled="isParentRegionLocked"
|
||||||
:placeholder="isParentRegionLocked ? '自动带出' : '请选择国家'"
|
:placeholder="isParentRegionLocked ? '自动带出' : '请选择国家'"
|
||||||
|
autocomplete="off"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
@change="handleCountryChange"
|
@change="handleCountryChange"
|
||||||
>
|
>
|
||||||
@@ -390,7 +391,7 @@ export default {
|
|||||||
option: {
|
option: {
|
||||||
height: 'auto',
|
height: 'auto',
|
||||||
calcHeight: 32,
|
calcHeight: 32,
|
||||||
dialogWidth: 980,
|
dialogWidth: 900,
|
||||||
dialogCustomClass: 'port-terminal-edit-dialog',
|
dialogCustomClass: 'port-terminal-edit-dialog',
|
||||||
labelPosition: 'right',
|
labelPosition: 'right',
|
||||||
labelWidth: 'auto',
|
labelWidth: 'auto',
|
||||||
@@ -1233,6 +1234,7 @@ export default {
|
|||||||
this.handleCategoryChange(this.form.category, false);
|
this.handleCategoryChange(this.form.category, false);
|
||||||
this.syncTerminalCode();
|
this.syncTerminalCode();
|
||||||
done();
|
done();
|
||||||
|
setTimeout(() => this.disableDialogAutocomplete(), 50);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@@ -1256,8 +1258,21 @@ export default {
|
|||||||
this.handleDistrictChange(this.form.districtCode);
|
this.handleDistrictChange(this.form.districtCode);
|
||||||
}
|
}
|
||||||
done();
|
done();
|
||||||
|
setTimeout(() => this.disableDialogAutocomplete(), 50);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
disableDialogAutocomplete() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const dialog = document.querySelector('.port-terminal-edit-dialog');
|
||||||
|
if (!dialog) return;
|
||||||
|
dialog.querySelectorAll('input, textarea').forEach(el => {
|
||||||
|
el.setAttribute('autocomplete', 'off');
|
||||||
|
el.setAttribute('autocorrect', 'off');
|
||||||
|
el.setAttribute('autocapitalize', 'off');
|
||||||
|
el.setAttribute('spellcheck', 'false');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
searchReset() {
|
searchReset() {
|
||||||
this.query = {};
|
this.query = {};
|
||||||
this.setCityOptions([]);
|
this.setCityOptions([]);
|
||||||
@@ -1374,9 +1389,9 @@ export default {
|
|||||||
//.detail-address-input {
|
//.detail-address-input {
|
||||||
// width: 81% !important;
|
// width: 81% !important;
|
||||||
//}
|
//}
|
||||||
/* 备注宽度 80% */
|
/* 备注宽度 83% */
|
||||||
.remark-input {
|
.remark-input {
|
||||||
width: 80% !important;
|
width: 85% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -202,8 +202,9 @@ export default {
|
|||||||
height: 'auto',
|
height: 'auto',
|
||||||
calcHeight: 32,
|
calcHeight: 32,
|
||||||
dialogWidth: 980,
|
dialogWidth: 980,
|
||||||
|
dialogCustomClass: 'railway-station-edit-dialog',
|
||||||
labelPosition: 'right',
|
labelPosition: 'right',
|
||||||
labelWidth: 'auto',
|
labelWidth: '108px',
|
||||||
tip: false,
|
tip: false,
|
||||||
searchShow: true,
|
searchShow: true,
|
||||||
searchMenuSpan: 24,
|
searchMenuSpan: 24,
|
||||||
@@ -339,7 +340,7 @@ export default {
|
|||||||
label: '详细地址',
|
label: '详细地址',
|
||||||
prop: 'detailAddress',
|
prop: 'detailAddress',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 3,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
minWidth: 220,
|
minWidth: 220,
|
||||||
overHidden: false,
|
overHidden: false,
|
||||||
@@ -393,7 +394,7 @@ export default {
|
|||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
hide: true,
|
hide: true,
|
||||||
maxlength: 200,
|
maxlength: 200,
|
||||||
@@ -892,5 +893,16 @@ export default {
|
|||||||
:deep(.el-table td .cell) {
|
:deep(.el-table td .cell) {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
/* 铁路车站弹窗:强制 label 宽度 108px(覆盖 Avue 默认 auto 计算值) */
|
||||||
|
.railway-station-edit-dialog {
|
||||||
|
.el-form-item__label {
|
||||||
|
width: 108px !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -153,7 +153,7 @@ const option = reactive({
|
|||||||
url: 'link',
|
url: 'link',
|
||||||
},
|
},
|
||||||
hide: true,
|
hide: true,
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -155,7 +155,7 @@ export default {
|
|||||||
url: 'link',
|
url: 'link',
|
||||||
},
|
},
|
||||||
hide: true,
|
hide: true,
|
||||||
minRows: 4,
|
minRows: 2,
|
||||||
span: 24,
|
span: 24,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user