2026-01-22

优化

src/views/modules/boxManage/saleBoxManage.vue

@@ -1,44 +1,125 @@
 <template>
-  <div class="customer-css" >
-    <!--  查询时间和产品  -->
-    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;" @submit.native.prevent="getMainData">
-      <el-row>
-        <el-col :span="24" style="">
-          <el-form-item :label="'BU:'">
-            <el-input v-model="searchData.buNo" style="width: 130px"></el-input>
+  <div class="mod-config">
+    <!-- 条件查询 -->
+    <el-card :class="['search-card', { 'collapsed': !searchExpanded }]" shadow="hover">
+      <div slot="header" class="search-header">
+        <div class="header-left">
+          <i class="el-icon-search"></i>
+          <span class="header-title">销售发货装箱</span>
+        </div>
+        <div class="header-right">
+          <el-button
+            type="text"
+            size="small"
+            @click="toggleSearchExpand"
+            class="collapse-btn">
+            <i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+            {{ searchExpanded ? '收起' : '展开' }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-form
+        :inline="true"
+        label-position="top"
+        :model="searchData"
+        class="search-form"
+        @keyup.enter.native="getMainData">
+
+        <!-- 查询条件 - 可展开/收起 -->
+        <template v-if="searchExpanded">
+          <el-row :gutter="12">
+            <el-col :span="2">
+              <el-form-item label="BU">
+                <el-input v-model="searchData.buNo" placeholder="BU" clearable style="width: 100%"></el-input>
               </el-form-item>
-          <el-form-item :label="'销售出库单号:'">
-            <el-input v-model="searchData.orderNo" style="width: 130px"></el-input>
+            </el-col>
+            <el-col :span="3">
+              <el-form-item label="销售出库单号">
+                <el-input v-model="searchData.orderNo" placeholder="单号" clearable style="width: 100%"></el-input>
               </el-form-item>
-          <el-form-item :label="'客户编号:'">
-            <el-input v-model="searchData.customerId" style="width: 130px"></el-input>
+            </el-col>
+            <el-col :span="3">
+              <el-form-item label="客户编号">
+                <el-input v-model="searchData.customerId" placeholder="客户编号" clearable style="width: 100%"></el-input>
               </el-form-item>
-          <el-form-item :label="'客户名称:'">
-            <el-input v-model="searchData.customerName" style="width: 130px"></el-input>
+            </el-col>
+            <el-col :span="3">
+              <el-form-item label="客户名称">
+                <el-input v-model="searchData.customerName" placeholder="客户名称" clearable style="width: 100%"></el-input>
               </el-form-item>
-          <el-form-item :label="'单据状态'">
-            <el-select multiple collapse-tags v-model="searchData.orderStatusList" clearable style="width: 160px">
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="单据状态">
+                <el-select multiple collapse-tags v-model="searchData.orderStatusList" clearable placeholder="请选择" style="width: 100%">
                   <el-option label="待包装" value="待包装"></el-option>
                   <el-option label="待检验" value="待检验"></el-option>
                   <el-option label="已出库" value="已出库"></el-option>
                 </el-select>
               </el-form-item>
-          <el-form-item :label="'是否送检'">
-            <el-select v-model="searchData.inspectionFlag" clearable style="width: 100px">
+            </el-col>
+            <el-col :span="2">
+              <el-form-item label="是否送检">
+                <el-select v-model="searchData.inspectionFlag" clearable placeholder="选择" style="width: 100%">
                   <el-option label="是" value="Y"></el-option>
                   <el-option label="否" value="N"></el-option>
                 </el-select>
               </el-form-item>
-          <el-form-item :label="' '" >
-            <el-button class="customer-bun-min" type="primary" @click="getMainData" style="">查询</el-button>
-            <el-button @click="exportExcel()" type="primary" style="margin-left: 2px">{{'导出'}}</el-button>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="要求发货日期">
+                <el-date-picker
+                  v-model="searchData.startDate"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="开始日期"
+                  style="width: 44%">
+                </el-date-picker>
+                <span style="margin: 0 6px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.endDate"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="结束日期"
+                  style="width: 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
+                  type="primary"
+                  icon="el-icon-search"
+                  @click="getMainData">
+                  查询
+                </el-button>
+                <el-button
+                  type="primary"
+                  icon="el-icon-download"
+                  @click="exportExcel()">
+                  导出
+                </el-button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
       </el-form>
+    </el-card>
 
+    <!-- 数据列表 -->
+    <div class="section-title-bar">
+      <i class="el-icon-document"></i>
+      <span>销售发货清单</span>
+      <span class="total-count">（共 {{ totalPage }} 条）</span>
+    </div>
     <el-table
-      :height="height"
+      :height="tableHeight"
       :data="mainDataList"
       border
       ref="mainTable"
@@ -388,6 +469,8 @@ export default {
     return {
       functionId: this.$route.meta.menuId,
       height: 200,
+      tableHeight: 200,
+      searchExpanded: true,
       currentRow: {},
       selectedCaseRolls: [], // 装盒对话框中选中的卷标签
       printLoading: false,   // 打印loading
@@ -400,6 +483,8 @@ export default {
         inspectionFlag: '',
         buNo:'',
         customerName:'',
+        startDate: '',
+        endDate: '',
         site:this.$store.state.user.site,
         userName:this.$store.state.user.name,
         page: 1,
@@ -791,10 +876,29 @@ export default {
 
   mounted() {
     this.$nextTick(() => {
-      this.height = ( window.innerHeight - 220)/2;
+      this.calculateTableHeight();
+      window.addEventListener('resize', this.calculateTableHeight);
     })
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calculateTableHeight);
+  },
   methods: {
+    // 计算表格高度
+    calculateTableHeight() {
+      this.$nextTick(() => {
+        const windowHeight = window.innerHeight;
+        // 根据搜索条件展开状态动态计算
+        const headerHeight = this.searchExpanded ? 220 : 154;
+        this.tableHeight = (windowHeight - headerHeight - 178) / 2;
+        this.height = this.tableHeight;
+      });
+    },
+    // 切换搜索展开/收起
+    toggleSearchExpand() {
+      this.searchExpanded = !this.searchExpanded;
+      this.calculateTableHeight();
+    },
 
     getMainData(){
       this.dataListLoading = true
@@ -1371,5 +1475,215 @@ export default {
   padding: 5px !important;
 }
 
+/* 主容器 */
+.mod-config {
+  padding: 8px;
+  background: #f5f7fa;
+  min-height: 100%;
+}
+
+/* 搜索卡片样式 */
+.search-card {
+  margin-bottom: 8px;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.search-card:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.search-card /deep/ .el-card__header {
+  padding: 5px 20px;
+  background: linear-gradient(135deg, #9ac3d0 20%, #b6c7dd 80%);
+  border-bottom: none;
+}
+
+.search-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  color: #fff;
+}
+
+.header-left i {
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.header-title {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.header-right {
+  color: #fff;
+}
+
+.collapse-btn {
+  color: #fff;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.collapse-btn:hover {
+  color: #f0f0f0;
+  transform: translateY(-1px);
+}
+
+.collapse-btn i {
+  transition: transform 0.3s ease;
+}
+
+/* 搜索表单样式 */
+.search-form {
+  padding: 6px 0;
+  min-height: 0;
+}
+
+/* 卡片主体样式 */
+.search-card /deep/ .el-card__body {
+  padding: 10px;
+  transition: all 0.3s ease;
+}
+
+/* 收起时的样式 */
+.search-card.collapsed /deep/ .el-card__body {
+  padding: 10px 20px;
+}
+
+.search-form /deep/ .el-form-item {
+  margin-bottom: 12px;
+}
+
+.search-form /deep/ .el-form-item__label {
+  font-weight: 500;
+  color: #606266;
+  padding-bottom: 4px;
+}
+
+.search-form /deep/ .el-input__inner,
+.search-form /deep/ .el-textarea__inner {
+  border-radius: 6px;
+  border: 1px solid #DCDFE6;
+  transition: all 0.3s ease;
+}
+
+.search-form /deep/ .el-input__inner:focus,
+.search-form /deep/ .el-textarea__inner:focus {
+  border-color: #9ac3d0;
+  box-shadow: 0 0 0 2px rgba(154, 195, 208, 0.1);
+}
+
+.search-form /deep/ .el-select {
+  width: 100%;
+}
+
+/* 操作按钮区域 */
+.search-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0 2px 0;
+}
+
+/* 展开时显示上边框 */
+.search-card:not(.collapsed) .search-actions {
+  border-top: 1px solid #f0f0f0;
+  margin-top: 6px;
+}
+
+/* 收起时不显示上边框和上边距 */
+.search-card.collapsed .search-actions {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.action-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.search-actions .el-button {
+  border-radius: 4px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.search-actions .el-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.search-actions .el-button--primary {
+  background: #60aeff;
+  border-color: #60aeff;
+}
+
+.search-actions .el-button--primary:hover {
+  background: #7dbdff;
+  border-color: #7dbdff;
+}
+
+/* 区域标题栏样式 */
+.section-title-bar {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
+  border-radius: 4px;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.section-title-bar i {
+  font-size: 16px;
+  margin-right: 8px;
+  color: #409eff;
+}
+
+.section-title-bar .total-count {
+  margin-left: 10px;
+  font-size: 12px;
+  font-weight: normal;
+  color: #909399;
+}
+
+/* 表格样式 */
+/deep/ .el-table th {
+  background-color: #f5f7fa;
+  color: #303133;
+  font-weight: 600;
+}
+
+/deep/ .el-table tr:hover > td {
+  background-color: #f5f7fa !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .search-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .action-left {
+    width: 100%;
+    justify-content: center;
+  }
+}
 
 </style>