2026-02-06

收货入库任务通知
拣货出库任务通知增加查询条件

src/views/modules/qc/inboundNotification.vue

@@ -1,70 +1,154 @@
 <template>
   <div class="mod-config">
     <!-- 条件查询 -->
-    <el-form :inline="true" label-position="top" :model="searchData">
-      <el-form-item :label="'单据号'">
-        <el-input v-model="searchData.orderNo" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'单据类型'">
-        <el-select v-model="searchData.orderType" clearable style="width: 100px">
-          <el-option label="采购入库" value="采购入库"></el-option>
-          <el-option label="生产入库" value="生产入库"></el-option>
-          <el-option label="销售退货" value="销售退货"></el-option>
-          <el-option label="其他入库" value="其他入库"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="'单据状态'">
-        <el-select multiple collapse-tags v-model="searchData.orderStatusList" clearable style="width: 160px">
-          <el-option label="草稿" value="草稿"></el-option>
-          <el-option label="待检验" value="待检验"></el-option>
-          <el-option label="编辑中" value="编辑中"></el-option>
-          <el-option label="待入库" value="待入库"></el-option>
-          <el-option label="已完成" value="已完成"></el-option>
-          <el-option label="已关闭" value="已关闭"></el-option>
-          <el-option label="已归档" value="已归档"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="'部门'">
-        <el-select v-model="searchData.departmentNo" clearable placeholder="请选择" style="width: 140px">
-          <el-option
-            v-for="item in departmentList"
-            :key="item.departmentNo"
-            :label="item.departmentDesc"
-            :value="item.departmentNo">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="'要求入库日期'">
-        <el-date-picker
-          style="width: 120px"
-          v-model="searchData.startDate"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item style="margin-top: 23px;">
-        <laber style="margin-left: -9px;font-size: 19px">&#10142</laber>
-      </el-form-item>
-      <el-form-item :label="' '">
-        <el-date-picker
-          style="width: 120px"
-          v-model="searchData.endDate"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item :label="' '">
-        <el-button v-if="!authSearch" type="primary" :loading="searchLoading" @click="getDataList()">查询</el-button>
-        <el-button v-if="!authSave" type="primary" @click="saveModal()">新增</el-button>
-        <el-button v-if="!authDelete" type="primary" @click="deleteModal()">删除</el-button>
-        <el-button v-if="!authArchive" type="primary" @click="archiveModal()">归档</el-button>
-      </el-form-item>
-      <el-form-item :label="' '">
-        <el-button @click="exportExcel()" type="primary" style="margin-left: 2px">{{'导出'}}</el-button>
-      </el-form-item>
-    </el-form>
+    <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
+        :inline="true"
+        label-position="top"
+        :model="searchData"
+        class="search-form"
+        @keyup.enter.native="getDataList">
+
+        <!-- 所有查询条件 - 可展开/收起 -->
+        <template v-if="searchExpanded">
+          <!-- 第一行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item label="单据号">
+                <el-input v-model="searchData.orderNo" placeholder="请输入单据号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="单据类型">
+                <el-select v-model="searchData.orderType" placeholder="请选择" clearable style="width: 100%">
+                  <el-option label="采购入库" value="采购入库"></el-option>
+                  <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="4">
+              <el-form-item label="单据状态">
+                <el-select multiple collapse-tags v-model="searchData.orderStatusList" placeholder="请选择" clearable style="width: 100%">
+                  <el-option label="草稿" value="草稿"></el-option>
+                  <el-option label="待检验" value="待检验"></el-option>
+                  <el-option label="编辑中" value="编辑中"></el-option>
+                  <el-option label="待入库" value="待入库"></el-option>
+                  <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="4">
+              <el-form-item label="部门">
+                <el-select v-model="searchData.departmentNo" placeholder="请选择" clearable style="width: 100%">
+                  <el-option
+                    v-for="item in departmentList"
+                    :key="item.departmentNo"
+                    :label="item.departmentDesc"
+                    :value="item.departmentNo">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="要求入库日期(起)">
+                <el-date-picker
+                  style="width: 91%"
+                  v-model="searchData.startDate"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="开始日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="要求入库日期(止)">
+                <el-date-picker
+                  style="width: 91%"
+                  v-model="searchData.endDate"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item label="创建日期(起)">
+                <el-date-picker
+                  style="width: 91%"
+                  v-model="searchData.createdStartDate"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="开始日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="创建日期(止)">
+                <el-date-picker
+                  style="width: 91%"
+                  v-model="searchData.createdEndDate"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
+
+        <!-- 操作按钮区域 -->
+        <el-row :gutter="16">
+          <el-col :span="24">
+            <div class="search-actions">
+              <div class="action-left">
+                <el-button
+                  v-if="!authSearch"
+                  type="primary"
+                  icon="el-icon-search"
+                  :loading="searchLoading"
+                  @click="getDataList()">
+                  查询
+                </el-button>
+                <el-button
+                  icon="el-icon-refresh-left"
+                  @click="resetSearch">
+                  重置
+                </el-button>
+                <el-button v-if="!authSave" type="success" icon="el-icon-plus" @click="saveModal()">新增</el-button>
+                <el-button v-if="!authDelete" type="danger" icon="el-icon-delete" @click="deleteModal()">删除</el-button>
+                <el-button v-if="!authArchive" type="warning" icon="el-icon-folder" @click="archiveModal()">归档</el-button>
+                <el-button type="primary" icon="el-icon-download" @click="exportExcel()">导出</el-button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
 
     <!-- 展示列表 -->
     <el-table
@@ -750,6 +834,7 @@
     },
     data () {
       return {
+        searchExpanded: true, // 搜索条件展开状态
         columnsProp:['createBy', 'updateBy'],
         // 是否收藏
         favorite: false,
@@ -772,6 +857,8 @@
           departmentNo: '', // 部门查询条件
           startDate: '',
           endDate: '',
+          createdStartDate: '', // 创建时间开始
+          createdEndDate: '', // 创建时间结束
           page: 1,
           limit: 10,
         },
@@ -1289,12 +1376,17 @@
 
     mounted () {
       this.$nextTick(() => {
-        this.height = window.innerHeight / 2 - 100
-        /*第二个表格高度的动态调整*/
-        this.secondHeight = window.innerHeight - this.height - 170
+        this.calculateTableHeight()
+        // 监听窗口大小变化
+        window.addEventListener('resize', this.calculateTableHeight)
       })
     },
 
+    beforeDestroy() {
+      // 移除窗口大小变化监听
+      window.removeEventListener('resize', this.calculateTableHeight)
+    },
+
     created () {
       // 按钮控制
       this.getButtonAuthData()
@@ -1314,6 +1406,43 @@
     },
 
     methods: {
+      // 切换搜索条件展开/收起
+      toggleSearchExpand() {
+        this.searchExpanded = !this.searchExpanded
+        this.$nextTick(() => {
+          this.calculateTableHeight()
+        })
+      },
+
+      // 计算表格高度
+      calculateTableHeight() {
+        // 展开时搜索区域高度约180px，收起时约80px
+        const windowHeight = window.innerHeight;
+        const headerHeight = this.searchExpanded ? 244 : 124;
+        this.height = (windowHeight - headerHeight - 85) / 2 - 30;
+        this.secondHeight = windowHeight - this.height - headerHeight - 120;
+      },
+
+      // 重置搜索条件
+      resetSearch() {
+        this.searchData = {
+          site: '',
+          userName: this.$store.state.user.name,
+          orderNo: '',
+          orderType: '',
+          orderStatus: '',
+          orderStatusList: ['草稿'],
+          departmentNo: '',
+          startDate: '',
+          endDate: '',
+          createdStartDate: '',
+          createdEndDate: '',
+          page: 1,
+          limit: 10,
+        }
+        this.pageIndex = 1
+      },
+
       // 获取用户的bu
       getSiteAndBuByUserName () {
         let tempData = {
@@ -2139,4 +2268,212 @@
   height: auto;
   line-height: 1.5;
 }
+
+/* 搜索卡片样式 */
+.search-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.search-card:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.search-card /deep/ .el-card__header {
+  padding: 5px 20px;
+  background: linear-gradient(135deg, #9ac3d0 20%, #b6c7dd 80%);
+  border-bottom: none;
+}
+
+.search-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  color: #fff;
+}
+
+.header-left i {
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.header-title {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.header-right {
+  color: #fff;
+}
+
+.collapse-btn {
+  color: #fff;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.collapse-btn:hover {
+  color: #f0f0f0;
+  transform: translateY(-1px);
+}
+
+.collapse-btn i {
+  transition: transform 0.3s ease;
+}
+
+/* 搜索表单样式 */
+.search-form {
+  padding: 6px 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: 12px;
+}
+
+.search-form /deep/ .el-form-item__label {
+  font-weight: 500;
+  color: #606266;
+  padding-bottom: 4px;
+}
+
+.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: #9ac3d0;
+  box-shadow: 0 0 0 2px rgba(154, 195, 208, 0.1);
+}
+
+.search-form /deep/ .el-select {
+  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: 6px;
+}
+
+/* 收起时不显示上边框和上边距 */
+.search-card.collapsed .search-actions {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.action-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.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;
+}
+
+.search-actions .el-button--success {
+  background: #67C23A;
+  border-color: #67C23A;
+}
+
+.search-actions .el-button--success:hover {
+  background: #85ce61;
+  border-color: #85ce61;
+}
+
+.search-actions .el-button--danger {
+  background: #F56C6C;
+  border-color: #F56C6C;
+}
+
+.search-actions .el-button--danger:hover {
+  background: #f78989;
+  border-color: #f78989;
+}
+
+.search-actions .el-button--warning {
+  background: #E6A23C;
+  border-color: #E6A23C;
+}
+
+.search-actions .el-button--warning:hover {
+  background: #ebb563;
+  border-color: #ebb563;
+}
+
+/* 表格样式 */
+/deep/ .el-table th {
+  background-color: #f5f7fa;
+  color: #303133;
+  font-weight: 600;
+}
+
+/deep/ .el-table tr:hover > td {
+  background-color: #f5f7fa !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .search-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .action-left {
+    width: 100%;
+    justify-content: center;
+  }
+}
 </style>

src/views/modules/qc/outboundNotification.vue

@@ -1,61 +1,143 @@
 <template>
   <div class="mod-config">
     <!-- 条件查询 -->
-    <el-form :inline="true" label-position="top" :model="searchData">
-      <el-form-item :label="'单据号'">
-        <el-input v-model="searchData.orderNo" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'单据类型'">
-        <el-select v-model="searchData.orderType" clearable style="width: 100px">
-          <el-option label="采购退货" value="采购退货"></el-option>
-          <el-option label="销售出库" value="销售出库"></el-option>
-          <el-option label="其他出库" value="其他出库"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="'单据状态'">
-        <el-select multiple collapse-tags v-model="searchData.orderStatusList" clearable style="width: 160px">
-          <el-option label="草稿" value="草稿"></el-option>
-          <el-option label="待检验" value="待检验"></el-option>
-          <el-option label="编辑中" value="编辑中"></el-option>
-          <el-option label="待包装" value="待包装"></el-option>
-          <el-option label="待出库" value="待出库"></el-option>
-          <el-option label="已完成" value="已完成"></el-option>
-          <el-option label="已关闭" value="已关闭"></el-option>
-          <el-option label="已归档" value="已归档"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="'要求出库日期'">
-        <el-date-picker
-          style="width: 120px"
-          v-model="searchData.startDate"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item style="margin-top: 23px;">
-        <laber style="margin-left: -9px;font-size: 19px">&#10142</laber>
-      </el-form-item>
-      <el-form-item :label="' '">
-        <el-date-picker
-          style="width: 120px"
-          v-model="searchData.endDate"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item :label="' '">
-        <el-button v-if="!authSearch" type="primary" :loading="searchLoading" @click="getDataList()">查询</el-button>
-        <el-button v-if="!authSave" type="primary" @click="saveModal()">新增</el-button>
-        <el-button v-if="!authDelete" type="primary" @click="deleteModal()">删除</el-button>
-        <el-button v-if="!authArchive" type="primary" @click="archiveModal()">归档</el-button>
-      </el-form-item>
-      <el-form-item :label="' '">
-        <el-button @click="exportExcel()" type="primary" style="margin-left: 2px">{{'导出'}}</el-button>
-        <el-button @click="packingModal()" type="primary" style="margin-left: 2px">重新包装</el-button>
-      </el-form-item>
-    </el-form>
+    <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
+        :inline="true"
+        label-position="top"
+        :model="searchData"
+        class="search-form"
+        @keyup.enter.native="getDataList">
+
+        <!-- 所有查询条件 - 可展开/收起 -->
+        <template v-if="searchExpanded">
+          <!-- 第一行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item label="单据号">
+                <el-input v-model="searchData.orderNo" placeholder="请输入单据号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="单据类型">
+                <el-select v-model="searchData.orderType" 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="4">
+              <el-form-item label="单据状态">
+                <el-select multiple collapse-tags v-model="searchData.orderStatusList" placeholder="请选择" clearable style="width: 100%">
+                  <el-option label="草稿" value="草稿"></el-option>
+                  <el-option label="待检验" value="待检验"></el-option>
+                  <el-option label="编辑中" value="编辑中"></el-option>
+                  <el-option label="待包装" value="待包装"></el-option>
+                  <el-option label="待出库" value="待出库"></el-option>
+                  <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="4">
+              <el-form-item label="要求出库日期(起)">
+                <el-date-picker
+                  style="width: 91%"
+                  v-model="searchData.startDate"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="开始日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="要求出库日期(止)">
+                <el-date-picker
+                  style="width: 91%"
+                  v-model="searchData.endDate"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item label="创建日期(起)">
+                <el-date-picker
+                  style="width: 91%"
+                  v-model="searchData.createdStartDate"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="开始日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="创建日期(止)">
+                <el-date-picker
+                  style="width: 91%"
+                  v-model="searchData.createdEndDate"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
+
+        <!-- 操作按钮区域 -->
+        <el-row :gutter="16">
+          <el-col :span="24">
+            <div class="search-actions">
+              <div class="action-left">
+                <el-button
+                  v-if="!authSearch"
+                  type="primary"
+                  icon="el-icon-search"
+                  :loading="searchLoading"
+                  @click="getDataList()">
+                  查询
+                </el-button>
+                <el-button
+                  icon="el-icon-refresh-left"
+                  @click="resetSearch">
+                  重置
+                </el-button>
+                <el-button v-if="!authSave" type="success" icon="el-icon-plus" @click="saveModal()">新增</el-button>
+                <el-button v-if="!authDelete" type="danger" icon="el-icon-delete" @click="deleteModal()">删除</el-button>
+                <el-button v-if="!authArchive" type="warning" icon="el-icon-folder" @click="archiveModal()">归档</el-button>
+                <el-button type="primary" icon="el-icon-download" @click="exportExcel()">导出</el-button>
+                <el-button type="info" icon="el-icon-box" @click="packingModal()">重新包装</el-button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
 
     <!-- 展示列表 -->
     <el-table
@@ -734,6 +816,7 @@
     },
     data () {
       return {
+        searchExpanded: true, // 搜索条件展开状态
         columnsProp:['createBy', 'updateBy'],
         // 是否收藏
         favorite: false,
@@ -755,6 +838,8 @@
           orderStatusList: ['草稿'],
           startDate: '',
           endDate: '',
+          createdStartDate: '', // 创建时间开始
+          createdEndDate: '', // 创建时间结束
           page: 1,
           limit: 10,
         },
@@ -1242,12 +1327,17 @@
 
     mounted () {
       this.$nextTick(() => {
-        this.height = window.innerHeight / 2 - 100
-        /*第二个表格高度的动态调整*/
-        this.secondHeight = window.innerHeight - this.height - 170
+        this.calculateTableHeight()
+        // 监听窗口大小变化
+        window.addEventListener('resize', this.calculateTableHeight)
       })
     },
 
+    beforeDestroy() {
+      // 移除窗口大小变化监听
+      window.removeEventListener('resize', this.calculateTableHeight)
+    },
+
     created () {
       // 按钮控制
       this.getButtonAuthData()
@@ -1265,6 +1355,42 @@
     },
 
     methods: {
+      // 切换搜索条件展开/收起
+      toggleSearchExpand() {
+        this.searchExpanded = !this.searchExpanded
+        this.$nextTick(() => {
+          this.calculateTableHeight()
+        })
+      },
+
+      // 计算表格高度
+      calculateTableHeight() {
+        // 展开时搜索区域高度约180px，收起时约80px
+        const windowHeight = window.innerHeight;
+        const headerHeight = this.searchExpanded ? 244 : 124;
+        this.height = (windowHeight - headerHeight - 85) / 2 - 30;
+        this.secondHeight = windowHeight - this.height - headerHeight - 120;
+      },
+
+      // 重置搜索条件
+      resetSearch() {
+        this.searchData = {
+          site: '',
+          userName: this.$store.state.user.name,
+          orderNo: '',
+          orderType: '',
+          orderStatus: '',
+          orderStatusList: ['草稿'],
+          startDate: '',
+          endDate: '',
+          createdStartDate: '',
+          createdEndDate: '',
+          page: 1,
+          limit: 10,
+        }
+        this.pageIndex = 1
+      },
+
       // 获取用户的bu
       getSiteAndBuByUserName () {
         let tempData = {
@@ -2155,4 +2281,222 @@
   height: auto;
   line-height: 1.5;
 }
+
+/* 搜索卡片样式 */
+.search-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.search-card:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.search-card /deep/ .el-card__header {
+  padding: 5px 20px;
+  background: linear-gradient(135deg, #9ac3d0 20%, #b6c7dd 80%);
+  border-bottom: none;
+}
+
+.search-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  color: #fff;
+}
+
+.header-left i {
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.header-title {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.header-right {
+  color: #fff;
+}
+
+.collapse-btn {
+  color: #fff;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.collapse-btn:hover {
+  color: #f0f0f0;
+  transform: translateY(-1px);
+}
+
+.collapse-btn i {
+  transition: transform 0.3s ease;
+}
+
+/* 搜索表单样式 */
+.search-form {
+  padding: 6px 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: 12px;
+}
+
+.search-form /deep/ .el-form-item__label {
+  font-weight: 500;
+  color: #606266;
+  padding-bottom: 4px;
+}
+
+.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: #9ac3d0;
+  box-shadow: 0 0 0 2px rgba(154, 195, 208, 0.1);
+}
+
+.search-form /deep/ .el-select {
+  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: 6px;
+}
+
+/* 收起时不显示上边框和上边距 */
+.search-card.collapsed .search-actions {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.action-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.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;
+}
+
+.search-actions .el-button--success {
+  background: #67C23A;
+  border-color: #67C23A;
+}
+
+.search-actions .el-button--success:hover {
+  background: #85ce61;
+  border-color: #85ce61;
+}
+
+.search-actions .el-button--danger {
+  background: #F56C6C;
+  border-color: #F56C6C;
+}
+
+.search-actions .el-button--danger:hover {
+  background: #f78989;
+  border-color: #f78989;
+}
+
+.search-actions .el-button--warning {
+  background: #E6A23C;
+  border-color: #E6A23C;
+}
+
+.search-actions .el-button--warning:hover {
+  background: #ebb563;
+  border-color: #ebb563;
+}
+
+.search-actions .el-button--info {
+  background: #909399;
+  border-color: #909399;
+}
+
+.search-actions .el-button--info:hover {
+  background: #a6a9ad;
+  border-color: #a6a9ad;
+}
+
+/* 表格样式 */
+/deep/ .el-table th {
+  background-color: #f5f7fa;
+  color: #303133;
+  font-weight: 600;
+}
+
+/deep/ .el-table tr:hover > td {
+  background-color: #f5f7fa !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .search-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .action-left {
+    width: 100%;
+    justify-content: center;
+  }
+}
 </style>