增加自定义题库的编辑功能

src/api/question.ts

@@ -24,6 +24,19 @@ export const defaultQuestionData: IQuestionData = {
 
 }
 
+export function formatQType(val: number) {
+  switch (val) {
+    case 1:
+      return '普通'
+    case 2:
+      return '图片'
+    case 3:
+      return '问卷'
+    default:
+      return '未知'
+  }
+}
+
 export const getQuestions = (params: any) =>
   request({
     url: '/api/puzzles',

src/api/shoppuzzle.ts

@@ -27,6 +27,13 @@ export const saveShopQuestion = (data: any) =>
     data
   })
 
+export const importQuestions = (shop: string, data: any) =>
+  request({
+    url: `/api/${shop}/puzzle/import`,
+    method: 'post',
+    data
+  })
+
 export const deleteShopQuestion = (shop: string, id: string) =>
   request({
     url: `/api/${shop}/puzzle/${id}/delete`,

src/views/exam/components/PuzzleList.vue

@@ -94,7 +94,7 @@
         label="题目类型"
     >
       <template slot-scope="{row}">
-        <span>{{ row.type === 3 ? '问卷' : '普通' }}</span>
+        <span>{{ puzzleType(row.type) }}</span>
       </template>
     </el-table-column>
     <el-table-column
@@ -306,6 +306,7 @@ import { UserModule } from '@/store/modules/user'
 import { IShopData } from '@/api/types'
 import { getShops } from '@/api/shop'
 import { EVENT_SHOP_UPDATE, EventBus } from '@/utils/event-bus'
+import { formatQType } from '@/api/question'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -359,6 +360,10 @@ export default class extends Vue {
     return UserModule.level
   }
 
+  private puzzleType(val: number) {
+    return formatQType(val)
+  }
+
   async created() {
     if (UserModule.level === 1) {
       await this.getRemoteDeptList()

src/views/question/list.vue

@@ -79,7 +79,9 @@
           label="混淆答案"
       >
         <template slot-scope="{row}">
-          <span>{{ row.a2 || '' }} {{ row.a3 || '' }} {{ row.a4 || '' }}</span>
+          <el-tag type="info" v-if="row.a2">{{row.a2}}</el-tag>
+          <el-tag type="info" v-if="row.a3">{{row.a3}}</el-tag>
+          <el-tag type="info" v-if="row.a4">{{row.a4}}</el-tag>
         </template>
       </el-table-column>
 
@@ -277,3 +279,8 @@ export default class extends Vue {
   }
 }
 </script>
+<style lang="scss" scoped>
+.el-tag{
+  margin-right: 5px;
+}
+</style>

src/views/question/shop_puzzles.vue

@@ -44,23 +44,65 @@
         <el-button @click="resetFilterForm">重置</el-button>
       </el-form-item>
     </el-form>
-    <router-link :to="'/question/newshoppuzzle/' + filterForm.shop">
+    <div class="action-bar">
-      <el-button
+      <input
-          type="primary"
+          ref="excel-upload-input"
-          icon="el-icon-edit"
+          class="excel-upload-input"
-          v-permission="['shoppuzzle:edit']"
+          type="file"
+          accept=".xlsx, .xls"
+          @change="handleClick"
       >
-        添加
+      <router-link :to="'/question/newshoppuzzle/' + filterForm.shop" style="margin-right: 10px;">
+        <el-button
+            type="primary"
+            icon="el-icon-edit"
+            v-permission="['shoppuzzle:edit']"
+        >
+          添加
+        </el-button>
+      </router-link>
+      <el-button
+          type="success"
+          icon="el-icon-upload2"
+          @click="handleImport"
+      >
+        导入Excel
       </el-button>
-    </router-link>
+      <el-button
+          type="warning"
+          icon="el-icon-download"
+          :loading="downloadLoading"
+          @click="handleExport"
+          v-if="multipleSelection.length>0"
+      >
+        {{exportBtnName}}
+      </el-button>
+      <el-button
+          type="danger"
+          icon="el-icon-delete-solid"
+          @click="handleRemoveAll"
+          v-if="multipleSelection.length>0"
+      >
+        {{deleteBtnName}}
+      </el-button>
+    </div>
     <el-table
         v-loading="listLoading"
         :data="list"
         border
         fit
         highlight-current-row
+        stripe
+        row-key="question"
+        ref="question_table"
+        @selection-change="handleSelectionChange"
         style="width: 100%;margin-top:30px;"
     >
+      <el-table-column
+          type="selection"
+          :reserve-selection="true"
+          width="55">
+      </el-table-column>
       <el-table-column
           width="180px"
           align="center"
@@ -76,7 +118,7 @@
       >
         <template slot-scope="{row}">
           <router-link
-              :to="'/question/edit/'+row._id"
+              :to="'/question/shoppuzzle/'+row.shop+'/'+row._id"
               class="link-type"
           >
             <span>{{ row.question }}</span>
@@ -96,10 +138,18 @@
           label="混淆答案"
       >
         <template slot-scope="{row}">
-          <span>{{ row.a2 || '' }} {{ row.a3 || '' }} {{ row.a4 || '' }}</span>
+          <el-tag type="info" v-if="row.a2">{{row.a2}}</el-tag>
+          <el-tag type="info" v-if="row.a3">{{row.a3}}</el-tag>
+          <el-tag type="info" v-if="row.a4">{{row.a4}}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+          label="题目类型"
+      >
+        <template slot-scope="{row}">
+          <span>{{ puzzleType(row.type) }}</span>
         </template>
       </el-table-column>
-
       <el-table-column
           label="Tags"
       >
@@ -152,12 +202,15 @@
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import Pagination from '@/components/Pagination/index.vue'
 import { getShops } from '@/api/shop'
-import { parseTime } from '@/utils'
+import { formatJson, parseTime } from '@/utils'
-import { IQuestionData } from '@/api/question'
+import { IQuestionData, formatQType } from '@/api/question'
 import { UserModule } from '@/store/modules/user'
-import { deleteShopQuestion, getShopCategory, getShopQuestions } from '@/api/shoppuzzle'
+import { deleteShopQuestion, getShopCategory, getShopQuestions, importQuestions } from '@/api/shoppuzzle'
 import { IShopData } from '@/api/types'
 import { EVENT_SHOP_PUZZLES_UPDATE, EVENT_SHOP_UPDATE, EventBus } from '@/utils/event-bus'
+import { exportJson2Excel } from '@/utils/excel'
+import XLSX from 'xlsx'
+import { IExamQuerstion } from '@/api/exam'
 
 @Component({
   name: 'ShopPuzzles',
@@ -206,14 +259,29 @@ export default class extends Vue {
     shop: ''
   }
 
+  private excelData = {
+    header: null,
+    results: null
+  }
+
+  private deleteBtnName = '删除所有'
+  private exportBtnName = '导出所有'
+  private downloadLoading = false
+  private multipleSelection : IExamQuerstion[] = []
+
   $refs!: {
     filterForm: HTMLFormElement
+    'excel-upload-input': HTMLFormElement
   }
 
   get userLevel() {
     return UserModule.level
   }
 
+  private puzzleType(val: number) {
+    return formatQType(val)
+  }
+
   async created() {
     if (UserModule.level === 1) {
       await this.getRemoteDeptList()
@@ -315,6 +383,131 @@ export default class extends Vue {
       this.cateLoading = false
     }
   }
+
+  // begin of excel
+
+  private handleSelectionChange(val: any) {
+    this.multipleSelection = val
+    console.log(this.multipleSelection)
+  }
+
+  @Watch('multipleSelection')
+  private selectChange() {
+    this.deleteBtnName = this.multipleSelection.length > 0 ? '删除选中项' : '删除所有'
+    this.exportBtnName = this.multipleSelection.length > 0 ? '导出选中项' : '导出所有'
+  }
+
+  private handleClick(e: MouseEvent) {
+    const files = (e.target as HTMLInputElement).files
+    if (files) {
+      const rawFile = files[0] // only use files[0]
+      this.upload(rawFile)
+    }
+  }
+
+  private handleImport() {
+    (this.$refs['excel-upload-input']).click()
+  }
+
+  private handleExport() {
+    this.handleDownload()
+  }
+
+  private upload(rawFile: File) {
+    this.$refs['excel-upload-input'].value = '' // Fixes can't select the same excel
+
+    this.readerData(rawFile)
+  }
+
+  private async handleRemoveAll() {
+    try {
+      const str = this.multipleSelection.length > 0 ? '确定删除选中的题目' : '确定删除所有题目'
+      await this.$confirm(str, 'Warning', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+      if (this.multipleSelection.length > 0) {
+        for (const s of this.multipleSelection) {
+          this.questions.splice(this.questions.indexOf(s), 1)
+        }
+        (this.$refs.question_table as any).clearSelection()
+      } else {
+        this.questions.length = 0
+      }
+      this.sliceData()
+      this.$message({
+        type: 'success',
+        message: 'Deleted!'
+      })
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  private handleDownload() {
+    this.downloadLoading = true
+    const tHeader = ['question', 'a1', 'a2', 'a3', 'a4', 'type', 'tags']
+    const list = this.multipleSelection.length > 0 ? this.multipleSelection.slice(0) : this.questions.slice(0)
+    this.filename = parseTime(new Date(), '{y}{m}{d}{h}{i}{s}')
+    const dataHeader = ['question', 'a1', 'a2', 'a3', 'a4', 'type', 'groups']
+    const data = formatJson(dataHeader, list)
+    console.log('begin generate excel')
+    exportJson2Excel(tHeader, data, this.filename ? this.filename : undefined, undefined, undefined, true, 'xlsx')
+    this.downloadLoading = false
+  }
+
+  private readerData(rawFile: File) {
+    this.loading = true
+    const reader = new FileReader()
+    reader.onload = e => {
+      const data = (e.target as FileReader).result
+      const workbook = XLSX.read(data, { type: 'array' })
+      const firstSheetName = workbook.SheetNames[0]
+      const worksheet = workbook.Sheets[firstSheetName]
+      const results = XLSX.utils.sheet_to_json(worksheet)
+      this.generateData(results)
+      this.loading = false
+    }
+    reader.readAsArrayBuffer(rawFile)
+  }
+
+  private getHeaderRow(sheet: { [key: string]: any }) {
+    const headers: string[] = []
+    const range = XLSX.utils.decode_range(sheet['!ref'])
+    const R = range.s.r
+    // start in the first row
+    for (let C = range.s.c; C <= range.e.c; ++C) { // walk every column in the range
+      const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
+      // find the cell in the first row
+      let hdr = ''
+      if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
+      if (hdr === '') {
+        hdr = 'UNKNOWN ' + C // replace with your desired default
+      }
+      headers.push(hdr)
+    }
+    return headers
+  }
+
+  private async generateData(results: any) {
+    const datas = []
+    for (const _q of results) {
+      if (_q.tags) {
+        _q.groups = _q.tags.split(',')
+        delete _q.tags
+      }
+      datas.push(_q)
+    }
+    const { data } = await importQuestions(this.filterForm.shop, { datas })
+    console.log(data)
+    const msg = `操作成功, 共新增${data.insert || 0}个题目, 更新${data.update || 0}个题目`
+    this.$message({
+      type: 'success',
+      message: msg
+    })
+    this.getList()
+  }
 }
 </script>
 
@@ -322,4 +515,15 @@ export default class extends Vue {
   .el-tag{
     margin-right: 5px;
   }
+  .action-bar {
+    margin-bottom: 15px;
+  }
+
+  .excel-upload-input {
+    display: none;
+    z-index: -9999;
+  }
+  .el-form-item{
+    margin-bottom: 22px;
+  }
 </style>