WMS_IAC_FE/PC/InterFace.Dash/src/components/tablePagination/index.vue

<template>
  <div class="tablePagination">
    <!-- 头部按钮 -->
    <div class="table-nav">
      <curren-Button
        :isRoutePermission="isRoutePermission"
        ref="tablePagination_topNav"
        :Butttondata="currenButtonData"
        @tableButtonClick="topbutton"
        @quicklySearchClick="quicklySearchClick"
        @quicklySearchClear="quicklySearchClear"
        :quicklySearchOption="quicklySearchOption"
      >
      </curren-Button>
      <slot name="tableTopSlot"></slot>
    </div>
    <!-- 全面搜索（普通+高级整合） -->
    <searchOverall
      ref="searchOverallRef"
      :searchOverallCoverHeight="searchOverallCoverHeight"
      :showSearchOverall="showSearchOverall"
      @getShowSearchOverall="getShowSearchOverall"
      :primarySearchOption="primarySearchOption"
      :primarySearchButton="primarySearchButton"
      :showMoreSearch="showMoreSearch"
      :tableColumns="tableColumns"
      @overallSearchFormClick="overallSearchFormClick"
      :httpOverallSearchData="httpOverallSearchData"
      :selectMaxHeight="selectMaxHeight"
    >
      <!-- 插槽预留 -->
      <slot name="searchPrimarySlot"></slot>
    </searchOverall>
    <!-- 字段设置弹窗 -->
    <rowDrop 
      @radio="rowDrop" 
      :tableColumns="tableColumns" 
      :visible="rowDropVisible"
      @closeRowDrop="closeRowDrop"
      :source="rowSource"
      :innerMaxHeight="rowMaxHeight"
    ></rowDrop>
    <!-- 列表 -->
    <div class="uTableOuter" ref="uTableOuterRef" :style="{height:uTableOuterHeight + 'px',overflow:'hidden'}">
      <umyTable
        ref="tablePaginationTableRef"
        :isUpdate="isUpdate"
        :tableLoading="tableLoading"
        :tableData="tableData"
        :tableColumns="tableColumns | isTableColumns"
        :isShowIndex="isShowIndex"
        :selectionTable="tableSelection"
        :setUTableHeight="uTableTopHeight"
        @sortChange="sortChange"
        @handleSelectionChange="handleSelectionChange"
        @inlineDialog="inlineDialog"
        :buttonOperationList_left="buttonOperationList_left"
        @buttonOperationClick_left="buttonOperationClick_left"
        :buttonOperationList_right="buttonOperationList_right"
        @buttonOperationClick_right="buttonOperationClick_right"
        :tableBorder="true"
        :firstFixed="true"
        :cellStyle = "cellStyle"
        :showOverflowTooltip="showOverflowTooltip"
      >
        <template>
          <slot></slot>
        </template>
      </umyTable>
    </div>
    <!-- 页码 -->
    <pagination
      :totalCount="totalCount"
      :pagesizeProps="MaxResultCount"
      :currentPageProps="currentPageProps"
      @SizeChange="alterResultCount"
      @CurrentChange="alertoldSkipCount"
    ></pagination>
  </div>
</template>
<script>
import currenButton from "@/components/currenButton"
import pagination from "@/components/Pagination"
import searchOverall from "@/components/searchOverall"
import rowDrop from "@/components/rowDrop/index.vue"
import { getParentNode } from '@/utils'
export default {
  name: 'tablePagination',
  components: {
    pagination,
    currenButton,
    searchOverall,
    rowDrop
  },
  props: {
    rowMaxHeight:{
      type:String,
      default:'calc(90vh - 280px)'
    },
    // 筛选条件最大高度
    selectMaxHeight:{
      type: String,
      default: '174px'
    },
    // 筛选高度
    searchOverallCoverHeight:{
      type: String,
      default: 'calc(100vh - 200px)'
    },
    // 已app-main高度为100%  需要减掉的高度
    setUTableHeight: {
      type: Number,
      default: null
    },
    // 超出内容是否提示
    showOverflowTooltip:{
      type: Boolean,
      default: false,
    },
    // 是否按路由配置按钮权限
    isRoutePermission:{
      type: Boolean,
      default: false,
    },
    // 显示搜索配置
    quicklySearchOption:{
      type: Object,
      default: null
    },
    // 表格上方头部按钮配置
    currenButtonData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 操作列按钮(左侧)
    buttonOperationList_left:{
      type: Array,
      default: null,
    },
    // 操作列按钮(右侧)
    buttonOperationList_right:{
      type: Function,
      default: null,
    },
    // 列表数据
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 列表列配置 + 高级筛选配置
    tableColumns: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 复选框
    tableSelection: {
      type: Boolean,
      default: false
    },
    // table页码总数
    totalCount: {
      type: Number,
      default: 0
    },
    // table组件上的loading
    tableLoading: {
      type: Boolean,
      default: true
    },
    // 页码每页显示数
    MaxResultCount: {
      type: Number,
      default: 0
    },
    // 页码当前页配置
    currentPageProps: {
      type: Number,
      default: 1
    },
    // 是否显示序号
    isShowIndex: {
      type: Boolean,
      default: false,
    },
    // 选择当前行数据
    multipleSelection: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 以下为全面筛选组件配置
    //初级筛选绑定表单配置
    primarySearchOption: {
      type: Array,
      default: () => {
        return []
      }
    },
    //初级筛选表单自定义按钮
    primarySearchButton: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 是否显示高级筛选
    showMoreSearch:{
      type: Boolean,
      default: true,
    },
    // 当前接口中的筛选数据（用于同步全面筛选的数据）
    httpOverallSearchData:{
      type: Object,
      default: null
    },
    cellStyle: {
      type: Function,
      default: () => {
        return Function;
      }
    },
    // 字段设置来源（列表、列表-明细、明细页面）
    rowSource:{
      type:String,
      default:'list_api'
    }
  },
  data () {
    return {
      // 字段设置是否显示
      rowDropVisible: false,
      // table 重新渲染所需key
      isUpdate: false,
      appRemoveHeight:165,
      // 除去table的高度
      uTableTopHeight:165,
      // table外部高度控制，用于点击筛选动画处理
      uTableOuterHeight:null,
      // table外部最初始化高度，用于点击筛选动画处理
      uTableOuterHeight_init:null,
      //table操作按钮
      Butttondata: [
        {
          type: 'danger',
          icon: 'el-icon-delete',
          label: '批量删除',
          size: 'mini'
        },
        {
          type: 'warning',
          icon: 'el-icon-edit',
          label: '批量修改状态',
          size: 'mini'
        },
        {
          type: 'success',
          icon: 'el-icon-upload2',
          label: '批量导出',
          size: 'mini'
        },
        {
          type: 'info',
          icon: 'el-icon-printer',
          label: '批量打印',
          size: 'mini'
        },
      ],
      // 全面筛选组件配置
      // 显示全面筛选组件
      showSearchOverall:false,
    }
  },
  mounted(){
    this.appRemoveHeight = this.setUTableHeight || 165
    this.uTableTopHeight = this.appRemoveHeight
    this.uTableOuterHeight =  this.$refs.tablePaginationTableRef.getTableHeight()
    this.uTableOuterHeight_init = Number(JSON.stringify(this.uTableOuterHeight))
    
    // 点击外部，字段设置弹窗隐藏
    document.addEventListener('click',(e)=>{
      if(!this.rowDropVisible)return
      let _class = "rowDropNotHideItem"
      let _hasParent = getParentNode(e.target,_class)
      let _current_class = e.target._prevClass || e.target.className
      let _hasCurrent = _current_class ? String(_current_class).includes(_class) : false
      if(!_hasParent && !_hasCurrent){
        this.closeRowDrop()
      }
    })
  },
  methods: {
    // 重新渲染表格
    doFreshTableLayout(){
      if(this.$refs.tablePaginationTableRef && this.$refs.tablePaginationTableRef.doFreshLayout){
        this.$refs.tablePaginationTableRef.doFreshLayout()
      }
    },
    rowDrop(data,type) {
      this.$emit('rowDrop',data,type)
      this.$nextTick(()=>{
        this.isUpdate = !this.isUpdate
      })
    },
    //点击常用按钮
    topbutton (val,item) {
      // 筛选按钮 + table高度变化 + 动画效果（勿动顺序）
      if(val=="filter"){
        this.showSearchOverall = !this.showSearchOverall
        // 有普通查询配置
        if(this.primarySearchOption && this.primarySearchOption.length > 0){
          this.$nextTick(()=>{
            let _search_height = this.$refs.searchOverallRef.getSearchPrimaryHeight()
            this.changeTableHeight(_search_height)
            // if(this.showSearchOverall){
            //   let _margin = 20
            //   this.uTableOuterHeight = this.uTableOuterHeight_init - _search_height - _margin
            //   setTimeout(()=>{
            //     this.uTableTopHeight +=  _search_height + _margin
            //   },0)
            // }else{
            //   this.uTableOuterHeight = this.uTableOuterHeight_init
            //   setTimeout(()=>{
            //     this.uTableTopHeight = 165
            //   },0)
            // }
          })
        }
        this.$nextTick(()=>{
          let _search_height = this.$refs.searchOverallRef.getAllSearchInnerHeight()
          this.changeTableHeight(_search_height)
        })
      }
      // 字段设置
      else if (val == 'field') {
        this.rowDropVisible = !this.rowDropVisible
      }
      this.$emit("topbutton", val,item)
    },
    // 更改筛选时候的table高度问题
    changeTableHeight(minusHeight=0){
      if(this.showSearchOverall){
        let _margin = 20
        this.uTableOuterHeight = this.uTableOuterHeight_init - minusHeight - _margin
        setTimeout(()=>{
          this.uTableTopHeight =  minusHeight + this.appRemoveHeight + _margin
        },0)
      }else{
        this.uTableOuterHeight = this.uTableOuterHeight_init
        setTimeout(()=>{
          this.uTableTopHeight = this.appRemoveHeight
        },0)
      }
    }, 
    // 快速搜索 - 搜索按钮
    quicklySearchClick (val,option) {
      this.$emit("quicklySearchClick", val,option,this.$refs.searchOverallRef)
    },
    // 快速搜索 - 清除搜索
    quicklySearchClear (val,option) {
      // 判断是否有筛选按钮
      let hasSearch = false
      this.currenButtonData.forEach(item=>{
        if(item.name == 'filter'){
          hasSearch = true 
          return
        }
      })
      this.$emit("quicklySearchClear", val,option,this.$refs.searchOverallRef,hasSearch )
    },
    //接收分页组件emit改变每页最大页数
    alterResultCount (val) {
      this.$emit('alterResultCount', val)
    },
    //接收分页组件emit改变当前页
    alertoldSkipCount (val) {
      this.$emit('alertoldSkipCount', val)
    },
    //点击name提交emit打开编辑页面
    inlineDialog (row) {
      this.$emit("inlineDialog", row)
    },
    //点击selection框
    handleSelectionChange (val) {
      this.$emit("handleSelectionChange", val)
    },
    //排序
    sortChange (data) {
      this.$emit('sortChange', data)
    },
    //点击table操作列(左侧)按钮
    buttonOperationClick_left(row, item, index) {
      this.$emit("buttonOperationClick_left", row, item, index);
    },
    //点击table操作列(右侧)按钮
    buttonOperationClick_right(row, item, index) {
      this.$emit("buttonOperationClick_right", row, item, index);
    },
    // 全面筛选组件配置
    // 全面筛选组件内部显示/隐藏更改触发，同步当前的showSearchOverall值
    getShowSearchOverall(val){
      this.showSearchOverall = val || false
    },
    // 全面筛选组件所有按钮事件
    overallSearchFormClick(options){
      //增加快速搜索实体
      options.vm_quickly = this.$refs.tablePagination_topNav.getQuicklySearchDom()
      this.$emit("overallSearchFormClick", options)
    },
    // 关闭字段设置
    closeRowDrop() {
      this.rowDropVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.uTableOuter{
  transition:all 0.5s;
  overflow: hidden;
}
.tablePagination {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;

  .table-nav {
    padding-bottom: 15px;
  }

  .el-table {
    flex: 1;
  }
}
</style>