284 lines
7.6 KiB
Vue
284 lines
7.6 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div style="margin-top:10px">
|
|
<el-cascader
|
|
v-model="questioncatC"
|
|
:options="questioncatData"
|
|
clearable
|
|
style="width: 400px"
|
|
@change="handleFilter"
|
|
></el-cascader>
|
|
<el-select
|
|
v-model="listQuery.type"
|
|
placeholder="题型"
|
|
clearable
|
|
style="width: 120px"
|
|
class="filter-item"
|
|
@change="handleFilter"
|
|
>
|
|
<el-option
|
|
v-for="item in typeOptions"
|
|
:key="item.key"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
<el-input
|
|
v-model="search"
|
|
placeholder="输入题干进行搜索"
|
|
style="width: 200px;"
|
|
class="filter-item"
|
|
@keyup.enter.native="handleSearch"
|
|
/>
|
|
<el-button
|
|
class="filter-item"
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
@click="handleSearch"
|
|
>搜索</el-button>
|
|
<el-button
|
|
class="filter-item"
|
|
type="primary"
|
|
icon="el-icon-refresh-left"
|
|
@click="resetFilter"
|
|
>刷新重置</el-button>
|
|
<div style="margin-top:10px">
|
|
<el-popover
|
|
placement="top"
|
|
width="160"
|
|
v-if="checkPermission(['consumer_import'])"
|
|
v-model="popovervisible"
|
|
>
|
|
<p>导入题目前,请下载模板并按格式录入.</p>
|
|
<div style="text-align: left; margin: 0;">
|
|
<el-link href="/media/muban/question.xlsx" target="_blank" @click="popovervisible = false" type="primary">下载模板</el-link>
|
|
<el-upload
|
|
:action="uploadUrl"
|
|
:on-success="handleUploadSuccess"
|
|
accept=".xlsx"
|
|
:headers="myHeaders"
|
|
:show-file-list ="false"
|
|
>
|
|
<el-button size="small" type="primary" @click="popovervisible = false">上传导入</el-button>
|
|
</el-upload>
|
|
</div>
|
|
<el-button slot="reference">Excel导入</el-button>
|
|
</el-popover>
|
|
</div>
|
|
</div>
|
|
<el-table
|
|
:data="tableData"
|
|
style="width: 100%;margin-top:10px;"
|
|
border
|
|
stripe
|
|
fit
|
|
v-loading="listLoading"
|
|
highlight-current-row
|
|
max-height="600"
|
|
>
|
|
<el-table-column type="index" width="50"></el-table-column>
|
|
<el-table-column align="left" label="题干">
|
|
<template slot-scope="scope">{{ scope.row.name }}</template>
|
|
</el-table-column>
|
|
<el-table-column align="left" label="所属题库">
|
|
<template slot-scope="scope">{{ scope.row.questioncat_name }}</template>
|
|
</el-table-column>
|
|
<el-table-column align="left" label="题型">
|
|
<template slot-scope="scope">{{ scope.row.type }}</template>
|
|
</el-table-column>
|
|
<el-table-column align="left" label="难易度">
|
|
<template slot-scope="scope">{{ scope.row.level }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="创建日期">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.create_time }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
@click="handleDetail(scope)"
|
|
icon="el-icon-more"
|
|
></el-button>
|
|
<el-button
|
|
type="danger"
|
|
size="small"
|
|
@click="handleDelete(scope)"
|
|
icon="el-icon-delete"
|
|
:disabled="!checkPermission(['questioncat_delete'])"
|
|
></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination
|
|
v-show="total>0"
|
|
:total="total"
|
|
:page.sync="listQuery.page"
|
|
:limit.sync="listQuery.limit"
|
|
@pagination="getList"
|
|
/>
|
|
<el-dialog
|
|
title="题目详情"
|
|
:visible.sync="dialogVisible"
|
|
width="30%">
|
|
<div>{{question.type}}</div>
|
|
<div>{{question.name}}</div>
|
|
<ul id="repeat">
|
|
<li v-for="(value,key,index) in question.options">
|
|
{{ key }}:{{value}}
|
|
</li>
|
|
</ul>
|
|
<div>正确答案{{question.right}}</div>
|
|
<div>{{question.resolution}}</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getQuestioncatAll,
|
|
getQuestionList,
|
|
createQuestion,
|
|
deleteQuestion,
|
|
importQuestion
|
|
} from "@/api/question";
|
|
import { genTree, deepClone } from "@/utils";
|
|
import checkPermission from "@/utils/permission";
|
|
import Pagination from "@/components/Pagination";
|
|
import { uploadUrl, myHeaders } from "@/api/file";
|
|
import { getToken } from "@/utils/auth";
|
|
|
|
const defaultObj = {
|
|
id: "",
|
|
name: ""
|
|
};
|
|
const listQuery = {
|
|
page: 1,
|
|
limit: 20,
|
|
search:''
|
|
};
|
|
export default {
|
|
components: { Pagination },
|
|
data() {
|
|
return {
|
|
popovervisible:false,
|
|
uploadUrl: uploadUrl(),
|
|
myHeaders: myHeaders(),
|
|
questioncat: {
|
|
id: "",
|
|
name: ""
|
|
},
|
|
total: 0,
|
|
listQuery: listQuery,
|
|
search:"",
|
|
tableData: [],
|
|
questioncatData:[],
|
|
listLoading: true,
|
|
dialogVisible: false,
|
|
dialogType: "new",
|
|
rule1: {
|
|
name: [{ required: true, message: "请输入名称", trigger: "blur" }]
|
|
},
|
|
typeOptions: [
|
|
{ key: 1, label: "单选", value: "单选" },
|
|
{ key: 2, label: "多选", value: "多选"},
|
|
{ key: 3, label: "判断", value: "判断" }
|
|
],
|
|
question:{},
|
|
questioncatC:[],
|
|
};
|
|
},
|
|
computed: {},
|
|
created() {
|
|
this.getList();
|
|
this.getQuestioncatAll();
|
|
},
|
|
methods: {
|
|
checkPermission,
|
|
handleUploadSuccess(res, file) {
|
|
if (res.code == 200) {
|
|
const loading = this.$loading({text:"正在导入中..."})
|
|
importQuestion(res.data).then(response => {
|
|
loading.close()
|
|
if(response.code==200){
|
|
this.$message({
|
|
message: '导入成功',
|
|
type: 'success'
|
|
});
|
|
this.getList(listQuery)
|
|
}else if(response.code==206){
|
|
this.$message({
|
|
message: '部分未成功' + response.data,
|
|
type: 'success'
|
|
});
|
|
this.getList(listQuery)
|
|
}else{
|
|
this.$message.error(response.msg);
|
|
}
|
|
|
|
});
|
|
}else{
|
|
this.$message.error("Excel上传失败!");
|
|
}
|
|
},
|
|
getList(query = this.listQuery) {
|
|
this.listLoading = true;
|
|
getQuestionList(query).then(response => {
|
|
this.tableData = response.data.results;
|
|
this.total = response.data.count;
|
|
this.listLoading = false;
|
|
});
|
|
},
|
|
getQuestioncatAll() {
|
|
getQuestioncatAll().then(response => {
|
|
this.questioncatData = genTree(response.data);
|
|
});
|
|
},
|
|
handleFilter() {
|
|
if(this.questioncatC.length) {
|
|
this.listQuery.questioncat = this.questioncatC[this.questioncatC.length-1]
|
|
}else{
|
|
this.listQuery.questioncat = ''
|
|
}
|
|
this.listQuery.page = 1;
|
|
this.getList();
|
|
},
|
|
resetFilter() {
|
|
this.search = ""
|
|
this.listQuery = listQuery
|
|
this.getList();
|
|
},
|
|
handleSearch() {
|
|
this.getList({ search: this.search });
|
|
},
|
|
handleDetail(scope) {
|
|
this.dialogVisible = true
|
|
this.question = scope.row
|
|
},
|
|
handleDelete(scope) {
|
|
this.$confirm("确认删除该题目吗?将丢失数据!", "警告", {
|
|
confirmButtonText: "确认",
|
|
cancelButtonText: "取消",
|
|
type: "error"
|
|
})
|
|
.then(async () => {
|
|
await deleteQuestion(scope.row.id);
|
|
this.getList();
|
|
this.$message({
|
|
type: "success",
|
|
message: "成功删除!"
|
|
});
|
|
})
|
|
.catch(err => {
|
|
// console.error(err);
|
|
});
|
|
},
|
|
}
|
|
};
|
|
</script>
|