feat: 用户列表增加排序功能

backend/src/main/java/io/dataease/controller/sys/base/BaseGridRequest.java

@@ -3,6 +3,7 @@ package io.dataease.controller.sys.base;
 import io.dataease.base.mapper.ext.query.GridExample;
 import lombok.Data;
 import org.apache.commons.collections.CollectionUtils;
+import org.apache.commons.lang3.StringUtils;
 
 import java.io.Serializable;
 import java.util.List;
@@ -13,12 +14,20 @@ public class BaseGridRequest implements Serializable {
 
     private List<ConditionEntity> conditions;
 
+    private List<String> orders;
+
     public GridExample convertExample(){
         GridExample gridExample = new GridExample();
-        if (CollectionUtils.isEmpty(conditions))return gridExample;
+        if (CollectionUtils.isNotEmpty(conditions)) {
+            GridExample.Criteria criteria = gridExample.createCriteria();
+            conditions.forEach(criteria::addCondtion);
+        }
+
+        if (CollectionUtils.isNotEmpty(orders)){
+            String orderByClause = String.join(", ", orders);
+            gridExample.setOrderByClause(orderByClause);
+        }
 
-        GridExample.Criteria criteria = gridExample.createCriteria();
-        conditions.forEach(criteria::addCondtion);
         return gridExample;
     }
 }

backend/src/main/java/io/dataease/service/sys/SysUserService.java

@@ -51,16 +51,16 @@ public class SysUserService {
 
 
     public List<SysUserGridResponse> query(BaseGridRequest request) {
-        List<SysUser> sysUsers = sysUserMapper.selectByExample(new SysUserExample());
+       /* List<SysUser> sysUsers = sysUserMapper.selectByExample(new SysUserExample());
         List<SysUserGridResponse> lists = sysUsers.stream().map(ele -> {
             SysUserGridResponse response = new SysUserGridResponse();
             BeanUtils.copyBean(response, ele);
             return response;
-        }).collect(Collectors.toList());
+        }).collect(Collectors.toList());*/
         GridExample gridExample = request.convertExample();
-        List<SysUserGridResponse> query = extSysUserMapper.query(gridExample);
+        List<SysUserGridResponse> lists = extSysUserMapper.query(gridExample);
         lists.forEach(item -> {
-            for (SysUserGridResponse response : query) {
+            /*for (SysUserGridResponse response : query) {
                 if (item.getUserId().equals(response.getUserId())) {
                     item.setId(response.getId());
                     List<SysUserRole> roles = response.getRoles();
@@ -69,10 +69,10 @@ public class SysUserService {
                     item.setRoleIds(roleIds);
                     item.setDept(response.getDept());
                 }
-            }
-//            List<SysUserRole> roles = item.getRoles();
-//            List<Long> roleIds = roles.stream().map(SysUserRole::getRoleId).collect(Collectors.toList());
-//            item.setRoleIds(roleIds);
+            }*/
+            List<SysUserRole> roles = item.getRoles();
+            List<Long> roleIds = roles.stream().map(SysUserRole::getRoleId).collect(Collectors.toList());
+            item.setRoleIds(roleIds);
         });
         return lists;
     }

frontend/src/utils/index.js

@@ -221,6 +221,35 @@ export function formatCondition(param) {
   }
   return result
 }
+/**
+ * 驼峰转下划线
+ * @param {*} name
+ * @returns
+ */
+export function toLine(name) {
+  return name.replace(/([A-Z])/g, '_$1').toLowerCase()
+}
+export function addOrder(order, orders) {
+  order.field = toLine(order.field)
+  if (order.value.startsWith('desc')) {
+    order.value = 'desc'
+  } else {
+    order.value = 'asc'
+  }
+  orders = orders || []
+  for (let index = 0; index < orders.length; index++) {
+    const element = orders[index]
+    if (order.field === element.field) {
+      orders[index] = order
+      return
+    }
+  }
+  orders.push(order)
+}
+
+export function formatOrders(orders) {
+  return orders.map(order => order.field + ' ' + order.value)
+}
 
 export function formatQuickCondition(param, quickField) {
   let quickObj = null

frontend/src/views/system/user/index.vue

@@ -8,6 +8,7 @@
       :pagination-config="paginationConfig"
       @select="select"
       @search="search"
+      @sort-change="sortChange"
     >
       <template #toolbar>
         <el-button v-permission="['user:add']" icon="el-icon-circle-plus-outline" @click="create">{{ $t('user.create') }}</el-button>
@@ -15,12 +16,12 @@
       </template>
 
       <el-table-column prop="username" label="ID" />
-      <el-table-column prop="nickName" :label="$t('commons.nick_name')" />
+      <el-table-column prop="nickName" sortable="custom" :label="$t('commons.nick_name')" />
       <el-table-column prop="gender" :label="$t('commons.gender')" />
 
       <el-table-column :show-overflow-tooltip="true" prop="phone" :label="$t('commons.phone')" />
       <el-table-column :show-overflow-tooltip="true" prop="email" :label="$t('commons.email')" />
-      <el-table-column :show-overflow-tooltip="true" prop="dept" :label="$t('commons.organization')">
+      <el-table-column :show-overflow-tooltip="true" prop="dept" sortable="custom" :label="$t('commons.organization')">
         <template slot-scope="scope">
           <div>{{ scope.row.dept && scope.row.dept.deptName }}</div>
         </template>
@@ -43,12 +44,12 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="status" :label="$t('commons.status')">
+      <el-table-column prop="status" sortable="custom" :label="$t('commons.status')">
         <template v-slot:default="scope">
           <el-switch v-model="scope.row.enabled" :active-value="1" :inactive-value="0" inactive-color="#DCDFE6" @change="changeSwitch(scope.row)" />
         </template>
       </el-table-column>
-      <el-table-column prop="createTime" :label="$t('commons.create_time')">
+      <el-table-column prop="createTime" sortable="custom" :label="$t('commons.create_time')">
         <template v-slot:default="scope">
           <span>{{ scope.row.createTime | timestampFormatDate }}</span>
         </template>
@@ -163,7 +164,7 @@ import LayoutContent from '@/components/business/LayoutContent'
 import ComplexTable from '@/components/business/complex-table'
 
 // import { checkPermission } from '@/utils/permission'
-import { formatCondition, formatQuickCondition } from '@/utils/index'
+import { formatCondition, formatQuickCondition, addOrder, formatOrders } from '@/utils/index'
 import { PHONE_REGEX } from '@/utils/validate'
 import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
 import Treeselect from '@riophae/vue-treeselect'
@@ -295,7 +296,9 @@ export default {
         edit: ['user:edit'],
         del: ['user:del'],
         editPwd: ['user:editPwd']
-      }
+      },
+      orderConditions: [],
+      last_condition: null
     }
   },
   mounted() {
@@ -305,13 +308,23 @@ export default {
   },
 
   methods: {
+    sortChange({ column, prop, order }) {
+      if (prop === 'dept') {
+        prop = 'deptId'
+      }
+      this.orderConditions = []
+      addOrder({ field: prop, value: order }, this.orderConditions)
+      this.search(this.last_condition)
+    },
     select(selection) {
     },
 
     search(condition) {
-      condition = formatQuickCondition(condition, 'username')
+      this.last_condition = condition
+      condition = formatQuickCondition(condition, 'nick_name')
       const temp = formatCondition(condition)
       const param = temp || {}
+      param['orders'] = formatOrders(this.orderConditions)
       const { currentPage, pageSize } = this.paginationConfig
       userLists(currentPage, pageSize, param).then(response => {
         this.data = response.data.listObject