Commit ce913a28 authored by 黄奎's avatar 黄奎

页面修改

parent f4e5b148
......@@ -403,9 +403,40 @@ export function BeatchReadMsgLog(data) {
})
}
/**
* 新增修改班级课程
* @param {JSON对象} data
*/
export function setClassCourse(data) {
return request({
url: '/Class/SetClassCourse',
method: 'post',
data
})
}
/**
* 获取班级关联课程列表
* @param {JSON对象} data
*/
export function queryClassCourseList(data) {
return request({
url: '/Class/GetClassCourseList',
method: 'post',
data
})
}
/**
* 获取班级关联课程列表
* @param {JSON对象} data
*/
export function deleteClassCourse(data) {
return request({
url: '/Class/RemoveClassCourse',
method: 'post',
data
})
}
\ No newline at end of file
\ No newline at end of file
......@@ -10,7 +10,7 @@
<q-card-section class="q-pt-none scroll" style="max-height: 70vh">
<div class="row">
<div class="col">
<q-select dense standout behavior="menu" filled v-model="chosenCourse" :options="courseOptions"
<q-select dense standout behavior="menu" filled v-model="selectCourse" :options="courseOptions"
@filter="filterCourseFn" input-debounce="0" use-input option-label="CourseName" option-value="CourseId"
emit-value map-options placeholder="请选择" clearable />
</div>
......@@ -18,11 +18,17 @@
<q-btn color="primary" label="添加" @click="addCourse"></q-btn>
</div>
</div>
<q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat style="margin-top:20px;" class="sticky-column-table"
<q-table :pagination="msg" no-data-label="暂无相关数据" flat style="margin-top:20px;" class="sticky-column-table"
separator="none" :data="dataList" :columns="columns">
<template v-slot:body-cell-Id="props">
<q-td auto-width :props="props">
<q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="删除"
@click="deleteClassCourse(props.row,props.row.index)" />
</q-td>
</template>
<template v-slot:bottom>
<!-- <q-pagination class="full-width justify-end" v-model="msg.PageIndex" color="primary" :max="msg.PageCount"
:input="true" @input="changePage" /> -->
<!-- <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
:input="true" @input="changePage" /> -->
</template>
</q-table>
</q-card-section>
......@@ -37,25 +43,29 @@
</template>
<script>
import {
queryCourseDropdownList,
setClassCourse,
queryClassCourseList,
deleteClassCourse
} from '../../api/course/index'
export default {
components: {},
props: {
setingObj: {
type: Object,
default: null
}
},
data() {
return {
msg: {},
persistent: true,
saveCourseLoading: false,
chosenCourse: null, //选中的课程
chosenCourses: [],
courseOptions: [{
CourseName: '考级保研班1',
CourseId: 1
}, {
CourseName: '考级保研班2',
CourseId: 2
}],
dataList:[],
selectCourse: "", //选中的课程
CourseList: [], //课程列表
courseOptions: [], //筛选的课程列表
dataList: [],
columns: [{
name: 'CourseName',
label: '课程名称',
......@@ -63,34 +73,70 @@
align: 'left'
},
{
name: 'Price',
name: 'SellPrice',
label: '价格',
field: 'Price',
field: 'SellPrice',
align: 'left'
},
{
name: 'CourseHour',
name: 'ClassHours',
label: '课时数',
field: 'CourseHour',
field: 'ClassHours',
align: 'left'
},
{
name: 'CateId',
name: 'Id',
label: '操作',
field: 'CateId'
field: 'Id'
}
],
}
},
created() {
this.getCourseList();
},
mounted() {
this.getClassCourse();
},
methods: {
//获取课程列表
getCourseList() {
queryCourseDropdownList({
IsQPrice: 1
}).then(res => {
if (res.Code == 1) {
this.CourseList = res.Data;
this.courseOptions = this.CourseList;
}
})
},
//获取班级关联课程列表
getClassCourse() {
queryClassCourseList({
ClassId: this.setingObj.ClassId
}).then(res => {
if (res.Code == 1) {
this.dataList = res.Data;
}
})
},
saveCourse() {
var saveMsg = {
courseMsg: this.dataList
};
setClassCourse(saveMsg).then(res => {
if (res.Code == 1) {
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
timeout: 2000,
message: '数据保存成功!',
position: 'top'
})
this.closeCourseForm();
this.$emit("success");
}
});
},
//关闭弹窗
closeCourseForm() {
......@@ -100,13 +146,66 @@
//课程筛选
filterCourseFn(val, update, abort) {
update(() => {
// this.courseOptions = this.courseList.filter(
// v => v.CourseName.indexOf(val) > -1
// );
this.courseOptions = this.CourseList.filter(
v => v.CourseName.indexOf(val) > -1
);
});
},
//添加关联课程
addCourse() {
if (this.selectCourse) {
let temp = this.CourseList.find(x => x.CourseId == this.selectCourse);
if (temp) {
this.dataList.push({
Id: 0,
ClassId: this.setingObj.ClassId,
CourseId: temp.CourseId,
CourseName: temp.CourseName,
SellPrice: temp.SellPrice,
ClassHours: temp.ClassHours,
});
}
this.selectCourse = "";
}
},
//删除班级课程
deleteClassCourse(item, index) {
var delMsg = {
Id: item.Id
};
this.$q.dialog({
title: '提示信息',
message: "是否要删除此关联课程?",
cancel: true,
persistent: true,
ok: "确定",
cancel: "取消",
}).onOk(() => {
if (item.Id > 0) {
deleteClassCourse(delMsg).then(res => {
if (res.Code == 1) {
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
timeout: 2000,
message: '删除成功!',
position: 'top'
})
this.dataList.splice(index, 1);
} else {
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
timeout: 2000,
message: res.Message,
position: 'top'
})
}
})
} else {
this.dataList.splice(index, 1);
}
}).onCancel(() => {});
}
}
}
......
......@@ -15,7 +15,7 @@
<div class="text-muted" style="font-size:13px">{{showObj.SchoolName}}·{{showObj.PostName}}</div>
<div class="flex items-center text-muted">
<inline-svg class="svg-icon svg-icon-primary q-mr-xs" src="icons/svg/Communication/Mail-notification.svg"></inline-svg>
<span>alex9012@vip.qq.com</span>
<span>{{showObj.Email}}</span>
</div>
<div class="q-mt-xs">
<q-btn color="primary" flat @click="logout">退出登录</q-btn>
......
<style>
.OtherCourseNum{
display:inline-block;
width:25px;
height:25px;
.OtherCourseNum {
display: inline-block;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
border:1px solid #2961FE;
border: 1px solid #2961FE;
border-radius: 50%;
cursor: pointer;
}
.OCourseTable{
width:400px;
.OCourseTable {
width: 400px;
text-align: center;
}
.OCourseTable tr td{
height:40px;
.OCourseTable tr td {
height: 40px;
}
.OCourseTable tr th{
height:40px;
.OCourseTable tr th {
height: 40px;
background-color: rgb(238, 238, 239);
}
</style>
<template>
<div class="page-body">
......@@ -48,8 +52,9 @@
</div>
</div>
<div class="page-content">
<q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table sticky-right-column-table"
separator="none" :data="data" :columns="columns" row-key="name">
<q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
class="sticky-column-table sticky-right-column-table" separator="none" :data="data" :columns="columns"
row-key="name">
<template v-slot:top="props">
<div class="col-2 q-table__title">班级信息</div>
<q-space />
......@@ -67,23 +72,34 @@
</template>
<template v-slot:body-cell-OtherCourseName="props">
<q-td auto-width :props="props">
课程名称:<span class="OtherCourseNum">
8
<q-popup-proxy>
<q-banner>
<table class="OCourseTable" style="border-collapse:collapse;">
<tr>
<th>课程名称</th>
<th>课时数</th>
</tr>
<tr>
<td>日语N10</td>
<td>12</td>
</tr>
</table>
</q-banner>
</q-popup-proxy>
</span>
<template v-if="props.row.OtherCourseList">
<template v-if="props.row.OtherCourseList.length==1">
{{props.row.OtherCourseList[0].CourseName}}{{props.row.OtherCourseList[0].ClassHours}}课时】
</template>
<template v-if="props.row.OtherCourseList.length>1">
{{props.row.OtherCourseList[0].CourseName}}
<span class="OtherCourseNum">
{{props.row.OtherCourseList.length}}
<q-popup-proxy>
<q-banner>
<table class="OCourseTable" style="border-collapse:collapse;">
<tr>
<th>课程名称</th>
<th>课时数</th>
</tr>
<tr v-for="(sItem,sIndex) in props.row.OtherCourseList">
<td>{{sItem.CourseName}}</td>
<td>{{sItem.ClassHours}}</td>
</tr>
</table>
</q-banner>
</q-popup-proxy>
</span>
</template>
<template v-if="props.row.OtherCourseList.length==0">
</template>
</template>
</q-td>
</template>
<template v-slot:body-cell-TeacherName="props">
......@@ -138,10 +154,8 @@
</template>
<template v-slot:body-cell-optioned="props">
<q-td :props="props">
<q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
@click="EditCourse(props.row)" />
<q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left:10px;">
<q-list>
<q-item clickable v-close-popup @click="gotoOrder(props.row)">
......@@ -164,7 +178,7 @@
<q-item-label>恢复</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="getOtherCourse(props.row)">
<q-item clickable v-close-popup @click="showOtherCourse(props.row)">
<q-item-section>
<q-item-label>关联其他课程</q-item-label>
</q-item-section>
......@@ -176,9 +190,11 @@
</q-table>
<class-form v-if="isShowClassForm" :save-obj="classObjOption" @close="closeClassSaveForm" @success="refreshPage">
</class-form>
<classinfo-form v-if="isShowClassInfo" :seting-obj="classObjOption" @close="closeClass" @success="refreshClass">
<classinfo-form v-if="isShowClassInfo" :seting-obj="classObjOption" @close="closeClassSaveForm"
@success="refreshPage">
</classinfo-form>
<othercourseForm v-if="IsShowOtherCourse" @close="closeOtherCourse" @success="refreshOtherCourse">
<othercourseForm v-if="IsShowOtherCourse" :seting-obj="classObjOption" @close="closeClassSaveForm"
@success="refreshPage">
</othercourseForm>
</div>
</div>
......@@ -271,7 +287,6 @@
],
data: [],
loading: false,
isShowClassForm: false,
msg: {
pageIndex: 1,
pageSize: 12,
......@@ -288,13 +303,14 @@
schoolList: [],
pageCount: 0,
classObjOption: null,
isShowClassInfo: false, //是否显示课程信息
isShowEdit: false,
statusMsg: {
ClassId: 0,
ClassStatus: 0
},
IsShowOtherCourse:false,
isShowClassForm: false, //是否显示新增修改弹窗
isShowClassInfo: false, //是否显示课程信息
IsShowOtherCourse: false, //是否显示其他课程
}
},
created() {
......@@ -454,7 +470,12 @@
},
//关闭弹窗
closeClassSaveForm() {
this.isShowClassForm = false
//关闭新增修改弹窗
this.isShowClassForm = false;
//关闭班级信息弹窗
this.isShowClassInfo = false;
//关闭关联其他课程弹窗
this.IsShowOtherCourse = false;
},
GetFirst(val) {
if (val) {
......@@ -468,28 +489,11 @@
}
return (Math.round(num / total * 100) / 100.00);
},
//关闭班级信息弹窗
closeClass() {
this.isShowClassInfo = false
//显示关联课程
showOtherCourse(item) {
this.IsShowOtherCourse = true;
this.classObjOption = item;
},
//刷新
refreshClass() {
},
getOtherCourse(){
this.IsShowOtherCourse=true;
},
//关闭关联其他课程弹窗
closeOtherCourse(){
},
//关联其他课程保存成功刷新
refreshOtherCourse(){
},
//点击班级名称
getClassInfo(obj) {
this.classObjOption = null;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment