2025-12-26

订单产出标签报表优化

src/views/modules/shopOrder/productionReport/searchSfdcRollsReport.vue

@@ -1,66 +1,134 @@
 <template>
   <div class="mod-config">
-    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: -5px;">
-      <el-form-item label='来源工单号'>
-        <el-input v-model="searchData.orderNo" style="width: 150px" clearable></el-input>
-      </el-form-item>
-      <el-form-item label='来源派工单号'>
-        <el-input v-model="searchData.createdOpsSeqNo" style="width: 130px" clearable></el-input>
-      </el-form-item>
-      <el-form-item label='来源工序号'>
-        <el-input v-model="searchData.createdOpsItemNo" style="width: 130px" clearable></el-input>
-      </el-form-item>
-      <el-form-item label="创建日期">
-        <el-date-picker
-          style="width: 130px"
-          v-model="searchData.createdDate2"
-          value-format="yyyy-MM-dd"
-          :placeholder="labels.placeholder">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="至">
-        <el-date-picker
-          style="width: 130px"
-          v-model="searchData.createdDate3"
-          value-format="yyyy-MM-dd"
-          :placeholder="labels.placeholder">
-        </el-date-picker>
-      </el-form-item>
-<!--      <el-form-item >-->
-<!--        <span slot="label" style="" @click="getBaseList(18)"><a herf="#">{{labels.site}}</a></span>-->
-<!--        <el-input v-model="searchData.site" style="width: 130px"></el-input>-->
-<!--      </el-form-item>-->
-    </el-form>
-    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
-      <el-form-item label='消耗工单号'>
-        <el-input v-model="searchData.consumeOrderNo" style="width: 150px" clearable></el-input>
-      </el-form-item>
-      <el-form-item label='消耗派工单号'>
-        <el-input v-model="searchData.consumeSeqNo" style="width: 130px" clearable></el-input>
-      </el-form-item>
-      <el-form-item label='消耗工序号'>
-        <el-input v-model="searchData.consumeItemNo" style="width: 130px" clearable></el-input>
-      </el-form-item>
-      <el-form-item >
-        <el-button @click="getData()" type="primary" style="margin-left: 2px;margin-top: 20px">{{buttons.search}}</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="printLabelModel()" type="primary">打印</el-button>
-        <el-button @click="openAttributeChangeDialog()" type="warning">属性变动</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="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.createdOpsSeqNo" placeholder="请输入" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="来源工序号">
+                <el-input v-model="searchData.createdOpsItemNo" placeholder="请输入" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <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="4">
+              <el-form-item label="物料名称">
+                <el-input v-model="searchData.partDesc" placeholder="请输入" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="规格型号">
+                <el-input v-model="searchData.spec" 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.consumeOrderNo" placeholder="请输入" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="消耗派工单号">
+                <el-input v-model="searchData.consumeSeqNo" placeholder="请输入" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="消耗工序号">
+                <el-input v-model="searchData.consumeItemNo" placeholder="请输入" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="创建日期">
+                <div style="display: flex; align-items: center;">
+                  <el-date-picker
+                    v-model="searchData.createdDate2"
+                    type="date"
+                    value-format="yyyy-MM-dd"
+                    placeholder="开始日期"
+                    style="flex: 1">
+                  </el-date-picker>
+                  <span style="margin: 0 8px; color: #DCDFE6;">~</span>
+                  <el-date-picker
+                    v-model="searchData.createdDate3"
+                    type="date"
+                    value-format="yyyy-MM-dd"
+                    placeholder="结束日期"
+                    style="flex: 1">
+                  </el-date-picker>
+                </div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
+
+        <!-- 操作按钮区域 -->
+        <el-row :gutter="16">
+          <el-col :span="24">
+            <div class="search-actions">
+              <el-button type="primary" icon="el-icon-search" @click="getData()">{{ buttons.search }}</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> {{ buttons.download }}
+              </download-excel>
+              <el-button type="primary" icon="el-icon-printer" @click="printLabelModel()">打印</el-button>
+              <el-button type="warning" icon="el-icon-edit" @click="openAttributeChangeDialog()">属性变动</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
 
     <el-table
       :height="height"
@@ -371,9 +439,12 @@ import labelPrintTemplates from '@/mixins/labelPrintTemplates.js';
           batchNo: '',
           remark: ''
         },
+        searchExpanded: true,
         searchData: {
           site:'',
           partNo:'',
+          partDesc:'',
+          spec:'',
           partDescription:'',
           orderNo:'',
           operatorID:'',
@@ -381,7 +452,7 @@ import labelPrintTemplates from '@/mixins/labelPrintTemplates.js';
           workCenterNo:'',
           date1:'',
           date2:'',
-          user:this.$store.state.user.name,
+          userName: this.$store.state.user.name,
           createdDate2: new Date(),
         },
         dataList:[],
@@ -838,10 +909,13 @@ import labelPrintTemplates from '@/mixins/labelPrintTemplates.js';
     },
     mounted() {
       this.$nextTick(() => {
-        this.height = window.innerHeight - 185;
+        this.height = window.innerHeight - 238;
       })
     },
     methods: {
+      toggleSearchExpand() {
+        this.searchExpanded = !this.searchExpanded;
+      },
       getBaseData(val){
         if (this.tagNo === 5){
           this.searchData.partNo = val.PartNo
@@ -1223,6 +1297,138 @@ import labelPrintTemplates from '@/mixins/labelPrintTemplates.js';
     padding: 5px 5px;
   }
 
+/* 搜索卡片样式 */
+.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;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.collapse-btn {
+  color: #fff !important;
+  font-size: 13px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.collapse-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.collapse-btn i {
+  margin-left: 4px;
+  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: flex-start;
+  align-items: center;
+  padding: 8px 0 2px 0;
+  gap: 8px;
+}
+
+/* 展开时显示上边框 */
+.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;
+}
+
 /* 标签打印对话框样式 */
 .print-dialog {
   /deep/ .el-dialog__header {