2026-01-04

生产派工单列表、采购标签生成页面查询优化

src/views/modules/print/PoPartPrint.vue

@@ -1,56 +1,136 @@
 <template>
   <div class="mod-config">
-    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;" >
-      <el-row>
-        <el-col :span="24" style="">
-          <el-form-item :label="'物料编码:'">
-            <el-input v-model="searchData.partNo" clearable style="width: 120px"></el-input>
-          </el-form-item>
-          <el-form-item :label="'物料名称:'">
-            <el-input v-model="searchData.partDesc" clearable style="width: 150px"></el-input>
-          </el-form-item>
-          <el-form-item :label="'通知单号:'">
-            <el-input v-model="searchData.notifyNo" clearable style="width: 120px"></el-input>
-          </el-form-item>
-          <el-form-item :label="'检验单号:'">
-            <el-input v-model="searchData.orderNo" clearable style="width: 120px"></el-input>
-          </el-form-item>
-          <el-form-item :label="'采购单号:'">
-            <el-input v-model="searchData.poOrderNo" clearable style="width: 120px"></el-input>
-          </el-form-item>
-          <el-form-item :label="'采购单行号:'">
-            <el-input v-model="searchData.poItemNo" clearable style="width: 100px"></el-input>
-          </el-form-item>
-          <el-form-item :label="'单据状态:'">
-            <el-select v-model="searchData.orderStatus" clearable style="width: 100px">
-              <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: 130px"
-              v-model="searchData.startDate"
-              value-format="yyyy-MM-dd"
-              clearable
-             >
-            </el-date-picker>
-            -
-            <el-date-picker
-              style="width: 130px"
-              v-model="searchData.endDate "
-              value-format="yyyy-MM-dd"
-              clearable
-           >
-            </el-date-picker>
-          </el-form-item>
-          <el-form-item :label="' '" >
-            <el-button class="customer-bun-min" type="primary" @click="getMainData" style="">查询</el-button>
-            <el-button @click="exportExcel()" type="primary" style="margin-left: 2px">{{'导出'}}</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </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">
+            <span>{{ searchExpanded ? '收起' : '展开' }}</span>
+            <i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+          </el-button>
+        </div>
+      </div>
+
+      <el-form
+        :inline="true"
+        label-position="top"
+        :model="searchData"
+        class="search-form"
+        @keyup.enter.native="getMainData">
+
+        <!-- 查询条件 - 可展开/收起 -->
+        <template v-if="searchExpanded">
+          <!-- 第一行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item label="物料编码">
+                <el-input v-model="searchData.partNo" placeholder="请输入物料编码" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="物料名称">
+                <el-input v-model="searchData.partDesc" placeholder="请输入物料名称" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="规格型号">
+                <el-input v-model="searchData.spec" placeholder="请输入规格型号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="通知单号">
+                <el-input v-model="searchData.notifyNo" placeholder="请输入通知单号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="检验单号">
+                <el-input v-model="searchData.orderNo" placeholder="请输入检验单号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item label="采购单号">
+                <el-input v-model="searchData.poOrderNo" placeholder="请输入采购单号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="采购单行号">
+                <el-input v-model="searchData.poItemNo" placeholder="请输入行号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="单据状态">
+                <el-select v-model="searchData.orderStatus" clearable placeholder="请选择状态">
+                  <el-option label="待入库" value="待入库"></el-option>
+                  <el-option label="已完成" value="已完成"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="检验日期">
+                <el-date-picker
+                  v-model="searchData.startDate"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="开始日期"
+                  style="width: 45%"
+                  clearable>
+                </el-date-picker>
+                <span style="margin: 0 6px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.endDate"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="结束日期"
+                  style="width: 45%"
+                  clearable>
+                </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
+                  type="primary"
+                  icon="el-icon-search"
+                  @click="getMainData">
+                  查询
+                </el-button>
+                <el-button
+                  icon="el-icon-refresh-left"
+                  @click="resetSearch">
+                  重置
+                </el-button>
+              </div>
+              <div class="action-right">
+                <el-button
+                  type="primary"
+                  icon="el-icon-download"
+                  @click="exportExcel()">
+                  导出
+                </el-button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
 
     <el-table
       :height="height"
@@ -411,6 +491,7 @@ export default {
         notifyNo: '',
         partNo:'',
         partDesc:'',
+        spec:'',
         poOrderNo:'',
         poItemNo:'',
         orderStatus:'待入库',
@@ -419,6 +500,7 @@ export default {
         page: 1,
         limit: 10,
       },
+      searchExpanded: true, // 查询条件展开状态
       selectionDataList:[],
       pageIndex: 1,
       pageSize: 50,
@@ -561,6 +643,24 @@ export default {
           status: true,
           fixed: false
         },
+        {
+          userId: this.$store.state.user.name,
+          functionId: this.functionId,
+          serialNumber: '670Table1Spec',
+          tableId: "670Table1",
+          tableName: "采购检验合格单",
+          columnProp: "spec",
+          headerAlign: "center",
+          align: "left",
+          columnLabel: "规格型号",
+          columnWidth: '120',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 4,
+          status: true,
+          fixed: false
+        },
         {
           userId: this.$store.state.user.name,
           functionId: this.functionId,
@@ -946,11 +1046,37 @@ export default {
 
   mounted() {
     this.$nextTick(() => {
-      this.height = ( window.innerHeight - 220)/2;
+      this.height = ( window.innerHeight - 220)/2 - 25;
     })
   },
   methods: {
 
+    // 切换查询条件展开/收起
+    toggleSearchExpand() {
+      this.searchExpanded = !this.searchExpanded
+    },
+
+    // 重置查询条件
+    resetSearch() {
+      this.searchData = {
+        site: this.$store.state.user.site,
+        orderNo: '',
+        notifyNo: '',
+        partNo: '',
+        partDesc: '',
+        spec: '',
+        poOrderNo: '',
+        poItemNo: '',
+        orderStatus: '待入库',
+        startDate: '',
+        endDate: '',
+        page: 1,
+        limit: 10,
+      }
+      this.pageIndex = 1
+      this.getMainData()
+    },
+
     getMainData(){
       this.searchData.limit = this.pageSize
       this.searchData.page = this.pageIndex
@@ -1418,6 +1544,164 @@ export default {
   padding: 5px !important;
 }
 
+/* 搜索卡片样式 */
+.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-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: 6px;
+}
+
+/* 收起时不显示上边框和上边距 */
+.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;
+}
+
 /deep/ .el-form-item__label {
   font-weight: 500;
 }

src/views/modules/shopOrder/productionOrderScheduling/searchProductionDispatchList.vue

@@ -1,99 +1,178 @@
 <template>
   <div class="mod-config dispatch-list-page">
-    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: -5px;">
-      <el-form-item :label="'录入日期：'">
-        <el-date-picker
-          style="width: 130px"
-          v-model="searchData.date1"
-          value-format="yyyy-MM-dd"
-          placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item :label="'至：'">
-        <el-date-picker
-          style="width: 130px"
-          v-model="searchData.date2"
-          value-format="yyyy-MM-dd"
-          placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item :label="'计划开工日期：'">
-        <el-date-picker
-          style="width: 130px"
-          v-model="searchData.date3"
-          value-format="yyyy-MM-dd"
-          placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item :label="'至：'">
-        <el-date-picker
-          style="width: 130px"
-          v-model="searchData.date4"
-          value-format="yyyy-MM-dd"
-          placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item :label="'计划完工日期：'">
-        <el-date-picker
-          style="width: 130px"
-          v-model="searchData.date5"
-          value-format="yyyy-MM-dd"
-          placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item :label="'至：'">
-        <el-date-picker
-          style="width: 130px"
-          v-model="searchData.date6"
-          value-format="yyyy-MM-dd"
-          placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-    </el-form>
-    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
-      <el-form-item>
-        <span slot="label" style="" @click="getBaseList(24)"><a herf="#">加工中心编码：</a></span>
-        <el-input v-model="searchData.workCenterNo" style="width: 130px"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <span slot="label" style="" @click="getBaseList(88)"><a herf="#">机台编号：</a></span>
-        <el-input v-model="searchData.sResourceID" style="width: 130px"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <span slot="label" style="" @click="getBaseList(5)"><a herf="#">产成品编码：</a></span>
-        <el-input v-model="searchData.partNo" style="width: 130px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'生产订单号：'">
-        <el-input v-model="searchData.orderNo" style="width: 130px"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <span slot="label" style="" @click="getBaseList(18)"><a herf="#">工厂编码：</a></span>
-        <el-input v-model="searchData.site" style="width: 80px"></el-input>
-        <el-checkbox style="margin-left: 2px;margin-top: 0px" v-model="searchData.checked">仅显示当前排产的派工单
-        </el-checkbox>
-        <el-button @click="getData()" style="margin-left: 20px" type="primary">{{ '查询' }}</el-button>
-        <el-button @click="warnCancelScheduleConfirm" type="primary">{{ '取消排产' }}
-        </el-button>
-        <download-excel
-          :fields="fields()"
-          :data="exportData"
-          type="xls"
-          :name="exportName"
-          :header="exportHeader"
-          :footer="exportFooter"
-          :fetch="createExportData"
-          :before-generate="startDownload"
-          :before-finish="finishDownload"
-          worksheet="导出信息"
-          class="el-button el-button--primary el-button--medium">
-          {{ buttons.download }}
-        </download-excel>
-<!--        <el-button @click="userSetting" type="primary">{{ buttons.settingTable }}</el-button>-->
-<!--        <el-button v-if="showDefault" @click="saveColumnList()" type="primary">{{ buttons.defaultTable }}</el-button>-->
-<!--        <el-button @click="moveUp" type="primary">上移</el-button>-->
-<!--        <el-button @click="moveDown" type="primary">下移</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">
+            <span>{{ searchExpanded ? '收起' : '展开' }}</span>
+            <i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+          </el-button>
+        </div>
+      </div>
+
+      <el-form
+        :inline="true"
+        label-position="top"
+        :model="searchData"
+        class="search-form"
+        @keyup.enter.native="getData">
+
+        <!-- 查询条件 - 可展开/收起 -->
+        <template v-if="searchExpanded">
+          <!-- 第一行：日期信息 -->
+          <el-row :gutter="16">
+            <el-col :span="8">
+              <el-form-item label="录入日期">
+                <el-date-picker
+                  v-model="searchData.date1"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="开始日期"
+                  style="width: 45%">
+                </el-date-picker>
+                <span style="margin: 0 6px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.date2"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="结束日期"
+                  style="width: 45%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="计划开工日期">
+                <el-date-picker
+                  v-model="searchData.date3"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="开始日期"
+                  style="width: 45%">
+                </el-date-picker>
+                <span style="margin: 0 6px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.date4"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="结束日期"
+                  style="width: 45%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="计划完工日期">
+                <el-date-picker
+                  v-model="searchData.date5"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="开始日期"
+                  style="width: 45%">
+                </el-date-picker>
+                <span style="margin: 0 6px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.date6"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="结束日期"
+                  style="width: 45%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item>
+                <span slot="label" @click="getBaseList(24)"><a href="#">加工中心编码</a></span>
+                <el-input v-model="searchData.workCenterNo" placeholder="请输入" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item>
+                <span slot="label" @click="getBaseList(88)"><a href="#">机台编号</a></span>
+                <el-input v-model="searchData.sResourceID" placeholder="请输入" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item>
+                <span slot="label" @click="getBaseList(5)"><a href="#">产成品编码</a></span>
+                <el-input v-model="searchData.partNo" placeholder="请输入" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <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-input v-model="searchData.seqNo" placeholder="请输入" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item>
+                <span slot="label" @click="getBaseList(18)"><a href="#">工厂编码</a></span>
+                <el-input v-model="searchData.site" placeholder="请输入" clearable></el-input>
+              </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-checkbox v-model="searchData.checked" style="margin-right: 10px;">仅显示当前排产的派工单</el-checkbox>
+                <el-button
+                  type="primary"
+                  icon="el-icon-search"
+                  @click="getData()">
+                  查询
+                </el-button>
+                <el-button
+                  icon="el-icon-refresh-left"
+                  @click="resetSearch">
+                  重置
+                </el-button>
+              </div>
+              <div class="action-right">
+                <el-button
+                  type="danger"
+                  icon="el-icon-close"
+                  @click="warnCancelScheduleConfirm">
+                  取消排产
+                </el-button>
+                <download-excel
+                  :fields="fields()"
+                  :data="exportData"
+                  type="xls"
+                  :name="exportName"
+                  :header="exportHeader"
+                  :footer="exportFooter"
+                  :fetch="createExportData"
+                  :before-generate="startDownload"
+                  :before-finish="finishDownload"
+                  worksheet="导出信息"
+                  class="el-button el-button--primary el-button--small download-btn">
+                  <i class="el-icon-download" style="margin-right: 4px;"></i>{{ buttons.download }}
+                </download-excel>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
     <el-table
       ref="dispatchTable"
       :height="height"
@@ -197,6 +276,7 @@ export default {
       searchData: {
         site: '',
         orderNo: this.$route.query.orderNo,
+        seqNo: '', // 派工单号
         checked: true,
         partNo: '',
         sResourceID: '',
@@ -209,6 +289,7 @@ export default {
         date6: '',
         user: this.$store.state.user.name
       },
+      searchExpanded: true, // 查询条件展开状态
       pageIndex: 1,
       pageSize: 50,
       totalPage: 0,
@@ -1051,13 +1132,40 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this.height = window.innerHeight - 207;
+      this.height = window.innerHeight - 243;
       // 初始化拖拽排序
       this.initSortable();
     })
   },
 
   methods: {
+    // 切换查询条件展开/收起
+    toggleSearchExpand() {
+      this.searchExpanded = !this.searchExpanded
+    },
+
+    // 重置查询条件
+    resetSearch() {
+      this.searchData = {
+        site: '',
+        orderNo: '',
+        seqNo: '',
+        checked: true,
+        partNo: '',
+        sResourceID: '',
+        workCenterNo: '',
+        date1: '',
+        date2: '',
+        date3: '',
+        date4: '',
+        date5: '',
+        date6: '',
+        user: this.$store.state.user.name
+      }
+      this.pageIndex = 1
+      this.getData()
+    },
+
     /*初始化拖拽排序*/
     initSortable() {
       const el = document.querySelector('.el-table__body-wrapper tbody');
@@ -1538,6 +1646,182 @@ export default {
   opacity: 0.4;
   background: #e8f4ff !important;
 }
+
+/* 搜索卡片样式 */
+.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-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: 6px;
+}
+
+/* 收起时不显示上边框和上边距 */
+.search-card.collapsed .search-actions {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.action-left,
+.action-right {
+  display: flex;
+  align-items: center;
+  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;
+}
+
+.search-actions .el-button--danger {
+  background: #F56C6C;
+  border-color: #F56C6C;
+}
+
+.search-actions .el-button--danger:hover {
+  background: #f78989;
+  border-color: #f78989;
+}
+
+.download-btn {
+  border-radius: 4px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 500;
+}
 </style>
 
 <style>