列表冻结列超出列表范围

版本号： 2.4.6

前端版本： vue2版

问题描述：在页面通过a-card嵌套上下结构，如果上下页面列表里面有图片，那么上下列表的冻结列首次查询的时候就会超出列表范围，再次点击回复正常或者自适应一下浏览器大小回复正常

截图&代码

111120220830085304

ClassAllRight.vue

<template>
  <a-card class="j-class-all-right-card-box"  :bordered="false">
    <div class="table-page-search-wrapper">
      <a-row class="form-row" :gutter="16"  >
        <a-col  >
          <class-top v-on:reloads="reloadSelf" v-model="value" />
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="16">
        <a-col >
          <class-list-right ref="classListRight"   v-model="value"  />
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>

<script>
    import ClassTop from './modules/ClassTop'
    import ClassListRight from './modules/ClassListRight'

    export default {
        name: 'ClassAllRight',
        props: ['value'],
        components: { ClassTop, ClassListRight },
        data() {
            return {
                description: '培训管理页面'
            }
        },
        methods: {
            onDeptTreeNodeClick (data) {
                console.log(data)
            },
            reloadSelf(){
                this.$refs.classListRight.loadData(1,null);
            }
        }
    }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>

ClassTop.vue

<template>
  <a-card title="搜索年度计划人员" class="j-class-top-card-box"  :bordered="false" >
    <div class="table-page-search-wrapper">
      <a-form-model layout="inline" :model="queryParam">
        <a-row :gutter="10">

          <a-col :md="6" :sm="12">
            <a-form-model-item label="姓名" prop="name" style="margin-left:8px">
              <a-input placeholder="请输入姓名查询" v-model="queryParam.name"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="驾驶证档案编号" prop="name" style="margin-left:8px">
              <a-textarea placeholder="可输入多个驾驶证档案编号(英文逗号,隔开)" v-model="queryParam.driverLicenseNumber"></a-textarea>
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12" @click="selectOrg('departId')" >
            <a-form-model-item  prop="workNo" style="margin-left:8px">
              <a-form-item label="所属单位">
                <j-tree-select
                  ref="treeSelect"
                  placeholder="请选择所属单位"
                  v-model="queryParam.departId"
                  dict="mjm_catalog,name,id"
                  pid-field="parent_id"
                  pidValue="0"
                  :disabled="true"
                >
                </j-tree-select>
              </a-form-item>
            </a-form-model-item>
          </a-col>

          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="12">
             <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 18px">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a-button type="primary" v-has="'trainingProgram:BatchAddToClass'" @click="loadSelectList" icon="plus" style="margin-left: 8px">批量添加到班级</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form-model>
    </div>

    <a-table
      ref="table"
      size="middle"
      :scroll="{x:true}"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      class="j-table-force-nowrap"
      @change="handleTableChange">

      <template slot="htmlSlot" slot-scope="text">
        <div v-html="text"></div>
      </template>
      <template slot="imgSlot" slot-scope="text">
        <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
        <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
      </template>
      <template slot="fileSlot" slot-scope="text">
        <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
        <a-button
          v-else
          :ghost="true"
          type="primary"
          icon="download"
          size="small"
          @click="downloadFile(text)">
          下载
        </a-button>
      </template>

      <span slot="action" slot-scope="text, record">
          <a v-has="'trainingProgram:AddToClass'" @click="addToClass(record)">添加到当前班级</a>
        </span>
    </a-table>
    <j-p-org-j-popup v-on:getorgcode="getOrgCode" ref="orgjpopup" ></j-p-org-j-popup>
  </a-card>

</template>

<script>

    import Vue from 'vue'
    import '@/assets/less/TableExpand.less'
    import { httpAction, getAction } from '@/api/manage'
    import { MyJeecgListMixin } from '@/mixins/mymixins/MyJeecgListMixin'
    import JPOrgJPopup from "@views/mjm/views/modules/tree/orgtree/JPOrgJPopup";

    export default {
        name: 'ClassTop',
        mixins: [MyJeecgListMixin],
        components: {JPOrgJPopup},
        props: ['value'],
        data() {
            return {
                description: '用户信息',
                cardLoading: true,
                positionInfo: {},
                currentClass:'',
                selectedRowKeys:[],
                selectionRows:[],
                columns: [
                  {
                      title: '#',
                      key: 'rowIndex',
                      dataIndex: '',
                      width: 60,
                      align: 'center',
                      customRender: (t, r, i) => parseInt(i) + 1
                  },
                  {
                    title:'头像',
                    align:"center",
                    dataIndex: 'avatarUrl',
                    scopedSlots: {customRender: 'imgSlot'}
                  },
                  {
                      title: '姓名',
                      align: 'center',
                      dataIndex: 'name'
                  },
                  {
                      title: '身份证号',
                      align: 'center',
                      dataIndex: 'cardNumber'
                  },
                  {
                      title: '所属单位',
                      align: 'center',
                      dataIndex: 'departId_text'
                  },
                  {
                      title: 'ERP编号',
                      align: 'center',
                      dataIndex: 'erpNumber'
                  },
                  {
                    title: '档案编号',
                    align: 'center',
                    dataIndex: 'driverLicenseNumber'
                  },
                  {
                      title: '职务',
                      align: 'center',
                      dataIndex: 'post'
                  },
                  {
                      title: '人员性质',
                      align: 'center',
                      dataIndex: 'natureOfCompany'
                  },
                  {
                    title:'管理类别',
                    align:"center",
                    dataIndex: 'managementCategory'
                  },
                  {
                    title:'实际用人单位',
                    align:"center",
                    dataIndex: 'actualEmployerId'
                  },
                  {
                    title:'准驾车型',
                    align:"center",
                    dataIndex: 'permittedDrivingModel'
                  },{
                    title:'准驾证编号',
                    align:"center",
                    dataIndex: 'standardLicenseNumber'
                  },
                  {
                    title:'内部准驾车型',
                    align:"center",
                    dataIndex: 'standardPermittedDrivingModel'
                  },
                  {
                    title:'准驾证初次领证时间',
                    align:"center",
                    dataIndex: 'standardLicenceFirstClaim',
                    customRender:function (text) {
                      return !text?"":(text.length>10?text.substr(0,10):text)
                    }
                  },
                  {
                    title:'准驾证有效期起',
                    align:"center",
                    dataIndex: 'standardTermOfValidityStart',
                    customRender:function (text) {
                      return !text?"":(text.length>10?text.substr(0,10):text)
                    }
                  },
                  {
                    title:'准驾证有效期止',
                    align:"center",
                    dataIndex: 'standardTermOfValidityEnd',
                    customRender:function (text) {
                      return !text?"":(text.length>10?text.substr(0,10):text)
                    }
                  },
                  {
                    title:'送培状态',
                    align:"center",
                    dataIndex: 'sendTrainStatus'
                  },
                  {
                    title:'培训类别',
                    align:"center",
                    dataIndex: 'trainingClasses'
                  },
                  {
                      title: '操作',
                      dataIndex: 'action',
                      align:"center",
                      fixed:"right",
                      width:147,
                      scopedSlots: { customRender: 'action' }
                  }
                ],
                url: {
                    list: '/trainingProgram/mjmNewDriver/listBySendTrainStatus',
                    addToClassUrl:'/trainingProgram/mjmNewTrainingProgram/addToClass',
                    batchAddToClassUrl:'/trainingProgram/mjmNewTrainingProgram/addToClasss'
                }
            }
        },
        watch: {
            value: {
                immediate: true,
                handler(orgCode) {
                    this.currentClass = orgCode;
                }
            },
        },
        created() {
        },
        methods: {
            getOrgCode(orgCode){
                this.queryParam[this.option_] = orgCode
                this.edit(this.queryParam);
            },
            selectOrg(option){
                this.option_ = option
                this.$refs.orgjpopup.showAll();
            },
            edit (record) {
                this.queryParam = Object.assign({}, record);
                this.visible = true;
            },
            onSelectChange(selectedRowKeys, selectionRows) {
                this.selectedRowKeys = selectedRowKeys;
                this.selectionRows = selectionRows;
            },
            loadSelectList(){
                let record_ = JSON.parse(JSON.stringify(this.selectionRows));
                if(!this.currentClass){
                    this.$message.warning('请选择你要加入的班级');
                    return;
                }
                let httpurl = '';
                let method = '';
                if(record_){
                    httpurl+=this.url.batchAddToClassUrl;
                    method = 'post';
                }

                for (let i = 0; i < record_.length; i++) {
                    record_[i].classAndGrade = this.currentClass;
                    record_[i].driverId = record_[i].id;
                    record_[i].id = null;
                }

                let that = this;
                httpAction(httpurl,record_,method).then((res)=>{
                    if(res.success){
                        that.$message.success(res.message);

                        that.$emit('reloads');
                    }else{
                        that.$message.warning(res.message);
                    }
                }).finally(() => {
                })
            },
            addToClass(recordmsg){
                let record = JSON.parse(JSON.stringify(recordmsg));
                if(!this.currentClass){
                    this.$message.warning('请选择你要加入的班级');
                    return;
                }
                let httpurl = '';
                let method = '';
                if(record){
                    httpurl+=this.url.addToClassUrl;
                    method = 'post';
                }
                record.classAndGrade = this.currentClass;
                record.driverId = record.id;
                record.id = null;
                let that = this;
                httpAction(httpurl,record,method).then((res)=>{
                    if(res.success){
                        that.$message.success(res.message);

                        that.$emit('reloads');
                    }else{
                        that.$message.warning(res.message);
                    }
                }).finally(() => {
                })
            },
            loadData(pageNum, orgCode) {
                this.loading = true
                this.cardLoading = true
                if (pageNum === 1) {
                    this.ipagination.current = 1
                }
                // update-begin- --- author:wangshuai ------ date:20200102 ---- for:传过来的部门编码为空全查
                let org_code;
                try{
                  org_code = Vue.ls.get('ORG_CODE');
                }catch (e) {}
                if (!orgCode) {
                    getAction(this.url.list, {
                        ...this.getQueryParams(),ORG_CODE:org_code
                    }).then((res) => {
                        if (res.success) {
                            this.dataSource = res.result.records
                            this.ipagination.total = res.result.total
                        }
                    }).finally(() => {
                        this.loading = false
                        this.cardLoading = false
                    })
                    // update-end- --- author:wangshuai ------ date:20200102 ---- for:传过来的部门编码为空全查
                }else{
                    //加载数据 若传入参数1则加载第一页的内容
                    getAction(this.url.list, {
                        orgCode,
                        ...this.getQueryParams(),ORG_CODE:org_code
                    }).then((res) => {
                        if (res.success) {
                            this.dataSource = res.result.records
                            this.ipagination.total = res.result.total
                        }
                    }).finally(() => {
                        this.loading = false
                        this.cardLoading = false
                    })
                }
            },

            searchQuery() {
                this.loadData(1, this.value)
            },
            searchReset() {
                this.queryParam = {}
                this.loadData(1, this.value)
            },
            handleTableChange(pagination, filters, sorter) {
                if (Object.keys(sorter).length > 0) {
                    this.isorter.column = sorter.field
                    this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'
                }
                this.ipagination = pagination
                this.loadData(null, this.value)
            }

        }
    }
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>

ClassListRight.vue

<template>
  <a-card title="当前班级信息" class="j-class-list-right-card-box" :loading="cardLoading" :bordered="false" v-if="value" >
    <div class="table-page-search-wrapper">
      <a-form-model layout="inline" :model="queryParam">
        <a-row :gutter="10">
<!--          驾驶证档案编号、驾驶证号、是否发证、培训完成时间、送培状态、培训结果-->
          <a-col :md="6" :sm="12">
            <a-form-model-item label="姓名" prop="name" style="margin-left:8px">
              <a-input placeholder="请输入姓名查询" v-model="queryParam.name"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-model-item label="档案编号" prop="driversLicense">
              <a-input placeholder="请输入档案编号" v-model="queryParam.driverLicenseNumber"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-model-item label="驾驶证号" prop="cardNumber">
              <a-input placeholder="请输入驾驶证号" v-model="queryParam.cardNumber"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="是否发证" prop="isCertificate" style="margin-left:8px">
              <j-search-select-tag placeholder="请选择" v-model="queryParam.isCertificate" :dictOptions="searchOptions1">
              </j-search-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="培训完成时间"  prop="issueDate">
              <j-date placeholder="请选择" v-model="queryParam.issueDate"  style="width: 100%" :showTime="true" dateFormat="YYYY-MM-DD" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="送培状态" prop="sendTrainStatus" style="margin-left:8px">
              <j-search-select-tag placeholder="请选择" v-model="queryParam.sendTrainStatus" :dictOptions="searchOptions2">
              </j-search-select-tag>
            </a-form-model-item>
          </a-col>
<!--          <a-col :md="6" :sm="12">-->
<!--            <a-form-model-item label="所属单位" prop="workNo" style="margin-left:8px">-->
<!--              <j-tree-select-->
<!--                ref="treeSelect"-->
<!--                placeholder="请选择所属单位"-->
<!--                v-model="queryParam.departId"-->
<!--                dict="mjm_catalog,name,id"-->
<!--                pid-field="parent_id"-->
<!--                pidValue="0"-->
<!--              >-->
<!--              </j-tree-select>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :md="6" :sm="12">
            <a-form-model-item label="培训结果" prop="realname" style="margin-left:8px">
            <j-search-select-tag placeholder="请选择" v-model="queryParam.trainingResults" :dictOptions="Training_status_options">
            </j-search-select-tag>
            </a-form-model-item>
          </a-col>

          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
             <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 18px">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a-button type="primary" v-has="'trainingProgram:ExportingTraineeInformation'" icon="download" @click="handleExportXls('班级学员导出')" style="margin-left: 8px" >导出学员信息模板</a-button>
              <a-upload name="file" v-has="'trainingProgram:ImportTheResults'" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel" style="margin-left: 8px"  >
                 <a-button type="primary" icon="import">导入成绩</a-button>
              </a-upload>
              <a-button type="primary" v-has="'trainingProgram:CertificateMakingInformationExport'" icon="download" @click="handleExportXlsPapers('制证信息')" style="margin-left: 8px" >导出制证信息</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form-model>
    </div>

    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        <span style="float:right;">
          <a @click="loadData()"><a-icon type="sync" />刷新</a>
          <a-divider type="vertical" />
          <a-popover title="自定义列" trigger="click" placement="leftBottom">
            <template slot="content">
              <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
                <a-row style="width: 400px">
                  <template v-for="(item,index) in defColumns">
                    <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                        <a-col :span="12"><a-checkbox :value="item.dataIndex"><j-ellipsis :value="item.title" :length="10"></j-ellipsis></a-checkbox></a-col>
                    </template>
                  </template>
                </a-row>
              </a-checkbox-group>
            </template>
            <a><a-icon type="setting" />设置</a>
          </a-popover>
        </span>
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">
            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>
            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
              <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>
            <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
              <a-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="downloadFile(text)">
                下载
              </a-button>
            </template>
            <span slot="action" slot-scope="text, record">
              <a-popconfirm v-has="'trainingProgram:OutOfClass'" title="确定移出该学员吗？" @confirm="handleDelete(record.id)" okText="确定" cancelText="取消">
                <a >移出班级</a>
              </a-popconfirm>

          </span>
      </a-table>
    </div>

  </a-card>
  <a-card title="当前班级信息" class="j-class-list-right-card-box"  :bordered="false" v-else >
    <a-empty>
      <span slot="description"> 请先选择一个班级! </span>
    </a-empty>
  </a-card>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import Vue from 'vue'
  import { deleteAction, getAction,downFile,getFileAccessHttpUrl } from '@/api/manage'
  import { MyJeecgListMixin } from '@/mixins/mymixins/MyJeecgListMixin'
  import {OptionsUtil} from "@/utils/OptionsUtil";

  export default {
    name: 'ClassListRight',
    mixins: [MyJeecgListMixin,OptionsUtil],
    components: {},
    props: ['value'],
    data() {
      return {
        description: '用户信息',
        cardLoading: true,
        positionInfo: {},
        currentClass:'',
        selectedRowKeys:[],
        selectionRows:[],
          searchOptions1:[{
              text:"是",
              value:"是"
          },{
              text:"否",
              value:"否"
          }],searchOptions2:[{
              text:"需要培训",
              value:"需要培训"
          },{
              text:"违章强制",
              value:"违章强制"
          }],
        columns: [
          {
            title: '#',
            key: 'rowIndex',
            dataIndex: '',
            width: 60,
            fixed:"left",
            align: 'center',
            customRender: (t, r, i) => parseInt(i) + 1
          },
          {
            title: '姓名',
            fixed:"left",
            align: 'center',
            dataIndex: 'name'
          },
          {
            title:'头像',
            align:"center",
            dataIndex: 'avatarUrl',
            scopedSlots: {customRender: 'imgSlot'}
          },
          {
            title: '性别',
            align: 'center',
            dataIndex: 'sex'
          },
          {
            title: '所属单位',
            align: 'center',
            dataIndex: 'departId_dictText'
          },
          {
            title: '实际单位',
            align: 'center',
            dataIndex: 'actualEmployerId_dictText'
          },
          {
            title: '档案编号',
            align: 'center',
            dataIndex: 'driverLicenseNumber'
          },
          {
            title: '内部准驾车型',
            align: 'center',
            dataIndex: 'standardPermittedDrivingModel'
          },
          {
            title: '管理类别',
            align: 'center',
            dataIndex: 'managementCategory'
          },
          {
            title: '培训类别',
            align: 'center',
            dataIndex: 'trainingClasses'
          },
          {
            title: '所在班级',
            align: 'center',
            dataIndex: 'classAndGradeDictText'
          },{
            title: '理论成绩',
            align: 'center',
            dataIndex: 'theoreticalResults'
          },{
            title: '技能成绩',
            align: 'center',
            dataIndex: 'skillScores'
          },{
            title: '是否发证',
            align: 'center',
            dataIndex: 'isCertificate'
          },
          {
            title: '培训结果',
            align: 'center',
            dataIndex: 'trainingResults'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:100,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: '/trainingProgram/mjmNewTrainingProgram/list',
          delete: '/trainingProgram/mjmNewTrainingProgram/delete',
          exportStudentInformationXls:'/trainingProgram/mjmNewTrainingProgram/exportStudentInformationXls',
          exportAccreditationInformationXls:'/trainingProgram/mjmNewTrainingProgram/exportAccreditationInformationXls',
          importExcelUrl:'/trainingProgram/mjmNewTrainingProgram/importExcel',
          queryMjmNewTrainingProgramPageList:'/trainingProgram/mjmNewTrainingProgram/queryMjmNewTrainingProgramPageList'
        }
      }
    },
    watch: {
        value: {
        immediate: true,
        handler(orgCode) {
            if (typeof(orgCode) == undefined || orgCode == null ||  orgCode ==  ''){

            }else{
                this.dataSource = []
                this.currentClass = orgCode;
                this.loadData(1, orgCode)
            }
        }
      },
    },
    created() {
    },
    computed: {
          importExcelUrl: function(){
              return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
          },
    },
    methods: {
        //导出制证信息
        handleExportXlsPapers(fileName){
            this.loading = true
            if(!fileName || typeof fileName != "string"){
                fileName = "导出文件"
            }
            let param = this.getQueryParams();
            if(this.selectedRowKeys && this.selectedRowKeys.length>0){
                param['selections'] = this.selectedRowKeys.join(",")
            }

          let exportFields = '姓名:name,照片:avatarUrl,所属单位:departId,管理类别:managementCategory,' +
            '内部准驾车型:standardPermittedDrivingModel,准驾证编号:standardLicenseNumber,准驾证有效期起:standardTermOfValidityStart,' +
            '准驾证有效期止:standardTermOfValidityEnd,发证机关:trainingUnit,备注:remarks,送培单位:sentUnit'
          param['exportFields'] = exportFields

            param['classAndGrade'] = this.currentClass
            console.log("导出参数",param)
            downFile(this.url.exportAccreditationInformationXls,param).then((data)=>{
              this.loading = false
                if (!data) {
                    this.$message.warning("文件下载失败")
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')
                }else{
                    let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName+'.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link); //下载完成移除元素
                    window.URL.revokeObjectURL(url); //释放掉blob对象
                }
            })
        },//导出学员信息模板
        handleExportXls(fileName){
            this.loading = true
            if(!fileName || typeof fileName != "string"){
                fileName = "导出文件"
            }
            let param = this.getQueryParams();
            if(this.selectedRowKeys && this.selectedRowKeys.length>0){
                param['selections'] = this.selectedRowKeys.join(",")
            }
            param['classAndGrade'] = this.currentClass

            let exportFields = 'ID:id,姓名:name,性别:sex,出生年月:birthday,电话号码:phone,所属单位:departId_text,' +
              '身份证号:cardNumber,驾驶证档案编号:driverLicenseNumber,准驾证编号:standardLicenseNumber,' +
              '培训类别:trainingClasses,驾驶证准驾车型:permittedDrivingModel,' +
              '内部准驾车型:standardPermittedDrivingModel,理论成绩:theoreticalResults,技能成绩:skillScores,' +
              '发证日期:standardLicenceFirstClaim,送培单位:sentUnit,所属单位编码:departId,ERP编号:erpNumber,' +
              '管理类别:managementCategory,职务:post,班级名称:classPeriods'
            param['exportFields'] = exportFields

            console.log("导出参数",param)
            downFile(this.url.exportStudentInformationXls,param).then((data)=>{
                this.loading = false
                if (!data) {
                    this.$message.warning("文件下载失败")
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')
                }else{
                    let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName+'.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link); //下载完成移除元素
                    window.URL.revokeObjectURL(url); //释放掉blob对象
                }
            })
        },
        handleDelete: function (id) {
            if(!this.url.delete){
                this.$message.error("请设置url.delete属性!")
                return
            }
            var that = this;
            deleteAction(that.url.delete, {id: id}).then((res) => {
                if (res.success) {
                    //重新计算分页问题
                    that.reCalculatePage(1)
                    that.$message.success(res.message);
                    this.loadData(1, this.currentClass)
                } else {
                    that.$message.warning(res.message);
                }
            });
        },
      loadData(pageNum, classAndGrade) {
        this.loading = true
        if (pageNum === 1) {
            this.ipagination.current = 1
        }
        if(!classAndGrade)classAndGrade = this.currentClass
          // classAndGrade = classAndGrade.indexOf('_') >0 ? null : classAndGrade
        // update-begin- --- author:wangshuai ------ date:20200102 ---- for:传过来的部门编码为空全查
        // let org_code;
        // try{
        //   org_code = Vue.ls.get('ORG_CODE');
        // }catch (e) {}
        if (!classAndGrade) {
            getAction(this.url.queryMjmNewTrainingProgramPageList, {
                ...this.getQueryParams()
            }).then((res) => {
                if (res.success) {
                    this.dataSource = res.result.records
                    this.ipagination.total = res.result.total
                }
            }).finally(() => {
                this.loading = false
                this.cardLoading = false
            })
          // update-end- --- author:wangshuai ------ date:20200102 ---- for:传过来的部门编码为空全查
        }else{
        //加载数据 若传入参数1则加载第一页的内容
        getAction(this.url.queryMjmNewTrainingProgramPageList, {
            classAndGrade,
          ...this.getQueryParams()
        }).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
        }
      },
      searchQuery() {
        this.loadData(1, null)
      },
      searchReset() {
        this.queryParam = {}
        this.loadData(1, null)
      },

      handleTableChange(pagination, filters, sorter) {
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field
          this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'
        }
        this.ipagination = pagination
        this.loadData(null, this.value)
      },

    }
  }
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>

jeecgboot / JeecgBoot

列表冻结列超出列表范围 #4006