功能变化:

1.加入后端排序示例;

backend/dvadmin/system/views/login_log.py

@@ -34,3 +34,4 @@ class LoginLogViewSet(CustomModelViewSet):
     queryset = LoginLog.objects.all()
     serializer_class = LoginLogSerializer
     extra_filter_backends = []
+    ordering_fields = ['create_datetime']

web/package.json

@@ -20,9 +20,9 @@
     "china-division": "^2.4.0",
     "core-js": "^3.4.3",
     "cropperjs": "^1.5.6",
-    "d2-crud-plus": "^2.13.1",
-    "d2-crud-x": "^2.13.1",
-    "d2p-extends": "^2.13.1",
+    "d2-crud-plus": "^2.17.9",
+    "d2-crud-x": "^2.17.9",
+    "d2p-extends": "^2.17.9",
     "dayjs": "^1.8.17",
     "echarts": "^5.1.2",
     "el-phone-number-input": "^1.1.5",

web/src/install.js

@@ -62,7 +62,15 @@ Vue.use(d2CrudPlus, {
         page: { // page接口返回的数据结构配置，
           request: {
             current: 'page',
-            size: 'limit'
+            size: 'limit',
+            orderAsc (query, value) {
+              const field = query.orderProp
+              if (value) {
+                query.ordering = field
+              } else {
+                query.ordering = `-${field}`
+              }
+            }
           },
           response: {
             current: 'page', // 当前页码 ret.data.current

web/src/views/system/log/loginLog/crud.js

@@ -4,12 +4,11 @@ export const crudOptions = (vm) => {
       compact: true
     },
     options: {
-      tableType: 'vxe-table',
-      rowKey: true, // 必须设置，true or false
+      // tableType: 'vxe-table',
+      // rowKey: true, // 必须设置，true or false
       rowId: 'id',
       height: '100%', // 表格高度100%, 使用toolbar必须设置
-      highlightCurrentRow: false
-
+      highlightCurrentRow: false,
     },
     rowHandle: {
       fixed: 'right',
@@ -284,7 +283,8 @@ export const crudOptions = (vm) => {
         title: '登录时间',
         key: 'create_datetime',
         width: 160,
-        type: 'datetime'
+        type: 'datetime',
+        sortable: true
       }
     ]
   }

web/src/views/system/user/crud.js

@@ -9,8 +9,8 @@ export const crudOptions = (vm) => {
     },
     options: {
       height: '100%',
-      tableType: 'vxe-table',
-      rowKey: true,
+     // tableType: 'vxe-table',
+      //rowKey: true,
       rowId: 'id'
     },
     selectionRow: {
@@ -149,6 +149,7 @@ export const crudOptions = (vm) => {
       {
         title: '姓名',
         key: 'name',
+        sortable: 'custom',
         minWidth: 90,
         search: {
           disabled: false