折叠

src/views/modules/sampleTracking/projectProofTracking.vue

@@ -1,8 +1,15 @@
 <template>
   <div class="mod-config">
-    <el-form :inline="true" :model="searchData" label-position="top" class="search-form">
-      <el-form-item label="BU">
-        <el-select v-model="searchData.buNo" filterable placeholder="请选择" style="width: 80px" @change="handleSearchBuChange">
+    <div class="search-section">
+      <div class="search-toolbar">
+        <div class="search-bu-field">
+          <span class="search-bu-label">BU</span>
+          <el-select
+            class="search-bu-select"
+            v-model="searchData.buNo"
+            filterable
+            placeholder="请选择"
+            @change="handleSearchBuChange">
             <el-option
               v-for="item in userBuList"
               :key="`searchBu_${item.buNo}`"
@@ -10,7 +17,45 @@
               :value="normalizeBuNo(item.buNo, searchData.site)"
             />
           </el-select>
-      </el-form-item>
+        </div>
+        <el-button
+          type="text"
+          class="search-collapse-label"
+          :aria-expanded="searchExpanded ? 'true' : 'false'"
+          @click="toggleSearchExpand">
+          <i class="el-icon-search"></i>
+          <span>筛选条件</span>
+          <i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+        </el-button>
+        <div class="search-header-actions">
+          <el-button type="primary" @click="getDataList('Y')">查询</el-button>
+          <el-button @click="resetSearch">重置</el-button>
+          <el-button type="success" :loading="exportLoading" @click="exportTrackingData">导出</el-button>
+          <el-button type="primary" @click="openOneKeyDialog">一键创建</el-button>
+          <el-button type="warning" @click="openCreateProofDialog()">新增打样</el-button>
+          <el-button type="success" plain :loading="syncBatchNpiLoading" @click="syncBatchProjectPartToNpi()">同步项目物料到NPI</el-button>
+          <el-button type="success" plain :loading="syncBatchProofLoading" @click="syncBatchProofToNpi()">同步打样到NPI</el-button>
+          <el-button
+            type="info"
+            v-if="isAuth('833001005:set')"
+            plain
+            :loading="buProcessConfigLoading"
+            :disabled="buProcessConfigLoading"
+            @click="openBuProcessConfigDialog"
+          >事业部进度设置</el-button>
+          <el-button type="info" v-if="isAuth('833001005:set2')" plain @click="openDefaultProcessConfigDialog">默认进度设置</el-button>
+          <el-tooltip
+            style="margin-top: 3px; margin-left: 10px"
+            placement="top">
+            <template slot="content">
+              <div>- 已完成后，双击日期选择框可回退为未完成</div>
+              <div>- 双击Comments可编辑，回车或点击✓保存</div>
+            </template>
+            <i class="el-icon-question default-process-tip-icon"></i>
+          </el-tooltip>
+        </div>
+      </div>
+      <el-form v-show="searchExpanded" :inline="true" :model="searchData" label-position="top" class="search-form">
         <el-form-item label="项目编码">
           <el-input v-model="searchData.projectNo" clearable placeholder="请输入项目编码" style="width: 120px" />
         </el-form-item>
@@ -160,44 +205,16 @@
             <el-option label="进行中" value="进行中" />
             <el-option label="打样完成" value="打样完成" />
           </el-select>
-        <el-button type="primary" @click="getDataList('Y')">查询</el-button>
-        <el-button @click="resetSearch">重置</el-button>
-        <el-button type="success" :loading="exportLoading" @click="exportTrackingData">导出</el-button>
-      </el-form-item>
-      <el-form-item class="button-group-col">
-        <el-row :gutter="8" type="flex" class="button-row" >
-            <el-button type="primary" @click="openOneKeyDialog">一键创建</el-button>
-          <el-button type="warning" @click="openCreateProofDialog()">新增打样</el-button>
-          <el-button type="success" plain :loading="syncBatchNpiLoading" @click="syncBatchProjectPartToNpi()">同步项目物料到NPI</el-button>
-          <el-button type="success" plain :loading="syncBatchProofLoading" @click="syncBatchProofToNpi()">同步打样到NPI</el-button>
-          <el-button
-            type="info"
-            v-if="isAuth('833001005:set')"
-            plain
-            :loading="buProcessConfigLoading"
-            :disabled="buProcessConfigLoading"
-            @click="openBuProcessConfigDialog"
-          >事业部进度设置</el-button>
-          <el-button type="info" v-if="isAuth('833001005:set2')" plain @click="openDefaultProcessConfigDialog">默认进度设置</el-button>
-          <el-tooltip
-            style="margin-top: 3px; margin-left: 10px"
-            placement="top">
-            <template slot="content">
-              <div>- 已完成后，双击日期选择框可回退为未完成</div>
-              <div>- 双击Comments可编辑，回车或点击✓保存</div>
-            </template>
-            <i class="el-icon-question default-process-tip-icon"></i>
-          </el-tooltip>
-        </el-row>
         </el-form-item>
       </el-form>
+    </div>
 
     <el-table
       ref="trackingTable"
       :data="dataList"
-      border class="data-table"
+      border class="data-table proof-tracking-table"
       stripe highlight-current-row
-      height="670"
+      :height="trackingTableHeight"
       v-loading="dataListLoading"
       @sort-change="handleTrackingTableSortChange"
       @filter-change="handleTrackingTableFilterChange"
@@ -371,6 +388,7 @@
     </el-table>
 
     <el-pagination
+      ref="trackingPagination"
       @size-change="sizeChangeHandle"
       @current-change="currentChangeHandle"
       :current-page="pageIndex"
@@ -1638,6 +1656,10 @@ export default {
   },
   data () {
     return {
+      // 默认折叠，使用即时显隐避免宽表在折叠动画中反复重排。
+      searchExpanded: false,
+      trackingTableHeight: 670,
+      trackingTableHeightUpdateToken: 0,
       searchData: {
         site: this.$store.state.user.site,
         userName: this.$store.state.user.name,
@@ -1852,7 +1874,13 @@ export default {
       }
     }
   },
+  mounted () {
+    this.bindTrackingTableResize()
+    this.scheduleTrackingTableHeightUpdate()
+  },
   activated () {
+    this.bindTrackingTableResize()
+    this.scheduleTrackingTableHeightUpdate()
     this.loadUserBuList().then(() => {
       return Promise.all([
         this.queryProcessColumns(),
@@ -1865,8 +1893,23 @@ export default {
     })
   },
   deactivated () {
+    this.unbindTrackingTableResize()
     this.destroyDefaultProcessConfigSortable()
   },
+  beforeDestroy () {
+    this.unbindTrackingTableResize()
+  },
+  watch: {
+    searchExpanded () {
+      this.scheduleTrackingTableHeightUpdate()
+    },
+    'searchData.buNo' () {
+      // RFID 分类筛选的显隐会改变展开后的搜索区高度。
+      if (this.searchExpanded) {
+        this.scheduleTrackingTableHeightUpdate()
+      }
+    }
+  },
   computed: {
     visibleTrackingColumns () {
       // 列表只渲染“当前生效列”：有用户动态列时用用户配置，否则用代码默认列。
@@ -3633,6 +3676,58 @@ export default {
         }
       })
     },
+    bindTrackingTableResize () {
+      if (this._onTrackingTableResize) {
+        return
+      }
+      this._onTrackingTableResize = () => {
+        this.scheduleTrackingTableHeightUpdate()
+      }
+      window.addEventListener('resize', this._onTrackingTableResize)
+    },
+    unbindTrackingTableResize () {
+      if (this._onTrackingTableResize) {
+        window.removeEventListener('resize', this._onTrackingTableResize)
+        this._onTrackingTableResize = null
+      }
+      this.trackingTableHeightUpdateToken += 1
+    },
+    toggleSearchExpand () {
+      this.searchExpanded = !this.searchExpanded
+    },
+    scheduleTrackingTableHeightUpdate () {
+      const token = ++this.trackingTableHeightUpdateToken
+      this.$nextTick(() => {
+        if (token !== this.trackingTableHeightUpdateToken) {
+          return
+        }
+        this.updateTrackingTableHeight()
+      })
+    },
+    updateTrackingTableHeight () {
+      const tableRef = this.$refs.trackingTable
+      const tableEl = tableRef && tableRef.$el ? tableRef.$el : null
+      if (!tableEl || typeof tableEl.getBoundingClientRect !== 'function') {
+        return
+      }
+      const tableRect = tableEl.getBoundingClientRect()
+      // keep-alive 页签隐藏时不使用零尺寸覆盖正常布局。
+      if (!tableRect.width) {
+        return
+      }
+      const tableTop = tableRect.top
+      const paginationRef = this.$refs.trackingPagination
+      const paginationEl = paginationRef && paginationRef.$el ? paginationRef.$el : null
+      const paginationHeight = paginationEl ? paginationEl.offsetHeight : 32
+      const paginationMargin = 12
+      // 卡片 padding 5px + 页签内容区 padding 5px，再留 6px，一次算准高度，避免二次收缩触发表格重排。
+      const bottomReserve = 16
+      const nextHeight = Math.max(240, Math.floor(window.innerHeight - tableTop - paginationHeight - paginationMargin - bottomReserve))
+      if (this.trackingTableHeight === nextHeight) {
+        return
+      }
+      this.trackingTableHeight = nextHeight
+    },
     handleBuProcessCodesChange (row) {
       if (!row) {
         return
@@ -6368,6 +6463,10 @@ export default {
         return ''
       }
       const packageDate = this.getTrackingPackageDate(row)
+      // 尚未生成打样单且 Delivery&Package 有值时，才显示准备阶段。
+      if (this.isBlankValue(row.proofingNo) && packageDate) {
+        return 'trialPrepare'
+      }
       const baseline = this.formatDate(row.baseline)
       // 缺少 package 或 baseline 时无法判定延期，保持空状态由文案函数显示 '-'。
       if (!packageDate || !baseline) {
@@ -6393,10 +6492,13 @@ export default {
       return this.isProofingFinishedForTrackingStatus(row)
     },
     getTrackingStatusText (row) {
+      const statusType = this.getTrackingStatusType(row)
+      if (statusType === 'trialPrepare') {
+        return 'Trial prepare'
+      }
       if (this.isProofingFinishedForTrackingStatus(row)) {
         return 'Complete'
       }
-      const statusType = this.getTrackingStatusType(row)
       if (!statusType) {
         return '-'
       }
@@ -6404,10 +6506,13 @@ export default {
       return `${statusPrefix}-${this.getFirstPendingProcessLabel(row)}`
     },
     getTrackingStatusClass (row) {
+      const statusType = this.getTrackingStatusType(row)
+      if (statusType === 'trialPrepare') {
+        return 'tracking-status tracking-status--delay'
+      }
       if (this.isProofingFinishedForTrackingStatus(row)) {
         return 'tracking-status tracking-status--complete'
       }
-      const statusType = this.getTrackingStatusType(row)
       if (statusType === 'onSchedule') {
         return 'tracking-status tracking-status--on-schedule'
       }
@@ -6456,6 +6561,27 @@ export default {
 </script>
 
 <style >
+/* 仅打样跟踪主表使用深灰色网格，不覆盖其他页面或弹窗中的表格。 */
+.el-table.proof-tracking-table.el-table--border {
+  border-color: #808080;
+}
+
+.el-table.proof-tracking-table th,
+.el-table.proof-tracking-table td {
+  border-right: 1px solid #808080;
+  border-bottom: 1px solid #808080;
+}
+
+.el-table.proof-tracking-table::before,
+.el-table.proof-tracking-table.el-table--border::after,
+.el-table.proof-tracking-table .el-table__fixed::before,
+.el-table.proof-tracking-table .el-table__fixed-right::before {
+  background-color: #808080;
+}
+
+.el-table.proof-tracking-table .el-table__fixed-right-patch {
+  border-bottom: 1px solid #808080;
+}
 .el-table.el-table--medium.data-table th,
 .el-table.data-table th {
   height: 26px;
@@ -6477,6 +6603,73 @@ export default {
 
 .search-form {
   margin-bottom: 0;
+  padding-top: 8px;
+}
+
+.mod-config .search-toolbar {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex-wrap: wrap;
+  padding: 0 8px 0 0;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.mod-config .search-bu-field {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  height: 24px;
+  line-height: 24px;
+  margin-right: 16px;
+}
+
+.mod-config .search-bu-label {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  line-height: 24px;
+  margin-right: 8px;
+  padding: 0;
+  font-size: 12px;
+  font-weight: 400;
+  color: #606266;
+}
+
+.mod-config .search-bu-select {
+  width: 80px;
+}
+
+.mod-config .search-bu-select .el-input__inner {
+  height: 24px;
+  line-height: 24px;
+}
+
+.mod-config .search-collapse-label {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  margin-right: 8px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 13px;
+  color: #303133;
+  font-weight: 500;
+}
+
+.mod-config .search-collapse-label span {
+  margin-left: 8px;
+  font-weight: 500;
+}
+
+.mod-config .search-header-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-left: 0;
+  margin-right: 8px;
+  min-width: 0;
+  row-gap: 6px;
 }
 
 .search-proofing-status-select .el-select__tags {
@@ -6490,16 +6683,6 @@ export default {
   flex-wrap: nowrap;
 }
 
-.button-group-col {
-  width: 100%;
-  margin-top: 16px;
-}
-
-.button-row {
-  width: 100%;
-  flex-wrap: wrap;
-}
-
 .bu-process-config-dialog .bu-process-order-list {
   display: grid;
   grid-template-columns: repeat(3, minmax(220px, 1fr));