添加班级校区新增按钮

This commit is contained in:
xiayuping666
2024-04-07 17:54:23 +08:00
parent 07b3495575
commit 81b7489d45
+102 -8
View File
@@ -3,7 +3,7 @@
<div class="side-nav">
<h3>班级管理</h3>
<div>
<el-tree :data="classArr" node-key="classId"
<el-tree :data="organizeArr" node-key="classId"
ref="areaTrees"
:default-expanded-keys="defaultCheckedKeys"
:default-checked-keys="defaultCheckedKeys"
@@ -11,6 +11,20 @@
:highlight-current="true"
:props="defaultProps" @node-click="handleNodeClick"
></el-tree>
<div class="add-box">
<div class="add-list">
<el-button @click="isAddDialog = true; addNum = 1" size="medium" class="el-icon-plus">新增班级</el-button>
</div>
<div class="add-list">
<el-button @click="isAddDialog = true; addNum = 2" size="medium" class="el-icon-plus">新增年级</el-button>
</div>
<div class="add-list">
<el-button @click="isAddDialog = true; addNum = 3" size="medium" class="el-icon-plus">新增学段</el-button>
</div>
<div class="add-list">
<el-button @click="isAddDialog = true; addNum = 4" size="medium" class="el-icon-plus">新增校区</el-button>
</div>
</div>
</div>
</div>
<div class="form-adapt-container">
@@ -43,6 +57,56 @@
@clickSize="onClickSize"
/>
</div>
<el-dialog
:title="addEnum[addNum]"
:visible.sync="isAddDialog"
width="30%">
<el-form ref="schoolForm" :model="schoolForm" label-width="80px">
<el-form-item label="校区">
<el-select @change="onChangeSchool" v-model="schoolForm.school" placeholder="请选择校区">
<el-option v-for="item in organizeArr" :label="item.className" :value="item.classId"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="addNum < 3 && schoolForm.school" label="学段">
<el-select @change="onChangePhase" v-model="schoolForm.phase" placeholder="请选择学段">
<el-option v-for="item in phaseArr" :label="item.className" :value="item.classId"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="addNum < 2 && schoolForm.phase" label="年级">
<el-select @change="onChangeGrade" v-model="schoolForm.grade" placeholder="请选择年级">
<el-option v-for="item in gradeArr" :label="item.className" :value="item.classId"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="addNum < 1 && schoolForm.grade" label="班级">
<el-select v-model="schoolForm.class" placeholder="请选择班级">
<el-option v-for="item in classArr" :label="item.className" :value="item.classId"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="addNum == 4" :label="'校区名称'">
<el-input ></el-input>
</el-form-item>
<el-form-item v-if="addNum == 3" :label="'学段名称'">
<el-input ></el-input>
</el-form-item>
<el-form-item v-if="addNum == 2" :label="'年级名称'">
<el-input ></el-input>
</el-form-item>
<el-form-item v-if="addNum == 1" :label="'班级名称'">
<el-input ></el-input>
</el-form-item>
</el-form>
<!-- <el-form ref="schoolForm" :model="schoolForm" label-width="80px">
<el-form-item :label="'分段名称'">
<el-input ></el-input>
</el-form-item>
</el-form> -->
<span slot="footer" class="dialog-footer">
<el-button @click="isAddDialog = false">取 消</el-button>
<el-button type="primary" @click="isAddDialog = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
@@ -69,14 +133,24 @@ export default {
loading: false,
equipmentList: [],
dialogVisible: false,
classArr: [],
organizeArr: [], // 校区班级列表
studentArr: [],// 学生列表
classData: {
classId: null,
className: ''
}, // 选中的班级
total: 0,
defaultCheckedKeys: []
defaultCheckedKeys: [],
isAddDialog: false, // 新增弹框
schoolForm:{}, // 学校分段年级班级信息
addNum: 0, // 新增学校4分段3年级2班级1
phaseArr: [], // 分段数据
gradeArr: [], // 年级数据
classArr: [], // 班级数据
addEnum: ['', '新增班级', '新增年级', '新增学段', '新增校区'],
form: {
}
};
},
components: {
@@ -84,7 +158,7 @@ export default {
},
async created() {
this.classList()
const defaultCheckClass= localStorage.getItem('defaultCheckClass')
const defaultCheckClass= localStorage.getItem('defaultCheckClass') // 设置之前选中了班级
if(defaultCheckClass){
this.classData = JSON.parse(defaultCheckClass)
this.defaultCheckedKeys = [this.classData.classId]
@@ -92,21 +166,34 @@ export default {
}
},
mounted () {
},
methods: {
// 选择校区
onChangeSchool(value) {
this.phaseArr = this.organizeArr.find( item => item.classId == value).childrenList
},
// 选择分段
onChangePhase(value) {
this.gradeArr = this.phaseArr.find( item => item.classId == value).childrenList
},
// 选择年级
onChangeGrade(value) {
console.log(this.gradeArr)
console.log(value)
this.classArr = this.gradeArr.find( item => item.classId == value).childrenList
console.log(this.classArr)
},
handleNodeClick(item) {
if(item.childrenList.length == 0) {
if(item.childrenList.length === 0 && item.classId !== this.classData.classId) {
this.studentList(item.classId)
this.classData = item
localStorage.setItem('defaultCheckClass', JSON.stringify(this.classData) )
}
},
// 班级列表
classList(){
getClass().then( res =>{
this.classArr = res
this.organizeArr = res
})
},
// 获取班级学生列表
@@ -144,6 +231,13 @@ export default {
h3{
margin-bottom: 20px;
}
.add-box{
padding: 5px;
box-sizing: border-box;
.add-list{
margin: 0 0 10px;
}
}
}
.form-adapt-container{
flex: 1;