add and delete tasks

src/layout/components/Sidebar/SidebarItem.vue

@@ -21,6 +21,7 @@
         class="nest-menu"
       />
     </el-submenu>
+<!--     <button type="button" class="btn btn-outline-light" style="margin-left: 5px" @click="addNewTask">+</button> -->
   </div>
 </template>
 
@@ -57,6 +58,12 @@ export default {
     return {}
   },
   methods: {
+    // addNewTask() {
+    //   this.item.children.push({
+    //     name: "Task 2",
+    //     path: ""
+    //   })
+    // },
     hasOneShowingChild(children = [], parent) {
       const showingChildren = children.filter(item => {
         if (item.hidden) {
@@ -67,6 +74,7 @@ export default {
           return true
         }
       })
+      // console.log(showingChildren)
 
       // When there is only one child router, the child router is displayed by default
       if (showingChildren.length === 1) {

src/layout/components/Sidebar/index.vue

@@ -15,6 +15,7 @@
         <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
+    
   </div>
 </template>
 

src/layout/index.vue

@@ -5,7 +5,7 @@
     <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar />
-        <tags-view v-if="needTagsView" />
+        <!-- <tags-view v-if="needTagsView" /> -->
       </div>
       <app-main />
 <!--       <right-panel v-if="showSettings">

src/router/index.js

@@ -73,13 +73,13 @@ export const constantRoutes = [
   {
     path: '/',
     component: Layout,
-    redirect: '/uploader',
+    redirect: '/vueUploader',
     children: [
       {
         path: 'vueUploader',
         component: () => import('@/views/VueUploader/index'),
-        name: 'VueUploader',
+        name: 'Task',
-        meta: { title: 'VueUploader', icon: 'documentation', affix: true }
+        meta: { title: 'Task', icon: 'documentation', affix: true }
       }
     ]
   },
@@ -91,8 +91,8 @@ export const constantRoutes = [
       {
         path: 'vueUploader',
         component: () => import('@/views/VueUploader/index'),
-        name: 'VueUploader',
+        name: 'Task',
-        meta: { title: 'VueUploader', icon: 'documentation', affix: true }
+        meta: { title: 'Task', icon: 'documentation', affix: true }
       }
     ]
   },

src/utils/request.js

@@ -7,7 +7,7 @@ import { getToken } from '@/utils/auth'
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 500000 // request timeout
+  timeout: 5000 // request timeout
 })
 
 // request interceptor

src/views/VueUploader/components/taskList.vue

@@ -0,0 +1,49 @@
+ <template>
+  <div class="dropdown float-right">
+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      {{ this.tasks[0].name }}
+    </button>
+    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
+      <button class="dropdown-item" type="button" v-for="task in tasks" @click="currentTask = task.name" v-text="task.name"></button>
+      <div class="dropdown-divider"></div>
+      <form class="px-4 py-3">
+        <div class="form-group">
+          <label for="exampleDropdownFormEmail1">Task Name</label>
+          <input class="form-control" id="exampleDropdownFormEmail1" v-model="newTaskName">
+        </div>
+        <button type="submit" class="btn btn-primary" @click="addNewTask()">+ Add new task</button>
+        <button type="submit" class="btn btn-danger" @click="deleteTask">- Delete task</button>
+      </form>
+    </div>
+  </div>
+</template> 
+
+<script>
+  export default {
+    data: function() {
+      return {
+        tasks: [{name: "Task 1"}],
+        currentTask: "Task 1",
+        newTaskName: "",
+      }
+    },
+
+    methods: {
+      setCurrentTask(name) {
+        this.currentTask = name
+      },
+      addNewTask() {
+        this.tasks.push({name: this.newTaskName})
+      },
+      deleteTask() {
+        this.tasks.splice(this.tasks.indexOf({name: this.newTaskName}))
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .dropdown {
+    display: inline;
+  }
+</style>

src/views/VueUploader/index.vue

@@ -1,9 +1,10 @@
 <template>
 <div class="example-full">
-  <button type="button" class="btn btn-danger float-right btn-is-option" @click.prevent="isOption = !isOption">
+  <taskList></taskList>
+<!--   <button type="button" class="btn btn-danger float-right btn-is-option" @click.prevent="isOption = !isOption">
     <i class="fa fa-cog" aria-hidden="true"></i>
     Options
-  </button>
+  </button> -->
   <h1 id="example-title" class="example-title">Data Uploader</h1>
 
   <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active">
@@ -309,11 +310,12 @@ import Cropper from 'cropperjs'
 import ImageCompressor from '@xkeshi/image-compressor'
 import FileUpload from 'vue-upload-component'
 import { sendAnalyzeRequest } from '@/api/user'
+import taskList from '@/views/VueUploader/components/taskList'
 // import 'bootstrap'
 // import 'bootstrap/dist/css/bootstrap.min.css'
 export default {
   components: {
-    FileUpload,
+    FileUpload, taskList
   },
   data() {
     return {

src/views/plot/plot.vue

@@ -9,6 +9,7 @@
 	  <button type="button" class="btn btn-success" @click="onSendAnalyzeOnDateRequest">Apply</button>
     </div>
     <iframe src="http://localhost:808" width=1300 height=600></iframe>
+    <button type="button" class="btn btn-secondary" @click="onBackToUpload">Back</button>
 </template>
 
 <script>
@@ -39,6 +40,9 @@ export default {
 	          this.$router.push({ name: "plot" })
 	        }
 	    })
+	  },
+	  onBackToUpload() {
+	  	this.$router.push({ name: "Task" })
 	  }
   }
 }