定制栏目 --- 关于el-table 的显示隐藏的列
<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)
})
}
},
};
