526互联

定制栏目 --- 关于el-table 的显示隐藏的列

发布时间 2023-12-29 15:31:47作者: 一封未寄出的信

 

 
<el-button  type="primary" plain icon="el-icon-s-operation" @click="columsVisible = true" :loading="handleTotalChecked">定制栏目</el-button>
 
需要的页面引入组件：
<div class="tableList">
            <tableList ref="tableList" @handleaPage="getPage" @handleParamsQuery="paymentpage" @handleNo="handleApplyNo" @handleSelect="selectHandle" :columnsList="columnsList" @handleSelectListId="selectTableListId" @handleRowSee ="rowSee"></tableList>
        </div>
 <BaseCustomColumns v-if="columsVisible" ref="customerColumns"  :visible="columsVisible" :columns.sync="columnsList" :columns_copy="columnsList_copy" :tablePath="tablePath" @close=" columsVisible= false" @resetAll="resetAll"/>
 
import BaseCustomColumns from "@/components/Base/BaseCustomColumns/index.vue";
import tableList  from "./table.vue";
 
data(){
　　return {　
 　　　　columnsList: paymenntColumnList,
　　　　tablePath: '/settleAccounts/payment',
　　　　columsVisible: false,
　　　　columnsList_copy: [],
　　}
}
 created(){
　　this.columnsList_copy = deepClone(this.columnsList);
　　if(this.$route.name.includes('Panymentaudit')){    //判断是新增还是详情
            this.panymentAuditInfo=1;
            this.getQuery()
        }else{
            this.getQuery()
        }
}
 // 获取到的更新页码数据
        getPage(val){
            let params={
               ...this.formInline,
                pageNo:val.pageNo,
                pageSize:val.pageSize
            }
            this.$refs.tableList.searchData(params);
        },
 　　// 更新页码后，获取顶部搜索数据
        paymentpage(){
            this.$nextTick(()=>{
                this.$refs.tableList.getParamsData(this.ruleForm);
            })
        },
// 获取到的更新页码数据
        getPage(val){
            let params={
               ...this.formInline,
                pageNo:val.pageNo,
                pageSize:val.pageSize
            }
            this.$refs.tableList.searchData(params);
        },
// 点击表格
        handleApplyNo(row){
            if(this.$route.name.includes('Panymentaudit')){
                this.$router.push({
                    path:`/settleAccounts/paymentDetial/${row.applyNo}`,
                    query: {
                        tranPaymentId:row.tranPaymentId,
                        applyNo:row.applyNo,
                        editType:"edit",

                    }
                })
           }else{
                this.$router.push({
                    path:`/settleAccounts/paymentDetial/${row.applyNo}`,
                    query: {
                        tranPaymentId:row.tranPaymentId,
                        editType:"edit",
                        showInfo:true,
                        // paymentCorpName:row.nameCn,
                        // paymentCorpId:row.paymentCorpId,

                    }
                })
           }
        },
　　selectHandle(val){
            this.ids = val.ids;
            this.selectList = val.list;
        },
　　
selectTableListId(val){
          if(val.data.length==0){
            this.$message.warning("请勾选一条或多条数据!");
            return  false
          }else{

            if(val.val=='delete'){
              let params={
                ids:val.data.toString()
              }
              this.$confirm("此操作将删除数据,是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  salesLeadsdelete(params).then((res) => {
                    if (res.code == 0) {
                      this.$message.success("删除成功!");
                      this.paymentpage();
                    }
                  });
                })
            }else{
              this.salesDialogVisible = true;
               this.$nextTick(()=>{
                this.$refs.salesTransfer.salesTranfer(val.data)
              })
             }

          }
        },
// 行 预览
    async rowSee(row){
        if(!row.openReportId){
            this.$message.warning("请去详情选择格式!");
            return false
        }
        let params={
            linkId:row.tranPaymentId,
            openReportId:row.openReportId,
            type:"I"
        }
        let location= await getReportUrlByType(params);
        if(location.code==0){
            this.dialogVisible=true;
            this.totalUrl = location.data
        }
    },
// 保存列宽度
        headerDragend(newWidth, oldWidth, column, event) {
            const { property } = column
            this.columnsList.forEach(r => {
                if (property === r.columns) {
                r.columWidth = newWidth
                }
            })
            this.getAddTableList()
        },
         // 保存定制
        getAddTableList() {
            getAddTableList(this.columnsList, this.tablePath).then((res) => {
            });
        },
        resetAll() {
            this.columnsList = deepClone(this.columnsList_copy)
        },
　　
//查询自定义列数据
         getQuery() {
          let params = {
              tablePath: this.tablePath,
            }

        getTableList(params).then((res) => {
            const { code, data } = res
            if (code === 0 && data && data.length > 0) {
              let arr = []

              data.forEach(r => {
                this.columnsList_copy.forEach((r1, i1) => {
                  if (r1.columns === r.columns) {
                    const { columShow, columWidth, ...rest } = r
                    arr.push({...rest, ...r1, columShow, columWidth})
                  }
                })
              })

              // 判断是否有新加的field
              this.columnsList_copy.forEach((r1, i1) => {
                if (!data.some(r => r1.columns === r.columns)) {
                  arr.push(r1)
                }
              })

              this.$nextTick(() => {
                this.columnsList = arr
              })
            } else {
              this.columnsList = deepClone(this.columnsList_copy)
            }
          });
        },
============================================================================================================================================
BaseCustomColumns ：
<template>
  <BaseDialog
    :title="title"
    :visible="visible2"
    width="970px"
    :slotFooter="true"
    @close="close"
    @submit="submit"
  >
    <div class="content cc">
      <div class="cc-top">
        <draggable
          :list="showColumns"
          class="list-group group1"
          ghost-class="ghost"
          chosenClass="chosenClass"
          :group="{name: 'group', pull: true, put: true}"
          @start="dragging = true"
          @end="dragging = false"
        >
          <div class="cc-item" :class="item.showType == 1 ? 'col1' : 'col2'" v-for="(item, index) in showColumns" :key="item.labels">
            <p class="cc-field" title="可拖动进行顺序调整">{{ item.labels }}</p>
            <i class="el-icon-close cc-icon" title="隐藏" @click="showField(index, 1)"></i>
          </div>
        </draggable>
      </div>

      <el-divider>拖至上方显示，拖至下方不显示</el-divider>

      <div class="cc-bottem">
        <draggable
          :list="hiddenColumns"
          class="list-group group2"
          ghost-class="ghost"
          :group="{name: 'group', pull: true, put: true}"
          @start="dragging = true"
          @end="dragging = false"
          :move="onMove"
        >
          <div class="cc-item" :class="item.showType == 2 ? 'col2' : 'col1'" v-for="(item, index) in hiddenColumns" :key="item.labels">
            <p class="cc-field" title="可拖动至上方">{{ item.labels }}</p>
            <i class="el-icon-plus cc-icon" title="显示" @click="showField(index, 2)"></i>
          </div>
        </draggable>
      </div>
    </div>

    <template v-slot:slotFooter>
      <div class="footer">
        <el-button @click="close" title="关闭弹窗">取 消</el-button>
        <el-button type="primary" plain @click="reset" title="重置当前变更">重 置</el-button>
        <el-button type="primary" @click="submit" :loading="loading" title="保存才能生效喔">保 存</el-button>

        <div class="other-footer">
          <el-link :underline="false" type="primary" title="列表回到初始状态" @click="resetAll" style="margin-right: 14px;">还原定制</el-link>
          <el-link :underline="false" type="primary" title="显示全部字段" @click="addAll">添加全部</el-link>
        </div>
      </div>
    </template>
  </BaseDialog>
</template>

<script>
// 公用的定制栏目
import BaseDialog from '@/components/BaseDialog/index.vue'
import draggable from 'vuedraggable'
import { deepClone } from '@/utils';
import { getAddTableList, getDeleteTable } from "@/api/fileManagement/routeCode";

export default {
  props: {
    visible: false,
    title: {
      type: String,
      default: () => '定制栏目'
    },
    columns: {
      type: Array,
      default: () => [],
    },
    columns_copy: {
      type: Array,
      default: () => [],
    },
    tablePath: ''
  },
  data() {
    return {
      visible2: this.visible,
      saveColumns: [],
      showColumns: [],
      hiddenColumns: [],
      loading: false
    };
  },
  components: {BaseDialog, draggable},
  watch: {
    columns: function() {
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.saveColumns = deepClone(this.columns)
      this.showColumns = []
      this.hiddenColumns = []

      let arr2 = []
      this.saveColumns.forEach(r => {
        const row = deepClone(r)

        const copy_row = this.columns_copy.find(r1 => r1.columns === r.columns)
        if (copy_row) {
          row.showType = copy_row.columShow == 'true' ? 1 : 2
        }

        if (row.columShow == 'true') {
          this.showColumns.push(row)
        } else {
          arr2.push(row)
        }
      })

      let arr = [], arr1 = []
      arr2.forEach((r, i) => {
        if (r.showType == 1) {
          arr.push(r)
        } else {
          arr1.push(r)
        }
      })

      this.hiddenColumns = [...arr, ...arr1]
    },
    close() {
      this.visible2 = false
      this.$emit('close')
    },
    // 保存
    submit() {
      // 设置状态
      this.changeColumShow()

      const list = [...this.showColumns, ...this.hiddenColumns], arr = []
      list.forEach(r => {
        if (r.children && r.children.length) {
          r.children.forEach(r1 => {
            const { prop, columns,  minWidth, columWidth, label, labels } = r1
            arr.push({columns: prop || columns, columWidth: minWidth || columWidth, columSort: '1', columShow: 'hidden', labels: label || labels})
          })
        }
      })
      getAddTableList(arr.concat(list), this.tablePath).then((res) => {
        const {code} = res
        if (code === 0) {
          this.$message.success("定制成功!");
          this.close()
          this.$emit('update:columns', list)
          this.$emit('submit')
        }
      });
    },
    addAll() {
      this.showColumns.push(...this.hiddenColumns)
      this.hiddenColumns = []
    },
    reset() {
      this.init()
    },
    // 还原所有
    resetAll() {
      this.$confirm("此操作将还原定制,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          getDeleteTable(this.tablePath).then((res) => {
            const {code} = res
            if (code == 0) {
              this.$message.success("还原成功!");
              this.$emit('resetAll')
              this.close()
            }
          });
        })
        .catch((err) => {
        });
    },
    showField(i, type) {
      const name = type === 1 ? 'showColumns':'hiddenColumns'
      const row = this[name][i]
      this[type === 1 ? 'hiddenColumns':'showColumns'][type === 1 ? 'unshift':'push']({...row})
      this[name].splice(i, 1)
    },
    onMove(e) {
      if (e.to.className.includes('group2')) return false;
      return true
    },
    changeColumShow() {
      this.showColumns.forEach(r => r.columShow = 'true')
      this.hiddenColumns.forEach(r => r.columShow = 'false')
    }
  },
};
</script>

<style scoped lang="scss">
.content {
  padding: 0 5px 10px;
  text-align: left;
}
.cc {
  min-height: 320px;
  .list-group {
    display: flex;
    flex-wrap: wrap;
  }
  .cc-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    border-radius: 4px;
    overflow: hidden;
    &:hover {
      background-color: var(--current-color);
      color: #fff;
    }
    .cc-field {
      padding: 6px 0px 6px 12px;
      cursor: grab;
      margin: 0;
    }
    .cc-icon {
      padding: 6px 6px 6px 6px;
      cursor: pointer;
    }
  }
  .cc-item  {
    margin: 0 16px 16px 0;
  }

  .col1 {
    color: #000;
    background-color: #F1EFF3;
    &:hover {
      .cc-icon {
        color: #fff;
      }
    }
    .cc-icon {
      color: #4b4b4b;
    }
  }
  .col2 {
    border: 1px solid var(--current-color);
    color: var(--current-color);
    background-color: var(--current-BGColor, #eef3ff);
    .cc-field {
      padding: 5px 0px 5px 12px;
    }
    .cc-icon {
      padding: 5px 5px 5px 6px;
    }
  }
}
.footer {
  text-align: center;
  display: block;
  // padding: 0px 20px 20px;
  position: relative;
  .other-footer {
    position: absolute;
    right: 20px;
    top: 2px;
  }
}

.chosenClass {
  //
}

::v-deep .el-divider {
  margin-bottom: 40px;
}
::v-deep .el-divider__text {
  color: #ccc;
}
</style>
 
分列  引用到的插件数据：
import BaseDialog from '@/components/BaseDialog/index.vue'
import draggable from 'vuedraggable'
import { deepClone } from '@/utils';
import { getAddTableList, getDeleteTable } from "@/api/fileManagement/routeCode";
=============================================================================================================
BaseDialog ：
<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :before-close="handleClose"
    :append-to-body="true"
    :close-on-click-modal="false"
    :destroy-on-close="destroyOnClose"
    :modal="modal"
    :show-close="showClose"
    v-dialogDrag="drag"
    ref="dialogRef"
  >
    <div class="center-box">
      <slot></slot>
    </div>

    <template v-if="slotFooter">
      <slot slot="footer" name="slotFooter"></slot>
    </template>
    <template v-else>
      <span slot="footer" class="dialog-footer" v-if="!hiddenFooter">
        <el-button @click="handleClose" v-if="showCancel">{{ cancelText }}</el-button>
        <el-button type="primary" @click="submit" :loading="loading" v-if="showConfirm" :disabled="confirmDisabled">{{ confirmText }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>

export default {
  props: {
    visible: false,
    title: '',
    width: '',
    // 是否隐藏footer
    hiddenFooter: {
      type: Boolean,
      default: false
    },
    destroyOnClose: {
      type: Boolean,
      default: true
    },
    // 确定后的loading状态
    loading: false,
    // 插槽footer，为true得自己配置footer， name为slotFooter
    slotFooter: false,
    // 是否显示确认
    showConfirm: {
      type: Boolean,
      default: true
    },
    // 是否显示取消
    showCancel: {
      type: Boolean,
      default: true
    },
    // 是否显示遮罩层
    modal: {
      type: Boolean,
      default: false
    },
    // 是否显示右上角x
    showClose: {
      type: Boolean,
      default: true
    },
    // 默认的取消按钮文本
    cancelText: {
      type: String,
      default: '取 消'
    },
    // 默认的确定按钮文本
    confirmText: {
      type: String,
      default: '确 定'
    },
    // 是否拖拽
    drag: {
      type: Boolean,
      default: true
    },
    // 确定按钮是否禁用
    confirmDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    };
  },
  created(){
  },
  beforeDestroy() {
    this.destory()
  },
  deactivated() {
    this.destory()
  },
  methods: {
    handleClose() {
      this.$emit("close");
    },
    submit() {
      this.$emit("submit");
    },
    destory() {
      // 没有no-close类名，才执行关闭事件
      if (!this.$refs.dialogRef.$el.classList.contains('no-close')) this.handleClose()
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__footer {
  text-align: center;
  clear: both;
}
</style>
=============================================================================================
draggable：
declare module 'vuedraggable' {
  import Vue, { VueConstructor } from 'vue';

  type CombinedVueInstance<
    Instance extends Vue,
    Data,
    Methods,
    Computed,
    Props
  > = Data & Methods & Computed & Props & Instance;

  type ExtendedVue<
    Instance extends Vue,
    Data,
    Methods,
    Computed,
    Props
  > = VueConstructor<
    CombinedVueInstance<Instance, Data, Methods, Computed, Props> & Vue
  >;

  export type DraggedContext<T> = {
    index: number;
    futureIndex: number;
    element: T;
  };

  export type DropContext<T> = {
    index: number;
    component: Vue;
    element: T;
  };

  export type Rectangle = {
    top: number;
    right: number;
    bottom: number;
    left: number;
    width: number;
    height: number;
  };

  export type MoveEvent<T> = {
    originalEvent: DragEvent;
    dragged: Element;
    draggedContext: DraggedContext<T>;
    draggedRect: Rectangle;
    related: Element;
    relatedContext: DropContext<T>;
    relatedRect: Rectangle;
    from: Element;
    to: Element;
    willInsertAfter: boolean;
    isTrusted: boolean;
  };

  const draggable: ExtendedVue<
    Vue,
    {},
    {},
    {},
    {
      options: any;
      list: any[];
      value: any[];
      noTransitionOnDrag?: boolean;
      clone: any;
      tag?: string | null;
      move: any;
      componentData: any;
    }
  >;

  export default draggable;
}
======================================================================
deepClone ：
// 深拷贝对象
// https://github.com/JakHuang/form-generator/blob/dev/src/utils/index.js#L107
export function deepClone(obj) {
  const _toString = Object.prototype.toString

  // null, undefined, non-object, function
  if (!obj || typeof obj !== 'object') {
    return obj
  }

  // DOM Node
  if (obj.nodeType && 'cloneNode' in obj) {
    return obj.cloneNode(true)
  }

  // Date
  if (_toString.call(obj) === '[object Date]') {
    return new Date(obj.getTime())
  }

  // RegExp
  if (_toString.call(obj) === '[object RegExp]') {
    const flags = []
    if (obj.global) { flags.push('g') }
    if (obj.multiline) { flags.push('m') }
    if (obj.ignoreCase) { flags.push('i') }

    return new RegExp(obj.source, flags.join(''))
  }

  const result = Array.isArray(obj) ? [] : obj.constructor ? new obj.constructor() : {}

  for (const key in obj) {
    result[key] = deepClone(obj[key])
  }

  return result
}
==========================================================================
// 创建表格设置
export function getAddTableList(data,tablePath) {
  let base64 = encodeURIComponent(tablePath);
  return request({
    url: admin+'/sys/table/create?tablePath='+base64,
    method: 'post',
    data
  })
}
 
// 删除表格设置(还原定制)
export function getDeleteTable(data) {
  return request({
    url: admin+'/sys/table/delete',
    method: 'post',
    data
  })
}
 ==========================================================================================
 
tableList 组件页面：
<template>
    <div class="container table-box">
        <u-table
                border
                ref="multipleTable"
                :data="tableData"
                highlight-current-row
                @expand-change="handleclick"
                @selection-change="handleSelectionChange"
                :header-cell-style="{background:'#F2F6FF'}"
                :cell-class-name="tableCellStyleName"
                :row-class-name="tableRowStyleName"
                style="width: 100%"
                v-loading="fullscreenLoading"
                :max-height="centerTableHeight"
                @header-dragend="headerDragend"
                @row-dblclick="handleRowClick"
                class="tableMaxHeightClass"
                v-if="refresh"
                use-virtual
                :row-height="uTableRowHeight"
                >
                <!-- use-virtual  虚拟列表重要控件 -->
                <u-table-column
                type="selection"
                width="44"
                class-name="uIndex"
                show-overflow-tooltip
                align="center"
                fixed="left"
                >
                </u-table-column>
                <u-table-column
                label="序号"
                sortable
                type="index"
                width="44"
                align="center"
                >
                </u-table-column>

                <template v-for="(item, index) in columnsList">
                    <u-table-column
                      :key="index"
                      :min-width="item.columWidth"
                      v-if="item.columShow == 'true'"
                      :prop="item.columns"
                      :label="item.labels"
                      :formatter="item.formatter"
                      show-overflow-tooltip
                      sortable
                    >
                      <template slot-scope="scoped">
                        <template v-if="item.columns === 'applyNo'">
                            <!-- <el-link @click.native="handleOpenDetial(scoped.row.crmSalesLeadsId,scoped.row)" class="getColor" :underline="false">{{ scoped.row.leadsName}}</el-link> -->
                            <span type="primary" @click="handleApplyNo(scoped.row)" style="color:#5231FF;cursor: pointer;" class="textDecoration">{{scoped.row.applyNo}}</span>
                        </template>
                        <template v-else-if="item.columns === 'arapNo'">
                            <span type="primary" @click="handlearapNo(scoped.row)" style="color:#5231FF;cursor: pointer;" class="textDecoration">{{scoped.row.arapNo}}</span>
                        </template>
                        <template v-else-if="item.columns === 'applyAmount'">
                            <el-link :underline="false" style="float:right; font-weight: normal; white-space:nowrap; text-overflow:ellipsis;text-align: right; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis;overflow:hidden; display: inline-block;">{{scoped.row.applyAmount}}</el-link>
                        </template>
                        <template v-else-if="item.columns === 'amtStl'">
                            <el-link :underline="false" style="float:right;white-space:nowrap;font-weight: normal;text-align: right; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis;overflow:hidden; display: inline-block; width: 120px;">{{scoped.row.amtStl}}</el-link>
                        </template >
                        <template v-else-if="item.columns === 'apStatus'">
                            <span v-if="scoped.row.apStatus=='未付款'" class="warnningStatus">{{scoped.row.apStatus}}</span>
                            <span v-else class="succesStatus">{{scoped.row.apStatus}}</span>
                        </template>
                        <template v-else-if="item.columns === 'arStatus'">
                            <span v-if="scoped.row.arStatus=='未收款'" class="warnningStatus">{{scoped.row.arStatus}}</span>
                            <span v-else-if="scoped.row.arStatus=='部分收款'" class="partStatus">{{scoped.row.arStatus}}</span>
                            <span v-else class="succesStatus">{{scoped.row.arStatus}}</span>
                        </template>
                        <template v-else-if="item.columns === 'checkerStatus'">
                            <span v-if="scoped.row.checkerStatus=='未审核'" class="warnningStatus" >{{scoped.row.checkerStatus}}</span>
                            <span v-else class="succesStatus">{{scoped.row.checkerStatus}}</span>
                        </template>
                        <template v-else>
                          {{scoped.row[item.columns]}}
                        </template>
                      </template>
                    </u-table-column>
                  </template>
                  <u-table-column
                        v-if="panymentAuditInfo==1"
                        prop="name"
                        label="操作"
                        width="120"
                        align="center"
                        fixed="right"
                        >
                        <template slot-scope="{row,$index}">
                            <div style="white-space:nowrap">
                                <el-link type="primary" @click="checkStatus(row,$index)"  >审核</el-link>
                                <el-link type="primary" @click="handldeRow(row,$index)" >预览</el-link>
                                <el-link type="danger" @click="handleDelete(row,$index)" >删除</el-link>
                            </div>
                        </template>
                    </u-table-column>
                    <u-table-column
                        v-else
                        prop="name"
                        label="操作"
                        width="120"
                        align="center"
                        fixed="right">
                        <template slot-scope="{row,$index}">
                            <div style="white-space:nowrap">
                                <el-link type="primary" @click="handldeRow(row,$index)" >预览</el-link>
                                <el-link type="danger" @click="handleDelete(row,$index)" >删除</el-link>
                            </div>
                        </template>
                    </u-table-column>
                </u-table>
                <pagination class="pagination"
                    v-show="total > 0"
                    :total="total"
                    :page.sync="paramsQuery.pageNo"
                    :limit.sync="paramsQuery.pageSize"
                    @pagination="fclfeequeryPages"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                />
    </div>
</template>
<script>
import {fclfeequeryPage,fclfeequerytrend,getEditByPriceId} from "@/api/freightrates/index"
import tableConfigMixins from "@/views/mixin/tableConfigMixins";
import {queryPaymentAuditListPage,auditPayment,delPayment} from "@/api/settleAccounts/payment";
import {paymentpage} from "@/api/fileManagement/goods";
import {getReportUrlByType} from "@/api/freightrates/index";
import tableMixins from "./../receivePayment/tableMixins"
import {
  getAddTableList
} from "@/api/fileManagement/routeCode";
export default {
    props: {
      columnsList: {
        type: Array,
        default: () => []
      }
    },
    data(){
        return{
            panymentAuditInfo:"0",
            excelList:[],//勾选云加单的id集合
            fullscreenLoading: false,
            selectquato:[],
            tableData:[],
            uTableRowHeight:30,
            total: 0,
            selectInfoList:[],
            paramsQuery:{
                pageNo:1,
                pageSize:30,
                dateType: "2",
                applyNo:"",
                oldApplyNo:"",
                arapNo:"",
                apStatus:"",
                customerId:"",
                customerNameEn:"",
                nos:"",
                endDate:"",
                beginDate:"",
                auditStatus:"",
            },
            selectList:[],
            priceNameList:[],
            showtime:[],
            refresh: true,
            tablePath: '/settleAccounts/payment',
            checkIds:[],
            multipleSelection:[],
            otherHeight: 80,
        }
    },
    watch: {
      columnsList: function() {
        this.refresh = false
        this.$nextTick(() => {
          this.refresh = true
        })
      },
        tableData: function(o) {
            if (o.length) {
                this.$nextTick(() => {
                    this.uTableRowHeight = document.querySelectorAll('.uIndex')?.[1]?.getBoundingClientRect()?.height || 30
                })
            }
        },
    },
    mixins: [ tableMixins ],
    created(){
        // this.fclfeequeryPages();

        if(this.$route.name.includes('Panymentaudit')){
            this.panymentAuditInfo=1;
        }
        this.getUserPageList();
    },
    methods:{
        async getUserPageList(){
            let params={
                pageNo:this.paramsQuery.pageNo,
                pageSize:this.paramsQuery.pageSize,
            }
            this.fullscreenLoading = true;
            if(this.panymentAuditInfo==1){
                this.location = await queryPaymentAuditListPage(params);
            }else{
                this.location = await paymentpage(params);
            }
                if(this.location.code==0){
                    this.tableData = this.location.data.list;
                    this.total = this.location.data.total || 0;
                    this.fullscreenLoading = false;

            }
        },
        fclfeequeryPages(){
            this.$emit("handleParamsQuery");
        },
        async getParamsData(value){
            this.fullscreenLoading = true;
            let params = {
                pageNo:this.paramsQuery.pageNo,
                pageSize:this.paramsQuery.pageSize,
                dateType: this.paramsQuery.dateType||value.dateType?value.dateType:"",
                applyNo:this.paramsQuery.applyNo||value.applyNo?value.applyNo:"",
                oldApplyNo:this.paramsQuery.oldApplyNo||value.oldApplyNo?value.oldApplyNo:"",
                arapNo:this.paramsQuery.arapNo||value.arapNo?value.arapNo:"",
                apStatus:this.paramsQuery.apStatus||(value.apStatus>0 ||value.apStatus ==0)?value.apStatus:"",
                customerId:this.paramsQuery.customerId||value.customerId?value.customerId:"",
                customerNameEn:this.paramsQuery.customerNameEn||value.customerNameEn?value.customerNameEn:"",
                nos:this.paramsQuery.nos||value.nos?value.nos:"",
                endDate:this.paramsQuery.endDate||value.selectValue?value.selectValue[1]:"",
                beginDate:this.paramsQuery.beginDate||value.selectValue?value.selectValue[0]:"",
                auditStatus:this.paramsQuery.auditStatus||(value.auditStatus>0 ||value.auditStatus ==0)?value.auditStatus:"",
            }
            if(this.panymentAuditInfo==1){
                this.location = await queryPaymentAuditListPage(params);
            }else{
                this.location = await paymentpage(params);
            }
            if( this.location.code==0){
                this.tableData =  this.location.data.list;
                this.total =  this.location.data.total || 0;
                this.fullscreenLoading = false;
            }
        },
        // 获取表格页码
        pageInfo(){
            let params={
                pageNo:this.paramsQuery.pageNo,
                pageSize:this.paramsQuery.pageSize
            }
            this.$emit("handleaPage",params);
        },
        handleclick(){

        },
        // 勾选
        async handleSelectionChange(val){
            this.multipleSelection = val;
            this.selectquato = val.map((item)=>item.tranPaymentId);
            this.selectInfoList=val;
            let params={
                ids:this.selectquato,
                list:this.selectInfoList
            }
            this.$emit("handleSelect",params);
        },
        // 样式
        tableCellStyleName(row, column, rowIndex, columnIndex){
        },
        tableRowStyleName(row){
            if(this.multipleSelection){
                const list=  this.multipleSelection.find(item => item.tranPaymentId == row.row.tranPaymentId)
                if(list){
                    return "select-row"
                }
            }
                // const isSelect = this.selectList.some(r => r === row.row.crmSalesLeadsId)
                // let otherClass = ''
                // if (isSelect) otherClass = 'select-row'

                // if(row.row.less ==false){
                //     return "rowStyleName " + otherClass;
                // } else {
                //   return otherClass
                // }
        },
        refashTableData(){
            this.fclfeequeryPages();
        },

        handlePageChange(currentPage) {
            this.paramsQuery.pageNo = currentPage;
            // 在此刷新数据
            },
        handleSizeChange(pageSize) {
            this.paramsQuery.pageSize = pageSize;
            // 在此刷新数据
        },
        async searchData(e){
            let location = await  fclfeequeryPage(e);
            if(location.code==0){
                this.tableData = location.data.list;
                this.total = location.data.total || 0;
            }
        },
        async resetData(e){
            let location = await  fclfeequeryPage(e);
            if(location.code==0){
                this.tableData = location.data.list;
                this.total = location.data.total || 0;
            }
        },
        // 保存列宽度
        headerDragend(newWidth, oldWidth, column, event) {
            const { property } = column
            this.columnsList.forEach(r => {
                if (property === r.columns) {
                r.columWidth = newWidth
                }
            })
            this.getAddTableList()
        },
        // 保存定制
        getAddTableList() {
            getAddTableList(this.columnsList, this.tablePath).then((res) => {
            });
        },
        resetAll() {
            this.columnsList = deepClone(this.columnsList_copy)
        },
        // 转移按钮获取勾选数据
        selectTableList(val){
            let params={
                val:val,
                data:this.selectquato,

            }
            this.$emit("handleSelectListId",params)
        },
        // 点击表格 付款申请单号
        handleApplyNo(row){
            if(this.$route.name.includes('Panymentaudit')){
                this.$router.push({
                    path:`/settleAccounts/paymentDetial/${row.applyNo}`,
                    query: {
                        tranPaymentId:row.tranPaymentId,
                        applyNo:row.applyNo,
                        editType:"edit",

                    }
                })
           }else{
                this.$router.push({
                    path:`/settleAccounts/paymentDetial/${row.applyNo}`,
                    query: {
                        tranPaymentId:row.tranPaymentId,
                        editType:"edit",
                        showInfo:true,
                        from:"free"
                        // paymentCorpName:row.nameCn,
                        // paymentCorpId:row.paymentCorpId,

                    }
                })
           }
        },
        // 行双击
        handleRowClick(row){
            this.$router.push({
                path:`/settleAccounts/paymentDetial/${row.applyNo}`,
                query: {
                    tranPaymentId:row.tranPaymentId,
                    editType: 'edit',
                    showInfo:true,
                    from:"free"
                    // paymentCorpName:row.nameCn,
                    // paymentCorpId:row.paymentCorpId
                }
            })
        },
        handlearapNo(e){
          this.$router.push({
              path:`/settleAccounts/receivePaymentDetail/${e.arapNo}`,
              query: {
                tranCollectionPaymentId:e.tranCollectionPaymentId,
                customerName:e.clientName,
                type:"edit",
                customerId:e.clientId
              }
          })
        },
        // 行付款申请
        checkStatus(row){
            this.checkIds=[];
            this.checkIds.push(row.tranPaymentId);
            if(row.auditStatus==1){
                this.$message.warning("付款申请已审核成功!");
                return false
            }
            let params={
                auditStatus:1,
                paymentIds: this.checkIds
            }
            // this.handleChecked = true;
            auditPayment(params).then((location)=>{
                if(location.code==0){
                    this.$message.success("付款申请审核成功!");
                    this.fclfeequeryPages();
                }
            }).catch((err)=>{
            });;

        },
            // 行 预览
        async handldeRow(row){
            if(!row.openReportId){
                this.$message.warning("请去详情选择格式!");
                return false
            }
            this.$emit("handleRowSee", row);
        },
        // 行删除
        handleDelete(row){
            this.$confirm('删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            let params={
                ids:row.tranPaymentId,
            }
            this.$confirm('确认删除？')
                .then(_ => {
                    delPayment(params).then((res)=>{
                        if(res.code==0){
                            this.$message.success("删除成功!");
                            this.fclfeequeryPages();
                        }
                    });
                }).catch(_ => {

            })
        },
    }
}
</script>
<style scoped lang="scss">
    .getColor{
        color:#5231FF !important;
        font-weight: normal;
        &:hover{
           text-decoration: underline #5231FF;
        }
    }
    .container{width: 100% !important; margin: auto 0 !important;
    }
    .tableMaxHeightClass{ margin-bottom: 19px;
        ::v-deep .uIndex{
            .el-tooltip{
                width: 44px !important;
                min-width: 44px !important;
            }
        }
    }
::v-deep .pagination-container .el-pagination {
  bottom: -1px;
  right: 19px;
}
::v-deep .el-table--medium .el-table__cell{
    padding: 0;
}
.list{
    ::v-deep .iconfont{
        font-size: 24px;
    }
    ::v-deep .icon-tubiao{
        color:#6288FF;
    }
}
::v-deep .el-tooltip{
    p{padding: 0; margin: 0;}
}
::v-deep .baseprice{ background-color: #ff5400 !important;}
::v-deep .el-dialog__header{
            padding:20px 0px 10px 0px;
            border-bottom:1px solid #C3D1FF;
            margin: 0 20px;
        }
::v-deep .rowStyleName{
    td{
      div{
        color:#ccc !important;
      }
      &:nth-of-type(1){
        div{
            color: #000 !important;
        }
      }
      &:nth-of-type(2){
        div{
            color: #000 !important;
        }
      }
    }

}
::v-deep .cellStyleName{background:#F3FFFE;}
::v-deep .cellStyleTotalName{  background:#FFF3F3;}
::v-deep .succesStatus{color: #65A304;}
::v-deep .warnningStatus {color: #F20000;}
::v-deep .partStatus{color: #F9B548 ;}

::v-deep .selectRowName{ background-color: var(--current-BGColor2 ) !important;}
</style>
================================================================================
 tableMixins.js 页面
import { debounce } from 'throttle-debounce'
export default {
  data() {
    return {
      centerTableHeight: '400',
      otherHeight: 0
    };
  },
  created() {
  },
  mounted() {
    this.setTableHeight()

    window.onresize = debounce(200, () => {
      this.setTableHeight()
    })
  },
  methods: {
    setTableHeight() {

      this.$nextTick(() => {
        setTimeout(() => {
          if (document.querySelector('.settleAccounts-warp .table-box .el-table')) {
            const { height: bodyH } = document.body.getBoundingClientRect()
            const { height: navH } = document.querySelector('.nav-wrapper').getBoundingClientRect()
            const { height: centerSearchH } = document.querySelector('.settleAccounts-warp .footerTable .search-box')?.getBoundingClientRect() || {}
            const { height: centerPaginationH } = document.querySelector('.settleAccounts-warp .footerTable .pagination')?.getBoundingClientRect() || {}
            const { height: topH } = document.querySelector('.settleAccounts-warp .collapse')?.getBoundingClientRect() || {}

            // 实际能使用的总高度
            const mainH = bodyH - navH - 20/*每模块的margin总和*/ - (topH || 361)/*top模块的固定高度*/ - (centerSearchH + centerPaginationH + 40)/*center模块的固定高度*/ - this.otherHeight/*其他高度*/

            // center的table高度 最小高度200
            const footerH = mainH < 200 ? 200 : mainH
            document.querySelector('.settleAccounts-warp .table-box .el-table').style.maxHeight = `${footerH}px`
            this.centerTableHeight = footerH
          }
        },500)
      })
    }
  },
};