style(transportCapacity): 优化船舶表单布局和标签样式
- 船舶表单“安放龙骨日期/建造完工日期”label宽度收窄至88px并支持换行 - 船舶证书信息两块表单调整为4列布局,字段span由8改为6 - contract-manage和track-tracking页签名标签最大宽度限制为96px,防止过宽 - project-apply业务部门选择组件改用el-tree-select支持树形选择,辅助函数新增 - 全局样式调整el-tree-select及el-cascader去除圆圈,改用箭头和文字高亮展示 - 控制节点展开箭头、选中状态和悬浮效果统一视觉风格
This commit is contained in:
@@ -28,3 +28,14 @@
|
||||
- 已去 gap 的 footer 容器:`vehicle/customer-archive.vue`(`.archive-form__footer`)、`business/components/master-order-editor.vue`(`footer`)、`business/components/master-order-dispatch.vue`(`.segment-actions`/`.pending-actions`)、`business/project-apply.vue`(`.project-apply-dialog__footer`)、`business/components/business-crud-page.vue`(`.business-crud-form-page-dialog .avue-form__menu`)、payment 6 个表单页(`*__actions`)、`settlement/components/pre-settlement-editor.vue`(`&__page-actions`)、`settlement/components/formal-settlement-editor.vue`(`.formal-editor__page-actions`)、`settlement/receivable-payable-detail.vue`(`.settlement-detail-page__actions`)。
|
||||
- 风控:确认 Avue 的 `.avue-form__menu`/`.avue-dialog__footer` 自身不带按钮间距,去掉 gap 后由 EP 默认 12px margin 接管(不会贴死)。
|
||||
- 范围说明:本次聚焦近几轮在统一的模块(vehicle/payment/business/settlement)。若要把 loading-manage、contract-manage、transit 等其它模块的底部栏也纳入,需再处理。
|
||||
|
||||
## 船舶表单「安放龙骨日期/建造完工日期」label 收窄并换行
|
||||
- 起因:用户截图 `transportCapacity/ship` 新增船舶弹窗,指出该字段 label 宽达 185px,要求最大 88px 并允许换行。
|
||||
- 改动:`src/views/transportCapacity/ship.vue` 第 169 行,给该 `el-form-item` 增加 `label-width="88px"` 覆盖全局 `label-width="100"`;全局 `.ship-form :deep(.el-form-item__label)` 已设置 `white-space: normal; line-height: 20px`,换行已支持。
|
||||
|
||||
## 船舶证书信息两块表单改 4 列
|
||||
- 起因:用户截图 `transportCapacity/ship` 船舶证书信息,指出「船舶所有权证书」「内河船舶安全与环保证书」两块想改成 4 列。
|
||||
- 改动:`src/views/transportCapacity/ship.vue`
|
||||
- 「船舶所有权证书」5 个字段:第一行 `登记号码/初次登记号码/船舶所有人/取得所有权日期` 4 列,第二行 `船舶识别号` 1 列(所有 `el-col :span="8"` → `:span="6"`)。
|
||||
- 「内河船舶安全与环保证书」4 个字段:合并为一行 4 列(`总吨/净吨/船检登记号/船舶类型`),`el-col :span="8"` → `:span="6"`。
|
||||
- 未改动:船舶国籍证书、最低安全配员证书(日期范围,保持 `span=16` 整行)、光船租赁登记证明书、船舶营业运输证书(用户未要求)。
|
||||
|
||||
@@ -1104,3 +1104,92 @@
|
||||
.el-select__wrapper:not(.is-disabled) .el-select__selected-item {
|
||||
color: #606266 !important;
|
||||
}
|
||||
|
||||
// ============ 全局 el-tree-select 样式:隐藏圆圈/复选框,统一为树形 ▶ 箭头展开风格 ============
|
||||
// 目标:将所有带 ○/●/☑ 圆圈的 tree-select 下拉改为纯树形展开(▶ 箭头 + 选中蓝字),与截图2一致。
|
||||
.el-tree-select {
|
||||
// 隐藏下拉面板内的 checkbox / radio 圆圈
|
||||
.el-tree-node__content > .el-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 展开箭头始终可见(即使叶子节点也保留占位,保证对齐)
|
||||
.el-tree-node__expand-icon {
|
||||
font-size: 12px;
|
||||
color: #c0c4cc;
|
||||
|
||||
&.is-leaf {
|
||||
// 叶子节点:透明占位符,保持缩进对齐
|
||||
color: transparent;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-leaf) {
|
||||
// 可展开节点:hover 加深
|
||||
&:hover {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选中节点:蓝色文字高亮(替代原来的 ● 实心圆)
|
||||
.el-tree-node.is-current > .el-tree-node__content {
|
||||
color: var(--el-color-primary, #409eff);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// hover 态
|
||||
.el-tree-node__content:hover {
|
||||
background-color: var(--el-fill-color-light, #f5f7fa);
|
||||
}
|
||||
|
||||
// 节点标签文字
|
||||
.el-tree-node__label {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
// 选中节点的标签颜色继承 is-current 的蓝色
|
||||
.el-tree-node.is-current > .el-tree-node__content > .el-tree-node__label {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// ============ 全局 el-cascader(checkStrictly)样式:隐藏 ○/● 单选圆圈 ============
|
||||
// 当 el-cascader 配置 checkStrictly:true 时,面板内每项前显示 el-radio 圆圈。
|
||||
// 全局隐藏这些圆圈,改为纯文字选中高亮风格,与 tree-select 统一。
|
||||
.el-cascader-panel {
|
||||
// 隐藏级联面板内的 radio 单选圆圈
|
||||
.el-cascader-node__prefix {
|
||||
.el-radio {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 选中项:蓝色文字 + 加粗(替代原来的 ● 实心圆)
|
||||
.el-cascader-node.is-active {
|
||||
.el-cascader-node__label {
|
||||
color: var(--el-color-primary, #409eff);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// hover 态
|
||||
.el-cascader-node:hover {
|
||||
background-color: var(--el-fill-color-light, #f5f7fa);
|
||||
}
|
||||
|
||||
// 节点标签默认颜色
|
||||
.el-cascader-node__label {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
// 禁用态
|
||||
.el-cascader-node.is-disabled {
|
||||
color: var(--el-text-color-placeholder, #c0c4cc);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2345,6 +2345,7 @@ export default {
|
||||
:deep(.el-descriptions__label) {
|
||||
display: inline-block;
|
||||
min-width: 96px;
|
||||
max-width: 96px;
|
||||
padding-right: 12px;
|
||||
color: #606266;
|
||||
text-align: right;
|
||||
|
||||
@@ -157,21 +157,19 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务部门" prop="businessDeptId">
|
||||
<el-select
|
||||
<el-tree-select
|
||||
v-model="form.businessDeptId"
|
||||
placeholder="请选择业务部门"
|
||||
:data="businessDeptTreeOptions"
|
||||
:props="{ label: 'label', value: 'value', children: 'children' }"
|
||||
node-key="value"
|
||||
check-strictly
|
||||
filterable
|
||||
clearable
|
||||
:render-after-expand="false"
|
||||
style="width: 100%"
|
||||
:disabled="isBasicInfoReadonly"
|
||||
@change="handleBusinessDeptChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in deptOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="承办部门" prop="undertakeDeptId">
|
||||
<el-cascader
|
||||
@@ -990,6 +988,7 @@ export default {
|
||||
},
|
||||
deptOptions: [],
|
||||
deptTreeOptions: [],
|
||||
businessDeptTreeOptions: [],
|
||||
deptCascaderProps: {
|
||||
label: 'label',
|
||||
value: 'value',
|
||||
@@ -1765,8 +1764,9 @@ export default {
|
||||
];
|
||||
},
|
||||
handleBusinessDeptChange(value) {
|
||||
const dept = this.deptOptions.find(item => item.value === value);
|
||||
this.form.businessDeptName = dept ? dept.rawLabel : '';
|
||||
// el-tree-select 返回的是 node-key 值,从树中查找节点获取名称
|
||||
const label = this.findDeptLabel(this.businessDeptTreeOptions, value);
|
||||
this.form.businessDeptName = label;
|
||||
this.$refs.projectForm?.validateField('businessDeptId');
|
||||
},
|
||||
handleUndertakeDeptChange(value) {
|
||||
@@ -1785,6 +1785,10 @@ export default {
|
||||
this.dialogType === 'add' ? this.excludeExternalOrganization(deptTree) : deptTree;
|
||||
this.deptOptions = this.flattenDept(deptTree);
|
||||
this.deptTreeOptions = this.toDeptCascaderOptions(undertakeDeptTree);
|
||||
// 业务部门用 el-tree-select,需要树形数据(label/value/children 格式)
|
||||
this.businessDeptTreeOptions = this.toTreeSelectOptions(
|
||||
this.dialogType === 'add' ? this.excludeExternalOrganization(deptTree) : deptTree
|
||||
);
|
||||
});
|
||||
},
|
||||
excludeExternalOrganization(list = []) {
|
||||
@@ -1821,6 +1825,25 @@ export default {
|
||||
return result;
|
||||
}, []);
|
||||
},
|
||||
// 将后端部门树转为 el-tree-select 需要的 {label, value, children} 格式
|
||||
toTreeSelectOptions(list = []) {
|
||||
return (list || []).map(item => ({
|
||||
label: item.title || item.deptName || item.name,
|
||||
value: item.id,
|
||||
children: item.children?.length ? this.toTreeSelectOptions(item.children) : undefined,
|
||||
}));
|
||||
},
|
||||
// 从树形数据中根据 value 查找 label
|
||||
findDeptLabel(tree, value) {
|
||||
for (const node of tree) {
|
||||
if (node.value === value) return node.label;
|
||||
if (node.children?.length) {
|
||||
const found = this.findDeptLabel(node.children, value);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
},
|
||||
loadCargoTypeOptions() {
|
||||
getSystemDictionary({ code: 'type_of_goods' }).then(res => {
|
||||
this.cargoTypeOptions = (res.data.data || []).map(item => ({
|
||||
|
||||
@@ -279,6 +279,7 @@ export default {
|
||||
|
||||
:deep(.track-tracking-page__search .el-form-item__label) {
|
||||
min-width: 96px;
|
||||
max-width: 96px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -143,7 +143,7 @@
|
||||
>
|
||||
<section-card title="基础船舶信息">
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="船舶所属组织" prop="organizationName">
|
||||
<el-select
|
||||
v-model="shipForm.organizationName"
|
||||
@@ -160,13 +160,17 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="船名" prop="shipName">
|
||||
<el-input v-model="shipForm.shipName" maxlength="20" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="安放龙骨日期/建造完工日期" prop="keelLayingDate">
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="安放龙骨日期/建造完工日期"
|
||||
prop="keelLayingDate"
|
||||
label-width="88px"
|
||||
>
|
||||
<div class="date-range-inline">
|
||||
<el-date-picker
|
||||
v-model="shipForm.keelLayingDate"
|
||||
@@ -186,7 +190,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="总长(m)" prop="totalLength">
|
||||
<el-input
|
||||
v-model="shipForm.totalLength"
|
||||
@@ -194,7 +198,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="船宽(m)" prop="shipWidth">
|
||||
<el-input
|
||||
v-model="shipForm.shipWidth"
|
||||
@@ -202,7 +206,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="型深(m)" prop="moldedDepth">
|
||||
<el-input
|
||||
v-model="shipForm.moldedDepth"
|
||||
@@ -210,9 +214,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="最大船高(m)" prop="maxShipHeight">
|
||||
<el-input
|
||||
v-model="shipForm.maxShipHeight"
|
||||
@@ -220,7 +222,9 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="空载吃水(t)" prop="lightDraft">
|
||||
<el-input
|
||||
v-model="shipForm.lightDraft"
|
||||
@@ -228,7 +232,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="满载吃水(t)" prop="fullLoadDraft">
|
||||
<el-input
|
||||
v-model="shipForm.fullLoadDraft"
|
||||
@@ -236,9 +240,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="航区" prop="navigationArea">
|
||||
<div class="navigation-area-field">
|
||||
<el-select v-model="shipForm.navigationArea" placeholder="请选择">
|
||||
@@ -279,24 +281,22 @@
|
||||
<div class="cert-block">
|
||||
<div class="cert-block__title">船舶所有权证书</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="登记号码" prop="ownershipRegistrationNo">
|
||||
<el-input v-model="shipForm.ownershipRegistrationNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="初次登记号码" prop="initialRegistrationNo">
|
||||
<el-input v-model="shipForm.initialRegistrationNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="船舶所有人" prop="shipOwner">
|
||||
<el-input v-model="shipForm.shipOwner" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="取得所有权日期" prop="ownershipAcquisitionDate">
|
||||
<el-date-picker
|
||||
v-model="shipForm.ownershipAcquisitionDate"
|
||||
@@ -305,7 +305,9 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="船舶识别号" prop="shipIdentifierNo">
|
||||
<el-input
|
||||
v-model="shipForm.shipIdentifierNo"
|
||||
@@ -324,7 +326,7 @@
|
||||
<div class="cert-block">
|
||||
<div class="cert-block__title">内河船舶安全与环保证书</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="总吨" prop="grossTonnage">
|
||||
<el-input-number
|
||||
v-model="shipForm.grossTonnage"
|
||||
@@ -334,7 +336,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="净吨" prop="netTonnage">
|
||||
<el-input-number
|
||||
v-model="shipForm.netTonnage"
|
||||
@@ -344,14 +346,12 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="船检登记号" prop="shipInspectionNo">
|
||||
<el-input v-model="shipForm.shipInspectionNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="船舶类型" prop="shipType">
|
||||
<el-select v-model="shipForm.shipType" placeholder="请选择船舶类型" clearable>
|
||||
<el-option label="散货船" value="散货船" />
|
||||
|
||||
Reference in New Issue
Block a user