From 2d14daba65459e5ade0730f0658054a2f09ae45a Mon Sep 17 00:00:00 2001
From: fengyuan_yang <1976974459@qq.com>
Date: Fri, 7 Nov 2025 09:03:32 +0800
Subject: [PATCH] =?UTF-8?q?2025-11-07=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/base/maintainProductRouting.vue   | 698 +++++++++++++++---
 1 file changed, 591 insertions(+), 107 deletions(-)

diff --git a/src/views/modules/base/maintainProductRouting.vue b/src/views/modules/base/maintainProductRouting.vue
index 5e4fc67..41b7eee 100644
--- a/src/views/modules/base/maintainProductRouting.vue
+++ b/src/views/modules/base/maintainProductRouting.vue
@@ -1,93 +1,194 @@
 <template>
   <div class="mod-config">
-    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
-      <el-form-item>
-        <span slot="label" style="" @click="getSearchModal()"><a herf="#">{{ labels.partNo }}</a></span>
-        <el-input v-model="mainData.partNo" readonly style="width: 130px"></el-input>
-      </el-form-item>
-      <el-form-item :label="labels.spec">
-        <el-input v-model="mainData.spec" readonly style="width: 274px"></el-input>
-      </el-form-item>
-      <el-form-item :label="labels.status">
-        <el-input v-model="mainData.status" readonly style="width: 130px"></el-input>
-      </el-form-item>
-      <el-form-item :label="labels.site">
-        <el-input v-model="mainData.site" readonly style="width: 130px"></el-input>
-        <el-button @click="getPartDetail()" type="primary" style="margin-left: 2px;margin-top: 0px">
-          {{ buttons.getPartDetail }}
-        </el-button>
-        <el-button @click="changeStatus()" type="primary" style="margin-left: 2px;margin-top: 0px">
-          {{ buttons.changeStatus }}
-        </el-button>
-      </el-form-item>
-    </el-form>
-    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
-      <el-form-item :label="labels.routingType">
-        <el-input v-model="mainData.routingType" readonly style="width: 130px"></el-input>
-      </el-form-item>
-      <el-form-item :label="labels.revNo">
-        <el-input v-model="mainData.revNo" readonly style="width: 130px"></el-input>
-      </el-form-item>
-      <el-form-item :label="labels.phaseInDate">
-        <el-input v-model="mainData.phaseInDate" readonly style="width: 130px"></el-input>
-      </el-form-item>
-      <el-form-item :label="labels.phaseOutDate">
-        <el-input v-model="mainData.phaseOutDate" readonly style="width: 130px"></el-input>
-      </el-form-item>
-      <el-form-item :label="labels.umid">
-        <el-input v-model="mainData.umid" readonly style="width: 130px"></el-input>
-        <el-button @click="tongBuOrder()" type="primary" style="margin-left: 2px;margin-top: 0px">
-          {{ buttons.tongBuOrder }}
-        </el-button>
-      </el-form-item>
-    </el-form>
-    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
-      <el-form-item :label="labels.remark">
-        <el-input v-model="mainData.remark" readonly style="width: 417px"></el-input>
-        <!--        <el-checkbox style="margin-left: 20px" disabled v-model="mainData.defaultflag">默认</el-checkbox>-->
-        <!--        <el-checkbox style="margin-left: 80px" disabled v-model="mainData.repairFlag">修复版本</el-checkbox>-->
-      </el-form-item>
-      <el-form-item :label="labels.defaultflag">
-        <el-checkbox style="margin-left: 0px" disabled v-model="mainData.defaultflag"></el-checkbox>
-      </el-form-item>
-      <el-form-item :label="labels.repairFlag" style="margin-left: 20px">
-        <el-checkbox style="margin-left: 0px" disabled v-model="mainData.repairFlag"></el-checkbox>
-        <el-button @click="setDefault()" type="primary" style="margin-left: 58px;margin-top: 0px">
-          {{ buttons.setDefault }}
-        </el-button>
-        <el-button @click="copyRouting()" type="primary" style="margin-left: 2px;margin-top: 0px">
-          {{ buttons.copyRouting }}
-        </el-button>
-        <el-button @click="addRoutingHeaderModel()" :disabled="authAdd" type="primary"
-                   style="margin-left: 2px;margin-top: 0px">{{ buttons.addPart }}
-        </el-button>
-      </el-form-item>
-    </el-form>
-    <el-tabs v-model="activeName">
-      <el-tab-pane :label="labels.detail" name="first">
-        <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
-          <el-button @click="addRoutingDetail()" type="primary" :disabled="authAdd"
-                     style="margin-left: 2px;margin-top: 0px">{{ buttons.add }}
-          </el-button>
-          <el-button @click="editRoutingDetail()" type="primary" :disabled="authEdit"
-                     style="margin-left: 2px;margin-top: 0px">{{ buttons.update }}
-          </el-button>
-          <el-button @click="copyItemRouting()" type="primary" :disabled="authEdit"
-                     style="margin-left: 2px;margin-top: 0px">{{ '复制' }}
-          </el-button>
-          <el-button @click="deleteRoutingDetail()" type="primary" :disabled="authDelete"
-                     style="margin-left: 2px;margin-top: 0px">{{ buttons.delete }}
-          </el-button>
-          <el-button @click="jumpWorkCenter()" type="primary" :disabled="!jumpFlag"
-                     style="margin-left: 2px;margin-top: 0px">{{ buttons.workCenter }}
-          </el-button>
-          <el-button @click="getResourceModel()" type="primary" style="margin-left: 2px;margin-top: 0px">
-            {{ buttons.availableResource }}
+    <!-- 条件查询 -->
+    <el-card :class="['search-card', { 'collapsed': !searchExpanded }]" shadow="hover">
+      <div slot="header" class="search-header">
+        <div class="header-left">
+          <i class="el-icon-search"></i>
+          <span class="header-title">工艺路线查询</span>
+        </div>
+        <div class="header-right">
+          <el-button
+            type="text"
+            size="small"
+            @click="toggleSearchExpand"
+            class="collapse-btn">
+            <i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+            {{ searchExpanded ? '收起' : '展开' }}
           </el-button>
+        </div>
+      </div>
+
+      <el-form
+        :model="searchForm"
+        label-width="110px"
+        class="search-form"
+        @keyup.enter.native="searchMaterialList">
+
+        <!-- 所有查询条件 - 可展开/收起 -->
+        <template v-if="searchExpanded">
+          <!-- 第一行 -->
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="物料编码">
+                <el-input
+                  v-model="searchForm.partNo"
+                  placeholder="请输入物料编码"
+                  clearable
+                  prefix-icon="el-icon-goods">
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="物料名称">
+                <el-input
+                  v-model="searchForm.partName"
+                  placeholder="请输入物料名称"
+                  clearable
+                  prefix-icon="el-icon-document">
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="状态">
+                <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 100%">
+                  <el-option label="试验" value="试验"></el-option>
+                  <el-option label="投产" value="投产"></el-option>
+                  <el-option label="停用" value="停用"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="工艺路线类型">
+                <el-input
+                  v-model="searchForm.routingType"
+                  placeholder="请输入工艺路线类型"
+                  clearable>
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行 -->
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="版本号">
+                <el-input
+                  v-model="searchForm.revNo"
+                  placeholder="请输入版本号"
+                  clearable>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="计量单位">
+                <el-input
+                  v-model="searchForm.umid"
+                  placeholder="请输入计量单位"
+                  clearable>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="启用日期">
+                <el-date-picker
+                  v-model="searchForm.phaseInDate"
+                  type="date"
+                  placeholder="选择启用日期"
+                  value-format="yyyy-MM-dd"
+                  style="width: 100%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
+
+        <!-- 操作按钮区域 -->
+        <div class="search-actions">
+          <div class="action-left">
+            <el-button type="primary" @click="searchMaterialList" icon="el-icon-search">查询</el-button>
+            <el-button @click="resetSearch" icon="el-icon-refresh-left">重置</el-button>
+            <el-button type="primary" @click="addRoutingHeaderModel()" :disabled="authAdd" icon="el-icon-plus">新增物料</el-button>
+          </div>
+        </div>
+      </el-form>
+    </el-card>
+
+    <!-- 展示列表 -->
+    <el-table
+      :height="height"
+      :data="materialList"
+      border
+      v-loading="materialListLoading"
+      @row-click="handleMaterialRowClick"
+      @current-change="changeCurrentRow"
+      style="width: 100%;">
+      <el-table-column prop="partNo" label="物料编码" width="120" align="center"></el-table-column>
+      <el-table-column prop="spec" label="物料名称/规格" width="200" align="left" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="status" label="状态" width="80" align="center"></el-table-column>
+      <el-table-column prop="routingType" label="工艺路线类型" width="120" align="center"></el-table-column>
+      <el-table-column prop="revNo" label="版本号" width="100" align="center"></el-table-column>
+      <el-table-column prop="phaseInDate" label="启用日期" width="120" align="center"></el-table-column>
+      <el-table-column prop="phaseOutDate" label="失效日期" width="120" align="center"></el-table-column>
+      <el-table-column prop="umid" label="计量单位" width="100" align="center"></el-table-column>
+      <el-table-column label="默认" width="80" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.defaultflag === 'Y' ? '✓' : '×' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="修复版本" width="100" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.repairFlag === 'Y' ? '✓' : '×' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="remark" label="备注" min-width="150" align="left" show-overflow-tooltip></el-table-column>
+      <el-table-column label="操作" width="160" align="center" fixed="right">
+        <template slot-scope="scope">
+          <el-link style="cursor: pointer" @click.stop="editRoutingHeaderModel(scope.row)">编辑</el-link>
+          <el-link style="cursor: pointer" @click.stop="deleteRoutingHeaderData(scope.row)">删除</el-link>
+          <el-dropdown @command="(command) => handleMoreCommand(command, scope.row)" trigger="click">
+            <el-link style="cursor: pointer">
+              更多 <i class="el-icon-arrow-down el-icon--right"></i>
+            </el-link>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="detail">获取详情</el-dropdown-item>
+              <el-dropdown-item command="changeStatus">修改状态</el-dropdown-item>
+              <el-dropdown-item command="syncOrder">同步工单</el-dropdown-item>
+              <el-dropdown-item divided command="setDefault">设置默认</el-dropdown-item>
+              <el-dropdown-item command="copyRouting">复制路线</el-dropdown-item>
+              <el-dropdown-item command="addVersion">新增版本</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页栏 -->
+    <el-pagination
+      style="margin-top: 0px"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pageIndex"
+      :page-sizes="[20, 50, 100, 200, 500]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+
+    <!-- 页签 -->
+    <el-tabs v-model="activeName" style="width: 100%" :style="{height: secondHeight + 'px'}" type="border-card" @tab-click="handleTabClick" class="customer-tab">
+      <el-tab-pane label="明细" name="first">
+        <el-form label-position="top" style="margin-left: 2px;">
+          <el-button @click="addRoutingDetail()" type="primary" :disabled="authAdd" icon="el-icon-plus">新增</el-button>
+          <el-button @click="editRoutingDetail()" type="primary" :disabled="authEdit" icon="el-icon-edit">修改</el-button>
+          <el-button @click="copyItemRouting()" type="primary" :disabled="authEdit" icon="el-icon-document-copy">复制</el-button>
+          <el-button @click="deleteRoutingDetail()" type="primary" :disabled="authDelete" icon="el-icon-delete">删除</el-button>
+          <el-button @click="jumpWorkCenter()" type="primary" :disabled="!jumpFlag">加工中心</el-button>
+          <el-button @click="getResourceModel()" type="primary">可用机台</el-button>
         </el-form>
         <el-table
-          :height="height"
           :data="dataList2"
+          :height="secondHeight - 68"
           border
           @row-click="clickData"
           highlight-current-row
@@ -111,24 +212,16 @@
           </el-table-column>
         </el-table>
       </el-tab-pane>
-      <el-tab-pane :label="labels.toolDetail" name="second">
-        <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
-          <el-button @click="addRoutingTool()" type="primary" :disabled="authAdd"
-                     style="margin-left: 2px;margin-top: 0px">{{ buttons.add }}
-          </el-button>
-          <el-button @click="editRoutingTool()" type="primary" :disabled="authEdit"
-                     style="margin-left: 2px;margin-top: 0px">{{ buttons.update }}
-          </el-button>
-          <el-button @click="deleteRoutingTool()" type="primary" :disabled="authDelete"
-                     style="margin-left: 2px;margin-top: 0px">{{ buttons.delete }}
-          </el-button>
-          <el-button @click="jumpToolInfo()" type="primary" :disabled="!jumpFlag2"
-                     style="margin-left: 2px;margin-top: 0px">{{ buttons.toolDetail }}
-          </el-button>
+      <el-tab-pane label="工具清单" name="second">
+        <el-form label-position="top" style="margin-left: 2px;">
+          <el-button @click="addRoutingTool()" type="primary" :disabled="authAdd" icon="el-icon-plus">新增</el-button>
+          <el-button @click="editRoutingTool()" type="primary" :disabled="authEdit" icon="el-icon-edit">修改</el-button>
+          <el-button @click="deleteRoutingTool()" type="primary" :disabled="authDelete" icon="el-icon-delete">删除</el-button>
+          <el-button @click="jumpToolInfo()" type="primary" :disabled="!jumpFlag2">工具信息</el-button>
         </el-form>
         <el-table
-          :height="height"
           :data="dataList3"
+          :height="secondHeight - 68"
           border
           @row-click="clickData2"
           highlight-current-row
@@ -153,12 +246,13 @@
         </el-table>
       </el-tab-pane>
     </el-tabs>
-    <el-dialog :title="labels.dataList" :close-on-click-modal="false" v-drag :visible.sync="modelFlag" width="680px">
+
+    <!-- 物料选择对话框（已不再需要，但保留作为备用） -->
+    <el-dialog :title="labels.dataList" :close-on-click-modal="false" v-drag :visible.sync="modelFlag" width="680px" style="display: none;">
       <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
         <el-form-item :label="labels.partNo">
           <el-input v-model="searchPartNo" style="width: 130px"></el-input>
           <el-button @click="searchRoutingWithPartNo()" type="primary">{{ buttons.search }}</el-button>
-          <!--          <el-button @click="addRoutingHeaderModel()" :disabled="authAdd" type="primary">{{ buttons.add }}</el-button>-->
         </el-form-item>
       </el-form>
       <el-table
@@ -614,6 +708,25 @@ export default {
   },
   data() {
     return {
+      // 新增的搜索条件和物料列表相关数据
+      searchForm: {
+        partNo: '',
+        partName: '',
+        status: '',
+        routingType: '',
+        revNo: '',
+        umid: '',
+        phaseInDate: ''
+      },
+      searchExpanded: true,
+      materialList: [],
+      materialListLoading: false,
+      currentMaterial: null,
+      pageIndex: 1,
+      pageSize: 20,
+      totalPage: 0,
+      allMaterialData: [],
+      secondHeight: 200,
       labels: {
         site: '工厂编号:',
         partNo: '物料编码:',
@@ -1635,10 +1748,177 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this.height = window.innerHeight - 310;
+      this.height = window.innerHeight / 2 - 100;
+      /*第二个表格高度的动态调整*/
+      this.secondHeight = window.innerHeight - this.height - 170;
     })
+    // 初始查询物料列表
+    this.searchMaterialList();
   },
   methods: {
+    // ==================== 新增的方法 ====================
+    // 切换搜索条件展开/收起
+    toggleSearchExpand() {
+      this.searchExpanded = !this.searchExpanded;
+    },
+
+    // 当前行改变事件
+    changeCurrentRow(currentRow) {
+      this.currentMaterial = currentRow;
+    },
+
+    // 查询物料列表
+    searchMaterialList() {
+      this.materialListLoading = true;
+      let params = {
+        partNo: this.searchForm.partNo,
+        spec: this.searchForm.partName,
+        status: this.searchForm.status,
+        routingType: this.searchForm.routingType,
+        revNo: this.searchForm.revNo,
+        umid: this.searchForm.umid,
+        phaseInDate: this.searchForm.phaseInDate,
+        site: this.$store.state.user.site
+      };
+
+      searchRoutingWithPartNo(params).then(({data}) => {
+        this.materialListLoading = false;
+        if (data && data.rows) {
+          // 后端返回全部数据，前端处理分页
+          const allData = data.rows;
+          this.totalPage = allData.length;
+
+          // 计算当前页数据
+          const startIndex = (this.pageIndex - 1) * this.pageSize;
+          const endIndex = startIndex + this.pageSize;
+          this.materialList = allData.slice(startIndex, endIndex);
+
+          // 保存全部数据供分页使用
+          this.allMaterialData = allData;
+        } else {
+          this.materialList = [];
+          this.totalPage = 0;
+          this.allMaterialData = [];
+        }
+      }).catch((error) => {
+        this.materialListLoading = false;
+        this.materialList = [];
+        this.totalPage = 0;
+        this.allMaterialData = [];
+        console.error('查询物料列表失败:', error);
+      });
+    },
+
+    // 重置搜索条件
+    resetSearch() {
+      this.searchForm = {
+        partNo: '',
+        partName: '',
+        status: '',
+        routingType: '',
+        revNo: '',
+        umid: '',
+        phaseInDate: ''
+      };
+      this.pageIndex = 1;
+      this.searchMaterialList();
+    },
+
+    // 物料行点击事件
+    handleMaterialRowClick(row) {
+      this.currentMaterial = JSON.parse(JSON.stringify(row));
+      this.mainData = {
+        partNo: row.partNo,
+        spec: row.spec,
+        status: row.status,
+        site: row.site,
+        routingType: row.routingType,
+        revNo: row.revNo,
+        phaseInDate: row.phaseInDate,
+        phaseOutDate: row.phaseOutDate,
+        umid: row.umid,
+        remark: row.remark,
+        defaultflag: row.defaultflag === 'Y',
+        repairFlag: row.repairFlag === 'Y',
+      };
+
+      // 查询明细数据
+      let data1 = {
+        site: row.site,
+        partNo: row.partNo,
+        revNo: row.revNo,
+      };
+      searchRoutingDetailData(data1).then(({data}) => {
+        this.dataList2 = data.rows || [];
+      });
+
+      // 查询工具数据
+      searchRoutingToolData(data1).then(({data}) => {
+        this.dataList3 = data.rows || [];
+      });
+    },
+
+    // 更多操作下拉菜单处理
+    handleMoreCommand(command, row) {
+      this.currentMaterial = JSON.parse(JSON.stringify(row));
+      this.handleMaterialRowClick(row);
+
+      switch(command) {
+        case 'detail':
+          this.getPartDetail();
+          break;
+        case 'changeStatus':
+          this.changeStatus();
+          break;
+        case 'syncOrder':
+          this.tongBuOrder();
+          break;
+        case 'setDefault':
+          this.setDefault();
+          break;
+        case 'copyRouting':
+          this.copyRouting();
+          break;
+        case 'addVersion':
+          // 新增版本功能可以调用addRoutingHeaderModel，并预填充数据
+          this.addRoutingHeaderModel();
+          break;
+      }
+    },
+
+    // 页签点击事件
+    handleTabClick(tab) {
+      // 切换页签时可以做一些处理
+      console.log('Tab clicked:', tab.name);
+    },
+
+    // 分页相关
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      // 使用已加载的数据进行分页
+      if (this.allMaterialData && this.allMaterialData.length > 0) {
+        const startIndex = (this.pageIndex - 1) * this.pageSize;
+        const endIndex = startIndex + this.pageSize;
+        this.materialList = this.allMaterialData.slice(startIndex, endIndex);
+      } else {
+        this.searchMaterialList();
+      }
+    },
+
+    handleCurrentChange(val) {
+      this.pageIndex = val;
+      // 使用已加载的数据进行分页
+      if (this.allMaterialData && this.allMaterialData.length > 0) {
+        const startIndex = (this.pageIndex - 1) * this.pageSize;
+        const endIndex = startIndex + this.pageSize;
+        this.materialList = this.allMaterialData.slice(startIndex, endIndex);
+      } else {
+        this.searchMaterialList();
+      }
+    },
+
+    // ==================== 原有的方法（部分需要调整） ====================
     // 复制
     copyItemRouting() {
       if (!this.currentRow) {
@@ -1751,11 +2031,19 @@ export default {
       saveRoutingHeaderData(this.routingHeaderData).then(({data}) => {
         if (data && data.code == 200) {
           this.routingHeaderModelFlag = false;
-          //设置查询的物料编码
-          this.searchPartNo = this.routingHeaderData.partNo;
-          this.tableHanddle(this.routingHeaderData);
-          //this.searchRoutingWithPartNo(); 调用有问题2022-12-26
           this.$message.success(this.labels.doYes)
+          // 刷新物料列表
+          this.searchMaterialList();
+          // 自动选中新增/修改的记录
+          this.$nextTick(() => {
+            let targetRow = this.materialList.find(item =>
+              item.partNo === this.routingHeaderData.partNo &&
+              item.revNo === this.routingHeaderData.revNo
+            );
+            if (targetRow) {
+              this.handleMaterialRowClick(targetRow);
+            }
+          });
         } else {
           this.$alert(data.msg, this.labels.error, {
             confirmButtonText: this.labels.true
@@ -1776,7 +2064,13 @@ export default {
         }
         deleteRoutingHeaderData(inData).then(({data}) => {
           if (data && data.code == 200) {
-            this.searchRoutingWithPartNo();
+            this.$message.success(this.labels.doYes)
+            // 刷新物料列表
+            this.searchMaterialList();
+            // 清空下方明细和工具数据
+            this.dataList2 = [];
+            this.dataList3 = [];
+            this.currentMaterial = null;
           } else {
             this.$alert(data.msg, this.labels.error, {
               confirmButtonText: this.labels.true
@@ -2727,5 +3021,195 @@ export default {
 </script>
 
 <style scoped>
+/* ============ 查询卡片样式 (完全参考interfaceLog) ============ */
+.search-card {
+  margin-bottom: 10px;
+  border-radius: 4px;
+}
+
+.search-card /deep/ .el-card__header {
+  background: #f5f7fa;
+  border-bottom: 1px solid #EBEEF5;
+  padding: 12px 20px;
+}
+
+.search-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #303133;
+  font-weight: 500;
+}
+
+.header-left i {
+  margin-right: 8px;
+  font-size: 16px;
+  color: #409EFF;
+}
+
+.header-title {
+  font-weight: 500;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.collapse-btn {
+  color: #606266;
+  padding: 0;
+  font-size: 13px;
+}
+
+.collapse-btn:hover {
+  color: #409EFF;
+  transform: translateY(-1px);
+}
+
+.collapse-btn i {
+  margin-right: 4px;
+  transition: transform 0.3s ease;
+}
+
+/* 搜索表单样式 */
+.search-form {
+  padding: 10px 0;
+  min-height: 0;
+}
+
+/* 卡片主体样式 */
+.search-card /deep/ .el-card__body {
+  padding: 10px;
+  transition: all 0.3s ease;
+}
+
+/* 收起时的样式 */
+.search-card.collapsed /deep/ .el-card__body {
+  padding: 10px 20px;
+}
+
+.search-form /deep/ .el-form-item {
+  margin-bottom: 18px;
+}
 
+.search-form /deep/ .el-form-item__label {
+  font-weight: 500;
+  color: #606266;
+  padding-bottom: 6px;
+}
+
+.search-form /deep/ .el-input__inner,
+.search-form /deep/ .el-textarea__inner {
+  border-radius: 6px;
+  border: 1px solid #DCDFE6;
+  transition: all 0.3s ease;
+}
+
+.search-form /deep/ .el-input__inner:focus,
+.search-form /deep/ .el-textarea__inner:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
+}
+
+.search-form /deep/ .el-select {
+  width: 100%;
+}
+
+.search-form /deep/ .el-date-editor.el-input {
+  width: 100%;
+}
+
+/* 操作按钮区域 */
+.search-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0 2px 0;
+}
+
+/* 展开时显示上边框 */
+.search-card:not(.collapsed) .search-actions {
+  border-top: 1px solid #f0f0f0;
+  margin-top: 8px;
+}
+
+/* 收起时不显示上边框和上边距 */
+.search-card.collapsed .search-actions {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.action-left,
+.action-right {
+  display: flex;
+  gap: 8px;
+}
+
+.search-actions .el-button {
+  border-radius: 4px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.search-actions .el-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.search-actions .el-button--primary {
+  background: #60aeff;
+  border-color: #60aeff;
+}
+
+.search-actions .el-button--primary:hover {
+  background: #7dbdff;
+  border-color: #7dbdff;
+}
+
+/* ============ 表格样式 (参考outboundNotification) ============ */
+.el-table /deep/ .cell {
+  height: auto;
+  line-height: 1.5;
+}
+
+/* ============ 页签样式 (参考outboundNotification) ============ */
+/deep/ .customer-tab .el-tabs__content {
+  padding: 5px !important;
+}
+
+/* ============ 分页器样式 ============ */
+.el-pagination {
+  margin-top: 10px;
+  text-align: right;
+}
+
+/* ============ 响应式布局 ============ */
+@media (max-width: 1200px) {
+  .search-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .action-left,
+  .action-right {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+@media screen and (max-width: 1366px) {
+  .search-form /deep/ .el-col-6 {
+    width: 50%;
+  }
+}
 </style>