From 18a71526dcdc33a714bc2e79a68973ea4a02327a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=96=87=E6=98=8A?= <wangwenhao_2026@163.com>
Date: Sat, 30 May 2026 19:56:34 +0800
Subject: [PATCH] =?UTF-8?q?style(refactor):=20=E9=87=8D=E6=9E=84=E4=BE=9B?=
 =?UTF-8?q?=E5=BA=94=E5=95=86=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=B8=8E=E4=BA=A4=E4=BA=92=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.  将原有单页表单式页面重构为左右分栏布局，左侧展示供应商列表，右侧展示详情/编辑/供货清单/异议标签页
2.  新增供应商选中默认逻辑，刷新页面保持选中状态
3.  补充供货清单、订单异议的列表展示与数据加载逻辑
4.  优化搜索、分页、新增编辑删除的交互流程与样式
---
 .../material/components/SupplierQuoteTab.vue  |   4 +-
 ruoyi-ui/src/views/bid/supplier/index.vue     | 872 ++++++++++++++++--
 2 files changed, 801 insertions(+), 75 deletions(-)

diff --git a/ruoyi-ui/src/views/bid/material/components/SupplierQuoteTab.vue b/ruoyi-ui/src/views/bid/material/components/SupplierQuoteTab.vue
index 31dff717..2c789775 100644
--- a/ruoyi-ui/src/views/bid/material/components/SupplierQuoteTab.vue
+++ b/ruoyi-ui/src/views/bid/material/components/SupplierQuoteTab.vue
@@ -168,8 +168,8 @@ export default {
 }
 
 .supplier-name {
-  font-size: 14px;
-  font-weight: 600;
+  font-size: 8px;
+  font-weight: 200;
   color: #303133;
   margin-bottom: 4px;
   line-height: 1.4;
diff --git a/ruoyi-ui/src/views/bid/supplier/index.vue b/ruoyi-ui/src/views/bid/supplier/index.vue
index 10d46193..5af2616c 100644
--- a/ruoyi-ui/src/views/bid/supplier/index.vue
+++ b/ruoyi-ui/src/views/bid/supplier/index.vue
@@ -1,103 +1,829 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
-      <el-form-item label="供应商名称" prop="supplierName">
-        <el-input v-model="queryParams.supplierName" placeholder="请输入供应商名称" clearable @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
-      </el-col>
-    </el-row>
-    <el-table v-loading="loading" :data="list" @selection-change="s => { this.multiple = !s.length; this.ids = s.map(r => r.supplierId) }">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="供应商名称" prop="supplierName" />
-      <el-table-column label="联系人" prop="contact" width="100" />
-      <el-table-column label="手机" prop="phone" width="130" />
-      <el-table-column label="邮箱" prop="email" />
-      <el-table-column label="地址" prop="address" :show-overflow-tooltip="true" />
-      <el-table-column label="状态" width="80">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">{{ scope.row.status === '0' ? '启用' : '禁用' }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="160">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+  <div class="supplier-manage">
+    <!-- ====== 左侧面板：供应商列表 ====== -->
+    <div class="left-panel">
+      <!-- Header -->
+      <div class="panel-header">
+        <span class="panel-title">供应商列表</span>
+        <div class="search-row">
+          <el-input
+            v-model="queryParams.supplierName"
+            placeholder="搜索供应商名称"
+            size="small"
+            prefix-icon="el-icon-search"
+            clearable
+            @keyup.enter.native="handleSearch"
+          />
+          <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch" />
+          <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd" />
+        </div>
+      </div>
 
-    <el-dialog :title="title" :visible.sync="open" width="580px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
+      <!-- Body: 列表 -->
+      <el-scrollbar class="list-scrollbar">
+        <div
+          v-for="item in list"
+          :key="item.supplierId"
+          class="supplier-item"
+          :class="{ active: currentSupplier && currentSupplier.supplierId === item.supplierId }"
+          @click="selectSupplier(item)"
+        >
+          <div class="item-left">
+            <div class="item-code">{{ formatCode(item.supplierId) }}</div>
+            <div class="item-name">{{ item.supplierName }}</div>
+            <div class="item-contact">
+              <span v-if="item.contact">{{ item.contact }}</span>
+              <span v-if="item.phone" class="contact-sep">/</span>
+              <span v-if="item.phone">{{ item.phone }}</span>
+            </div>
+          </div>
+          <div class="item-right">
+            <el-button
+              type="danger"
+              size="mini"
+              icon="el-icon-delete"
+              circle
+              @click.stop="handleDelete(item)"
+            />
+          </div>
+        </div>
+        <div v-if="!list.length && !loading" class="empty-list">暂无数据</div>
+      </el-scrollbar>
+
+      <!-- Footer: 分页 -->
+      <div class="panel-footer">
+        <el-pagination
+          small
+          :total="total"
+          :page-size="queryParams.pageSize"
+          :current-page.sync="queryParams.pageNum"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+
+    <!-- ====== 右侧面板：供应商详情 ====== -->
+    <div class="right-panel">
+      <template v-if="currentSupplier">
+        <el-tabs v-model="activeTab" class="detail-tabs">
+          <!-- Tab 1: 供应商详情（只读） -->
+          <el-tab-pane label="供应商详情" name="detail">
+            <div class="detail-grid">
+              <div class="detail-row">
+                <span class="detail-label">供应商编号</span>
+                <span class="detail-value">{{ formatCode(currentSupplier.supplierId) }}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">供应商名称</span>
+                <span class="detail-value">{{ currentSupplier.supplierName || '-' }}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">联系人</span>
+                <span class="detail-value">{{ currentSupplier.contact || '-' }}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">手机</span>
+                <span class="detail-value">{{ currentSupplier.phone || '-' }}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">邮箱</span>
+                <span class="detail-value">{{ currentSupplier.email || '-' }}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">地址</span>
+                <span class="detail-value">{{ currentSupplier.address || '-' }}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">状态</span>
+                <span class="detail-value">
+                  <el-tag :type="currentSupplier.status === '0' ? 'success' : 'danger'" size="small">
+                    {{ currentSupplier.status === '0' ? '启用' : '禁用' }}
+                  </el-tag>
+                </span>
+              </div>
+            </div>
+          </el-tab-pane>
+
+          <!-- Tab 2: 信息编辑 -->
+          <el-tab-pane label="信息编辑" name="edit">
+            <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px" size="small" class="edit-form">
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item label="供应商名称" prop="supplierName">
+                    <el-input v-model="editForm.supplierName" placeholder="请输入供应商名称" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="联系人" prop="contact">
+                    <el-input v-model="editForm.contact" placeholder="请输入联系人" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item label="手机" prop="phone">
+                    <el-input v-model="editForm.phone" placeholder="请输入手机号" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="邮箱" prop="email">
+                    <el-input v-model="editForm.email" placeholder="请输入邮箱" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row :gutter="20">
+                <el-col :span="24">
+                  <el-form-item label="地址" prop="address">
+                    <el-input v-model="editForm.address" placeholder="请输入地址" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item label="状态" prop="status">
+                    <el-radio-group v-model="editForm.status">
+                      <el-radio label="0">启用</el-radio>
+                      <el-radio label="1">禁用</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-form-item>
+                <el-button type="primary" size="small" @click="handleSaveEdit">保存</el-button>
+                <el-button size="small" @click="resetEditForm">重置</el-button>
+              </el-form-item>
+            </el-form>
+          </el-tab-pane>
+
+          <!-- Tab 3: 供货清单 -->
+          <el-tab-pane label="供货清单" name="orders">
+            <div class="tab-content">
+              <el-table :data="orderList" v-loading="orderLoading" border size="small" style="width:100%">
+                <el-table-column label="采购单号" prop="poNo" min-width="150" />
+                <el-table-column label="供应商" prop="supplierName" min-width="140" />
+                <el-table-column label="采购标题" prop="rfqTitle" min-width="160" :show-overflow-tooltip="true" />
+                <el-table-column label="总金额" prop="totalAmount" width="120" align="right">
+                  <template slot-scope="scope">
+                    <span class="price-text">{{ scope.row.totalAmount ? '¥' + Number(scope.row.totalAmount).toLocaleString() : '-' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="交货日期" prop="deliveryDate" width="110" align="center" />
+                <el-table-column label="状态" width="90" align="center">
+                  <template slot-scope="scope">
+                    <el-tag :type="orderStatusType(scope.row.status)" size="small">{{ orderStatusText(scope.row.status) }}</el-tag>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <div v-if="!orderList.length && !orderLoading" class="table-empty">暂无供货记录</div>
+            </div>
+          </el-tab-pane>
+
+          <!-- Tab 4: 订单异议 -->
+          <el-tab-pane label="订单异议" name="objections">
+            <div class="tab-content">
+              <el-table :data="objectionList" v-loading="objectionLoading" border size="small" style="width:100%">
+                <el-table-column label="采购单号" prop="poNo" min-width="150" />
+                <el-table-column label="供应商" prop="supplierName" min-width="140" />
+                <el-table-column label="异议原因" prop="reason" min-width="200" :show-overflow-tooltip="true" />
+                <el-table-column label="状态" width="100" align="center">
+                  <template slot-scope="scope">
+                    <el-tag :type="objStatusType(scope.row.status)" size="small">{{ objStatusText(scope.row.status) }}</el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="处理结果" prop="resolution" min-width="160" :show-overflow-tooltip="true" />
+                <el-table-column label="提交时间" prop="createTime" width="160" align="center" />
+              </el-table>
+              <div v-if="!objectionList.length && !objectionLoading" class="table-empty">暂无订单异议</div>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </template>
+
+      <!-- 未选中时占位 -->
+      <div v-else class="right-placeholder">
+        <i class="el-icon-document"></i>
+        <p>请从左侧选择一个供应商查看详情</p>
+      </div>
+    </div>
+
+    <!-- ====== 新增供应商弹窗 ====== -->
+    <el-dialog title="新增供应商" :visible.sync="addDialogOpen" width="580px" append-to-body @close="cancelAdd">
+      <el-form ref="addForm" :model="addForm" :rules="editRules" label-width="100px" size="small">
         <el-form-item label="供应商名称" prop="supplierName">
-          <el-input v-model="form.supplierName" placeholder="请输入供应商名称" />
+          <el-input v-model="addForm.supplierName" placeholder="请输入供应商名称" />
         </el-form-item>
-        <el-row>
+        <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="联系人" prop="contact"><el-input v-model="form.contact" /></el-form-item>
+            <el-form-item label="联系人" prop="contact">
+              <el-input v-model="addForm.contact" placeholder="请输入联系人" />
+            </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="手机" prop="phone"><el-input v-model="form.phone" /></el-form-item>
+            <el-form-item label="手机" prop="phone">
+              <el-input v-model="addForm.phone" placeholder="请输入手机号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="addForm.email" placeholder="请输入邮箱" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="地址" prop="address">
+              <el-input v-model="addForm.address" placeholder="请输入地址" />
+            </el-form-item>
           </el-col>
         </el-row>
-        <el-form-item label="邮箱" prop="email"><el-input v-model="form.email" /></el-form-item>
-        <el-form-item label="地址" prop="address"><el-input v-model="form.address" /></el-form-item>
       </el-form>
       <div slot="footer">
-        <el-button @click="cancel">取消</el-button>
-        <el-button type="primary" @click="submitForm">确定</el-button>
+        <el-button @click="cancelAdd">取消</el-button>
+        <el-button type="primary" @click="submitAdd">确定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
+
 <script>
 import { listSupplier, getSupplier, addSupplier, updateSupplier, delSupplier } from "@/api/bid/supplier";
+import { listPurchaseorder } from "@/api/bid/purchaseorder";
+import { listObjection } from "@/api/bid/objection";
+
 export default {
-  name: "Supplier",
+  name: "SupplierManage",
   data() {
     return {
-      loading: false, multiple: true, total: 0, list: [], ids: [],
-      open: false, title: "",
-      queryParams: { pageNum: 1, pageSize: 10, supplierName: null },
-      form: {},
-      rules: { supplierName: [{ required: true, message: "供应商名称不能为空", trigger: "blur" }] }
+      // ---- 左侧列表 ----
+      loading: false,
+      list: [],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        supplierName: null
+      },
+      currentSupplier: null,
+
+      // ---- 右侧Tab ----
+      activeTab: "detail",
+
+      // ---- 编辑表单 ----
+      editForm: {},
+      editRules: {
+        supplierName: [
+          { required: true, message: "供应商名称不能为空", trigger: "blur" }
+        ]
+      },
+
+      // ---- 新增弹窗 ----
+      addDialogOpen: false,
+      addForm: {},
+
+      // ---- 供货清单 ----
+      orderLoading: false,
+      orderList: [],
+
+      // ---- 订单异议 ----
+      objectionLoading: false,
+      objectionList: []
     };
   },
-  created() { this.getList(); },
+  created() {
+    this.getList();
+  },
   methods: {
+    /* ========== 左侧列表 ========== */
     getList() {
       this.loading = true;
-      listSupplier(this.queryParams).then(res => { this.list = res.rows; this.total = res.total; this.loading = false; });
-    },
-    handleQuery() { this.queryParams.pageNum = 1; this.getList(); },
-    resetQuery() { this.resetForm("queryForm"); this.handleQuery(); },
-    handleAdd() { this.form = { status: "0" }; this.open = true; this.title = "新增供应商"; },
-    handleUpdate(row) {
-      getSupplier(row.supplierId).then(res => { this.form = res.data; this.open = true; this.title = "修改供应商"; });
-    },
-    handleDelete(row) {
-      const ids = row.supplierId || this.ids.join(",");
-      this.$modal.confirm("确认删除？").then(() => delSupplier(ids)).then(() => { this.getList(); this.$modal.msgSuccess("删除成功"); });
-    },
-    cancel() { this.open = false; },
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (!valid) return;
-        const action = this.form.supplierId ? updateSupplier : addSupplier;
-        action(this.form).then(() => { this.$modal.msgSuccess("操作成功"); this.open = false; this.getList(); });
+      listSupplier(this.queryParams).then(res => {
+        this.list = res.rows || [];
+        this.total = res.total || 0;
+        this.loading = false;
+        // 默认选中第一条
+        if (this.list.length && !this.currentSupplier) {
+          this.selectSupplier(this.list[0]);
+        } else if (this.list.length && this.currentSupplier) {
+          // 刷新后保持选中（如果还在列表中）
+          const still = this.list.find(
+            s => s.supplierId === this.currentSupplier.supplierId
+          );
+          if (still) {
+            this.currentSupplier = still;
+          } else {
+            this.selectSupplier(this.list[0]);
+          }
+        } else {
+          this.currentSupplier = null;
+          this.orderList = [];
+          this.objectionList = [];
+        }
+      }).catch(() => {
+        this.loading = false;
       });
+    },
+
+    handleSearch() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+
+    handleSizeChange(size) {
+      this.queryParams.pageSize = size;
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+
+    handleCurrentChange(page) {
+      this.queryParams.pageNum = page;
+      this.getList();
+    },
+
+    selectSupplier(item) {
+      this.currentSupplier = item;
+      this.activeTab = "detail";
+      // 初始化编辑表单
+      this.editForm = {
+        supplierId: item.supplierId,
+        supplierName: item.supplierName,
+        contact: item.contact,
+        phone: item.phone,
+        email: item.email,
+        address: item.address,
+        status: item.status || "0"
+      };
+      // 清空子列表
+      this.orderList = [];
+      this.objectionList = [];
+    },
+
+    formatCode(id) {
+      if (!id) return 'KLP--';
+      return 'KLP' + String(id).padStart(2, '0');
+    },
+
+    /* ========== 新增 ========== */
+    handleAdd() {
+      this.addForm = { status: "0" };
+      this.addDialogOpen = true;
+    },
+
+    cancelAdd() {
+      this.addDialogOpen = false;
+      this.addForm = {};
+      this.$refs.addForm && this.$refs.addForm.resetFields();
+    },
+
+    submitAdd() {
+      this.$refs.addForm.validate(valid => {
+        if (!valid) return;
+        addSupplier(this.addForm).then(() => {
+          this.$message.success("新增成功");
+          this.addDialogOpen = false;
+          this.addForm = {};
+          this.getList();
+        }).catch(err => {
+          this.$message.error("新增失败：" + (err.msg || "未知错误"));
+        });
+      });
+    },
+
+    /* ========== 删除 ========== */
+    handleDelete(row) {
+      this.$confirm("确认删除供应商【" + row.supplierName + "】？", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        delSupplier(row.supplierId).then(() => {
+          this.$message.success("删除成功");
+          if (this.currentSupplier && this.currentSupplier.supplierId === row.supplierId) {
+            this.currentSupplier = null;
+          }
+          this.getList();
+        });
+      }).catch(() => {});
+    },
+
+    /* ========== 编辑保存 ========== */
+    handleSaveEdit() {
+      this.$refs.editForm.validate(valid => {
+        if (!valid) return;
+        updateSupplier(this.editForm).then(() => {
+          this.$message.success("保存成功");
+          // 刷新当前供应商数据
+          getSupplier(this.editForm.supplierId).then(res => {
+            this.currentSupplier = res.data;
+            this.editForm = {
+              supplierId: res.data.supplierId,
+              supplierName: res.data.supplierName,
+              contact: res.data.contact,
+              phone: res.data.phone,
+              email: res.data.email,
+              address: res.data.address,
+              status: res.data.status || "0"
+            };
+          });
+        }).catch(err => {
+          this.$message.error("保存失败：" + (err.msg || "未知错误"));
+        });
+      });
+    },
+
+    resetEditForm() {
+      if (this.currentSupplier) {
+        this.editForm = {
+          supplierId: this.currentSupplier.supplierId,
+          supplierName: this.currentSupplier.supplierName,
+          contact: this.currentSupplier.contact,
+          phone: this.currentSupplier.phone,
+          email: this.currentSupplier.email,
+          address: this.currentSupplier.address,
+          status: this.currentSupplier.status || "0"
+        };
+      }
+      this.$refs.editForm && this.$refs.editForm.resetFields();
+    },
+
+    /* ========== Tab: 供货清单 ========== */
+    loadOrders() {
+      if (!this.currentSupplier) return;
+      this.orderLoading = true;
+      listPurchaseorder({ supplierId: this.currentSupplier.supplierId, pageSize: 200 })
+        .then(res => {
+          this.orderList = res.rows || [];
+          this.orderLoading = false;
+        })
+        .catch(() => {
+          this.orderLoading = false;
+        });
+    },
+
+    orderStatusType(status) {
+      const map = { confirmed: "success", pending: "warning", cancelled: "danger", draft: "info" };
+      return map[status] || "info";
+    },
+
+    orderStatusText(status) {
+      const map = { confirmed: "已确认", pending: "待处理", cancelled: "已取消", draft: "草稿" };
+      return map[status] || status || "-";
+    },
+
+    /* ========== Tab: 订单异议 ========== */
+    loadObjections() {
+      if (!this.currentSupplier) return;
+      this.objectionLoading = true;
+      listObjection({ supplierId: this.currentSupplier.supplierId, pageSize: 200 })
+        .then(res => {
+          this.objectionList = res.rows || [];
+          this.objectionLoading = false;
+        })
+        .catch(() => {
+          this.objectionLoading = false;
+        });
+    },
+
+    objStatusType(status) {
+      const map = { resolved: "success", processing: "primary", pending: "warning", rejected: "danger" };
+      return map[status] || "info";
+    },
+
+    objStatusText(status) {
+      const map = { resolved: "已解决", processing: "处理中", pending: "待处理", rejected: "已拒绝" };
+      return map[status] || status || "-";
+    }
+  },
+  watch: {
+    activeTab(val) {
+      if (val === "orders" && !this.orderList.length) {
+        this.loadOrders();
+      }
+      if (val === "objections" && !this.objectionList.length) {
+        this.loadObjections();
+      }
+    },
+    currentSupplier() {
+      // 切换供应商时清除子列表
+      this.orderList = [];
+      this.objectionList = [];
+      // 如果当前在采购单或异议Tab，自动加载
+      if (this.activeTab === "orders") {
+        this.$nextTick(() => this.loadOrders());
+      }
+      if (this.activeTab === "objections") {
+        this.$nextTick(() => this.loadObjections());
+      }
     }
   }
 };
 </script>
+
+<style scoped>
+/* ====== 整体布局 ====== */
+.supplier-manage {
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+  background: #f5f7fa;
+  min-height: calc(100vh - 84px);
+  align-items: flex-start;
+}
+
+/* ====== 左侧面板 ====== */
+.left-panel {
+  width: 340px;
+  flex-shrink: 0;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 108px);
+}
+
+.panel-header {
+  padding: 16px 16px 12px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.panel-title {
+  font-size: 14px;
+  color: #909399;
+  display: block;
+  margin-bottom: 10px;
+}
+
+.search-row {
+  display: flex;
+  gap: 6px;
+}
+
+.search-row .el-input {
+  flex: 1;
+}
+
+/* 列表滚动区 */
+.list-scrollbar {
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* 供应商列表项 */
+.supplier-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #ebeef5;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  position: relative;
+}
+
+.supplier-item:hover {
+  background-color: #f5f7fa;
+}
+
+.supplier-item.active {
+  background-color: #ecf5ff;
+  border-left: 3px solid #409eff;
+  padding-left: 13px;
+}
+
+.item-left {
+  flex: 1;
+  min-width: 0;
+}
+
+.item-code {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 2px;
+}
+
+.item-name {
+  font-size: 14px;
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-contact {
+  font-size: 12px;
+  color: #909399;
+}
+
+.contact-sep {
+  margin: 0 4px;
+  color: #dcdfe6;
+}
+
+.item-right {
+  flex-shrink: 0;
+  margin-left: 8px;
+}
+
+.empty-list {
+  text-align: center;
+  color: #c0c4cc;
+  padding: 40px 0;
+  font-size: 13px;
+}
+
+/* 底部分页（在 340px 面板内塞下 total+sizes+prev+pager+next+jumper） */
+.panel-footer {
+  padding: 4px 6px;
+  border-top: 1px solid #ebeef5;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.panel-footer .el-pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  font-size: 12px;
+}
+
+/* 总条数 */
+.panel-footer .el-pagination >>> .el-pagination__total {
+  font-size: 11px;
+  color: #909399;
+  margin-right: 2px;
+  white-space: nowrap;
+}
+
+/* 每页条数下拉 */
+.panel-footer .el-pagination >>> .el-pagination__sizes {
+  margin-right: 2px;
+}
+.panel-footer .el-pagination >>> .el-pagination__sizes .el-input--mini .el-input__inner {
+  font-size: 11px;
+  height: 22px;
+  line-height: 22px;
+  width: 50px;
+  padding: 0 18px 0 4px;
+}
+.panel-footer .el-pagination >>> .el-pagination__sizes .el-input .el-select__caret {
+  line-height: 22px;
+  font-size: 11px;
+}
+
+/* 翻页按钮 */
+.panel-footer .el-pagination >>> .btn-prev,
+.panel-footer .el-pagination >>> .btn-next {
+  min-width: 20px;
+  padding: 0;
+}
+.panel-footer .el-pagination >>> .btn-prev i,
+.panel-footer .el-pagination >>> .btn-next i {
+  font-size: 11px;
+}
+
+/* 页码按钮 */
+.panel-footer .el-pagination >>> .el-pager li {
+  min-width: 20px;
+  font-size: 11px;
+  padding: 0 1px;
+}
+
+/* 跳转区域 */
+.panel-footer .el-pagination >>> .el-pagination__jump {
+  font-size: 11px;
+  color: #909399;
+  margin-left: 2px;
+  white-space: nowrap;
+}
+.panel-footer .el-pagination >>> .el-pagination__jump .el-input--mini {
+  width: auto;
+}
+.panel-footer .el-pagination >>> .el-pagination__jump .el-input__inner {
+  font-size: 11px;
+  height: 22px;
+  line-height: 22px;
+  width: 36px;
+  padding: 0 2px;
+}
+
+/* ====== 右侧面板 ====== */
+.right-panel {
+  flex: 1;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  min-height: calc(100vh - 108px);
+}
+
+/* Tab 导航自定义 */
+.detail-tabs >>> .el-tabs__header {
+  margin: 0;
+  padding: 0 16px;
+  background: #fafafa;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.detail-tabs >>> .el-tabs__item {
+  height: 40px;
+  line-height: 40px;
+  font-size: 13px;
+  color: #606266;
+  padding: 0 18px;
+  transition: all 0.2s;
+}
+
+.detail-tabs >>> .el-tabs__item.is-active {
+  color: #409eff;
+  background: #ecf5ff;
+  border-radius: 4px 4px 0 0;
+  font-weight: 500;
+}
+
+.detail-tabs >>> .el-tabs__item:hover {
+  color: #409eff;
+}
+
+.detail-tabs >>> .el-tabs__active-bar {
+  display: none;
+}
+
+.detail-tabs >>> .el-tabs__content {
+  padding: 20px 24px;
+}
+
+/* 详情网格（两列） */
+.detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 40px;
+}
+
+.detail-row {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  line-height: 40px;
+}
+
+.detail-label {
+  width: 100px;
+  flex-shrink: 0;
+  color: #909399;
+  font-size: 13px;
+}
+
+.detail-value {
+  flex: 1;
+  color: #303133;
+  font-size: 13px;
+  min-width: 0;
+  word-break: break-word;
+}
+
+/* 编辑表单 */
+.edit-form {
+  max-width: 640px;
+}
+
+/* 表格内容区 */
+.tab-content {
+  min-height: 200px;
+}
+
+.table-empty {
+  text-align: center;
+  color: #c0c4cc;
+  padding: 40px 0;
+  font-size: 13px;
+}
+
+/* 价格 */
+.price-text {
+  color: #f56c6c;
+  font-weight: 500;
+}
+
+/* 右侧占位 */
+.right-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: calc(100vh - 160px);
+  color: #c0c4cc;
+}
+
+.right-placeholder i {
+  font-size: 48px;
+  margin-bottom: 12px;
+}
+
+.right-placeholder p {
+  font-size: 14px;
+  margin: 0;
+}
+</style>