新增删除功能

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app">
     <el-container>
-      <el-aside width="500px">
+      <el-aside width="590px">
         <Side/>
       </el-aside>
       <el-main>

src/components/DashBoard.vue

@@ -42,12 +42,10 @@
       </el-col>
       <el-col :span="6"></el-col>
     </el-row>
-
-
   </div>
 
   <div class="DashBoard" v-show="!loadComplete">
-    <el-col :span="20">
+    <el-col :span="15">
       <el-input v-model="AuthCode" class="validate">
         <template #prefix>
           请输入授权码：
@@ -142,7 +140,7 @@ export default {
     width: auto;
     background-color: ghostwhite;
     display: block;
-    margin-left: 400px;
+    margin-left: 200px;
     margin-top: 200px;
   }
 </style>

src/components/Side.vue

@@ -12,17 +12,20 @@
             文件大小:{{props.row.fileSize}}
           </template>
         </el-table-column>
-        <el-table-column label="Name" width="300">
+        <el-table-column label="名字" width="300">
           <template #default="scoped">
             {{scoped.row.name}}
           </template>
         </el-table-column>
-        <el-table-column label="link" width="80">
+        <el-table-column label="操作" width="180">
           <template #default="scoped">
-            <el-link :href="scoped.row.download" v-show="scoped.row.download">download</el-link>
+            <span v-show="scoped.row.download">
+              <el-button @click="downloadGallery(scoped.row.download)">下载</el-button>
+              <el-button @click="deleteGallery(scoped.row.gid)">删除</el-button>
+            </span>
           </template>
         </el-table-column>
-        <el-table-column label="status" width="60">
+        <el-table-column label="进度" width="60">
           <template #default="scoped">
             {{ scoped.row.progress }}
           </template>
@@ -61,6 +64,7 @@ export default {
     let input = ref(null)
 
     let data = computed(() => {
+      console.log(store.getters.task)
       if(store.getters.task)
         return store.getters.task
       else
@@ -72,6 +76,8 @@ export default {
     })
 
     let max = computed(() => {
+      if(targetPage.value > store.getters.max)
+        store.commit("_changePage", store.getters.max)
       return store.getters.max
     })
 
@@ -118,7 +124,6 @@ export default {
     }
 
     function reverse(){
-      console.log("reverse")
       isEditing.value = !isEditing.value
       if(isEditing){
         input.value.focus()
@@ -126,6 +131,14 @@ export default {
       targetPage.value = page.value
     }
 
+    function downloadGallery(link){
+      window.open(link)
+    }
+
+    function deleteGallery(gid){
+      store.dispatch("deleteGallery", gid)
+    }
+
 
     return {update,
             data,
@@ -142,6 +155,8 @@ export default {
             toMin,
             previous,
             next,
+            downloadGallery,
+            deleteGallery,
             store
     }
   }

src/index.css

@@ -1,8 +0,0 @@
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}

src/store/index.js

@@ -103,6 +103,17 @@ const actions = {
     },
     searchByKeyword(context, keyword){
         context.commit("_searchByKeyword", keyword)
+    },
+    deleteGallery(context, gid){
+        axios.delete(base_url, {params:{AuthCode:state.AuthCode, gid:gid}}).then((res) => {
+            if(res.data.result === "success"){
+                ElMessage("删除成功")
+                context.commit("_deleteGallery", gid)
+            }
+            else{
+                ElMessage(res.data.data)
+            }
+        })
     }
 }
 
@@ -172,6 +183,16 @@ const mutations = {
         if(state.searchTask.length === 0){
             ElMessage("未找到该关键字的本子")
         }
+    },
+    _deleteGallery(state, gid){
+        state.totalTask.map((currentValue, index, arr) => {
+            return currentValue.gid === gid ? null: currentValue
+        })
+        if(state.searchTask.length !== 1){
+            state.searchTask.map(currentValue => {
+                return  currentValue.gid === gid ? null : currentValue
+            })
+        }
     }
 }