718 lines
23 KiB
Vue
718 lines
23 KiB
Vue
<template>
|
||
<basic-container class="transport-plan-dispatch-page">
|
||
<div v-loading="loading" class="transport-plan-dispatch-page__shell">
|
||
<!-- 顶部信息区 -->
|
||
<div class="transport-plan-dispatch-page__top">
|
||
<div class="transport-plan-dispatch-page__heading">
|
||
<div class="transport-plan-dispatch-page__heading-title">
|
||
<el-button icon="el-icon-arrow-left" text @click="handleBack">返回</el-button>
|
||
<span class="transport-plan-dispatch-page__heading-name">计划调度</span>
|
||
<span class="transport-plan-dispatch-page__heading-no">
|
||
{{ planData.planNo || planData.loadingNo || '-' }}
|
||
</span>
|
||
<el-tag :type="getStatusTagType(planData.businessStatus)" effect="light" class="status-text">
|
||
{{ planData.businessStatusName || '-' }}
|
||
</el-tag>
|
||
<el-tag type="primary" effect="light">
|
||
{{ planData.transportTypeName || '公路整车' }}
|
||
</el-tag>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="transport-plan-dispatch-page__summary">
|
||
<section-card title="基本信息" class="transport-plan-dispatch-page__summary-card">
|
||
<div class="transport-plan-dispatch-page__summary-grid">
|
||
<div class="transport-plan-dispatch-page__summary-item">
|
||
<div class="transport-plan-dispatch-page__summary-label">客户</div>
|
||
<div class="transport-plan-dispatch-page__summary-value">
|
||
{{ planData.customerName || '-' }}
|
||
</div>
|
||
</div>
|
||
<div class="transport-plan-dispatch-page__summary-item">
|
||
<div class="transport-plan-dispatch-page__summary-label">项目</div>
|
||
<div class="transport-plan-dispatch-page__summary-value">
|
||
{{ planData.projectName || '-' }}
|
||
</div>
|
||
</div>
|
||
<div class="transport-plan-dispatch-page__summary-item">
|
||
<div class="transport-plan-dispatch-page__summary-label">合同编号</div>
|
||
<div class="transport-plan-dispatch-page__summary-value">
|
||
{{ planData.contractNo || '-' }}
|
||
</div>
|
||
</div>
|
||
<div class="transport-plan-dispatch-page__summary-item">
|
||
<div class="transport-plan-dispatch-page__summary-label">计划执行时间</div>
|
||
<div class="transport-plan-dispatch-page__summary-value">
|
||
{{ formatDateRange(planData.planStartDate, planData.planEndDate) }}
|
||
</div>
|
||
</div>
|
||
<div class="transport-plan-dispatch-page__summary-item is-wide">
|
||
<div class="transport-plan-dispatch-page__summary-label">货物信息</div>
|
||
<div class="transport-plan-dispatch-page__summary-value">
|
||
{{ planData.goodsInfo || formatGoodsInfo(planData) }}
|
||
</div>
|
||
</div>
|
||
<div class="transport-plan-dispatch-page__summary-item">
|
||
<div class="transport-plan-dispatch-page__summary-label">附件</div>
|
||
<div class="transport-plan-dispatch-page__summary-value">
|
||
<template v-if="attachmentList.length">
|
||
<el-link
|
||
v-for="(item, index) in attachmentList"
|
||
:key="index"
|
||
type="primary"
|
||
:href="item.url"
|
||
:underline="false"
|
||
target="_blank"
|
||
class="transport-plan-dispatch-page__attachment-link"
|
||
>
|
||
{{ item.name || item.originalName || '附件' }}
|
||
</el-link>
|
||
</template>
|
||
<span v-else>-</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section-card>
|
||
|
||
<section-card title="收发货路线" class="transport-plan-dispatch-page__route-card">
|
||
<div class="transport-plan-dispatch-page__route">
|
||
<div class="transport-plan-dispatch-page__route-item">
|
||
<span class="transport-plan-dispatch-page__route-badge is-start">起</span>
|
||
<div class="transport-plan-dispatch-page__route-body">
|
||
<div class="transport-plan-dispatch-page__route-title">
|
||
{{ planData.departureName || '-' }}
|
||
</div>
|
||
<div class="transport-plan-dispatch-page__route-address">
|
||
{{ formatAddress(planData.departureAddress) }}
|
||
</div>
|
||
<div class="transport-plan-dispatch-page__route-contact">
|
||
{{ formatContact(planData.departureContact, planData.departurePhone) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="transport-plan-dispatch-page__route-vehicle">
|
||
<el-icon><Van /></el-icon>
|
||
</div>
|
||
<div class="transport-plan-dispatch-page__route-item">
|
||
<span class="transport-plan-dispatch-page__route-badge is-end">终</span>
|
||
<div class="transport-plan-dispatch-page__route-body">
|
||
<div class="transport-plan-dispatch-page__route-title">
|
||
{{ planData.arrivalName || '-' }}
|
||
</div>
|
||
<div class="transport-plan-dispatch-page__route-address">
|
||
{{ formatAddress(planData.arrivalAddress) }}
|
||
</div>
|
||
<div class="transport-plan-dispatch-page__route-contact">
|
||
{{ formatContact(planData.arrivalContact, planData.arrivalPhone) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section-card>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 调度列表 -->
|
||
<section-card class="transport-plan-dispatch-page__list-card">
|
||
<template #title>
|
||
<span>待调度列表</span>
|
||
<span class="transport-plan-dispatch-page__list-summary">
|
||
{{ summaryText }}
|
||
</span>
|
||
</template>
|
||
<template #extra>
|
||
<el-button type="primary" :disabled="!canAddDispatch" @click="handleAdd">
|
||
新增
|
||
</el-button>
|
||
</template>
|
||
<el-table
|
||
:data="dispatchList"
|
||
border
|
||
height="100%"
|
||
row-key="id"
|
||
class="transport-plan-dispatch-page__table"
|
||
>
|
||
<el-table-column type="index" label="序号" width="70" align="center" fixed="left" />
|
||
<el-table-column label="运输方式" min-width="180" align="center" show-overflow-tooltip>
|
||
<template #default="{ row }">
|
||
{{ row.transportTypeName || '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="carrierType" label="承运类型" min-width="150" align="center" show-overflow-tooltip />
|
||
<el-table-column prop="carrierName" label="承运商" min-width="150" align="center" show-overflow-tooltip />
|
||
<el-table-column prop="driverName" label="司机" min-width="260" align="center" show-overflow-tooltip>
|
||
<template #default="{ row }">
|
||
<span>{{ formatDriver(row) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="vehicleNo" label="车牌号" min-width="150" align="center" show-overflow-tooltip />
|
||
<el-table-column prop="cargoType" label="货物类型" min-width="170" align="center" show-overflow-tooltip />
|
||
<el-table-column prop="cargoInfo" label="货物信息" min-width="280" align="center" show-overflow-tooltip>
|
||
<template #default="{ row }">
|
||
{{ row.cargoInfo || formatCargoInfo(row) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="发货地址" min-width="220" align="center" show-overflow-tooltip>
|
||
<template #default="{ row }">
|
||
{{ formatAddress(row.departureAddress) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="收货地址" min-width="220" align="center" show-overflow-tooltip>
|
||
<template #default="{ row }">
|
||
{{ formatAddress(row.arrivalAddress) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="quantity" label="数量" min-width="120" align="center">
|
||
<template #default="{ row }">
|
||
{{ row.quantity ? `${row.quantity}${row.quantityUnit || '吨'}` : '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="unitPrice" label="单价" min-width="120" align="center" />
|
||
<el-table-column prop="freight" label="运费" min-width="120" align="center" />
|
||
<el-table-column prop="otherFeeTotal" label="其他费用" min-width="120" align="center" />
|
||
<el-table-column prop="freightTotal" label="运费合计" min-width="120" align="center" />
|
||
<el-table-column label="操作" width="100" align="center" fixed="right">
|
||
<template #default="{ row, $index }">
|
||
<div class="transport-plan-dispatch-page__actions">
|
||
<el-link type="primary" @click="handleEdit(row, $index)">编辑</el-link>
|
||
<el-link type="danger" @click="handleDelete($index)">删除</el-link>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</section-card>
|
||
|
||
<!-- 底部按钮 -->
|
||
<div class="transport-plan-dispatch-page__footer">
|
||
<el-button @click="handleBack">关闭</el-button>
|
||
<el-button type="primary" :loading="saving" @click="handleSubmit">
|
||
确认生成
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 调度明细编辑弹窗 - 将使用原组件的弹窗 -->
|
||
<transport-plan-page
|
||
v-if="transportPlanPageVisible"
|
||
ref="transportPlanPageRef"
|
||
:api="api"
|
||
:config="config"
|
||
:crud-option="option"
|
||
style="display: none"
|
||
/>
|
||
</basic-container>
|
||
</template>
|
||
|
||
<script>
|
||
import { Van } from '@element-plus/icons-vue';
|
||
import { getDetail, dispatch } from '@/api/business/transport-plan';
|
||
import SectionCard from '@/components/section-card/main.vue';
|
||
import TransportPlanPage from './components/transport-plan-page.vue';
|
||
import * as api from '@/api/business/transport-plan';
|
||
import { config, option } from '@/option/business/transport-plan';
|
||
|
||
const TRANSPORT_PLAN_QUANTITY_UNIT = '吨';
|
||
|
||
export default {
|
||
name: 'TransportPlanDispatch',
|
||
components: {
|
||
Van,
|
||
SectionCard,
|
||
TransportPlanPage,
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
saving: false,
|
||
planData: {},
|
||
dispatchList: [],
|
||
attachmentList: [],
|
||
transportPlanPageVisible: false,
|
||
api,
|
||
config,
|
||
option,
|
||
};
|
||
},
|
||
computed: {
|
||
planId() {
|
||
return this.$route.query.planId;
|
||
},
|
||
summaryText() {
|
||
const goodsList = this.parseGoodsList(this.planData.goodsJson);
|
||
if (!goodsList.length) {
|
||
const total = Number(this.planData.totalQuantity || 0);
|
||
const dispatched = this.calculateDispatchedQuantity();
|
||
const remaining = Math.max(total - dispatched, 0);
|
||
return `共${total}吨 | 已调度 ${dispatched.toFixed(2)}吨，剩余${remaining.toFixed(2)}吨`;
|
||
}
|
||
|
||
const summary = {};
|
||
goodsList.forEach(goods => {
|
||
const unit = goods.quantityUnit || TRANSPORT_PLAN_QUANTITY_UNIT;
|
||
if (!summary[unit]) {
|
||
summary[unit] = { total: 0, dispatched: 0 };
|
||
}
|
||
summary[unit].total += Number(goods.quantity || 0);
|
||
});
|
||
|
||
this.dispatchList.forEach(item => {
|
||
const unit = item.quantityUnit || TRANSPORT_PLAN_QUANTITY_UNIT;
|
||
if (!summary[unit]) {
|
||
summary[unit] = { total: 0, dispatched: 0 };
|
||
}
|
||
summary[unit].dispatched += Number(item.quantity || 0);
|
||
});
|
||
|
||
const parts = Object.entries(summary).map(([unit, data]) => {
|
||
const remaining = Math.max(data.total - data.dispatched, 0);
|
||
return `${data.total}${unit} | 已调度 ${data.dispatched.toFixed(2)}${unit}，剩余${remaining.toFixed(
|
||
2
|
||
)}${unit}`;
|
||
});
|
||
|
||
return parts.join(' | ');
|
||
},
|
||
canAddDispatch() {
|
||
const goodsList = this.parseGoodsList(this.planData.goodsJson);
|
||
if (!goodsList.length) {
|
||
const total = Number(this.planData.totalQuantity || 0);
|
||
const dispatched = this.calculateDispatchedQuantity();
|
||
return dispatched < total;
|
||
}
|
||
|
||
return goodsList.some(goods => {
|
||
const unit = goods.quantityUnit || TRANSPORT_PLAN_QUANTITY_UNIT;
|
||
const totalQty = Number(goods.quantity || 0);
|
||
const dispatchedQty = this.dispatchList
|
||
.filter(item => item.quantityUnit === unit)
|
||
.reduce((sum, item) => sum + Number(item.quantity || 0), 0);
|
||
return dispatchedQty < totalQty;
|
||
});
|
||
},
|
||
},
|
||
created() {
|
||
this.loadPlanData();
|
||
},
|
||
mounted() {
|
||
// 初始化 transport-plan-page 组件用于打开弹窗
|
||
this.transportPlanPageVisible = true;
|
||
},
|
||
methods: {
|
||
loadPlanData() {
|
||
if (!this.planId) {
|
||
this.$message.error('缺少计划ID参数');
|
||
this.handleBack();
|
||
return;
|
||
}
|
||
|
||
this.loading = true;
|
||
getDetail(this.planId)
|
||
.then(res => {
|
||
if (res.data?.success) {
|
||
this.planData = res.data.data || {};
|
||
this.attachmentList = this.parseAttachments(this.planData.attachmentsJson);
|
||
this.dispatchList = this.parseDispatchList(this.planData);
|
||
} else {
|
||
this.$message.error(res.data?.msg || '加载数据失败');
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.error('加载计划数据失败:', err);
|
||
this.$message.error('加载数据失败');
|
||
})
|
||
.finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
parseAttachments(json) {
|
||
try {
|
||
const data = JSON.parse(json || '[]');
|
||
return Array.isArray(data) ? data : [];
|
||
} catch {
|
||
return [];
|
||
}
|
||
},
|
||
parseDispatchList(planData) {
|
||
try {
|
||
const sources = [
|
||
planData.waybillList,
|
||
planData.dispatchRows,
|
||
planData.dispatchRecordList,
|
||
planData.dispatchList,
|
||
];
|
||
for (const source of sources) {
|
||
if (Array.isArray(source) && source.length) {
|
||
return source.map((item, index) => ({
|
||
...item,
|
||
id: item.id || `temp-${index}`,
|
||
}));
|
||
}
|
||
}
|
||
return [];
|
||
} catch {
|
||
return [];
|
||
}
|
||
},
|
||
parseGoodsList(json) {
|
||
try {
|
||
const data = JSON.parse(json || '[]');
|
||
return Array.isArray(data) ? data : [];
|
||
} catch {
|
||
return [];
|
||
}
|
||
},
|
||
calculateDispatchedQuantity() {
|
||
return this.dispatchList.reduce((sum, item) => sum + Number(item.quantity || 0), 0);
|
||
},
|
||
getStatusTagType(status) {
|
||
const statusMap = {
|
||
0: 'info',
|
||
1: 'warning',
|
||
2: 'success',
|
||
3: 'danger',
|
||
};
|
||
return statusMap[status] || 'info';
|
||
},
|
||
formatDateRange(startDate, endDate) {
|
||
const dates = [startDate, endDate].filter(Boolean);
|
||
return dates.length ? dates.join(' ~ ') : '-';
|
||
},
|
||
formatAddress(address) {
|
||
if (!address) return '-';
|
||
const match = address.match(/^(.*?省)?(.*?市)?(.*?区|.*?县)?/);
|
||
return match ? match[0] || address : address;
|
||
},
|
||
formatContact(contact, phone) {
|
||
const parts = [contact, phone].filter(Boolean);
|
||
return parts.length ? parts.join(' / ') : '-';
|
||
},
|
||
formatDriver(row) {
|
||
const parts = [row.driverName, row.driverPhone].filter(Boolean);
|
||
return parts.length ? parts.join(' / ') : '-';
|
||
},
|
||
formatGoodsInfo(data) {
|
||
const goodsList = this.parseGoodsList(data.goodsJson);
|
||
if (!goodsList.length) {
|
||
return data.cargoName || '-';
|
||
}
|
||
return goodsList
|
||
.map(goods => {
|
||
const parts = [goods.cargoName || goods.goodsName];
|
||
if (goods.quantity) {
|
||
parts.push(`${goods.quantity}${goods.quantityUnit || TRANSPORT_PLAN_QUANTITY_UNIT}`);
|
||
}
|
||
return parts.join(' ');
|
||
})
|
||
.join('；');
|
||
},
|
||
formatCargoInfo(row) {
|
||
const parts = [row.cargoName];
|
||
if (row.specification) parts.push(row.specification);
|
||
if (row.model) parts.push(row.model);
|
||
return parts.filter(Boolean).join(' / ') || '-';
|
||
},
|
||
handleBack() {
|
||
this.$router.back();
|
||
},
|
||
handleAdd() {
|
||
if (!this.canAddDispatch) {
|
||
this.$message.warning('待调度列表货物总量已达到计划总量，不能新增调度明细');
|
||
return;
|
||
}
|
||
|
||
// 调用 transport-plan-page 组件的方法打开弹窗
|
||
this.$nextTick(() => {
|
||
const component = this.$refs.transportPlanPageRef;
|
||
if (component) {
|
||
// 设置调度数据
|
||
component.dispatchRow = this.planData;
|
||
component.dispatchRows = [...this.dispatchList];
|
||
// 打开新增弹窗
|
||
component.openDispatchItemDialog(-1);
|
||
}
|
||
});
|
||
},
|
||
handleEdit(row, index) {
|
||
// 调用 transport-plan-page 组件的方法打开弹窗
|
||
this.$nextTick(() => {
|
||
const component = this.$refs.transportPlanPageRef;
|
||
if (component) {
|
||
// 设置调度数据
|
||
component.dispatchRow = this.planData;
|
||
component.dispatchRows = [...this.dispatchList];
|
||
// 打开编辑弹窗
|
||
component.openDispatchItemDialog(index, row);
|
||
}
|
||
});
|
||
},
|
||
handleDelete(index) {
|
||
this.$confirm('确定删除该调度明细?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}).then(() => {
|
||
this.dispatchList.splice(index, 1);
|
||
this.$message.success('删除成功');
|
||
});
|
||
},
|
||
handleSubmit() {
|
||
if (!this.dispatchList.length) {
|
||
this.$message.warning('请先添加调度明细');
|
||
return;
|
||
}
|
||
|
||
for (const [index, row] of this.dispatchList.entries()) {
|
||
if (!row.carrierName) {
|
||
this.$message.warning(`第${index + 1}条调度明细缺少承运商信息`);
|
||
return;
|
||
}
|
||
if (!row.driverName) {
|
||
this.$message.warning(`第${index + 1}条调度明细缺少司机信息`);
|
||
return;
|
||
}
|
||
if (!row.vehicleNo) {
|
||
this.$message.warning(`第${index + 1}条调度明细缺少车牌号`);
|
||
return;
|
||
}
|
||
}
|
||
|
||
this.$confirm(
|
||
`请确认调度信息，将生成 <span style="color: #409eff; font-size: 20px; padding: 0 4px;">${this.dispatchList.length}</span> 条运单，是否继续？`,
|
||
'提示',
|
||
{
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
dangerouslyUseHTMLString: true,
|
||
}
|
||
).then(() => {
|
||
this.submitDispatch();
|
||
});
|
||
},
|
||
submitDispatch() {
|
||
this.saving = true;
|
||
const payload = {
|
||
id: this.planId,
|
||
mode: 'submit',
|
||
waybills: this.dispatchList.map(row => ({
|
||
...row,
|
||
taskEntryMode: row.taskEntryMode || 'simple',
|
||
taskRemark: row.remark || '',
|
||
estimatedStartTime: row.estimatedStartTime || this.planData.planStartDate || '',
|
||
estimatedEndTime: row.estimatedEndTime || this.planData.planEndDate || '',
|
||
goodsJson:
|
||
row.goodsJson ||
|
||
JSON.stringify([
|
||
{
|
||
cargoName: row.cargoName,
|
||
cargoType: row.cargoType,
|
||
quantity: row.quantity,
|
||
quantityUnit: row.quantityUnit,
|
||
specification: row.specification,
|
||
model: row.model,
|
||
packageType: row.packageType,
|
||
brand: row.brand,
|
||
},
|
||
]),
|
||
})),
|
||
};
|
||
|
||
dispatch(payload)
|
||
.then(res => {
|
||
if (res.data?.success) {
|
||
this.$message.success('调度成功，运单已生成');
|
||
this.handleBack();
|
||
} else {
|
||
this.$message.error(res.data?.msg || '调度失败');
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.error('调度失败:', err);
|
||
this.$message.error('调度失败');
|
||
})
|
||
.finally(() => {
|
||
this.saving = false;
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.transport-plan-dispatch-page {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
&__shell {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
height: 100%;
|
||
}
|
||
|
||
&__top {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
&__heading {
|
||
padding: 16px;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
|
||
&-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
&-name {
|
||
font-size: 18px;
|
||
}
|
||
|
||
&-no {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
}
|
||
}
|
||
|
||
&__summary {
|
||
display: flex;
|
||
gap: 16px;
|
||
|
||
&-card {
|
||
flex: 1;
|
||
}
|
||
|
||
&-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16px;
|
||
}
|
||
|
||
&-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
|
||
&.is-wide {
|
||
grid-column: 1 / -1;
|
||
}
|
||
}
|
||
|
||
&-label {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
}
|
||
|
||
&-value {
|
||
font-size: 14px;
|
||
color: #303133;
|
||
}
|
||
}
|
||
|
||
&__route-card {
|
||
flex: 1;
|
||
}
|
||
|
||
&__route {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24px;
|
||
|
||
&-item {
|
||
flex: 1;
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
&-badge {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
|
||
&.is-start {
|
||
background: #67c23a;
|
||
}
|
||
|
||
&.is-end {
|
||
background: #409eff;
|
||
}
|
||
}
|
||
|
||
&-body {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
&-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
&-address,
|
||
&-contact {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
}
|
||
|
||
&-vehicle {
|
||
font-size: 24px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
|
||
&__list-card {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
&__list-summary {
|
||
margin-left: 12px;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
font-weight: normal;
|
||
}
|
||
|
||
&__table {
|
||
flex: 1;
|
||
}
|
||
|
||
&__actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
justify-content: center;
|
||
}
|
||
|
||
&__footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
padding: 16px;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
&__attachment-link {
|
||
margin-right: 12px;
|
||
}
|
||
}
|
||
|
||
.status-text {
|
||
font-size: 12px;
|
||
}
|
||
</style>
|