b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style(transportCapacity): 优化船舶表单布局和标签样式

Browse Source 
- 船舶表单“安放龙骨日期/建造完工日期”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:
赵忠林
2026-08-27 16:40:38 +08:00
parent 9342e674c5
commit fc70aeb2af
6 changed files with 165 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/business/contract-manage.vue
+1
View File
@@ -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;
src/views/business/project-apply.vue
+35 -12
View File
@@ -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 => ({
src/views/transit/track-tracking.vue
+1
View File
@@ -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;
}
src/views/transportCapacity/ship.vue
+28 -28
View File
@@ -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="散货船" />