|
@@ -57,14 +57,14 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 数据表格 -->
|
|
|
- <el-table :data="flattenedData" border style="width: 100%; margin-top: 20px" :span-method="mergeRows">
|
|
|
+ <el-table :data="flattenedData" ref="myTable" border style="width: 100%; margin-top: 20px" :span-method="mergeRows" @sort-change="sortChangeHandle">
|
|
|
<!-- DataType 作为合并行 -->
|
|
|
<el-table-column prop="DataType" label="" align="center" width="120px" />
|
|
|
|
|
|
<!-- 销售姓名 -->
|
|
|
<el-table-column prop="SellerName" label="销售姓名" align="center" width="150px" />
|
|
|
|
|
|
- <el-table-column v-for="col in dynamicColumns" :key="col.key" :prop="col.key" align="center">
|
|
|
+ <el-table-column v-for="col in dynamicColumns" :key="col.key" :prop="col.key" align="center" :sortable="showSortable">
|
|
|
<template slot="header" slot-scope="{ row }">
|
|
|
<el-tooltip :content="col.tooltip" placement="top">
|
|
|
<div style="display: inline-flex; align-items: center">
|
|
@@ -128,6 +128,8 @@ export default {
|
|
|
serviceGroupSwitch: false, //服务组开关
|
|
|
dataItem: {}, //数据项
|
|
|
timeSelection: [], //时间选择器的值
|
|
|
+ sortParam: "", //用来排序的字段
|
|
|
+ sortType: "", //正序还是倒序
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -164,6 +166,8 @@ export default {
|
|
|
ServerButton: this.serviceGroupSwitch,
|
|
|
StartDate: this.timeSelection && this.timeSelection.length ? this.timeSelection[0] : "",
|
|
|
EndDate: this.timeSelection && this.timeSelection.length ? this.timeSelection[1] : "",
|
|
|
+ SortType: this.sortType,
|
|
|
+ SortParam: this.sortParam,
|
|
|
};
|
|
|
const res = await dataMainInterface.getRaiDataSummary(params);
|
|
|
this.tableData = res.Data.List;
|
|
@@ -225,8 +229,26 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
salesChangeHandedl() {
|
|
|
+ this.handleSwitchChange();
|
|
|
this.getDataList();
|
|
|
},
|
|
|
+ // 表格排序方式改变
|
|
|
+ sortChangeHandle({ column, prop, order }) {
|
|
|
+ const sortOrderMap = {
|
|
|
+ ascending: "asc",
|
|
|
+ descending: "desc",
|
|
|
+ null: "",
|
|
|
+ };
|
|
|
+ const sortOrder = sortOrderMap[order];
|
|
|
+ this.sortParam = prop; //用来排序的字段
|
|
|
+ this.sortType = sortOrder; //正序还是倒序
|
|
|
+ this.getDataList();
|
|
|
+ },
|
|
|
+ handleSwitchChange() {
|
|
|
+ this.$refs.myTable.clearSort();
|
|
|
+ this.sortParam = ""; //用来排序的字段
|
|
|
+ this.sortType = ""; //正序还是倒序
|
|
|
+ },
|
|
|
},
|
|
|
computed: {
|
|
|
// 计算动态表头
|
|
@@ -280,6 +302,10 @@ export default {
|
|
|
};
|
|
|
return useName == "梁春悦6" ? { 续约: obj.续约 } : obj;
|
|
|
},
|
|
|
+ // 是否可以显示排序
|
|
|
+ showSortable() {
|
|
|
+ return this.pathfinderSwitch !== this.serviceGroupSwitch ? "custom" : false;
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getDataList();
|