<!--
|
* @Author: zxq
|
* @Date: 2021-09-13 17:29:07
|
* @LastEditTime: 2023-08-31 17:14:36
|
* @LastEditors: zhaoxiaoqiang 287285524@qq.com
|
* @Description: In User Settings Edit
|
* @FilePath: \qyp_finlean_plat\src\components\table.vue
|
-->
|
<template>
|
<div class="table_page">
|
<div class="operate_btn">
|
<el-button
|
v-for="btn in buttonsAction"
|
:key="btn.id"
|
:type="btn.type"
|
:size="btn.size"
|
:icon="btn.icon"
|
:style="btn.style"
|
@click="operateDo(btn)"
|
>{{ btn.label }}</el-button
|
>
|
</div>
|
<el-table
|
:cell-class-name="cellClassName"
|
:data="tableData"
|
:highlight-current-row="highlightCurrentRow"
|
ref="multipleTable"
|
@cell-mouse-leave="leave"
|
@selection-change="handleSelectionChange"
|
@cell-mouse-enter="handleMouseEnter"
|
@select-all="selectAll"
|
@cell-click="cellClick"
|
@select="select"
|
:row-key="getRowKey"
|
>
|
<el-table-column
|
v-if="hasSelection"
|
type="selection"
|
:border="border"
|
:reserve-selection="true"
|
:selectable="selectHandle"
|
width="50"
|
></el-table-column>
|
<el-table-column
|
v-if="hasIndex"
|
type="index"
|
label="序号"
|
:border="border"
|
:selectable="selectHandle"
|
width="50"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.$index + 1 }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-for="(item, index) in tableColumns"
|
:key="item.index"
|
:label="item.lable"
|
:prop="item.prop"
|
:align="item.align"
|
:width="item.width"
|
:fixed="item.fixed"
|
>
|
<template slot-scope="scope">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
:content="tooltipContent"
|
placement="top-start"
|
:ref="'tooltip' + scope.row.countDay"
|
manual
|
>
|
<template v-if="!item.render">
|
<span
|
v-if="item.formatter"
|
v-html="item.formatter(scope.row)"
|
></span>
|
<template v-else>
|
<span>{{ scope.row[item.prop] }}</span>
|
</template>
|
</template>
|
<template v-else>
|
<expand-dom
|
:column="item"
|
:row="scope.row"
|
:render="item.render"
|
:index="index"
|
></expand-dom>
|
</template>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<!--region 按钮操作组(waiting....)-->
|
<el-table-column
|
ref="fixedColumn"
|
label="操作"
|
align="center"
|
:width="operates.width"
|
:fixed="operates.fixed"
|
v-if="operates.list.filter((_x) => _x.show === true).length > 0"
|
>
|
<template slot-scope="scope">
|
<div class="operate-group">
|
<template v-for="(btn, key) in operates.list">
|
<div class="item" v-if="btn.show" :key="btn.id">
|
<el-button
|
:type="btn.type"
|
size="mini"
|
:icon="btn.icon"
|
:disabled="btn.disabled"
|
:plain="btn.plain"
|
@click.native.prevent="btn.method(key, scope.row)"
|
>{{ btn.label }}
|
</el-button>
|
</div>
|
</template>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="page_export">
|
<div>
|
<span v-if="hasPagination">共 {{ totals }} 条</span>
|
<el-button
|
type="text"
|
v-if="exportUrl.url && filterBtnById(exportUrl.powerId)"
|
:disabled="tableData.length == 0"
|
:loading="exportLoading"
|
@click="exportFile(1)"
|
>全部导出</el-button
|
>
|
<el-button
|
v-if="exportOrderUrl.visible"
|
type="text"
|
:disabled="tableData.length == 0"
|
:loading="exportOrderLoading"
|
@click="exportFile(2)"
|
>导出订单明细</el-button
|
>
|
</div>
|
<div v-if="hasPagination" class="margT" style="margin-top: 20px">
|
<el-pagination
|
:background="ebackground"
|
@current-change="pageChange"
|
@size-change="sizeChange"
|
layout="sizes,prev, pager, next, jumper"
|
:page-sizes="[100, 15, 10,5]"
|
:page-size="queryData.rows"
|
:total="totals"
|
:current-page.sync="queryData.page"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
/*
|
columns:render 需要操作
|
columns:formatter 需要格式化代码，
|
操作可以使用 operates 也可以使用columns render函数
|
*/
|
import listApi from "../api/listapi";
|
import downloadUrl from "@/utils/excelDownLoadConfig";
|
import request from "@/utils/request";
|
import { join } from "path";
|
export default {
|
name: "ETable",
|
props: {
|
// 请求方法字符串
|
httpUrl: {
|
require: true,
|
type: String,
|
default: "",
|
},
|
// 是否选择框
|
hasSelection: {
|
type: Boolean,
|
default: false,
|
},
|
// 是否展示分页
|
hasPagination: {
|
type: Boolean,
|
default: true,
|
},
|
isHttp: {
|
type: Boolean,
|
default: true,
|
},
|
// 不请求接口表格数据
|
defaulTableData: {
|
require: true,
|
type: Array,
|
default: () => {
|
return [];
|
},
|
},
|
// 表头
|
columns: {
|
require: true,
|
type: Array,
|
default: () => {
|
return [];
|
},
|
},
|
// 搜索字段
|
searchData: {
|
type: Object,
|
default: () => {
|
return {};
|
},
|
},
|
// 操作按钮
|
operates: {
|
type: Object,
|
default: () => {
|
return {
|
list: [],
|
};
|
},
|
}, // 操作按钮组 === label: 文本，type :类型（primary / success / warning / danger / info / text），show：是否显示，icon：按钮图标，plain：是否朴素按钮，disabled：是否禁用，method：回调方法
|
ebackground: {
|
type: Boolean,
|
default: true,
|
},
|
buttonsAction: {
|
type: Array,
|
default: () => {
|
return [];
|
},
|
},
|
// 是否有边框
|
border: {
|
type: Boolean,
|
default: false,
|
},
|
// 高亮斑马紋
|
highlightCurrentRow: {
|
type: Boolean,
|
default: false,
|
},
|
nameUrl: {
|
require: true,
|
type: String,
|
default: "",
|
},
|
// 导出路径
|
exportUrl: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
//订单明细 导出路径
|
exportOrderUrl: {
|
type: Object,
|
default: () => {
|
return {};
|
},
|
|
},
|
// 是否可以勾选
|
disableSelectionObj: {
|
type: Object,
|
default: () => {
|
return {};
|
},
|
},
|
// 是否显示序号
|
hasIndex: {
|
type: Boolean,
|
default: false,
|
},
|
isCheckAll: {
|
type: Boolean,
|
default: false,
|
},
|
excludeList: {
|
type: Array, //多选已取消的数据
|
default: () => [],
|
},
|
checkedList: {
|
type: Array, //已选中的数据
|
default: () => [],
|
},
|
isFind: {
|
//进入是否执行查询
|
type: Boolean,
|
default: true,
|
},
|
IncludcChildren: {
|
type: Boolean,
|
default: false,
|
},
|
itemsArr:{
|
type:String,
|
default:'items'
|
},
|
rowKey:{
|
type:String,
|
default:'id'
|
}
|
},
|
components: {
|
expandDom: {
|
functional: true,
|
props: {
|
row: Object,
|
render: Function,
|
index: Number,
|
column: {
|
type: Object,
|
default: null,
|
},
|
},
|
render: (h, ctx) => {
|
const params = {
|
row: ctx.props.row,
|
index: ctx.props.index,
|
};
|
if (ctx.props.column) params.column = ctx.props.column;
|
return ctx.props.render(h, params);
|
},
|
},
|
},
|
data() {
|
return {
|
queryData: {
|
page: 1,
|
rows: 10,
|
},
|
totals: 0,
|
tableData: [],
|
postUrl: "",
|
exportLoading: false,
|
tableColumns: [],
|
tooltipContent: "",
|
Istooltip: false,
|
exportOrderLoading:false
|
};
|
},
|
watch: {
|
searchData: {
|
handler: function (val, oldVal) {
|
if (this.IncludcChildren) {
|
// console.log(JSON.stringify(val))
|
if (JSON.stringify(val) != "{}") {
|
this.getData();
|
} else {
|
this.tableData = [];
|
}
|
} else {
|
this.getData();
|
}
|
},
|
deep: true, //true 深度监听
|
},
|
isCheckAll: {
|
// 当前的是否全部勾选
|
handler: function (val) {
|
if (val) {
|
this.tableData.forEach((row) => {
|
this.$refs.multipleTable.toggleRowSelection(
|
row,
|
row.loanStatus == 2 ? false : true
|
);
|
});
|
} else {
|
this.$refs.multipleTable.clearSelection();
|
}
|
},
|
deep: true,
|
},
|
defaulTableData: {
|
handler: function (val) {
|
if (!this.isHttp) {
|
this.tableData = val;
|
}
|
},
|
deep: true,
|
},
|
excludeList: {
|
handler: function (val, oldVal) {
|
// this.getData(); this.tableColumns = this.columns
|
},
|
deep: true, //true 深度监听
|
},
|
columns: {
|
handler: function (val, oldVal) {
|
this.tableColumns = val;
|
},
|
deep: true, //true 深度监听
|
},
|
},
|
methods: {
|
getRowKey (row) {
|
return row[this.rowKey]
|
},
|
pageChange(newPage) {
|
this.queryData.page = newPage;
|
this.getData();
|
},
|
sizeChange(newSize) {
|
this.queryData.rows = newSize;
|
this.getData();
|
},
|
getData(data) {
|
let dataInfo = { ...this.searchData, ...this.queryData };
|
// if(data){
|
// dataInfo=data
|
// }else{
|
|
// }
|
// localStorage.setItem( this.httpUrl, JSON.stringify(dataInfo))
|
this.postUrl = this.httpUrl;
|
listApi[this.postUrl](dataInfo)
|
.then(({ body }) => {
|
if (this.nameUrl == "") {
|
this.tableData = body[this.itemsArr];
|
if (this.isCheckAll) {
|
let checkListb = [];
|
this.$nextTick(() => {
|
this.tableData.forEach((row) => {
|
this.excludeList.forEach((r) => {
|
if (row.id == r) {
|
checkListb.push(row);
|
}
|
});
|
// console.log(row)
|
this.$refs.multipleTable.toggleRowSelection(row, true);
|
});
|
if (checkListb.length > 0) {
|
checkListb.forEach((row) => {
|
this.$refs.multipleTable.toggleRowSelection(row, false);
|
});
|
}
|
});
|
} else {
|
if (this.checkedList.length > 0) {
|
this.checkedList.forEach((item) => {
|
let currentRow = this.tableData.find((val) => {
|
return val.id == item;
|
});
|
if (currentRow) {
|
this.$nextTick(() => {
|
this.$refs.multipleTable.toggleRowSelection(
|
currentRow,
|
true
|
);
|
});
|
}
|
});
|
}
|
}
|
|
if (this.IncludcChildren && this.tableData.length > 0) {
|
//包含子数组
|
let currentRow = this.tableData[0];
|
this.tableColumns = this.columns.slice(0, 3);
|
|
this.tableData.forEach((item, index) => {
|
var obj = {};
|
if (currentRow.mobList.length < item.mobList.length) {
|
currentRow = item;
|
}
|
item.mobList.forEach((row) => {
|
obj = Object.assign(obj, {
|
[row.mobName]: row.rate,
|
denominator: row.denominator,
|
molecule: row.molecule,
|
});
|
});
|
this.tableData[index] = Object.assign(obj, item);
|
});
|
currentRow.mobList.forEach((row) => {
|
this.tableColumns.push({
|
lable: row.mobName + "",
|
prop: row.mobName,
|
align: "center",
|
width: "250",
|
});
|
});
|
this.tableColumns = this.unique(this.tableColumns);
|
}
|
this.totals = body.total;
|
this.$emit("getDataList", body);
|
} else if (this.nameUrl == "roleGetRoleList") {
|
this.tableData = body;
|
this.totals = body.total;
|
this.$emit("getDataList", body);
|
} else {
|
this.tableData = body[this.nameUrl].items;
|
this.totals = body[this.nameUrl].total;
|
this.$emit("getDataList", body[this.nameUrl].items);
|
}
|
})
|
.catch((err) => {
|
this.tableData = [];
|
});
|
},
|
exportList(exportUrl) {
|
let objForms = JSON.parse(JSON.stringify(this.searchData));
|
let objForm = JSON.parse(JSON.stringify(this.queryData));
|
delete objForms.page;
|
delete objForms.rows;
|
delete objForm.page;
|
delete objForm.rows;
|
let data = {};
|
if (typeof (exportUrl.amtType != "undefined")) {
|
data = { ...objForms, ...objForm, amtType: exportUrl.amtType };
|
} else {
|
data = { ...objForms, ...objForm };
|
}
|
listApi[exportUrl](data).then((res) => {
|
downloadUrl.configDate2(res, this.buttonsAction[0].exportName);
|
});
|
},
|
operateDo(btn) {
|
if (btn.id == "export") {
|
this.exportList(btn.exportUrl, btn.exportName);
|
} else {
|
this.$emit("operateDo", btn);
|
}
|
},
|
cellClick(row, column, cell, event) {
|
this.$emit("cellClick", row, column, cell, event);
|
},
|
handleSelectionChange(val) {
|
// 选中的所有选项
|
// console.log(val)
|
this.$emit("handleSelectionChange", val);
|
},
|
exportFile(index) {
|
if (this.tableData.length == 0) {
|
return false;
|
}
|
let objForms = JSON.parse(JSON.stringify(this.searchData));
|
let objForm = JSON.parse(JSON.stringify(this.queryData));
|
delete objForms.page;
|
delete objForms.rows;
|
delete objForm.page;
|
delete objForm.rows;
|
let data = { ...objForms, ...objForm };
|
for(let key in data){
|
if(Array.isArray(data[key])){
|
data[key] = data[key].join(',');
|
}
|
}
|
|
if(index==1){
|
if (this.exportUrl.query) {
|
data = { ...data, ...this.exportUrl.query };
|
}
|
this.exportLoading = true;
|
request({
|
url: this.exportUrl.url,
|
method: "get",
|
params: { ...data },
|
responseType: "arraybuffer",
|
})
|
.then((res) => {
|
this.exportLoading = false;
|
downloadUrl.configDate2(res, this.exportUrl.name);
|
})
|
.catch((err) => {
|
this.exportLoading = false;
|
});
|
}else{
|
this.exportOrderLoading = true;
|
request({
|
url: this.exportOrderUrl.url,
|
method: "get",
|
params: {id:this.$route.query.id,...this.queryData},
|
responseType: "arraybuffer",
|
})
|
.then((res) => {
|
this.exportOrderLoading = false;
|
downloadUrl.configDate2(res, this.exportOrderUrl.name);
|
})
|
.catch((err) => {
|
this.exportOrderLoading = false;
|
});
|
}
|
|
},
|
selectHandle(row, rowIndex) {
|
// 通过true和false控制是否禁用，true: 不禁用，false：禁用
|
// if (row.loanStatus == 2) {
|
// return false
|
// } else {
|
|
// }
|
return true;
|
},
|
select(selection, row) {
|
// 选中的selection，当前点击的
|
this.$emit("singeSelect", selection, row);
|
},
|
selectAll(e) {
|
// 有本页选中数据则返回本页选中数据，没有则返回当前页可以选中的数据
|
let data = [];
|
if (e.length == 0) {
|
data = this.tableData
|
.map((row) => {
|
// if (row.loanStatus == 2) {
|
// return null;
|
// } else {
|
// return row.orderId;
|
// }
|
return row.id;
|
})
|
.filter((m) => m);
|
} else {
|
data = e
|
.map((row) => {
|
return row.id;
|
})
|
.filter((m) => m);
|
}
|
this.$emit("getSelectAll", data, e.length);
|
},
|
unique(arr1) {
|
const res = new Map();
|
return arr1.filter(
|
(item) => !res.has(item.prop) && res.set(item.prop, 1)
|
);
|
},
|
handleMouseEnter(row, column, cell, event) {
|
if (column.label && column.label.indexOf("MOB") >= 0) {
|
let currentRow = row.mobList.find((item) => {
|
return item.mobName == column.label;
|
});
|
if (this.searchData.amtType && this.searchData.amtType == 1) {
|
this.tooltipContent = `订单剩余未还金额${currentRow.molecule}/放款金额${currentRow.denominator}`;
|
} else {
|
this.tooltipContent = `逾期订单数${currentRow.molecule}/在贷订单数${currentRow.denominator}`;
|
}
|
this.$refs["tooltip" + row.countDay][
|
column.index - 1
|
].showPopper = true;
|
}
|
},
|
cellClassName({ row, column, rowIndex, columnIndex }) {
|
row.index = rowIndex;
|
column.index = columnIndex;
|
},
|
leave(row, column, cell) {
|
if (column.label && column.label.indexOf("MOB") >= 0) {
|
this.$refs["tooltip" + row.countDay][
|
column.index - 1
|
].showPopper = false;
|
}
|
},
|
},
|
created() {
|
this.tableColumns = this.columns;
|
if (this.isHttp && this.isFind) {
|
// const storageData = JSON.parse(localStorage.getItem( this.httpUrl))
|
// if (JSON.stringify(storageData) != 'null') {
|
// this.$emit('transfer',storageData)
|
// }
|
this.getData();
|
}
|
},
|
mounted() {
|
if (this.isHttp) {
|
this.postUrl = this.httpUrl;
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.table_page {
|
box-sizing: border-box;
|
background-color: #fff;
|
.operate_btn {
|
margin-bottom: 12px;
|
}
|
.page_export {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
> div {
|
&:first-child {
|
> span {
|
display: inline-block;
|
color: #3c8efe;
|
font-size: 14px;
|
margin-right: 20px;
|
}
|
}
|
}
|
}
|
}
|
.el-table__header-wrapper .el-checkbox__input::after {
|
// content: '本页全选';
|
// position: absolute;
|
// margin-left: 5px;
|
}
|
</style>
|
