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

zhuzhuanzhuan

2024-01-12 120cf05bfd146a9bd1c011c9dd0244a57d0dea64

 src/views/mdc/base/modules/mdcStandardProcessDuration/MdcStandardProcessDurationList.vue

@@ -1,5 +1,5 @@
<template>
  <a-card :bordered="false" class="device_list">
  <div :bordered="false" class="device_list">
    <!-- 查询区域 -->
    <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -19,12 +19,18 @@
              <a-input placeholder="输入设备名称查询" v-model="queryParams.equipmentName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="2" :sm="3" :xs="3">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
          </a-col>
          <a-col :md="2" :sm="2" :xs="2">
            <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
            <a-space>
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
            </a-space>
          </a-col>
          <!--<a-col :md="2" :sm="3" :xs="3">-->
            <!--<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
          <!--</a-col>-->
          <!--<a-col :md="2" :sm="2" :xs="2">-->
            <!--<a-button type="primary" @click="searchReset" icon="reload">重置</a-button>-->
          <!--</a-col>-->
          <!--<a-col :lg="2" :md="3" :sm="3" :xs="3">-->
            <!--<a-button type="primary" @click="exportExcel" icon="download">导出</a-button>-->
          <!--</a-col>-->
@@ -35,6 +41,7 @@
    <div class="table-operator" style="display: inline;">
      <a-button @click="handleAdd" type="primary" icon="plus">新增
      </a-button>
      <a-button type="primary" icon="download" @click="importTemplate('标准加工时间模板')">导入模板</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('标准加工时间')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
      <a-button type="primary" icon="import">导入</a-button>
@@ -53,9 +60,9 @@
    </div>

    <!-- table区域-begin -->
    <div id="DeviceList">
    <div id="DeviceList" style="flex: 1;overflow: hidden">
      <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns"
               :scroll="{x:1000}" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
               :scroll="{x:'max-content',y:scrollY}" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
               :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
@@ -80,7 +87,7 @@
    <mdc-standard-process-duration-modal  ref="modalForm" @ok="modalFormOk"></mdc-standard-process-duration-modal>
    <mdc-standard-process-duration-edit   ref="modalFormedit" @ok="modalFormOk"></mdc-standard-process-duration-edit>

  </a-card>
  </div>
</template>

<script>
@@ -134,16 +141,19 @@
        queryParamEquip:{},
        queryParamPeople:{},
        dataStartsoucre:[],
        scrollY:465,
        columns: [
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentId'
            dataIndex: 'equipmentId',
            width:200
          },
          {
            title: '设备名称',
            align: 'center',
            dataIndex: 'equipmentName',
            width:200
            // defaultSortOrder:'descend',
            // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1}
          },
@@ -151,6 +161,7 @@
            title: '零件号',
            align: 'center',
            dataIndex: 'partsCode',
            width:150
            // scopedSlots:{customRender:'startTime'},
            // customRender:(text,row,index) => {
            //   return moment(text).format("YYYY-MM-DD HH:mm:ss")
@@ -159,28 +170,33 @@
          {
            title: '批次号',
            align: 'center',
            dataIndex: 'batchCode'
            dataIndex: 'batchCode',
            width:150
          },
          {
            title: '程序号',
            align: 'center',
            dataIndex: 'sequenceNumber'
            dataIndex: 'sequenceNumber',
            width:150
          },
          {
            title: '时长（分钟）',
            align: 'center',
            dataIndex: 'duration'
            dataIndex: 'duration',
            width:150
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'remark'
            dataIndex: 'remark',
            width:250
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            fixed:'right',
            width: 150
          }
        ],
@@ -233,6 +249,15 @@
      },
    },
    methods: {
      importTemplate(fileName){
        var a = document.createElement("a");
        a.href = "/static/标准加工时间.xls";
        a.download = "标准加工时间.xls";
        a.style.display = "none";
        document.body.appendChild(a);
        a.click();
        a.remove();
      },
      dateParamChange(v1, v2) {
        // console.log(v1,v2)
        this.queryParam.startTime = v2[0]
@@ -312,7 +337,11 @@
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
            this.$message.warning(res.message)
            // this.$message.warning(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        }).finally(() => {
          this.loading = false
@@ -357,7 +386,11 @@
              this.ipagination.total = 0;
            }
          }else{
            this.$message.warning(res.message)
            // this.$message.warning(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        }).finally(() => {
          this.loading = false
@@ -395,7 +428,11 @@
              this.ipagination.total = 0;
            }
          }else{
            this.$message.warning(res.message)
            // this.$message.warning(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        }).finally(() => {
          this.loading = false
@@ -437,7 +474,11 @@
              this.ipagination.total = 0;
            }
          }else{
            this.$message.warning(res.message)
            // this.$message.warning(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        }).finally(() => {
          this.loading = false
@@ -471,7 +512,11 @@
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
            this.$message.warning(res.message)
            // this.$message.warning(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        }).finally(() => {
          this.loading = false
@@ -493,10 +538,18 @@
          if (res.success) {
            //重新计算分页问题
            that.reCalculatePage(1)
            that.$message.success(res.message);
            // that.$message.success(res.message);
            that.$notification.success({
              message:'消息',
              description:res.message
            });
            that.searchQuery();
          } else {
            that.$message.warning(res.message);
            // that.$message.warning(res.message);
            that.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        });
      },
@@ -506,7 +559,11 @@
          return
        }
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning('请选择一条记录！');
          // this.$message.warning('请选择一条记录！');
          this.$notification.warning({
            message:'消息',
            description:"请选择一条记录"
          });
          return;
        } else {
          var ids = "";
@@ -523,11 +580,19 @@
                if (res.success) {
                  //重新计算分页问题
                  that.reCalculatePage(that.selectedRowKeys.length)
                  that.$message.success(res.message);
                  // that.$message.success(res.message);
                  that.$notification.warning({
                    message:'消息',
                    description:res.message
                  });
                  that.loadData();
                  that.onClearSelected();
                } else {
                  that.$message.warning(res.message);
                  // that.$message.warning(res.message);
                  that.$notification.warning({
                    message:'消息',
                    description:res.message
                  });
                }
              }).finally(() => {
                that.loading = false;
@@ -566,7 +631,11 @@
              _this.equipment = res.result
              _this.searchQuery()
            } else {
              _this.$message.warning('请配置设备！')
              // _this.$message.warning('请配置设备！')
              _this.$notification.warning({
                message:'消息',
                description:'请联系管理员，开放设备权限！'
              });
            }
          }
        })
@@ -617,9 +686,25 @@
          exclude_inputs: true
        });
      },

      /**
       * 当浏览器可视窗口尺寸发生改变时触发
       */
      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
      }
    },
    created() {
      this.queryParam.typeTree = "1"
    },
    mounted(){
      window.addEventListener('resize',this.handleWindowResize)
      this.handleWindowResize()
    },
    beforeDestroy(){
      window.removeEventListener('resize',this.handleWindowResize)
    }
  }
</script>
@@ -627,34 +712,35 @@
<style lang="less" scoped>
  @import '~@assets/less/common.less';

  .device_list{
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 1920px){
    .device_list{
      height: 811px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .device_list{
      height: 811px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .device_list{
      height: 663px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .device_list{
      height: 564px!important;
      overflow: scroll;
    }
  }
  @media screen and (max-width: 1280px){
    .device_list{
      height: 564px!important;
      overflow: scroll;
    }
  }
</style>