Merge pull request #23 from putianyi889/patch-20

优化录像页

back_end/saolei/videomanager/view_utils.py

@@ -16,13 +16,9 @@
             record_update_fields.append(f"{level}_{stat}_{mode}")
             record_update_fields.append(f"{level}_{stat}_id_{mode}")
 
-def fieldname_translate(name: str):
-    if name in [field.name for field in VideoModel._meta.get_fields()]:
-        return name
-    elif name in [field.name for field in ExpandVideoModel._meta.get_fields()]:
-        return "video__" + name
-    else:
-        return name
+video_all_fields = ["id", "upload_time", "player__realname", "timems", "bv", "bvs"]
+for name in [field.name for field in ExpandVideoModel._meta.get_fields()]:
+    video_all_fields.append("video__" + name)
 
 # 确定用户破某个纪录后，且对应模式、指标的三个级别全部有录像后，更新redis中的数据
 def update_3_level_cache_record(realname: str, index: str, mode: str, ms_user: UserMS):

back_end/saolei/videomanager/views.py

@@ -3,7 +3,7 @@
 from django.contrib.auth.decorators import login_required
 from .forms import UploadVideoForm
 from .models import VideoModel, ExpandVideoModel
-from .view_utils import update_personal_record, update_personal_record_stock, fieldname_translate
+from .view_utils import update_personal_record, update_personal_record_stock, video_all_fields
 from userprofile.models import UserProfile
 from django.http import HttpResponse, JsonResponse, FileResponse
 import json, urllib
@@ -174,8 +174,7 @@ def video_query(request):
     if request.method == 'GET':
         data = request.GET
 
-        values = [fieldname_translate(s) for s in data.getlist("v[]")]
-        values.append("id")
+        values = video_all_fields
 
         if data["r"] == "true":
             ob = "-" + data["o"]

front_end/src/views/VideoView.vue

@@ -9,12 +9,12 @@
     </Teleport>
     <el-row class="mb-4" style="margin-bottom: 10px;">
         <el-button v-for="(tag, key) in level_tags" type="warning" :plain="!(level_tag_selected == key)" :size="'small'"
-            @click="level_tag_selected = key as string;">{{ tag.name }}</el-button>
+            @click="level_tag_selected = key as string; request_videos();">{{ tag.name }}</el-button>
     </el-row>
 
     <el-row class="mb-4" style="margin-bottom: 10px;">
         <el-button v-for="(tag, key) in mode_tags" type="success" :plain="!(mode_tag_selected == key)" :size="'small'"
-            @click="mode_tag_selected = key as string;">{{ tag.name }}</el-button>
+            @click="mode_tag_selected = key as string; request_videos();">{{ tag.name }}</el-button>
     </el-row>
 
     <el-row class="mb-4" style="margin-bottom: 10px;">
@@ -23,18 +23,15 @@
             }}</el-button>
     </el-row>
 
-    <el-row class="mb-4" style="margin-bottom: 10px;">
-        <el-button size="small" @click="request_videos">刷新</el-button>
-    </el-row>
-
     <div style="width: 80%;font-size:20px;margin: auto;margin-top: 10px;">
         <el-table :data="videoList" @sort-change="handleSortChange" @row-click="preview">
             <el-table-column type="index" :index="offsetIndex" fixed></el-table-column>
             <el-table-column v-for="key in selected_index()" 
                 :prop="index_tags[key].key" 
                 :label="index_tags[key].name"
                 :formatter="columnFormatter(key)"
-                sortable="custom">
+                sortable="custom"
+                :sort-orders="index_tags[key].reverse ? (['descending', 'ascending']) : (['ascending', 'descending'])">
             </el-table-column>
         </el-table>
     </div>
@@ -77,6 +74,7 @@ const state = reactive({
     CurrentPage: 1,
     PageSize: 10,
     VideoCount: 0,
+    ReverseOrder: false,
     Total: 3
 });
 
@@ -187,9 +185,8 @@ const columnFormatter = (key: string) => {
 onMounted(() => {
     document.getElementsByClassName("el-pagination__goto")[0].childNodes[0].nodeValue = "转到";
     // 把分页器的go to改成中文。
-
-
     mod_style();
+    request_videos();
 })
 
 function to_fixed_n(input: string | number | undefined, to_fixed: number): string | number | undefined {
@@ -214,15 +211,25 @@ const mod_style = () => {
         includes(index_tag_selected.value);
 }
 
+const prevColumn = ref<any>(null); //上一个排序列
 const handleSortChange = (sort: any) => {
-    console.log(sort.prop, sort.order);
-    for (var key of Object.keys(index_tags)) { // 很丑陋，but it works
+    console.log(sort);
+    for (var key of Object.keys(index_tags)) { // 找到对应的key。很丑陋，but it works
         if (index_tags[key].key == sort.prop) {
-            index_tag_selected.value = key;
-            index_tags[key].reverse = sort.order == "descending";
+            if (key != index_tag_selected.value) { // 改变了排序列，清除之前列的排序
+                if (prevColumn.value != null) {
+                    prevColumn.value.order = null;
+                }
+                index_tag_selected.value = key;
+            }
+            if (sort.order == null) { // 不允许通过点击箭头的方式将排序变成 null
+                sort.column.order = state.ReverseOrder ? "descending" : "ascending";
+            }
+            state.ReverseOrder = sort.column.order == "descending"
             break;
         }
     }
+    prevColumn.value = sort.column;
     request_videos();
 }
 
@@ -248,9 +255,8 @@ const request_videos = () => {
             params: {
                 level: level_tags[level_tag_selected.value].key,
                 mode: mode_tags[mode_tag_selected.value].key,
-                v: ["player__realname"].concat(selected_index().map(function(x) {return index_tags[x].key})), // list of fields
                 o: index_tags[index_tag_selected.value].key, // order by
-                r: index_tags[index_tag_selected.value].reverse, // reverse order
+                r: state.ReverseOrder, // reverse order
                 ps: state.PageSize, // page size
                 page: state.CurrentPage,
             }