From fda57f20b9ea62f0f2c8b8145aa24432fac9dbc8 Mon Sep 17 00:00:00 2001
From: fengyuan_yang <1976974459@qq.com>
Date: Tue, 4 Nov 2025 10:22:02 +0800
Subject: [PATCH] =?UTF-8?q?2025-11-04=20oqc=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/qc/OQCResultEntry.vue | 572 ++++++++++++++++++++----
 1 file changed, 483 insertions(+), 89 deletions(-)

diff --git a/src/views/modules/qc/OQCResultEntry.vue b/src/views/modules/qc/OQCResultEntry.vue
index 1aff187..9490ba1 100644
--- a/src/views/modules/qc/OQCResultEntry.vue
+++ b/src/views/modules/qc/OQCResultEntry.vue
@@ -2,95 +2,258 @@
   <div class="mod-config">
 
     <!-- 条件查询 -->
-    <el-form :inline="true" label-position="top" :model="searchData" @keyup.enter.native="getDataList">
-      <el-form-item :label="'BU'">
-        <el-select v-model="searchData.buDesc" placeholder="请选择" clearable style="width: 75px">
-          <el-option
-            v-for = "i in userBuList"
-            :key = "i.buNo"
-            :label = "i.buDesc"
-            :value = "i.buDesc">
-          </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.partNo" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'物料名称'">
-        <el-input v-model="searchData.partDesc" clearable style="width: 230px"></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>
-    <el-form :inline="true" label-position="top" :model="searchData" @keyup.enter.native="getDataList">
-      <el-form-item :label="'客户编码'">
-        <el-input v-model="searchData.customerNo" clearable style="width: 120px"></el-input>
-      </el-form-item>
-      <el-form-item :label="'客户名称'">
-        <el-input v-model="searchData.customerName" clearable style="width: 150px"></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-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.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" @keyup.enter.native="getDataList">
-      <el-form-item :label="'送检日期'">
-        <el-date-picker style="width: 120px" v-model="searchData.startDate2" type="date" value-format='yyyy-MM-dd' format='yyyy-MM-dd' placeholder="开始日期"></el-date-picker>
-        -
-        <el-date-picker style="width: 120px" v-model="searchData.endDate2" type="date" value-format='yyyy-MM-dd' format='yyyy-MM-dd' placeholder="结束日期"></el-date-picker>
-      </el-form-item>
-      <el-form-item :label="'检验日期'">
-        <el-date-picker style="width: 120px" v-model="searchData.startDate" type="date" value-format='yyyy-MM-dd' format='yyyy-MM-dd' placeholder="开始日期"></el-date-picker>
-        -
-        <el-date-picker style="width: 120px" v-model="searchData.endDate" type="date" value-format='yyyy-MM-dd' format='yyyy-MM-dd' placeholder="结束日期"></el-date-picker>
-      </el-form-item>
-      <el-form-item :label="' '">
-        <el-button v-if="!authSearch" type="primary" @click="getDataList">查询</el-button>
-        <el-button v-if="!authCheck" type="primary" @click="submitResult">审核</el-button>
-        <el-button v-if="!authDelete" type="primary" @click="deleteModal">删除</el-button>
-        <el-button v-if="!authOverLoad" type="primary" :loading="overLoading" @click="overLoadModal">任务重载</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">
-          {{ "导出" }}
-        </download-excel>
-      </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">
+            <i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+            {{ searchExpanded ? '收起' : '展开' }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-form
+        :model="searchData"
+        label-width="90px"
+        class="search-form"
+        @keyup.enter.native="getDataList">
+
+        <!-- 所有查询条件 - 可展开/收起 -->
+        <template v-if="searchExpanded">
+          <!-- 第一行 -->
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="BU">
+                <el-select v-model="searchData.buDesc" placeholder="请选择BU" clearable>
+                  <el-option
+                    v-for="i in userBuList"
+                    :key="i.buNo"
+                    :label="i.buDesc"
+                    :value="i.buDesc">
+                  </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
+                  prefix-icon="el-icon-document">
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="物料编码">
+                <el-input
+                  v-model="searchData.partNo"
+                  placeholder="请输入物料编码"
+                  clearable
+                  prefix-icon="el-icon-goods">
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="物料名称">
+                <el-input
+                  v-model="searchData.partDesc"
+                  placeholder="请输入物料名称"
+                  clearable>
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行 -->
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="质检员">
+                <el-input
+                  v-model="searchData.inspectorName"
+                  placeholder="请输入质检员姓名"
+                  clearable
+                  prefix-icon="el-icon-user">
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="客户编码">
+                <el-input
+                  v-model="searchData.customerNo"
+                  placeholder="请输入客户编码"
+                  clearable>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="客户名称">
+                <el-input
+                  v-model="searchData.customerName"
+                  placeholder="请输入客户名称"
+                  clearable>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="检验结论">
+                <el-select v-model="searchData.inspectionResult" placeholder="请选择" clearable>
+                  <el-option label="合格" value="合格">
+                    <span style="color: #67C23A">✓ 合格</span>
+                  </el-option>
+                  <el-option label="不合格" value="不合格">
+                    <span style="color: #F56C6C">✗ 不合格</span>
+                  </el-option>
+                  <el-option label="免检" value="免检">
+                    <span style="color: #909399">◉ 免检</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="处置措施">
+                <el-select v-model="searchData.disposalMeasures" placeholder="请选择" clearable>
+                  <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.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="6">
+              <el-form-item label="送检日期">
+                <el-date-picker
+                  v-model="searchData.startDate2"
+                  type="date"
+                  value-format='yyyy-MM-dd'
+                  format='yyyy-MM-dd'
+                  placeholder="开始日期"
+                  style="width: 44%">
+                </el-date-picker>
+                <span style="margin: 0 4px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.endDate2"
+                  type="date"
+                  value-format='yyyy-MM-dd'
+                  format='yyyy-MM-dd'
+                  placeholder="结束日期"
+                  style="width: 44%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="检验日期">
+                <el-date-picker
+                  v-model="searchData.startDate"
+                  type="date"
+                  value-format='yyyy-MM-dd'
+                  format='yyyy-MM-dd'
+                  placeholder="开始日期"
+                  style="width: 44%">
+                </el-date-picker>
+                <span style="margin: 0 4px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.endDate"
+                  type="date"
+                  value-format='yyyy-MM-dd'
+                  format='yyyy-MM-dd'
+                  placeholder="结束日期"
+                  style="width: 44%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
+
+        <!-- 操作按钮区域 -->
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <div class="search-actions">
+              <div class="action-left">
+                <el-button
+                  v-if="!authSearch"
+                  type="primary"
+                  icon="el-icon-search"
+                  @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="!authDelete"
+                  type="danger"
+                  icon="el-icon-delete"
+                  @click="deleteModal">
+                  删除
+                </el-button>
+                <el-button
+                  v-if="!authOverLoad"
+                  type="warning"
+                  icon="el-icon-refresh"
+                  :loading="overLoading"
+                  @click="overLoadModal">
+                  任务重载
+                </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">
+                  <i class="el-icon-download"></i>
+                  导出
+                </download-excel>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
 
     <!-- 检验记录展示列表 -->
     <el-table
@@ -669,6 +832,7 @@
     },
     data () {
       return {
+        searchExpanded: false, // 搜索条件展开状态，默认收起
         loadFlag: false,
         // 是否收藏
         favorite: false,
@@ -1674,6 +1838,34 @@
     },
 
     methods: {
+      // 切换搜索条件展开/收起
+      toggleSearchExpand() {
+        this.searchExpanded = !this.searchExpanded;
+      },
+      // 重置搜索条件
+      resetSearch() {
+        this.searchData = {
+          site: '',
+          userName: this.$store.state.user.name,
+          inspectionNo: '',
+          inspectionTypeNo: '109',
+          isQualified: '',
+          buDesc: '',
+          startDate: '',
+          endDate: '',
+          startDate2: '',
+          endDate2: '',
+          partNo: '',
+          partDesc: '',
+          inspectorName: '',
+          customerNo: '',
+          customerName: '',
+          inspectionResult: '',
+          disposalMeasures: '',
+          states: []
+        };
+        this.getDataList();
+      },
       // 列表数据总结
       getSummaries (param) {
         const { columns, data } = param
@@ -2954,6 +3146,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: 10px 0;
+  min-height: 0;
+}
+
+/* 卡片主体样式 */
+.search-card /deep/ .el-card__body {
+  padding: 10px;
+  transition: all 0.3s ease;
+}
+
+/* 收起时的样式 */
+.search-card.collapsed /deep/ .el-card__body {
+  padding: 10px 20px;
+}
+
+.search-form /deep/ .el-form-item {
+  margin-bottom: 18px;
+}
+
+.search-form /deep/ .el-form-item__label {
+  font-weight: 500;
+  color: #606266;
+  padding-bottom: 6px;
+}
+
+.search-form /deep/ .el-input__inner,
+.search-form /deep/ .el-textarea__inner {
+  border-radius: 6px;
+  border: 1px solid #DCDFE6;
+  transition: all 0.3s ease;
+}
+
+.search-form /deep/ .el-input__inner:focus,
+.search-form /deep/ .el-textarea__inner:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
+}
+
+.search-form /deep/ .el-select {
+  width: 100%;
+}
+
+.search-form /deep/ .el-date-editor.el-input {
+  width: 100%;
+}
+
+/* 操作按钮区域 */
+.search-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0 2px 0;
+}
+
+/* 展开时显示上边框 */
+.search-card:not(.collapsed) .search-actions {
+  border-top: 1px solid #f0f0f0;
+  margin-top: 8px;
+}
+
+/* 收起时不显示上边框和上边距 */
+.search-card.collapsed .search-actions {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.action-left,
+.action-right {
+  display: flex;
+  gap: 8px;
+}
+
+.search-actions .el-button {
+  border-radius: 4px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.search-actions .el-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.search-actions .el-button--primary {
+  background: #60aeff;
+  border-color: #60aeff;
+}
+
+.search-actions .el-button--primary:hover {
+  background: #7dbdff;
+  border-color: #7dbdff;
+}
+
+.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;