add:日常需求迭代

mes/qd/src/views/wms/statistics/materPlan/index.vue

@@ -12,16 +12,16 @@
           label-suffix=":"
         >
           <el-form-item label="统计日期">
-              <el-date-picker
-                v-model="query.createTime"
-                type="daterange"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                :default-time="['00:00:00', '23:59:59']"
-                @input="onInput()"
-                @change="mytoQuery"
-              />
+            <el-date-picker
+              v-model="query.createTime"
+              type="daterange"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="['00:00:00', '23:59:59']"
+              @input="onInput()"
+              @change="mytoQuery"
+            />
           </el-form-item>
           <el-form-item label="所属组织">
             <el-select
@@ -69,7 +69,9 @@
           </el-table-column>
         </template>
       </el-table>
-
+      <div ref="topScroll" class="top-scroll" @scroll="handleScrollTop">
+        <div class="top-scroll-content" :style="{ width: topScrollWidth }" />
+      </div>
       <el-table
         ref="dtl_table"
         v-loading="crud.loading"
@@ -94,13 +96,24 @@
   </div>
 </template>
 <style>
+/*顶部滚动条*/
+.top-scroll {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.top-scroll .top-scroll-content {
+  background-color: #fff;
+  height: 15px;
+}
 .el-table .warning-row {
   background: oldlace;
 }
-
 .el-table .success-row {
   background: #f0f9eb;
 }
+.el-table__body-wrapper {
+  display: block;
+}
 </style>
 <script>
 import report from '@/api/wms/statistics/report'
@@ -140,6 +153,7 @@ export default {
   },
   data() {
     return {
+      topScrollWidth: 10,
       cols: [],
       cols2: [],
       dtlList: [],
@@ -163,6 +177,12 @@ export default {
     this.crud.query.createTime = [new Date(), new Date().daysLater(30)]
   },
   methods: {
+    handleScrollTop() {
+      if (this.$refs.topScroll) {
+        var scrollLeft = this.$refs.topScroll.scrollLeft
+        this.$refs.dtl_table.bodyWrapper.scrollTo(scrollLeft, 0)
+      }
+    },
     // 钩子：在获取表格数据之前执行，false 则代表不获取数据
     [CRUD.HOOK.beforeRefresh]() {
       report.getHeader().then(res => {
@@ -179,6 +199,12 @@ export default {
       const data = this.crud.query
       report.materPlanDtlQuery(data).then(res => {
         this.dtlList = res.content
+        this.topScrollWidth = this.$refs.dtl_table.bodyWrapper.scrollWidth + 'px'
+        this.tableDom = this.$refs.dtl_table.bodyWrapper
+        this.tableDom.addEventListener('scroll', () => {
+          var scrollLeft = this.tableDom.scrollLeft
+          this.$refs.topScroll.scrollTo(scrollLeft, 0)
+        })
       })
       crudInspectionsheetmst.getStatus().then(res => {
         this.statusList = res