391 lines
16 KiB
Vue
391 lines
16 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 查询表单 -->
|
||
<el-form :inline="true" :model="courseSearchForm">
|
||
<el-form-item label="课程名称">
|
||
<el-input v-model="courseSearchForm.courseName" placeholder="课程名称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="性质">
|
||
<el-select v-model="courseSearchForm.courseType" placeholder="性质">
|
||
<el-option v-for="(courseType, index) in courseTypes" :key="courseType" :label="courseType"
|
||
:value="index + 1"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="courseListGet">查询</el-button>
|
||
<el-button plain @click="courseSearchClear">清除</el-button>
|
||
<el-button type="success" @click="courseAdd">添加</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<br><br><hr>
|
||
|
||
<!-- 课程表格 -->
|
||
<el-table :data="courseList.data">
|
||
<el-table-column prop="name" label="名称"></el-table-column>
|
||
<el-table-column label="性质" width="150px">
|
||
<template slot-scope="scope">
|
||
<div>{{ courseTypes[scope.row.type - 1] }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="credit" label="学分" width="70px"></el-table-column>
|
||
<el-table-column prop="grade" label="年级" width="80px"></el-table-column>
|
||
<el-table-column label="专业" width="120px">
|
||
<template slot-scope="scope">
|
||
<div>{{ courseMajors[scope.row.major - 1] }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="备注" width="50px">
|
||
<template slot-scope="scope">
|
||
<el-popover trigger="click" placement="left">
|
||
<div style="max-width: 320px;">
|
||
<p v-if="scope.row.detail.length > 0">{{ scope.row.detail }}</p>
|
||
<p v-else>没有备注信息</p>
|
||
</div>
|
||
<i class="el-icon-info" slot="reference"></i>
|
||
</el-popover>
|
||
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="180px">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<el-button size="mini" type="primary" @click="courseEdit(scope.row)">编辑</el-button>
|
||
<el-button size="mini" type="danger" @click="courseDeleteSubmit(scope.row)">删除</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<br><br>
|
||
|
||
<!-- 分页器 -->
|
||
<el-pagination background layout="sizes, prev, pager, next" @size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange" :total="courseList.total">
|
||
</el-pagination>
|
||
|
||
<!-- 编辑弹出框 -->
|
||
<el-dialog title="编辑课程" :visible.sync="courseEditDialogVisible">
|
||
<el-form :model="courseEditForm">
|
||
<el-form-item label="课程名称">
|
||
<el-col :span="16">
|
||
<el-input v-model="courseEditForm.name" placeholder="课程名称" width="200px"></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="课程性质">
|
||
<el-col :span="16">
|
||
<el-select v-model="courseEditForm.type" placeholder="课程性质">
|
||
<el-option v-for="(courseType, index) in courseTypes" :key="courseType" :label="courseType"
|
||
:value="index + 1"></el-option>
|
||
</el-select>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="课程学分">
|
||
<el-col :span="16">
|
||
<el-input-number v-model="courseEditForm.credit"></el-input-number>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="课程年级">
|
||
<el-col :span="16">
|
||
<el-input v-model="courseEditForm.grade" placeholder="课程年级"></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="课程专业">
|
||
<el-col :span="16">
|
||
<el-select v-model="courseEditForm.major" placeholder="课程专业">
|
||
<el-option v-for="(courseMajor, index) in courseMajors" :key="courseMajor"
|
||
:label="courseMajor" :value="index + 1"></el-option>
|
||
</el-select>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="课程备注">
|
||
<el-col :span="16">
|
||
<el-input type="textarea" autosize placeholder="备注内容" v-model="courseEditForm.detail">
|
||
</el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="courseEditDialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="courseEditSubmit()">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 添加弹出框 -->
|
||
<el-dialog title="添加课程" :visible.sync="courseAddDialogVisible">
|
||
<el-form :model="courseEditForm" :rules="courseRules">
|
||
<el-form-item label="课程名称" prop="name">
|
||
<el-col :span="16">
|
||
<el-input v-model="courseEditForm.name" placeholder="课程名称" width="200px"></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="课程性质" prop="type">
|
||
<el-col :span="16">
|
||
<el-select v-model="courseEditForm.type" placeholder="课程性质">
|
||
<el-option v-for="(courseType, index) in courseTypes" :key="courseType" :label="courseType"
|
||
:value="index + 1"></el-option>
|
||
</el-select>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="课程学分" prop="credit">
|
||
<el-col :span="16">
|
||
<el-input-number v-model.number="courseEditForm.credit" step="0.5"></el-input-number>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="课程年级" prop="grade">
|
||
<el-col :span="16">
|
||
<el-input v-model.number="courseEditForm.grade" placeholder="课程年级"></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="课程专业" prop="major">
|
||
<el-col :span="16">
|
||
<el-select v-model="courseEditForm.major" placeholder="课程专业">
|
||
<el-option v-for="(courseMajor, index) in courseMajors" :key="courseMajor"
|
||
:label="courseMajor" :value="index + 1"></el-option>
|
||
</el-select>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="课程备注" prop="detail">
|
||
<el-col :span="16">
|
||
<el-input type="textarea" autosize placeholder="备注内容" v-model="courseEditForm.detail">
|
||
</el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="courseAddDialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="courseAddSubmit()">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import $ from 'jquery'
|
||
export default {
|
||
data() {
|
||
return {
|
||
courseSearchForm: {
|
||
courseName: '',
|
||
courseType: ''
|
||
},
|
||
courseTypes: ['公共基础必修课',
|
||
'公共选修课',
|
||
'学科基础课',
|
||
'专业必修课',
|
||
'专业选修课',
|
||
'集中性实践教学环节'],
|
||
courseMajors: ['软件工程', '空间信息', '大数据'],
|
||
courseList: {
|
||
total: 0,
|
||
pageSize: 10,
|
||
page: 1,
|
||
data: []
|
||
|
||
},
|
||
courseEditDialogVisible: false,
|
||
courseEditForm: { id: -1, name: "", type: "", credit: "", grade: "", major: "", detail: "" },
|
||
courseAddDialogVisible: false,
|
||
courseRules:{
|
||
name:[
|
||
{ required: true, message: '请输入课程名称', trigger: 'blur' },
|
||
{ min: 4, max: 25, message: '长度在 4 到 25 个字符', trigger: 'blur' }
|
||
],
|
||
type: [
|
||
{ required: true, message: '课程性质不能为空' },
|
||
],
|
||
credit:[
|
||
{ required: true, message: '课程学分不能为空' },
|
||
{ type: 'number', message: 'invalid' }
|
||
],
|
||
grade:[
|
||
{ required: true, message: '课程年级不能为空' },
|
||
{ type: 'number', message: 'invalid' }
|
||
],
|
||
major:[
|
||
{ required: true, message: '课程专业不能为空' },
|
||
],
|
||
detail:[
|
||
{ max: 200, message: '长度应小于 200 个字符', trigger: 'blur' }
|
||
]
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
courseSearchClear() {
|
||
this.courseSearchForm.courseName = '';
|
||
this.courseSearchForm.courseType = '';
|
||
this.courseListGet();
|
||
},
|
||
courseEdit(course) {
|
||
this.courseEditForm = course;
|
||
this.courseEditDialogVisible = true;
|
||
},
|
||
courseAdd() {
|
||
this.courseEditForm = { id: -1, name: "", type: "", credit: "", grade: "", major: "", detail: "" }
|
||
this.courseAddDialogVisible = true;
|
||
},
|
||
handleSizeChange(val) {
|
||
this.courseList.pageSize = val;
|
||
this.courseListGet();
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.courseList.page = val;
|
||
this.courseListGet();
|
||
},
|
||
courseEditSubmit() {
|
||
this.$confirm('确定要保存' + this.courseEditForm.name + '编辑吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
$.ajax({
|
||
url: this.$apiUrl + "/courseAction/edit",
|
||
method: "POST",
|
||
data: this.courseEditForm,
|
||
success: (data) => {
|
||
if (!data.success) {
|
||
this.$message({
|
||
type: 'error',
|
||
message: '保存编辑失败',
|
||
showClose: true
|
||
});
|
||
} else {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '保存编辑成功',
|
||
showClose: true
|
||
});
|
||
this.courseEditDialogVisible = false;
|
||
}
|
||
this.courseListGet();
|
||
},
|
||
error: (xhr) => {
|
||
this.$message({
|
||
type: 'error',
|
||
message: '请求数据失败，code=' + xhr.status,
|
||
showClose: true
|
||
});
|
||
}
|
||
});
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '取消保存',
|
||
showClose: true
|
||
});
|
||
});
|
||
},
|
||
courseAddSubmit() {
|
||
this.$confirm('确定要添加' + this.courseEditForm.name + '编辑吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
$.ajax({
|
||
url: this.$apiUrl + "/courseAction/add",
|
||
method: "POST",
|
||
data: this.courseEditForm,
|
||
success: (data) => {
|
||
if (!data.success) {
|
||
this.$message({
|
||
type: 'error',
|
||
message: '添加失败',
|
||
showClose: true
|
||
});
|
||
} else {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '添加成功',
|
||
showClose: true
|
||
});
|
||
this.courseAddDialogVisible = false;
|
||
}
|
||
this.courseListGet();
|
||
},
|
||
error: (xhr) => {
|
||
this.$message({
|
||
type: 'error',
|
||
message: '请求数据失败，code=' + xhr.status,
|
||
showClose: true
|
||
});
|
||
}
|
||
});
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '取消添加',
|
||
showClose: true
|
||
});
|
||
});
|
||
},
|
||
courseDeleteSubmit(course) {
|
||
this.$confirm('确定要删除' + course.name + '吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
$.ajax({
|
||
url: this.$apiUrl + "/courseAction/delete",
|
||
method: "POST",
|
||
data: { id: course.id },
|
||
success: (data) => {
|
||
if (!data.success) {
|
||
this.$message({
|
||
type: 'error',
|
||
message: '删除失败',
|
||
showClose: true
|
||
});
|
||
} else {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功',
|
||
showClose: true
|
||
});
|
||
}
|
||
this.courseListGet();
|
||
},
|
||
error: (xhr) => {
|
||
this.$message({
|
||
type: 'error',
|
||
message: '请求数据失败，code=' + xhr.status,
|
||
showClose: true
|
||
});
|
||
}
|
||
});
|
||
}).catch(()=>{
|
||
this.$message({
|
||
type: 'info',
|
||
message: '取消删除',
|
||
showClose: true
|
||
});
|
||
});
|
||
},
|
||
courseListGet() {
|
||
$.ajax({
|
||
url: this.$apiUrl + "/courseAction/get",
|
||
method: "GET",
|
||
data: {
|
||
page: this.courseList.page,
|
||
pageSize: this.courseList.pageSize,
|
||
keyword: this.courseSearchForm.courseName,
|
||
type: this.courseSearchForm.courseType
|
||
},
|
||
success: (data) => {
|
||
console.log(data);
|
||
this.courseList.data = data.data;
|
||
this.courseList.total = data.count;
|
||
},
|
||
error: (xhr) => {
|
||
this.$message({
|
||
type: 'error',
|
||
message: '请求数据失败，code=' + xhr.status,
|
||
showClose: true
|
||
});
|
||
}
|
||
});
|
||
},
|
||
},
|
||
mounted() {
|
||
this.courseListGet();
|
||
}
|
||
};
|
||
</script> |