init
This commit is contained in:
lijing
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="edu-layout-wrap">
|
||||
<Row gutter="10" class="layout-row">
|
||||
<!-- 左侧：学校树形 -->
|
||||
<Col span="4" class="left-tree-wrap" style="overflow: auto;" :style="'height:'+(useTableHeight({ isSearch: true, isOperat: true })+160)+'px'">
|
||||
<div class="tree-title">学校</div>
|
||||
<my-tree :treeData="treeData" @on-tree-click="treeLink"></my-tree>
|
||||
</Col>
|
||||
|
||||
<!-- 右侧：学制选择 -->
|
||||
|
||||
<Col span="20" class="right-select-wrap" :style="'height:'+(useTableHeight({ isSearch: true, isOperat: true })+160)+'px'">
|
||||
<div class="select-title">学制选择</div>
|
||||
<!-- 幼儿园分组 -->
|
||||
<div class="group-wrap" v-for="(itt,index) in schsystemlist" :key="index">
|
||||
<div class="group-label">{{ itt.academicStageName }}</div>
|
||||
<div class="btn-group-row">
|
||||
<Button
|
||||
v-for="(item,index2) in itt.academicStageList"
|
||||
:key="item.id"
|
||||
:type="item.checked ? 'primary' : 'default'"
|
||||
shape="circle"
|
||||
@click="selectEduType(item.id,index,index2)"
|
||||
class="edu-btn"
|
||||
>
|
||||
{{ item.name }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom:20px;"></div>
|
||||
<!-- 底部确定按钮 -->
|
||||
<div class="confirm-btn-wrap" style="position: fixed;bottom: 0;text-align: center;left: 0;right: 0;background: #fff;padding: 10px;border-top: 1px solid #eee;">
|
||||
<Button type="primary" style="padding:0px 40px;" @click="handleConfirm">确定</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myTree from "../components/my_tree";
|
||||
import { self_viewport } from "@/mixins/self_viewport";
|
||||
export default {
|
||||
name: "EduYearSelect",
|
||||
components: { myTree},
|
||||
data() {
|
||||
return {
|
||||
selectedEdu: "",
|
||||
selectedSchool: null,
|
||||
treeData: [],
|
||||
schsystemlist:[],
|
||||
selectnodeid:0
|
||||
};
|
||||
|
||||
},
|
||||
mixins: [self_viewport],
|
||||
created(){
|
||||
let _this=this;
|
||||
_this.getGroupTree();
|
||||
_this.getschsystemlist();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//获取全区树
|
||||
getGroupTree:function(){
|
||||
const _this = this;
|
||||
var item={};
|
||||
_this.$api.get(APIConfig.BschClassSystem.getGroupTree, item, resp => {
|
||||
if(resp.code==0)
|
||||
{
|
||||
_this.treeData = resp.data;
|
||||
}else{
|
||||
_this.treeData=[];
|
||||
}
|
||||
});
|
||||
},
|
||||
//节点点击事件
|
||||
treeLink(treeNode){
|
||||
if(treeNode.type==2){
|
||||
this.selectnodeid=treeNode.id;
|
||||
this.getschsystemlist();
|
||||
}
|
||||
},
|
||||
//获取学校绑定学制列表
|
||||
getschsystemlist:function(){
|
||||
const _this = this;
|
||||
var item={
|
||||
schId:this.selectnodeid
|
||||
};
|
||||
_this.$api.get(APIConfig.BschClassSystem.getschsystemlist, item, resp => {
|
||||
|
||||
if(resp.code==0)
|
||||
{
|
||||
_this.schsystemlist = resp.data;
|
||||
}else{
|
||||
_this.schsystemlist=[];
|
||||
}
|
||||
});
|
||||
},
|
||||
selectEduType(val,index,index2) {
|
||||
const list = this.schsystemlist[index].academicStageList;
|
||||
// 先记录当前点击项原本的勾选状态
|
||||
const originChecked = list[index2].checked;
|
||||
// 本组全部取消选中
|
||||
list.forEach(item => {
|
||||
item.checked = false;
|
||||
});
|
||||
// 如果原来没选中 → 选中；原来已选中 → 保持取消
|
||||
if (!originChecked) {
|
||||
list[index2].checked = true;
|
||||
}
|
||||
},
|
||||
handleConfirm() {
|
||||
if (!this.selectnodeid) {
|
||||
this.$Message.warning("请先选择左侧学校");
|
||||
return;
|
||||
}
|
||||
const checkedIdArr = this.schsystemlist
|
||||
.flatMap(item => item.academicStageList)
|
||||
.filter(item => item.checked)
|
||||
.map(item => item.id);
|
||||
if (checkedIdArr.length==0) {
|
||||
this.$Message.warning("请选择对应学制");
|
||||
return;
|
||||
}
|
||||
const submitData = {
|
||||
schId: this.selectnodeid,
|
||||
schsystemIds: checkedIdArr.join(',')
|
||||
};
|
||||
var url = APIConfig.BschClassSystem.schsystemsave;
|
||||
this.$api.post(url, submitData, resp => {
|
||||
if (resp.code == 0) {
|
||||
this.$Message.success("已设置完成！");
|
||||
this.getschsystemlist();
|
||||
} else if (resp.code == 4) {
|
||||
this.$Message.info(resp.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edu-layout-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
.layout-row {
|
||||
height: 100%;
|
||||
}
|
||||
.left-tree-wrap {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
border-top-right-radius: 0;
|
||||
/* height: 650px; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.tree-title {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
padding: 10px 10px 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.edu-tree {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.right-select-wrap {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-left: 0px;
|
||||
border-radius: 4px;
|
||||
border-top-left-radius: 0;
|
||||
/* height: 650px; */
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
.select-title {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.group-wrap {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.group-label {
|
||||
font-size: 18px;
|
||||
padding: 12px 10px;
|
||||
background-color: #f5f5f5;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-group-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.edu-btn {
|
||||
padding: 6px 22px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.confirm-btn-wrap {
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user