312 lines
8.6 KiB
Vue
312 lines
8.6 KiB
Vue
<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">
|
||
学制选择
|
||
<Button v-if="selecttype!=2" class="fr" style="margin-right:10px;" type="primary" @click="openAddModal">添加学校</Button>
|
||
</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 v-if="selecttype==2" 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>
|
||
<!-- 新增弹窗 -->
|
||
<Modal v-model="addModalVisible" title="添加学校" width="520">
|
||
<Form ref="addFormRef" :model="addForm" :rules="formRules" label-width="90">
|
||
<FormItem label="学校名称" prop="schname">
|
||
<Input size="large" v-model="addForm.schname" placeholder="请输入学校名称" />
|
||
</FormItem>
|
||
<FormItem label="学制" prop="systemlist">
|
||
<treeselect
|
||
v-model="addForm.systemlist"
|
||
:options="schsystemtree"
|
||
:multiple="true"
|
||
:disable-branch-nodes="true"
|
||
:defaultExpandLevel="Infinity"
|
||
:normalizer="node => ({
|
||
id: node.id,
|
||
label: node.label,
|
||
children: node.children ? node.children : undefined
|
||
})"
|
||
placeholder="请选择学制"
|
||
/>
|
||
</FormItem>
|
||
</Form>
|
||
<div slot="footer" align="right">
|
||
<Button @click="addModalVisible = false" style="margin-right: 10px">取消</Button>
|
||
<Button type="primary" @click="submitAdd">提交</Button>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Treeselect from '@riophae/vue-treeselect'
|
||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||
import myTree from "../components/my_tree";
|
||
import { self_viewport } from "@/mixins/self_viewport";
|
||
export default {
|
||
name: "EduYearSelect",
|
||
components: { myTree,Treeselect },
|
||
data() {
|
||
return {
|
||
selectedEdu: "",
|
||
selectedSchool: null,
|
||
treeData: [],
|
||
schsystemlist:[],
|
||
schsystemtree:[],
|
||
selecttype:0,
|
||
selectnodeid:1,
|
||
addModalVisible:false,
|
||
addForm: {
|
||
schname:'',
|
||
systemlist:[]
|
||
},
|
||
formRules: {
|
||
schname: [{ required: true, message: "请输入学校名称", trigger: "blur" }],
|
||
systemlist: [{ required: true, type: 'array', min: 1, message: '请选择学制', trigger: 'change' }]
|
||
}
|
||
};
|
||
|
||
},
|
||
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){
|
||
this.selecttype=treeNode.type;
|
||
this.selectnodeid=treeNode.id;
|
||
if(treeNode.type==2){
|
||
this.getschsystemlist();
|
||
}else{
|
||
this.getschsystemlist();
|
||
this.$Message.warning("请先选择学校!");
|
||
return;
|
||
}
|
||
},
|
||
//获取学校绑定学制列表
|
||
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=[];
|
||
}
|
||
});
|
||
},
|
||
//添加学校
|
||
openAddModal() {
|
||
this.$nextTick(() => {
|
||
this.$refs.addFormRef?.resetFields();
|
||
});
|
||
this.addForm = {
|
||
schname: '',
|
||
systemlist: [],
|
||
};
|
||
this.getselectTree();
|
||
this.addModalVisible = true;
|
||
},
|
||
//获取学制下拉树
|
||
getselectTree:function(){
|
||
const _this = this;
|
||
var item={};
|
||
_this.$api.get(APIConfig.BschClassSystem.selectTree, item, resp => {
|
||
if(resp.code==0)
|
||
{
|
||
_this.schsystemtree = resp.data;
|
||
}else{
|
||
_this.schsystemtree=[];
|
||
}
|
||
});
|
||
},
|
||
//提交学制事件
|
||
submitAdd() {
|
||
this.$refs.addFormRef.validate(valid => {
|
||
if (!valid) return;
|
||
const form = this.addForm;
|
||
const submitData = {
|
||
name: form.schname,
|
||
groupId:this.selectnodeid,
|
||
schsystemIds: form.systemlist
|
||
};
|
||
const url = APIConfig.BschClassSystem.addSchool;
|
||
this.$api.post(url, JSON.stringify(submitData), resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success("添加成功！");
|
||
this.addModalVisible = false;
|
||
this.getGroupTree();
|
||
this.getschsystemlist();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
//选中学制事件
|
||
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: 20px;
|
||
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> |