From a680a84d91fb6501951d0265e9b347695568c546 Mon Sep 17 00:00:00 2001
From: 抓蛙师 <770492966@qq.com>
Date: 星期二, 20 九月 2022 16:41:40 +0800
Subject: [PATCH] !236 前端适配多字段排序功能案例OSS页面（重新排序需点击重置按钮，否则按照点击顺序依次排序，重复点击的字段排序位置不发生改变） * 完善前端适配多字段排序功能案例OSS页面（完善排序图标显示效果和重置效果，支持正序，倒序，取消排序） * 前端适配多字段排序功能案例OSS页面（重新排序需点击重置按钮，否则按照点击顺序依次排序，重复点击的字段排序位置不发生改变）
---
ruoyi-ui/src/views/system/oss/index.vue | 63 ++++++++++++++++++++++++++++---
1 files changed, 56 insertions(+), 7 deletions(-)
diff --git a/ruoyi-ui/src/views/system/oss/index.vue b/ruoyi-ui/src/views/system/oss/index.vue
index d304451..9f8557c 100644
--- a/ruoyi-ui/src/views/system/oss/index.vue
+++ b/ruoyi-ui/src/views/system/oss/index.vue
@@ -118,7 +118,10 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
- <el-table v-loading="loading" :data="ossList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+ <el-table v-loading="loading" :data="ossList" @selection-change="handleSelectionChange"
+ :header-cell-class-name="handleHeaderClass"
+ @header-click="handleHeaderCLick"
+ v-if="showTable">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="瀵硅薄瀛樺偍涓婚敭" align="center" prop="ossId" v-if="false"/>
<el-table-column label="鏂囦欢鍚�" align="center" prop="fileName" />
@@ -135,13 +138,15 @@
v-if="!checkFileSuffix(scope.row.fileSuffix) || !previewListResource"/>
</template>
</el-table-column>
- <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
+ <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180"
+ sortable="custom">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="涓婁紶浜�" align="center" prop="createBy" />
- <el-table-column label="鏈嶅姟鍟�" align="center" prop="service" sortable="custom" :sort-orders="['descending', 'ascending']" />
+ <el-table-column label="鏈嶅姟鍟�" align="center" prop="service"
+ sortable="custom"/>
<el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
@@ -193,6 +198,7 @@
name: "Oss",
data() {
return {
+ showTable: true,
// 鎸夐挳loading
buttonLoading: false,
// 閬僵灞�
@@ -264,6 +270,7 @@
this.ossList = response.rows;
this.total = response.total;
this.loading = false;
+ this.showTable = true;
});
},
checkFileSuffix(fileSuffix) {
@@ -291,8 +298,11 @@
},
/** 閲嶇疆鎸夐挳鎿嶄綔 */
resetQuery() {
+ this.showTable = false;
this.daterangeCreateTime = [];
this.resetForm("queryForm");
+ this.queryParams.orderByColumn = this.defaultSort.prop;
+ this.queryParams.isAsc = this.defaultSort.order;
this.handleQuery();
},
// 澶氶�夋閫変腑鏁版嵁
@@ -301,10 +311,49 @@
this.single = selection.length!==1
this.multiple = !selection.length
},
- /** 鎺掑簭瑙﹀彂浜嬩欢 */
- handleSortChange(column, prop, order) {
- this.queryParams.orderByColumn = column.prop;
- this.queryParams.isAsc = column.order;
+ // 璁剧疆鍒楃殑鎺掑簭涓烘垜浠嚜瀹氫箟鐨勬帓搴�
+ handleHeaderClass({column}) {
+ column.order = column.multiOrder
+ },
+ // 鐐瑰嚮琛ㄥご杩涜鎺掑簭
+ handleHeaderCLick(column) {
+ if (column.sortable !== 'custom') {
+ return
+ }
+ switch (column.multiOrder) {
+ case 'descending':
+ column.multiOrder = 'ascending';
+ break;
+ case 'ascending':
+ column.multiOrder = '';
+ break;
+ default:
+ column.multiOrder = 'descending';
+ break;
+ }
+ this.handleOrderChange(column.property, column.multiOrder)
+ },
+ handleOrderChange(prop, order) {
+ let orderByArr = this.queryParams.orderByColumn ? this.queryParams.orderByColumn.split(",") : [];
+ let isAscArr = this.queryParams.isAsc ? this.queryParams.isAsc.split(",") : [];
+ let propIndex = orderByArr.indexOf(prop)
+ if (propIndex !== -1) {
+ if (order) {
+ //鎺掑簭閲屽凡瀛樺湪 鍙慨鏀规帓搴�
+ isAscArr[propIndex] = order;
+ } else {
+ //濡傛灉order涓簄ull 鍒欏垹闄ゆ帓搴忓瓧娈靛拰灞炴��
+ isAscArr.splice(propIndex, 1);//鍒犻櫎鎺掑簭
+ orderByArr.splice(propIndex, 1);//鍒犻櫎灞炴��
+ }
+ } else {
+ //鎺掑簭閲屼笉瀛樺湪鍒欐柊澧炴帓搴�
+ orderByArr.push(prop);
+ isAscArr.push(order);
+ }
+ //鍚堝苟鎺掑簭
+ this.queryParams.orderByColumn = orderByArr.join(",");
+ this.queryParams.isAsc = isAscArr.join(",");
this.getList();
},
/** 浠诲姟鏃ュ織鍒楄〃鏌ヨ */
--
Gitblit v1.9.3