feat(business-crud-page): 统一独立表单页顶部页面标题样式及展示
- 独立表单页 shipping-template、transport-plan、waybill-manage 加入统一的 archive-page-form__title 页面标题支持 - 全局样式抽离 archive-page-form__title 至 element-ui.scss，实现统一样式和竖条修饰 - loading-manage/form 页面新增页标题展示，保持风格一致 - master-order 编辑模式下新增页面标题支持，动态显示编辑或新增总单 - business-crud-page 组件新增 formPageTitle 属性，支持父级传递页面标题数据 - 优化多个业务页面表格和弹窗样式，调整列宽及边框圆角阴影，提高视觉一致性 - 删除 customer-archive.vue 中重复本地标题样式定义，使用全局统一样式 - 全站弹窗分组组件 section-card 相关设计规范文档更新，强化统一卡片风格 - 移除 cargo-type.vue 添加 "新建" 按钮逻辑，调整按钮显示权限 - 统一所有新增弹窗的底部操作区浮动效果及内容区最大高度限制，提升交互体验
This commit is contained in:
@@ -442,7 +442,7 @@ export const option = {
|
||||
searchLabel: '状态',
|
||||
searchOrder: 2,
|
||||
dicData: planStatusOptions,
|
||||
minWidth: 120,
|
||||
minWidth: 82,
|
||||
fixed: 'right',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
|
||||
@@ -8,8 +8,8 @@ export const transportReconciliationTableColumns = [
|
||||
{ prop: 'contractName', label: '合同名称', minWidth: 150 },
|
||||
{ prop: 'settlementAmount', label: '结算金额', minWidth: 120, money: true },
|
||||
{ prop: 'reconciliationModeName', label: '对账模式', minWidth: 110 },
|
||||
{ prop: 'externalBillCount', label: '账单总数（条）', minWidth: 110 },
|
||||
{ prop: 'matchedCount', label: '匹配数（条）', minWidth: 100 },
|
||||
{ prop: 'externalBillCount', label: '账单总数（条）', minWidth: 130 },
|
||||
{ prop: 'matchedCount', label: '匹配数（条）', minWidth: 120 },
|
||||
{ prop: 'reconciliationStatusName', label: '对账状态', minWidth: 100 },
|
||||
{ prop: 'createUserName', label: '创建人', minWidth: 100 },
|
||||
{ prop: 'createTime', label: '创建时间', minWidth: 160 },
|
||||
|
||||
@@ -46,7 +46,7 @@ export const option = {
|
||||
viewBtn: true,
|
||||
selection: true,
|
||||
dialogClickModal: false,
|
||||
menuWidth: 120,
|
||||
menuWidth: 140,
|
||||
column: [
|
||||
{
|
||||
label: '车船类型',
|
||||
|
||||
@@ -393,6 +393,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 5b) 独立表单页顶部页面标题（与 vehicle/customer-archive 编辑弹窗一致）
|
||||
// 全站统一：18px / 600 / #303133，底部 20px 间距，4px 主色竖条 + 8px 间距
|
||||
.archive-page-form__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
color: #303133;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
flex: none;
|
||||
//width: 4px;
|
||||
height: 16px;
|
||||
//margin-right: 8px;
|
||||
border-radius: 2px;
|
||||
//background-color: var(--el-color-primary);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
// 6) 弹窗内两列表单栅格工具类（与 project-apply 一致）
|
||||
.form-grid-2 {
|
||||
display: grid;
|
||||
|
||||
@@ -21,9 +21,6 @@
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" v-if="permission.cargo_type_add" @click="$refs.crud.rowAdd()">
|
||||
<el-icon class="el-icon--left"><Plus /></el-icon>新建货物类型
|
||||
</el-button>
|
||||
<el-button type="primary" plain v-if="permission.cargo_type_import" @click="handleImport"
|
||||
><el-icon class="el-icon--left"><Upload /></el-icon>批量导入</el-button
|
||||
>
|
||||
@@ -130,7 +127,7 @@ import { openImportDialog } from '@/utils/import-excel';
|
||||
import { getUploadHeaders } from '@/utils/upload';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
import { Plus, Upload, Download, Delete } from '@element-plus/icons-vue';
|
||||
import { Upload, Download, Delete } from '@element-plus/icons-vue';
|
||||
|
||||
// 导入失败明细中，每个错误文本对应的「字段列」与「规则说明」
|
||||
const CARGO_TYPE_FAIL_RULES = [
|
||||
@@ -229,7 +226,7 @@ export const decorateCargoTypeFailDetail = async workbook => {
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { Plus, Upload, Download, Delete },
|
||||
components: { Upload, Download, Delete },
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
@@ -281,7 +278,7 @@ export default {
|
||||
...mapGetters(['permission']),
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: false,
|
||||
addBtn: true,
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
@@ -592,6 +589,11 @@ export default {
|
||||
:deep(.avue-crud__header) {
|
||||
margin-top: 12px;
|
||||
background: transparent;
|
||||
|
||||
// 工具栏按钮组紧贴左侧
|
||||
.avue-crud__left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
// ��除 basic-container 卡片内层 el-card 的 padding（规范 4.4）
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
<component
|
||||
:is="crudContainer"
|
||||
:option="pageFormOption"
|
||||
:form-page-title="isStandaloneFormPage ? formPageTitle : undefined"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
@@ -2595,7 +2596,7 @@
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="vehicleNo" label="车牌号/航班号/船号/班列号" width="192" />
|
||||
<el-table-column prop="vehicleNo" label="车牌号/航班号/船号/班列号" width="200" />
|
||||
<el-table-column prop="driverName" label="司机" width="128" />
|
||||
<el-table-column prop="carrierName" label="承运商" width="192" />
|
||||
<el-table-column label="运输方式" width="192">
|
||||
@@ -2610,7 +2611,7 @@
|
||||
{{ formatTransportPlanProvinceCityDistrict(row.departureAddress) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="120" fixed="right">
|
||||
<el-table-column label="状态" width="80" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<span
|
||||
:class="['business-crud-page__transport-plan-waybill-status', row.statusClass]"
|
||||
@@ -2619,7 +2620,7 @@
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="128" fixed="right">
|
||||
<el-table-column label="操作" width="80" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-link type="primary" @click="openTransportPlanWaybillDetail(row)">
|
||||
详情
|
||||
@@ -3179,7 +3180,7 @@
|
||||
width="78%"
|
||||
class="business-crud-page__route-change-dialog"
|
||||
>
|
||||
<el-tabs v-model="waybillRouteChangeTab">
|
||||
<el-tabs type="border-card" v-model="waybillRouteChangeTab">
|
||||
<el-tab-pane label="变更路线" name="change">
|
||||
<section-card title="运单地址">
|
||||
<el-table :data="waybillRouteChangeRows" border>
|
||||
@@ -3264,7 +3265,7 @@
|
||||
<el-empty v-else description="暂无路线" :image-size="60" />
|
||||
</section-card>
|
||||
<el-form label-width="auto">
|
||||
<el-form-item label="变更备注">
|
||||
<el-form-item label="变更备注" style="margin-top: 8px">
|
||||
<el-input
|
||||
v-model="waybillRouteChangeRemark"
|
||||
type="textarea"
|
||||
@@ -3455,7 +3456,7 @@
|
||||
批量删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-tabs v-model="transportPlanImportTab" class="business-crud-page__import-preview-tabs">
|
||||
<el-tabs type="border-card" v-model="transportPlanImportTab" class="business-crud-page__import-preview-tabs">
|
||||
<el-tab-pane :label="`计划单数（${transportPlanImportRows.length}）`" name="all" />
|
||||
<el-tab-pane :label="`疑似重复(${transportPlanImportDuplicateCount})`" name="duplicate" />
|
||||
</el-tabs>
|
||||
@@ -3871,7 +3872,7 @@
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
<el-table-column label="操作" width="220" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="100" align="center" fixed="right">
|
||||
<template #default="{ row, $index }">
|
||||
<div class="business-crud-page__dispatch-actions">
|
||||
<el-link type="primary" @click="handleDispatchEditRow(row, $index)">编辑</el-link>
|
||||
@@ -5576,6 +5577,9 @@ const attachmentViewerPlugins = [
|
||||
|
||||
const PageAvueForm = {
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
formPageTitle: { type: String, default: '' },
|
||||
},
|
||||
render() {
|
||||
const attrs = { ...this.$attrs };
|
||||
const rowSave = attrs.onRowSave;
|
||||
@@ -5596,9 +5600,12 @@ const PageAvueForm = {
|
||||
slot,
|
||||
])
|
||||
);
|
||||
return h('div', { class: attrs.option?.dialogCustomClass || 'business-crud-form-page-dialog' }, [
|
||||
h(resolveComponent('avue-form'), attrs, slots),
|
||||
]);
|
||||
const children = [];
|
||||
if (this.formPageTitle) {
|
||||
children.push(h('div', { class: 'archive-page-form__title' }, this.formPageTitle));
|
||||
}
|
||||
children.push(h(resolveComponent('avue-form'), attrs, slots));
|
||||
return h('div', { class: attrs.option?.dialogCustomClass || 'business-crud-form-page-dialog' }, children);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -6202,6 +6209,18 @@ export default {
|
||||
(this.isStandaloneBusinessPage && ['add', 'edit'].includes(this.$route.query.mode))
|
||||
);
|
||||
},
|
||||
formPageTitle() {
|
||||
if (
|
||||
this.isStandaloneFormPage &&
|
||||
(this.isShippingTemplatePage || this.isTransportPlanPage || this.isWaybillDetailLayout)
|
||||
) {
|
||||
return (
|
||||
this.$route.query.name ||
|
||||
`${this.$route.query.mode === 'edit' ? '编辑' : '新增'}${this.config.title || ''}`
|
||||
);
|
||||
}
|
||||
return '';
|
||||
},
|
||||
crudContainer() {
|
||||
return this.isStandaloneFormPage ? 'PageAvueForm' : 'avue-crud';
|
||||
},
|
||||
@@ -15158,8 +15177,9 @@ export default {
|
||||
|
||||
&__transport-plan-detail-head,
|
||||
&__transport-plan-waybill-card {
|
||||
border: 1px solid #dfe3e8;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
&__transport-plan-detail-head {
|
||||
@@ -15316,7 +15336,7 @@ export default {
|
||||
}
|
||||
|
||||
&__transport-plan-waybill-card {
|
||||
margin-top: 8px;
|
||||
//margin-top: 8px;
|
||||
padding: 16px 14px 12px;
|
||||
}
|
||||
|
||||
@@ -16025,7 +16045,7 @@ export default {
|
||||
|
||||
// 独立表单页（合同/运单/运输计划/运输模板）：标题分块使用白底卡片，间距 12px，与 section-card 风格一致
|
||||
:global(.business-crud-form-page-dialog:not(.el-dialog)) {
|
||||
padding: 20px 24px 96px;
|
||||
//padding: 20px 24px 96px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@@ -1739,6 +1739,8 @@ export default {
|
||||
padding: 16px;
|
||||
border: 1px solid #eff1f7;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
h3 {
|
||||
margin: 0 0 16px;
|
||||
padding-left: 12px;
|
||||
|
||||
@@ -388,6 +388,7 @@
|
||||
@update:model-value="value => !isStandaloneFormPage && (dialogVisible = value)"
|
||||
@closed="resetLoadingDialog"
|
||||
>
|
||||
<div v-if="isStandaloneFormPage" class="archive-page-form__title">{{ formPageTitle }}</div>
|
||||
<div v-loading="dialogLoading" class="loading-manage-dialog__body">
|
||||
<div v-if="dialogReadonly" class="loading-detail">
|
||||
<section-card title="配载单详情">
|
||||
@@ -724,7 +725,7 @@
|
||||
</section-card>
|
||||
|
||||
<div class="loading-manage-dialog__waybill-route-layout">
|
||||
<section-card title="待配载列表">
|
||||
<section-card title="待配载列表" style="min-height: 257px">
|
||||
<el-table
|
||||
:data="selectedWaybillRows"
|
||||
border
|
||||
@@ -1228,6 +1229,12 @@ export default {
|
||||
['add', 'edit'].includes(this.$route.query.mode)
|
||||
);
|
||||
},
|
||||
formPageTitle() {
|
||||
return (
|
||||
this.$route.query.name ||
|
||||
`${this.$route.query.mode === 'edit' ? '编辑' : '新增'}配载管理`
|
||||
);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.loadTransportTypeOptions();
|
||||
@@ -2352,7 +2359,7 @@ export default {
|
||||
.loading-manage-page {
|
||||
.loading-manage-page__search {
|
||||
padding: 12px 12px 4px;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
@@ -2472,6 +2479,7 @@ export default {
|
||||
}
|
||||
|
||||
.loading-manage-dialog {
|
||||
min-height: 12vh;
|
||||
.loading-manage-dialog__body {
|
||||
max-height: 78vh;
|
||||
overflow-y: auto;
|
||||
@@ -2504,7 +2512,7 @@ export default {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
margin-bottom: 16px;
|
||||
//margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.loading-manage-dialog__candidate-actions,
|
||||
|
||||
@@ -116,12 +116,14 @@
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<master-order-editor
|
||||
v-else-if="mode === 'editor'"
|
||||
:id="routeId"
|
||||
@back="goList"
|
||||
@dispatch="goDispatch"
|
||||
/>
|
||||
<template v-else-if="mode === 'editor'">
|
||||
<div class="archive-page-form__title">{{ masterEditorTitle }}</div>
|
||||
<master-order-editor
|
||||
:id="routeId"
|
||||
@back="goList"
|
||||
@dispatch="goDispatch"
|
||||
/>
|
||||
</template>
|
||||
<master-order-dispatch v-else-if="mode === 'dispatch'" :id="routeId" @back="goList" />
|
||||
<master-order-detail v-else :id="routeId" @back="goList" />
|
||||
<el-dialog v-model="confirm.visible" title="提示" width="400px"
|
||||
@@ -180,6 +182,9 @@ export default {
|
||||
routeId() {
|
||||
return this.$route.query.id;
|
||||
},
|
||||
masterEditorTitle() {
|
||||
return this.routeId ? '编辑总单' : '新增总单';
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'$route.query': {
|
||||
@@ -395,7 +400,7 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.master-search {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px 12px 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
@@ -419,9 +424,8 @@ export default {
|
||||
}
|
||||
}
|
||||
.master-list-panel {
|
||||
background: #fff;
|
||||
.toolbar {
|
||||
padding: 8px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
.master-card {
|
||||
@@ -513,6 +517,7 @@ export default {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
max-width: 180px;
|
||||
}
|
||||
}
|
||||
.route-connector {
|
||||
|
||||
@@ -2116,10 +2116,10 @@ export default {
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
width: 4px;
|
||||
//width: 4px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
background: #409eff;
|
||||
//background: #409eff;
|
||||
border-radius: 2px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
width="120"
|
||||
fixed="right"
|
||||
align="center"
|
||||
/><el-table-column label="操作" width="320" fixed="right" align="left"
|
||||
/><el-table-column label="操作" width="120" fixed="right" align="left"
|
||||
><template #default="{ row }"
|
||||
><div class="voucher-manage-page__actions">
|
||||
<el-link
|
||||
|
||||
@@ -741,7 +741,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 56px;
|
||||
padding: 12px;
|
||||
//padding: 12px;
|
||||
}
|
||||
|
||||
&__toolbar-left,
|
||||
|
||||
@@ -307,7 +307,7 @@ export default {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 56px;
|
||||
padding: 12px;
|
||||
//padding: 12px;
|
||||
}
|
||||
.reconciliation-page__toolbar-right {
|
||||
display: flex;
|
||||
|
||||
@@ -471,7 +471,7 @@ export default {
|
||||
}
|
||||
|
||||
.exception-disposal-page__table-panel {
|
||||
background: #fff;
|
||||
//background: #fff;
|
||||
}
|
||||
|
||||
.exception-disposal-page__toolbar {
|
||||
|
||||
@@ -410,7 +410,7 @@ export default {
|
||||
}
|
||||
|
||||
.risk-disposal-page__table-panel {
|
||||
background: #fff;
|
||||
//background: #fff;
|
||||
}
|
||||
|
||||
.risk-disposal-page__toolbar {
|
||||
|
||||
@@ -9,24 +9,44 @@
|
||||
@update:model-value="$emit('update:modelValue', $event)"
|
||||
>
|
||||
<div v-loading="detailLoading" class="vehicle-ledger">
|
||||
<section class="vehicle-ledger__overview">
|
||||
<section-card class="vehicle-ledger__overview">
|
||||
<div class="vehicle-ledger__title">
|
||||
<span>{{ vehicleDetail.plateNo || vehicle.plateNo }}</span>
|
||||
<el-tag :type="plateColorType">{{ vehicleDetail.plateColor || '-' }}</el-tag>
|
||||
<el-tag type="primary">{{ vehicleDetail.businessRelation || '-' }}</el-tag>
|
||||
</div>
|
||||
<el-descriptions :column="4" border>
|
||||
<el-descriptions-item label="所属组织">{{ vehicleDetail.organizationName || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="车辆类型">{{ vehicleDetail.vehicleType || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="能源类型">{{ vehicleDetail.energyType || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属组织">{{
|
||||
vehicleDetail.organizationName || '-'
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="车辆类型">{{
|
||||
vehicleDetail.vehicleType || '-'
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="能源类型">{{
|
||||
vehicleDetail.energyType || '-'
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="外廓尺寸(mm)">{{ dimensions }}</el-descriptions-item>
|
||||
<el-descriptions-item label="核定载质量(KG)">{{ vehicleDetail.approvedLoadKg ?? '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="准牵引总质量(KG)">{{ vehicleDetail.tractionMassKg ?? '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="行驶证档案编号">{{ vehicleDetail.drivingLicenseNo || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="道路运输证号">{{ vehicleDetail.roadTransportCertNo || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="行驶证有效期">{{ vehicleDetail.drivingLicenseEndDate || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="道路运输证有效期">{{ vehicleDetail.roadTransportCertEndDate || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="道路运输证年审有效期">{{ vehicleDetail.annualReviewEndDate || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="核定载质量(KG)">{{
|
||||
vehicleDetail.approvedLoadKg ?? '-'
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="准牵引总质量(KG)">{{
|
||||
vehicleDetail.tractionMassKg ?? '-'
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="行驶证档案编号">{{
|
||||
vehicleDetail.drivingLicenseNo || '-'
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="道路运输证号">{{
|
||||
vehicleDetail.roadTransportCertNo || '-'
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="行驶证有效期">{{
|
||||
vehicleDetail.drivingLicenseEndDate || '-'
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="道路运输证有效期">{{
|
||||
vehicleDetail.roadTransportCertEndDate || '-'
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="道路运输证年审有效期">{{
|
||||
vehicleDetail.annualReviewEndDate || '-'
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div class="vehicle-ledger__images">
|
||||
<div v-for="item in imageFields" :key="item.prop" class="vehicle-ledger__image-item">
|
||||
@@ -41,9 +61,9 @@
|
||||
<el-empty v-else :image-size="36" description="暂无图片" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section-card>
|
||||
|
||||
<el-tabs v-model="activeTab" class="vehicle-ledger__tabs" @tab-change="loadRecords">
|
||||
<el-tabs type="border-card" v-model="activeTab" class="vehicle-ledger__tabs" @tab-change="loadRecords">
|
||||
<el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name" />
|
||||
</el-tabs>
|
||||
<el-table v-loading="tableLoading" :data="records" border stripe>
|
||||
@@ -86,56 +106,316 @@ import { getList as getChangeList } from '@/api/vehicle/transport-change-record'
|
||||
import { getList as getOilElectricList } from '@/api/vehicle/oil-electric-record';
|
||||
import { getList as getEtcList } from '@/api/vehicle/etc-record';
|
||||
import { getList as getOtherExpenseList } from '@/api/vehicle/other-expense-record';
|
||||
import SectionCard from '@/components/section-card/main.vue';
|
||||
|
||||
const cols = (...items) => items.map(([label, prop, width]) => ({ label, prop, width }));
|
||||
const tabConfigs = [
|
||||
['insurance', '保险记录', getInsuranceList, cols(['车牌号', 'vehicleNo'], ['保险类型', 'insuranceType'], ['开始日期', 'startDate'], ['结束日期', 'endDate'], ['保费', 'premium'], ['保单号', 'policyNo'])],
|
||||
['violation', '违章记录', getViolationList, cols(['车牌号', 'vehicleNo'], ['驾驶人', 'driverName'], ['类型', 'violationType'], ['事项', 'violationItem'], ['违章时间', 'violationTime'], ['罚款金额', 'fineAmount'])],
|
||||
['maintenance', '维修记录', getMaintenanceList, cols(['车牌号', 'vehicleNo'], ['维修人', 'maintainer'], ['维修时间', 'maintenanceTime'], ['维修位置', 'location'], ['费用', 'cost'], ['维修单位', 'company'])],
|
||||
['maintenancePlan', '保养记录', getMaintenancePlanList, cols(['车牌号', 'vehicleNo'], ['保养人', 'maintainer'], ['保养时间', 'maintenanceTime'], ['保养项目', 'maintenanceItem'], ['费用', 'cost'], ['下次保养时间', 'nextMaintenanceTime'])],
|
||||
['tire', '换胎记录', getTireList, cols(['车牌号', 'vehicleNo'], ['更换时间', 'replacementTime'], ['轮胎品牌', 'tireBrand'], ['轮胎规格', 'tireSpec'], ['费用', 'cost'])],
|
||||
['accident', '事故记录', getAccidentList, cols(['车牌号', 'vehicleNo'], ['事故时间', 'accidentTime'], ['事故地点', 'accidentLocation'], ['事故类型', 'accidentType'], ['损失金额', 'lossAmount'])],
|
||||
['annualInspection', '年检记录', getAnnualInspectionList, cols(['车牌号', 'vehicleNo'], ['年检日期', 'inspectionDate'], ['年检有效期至', 'inspectionEndDate'], ['年检机构', 'inspectionOrganization'], ['费用', 'cost'])],
|
||||
['mileage', '里程记录', getMileageList, cols(['车牌号', 'vehicleNo'], ['记录时间', 'recordTime'], ['里程数', 'mileage'], ['里程单位', 'mileageUnit'], ['备注', 'remark'])],
|
||||
['change', '变更记录', getChangeList, cols(['车牌号', 'vehicleNo'], ['变更类型', 'changeType'], ['变更时间', 'changeTime'], ['变更前内容', 'beforeChange'], ['变更后内容', 'afterChange'])],
|
||||
['equipment', '设备台账', null, cols(['设备编码', 'equipmentCode'], ['设备名称', 'equipmentName'], ['设备类型', 'equipmentType'], ['安装日期', 'installDate'], ['状态', 'status'])],
|
||||
['oilElectric', '油电台账', getOilElectricList, cols(['车牌号', 'vehicleNo'], ['加油/充电日期', 'recordDate'], ['类型', 'energyType'], ['数量', 'quantity'], ['金额', 'amount'])],
|
||||
['etc', 'ETC记录', getEtcList, cols(['车牌号', 'vehicleNo'], ['交易日期', 'transactionDate'], ['交易金额', 'amount'], ['交易地点', 'location'], ['ETC卡号', 'etcCardNo'])],
|
||||
['otherExpense', '其他费用记录', getOtherExpenseList, cols(['车牌号', 'vehicleNo'], ['费用日期', 'expenseDate'], ['费用类型', 'expenseType'], ['金额', 'amount'], ['备注', 'remark'])],
|
||||
[
|
||||
'insurance',
|
||||
'保险记录',
|
||||
getInsuranceList,
|
||||
cols(
|
||||
['车牌号', 'vehicleNo'],
|
||||
['保险类型', 'insuranceType'],
|
||||
['开始日期', 'startDate'],
|
||||
['结束日期', 'endDate'],
|
||||
['保费', 'premium'],
|
||||
['保单号', 'policyNo']
|
||||
),
|
||||
],
|
||||
[
|
||||
'violation',
|
||||
'违章记录',
|
||||
getViolationList,
|
||||
cols(
|
||||
['车牌号', 'vehicleNo'],
|
||||
['驾驶人', 'driverName'],
|
||||
['类型', 'violationType'],
|
||||
['事项', 'violationItem'],
|
||||
['违章时间', 'violationTime'],
|
||||
['罚款金额', 'fineAmount']
|
||||
),
|
||||
],
|
||||
[
|
||||
'maintenance',
|
||||
'维修记录',
|
||||
getMaintenanceList,
|
||||
cols(
|
||||
['车牌号', 'vehicleNo'],
|
||||
['维修人', 'maintainer'],
|
||||
['维修时间', 'maintenanceTime'],
|
||||
['维修位置', 'location'],
|
||||
['费用', 'cost'],
|
||||
['维修单位', 'company']
|
||||
),
|
||||
],
|
||||
[
|
||||
'maintenancePlan',
|
||||
'保养记录',
|
||||
getMaintenancePlanList,
|
||||
cols(
|
||||
['车牌号', 'vehicleNo'],
|
||||
['保养人', 'maintainer'],
|
||||
['保养时间', 'maintenanceTime'],
|
||||
['保养项目', 'maintenanceItem'],
|
||||
['费用', 'cost'],
|
||||
['下次保养时间', 'nextMaintenanceTime']
|
||||
),
|
||||
],
|
||||
[
|
||||
'tire',
|
||||
'换胎记录',
|
||||
getTireList,
|
||||
cols(
|
||||
['车牌号', 'vehicleNo'],
|
||||
['更换时间', 'replacementTime'],
|
||||
['轮胎品牌', 'tireBrand'],
|
||||
['轮胎规格', 'tireSpec'],
|
||||
['费用', 'cost']
|
||||
),
|
||||
],
|
||||
[
|
||||
'accident',
|
||||
'事故记录',
|
||||
getAccidentList,
|
||||
cols(
|
||||
['车牌号', 'vehicleNo'],
|
||||
['事故时间', 'accidentTime'],
|
||||
['事故地点', 'accidentLocation'],
|
||||
['事故类型', 'accidentType'],
|
||||
['损失金额', 'lossAmount']
|
||||
),
|
||||
],
|
||||
[
|
||||
'annualInspection',
|
||||
'年检记录',
|
||||
getAnnualInspectionList,
|
||||
cols(
|
||||
['车牌号', 'vehicleNo'],
|
||||
['年检日期', 'inspectionDate'],
|
||||
['年检有效期至', 'inspectionEndDate'],
|
||||
['年检机构', 'inspectionOrganization'],
|
||||
['费用', 'cost']
|
||||
),
|
||||
],
|
||||
[
|
||||
'mileage',
|
||||
'里程记录',
|
||||
getMileageList,
|
||||
cols(
|
||||
['车牌号', 'vehicleNo'],
|
||||
['记录时间', 'recordTime'],
|
||||
['里程数', 'mileage'],
|
||||
['里程单位', 'mileageUnit'],
|
||||
['备注', 'remark']
|
||||
),
|
||||
],
|
||||
[
|
||||
'change',
|
||||
'变更记录',
|
||||
getChangeList,
|
||||
cols(
|
||||
['车牌号', 'vehicleNo'],
|
||||
['变更类型', 'changeType'],
|
||||
['变更时间', 'changeTime'],
|
||||
['变更前内容', 'beforeChange'],
|
||||
['变更后内容', 'afterChange']
|
||||
),
|
||||
],
|
||||
[
|
||||
'equipment',
|
||||
'设备台账',
|
||||
null,
|
||||
cols(
|
||||
['设备编码', 'equipmentCode'],
|
||||
['设备名称', 'equipmentName'],
|
||||
['设备类型', 'equipmentType'],
|
||||
['安装日期', 'installDate'],
|
||||
['状态', 'status']
|
||||
),
|
||||
],
|
||||
[
|
||||
'oilElectric',
|
||||
'油电台账',
|
||||
getOilElectricList,
|
||||
cols(
|
||||
['车牌号', 'vehicleNo'],
|
||||
['加油/充电日期', 'recordDate'],
|
||||
['类型', 'energyType'],
|
||||
['数量', 'quantity'],
|
||||
['金额', 'amount']
|
||||
),
|
||||
],
|
||||
[
|
||||
'etc',
|
||||
'ETC记录',
|
||||
getEtcList,
|
||||
cols(
|
||||
['车牌号', 'vehicleNo'],
|
||||
['交易日期', 'transactionDate'],
|
||||
['交易金额', 'amount'],
|
||||
['交易地点', 'location'],
|
||||
['ETC卡号', 'etcCardNo']
|
||||
),
|
||||
],
|
||||
[
|
||||
'otherExpense',
|
||||
'其他费用记录',
|
||||
getOtherExpenseList,
|
||||
cols(
|
||||
['车牌号', 'vehicleNo'],
|
||||
['费用日期', 'expenseDate'],
|
||||
['费用类型', 'expenseType'],
|
||||
['金额', 'amount'],
|
||||
['备注', 'remark']
|
||||
),
|
||||
],
|
||||
].map(([name, label, request, columns]) => ({ name, label, request, columns }));
|
||||
|
||||
export default {
|
||||
components: { SectionCard },
|
||||
props: { modelValue: Boolean, vehicle: { type: Object, default: () => ({}) } },
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
return { detailLoading: false, tableLoading: false, vehicleDetail: {}, activeTab: 'insurance', records: [], page: { current: 1, size: 10, total: 0 } };
|
||||
return {
|
||||
detailLoading: false,
|
||||
tableLoading: false,
|
||||
vehicleDetail: {},
|
||||
activeTab: 'insurance',
|
||||
records: [],
|
||||
page: { current: 1, size: 10, total: 0 },
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tabs() { return tabConfigs; },
|
||||
activeConfig() { return tabConfigs.find(item => item.name === this.activeTab) || tabConfigs[0]; },
|
||||
activeColumns() { return this.activeConfig.columns; },
|
||||
dimensions() { const v = this.vehicleDetail; return [v.outerLength, v.outerWidth, v.outerHeight].filter(item => item !== null && item !== undefined && item !== '').join('×') || '-'; },
|
||||
plateColorType() { return { 黄牌: 'warning', 蓝牌: 'primary', 绿牌: 'success' }[this.vehicleDetail.plateColor] || 'info'; },
|
||||
imageFields() { return [['行驶证主页面', 'drivingLicenseImage'], ['行驶证主页反页', 'drivingLicenseMainBack'], ['行驶证副页正页', 'drivingLicenseViceFront'], ['行驶证副页反页', 'drivingLicenseViceBack'], ['道路运输证', 'roadTransportCertImage']].map(([label, prop]) => ({ label, prop })); },
|
||||
imageUrls() { return this.imageFields.map(item => this.vehicleDetail[item.prop]).filter(Boolean); },
|
||||
tabs() {
|
||||
return tabConfigs;
|
||||
},
|
||||
activeConfig() {
|
||||
return tabConfigs.find(item => item.name === this.activeTab) || tabConfigs[0];
|
||||
},
|
||||
activeColumns() {
|
||||
return this.activeConfig.columns;
|
||||
},
|
||||
dimensions() {
|
||||
const v = this.vehicleDetail;
|
||||
return (
|
||||
[v.outerLength, v.outerWidth, v.outerHeight]
|
||||
.filter(item => item !== null && item !== undefined && item !== '')
|
||||
.join('×') || '-'
|
||||
);
|
||||
},
|
||||
plateColorType() {
|
||||
return (
|
||||
{ 黄牌: 'warning', 蓝牌: 'primary', 绿牌: 'success' }[this.vehicleDetail.plateColor] ||
|
||||
'info'
|
||||
);
|
||||
},
|
||||
imageFields() {
|
||||
return [
|
||||
['行驶证主页面', 'drivingLicenseImage'],
|
||||
['行驶证主页反页', 'drivingLicenseMainBack'],
|
||||
['行驶证副页正页', 'drivingLicenseViceFront'],
|
||||
['行驶证副页反页', 'drivingLicenseViceBack'],
|
||||
['道路运输证', 'roadTransportCertImage'],
|
||||
].map(([label, prop]) => ({ label, prop }));
|
||||
},
|
||||
imageUrls() {
|
||||
return this.imageFields.map(item => this.vehicleDetail[item.prop]).filter(Boolean);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
modelValue(value) {
|
||||
if (value) this.initialize();
|
||||
},
|
||||
},
|
||||
watch: { modelValue(value) { if (value) this.initialize(); } },
|
||||
methods: {
|
||||
async initialize() { this.activeTab = 'insurance'; this.page.current = 1; this.vehicleDetail = { ...this.vehicle }; if (this.vehicle.id) { this.detailLoading = true; try { const res = await getDetail(this.vehicle.id); this.vehicleDetail = { ...this.vehicle, ...(res.data.data || {}) }; } finally { this.detailLoading = false; } } this.loadRecords(); },
|
||||
async loadRecords() { const { request } = this.activeConfig; if (!request) { this.records = []; this.page.total = 0; return; } this.tableLoading = true; try { const res = await request(this.page.current, this.page.size, { vehicleNo: this.vehicleDetail.plateNo || this.vehicle.plateNo, vehicleType: '车辆' }); const data = res.data.data || {}; this.records = data.records || []; this.page.total = data.total || 0; } finally { this.tableLoading = false; } },
|
||||
handlePageChange() { this.page.current = 1; this.loadRecords(); },
|
||||
async initialize() {
|
||||
this.activeTab = 'insurance';
|
||||
this.page.current = 1;
|
||||
this.vehicleDetail = { ...this.vehicle };
|
||||
if (this.vehicle.id) {
|
||||
this.detailLoading = true;
|
||||
try {
|
||||
const res = await getDetail(this.vehicle.id);
|
||||
this.vehicleDetail = { ...this.vehicle, ...(res.data.data || {}) };
|
||||
} finally {
|
||||
this.detailLoading = false;
|
||||
}
|
||||
}
|
||||
this.loadRecords();
|
||||
},
|
||||
async loadRecords() {
|
||||
const { request } = this.activeConfig;
|
||||
if (!request) {
|
||||
this.records = [];
|
||||
this.page.total = 0;
|
||||
return;
|
||||
}
|
||||
this.tableLoading = true;
|
||||
try {
|
||||
const res = await request(this.page.current, this.page.size, {
|
||||
vehicleNo: this.vehicleDetail.plateNo || this.vehicle.plateNo,
|
||||
vehicleType: '车辆',
|
||||
});
|
||||
const data = res.data.data || {};
|
||||
this.records = data.records || [];
|
||||
this.page.total = data.total || 0;
|
||||
} finally {
|
||||
this.tableLoading = false;
|
||||
}
|
||||
},
|
||||
handlePageChange() {
|
||||
this.page.current = 1;
|
||||
this.loadRecords();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vehicle-ledger__overview { padding: 16px; border: 1px solid #eff1f7; }
|
||||
.vehicle-ledger__title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 26px; font-weight: 600; }
|
||||
.vehicle-ledger__images { display: flex; gap: 16px; margin-top: 16px; overflow-x: auto; }
|
||||
.vehicle-ledger__image-item { width: 150px; flex: 0 0 150px; color: #606266; text-align: center; }
|
||||
.vehicle-ledger__image-item > span { display: block; margin-bottom: 8px; }
|
||||
.vehicle-ledger__image-item :deep(.el-image) { width: 150px; height: 110px; border: 1px solid #eff1f7; }
|
||||
.vehicle-ledger__image-item :deep(.el-empty) { height: 110px; border: 1px solid #eff1f7; }
|
||||
.vehicle-ledger__tabs { margin-top: 16px; }
|
||||
.vehicle-ledger__pagination { display: flex; justify-content: flex-end; margin-top: 16px; }
|
||||
.vehicle-ledger__overview {
|
||||
padding: 16px;
|
||||
border: 1px solid #eff1f7;
|
||||
}
|
||||
.vehicle-ledger__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.vehicle-ledger__images {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.vehicle-ledger__image-item {
|
||||
width: 150px;
|
||||
flex: 0 0 150px;
|
||||
color: #606266;
|
||||
text-align: center;
|
||||
}
|
||||
.vehicle-ledger__image-item > span {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.vehicle-ledger__image-item :deep(.el-image) {
|
||||
width: 150px;
|
||||
height: 110px;
|
||||
border: 1px solid #eff1f7;
|
||||
}
|
||||
.vehicle-ledger__image-item :deep(.el-empty) {
|
||||
height: 110px;
|
||||
border: 1px solid #eff1f7;
|
||||
}
|
||||
.vehicle-ledger__tabs {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.vehicle-ledger__pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4860,24 +4860,6 @@ export default {
|
||||
//background: #fff;
|
||||
}
|
||||
|
||||
.archive-page-form__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
color: #303133;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
background: #409eff;
|
||||
border-radius: 2px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.archive-form__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
Reference in New Issue
Block a user