<!-- @format -->
<!-- 模塊 校管-課程管理-課表管理 -修改課表信息彈框 -->
<
template
>
<
div
>
<
el-dialog
width=
"600px"
:
title="
dialogInfo.
title"
:
close-on-click-modal="
false"
:
visible="
true"
:
before-close="
closeSelf"
>
<
div
class=
"dialog-cont"
>
<
el-form
class=
"create-form"
:
model="
dataForm"
:
rules="
dataRule"
ref=
"ruleForm"
label-width=
"110px"
>
<
el-form-item
label=
"課程名稱:"
prop=
"courseName"
>
<!--<span class="course-name-box nowrap" :title="dataForm.courseName">{{
dataForm.courseName
}}</span>-->
<
el-input
v-model="
dataForm.
courseName"
maxlength=
"100"
show-word-limit
placeholder=
"請輸入課程名稱"
></
el-input
>
</
el-form-item
>
<
el-form-item
v-if="
dialogInfo.
pageState ===
'edit'"
label=
"講師:"
prop=
"teacherName"
>
<
span
class=
"teacher-holder"
v-show="
dataForm.
teacherName"
>{{
dataForm.
teacherName
}}
</
span
>
<
span @
click="
showChildDialog"
>
<
i
class=
"icon-edit"
></
i
>
<
span
class=
"edit"
>修改
</
span
>
</
span
>
</
el-form-item
>
<
el-form-item
label=
"學段:"
prop=
"phase"
>
<
el-radio-group
v-model="
dataForm.
phase" @
change="
getGrade"
>
<
el-radio :
label="
'03'"
>小學
</
el-radio
>
<
el-radio :
label="
'04'"
>初中
</
el-radio
>
<
el-radio :
label="
'05'"
>高中
</
el-radio
>
</
el-radio-group
>
</
el-form-item
>
<
el-form-item
label=
"年級:"
prop=
"grade"
>
<
el-select
v-model="
dataForm.
grade"
@
change="
handleGrade"
placeholder=
"請選擇年級"
>
<
el-option
v-for="(
item,
index)
in
gradeArr"
:
key="
index"
:
label="
item.
name"
:
value="
item.
code"
>
</
el-option
>
</
el-select
>
</
el-form-item
>
<
el-form-item
label=
"學科:"
prop=
"courseNameArr"
>
<
el-cascader
v-if="
showCascader"
:
disabled="!
editFlag"
ref=
"cascader"
class=
"cascader"
v-model="
dataForm.
courseNameArr"
:
props="
props"
@
change="
chooseCourse"
></
el-cascader
>
<
span
class=
"tip-message"
>請先選擇學段和年級，再選擇學科！
</
span
>
<!-- <el-input v-model="dataForm.courseName" placeholder="\請輸入課程名稱"></el-input> -->
</
el-form-item
>
<
el-form-item
v-if="
dialogInfo.
pageState !==
'edit'"
label=
"課程簡介:"
>
<
el-input
type=
"textarea"
placeholder=
"請輸入課程簡介"
v-model="
dataForm.
courseIntroduce"
maxlength=
"50"
:
rows="
2"
show-word-limit
>
</
el-input
>
</
el-form-item
>
</
el-form
>
</
div
>
<
div
slot=
"footer"
class=
"dialog-footer"
>
<
el-button @
click="
closeSelf()"
>取消
</
el-button
>
<
el-button
type=
"primary" @
click="
dataFormSubmit()"
>確定
</
el-button
>
</
div
>
<
el-dialog
width=
"800px"
title=
"選擇講師"
:
visible.
sync="
innerVisible"
append-to-body
>
<
div
class=
"dialog-cont"
>
<
div
>
<
el-form :
inline="
true"
class=
"create-form"
label-width=
"50px"
>
<
el-form-item
label=
"姓名:"
>
<
el-input
v-model="
realName"
placeholder=
"請輸入姓名"
></
el-input
>
</
el-form-item
>
<
el-form-item
>
<
el-button
type=
"warning" @
click="
searchList"
>查詢
</
el-button
>
</
el-form-item
>
</
el-form
>
</
div
>
<
div
class=
"table-view"
>
<
CommonTable
:
columnsData="
columnsData"
:
tableData="
tableData"
></
CommonTable
>
<
pagenation
:
pageInfo="
pageInfo"
v-if="
tableData.
length >
0"
@
getNewPage="
getNewData"
>
</
pagenation
>
</
div
>
</
div
>
</
el-dialog
>
</
el-dialog
>
</
div
>
</
template
>
<
script
>
import
CommonTable
from
'@/components/common/common-table';
import
pagenation
from
'@/components/common/pagenation';
import {
timeFormat,
getDateTime }
from
'@/utils';
import {
dateUtils }
from
'@/utils/dateUtils';
export
default {
name:
'dialog-editCourseTable',
components: {
CommonTable,
pagenation },
data() {
let
self =
this;
return {
pageInfo: {
total:
0,
pageSize:
10,
pageNum:
1
},
innerVisible:
false,
showCascader:
true,
dataForm: {
courseNameArr: [],
sn:
null,
//為空時為新增，否則為修改
courseName:
'',
teacherName:
'',
teacherId:
'',
subject:
'',
//科目
grade:
'',
//年級
phase:
'03',
//學段
volume:
'',
//冊別
edition:
'',
//版本
book:
'',
//教材
bookUnit:
'',
//教材目錄
courseIntroduce:
''
//課程簡介
},
dataRule: {
courseName: [
{
required:
true,
message:
'課程名稱不能為空',
trigger:
'change' }
],
courseNameArr: [
{
required:
true,
message:
'學科不能為空',
trigger:
'change' }
],
teacherName: [
{
required:
true,
message:
'請選擇講師',
trigger:
'change' }
],
grade: [{
required:
true,
message:
'請選擇年級',
trigger:
'change' }],
phase: [{
required:
true,
message:
'請選擇學段',
trigger:
'change' }]
},
gradeArr: [],
realName:
'',
tableData: [],
columnsData: [
{
label:
'姓名',
prop:
'userName',
width:
130
},
{
label:
'性別',
width:
130,
formatter
:
row
=> {
let
sex =
'男';
if (
row.
genderCode ===
'0') {
sex =
'男';
}
else
if (
row.
genderCode ===
'1') {
sex =
'女';
}
else {
sex =
'未知';
}
return
sex;
}
},
{
label:
'賬號',
prop:
'loginName',
width:
146,
showOverflowTooltip:
true
},
{
label:
'授課關系',
width:
170,
prop:
'relative'
},
{
type:
'options',
label:
'操作',
align:
'center',
render
: (
h, {
row })
=> {
const
checkBtn =
h(
'a',
{
class:
'btn-option',
on: {
click
: ()
=> {
this.
chooseTeacher(
row);
//選擇
}
}
},
'選擇'
);
const
disabledText =
h(
'a',
{
class:
'btn-option disabled',
on: {}
},
'該老師已有課程，不可選擇'
);
let
operationViews = [];
if (
row.
status ===
1) {
operationViews.
push(
disabledText);
}
else {
operationViews.
push(
checkBtn);
}
return
h(
'div',
{
class:
'table-opt-btns'
},
operationViews
);
}
}
],
props: {
value:
'code',
label:
'name',
lazy:
true,
lazyLoad(
node,
resolve) {
self.
chooseCourseHandle(
node,
resolve);
}
}
};
},
props: {
checkedArr: {
type:
Array,
default
: ()
=> {
return [];
}
},
dialogInfo: {
type:
Object,
default
: ()
=> {
return {
title:
'信息設置',
pageState:
'edit'
};
}
},
weekInfo: {
type:
Object,
default
: ()
=> {
return {};
}
},
tdItem: {
type:
Object,
default
: ()
=> {
return {};
}
},
timeItem: {
type:
Object,
default
: ()
=> {
return {};
}
},
selfTeacher: {
type:
Boolean,
default:
false
}
},
watch: {},
computed: {
editFlag() {
return !!(
this.
dataForm.
grade &&
this.
dataForm.
phase);
}
},
created() {
if (!
this.
selfTeacher) {
this.
getTeachersPage();
}
/* 編輯該課程時 設置form 信息*/
if (
this.
tdItem.
teacherId) {
this.
resetting();
}
this.
getGrade();
},
methods: {
resetting() {
this.
dataForm =
Object.
assign(
this.
dataForm,
this.
tdItem);
this.
dataForm.
courseIntroduce ==
'0'
? (
this.
dataForm.
courseIntroduce =
'')
:
null;
this.
dataForm.
courseNameArr = [
this.
tdItem.
subject +
'subjects',
this.
tdItem.
edition +
'editions',
this.
tdItem.
volume +
'volums',
this.
tdItem.
book +
'books',
this.
tdItem.
bookUnit +
'units'
];
},
//分頁
getNewData(
num) {
this.
pageInfo.
pageNum =
num;
this.
getTeachersPage();
},
/* 點擊查詢 獲取老師列表 */
searchList() {
this.
pageInfo.
pageNum =
1;
this.
getTeachersPage();
},
/* 獲取老師列表 */
getTeachersPage() {
let
nowTime =
dateUtils.
getDayByWeekDay(
this.
weekInfo.
weekCount,
this.
tdItem.
dayNum
);
this.
$api[
'course/getTeachersPage']({
realName:
this.
realName,
pageNum:
this.
pageInfo.
pageNum,
pageSize:
this.
pageInfo.
pageSize,
startTime:
getDateTime(
nowTime +
' ' +
this.
timeItem.
startTime),
endTime:
getDateTime(
nowTime +
' ' +
this.
timeItem.
endTime),
dayNum:
this.
tdItem.
dayNum
})
.
then(
res
=> {
this.
pageInfo.
total =
res.
total;
this.
tableData =
res.
list;
})
.
catch(
err
=> {
// this.$message.error(err);
});
},
/* 提交表單 */
dataFormSubmit() {
this.
$refs[
'ruleForm'].
validate(
valid
=> {
if (
valid) {
this.
$emit(
'setCourseInfo',
this.
dataForm);
this.
$parent.
showDialog =
false;
}
else {
console.
log(
'error submit!!');
return
false;
}
});
},
/* 關閉彈框 */
closeSelf() {
this.
$parent.
showDialog =
false;
},
/* 打開老師列表彈框 */
showChildDialog() {
this.
innerVisible =
true;
},
/* 選擇老師方法 */
chooseTeacher(
row) {
this.
dataForm.
teacherId =
row.
id;
this.
dataForm.
teacherName =
row.
userName;
this.
innerVisible =
false;
this.
$refs.
ruleForm.
validateField(
'teacherName');
},
/*級聯選擇器 選擇課程的學科等 */
chooseCourse(
data) {
let
nodeArr =
this.
$refs.
cascader.
getCheckedNodes();
let
courseName =
'';
let
nameArr =
nodeArr[
0].
pathLabels;
let
idArr =
nodeArr[
0].
path;
// let bookInfo = nodeArr[0].parent;
courseName =
nameArr[
4] +
'-' +
nameArr[
3];
this.
dataForm.
courseName =
courseName;
this.
dataForm.
subject =
idArr[
0].
replace(
'subjects',
'');
this.
dataForm.
edition =
idArr[
1].
replace(
'editions',
'');
this.
dataForm.
volume =
idArr[
2].
replace(
'volums',
'');
this.
dataForm.
book =
idArr[
3].
replace(
'books',
'');
this.
dataForm.
bookUnit =
idArr[
4].
replace(
'units',
'');
this.
$refs.
ruleForm.
validateField(
'courseName');
},
/* 獲取年級 */
getGrade(
val) {
if (
val) {
this.
$nextTick(()
=> {
this.
dataForm.
grade =
'';
this.
dataForm.
courseNameArr = [];
this.
$refs.
cascader.
$children[
1].
loadCount =
0;
this.
$refs.
cascader.
$children[
1].
menus = [];
this.
$refs.
cascader.
$children[
1].
lazyLoad();
});
}
// this.showCascader = false;
// this.showCascader = true;
this.
$api[
'common/getGrades']({
phase:
this.
dataForm.
phase
})
.
then(
res
=> {
this.
gradeArr =
res;
})
.
catch(
err
=> {
// this.$message.error(err);
});
},
/* 下拉值改變 將下方學科級聯給清空 */
handleGrade(
val) {
this.
dataForm.
courseNameArr = [];
this.
$nextTick(()
=> {
this.
$refs.
cascader.
$children[
1].
loadCount =
0;
this.
$refs.
cascader.
$children[
1].
menus = [];
this.
$refs.
cascader.
$children[
1].
lazyLoad();
});
},
/* 級聯選擇器的 回調 根據返回的node對象中的level的值進行判斷 */
chooseCourseHandle(
node,
resolve) {
if (
node.
level ==
0) {
this.
getSubjects(
node,
resolve);
}
else
if (
node.
level ==
1) {
this.
getEditions(
node,
resolve);
}
else
if (
node.
level ==
2) {
this.
getVolums(
node,
resolve);
}
else
if (
node.
level ==
3) {
this.
getBooks(
node,
resolve);
}
else
if (
node.
level ==
4) {
this.
getBookUnits(
node,
resolve);
}
},
/* 獲取學科 */
getSubjects(
node,
resolve) {
this.
$api[
'common/getSubjects']({})
.
then(
res
=> {
res.
forEach(
item
=> {
item.
leaf =
false;
item.
code =
item.
code +
'subjects';
});
resolve(
res);
})
.
catch(
err
=> {
// this.$message.error(err);
});
},
/*獲取教材版本數據 */
getEditions(
node,
resolve) {
this.
dataForm.
subject =
node.
value.
replace(
'subjects',
'');
this.
$api[
'common/getEditions']({
phase:
this.
dataForm.
phase,
subject:
this.
dataForm.
subject
})
.
then(
res
=> {
res.
forEach(
item
=> {
item.
leaf =
false;
item.
code =
item.
code +
'editions';
});
resolve(
res);
})
.
catch(
err
=> {
// this.$message.error(err);
});
},
/*獲取冊別數據 */
getVolums(
node,
resolve) {
this.
dataForm.
subject =
node.
path[
0].
replace(
/subjects/
g,
'');
this.
dataForm.
edition =
node.
value.
replace(
'editions',
'');
this.
$api[
'common/getVolums']({
phase:
this.
dataForm.
phase,
subject:
this.
dataForm.
subject,
edition:
this.
dataForm.
edition
})
.
then(
res
=> {
res.
forEach(
item
=> {
item.
leaf =
false;
item.
code =
item.
code +
'volums';
});
resolve(
res);
})
.
catch(
err
=> {
// this.$message.error(err);
});
},
/*獲取課本數據 */
getBooks(
node,
resolve) {
this.
dataForm.
subject =
node.
path[
0].
replace(
/subjects/
g,
'');
this.
dataForm.
volume =
node.
value.
replace(
'volums',
'');
this.
$api[
'common/getBooks']({
phase:
this.
dataForm.
phase,
subject:
this.
dataForm.
subject,
edition:
this.
dataForm.
edition,
volume:
this.
dataForm.
volume
// grade: this.dataForm.grade
})
.
then(
res
=> {
res.
forEach(
item
=> {
item.
leaf =
false;
item.
code =
item.
bookCode +
'books';
item.
name =
item.
bookName;
});
resolve(
res);
})
.
catch(
err
=> {
// this.$message.error(err);
});
},
/*獲取課本目錄數據 */
getBookUnits(
node,
resolve) {
this.
dataForm.
bookCode =
node.
value.
replace(
'books',
'');
this.
$api[
'common/getBookUnits']({
bookCode:
this.
dataForm.
bookCode
})
.
then(
res
=> {
res.
forEach(
item
=> {
item.
leaf =
true;
item.
code =
item.
code +
'units';
});
resolve(
res);
})
.
catch(
err
=> {
// this.$message.error(err);
});
}
}
};
</
script
>
<
style
scoped
lang=
"less"
>
.dialog-cont {
/deep/
.el-cascader {
line-height:
30px;
}
}
/deep/
.el-table__row {
.cell {
text-overflow:
ellipsis;
overflow:
hidden;
white-space:
nowrap;
}
}
.cascader {
width:
400px;
position:
relative;
}
.teacher-holder {
margin-right:
10px;
}
.icon-edit {
background:
url(
'../../assets/images/icon/edit.png'
);
width:
15px;
height:
16px;
display:
inline-block;
margin-right:
5px;
margin-bottom:
-2px;
}
.edit {
line-height:
24px;
color:
#228cf9;
cursor:
pointer;
}
.course-name-box {
display:
inline-block;
background-color:
#fff;
border-radius:
4px;
border:
1px
solid
#dcdfe6;
color:
#606266;
font-size:
inherit;
height:
30px;
line-height:
30px;
padding:
0
15px;
-webkit-transition:
border-color
0.2s
cubic-bezier(
0.645,
0.045,
0.355,
1);
transition:
border-color
0.2s
cubic-bezier(
0.645,
0.045,
0.355,
1);
width:
400px;
}
.tip-message {
font-size:
12px;
display:
inline-block;
padding-left:
18px;
background:
url(
'../../assets/images/icon/icon-tip.png'
)
no-repeat
left
2px;
height:
16px;
line-height:
16px;
margin-left:
4px;
color:
#999999;
position:
relative;
bottom:
2px;
}
</
style
>