基本正常，未发现恶性bug

2022-07-20 20:02:41 +08:00
commit ed257498c2
8 changed files with 634 additions and 0 deletions
@@ -0,0 +1,168 @@
+<template>
+  <div class="side" style="width: 100%">
+    <span>下载历史</span>
+    <div  v-show="loadComplete" class="load_complete" >
+      <el-table :data="data">
+        <el-table-column type="expand">
+          <template #default="props">
+            名字:{{ props.row.name}} <br>
+            链接:<el-link :href="props.row.link">Link</el-link> <br>
+            语言:{{props.row.language}} <br>
+            页数:{{props.row.pages}} <br>
+            文件大小:{{props.row.fileSize}}
+          </template>
+        </el-table-column>
+        <el-table-column label="Name" width="300">
+          <template #default="scoped">
+            {{scoped.row.name}}
+          </template>
+        </el-table-column>
+        <el-table-column label="link" width="80">
+          <template #default="scoped">
+            <el-link :href="scoped.row.download" v-show="scoped.row.download">download</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column label="status" width="60">
+          <template #default="scoped">
+            {{ scoped.row.progress }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-row class="pageChanger">
+        <el-col>
+          <el-button @click="toMin">{{min}}</el-button>
+          <el-button @click="previous">-</el-button>
+          <el-input v-model="targetPage"
+                    @change="changePage"
+                    v-show="isEditing"
+                    @blur="reverse()"
+                    class="page"
+                    ref="input"></el-input>
+          <span @click="reverse" v-show="!isEditing" class="page">{{page}}</span>
+          <el-button @click="next">+</el-button>
+          <el-button @click="toMax">{{max}}</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <span v-show="!loadComplete" class="side">请输入授权码后再查看</span>
+  </div>
+</template>
+
+<script>
+import store from "../store";
+import {computed, ref} from "vue";
+export default {
+  name: "Side",
+  setup(){
+
+    const targetPage = ref(1)
+    const isEditing = ref(false)
+
+    let input = ref(null)
+
+    let data = computed(() => {
+      if(store.getters.task)
+        return store.getters.task
+      else
+        return null
+    })
+
+    let min = computed(() => {
+      return store.getters.min
+    })
+
+    let max = computed(() => {
+      return store.getters.max
+    })
+
+    let page = computed(() => {
+      targetPage.value = store.getters.page
+      return store.getters.page
+    })
+
+    function next() {
+      if(targetPage.value < max.value) {
+        targetPage.value++
+        store.commit("_changePage", targetPage.value)
+      }
+    }
+
+    function previous() {
+      if(targetPage.value > min.value) {
+        targetPage.value--
+        store.commit("_changePage", targetPage.value)
+      }
+    }
+
+    function toMax() {
+      store.commit("_changePage", max.value)
+      targetPage.value = max.value
+    }
+
+    function toMin(){
+      store.commit("_changePage", min.value)
+      targetPage.value = min.value
+    }
+
+    let loadComplete = computed(() => {
+      return store.getters.loadComplete
+    })
+
+    function update(){
+      store.dispatch("update")
+    }
+
+    function changePage(){
+      if(targetPage.value >= min.value && targetPage.value <= max.value)
+        store.commit("_changePage", targetPage.value)
+    }
+
+    function reverse(){
+      console.log("reverse")
+      isEditing.value = !isEditing.value
+      if(isEditing){
+        input.value.focus()
+      }
+      targetPage.value = page.value
+    }
+
+
+    return {update,
+            data,
+            min,
+            max,
+            targetPage,
+            loadComplete,
+            page,
+            isEditing,
+            input,
+            reverse,
+            changePage,
+            toMax,
+            toMin,
+            previous,
+            next,
+            store
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .side{
+    text-align: center;
+    height: 300px;
+  }
+  span{
+    display: block;
+  }
+  .pageChanger{
+    position: absolute;
+    top:92vh;
+    left: 150px;
+  }
+  .page{
+    display: inline-block;
+    width: 50px;
+  }
+</style>