style(process-config): 优化流程配置页样式及结构一致性

- process-config.vue 基本信息区改用 section-card 和 el-form 组件,统一右侧固定宽 label 栅格布局
- 现行过程节点和节点设置区使用 section-card 包裹,替换原有灰色标题,增加白卡样式和卡片间距
- 删除不再使用的自定义样式 __section/__field/__field-label/__field-label--required,保留与节点表格相关样式
- 保证三个 section-card 正确闭合,编译通过,无业务逻辑变更
- master-order-detail.vue 主界面改用 section-card 代替 div 容器,提升风格统一性
- 注释部分 Element UI 弹窗表单项 margin-bottom 样式,减少样式冗余
- loading-manage.vue loading-detail 取消 flex gap,防止潜在样式冲突
- shipping-template.js 表单项 grid 栅格 span 值调整优化表单布局,使各项宽度分配更合理
This commit is contained in:
2026-08-13 16:44:45 +08:00
parent 490efe2ce5
commit b64465a4c3
6 changed files with 107 additions and 127 deletions
@@ -1,5 +1,5 @@
<template>
<div v-loading="loading" class="master-detail">
<section-card v-loading="loading" class="master-detail">
<section v-if="master" class="detail-overview">
<div class="detail-heading"><div><h2>多联总单详情 <span>|</span> {{ master.masterNo }}</h2><el-tag :type="statusType(master.businessStatus)">{{ statusName(master.businessStatus) }}</el-tag></div><el-button @click="$emit('back')">返回</el-button></div>
<dl class="detail-meta"><div><dt>客户</dt><dd>{{ master.customerName || '-' }}</dd></div><div><dt>合同编号</dt><dd>{{ master.contractNo || '-' }}</dd></div><div><dt>项目</dt><dd>{{ master.projectName || '-' }}</dd></div><div><dt>货物名称</dt><dd>{{ goodsNames }}</dd></div><div><dt>货物类型</dt><dd>{{ goodsTypes }}</dd></div><div><dt>运输周期</dt><dd>{{ dateRange }}</dd></div></dl>
@@ -23,14 +23,16 @@
<el-table :data="master.goods || []" border><el-table-column type="index" label="序号" width="64" /><el-table-column prop="cargoName" label="货物名称" min-width="150" /><el-table-column prop="cargoType" label="货物类型" min-width="130" /><el-table-column label="数量" width="130"><template #default="{ row }">{{ quantity(row.quantity) }} {{ row.quantityUnit || '' }}</template></el-table-column><el-table-column prop="packageType" label="包装" min-width="120" /><el-table-column prop="brand" label="品牌" min-width="120" /><el-table-column prop="specification" label="规格" min-width="120" /><el-table-column prop="model" label="型号" min-width="120" /></el-table>
<el-empty v-if="!(master.goods || []).length" description="暂无货物信息" :image-size="56" />
</section>
</div>
</section-card>
</template>
<script>
import * as api from '@/api/business/master-order';
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import SectionCard from '@/components/section-card/main.vue';
export default {
components: { SectionCard },
props: { id: [String, Number] },
emits: ['back'],
data() { return { loading: false, master: null, expandedSegments: {}, ArrowDown, ArrowUp }; },