1、mdc菜单下除特殊要求外，页面表格最少条数由10条调整为30条，每页最多条数区间由[10,20,30]调整为[30,50,100] 2、OEE基础...

zhuzhuanzhuan

2024-03-18 51b9e548b0e533e8a415ce141808f2bb747b381e

 src/views/mdc/base/modules/HolidayManagement/HolidayManagementList.vue

@@ -1,32 +1,35 @@
<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">
        <a-row :gutter="24">
        <a-row :gutter="24" style="width: 100%;">
          <a-col :md="7" :sm="7">
            <a-form-item label="时间">
              <a-range-picker @change="dateParamChange" v-model="dates"  format="YYYY-MM-DD"/>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="4">
          <a-col :md="5" :sm="5">
            <a-form-item label="设备编号">
              <a-input placeholder="输入设备编号查询" v-model="queryParams.equipmentId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="4" :xs="4">
          <a-col :md="5" :sm="5" :xs="5">
            <a-form-item label="设备名称">
              <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 :lg="2" :md="3" :sm="3" :xs="3">-->
            <!--<a-button type="primary" @click="exportExcel" icon="download">导出</a-button>-->
          <!--<a-col :md="2" :sm="2" :xs="2">-->
            <!--<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-row>
      </a-form>
@@ -35,10 +38,13 @@
    <div class="table-operator" style="display: inline;">
      <a-button @click="handleAdd" type="primary" icon="plus">新增
      </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>-->
      <!--</a-upload>-->
      <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>
      </a-upload>
      <a-button type="primary" icon="printer" v-print="'#DeviceList'" v-has="'holidayManagement:print'">打印</a-button>

      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
@@ -53,9 +59,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 +86,7 @@
    <holiday-management-modal ref="modalForm" @ok="modalFormOk"></holiday-management-modal>
    <holiday-management-modal-edit  ref="modalFormedit" @ok="modalFormOk"></holiday-management-modal-edit>

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

<script>
@@ -133,16 +139,19 @@
        queryParamEquip:{},
        queryParamPeople:{},
        dataStartsoucre:[],
        scrollY:465,
        columns: [
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentId'
            dataIndex: 'equipmentId',
            width:250
          },
          {
            title: '设备名称',
            align: 'center',
            dataIndex: 'equipmentName',
            width:250
            // defaultSortOrder:'descend',
            // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1}
          },
@@ -150,6 +159,7 @@
            title: '日期',
            align: 'center',
            dataIndex: 'vacationDate',
            width:250
            // scopedSlots:{customRender:'startTime'},
            // customRender:(text,row,index) => {
            //   return moment(text).format("YYYY-MM-DD HH:mm:ss")
@@ -158,28 +168,43 @@
          {
            title: '类型',
            align: 'center',
            dataIndex: 'vacationType'
            dataIndex: 'vacationType',
            width:250
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'notes'
            dataIndex: 'notes',
            width:250
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 150
            width: 150,
            fixed:'right'
          }
        ],
        /* 分页参数 */
        ipagination:{
          current: 1,
          pageSize: 30,
          pageSizeOptions: ['30', '50', '100'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        url: {
          list: '/mdc/mdcVacationManagement/pageList',
          delete: '/mdc/mdcVacationManagement/deleteVacation',
          deleteBatch: '/mdc/mdcVacationManagement/deleteBatchVacation',
          getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
          exportXlsUrl: "/mdc/MdcTorqueConfig/exportXls",
          importExcelUrl: "/mdc/MdcTorqueConfig/importExcel",
          exportXlsUrl: "/mdc/mdcVacationManagement/exportXls",
          importExcelUrl: "/mdc/mdcVacationManagement/importExcel",
        }
      }
    },
@@ -223,7 +248,7 @@
    },
    methods: {
      dateParamChange(v1, v2) {
        // console.log(v1,v2)
        console.log(v1,v2)
        this.queryParam.startTime = v2[0]
        this.queryParam.endTime = v2[1]
        // console.log(v2[0],v2[1])
@@ -338,8 +363,6 @@
        param.field = this.getQueryField();
        param.parentId = this.queryParams.parentId;
        param.equipmentId = this.queryParams.equipmentId;
        param.startTime = this.queryParam.startTime;
        param.endTime =  this.queryParam.endTime;
        getAction(this.url.list,param).then((res) => {
          if(res.success){
            this.dataSource = res.result.records||res.result;
@@ -425,8 +448,10 @@
        param.field = this.getQueryField();
        param.parentId = this.queryParams.parentId;
        param.equipmentId = this.queryParams.equipmentId;
        param.startTime = this.queryParam.startTime;
        param.endTime =  this.queryParam.endTime;
        if(this.queryParam.startTime && this.queryParam.endTime){
          param.startTime = this.queryParam.startTime;
          param.endTime =  this.queryParam.endTime;
        }
        // console.log(param);
        getAction(this.url.list,param).then((res) => {
          if(res.success){
@@ -565,6 +590,15 @@
          });
        }
      },
      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();
      },
      handleAdd() {
        this.$refs.modalForm.add(this.node)
        this.$refs.modalForm.title = '新增'
@@ -615,9 +649,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>
@@ -625,34 +675,35 @@
<style lang="less" scoped>
  @import '~@assets/less/common.less';

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

  @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>