feature：支持排序

2026-05-12 19:16:23 +08:00 · 2023-08-07 11:20:21 +08:00
parent d6cab53732
commit 1edc1fdeac
7 changed files with 62 additions and 15 deletions
--- a/applications/task/serialziers.py
+++ b/applications/task/serialziers.py
@@ -3,6 +3,7 @@ from rest_framework import serializers

 class FileListSerializer(serializers.Serializer):
    file_path = serializers.CharField(required=True)
+    sorted_fields = serializers.ListField(required=True)


 class Id3Serializer(serializers.Serializer):
@@ -57,4 +58,4 @@ class TidyFolderSerializer(serializers.Serializer):
    first_dir = serializers.CharField(required=True)
    second_dir = serializers.CharField(required=False, allow_null=True, allow_blank=True)
    file_full_path = serializers.JSONField(required=True)
-    select_data = serializers.JSONField(required=True)
+    select_data = serializers.JSONField(required=True)
--- a/applications/task/views.py
+++ b/applications/task/views.py
@@ -1,5 +1,6 @@
 import base64
 import copy
+import locale
 import os
 import time

@@ -48,6 +49,7 @@ class TaskViewSets(GenericViewSet):
        """文件列表"""
        validate_data = self.is_validated_data(request.data)
        file_path = validate_data['file_path']
+        sorted_fields = validate_data['sorted_fields']
        file_path_list = file_path.split('/')
        try:
            data = os.scandir(file_path)
@@ -59,7 +61,13 @@ class TaskViewSets(GenericViewSet):
        full_path_list = []
        for entry in data:
            each = entry.name
-            file_data.append(each)
+            file_data.append({
+                "name": each,
+                "path": entry.path,
+                "is_dir": entry.is_dir(),
+                "update_time": time.strftime("%Y-%m-%d %H:%M:%S", time.localtime(entry.stat().st_mtime)),
+                "size": entry.stat().st_size
+            })
            full_path_list.append(f"{file_path}/{each}")
            file_type = each.split(".")[-1]
            file_name = ".".join(each.split(".")[:-1])
@@ -67,17 +75,19 @@ class TaskViewSets(GenericViewSet):
                frc_map[file_name] = each
        task_map = dict(Task.objects.filter(parent_path=file_path).values_list("filename", "state"))
        for index, entry in enumerate(file_data, 1):
-            each = entry
+            each = entry.get("name")
            file_type = each.split(".")[-1]
            file_name = ".".join(each.split(".")[:-1])
-            if os.path.isdir(f"{file_path}/{each}"):
+            if entry.get("is_dir", None):
                children_data.append({
                    "id": index,
                    "name": each,
                    "title": each,
                    "icon": "icon-folder",
                    "state": "null",
-                    "children": []
+                    "children": [],
+                    "size": entry.get("size"),
+                    "update_time": entry.get("update_time")
                })
                continue
            if file_type not in ALLOW_TYPE:
@@ -91,8 +101,16 @@ class TaskViewSets(GenericViewSet):
                "name": each,
                "title": each,
                "icon": icon,
-                "state": task_map.get(each, "null")
+                "state": task_map.get(each, "null"),
+                "size": entry.get("size"),
+                "update_time": entry.get("update_time")
            })
+        if "name" in sorted_fields:
+            children_data = sorted(children_data, key=lambda x: x.get("name").encode('gbk'), reverse=False)
+        if "update_time" in sorted_fields:
+            children_data = sorted(children_data, key=lambda x: x.get("update_time"), reverse=True)
+        if "size" in sorted_fields:
+            children_data = sorted(children_data, key=lambda x: x.get("size"), reverse=True)
        res_data = [
            {
                "name": file_path_list[-1],
--- a/static/dist/css/app.css
+++ b/static/dist/css/app.css
--- a/static/dist/index.prod.html
+++ b/static/dist/index.prod.html
@@ -1,3 +1,3 @@
 <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>音乐标签Web版｜Music Tag Web｜</title><link rel="shortcut icon" href=/static/dist/img/music-tag.png type=image/x-icon><link href=./static/dist/css/app.css rel=stylesheet></head><body><script>window.siteUrl = "/"
            window.APP_CODE = 'dj-flow';
-            window.CSRF_COOKIE_NAME = 'django_vue_cli_csrftoken'</script><div id=app></div><script type=text/javascript src=./static/dist/js/manifest.9ba6c0d4f4490e9a4f28.js></script><script type=text/javascript src=./static/dist/js/vendor.051dd49be048f27f51f9.js></script><script type=text/javascript src=./static/dist/js/app.b068a6c3125601076d2c.js></script></body></html>
+            window.CSRF_COOKIE_NAME = 'django_vue_cli_csrftoken'</script><div id=app></div><script type=text/javascript src=./static/dist/js/manifest.9ba6c0d4f4490e9a4f28.js></script><script type=text/javascript src=./static/dist/js/vendor.051dd49be048f27f51f9.js></script><script type=text/javascript src=./static/dist/js/app.6e891bf4b6ebd6582441.js></script></body></html>
--- a/static/dist/js/app.6e891bf4b6ebd6582441.js
+++ b/static/dist/js/app.6e891bf4b6ebd6582441.js
--- a/static/dist/js/app.b068a6c3125601076d2c.js
+++ b/static/dist/js/app.b068a6c3125601076d2c.js
--- a/web/src/views/home/home.vue
+++ b/web/src/views/home/home.vue
@@ -11,8 +11,23 @@
                    </bk-input>
                    <bk-icon type="arrows-down-shape" @click="handleSearchFile" style="cursor: pointer;"></bk-icon>
                </div>
-                <div style="margin-top: 10px;">
+                <div style="margin-top: 10px;display: flex;align-items: center;">
                    <bk-input type="text" v-model="searchWord" placeholder="search..." @enter="handleSearch"></bk-input>
+                    <div style="margin-left: 20px;margin-right: 5px;">
+                        <bk-dropdown-menu :align="'right'">
+                            <template slot="dropdown-trigger">
+                                <span class="dropdown-trigger-btn bk-icon icon-dedent" style="cursor: pointer;"></span>
+                            </template>
+                            <ul class="bk-dropdown-list" slot="dropdown-content">
+                                <li><a href="javascript:;" @click="changeSorted('name')"
+                                    :class="{ 'isSelected': sortedField.includes('name') }">名称</a></li>
+                                <li><a href="javascript:;" @click="changeSorted('update_time')"
+                                    :class="{ 'isSelected': sortedField.includes('update_time') }">修改时间</a></li>
+                                <li><a href="javascript:;" @click="changeSorted('size')"
+                                    :class="{ 'isSelected': sortedField.includes('size') }">大小</a></li>
+                            </ul>
+                        </bk-dropdown-menu>
+                    </div>
                </div>
                <transition name="bk-slide-fade-down">
                    <div style="margin-top: 10px;" v-show="fadeShowDir">
@@ -164,19 +179,19 @@
                    <div style="display: flex;margin-bottom: 10px;align-items: center;">
                        <div class="label1">时长：</div>
                        <div style="width: 70%;">
-                            {{musicInfo.duration}}
+                            {{ musicInfo.duration }}
                        </div>
                    </div>
                    <div style="display: flex;margin-bottom: 10px;align-items: center;">
                        <div class="label1">比特率：</div>
                        <div style="width: 70%;">
-                            {{musicInfo.bit_rate}}
+                            {{ musicInfo.bit_rate }}
                        </div>
                    </div>
                    <div style="display: flex;margin-bottom: 10px;align-items: center;">
                        <div class="label1">文件大小：</div>
                        <div style="width: 70%;">
-                            {{musicInfo.size}}
+                            {{ musicInfo.size }}
                        </div>
                    </div>
                </div>
@@ -527,7 +542,8 @@
                        visible: false,
                        headerPosition: 'left'
                    }
-                }
+                },
+                sortedField: []
            }
        },
        created() {
@@ -698,7 +714,7 @@
                this.fadeShowDir = false
                this.checkedData = []
                this.checkedIds = []
-                this.$api.Task.fileList({'file_path': this.filePath}).then((res) => {
+                this.$api.Task.fileList({'file_path': this.filePath, sorted_fields: this.sortedField}).then((res) => {
                    if (res.result) {
                        this.treeListOne = res.data
                        this.fadeShowDir = true
@@ -809,6 +825,15 @@
                        }
                    }
                })
+            },
+            changeSorted(element) {
+                if (this.sortedField.includes(element)) {
+                    this.sortedField.splice(this.sortedField.indexOf(element), 1)
+                } else {
+                    this.sortedField.push(element)
+                }
+                console.log(this.sortedField)
+                this.handleSearchFile()
            }
        }
    }
@@ -1009,4 +1034,7 @@ button.bk-button-text {
 ::-webkit-scrollbar-thumb {
    background-color: #f4f5f0;
 }
+.isSelected {
+    background-color: #ecf3fe;
+}
 </style>