factory_web/src/views/edu/exam.vue

270 lines
6.1 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-icon v-if="scope.row.can_attend" color="green"
><CircleCheckFilled
/></el-icon>
</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-icon v-if="scope.row.is_public" color="green"
><CircleCheckFilled
/></el-icon>
</template>
</el-table-column>
<el-table-column
label="操作"
fixed="right"
align="center"
width="150"
>
<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>
<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"
:loading="examSaving"
@click="examSubmit()"
> </el-button
>
</template>
</el-dialog>
</el-container>
</template>
<script>
const defaultExam = {chance: 1, is_public:false}
export default {
data() {
return {
paperOptions:[],
examDialog: false,
apiObj: this.$API.edu.exam.list,
query: {
search: "",
},
examForm: Object.assign({}, defaultExam),
};
},
mounted() {
this.getPaperOptions();
},
methods: {
getPaperOptions() {
this.$API.edu.paper.list.req({
page: 0
}).then(res => {
this.paperOptions = res;
});
},
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 },
});
},
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>