factory_web/src/views/edu/exam.vue

283 lines
6.6 KiB
Vue

<template>
<el-container>
<el-header>
<div class="left-panel">
<el-button
type="primary"
icon="el-icon-plus"
@click="table_add"
v-auth="'exam.create'"
></el-button>
</div>
<div class="right-panel">
<el-input
style="margin-right: 5px"
v-model="query.search"
placeholder="名称"
clearable
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
></el-button>
</div>
</el-header>
<el-main class="nopadding">
<scTable
ref="table"
:apiObj="apiObj"
row-key="id"
:query="query"
>
<el-table-column
label="考试名"
prop="name"
min-width="300"
></el-table-column>
<el-table-column
label="进行中"
width="80"
>
<template #default="scope">
<el-tag v-if="scope.row.can_attend" type="success">是</el-tag>
</template>
</el-table-column>
<el-table-column
label="开启时间"
prop="open_time"
></el-table-column>
<el-table-column
label="关闭时间"
prop="close_time"
></el-table-column>
<el-table-column
label="考试机会"
prop="chance"
width="80"
></el-table-column>
<el-table-column
label="试卷名"
prop="paper_name"
></el-table-column>
<el-table-column
label="是否公开"
width="80"
>
<template #default="scope">
<el-tag v-if="scope.row.is_public" type="success">是</el-tag>
</template>
</el-table-column>
<el-table-column
label="操作"
fixed="right"
align="center"
width="160"
>
<template #default="scope">
<el-button
link
size="small"
@click="table_edit(scope.row)"
v-auth="'exam.update'"
type="primary"
>编辑</el-button
>
<el-button
link
size="small"
@click="row_detail(scope.row)"
type="primary"
>答题详情</el-button
>
<el-popconfirm
title="确定删除吗?"
@confirm="table_del(scope.row, scope.$index)"
>
<template #reference>
<el-button
link
size="small"
v-auth="'exam.delete'"
type="danger"
>删除</el-button
>
</template>
</el-popconfirm>
</template>
</el-table-column>
</scTable>
</el-main>
<el-dialog v-model="examDialog" title="新增/编辑考试">
<el-form
:model="examForm"
label-width="100px"
ref="questioncatForm"
>
<el-form-item label="名称" prop="name" required>
<el-input
v-model="examForm.name"
clearable
></el-input>
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="开启时间" prop="open_time" required>
<el-date-picker
v-model="examForm.open_time"
type="datetime"
style="width:100%"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="关闭时间" prop="close_time">
<el-date-picker
v-model="examForm.close_time"
type="datetime"
style="width:100%"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="考试机会"
prop="chance"
required
>
<el-input-number
v-model="examForm.chance"
controls-position="right"
:min="1"
style="width: 100%"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="所用试卷" prop="paper" required v-if="examDialog">
<xtSelect
v-model="examForm.paper"
v-model:label="examForm.paper_name"
:apiObj = "apiPaper"
style="width: 100%;"
>
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column
label="限时(分钟)"
prop="limit"
></el-table-column>
<el-table-column
label="满分"
prop="total_score"
></el-table-column>
</xtSelect>
<!-- <el-select
v-model="examForm.paper"
filterable
reserve-keyword
style="width: 100%"
>
<el-option
v-for="item in paperOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> -->
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="是否公开"
prop="is_public"
required
>
<el-switch v-model="examForm.is_public"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button
type="primary"
@click="examSubmit()"
>保 存</el-button
>
</template>
</el-dialog>
<el-drawer v-model="drawerVisible" title="考试记录" size="50%">
<ExamRecord :exam="examId" v-if="drawerVisible"></ExamRecord>
</el-drawer>
</el-container>
</template>
<script>
const defaultExam = {chance: 1, is_public:false}
import ExamRecord from './examrecord.vue';
export default {
components: { ExamRecord },
data() {
return {
paperOptions:[],
examDialog: false,
apiObj: this.$API.edu.exam.list,
apiPaper: this.$API.edu.paper.list,
query: {
search: "",
},
examForm: Object.assign({}, defaultExam),
drawerVisible: false,
examId: null
};
},
mounted() {
},
methods: {
handleQuery() {
this.$refs.table.queryData(this.query);
},
table_add() {
this.examForm = Object.assign({}, defaultExam);
this.examDialog = true;
},
table_edit(row) {
this.examForm = Object.assign({}, row);
this.examDialog = true;
},
row_detail(row) {
// this.$router.push({
// path: "/edu/examrecord/",
// query: { id: row.id },
// });
this.examId = row.id;
this.drawerVisible = true;
},
table_del(row) {
this.$API.edu.exam.delete.req(row.id).then(() => {
this.handleQuery();
});
},
examSubmit() {
this.examSaving = true;
if (this.examForm.id){
this.$API.edu.exam.update.req(this.examForm.id, this.examForm).then(res=>{
this.$message.success("更新成功");
this.examSaving = false;
this.examDialog = false;
this.handleQuery();
}).catch(e=>{this.examSaving=false})
}else{
this.$API.edu.exam.create.req(this.examForm).then(res=>{
this.$message.success("创建成功");
this.examSaving = false;
this.examDialog = false;
this.handleQuery();
}).catch(err=>{
this.examSaving = false;
})
}
}
},
};
</script>