增加自定义题库的编辑功能
This commit is contained in:
zhl
parent
5f2a11b038
commit
b54d4ec5f0
@ -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',
|
||||
|
||||
@ -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`,
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -44,23 +44,65 @@
|
||||
<el-button @click="resetFilterForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<router-link :to="'/question/newshoppuzzle/' + filterForm.shop">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
v-permission="['shoppuzzle:edit']"
|
||||
<div class="action-bar">
|
||||
<input
|
||||
ref="excel-upload-input"
|
||||
class="excel-upload-input"
|
||||
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 { IQuestionData } from '@/api/question'
|
||||
import { formatJson, parseTime } from '@/utils'
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user