From 8bf22e8248f0268b8210b63f468a88f668008cf3 Mon Sep 17 00:00:00 2001
From: zema1 <rawidn@163.com>
Date: Sun, 14 Jan 2018 16:22:46 +0800
Subject: [PATCH] support problem import and export

---
 src/pages/admin/api.js                        |   5 +
 src/pages/admin/components/SideMenu.vue       |   1 +
 src/pages/admin/router.js                     |   7 +-
 src/pages/admin/views/index.js                |   3 +-
 .../admin/views/problem/ImportAndExport.vue   | 123 ++++++++++++++++++
 src/pages/admin/views/problem/Problem.vue     |  12 +-
 6 files changed, 138 insertions(+), 13 deletions(-)
 create mode 100644 src/pages/admin/views/problem/ImportAndExport.vue

diff --git a/src/pages/admin/api.js b/src/pages/admin/api.js
index 00066a9a2..cecfbecb1 100644
--- a/src/pages/admin/api.js
+++ b/src/pages/admin/api.js
@@ -289,6 +289,11 @@ export default {
   },
   getSessions () {
     return ajax('sessions', 'get')
+  },
+  exportProblems (data) {
+    return ajax('export_problem', 'post', {
+      data
+    })
   }
 }
 
diff --git a/src/pages/admin/components/SideMenu.vue b/src/pages/admin/components/SideMenu.vue
index 3b190af27..2c31e07a7 100644
--- a/src/pages/admin/components/SideMenu.vue
+++ b/src/pages/admin/components/SideMenu.vue
@@ -17,6 +17,7 @@
       <template slot="title"><i class="el-icon-fa-bars"></i>Problem</template>
       <el-menu-item index="/problems">Problem List</el-menu-item>
       <el-menu-item index="/problem/create">Create Problem</el-menu-item>
+      <el-menu-item index="/problem/batch_ops">Import / Export</el-menu-item>
     </el-submenu>
     <el-submenu index="contest">
       <template slot="title"><i class="el-icon-fa-trophy"></i>Contest</template>
diff --git a/src/pages/admin/router.js b/src/pages/admin/router.js
index fd8a23ce5..0e13e75b1 100644
--- a/src/pages/admin/router.js
+++ b/src/pages/admin/router.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 // 引入 view 组件
 import { Announcement, Conf, Contest, ContestList, Home, JudgeServer, Login,
-  Problem, ProblemList, User, PruneTestCase, Dashboard } from './views'
+  Problem, ProblemList, User, PruneTestCase, Dashboard, ProblemImportOrExport } from './views'
 Vue.use(VueRouter)
 
 export default new VueRouter({
@@ -63,6 +63,11 @@ export default new VueRouter({
           name: 'edit-problem',
           component: Problem
         },
+        {
+          path: '/problem/batch_ops',
+          name: 'problem_batch_ops',
+          component: ProblemImportOrExport
+        },
         {
           path: '/contest/create',
           name: 'create-contest',
diff --git a/src/pages/admin/views/index.js b/src/pages/admin/views/index.js
index 78ee648e4..505b7e922 100644
--- a/src/pages/admin/views/index.js
+++ b/src/pages/admin/views/index.js
@@ -10,8 +10,9 @@ import ContestList from './contest/ContestList.vue'
 import Contest from './contest/Contest.vue'
 import Login from './general/Login.vue'
 import Home from './Home.vue'
+import ProblemImportOrExport from './problem/ImportAndExport.vue'
 
 export {
   Announcement, User, Conf, JudgeServer, Problem, ProblemList, Contest,
-  ContestList, Login, Home, PruneTestCase, Dashboard
+  ContestList, Login, Home, PruneTestCase, Dashboard, ProblemImportOrExport
 }
diff --git a/src/pages/admin/views/problem/ImportAndExport.vue b/src/pages/admin/views/problem/ImportAndExport.vue
new file mode 100644
index 000000000..c3a820eb9
--- /dev/null
+++ b/src/pages/admin/views/problem/ImportAndExport.vue
@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <panel title="Export Problems">
+      <el-table :data="problems"
+                v-loading="loadingProblems" @selection-change="handleSelectionChange">
+        <el-table-column
+          type="selection"
+          width="60">
+        </el-table-column>
+        <el-table-column
+          label="ID"
+          width="100"
+          prop="id">
+        </el-table-column>
+        <el-table-column
+          label="DisplayID"
+          width="200"
+          prop="_id">
+        </el-table-column>
+        <el-table-column
+          label="Title"
+          prop="title">
+        </el-table-column>
+        <el-table-column
+          prop="created_by.username"
+          label="Author">
+        </el-table-column>
+        <el-table-column
+          prop="create_time"
+          label="Create Time">
+          <template slot-scope="scope">
+            {{scope.row.create_time | localtime }}
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="panel-options">
+        <el-button type="primary" size="small" v-show="selected_problems.length"
+                   @click="exportProblems" icon="el-icon-fa-arrow-down">Export
+        </el-button>
+        <el-pagination
+          class="page"
+          layout="prev, pager, next"
+          @current-change="getProblems"
+          :page-size="limit"
+          :total="total">
+        </el-pagination>
+      </div>
+    </panel>
+    <panel title="Import Problems">
+      <el-upload
+        action="/api/admin/import_problem"
+        name="file"
+        :show-file-list="false"
+        :with-credentials="true"
+        :on-success="uploadSucceeded"
+        :on-error="uploadFailed">
+        <el-button size="small" type="primary" icon="el-icon-fa-upload">Choose File</el-button>
+      </el-upload>
+    </panel>
+  </div>
+</template>
+<script>
+  import api from '@admin/api'
+  import utils from '@/utils/utils'
+
+  export default {
+    name: 'import_and_export',
+    data () {
+      return {
+        page: 1,
+        limit: 10,
+        total: 0,
+        loadingProblems: false,
+        loadingImporting: false,
+        problems: [],
+        selected_problems: []
+      }
+    },
+    mounted () {
+      this.getProblems()
+    },
+    methods: {
+      handleSelectionChange (val) {
+        this.selected_problems = val
+      },
+      getProblems (page = 1) {
+        let params = {
+          offset: (page - 1) * this.limit,
+          limit: this.limit
+        }
+        this.loadingProblems = true
+        api.getProblemList(params).then(res => {
+          this.problems = res.data.data.results
+          this.loadingProblems = false
+        })
+      },
+      exportProblems () {
+        let params = []
+        for (let p of this.selected_problems) {
+          params.push('problem_id=' + p.id)
+        }
+        let url = '/admin/export_problem?' + params.join('&')
+        utils.downloadFile(url)
+      },
+      uploadSucceeded (response) {
+        if (response.error) {
+          this.$error(response.data)
+        } else {
+          this.$success('Successfully imported ' + response.data.import_count + ' problems')
+          this.getProblems()
+        }
+      },
+      uploadFailed () {
+        this.$error('Upload failed')
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+
+</style>
diff --git a/src/pages/admin/views/problem/Problem.vue b/src/pages/admin/views/problem/Problem.vue
index a1210a1df..6694e4f12 100644
--- a/src/pages/admin/views/problem/Problem.vue
+++ b/src/pages/admin/views/problem/Problem.vue
@@ -1,16 +1,6 @@
 <template>
   <div class="problem">
-    <Panel title="Import Problem" v-if="mode == 'hide'">
-      <el-upload
-        action="/api/admin/test_case"
-        name="file"
-        :data="{spj: problem.spj}"
-        :show-file-list="false"
-        :on-success="uploadSucceeded"
-        :on-error="uploadFailed">
-        <el-button size="small" type="primary" icon="el-icon-fa-upload">Choose File</el-button>
-      </el-upload>
-    </Panel>
+
     <Panel :title="title">
       <el-form ref="form" :model="problem" :rules="rules" label-position="top" label-width="70px">
         <el-row :gutter="20">