1、优化代码：mdc全局页面表格区域内容若需滚动无需翻至最底部且部分页面竖向滚动会滚动整个页面调整为仅滚动表格区域，表格操作列右固定以满足不同分辨率下...

zhuzhuanzhuan

2024-01-12 120cf05bfd146a9bd1c011c9dd0244a57d0dea64

 src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue

@@ -1,12 +1,10 @@
<template>
  <div class="deviceCalendar_list">
    <div :bordered="false">
      <!-- 查询区域 -->

      <div>
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
            <a-row :gutter="24" style="width: 100%">
              <a-col :md="6" :sm="6">
                <a-form-item label="时间">
                  <a-range-picker @change="dateParamChange" format="YYYYMMDD" v-model="dates"/>
@@ -34,9 +32,12 @@
        </div>
      </div>

      <div style="overflow: auto;width: 100%;margin-top: 20px;height: 569px;">
        <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns"  @change="handleTableChange"  class="ant-table-striped"
                 :dataSource="dataSource" :pagination="ipagination" :loading="loading"  :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
      <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList">
        <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}"
                 size="middle" rowKey="id" :columns="columns"
                 @change="handleTableChange"  class="ant-table-striped"
                 :dataSource="dataSource" :pagination="ipagination"
                 :loading="loading"  :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
          <span slot="action"
                slot-scope="text, record">
            <a-popconfirm
@@ -53,7 +54,6 @@
        </a-table>
      </div>
      <device-calendar-model ref="modalForm" @ok="modalFormOk"></device-calendar-model>
    </div>
  </div>
</template>

@@ -79,6 +79,7 @@
        identifying: [],
        queryParam: {},
        disableMixinCreated: true,
        scrollY:465,
        /* 分页参数 */
        ipagination:{
          current: 1,
@@ -96,60 +97,70 @@
            title: '日期',
            align: 'center',
            dataIndex: 'effectiveDate',
            width:100,
          },
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentId'
            dataIndex: 'equipmentId',
            width:150
          },
          {
            title: '设备名称',
            align: 'center',
            dataIndex: 'equipmentName',
            width:150
          },
          {
            title: '班制',
            align: 'center',
            dataIndex: 'shiftName'
            dataIndex: 'shiftName',
            width:150
          },
          {
            title: '班次',
            align: 'center',
            dataIndex: 'shiftSubName'
            dataIndex: 'shiftSubName',
            width:150
          },
          {
            title: '开始时间',
            align: 'center',
            dataIndex: 'startDate'
            dataIndex: 'startDate',
            width:140
          },
          {
            title: '结束时间',
            align: 'center',
            dataIndex: 'endDate'
            dataIndex: 'endDate',
            width:140
          },
          {
            title: '是否跨天',
            align: 'center',
            dataIndex: 'isDaySpan',
            scopedSlots: { customRender: 'isDaySpan' }
            scopedSlots: { customRender: 'isDaySpan' },
            width:100
          },
          {
            title: '开始休息时间',
            align: 'center',
            dataIndex: 'sleepStartDate'
            dataIndex: 'sleepStartDate',
            width:140
          },
          {
            title: '结束休息时间',
            align: 'center',
            dataIndex: 'sleepEndDate'
            dataIndex: 'sleepEndDate',
            width:140
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            fixed: "right",
            width: 147,
            scopedSlots: { customRender: 'action' }
            width: 100,
            scopedSlots: { customRender: 'action' },
            fixed:'right'
          }
        ],
        checkedList: ['lyl'],
@@ -167,6 +178,13 @@
      this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
      this.queryParam.typeTree = "1"
      this.loadData()
    },
    mounted(){
      window.addEventListener('resize',this.handleWindowResize)
      this.handleWindowResize()
    },
    beforeDestroy(){
      window.removeEventListener('resize',this.handleWindowResize)
    },
    watch: {
      Type(valmath){
@@ -252,103 +270,50 @@
        this.$refs.modalForm.add(record)
        this.$refs.modalForm.title = '设备工作日历配置'
        this.$refs.modalForm.disableSubmit = false
      },

      handleWindowResize(){
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2)
        this.scrollY = boxHeight - tableHeadHeight - 50
      }
    }
  }
</script>
<style scoped>
  .deviceCalendar_list{
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 1920px){
    .deviceCalendar_list{
      height: 812px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .deviceCalendar_list{
      height: 812px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .deviceCalendar_list{
      height: 664px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .deviceCalendar_list{
      height: 565px!important;
      overflow: scroll;
    }
  }
  @media screen and (max-width: 1280px){
    .deviceCalendar_list{
      height: 565px!important;
      overflow: scroll;
    }
  }

  .ant-table-striped /deep/ .table-striped td {
    background-color: #fafafa;
  }
  .identifyingclass {
    width: 55px;
    height: 15px;
    display: inline-block
  }

  .dataContent {
    border: 1px solid #ccc;
    width: 100%;
    /*height: 100%;*/
    overflow: hidden;
    overflow-y: auto;
    text-align: center;
  }

  .dataContent .fixed th {
    width: 50px;
  }

  .dataContent .thead th {
    background-color: #fafafa;
    text-align: center;
    height: 30px;
    padding: 5px;
  }

  .dataContent .notfixed th {
    width: auto;
  }

  .dataContent tr td {
    height: 35px;
  }

  .dataContent .mathData td {
    padding: 10px;
    /*display: none;*/
  }

  .dataContent .mathData .td {
    /*background-color: #ff9bd2;*/
    display: inline-block;
    padding: 10px;
  }

  .dataContent .mathData .tdd {
    /*display: none;*/
  }

  .pink {
    background-color: #ff9bd2;
  }

  .yellow {
    background-color: #e8ff37;
  }

  .green {
    background-color: #99ff4e;
  }
</style>