2025-11-04

iqc、ipqc、fqc优化

src/views/modules/qc/FQCResultEntry.vue

@@ -1,93 +1,248 @@
 <template>
   <div class="mod-config">
     <!-- 条件查询 -->
-    <el-form :inline="true" label-position="top" :model="searchData">
-      <el-form-item :label="'BU'">
-        <el-select v-model="searchData.buNo" placeholder="请选择" clearable style="width: 75px">
-          <el-option
-            v-for = "i in buList"
-            :key = "i.buNo"
-            :label = "i.buDesc"
-            :value = "i.buNo">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="'检验单号'">
-        <el-input v-model="searchData.inspectionNo" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'物料编码'">
-        <el-input v-model="searchData.partNo" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'SKU'">
-        <el-input v-model="searchData.sku" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'物料名称'">
-        <el-input v-model="searchData.partDesc" clearable style="width: 200px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'检验结论'">
-        <el-select v-model="searchData.inspectionResult" clearable style="width: 80px">
-          <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.disposalMeasures" clearable style="width: 90px">
-          <el-option
-            v-for = "i in disposalMeasuresOptions"
-            :key = "i.id"
-            :label = "i.disposalMeasures"
-            :value = "i.disposalMeasures">
-          </el-option>
-        </el-select>
-      </el-form-item>
-    </el-form>
-    <el-form :inline="true" label-position="top" :model="searchData">
-      <el-form-item :label="'PN'">
-        <el-input v-model="searchData.cinvSourceCode" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'工单号'">
-        <el-input v-model="searchData.orderNo" clearable style="width: 137px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'派工单号'">
-        <el-input v-model="searchData.seqNo" clearable style="width: 167px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'工序'">
-        <el-input v-model="searchData.operationDesc" clearable style="width: 108px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'状态'">
-        <el-select v-model="searchData.states" multiple style="width: 340px">
-          <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>
-    <el-form :inline="true" label-position="top" :model="searchData">
-      <el-form-item :label="'送检日期'">
-        <el-date-picker style="width: 150px" v-model="searchData.startDate2" type="datetime" value-format='yyyy-MM-dd HH:mm' format='yyyy-MM-dd HH:mm' placeholder="开始日期"></el-date-picker>
-        -
-        <el-date-picker style="width: 150px" v-model="searchData.endDate2" type="datetime" value-format='yyyy-MM-dd HH:mm' format='yyyy-MM-dd HH:mm' placeholder="结束日期"></el-date-picker>
-      </el-form-item>
-      <el-form-item :label="'检验时间：'">
-        <el-date-picker style="width: 170px" v-model="searchData.startDate" type="datetime"
-                        value-format='yyyy-MM-dd HH:mm:ss' format='yyyy-MM-dd HH:mm:ss' placeholder="开始日期">
-        </el-date-picker>
-        -
-        <el-date-picker style="width: 170px" v-model="searchData.endDate" type="datetime"
-                        value-format='yyyy-MM-dd HH:mm:ss' format='yyyy-MM-dd HH:mm:ss' 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="addModal()">新增</el-button>
-        <el-button v-if="!authCheck" type="primary" @click="submitResult()">审核</el-button>
-        <el-button v-if="!authCancelCheck" type="primary" @click="cancelApproval">取消审核</el-button>
-        <el-button v-if="!authDelete" type="primary" @click="deleteModal()">删除</el-button>
-        <el-button type="primary" @click="printList">打印</el-button>
-        <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">Search</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="getDataList">
+
+        <!-- 所有查询条件 - 可展开/收起 -->
+        <template v-if="searchExpanded">
+          <!-- 第一行 -->
+          <el-row :gutter="16">
+            <el-col :span="6">
+              <el-form-item label="BU">
+                <el-select v-model="searchData.buNo" placeholder="请选择" clearable>
+                  <el-option
+                    v-for="i in buList"
+                    :key="i.buNo"
+                    :label="i.buDesc"
+                    :value="i.buNo">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="检验单号">
+                <el-input v-model="searchData.inspectionNo" placeholder="请输入检验单号" clearable>
+                  <i slot="prefix" class="el-input__icon el-icon-document"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="物料编码">
+                <el-input v-model="searchData.partNo" placeholder="请输入物料编码" clearable>
+                  <i slot="prefix" class="el-input__icon el-icon-goods"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="SKU">
+                <el-input v-model="searchData.sku" placeholder="请输入SKU" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行 -->
+          <el-row :gutter="16">
+            <el-col :span="6">
+              <el-form-item label="物料名称">
+                <el-input v-model="searchData.partDesc" placeholder="请输入物料名称" clearable>
+                  <i slot="prefix" class="el-input__icon el-icon-goods"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="检验结论">
+                <el-select v-model="searchData.inspectionResult" clearable placeholder="请选择检验结论">
+                  <el-option label="合格" value="合格">
+                    <i class="el-icon-success" style="color: #67C23A;"></i> 合格
+                  </el-option>
+                  <el-option label="不合格" value="不合格">
+                    <i class="el-icon-error" style="color: #F56C6C;"></i> 不合格
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="处置措施">
+                <el-select v-model="searchData.disposalMeasures" clearable placeholder="请选择处置措施">
+                  <el-option
+                    v-for="i in disposalMeasuresOptions"
+                    :key="i.id"
+                    :label="i.disposalMeasures"
+                    :value="i.disposalMeasures">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="PN">
+                <el-input v-model="searchData.cinvSourceCode" placeholder="请输入PN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第三行 -->
+          <el-row :gutter="16">
+            <el-col :span="6">
+              <el-form-item label="工单号">
+                <el-input v-model="searchData.orderNo" placeholder="请输入工单号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="派工单号">
+                <el-input v-model="searchData.seqNo" placeholder="请输入派工单号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="工序">
+                <el-input v-model="searchData.operationDesc" placeholder="请输入工序" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="状态">
+                <el-select v-model="searchData.states" multiple collapse-tags placeholder="请选择状态">
+                  <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-row>
+
+          <!-- 第四行 -->
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="送检日期">
+                <el-date-picker
+                  v-model="searchData.startDate2"
+                  type="datetime"
+                  value-format='yyyy-MM-dd HH:mm'
+                  format='yyyy-MM-dd HH:mm'
+                  placeholder="开始日期"
+                  style="width: 44%">
+                </el-date-picker>
+                <span style="margin: 0 4px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.endDate2"
+                  type="datetime"
+                  value-format='yyyy-MM-dd HH:mm'
+                  format='yyyy-MM-dd HH:mm'
+                  placeholder="结束日期"
+                  style="width: 44%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="检验时间">
+                <el-date-picker
+                  v-model="searchData.startDate"
+                  type="datetime"
+                  value-format='yyyy-MM-dd HH:mm:ss'
+                  format='yyyy-MM-dd HH:mm:ss'
+                  placeholder="开始日期"
+                  style="width: 44%">
+                </el-date-picker>
+                <span style="margin: 0 4px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.endDate"
+                  type="datetime"
+                  value-format='yyyy-MM-dd HH:mm:ss'
+                  format='yyyy-MM-dd HH:mm:ss'
+                  placeholder="结束日期"
+                  style="width: 44%">
+                </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>
+              </div>
+              <div class="action-right">
+                <el-button
+                  v-if="!authSave"
+                  type="success"
+                  icon="el-icon-plus"
+                  @click="addModal">
+                  新增
+                </el-button>
+                <el-button
+                  v-if="!authCheck"
+                  type="success"
+                  icon="el-icon-check"
+                  @click="submitResult">
+                  审核
+                </el-button>
+                <el-button
+                  v-if="!authCancelCheck"
+                  type="warning"
+                  icon="el-icon-close"
+                  @click="cancelApproval">
+                  取消审核
+                </el-button>
+                <el-button
+                  v-if="!authDelete"
+                  type="danger"
+                  icon="el-icon-delete"
+                  @click="deleteModal">
+                  删除
+                </el-button>
+                <el-button
+                  icon="el-icon-printer"
+                  @click="printList">
+                  打印
+                </el-button>
+                <el-button
+                  icon="el-icon-download"
+                  @click="exportExcel()">
+                  导出
+                </el-button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
 
     <!-- 检验记录展示列表 -->
     <el-table
@@ -966,6 +1121,7 @@
     },
     data () {
       return {
+        searchExpanded: false,
         loadFlag: false,
         transferLoadFlag: false,
         inspectionNo: '',
@@ -2402,6 +2558,39 @@
     },
 
     methods: {
+      // 切换搜索框展开/收起
+      toggleSearchExpand() {
+        this.searchExpanded = !this.searchExpanded
+      },
+
+      // 重置搜索条件
+      resetSearch() {
+        this.searchData = {
+          site: '',
+          userName: this.$store.state.user.name,
+          inspectionNo: '',
+          inspectionTypeNo: '',
+          isQualified: '',
+          buNo: '',
+          startDate: '',
+          endDate: '',
+          startDate2: '',
+          endDate2: '',
+          partNo:'',
+          partDesc:'',
+          cinvSourceCode:'',
+          sku:'',
+          state: '',
+          inspectionResult: '',
+          disposalMeasures: '',
+          page: 1,
+          limit: 10,
+          states: ['未开始','待检验'],
+          orderNo: '',
+          seqNo: '',
+          operationDesc: ''
+        }
+      },
 
       // 获取用户的bu
       getSiteAndBuByUserName2 () {
@@ -3951,6 +4140,208 @@
 </script>
 
 <style scoped>
+/* 搜索卡片样式 */
+.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;
+}
+
+.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;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .search-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .action-left,
+  .action-right {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
 /deep/ .redElSelect .el-input--suffix .el-input__inner{
   color: red;
   font-weight: bold;

src/views/modules/qc/IPQCResultEntry.vue

@@ -1,107 +1,274 @@
 <template>
   <div class="mod-config">
     <!-- 条件查询 -->
-    <el-form :inline="true" label-position="top" :model="searchData">
-      <el-form-item :label="'BU'">
-        <el-select v-model="searchData.buNo" placeholder="请选择" clearable style="width: 75px">
-          <el-option
-            v-for = "i in buList"
-            :key = "i.buNo"
-            :label = "i.buDesc"
-            :value = "i.buNo">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="'检验单号'">
-        <el-input v-model="searchData.inspectionNo" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'物料编码'">
-        <el-input v-model="searchData.partNo" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'SKU'">
-        <el-input v-model="searchData.sku" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'物料名称'">
-        <el-input v-model="searchData.partDesc" clearable style="width: 200px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'检验结论'">
-        <el-select v-model="searchData.inspectionResult" clearable style="width: 80px">
-          <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.inspectionTypeNo" clearable style="width: 100px">
-          <el-option label="IPQC首检" value="首件检"></el-option>
-          <el-option label="IPQC自检" value="自检"></el-option>
-          <el-option label="IPQC巡检" value="巡检"></el-option>
-          <el-option label="IPQC末件检" value="末件检"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="'处置措施'">
-        <el-select v-model="searchData.disposalMeasures" clearable style="width: 90px">
-          <el-option
-            v-for = "i in disposalMeasuresOptions"
-            :key = "i.id"
-            :label = "i.disposalMeasures"
-            :value = "i.disposalMeasures">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="'机台'">
-        <el-select v-model="searchData.resourceId" clearable filterable style="width: 120px">
-          <el-option
-            v-for = "i in resourceList3"
-            :key = "i.resourceId"
-            :label = "i.resourceDesc"
-            :value = "i.resourceId">
-          </el-option>
-        </el-select>
-      </el-form-item>
-    </el-form>
-    <el-form :inline="true" label-position="top" :model="searchData">
-      <el-form-item :label="'PN'">
-        <el-input v-model="searchData.cinvSourceCode" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'工单号'">
-        <el-input v-model="searchData.orderNo" clearable style="width: 137px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'派工单号'">
-        <el-input v-model="searchData.seqNo" clearable style="width: 167px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'工序'">
-        <el-input v-model="searchData.operationDesc" clearable style="width: 108px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'状态'">
-        <el-select v-model="searchData.states" multiple style="width: 340px">
-          <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>
-    <el-form :inline="true" label-position="top" :model="searchData">
-      <el-form-item :label="'送检日期'">
-        <el-date-picker style="width: 160px" v-model="searchData.startDate2" type="datetime" value-format='yyyy-MM-dd HH:mm' format='yyyy-MM-dd HH:mm' placeholder="开始日期"></el-date-picker>
-        -
-        <el-date-picker style="width: 160px" v-model="searchData.endDate2" type="datetime" value-format='yyyy-MM-dd HH:mm' format='yyyy-MM-dd HH:mm' placeholder="结束日期"></el-date-picker>
-      </el-form-item>
-      <el-form-item :label="'检验时间：'">
-        <el-date-picker style="width: 170px" v-model="searchData.startDate" type="datetime" value-format='yyyy-MM-dd HH:mm:ss' format='yyyy-MM-dd HH:mm:ss' placeholder="开始日期"></el-date-picker>
-        -
-        <el-date-picker style="width: 170px" v-model="searchData.endDate" type="datetime" value-format='yyyy-MM-dd HH:mm:ss' format='yyyy-MM-dd HH:mm:ss' 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="addModal">新增</el-button>
-        <el-button v-if="!authCheck" type="primary" @click="submitResult">审核</el-button>
-        <el-button v-if="!authCancelCheck" type="primary" @click="cancelApproval">取消审核</el-button>
-        <el-button v-if="!authDelete" type="primary" @click="deleteModal">删除</el-button>
-        <el-button type="primary" @click="printList">打印</el-button>
-        <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">Search</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="getDataList">
+
+        <!-- 所有查询条件 - 可展开/收起 -->
+        <template v-if="searchExpanded">
+          <!-- 第一行 -->
+          <el-row :gutter="16">
+            <el-col :span="6">
+              <el-form-item label="BU">
+                <el-select v-model="searchData.buNo" placeholder="请选择" clearable>
+                  <el-option
+                    v-for="i in buList"
+                    :key="i.buNo"
+                    :label="i.buDesc"
+                    :value="i.buNo">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="检验单号">
+                <el-input v-model="searchData.inspectionNo" placeholder="请输入检验单号" clearable>
+                  <i slot="prefix" class="el-input__icon el-icon-document"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="物料编码">
+                <el-input v-model="searchData.partNo" placeholder="请输入物料编码" clearable>
+                  <i slot="prefix" class="el-input__icon el-icon-goods"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="SKU">
+                <el-input v-model="searchData.sku" placeholder="请输入SKU" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行 -->
+          <el-row :gutter="16">
+            <el-col :span="6">
+              <el-form-item label="物料名称">
+                <el-input v-model="searchData.partDesc" placeholder="请输入物料名称" clearable>
+                  <i slot="prefix" class="el-input__icon el-icon-goods"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="检验结论">
+                <el-select v-model="searchData.inspectionResult" clearable placeholder="请选择检验结论">
+                  <el-option label="合格" value="合格">
+                    <i class="el-icon-success" style="color: #67C23A;"></i> 合格
+                  </el-option>
+                  <el-option label="不合格" value="不合格">
+                    <i class="el-icon-error" style="color: #F56C6C;"></i> 不合格
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="检验类型">
+                <el-select v-model="searchData.inspectionTypeNo" clearable placeholder="请选择检验类型">
+                  <el-option label="IPQC首检" value="首件检"></el-option>
+                  <el-option label="IPQC自检" value="自检"></el-option>
+                  <el-option label="IPQC巡检" value="巡检"></el-option>
+                  <el-option label="IPQC末件检" value="末件检"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="处置措施">
+                <el-select v-model="searchData.disposalMeasures" clearable placeholder="请选择处置措施">
+                  <el-option
+                    v-for="i in disposalMeasuresOptions"
+                    :key="i.id"
+                    :label="i.disposalMeasures"
+                    :value="i.disposalMeasures">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第三行 -->
+          <el-row :gutter="16">
+            <el-col :span="6">
+              <el-form-item label="机台">
+                <el-select v-model="searchData.resourceId" clearable filterable placeholder="请选择机台">
+                  <el-option
+                    v-for="i in resourceList3"
+                    :key="i.resourceId"
+                    :label="i.resourceDesc"
+                    :value="i.resourceId">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="PN">
+                <el-input v-model="searchData.cinvSourceCode" placeholder="请输入PN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="工单号">
+                <el-input v-model="searchData.orderNo" placeholder="请输入工单号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="派工单号">
+                <el-input v-model="searchData.seqNo" placeholder="请输入派工单号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第四行 -->
+          <el-row :gutter="16">
+            <el-col :span="6">
+              <el-form-item label="工序">
+                <el-input v-model="searchData.operationDesc" placeholder="请输入工序" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="状态">
+                <el-select v-model="searchData.states" multiple collapse-tags placeholder="请选择状态">
+                  <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="12">
+              <el-form-item label="送检日期">
+                <el-date-picker
+                  v-model="searchData.startDate2"
+                  type="datetime"
+                  value-format='yyyy-MM-dd HH:mm'
+                  format='yyyy-MM-dd HH:mm'
+                  placeholder="开始日期"
+                  style="width: 44%">
+                </el-date-picker>
+                <span style="margin: 0 4px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.endDate2"
+                  type="datetime"
+                  value-format='yyyy-MM-dd HH:mm'
+                  format='yyyy-MM-dd HH:mm'
+                  placeholder="结束日期"
+                  style="width: 44%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第五行 -->
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="检验时间">
+                <el-date-picker
+                  v-model="searchData.startDate"
+                  type="datetime"
+                  value-format='yyyy-MM-dd HH:mm:ss'
+                  format='yyyy-MM-dd HH:mm:ss'
+                  placeholder="开始日期"
+                  style="width: 44%">
+                </el-date-picker>
+                <span style="margin: 0 4px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.endDate"
+                  type="datetime"
+                  value-format='yyyy-MM-dd HH:mm:ss'
+                  format='yyyy-MM-dd HH:mm:ss'
+                  placeholder="结束日期"
+                  style="width: 44%">
+                </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>
+              </div>
+              <div class="action-right">
+                <el-button
+                  v-if="!authSave"
+                  type="success"
+                  icon="el-icon-plus"
+                  @click="addModal">
+                  新增
+                </el-button>
+                <el-button
+                  v-if="!authCheck"
+                  type="success"
+                  icon="el-icon-check"
+                  @click="submitResult">
+                  审核
+                </el-button>
+                <el-button
+                  v-if="!authCancelCheck"
+                  type="warning"
+                  icon="el-icon-close"
+                  @click="cancelApproval">
+                  取消审核
+                </el-button>
+                <el-button
+                  v-if="!authDelete"
+                  type="danger"
+                  icon="el-icon-delete"
+                  @click="deleteModal">
+                  删除
+                </el-button>
+                <el-button
+                  icon="el-icon-printer"
+                  @click="printList">
+                  打印
+                </el-button>
+                <el-button
+                  icon="el-icon-download"
+                  @click="exportExcel()">
+                  导出
+                </el-button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
 
     <!-- 检验记录展示列表 -->
     <el-table
@@ -993,6 +1160,7 @@
     },
     data () {
       return {
+        searchExpanded: false,
         loadFlag: false,
         transferLoadFlag: false,
         inspectionNo: '',
@@ -2484,6 +2652,40 @@
     },
 
     methods: {
+      // 切换搜索框展开/收起
+      toggleSearchExpand() {
+        this.searchExpanded = !this.searchExpanded
+      },
+
+      // 重置搜索条件
+      resetSearch() {
+        this.searchData = {
+          site: '',
+          userName: this.$store.state.user.name,
+          inspectionNo: '',
+          inspectionTypeNo: '',
+          isQualified: '',
+          buNo: '',
+          startDate: '',
+          endDate: '',
+          startDate2: '',
+          endDate2: '',
+          partNo:'',
+          partDesc:'',
+          cinvSourceCode:'',
+          sku:'',
+          state: '',
+          inspectionResult: '',
+          disposalMeasures: '',
+          page: 1,
+          limit: 10,
+          states: ['未开始','待检验'],
+          resourceId: '',
+          orderNo: '',
+          seqNo: '',
+          operationDesc: ''
+        }
+      },
 
       // 获取用户的bu
       getSiteAndBuByUserName2 () {
@@ -4051,6 +4253,208 @@
 </style>
 
 <style scoped>
+/* 搜索卡片样式 */
+.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;
+}
+
+.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;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .search-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .action-left,
+  .action-right {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
 /deep/ .redElSelect .el-input--suffix .el-input__inner{
   color: red;
   font-weight: bold;

src/views/modules/qc/IQCResultEntry.vue

@@ -1,109 +1,285 @@
 <template>
   <div class="mod-config">
     <!-- 条件查询 -->
-    <el-form :inline="true" label-position="top" :model="searchData">
-      <el-form-item :label="'BU'">
-        <el-select v-model="searchData.buNo" placeholder="请选择" clearable style="width: 75px">
-          <el-option
-            v-for = "i in buList"
-            :key = "i.buNo"
-            :label = "i.buDesc"
-            :value = "i.buNo">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="'检验单号'">
-        <el-input v-model="searchData.inspectionNo" clearable style="width: 140px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'单据号'">
-        <el-input v-model="searchData.poOrderNo" clearable style="width: 150px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'单据行号'">
-        <el-input v-model="searchData.poItemNo" clearable style="width: 75px"></el-input>
-      </el-form-item>
-      <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: 200px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'SKU'">
-        <el-input v-model="searchData.sku" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'PN'">
-        <el-input v-model="searchData.cinvSourceCode" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'物料类别'">
-        <el-input v-model="searchData.invdefinetype" clearable style="width: 120px"></el-input>
-      </el-form-item>
-    </el-form>
-    <el-form :inline="true" label-position="top" :model="searchData">
-      <el-form-item :label="'供应商'">
-        <el-input v-model="searchData.supplierDesc" clearable style="width: 200px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'质检员'">
-        <el-input v-model="searchData.inspectorName" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'状态'">
-        <el-select v-model="searchData.states" multiple style="width: 340px">
-          <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.inspectionResult" clearable style="width: 80px">
-          <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.disposalMeasures" clearable style="width: 90px">
-          <el-option
-            v-for = "i in disposalMeasuresOptions"
-            :key = "i.id"
-            :label = "i.disposalMeasures"
-            :value = "i.disposalMeasures">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="'采购类型'">
-        <el-select v-model="searchData.orderType" clearable style="width: 90px">
-          <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.submissionType" clearable style="width: 90px">
-          <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>
-    <el-form :inline="true" label-position="top" :model="searchData">
-      <el-form-item :label="'送检日期'">
-        <el-date-picker style="width: 160px" v-model="searchData.startDate2" type="datetime" value-format='yyyy-MM-dd HH:mm' format='yyyy-MM-dd HH:mm' placeholder="开始日期"></el-date-picker>
-        -
-        <el-date-picker style="width: 160px" v-model="searchData.endDate2" type="datetime" value-format='yyyy-MM-dd HH:mm' format='yyyy-MM-dd HH:mm' placeholder="结束日期"></el-date-picker>
-      </el-form-item>
-      <el-form-item :label="'检验时间'">
-        <el-date-picker style="width: 160px" v-model="searchData.startDate" type="datetime" value-format='yyyy-MM-dd HH:mm' format='yyyy-MM-dd HH:mm' placeholder="开始日期"></el-date-picker>
-        -
-        <el-date-picker style="width: 160px" v-model="searchData.endDate" type="datetime" value-format='yyyy-MM-dd HH:mm' format='yyyy-MM-dd HH:mm' 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="!authCheck" type="primary" @click="submitResult">审核</el-button>
-        <el-button v-if="!authCancelCheck" type="primary" @click="cancelApproval">取消审核</el-button>
-        <el-button v-if="!authDelete" type="primary" @click="deleteModal">删除</el-button>
-        <el-button v-if="!authOverLoad" type="primary" @click="overLoadModal">任务重载</el-button>
-        <el-button type="primary" @click="printList">打印</el-button>
-        <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">Search</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="getDataList">
+
+        <!-- 所有查询条件 - 可展开/收起 -->
+        <template v-if="searchExpanded">
+          <!-- 第一行 -->
+          <el-row :gutter="16">
+            <el-col :span="6">
+              <el-form-item label="BU">
+                <el-select v-model="searchData.buNo" placeholder="请选择" clearable>
+                  <el-option
+                    v-for="i in buList"
+                    :key="i.buNo"
+                    :label="i.buDesc"
+                    :value="i.buNo">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="检验单号">
+                <el-input v-model="searchData.inspectionNo" placeholder="请输入检验单号" clearable>
+                  <i slot="prefix" class="el-input__icon el-icon-document"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="单据号">
+                <el-input v-model="searchData.poOrderNo" placeholder="请输入单据号" clearable>
+                  <i slot="prefix" class="el-input__icon el-icon-document"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="单据行号">
+                <el-input v-model="searchData.poItemNo" placeholder="请输入单据行号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行 -->
+          <el-row :gutter="16">
+            <el-col :span="6">
+              <el-form-item label="物料编码">
+                <el-input v-model="searchData.partNo" placeholder="请输入物料编码" clearable>
+                  <i slot="prefix" class="el-input__icon el-icon-goods"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="物料名称">
+                <el-input v-model="searchData.partDesc" placeholder="请输入物料名称" clearable>
+                  <i slot="prefix" class="el-input__icon el-icon-goods"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="SKU">
+                <el-input v-model="searchData.sku" placeholder="请输入SKU" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="PN">
+                <el-input v-model="searchData.cinvSourceCode" placeholder="请输入PN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第三行 -->
+          <el-row :gutter="16">
+            <el-col :span="6">
+              <el-form-item label="物料类别">
+                <el-input v-model="searchData.invdefinetype" placeholder="请输入物料类别" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="供应商">
+                <el-input v-model="searchData.supplierDesc" placeholder="请输入供应商" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="质检员">
+                <el-input v-model="searchData.inspectorName" placeholder="请输入质检员姓名" clearable>
+                  <i slot="prefix" class="el-input__icon el-icon-user"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="状态">
+                <el-select v-model="searchData.states" multiple collapse-tags placeholder="请选择状态">
+                  <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-row>
+
+          <!-- 第四行 -->
+          <el-row :gutter="16">
+            <el-col :span="6">
+              <el-form-item label="检验结论">
+                <el-select v-model="searchData.inspectionResult" clearable placeholder="请选择检验结论">
+                  <el-option label="合格" value="合格">
+                    <i class="el-icon-success" style="color: #67C23A;"></i> 合格
+                  </el-option>
+                  <el-option label="不合格" value="不合格">
+                    <i class="el-icon-error" style="color: #F56C6C;"></i> 不合格
+                  </el-option>
+                  <el-option label="免检" value="免检">
+                    <i class="el-icon-circle-check" style="color: #409EFF;"></i> 免检
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="处置措施">
+                <el-select v-model="searchData.disposalMeasures" clearable placeholder="请选择处置措施">
+                  <el-option
+                    v-for="i in disposalMeasuresOptions"
+                    :key="i.id"
+                    :label="i.disposalMeasures"
+                    :value="i.disposalMeasures">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="采购类型">
+                <el-select v-model="searchData.orderType" clearable placeholder="请选择采购类型">
+                  <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-select v-model="searchData.submissionType" clearable placeholder="请选择送检类型">
+                  <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-row>
+
+          <!-- 第五行 -->
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="送检日期">
+                <el-date-picker
+                  v-model="searchData.startDate2"
+                  type="datetime"
+                  value-format='yyyy-MM-dd HH:mm'
+                  format='yyyy-MM-dd HH:mm'
+                  placeholder="开始日期"
+                  style="width: 44%">
+                </el-date-picker>
+                <span style="margin: 0 4px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.endDate2"
+                  type="datetime"
+                  value-format='yyyy-MM-dd HH:mm'
+                  format='yyyy-MM-dd HH:mm'
+                  placeholder="结束日期"
+                  style="width: 44%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="检验时间">
+                <el-date-picker
+                  v-model="searchData.startDate"
+                  type="datetime"
+                  value-format='yyyy-MM-dd HH:mm'
+                  format='yyyy-MM-dd HH:mm'
+                  placeholder="开始日期"
+                  style="width: 44%">
+                </el-date-picker>
+                <span style="margin: 0 4px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.endDate"
+                  type="datetime"
+                  value-format='yyyy-MM-dd HH:mm'
+                  format='yyyy-MM-dd HH:mm'
+                  placeholder="结束日期"
+                  style="width: 44%">
+                </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>
+              </div>
+              <div class="action-right">
+                <el-button
+                  v-if="!authCheck"
+                  type="success"
+                  icon="el-icon-check"
+                  @click="submitResult">
+                  审核
+                </el-button>
+                <el-button
+                  v-if="!authCancelCheck"
+                  type="warning"
+                  icon="el-icon-close"
+                  @click="cancelApproval">
+                  取消审核
+                </el-button>
+                <el-button
+                  v-if="!authDelete"
+                  type="danger"
+                  icon="el-icon-delete"
+                  @click="deleteModal">
+                  删除
+                </el-button>
+                <el-button
+                  v-if="!authOverLoad"
+                  icon="el-icon-refresh"
+                  @click="overLoadModal">
+                  任务重载
+                </el-button>
+                <el-button
+                  icon="el-icon-printer"
+                  @click="printList">
+                  打印
+                </el-button>
+                <el-button
+                  icon="el-icon-download"
+                  @click="exportExcel()">
+                  导出
+                </el-button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
 
     <!-- 检验记录展示列表 -->
     <el-table
@@ -705,6 +881,7 @@
     },
     data () {
       return {
+        searchExpanded: false,
         loadFlag: false,
         transferLoadFlag: false,
         // 是否收藏
@@ -1810,6 +1987,43 @@
     },
 
     methods: {
+      // 切换搜索框展开/收起
+      toggleSearchExpand() {
+        this.searchExpanded = !this.searchExpanded
+      },
+
+      // 重置搜索条件
+      resetSearch() {
+        this.searchData = {
+          site: '',
+          userName: this.$store.state.user.name,
+          inspectionNo: '',
+          inspectionTypeNo:'105',
+          isQualified: '',
+          buNo: '',
+          startDate: '',
+          endDate: '',
+          startDate2: '',
+          endDate2: '',
+          partNo:'',
+          partDesc:'',
+          cinvSourceCode:'',
+          sku:'',
+          state: '',
+          inspectionResult: '',
+          supplierDesc: '',
+          disposalMeasures: '',
+          inspectorName: '',
+          page: 1,
+          limit: 10,
+          poOrderNo: '',
+          poItemNo: '',
+          orderType: '',
+          states: ['未开始','待检验'],
+          submissionType: '',
+          invdefinetype: ''
+        }
+      },
 
       // 获取用户的bu
       getSiteAndBuByUserName2 () {
@@ -2975,6 +3189,208 @@
 </script>
 
 <style scoped>
+/* 搜索卡片样式 */
+.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;
+}
+
+.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;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .search-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .action-left,
+  .action-right {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
 /deep/ .redElSelect .el-input--suffix .el-input__inner{
   color: red;
   font-weight: bold;