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 值调整优化表单布局，使各项宽度分配更合理
2026-08-13 16:44:45 +08:00
parent 490efe2ce5
commit b64465a4c3
6 changed files with 107 additions and 127 deletions
@@ -56,7 +56,7 @@ export const option = {
      prop: 'templateCode',
      search: true,
      searchOrder: 4,
-      span: 8,
+      span: 6,
      order: 390,
      minWidth: 170,
      disabled: true,
@@ -67,7 +67,7 @@ export const option = {
      prop: 'templateName',
      search: true,
      searchOrder: 3,
-      span: 8,
+      span: 6,
      order: 380,
      minWidth: 150,
      rules: textRule('模板名称', 50, true),
@@ -78,7 +78,7 @@ export const option = {
      type: 'select',
      search: true,
      searchOrder: 2,
-      span: 8,
+      span: 6,
      order: 370,
      dicData: templateTypeOptions,
      minWidth: 120,
@@ -89,7 +89,7 @@ export const option = {
      prop: 'remark',
      type: 'textarea',
      minRows: 3,
-      span: 24,
+      span: 18,
      order: 360,
      minWidth: 180,
      maxlength: 200,
@@ -111,7 +111,7 @@ export const option = {
      formslot: true,
      search: true,
      searchOrder: 1,
-      span: 8,
+      span: 6,
      order: 340,
      minWidth: 150,
      rules: textRule('项目', 100, true),
@@ -120,7 +120,7 @@ export const option = {
      label: '客户合同',
      prop: 'contractName',
      formslot: true,
-      span: 8,
+      span: 6,
      order: 330,
      minWidth: 160,
      rules: textRule('客户合同', 100, true),
@@ -129,7 +129,7 @@ export const option = {
      label: '运输方式',
      prop: 'transportType',
      type: 'select',
-      span: 8,
+      span: 6,
      order: 320,
      dicData: transportTypeOptions,
      minWidth: 130,
@@ -173,7 +173,7 @@
 .el-dialog .el-form-item--small.el-form-item,
 .el-dialog .el-form-item--large.el-form-item,
 .el-dialog .el-form-item--medium.el-form-item {
-  margin-bottom: 20px;
+  //margin-bottom: 20px;
 }

 /* 全站弹窗：底部操作栏浮动效果（参照 business/project-apply）
@@ -329,7 +329,7 @@

 // 4) 弹窗内表单项默认上下间距 16px（覆盖默认 18px / 22px，与 customer-archive 对齐）
 .el-dialog .el-form-item {
-  margin-bottom: 16px;
+  //margin-bottom: 16px;
 }

 // 5) 通用分组白卡组件（<section-card>）：标题融入卡头
@@ -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 }; },
@@ -2207,7 +2207,7 @@ export default {
 .loading-detail {
  display: flex;
  flex-direction: column;
-  gap: 8px;
+  //gap: 8px;
  color: #303133;
  .loading-detail__summary { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; padding: 4px 0 16px; }
  .loading-detail__heading { font-size: 20px; font-weight: 600; margin-right: 8px; }
@@ -80,106 +80,100 @@
      </template>

      <template #basicInfo-form>
-        <div class="process-config-page__section">
-          <div class="dialog-section-title">基本信息</div>
-          <el-row :gutter="16">
-            <el-col :span="8">
-              <div class="process-config-page__field">
-                <span
-                  class="process-config-page__field-label process-config-page__field-label--required"
-                >
-                  配置名称
-                </span>
-                <el-input
-                  v-model="form.configName"
-                  :disabled="dialogReadonly"
-                  maxlength="100"
-                  placeholder="请输入"
-                />
-              </div>
-            </el-col>
-            <el-col :span="8">
-              <div class="process-config-page__field">
-                <span
-                  class="process-config-page__field-label process-config-page__field-label--required"
-                >
-                  项目
-                </span>
-                <el-select
-                  v-model="selectedProjectId"
-                  clearable
-                  filterable
-                  remote
-                  :remote-method="loadProjectOptions"
-                  :loading="projectLoading"
-                  :disabled="dialogReadonly"
-                  placeholder="请选择"
-                  style="width: 100%"
-                  @change="handleProjectChange"
-                >
-                  <el-option
-                    v-for="item in projectOptions"
-                    :key="item.id"
-                    :label="formatProjectLabel(item)"
-                    :value="String(item.id)"
-                  />
-                </el-select>
-              </div>
-            </el-col>
-            <el-col :span="8">
-              <div class="process-config-page__field">
-                <span class="process-config-page__field-label">运输完成时限</span>
-                <div class="process-config-page__finish-days">
-                  <span>默认</span>
+        <section-card title="基本信息">
+          <el-form
+            :model="form"
+            label-position="right"
+            label-width="calc(6em + 24px)"
+          >
+            <el-row :gutter="18">
+              <el-col :span="6">
+                <el-form-item label="配置名称" required>
                  <el-input
-                    v-model="form.defaultFinishDays"
+                    v-model="form.configName"
                    :disabled="dialogReadonly"
-                    maxlength="3"
+                    maxlength="100"
                    placeholder="请输入"
-                    @input="handleFinishDaysInput"
                  />
-                  <span>天后完成运输</span>
-                </div>
-              </div>
-            </el-col>
-            <el-col :span="24">
-              <div class="process-config-page__field">
-                <span class="process-config-page__field-label">备注</span>
-                <el-input
-                  v-model="form.remark"
-                  type="textarea"
-                  :rows="4"
-                  :disabled="dialogReadonly"
-                  maxlength="500"
-                  show-word-limit
-                  placeholder="请输入"
-                />
-              </div>
-            </el-col>
-          </el-row>
-        </div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="项目" required>
+                  <el-select
+                    v-model="selectedProjectId"
+                    clearable
+                    filterable
+                    remote
+                    :remote-method="loadProjectOptions"
+                    :loading="projectLoading"
+                    :disabled="dialogReadonly"
+                    placeholder="请选择"
+                    style="width: 100%"
+                    @change="handleProjectChange"
+                  >
+                    <el-option
+                      v-for="item in projectOptions"
+                      :key="item.id"
+                      :label="formatProjectLabel(item)"
+                      :value="String(item.id)"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="运输完成时限">
+                  <div class="process-config-page__finish-days">
+                    <span>默认</span>
+                    <el-input
+                      v-model="form.defaultFinishDays"
+                      :disabled="dialogReadonly"
+                      maxlength="3"
+                      placeholder="请输入"
+                      @input="handleFinishDaysInput"
+                    />
+                    <span>天后完成运输</span>
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="备注">
+                  <el-input
+                    v-model="form.remark"
+                    type="textarea"
+                    :rows="4"
+                    :disabled="dialogReadonly"
+                    maxlength="500"
+                    show-word-limit
+                    placeholder="请输入"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </section-card>
      </template>

      <template #nodeConfigJson-form>
        <div class="process-config-page__custom-form">
-          <div class="dialog-section-title">现行过程节点</div>
-          <div class="process-config-page__timeline" v-if="enabledNodes.length">
-            <div class="process-config-page__timeline-line"></div>
-            <div
-              v-for="node in enabledNodes"
-              :key="node.key"
-              class="process-config-page__timeline-item"
-            >
-              <span class="process-config-page__timeline-dot"></span>
-              <div class="process-config-page__timeline-name">{{ node.name }}</div>
-              <div class="process-config-page__timeline-desc">
-                <div v-for="text in timelineDescriptions(node)" :key="text">{{ text }}</div>
+          <section-card title="现行过程节点">
+            <div class="process-config-page__timeline" v-if="enabledNodes.length">
+              <div class="process-config-page__timeline-line"></div>
+              <div
+                v-for="node in enabledNodes"
+                :key="node.key"
+                class="process-config-page__timeline-item"
+              >
+                <span class="process-config-page__timeline-dot"></span>
+                <div class="process-config-page__timeline-name">{{ node.name }}</div>
+                <div class="process-config-page__timeline-desc">
+                  <div v-for="text in timelineDescriptions(node)" :key="text">{{ text }}</div>
+                </div>
              </div>
            </div>
-          </div>
-          <el-empty v-else description="请在节点设置中勾选过程节点" :image-size="72" />
+            <el-empty v-else description="请在节点设置中勾选过程节点" :image-size="72" />
+          </section-card>

-          <div class="dialog-section-title">节点设置</div>
+          <section-card title="节点设置">
          <el-table
            class="process-config-page__node-table"
            border
@@ -363,6 +357,7 @@
              </template>
            </el-table-column>
          </el-table>
+          </section-card>
        </div>
      </template>

@@ -1106,32 +1101,6 @@ export default {

 <style lang="scss" scoped>
 .process-config-page {
-  &__section {
-    width: 100%;
-  }
-
-  &__field {
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    margin-bottom: 16px;
-  }
-
-  &__field-label {
-    flex: 0 0 150px;
-    line-height: 32px;
-    color: #303133;
-    font-weight: 500;
-    text-align: right;
-    white-space: nowrap;
-
-    &--required::before {
-      margin-right: 4px;
-      color: #f56c6c;
-      content: '*';
-    }
-  }
-
  &__node-value {
    white-space: normal;
    word-break: break-all;