vue element -级联选择器，复杂操作，异步加载所有级联选项，并回显 解决因id 有部分重复后导致的bug问题 无法回显的问题
<!-- @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>
