372 lines
11 KiB
Vue
372 lines
11 KiB
Vue
<template>
|
||
<div class="outer-wrap">
|
||
<!-- 顶部年级下拉 -->
|
||
<div class="top-select-wrap">
|
||
<Select v-model="gradeVal" style="width:140px" @on-change="getsubjectlist">
|
||
<Option v-for="(item,index) in schsystemselectlist" :key="index" :value="item.id">{{ item.name }}</Option>
|
||
</Select>
|
||
</div>
|
||
|
||
<!-- 所有学科拖拽容器（两类混排） -->
|
||
<div class="subject-box">
|
||
<div class="btn-container">
|
||
<draggable
|
||
v-model="subjectlist"
|
||
class="drag-wrap"
|
||
animation="200"
|
||
:options="{ group: 'people' }"
|
||
@start="drag = true"
|
||
@end="drag = false"
|
||
:move="getdata1"
|
||
@update="datadragEnd1"
|
||
>
|
||
<div
|
||
v-for="(item, idx) in subjectlist"
|
||
:key="idx"
|
||
class="subject-btn"
|
||
:class="[item.source === 0 ? 'sys-btn' : 'cus-btn', { active: item.enable }]"
|
||
@click="toggleSelect(idx)"
|
||
@mouseenter="item.source === 1 && (hoverIndex = idx)"
|
||
@mouseleave="hoverIndex = null"
|
||
>
|
||
<span class="text">{{ item.name }}</span>
|
||
<!-- 仅自建学科悬浮显示编辑删除 -->
|
||
<div v-if="item.source === 1 && hoverIndex === idx" class="operate-group" @click.stop>
|
||
<span class="icon-edit" @click="editItem(idx)">✏️</span>
|
||
<span class="icon-del" @click="delItem(idx)">🗑️</span>
|
||
</div>
|
||
</div>
|
||
</draggable>
|
||
<!-- 添加自建学科按钮 -->
|
||
<Button icon="ios-add-outline" class="add-subject-btn" size="large" @click="openAddModal">
|
||
添加学科
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部图例说明 -->
|
||
<div class="legend-bottom">
|
||
<span class="legend-item">
|
||
<i class="legend-box system-box"></i>
|
||
系统学科（蓝色，可多选、拖拽排序，不可删改）
|
||
</span>
|
||
<span class="legend-item">
|
||
<i class="legend-box custom-box"></i>
|
||
学校自建学科（绿色，可多选、拖拽、hover编辑删除）
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 新增/编辑弹窗 学科信息 -->
|
||
<Modal v-model="modalVisible" title="学科信息" width="420">
|
||
<Form ref="form" :model="formData" :rules="formRules" label-width="90">
|
||
<FormItem label="学科名称" prop="subjectName">
|
||
<Input v-model="formData.subjectName" placeholder="请输入学科名称"></Input>
|
||
</FormItem>
|
||
</Form>
|
||
<div slot="footer" align="right">
|
||
<Button @click="modalVisible = false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="submitForm">提交</Button>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import draggable from 'vuedraggable'
|
||
export default {
|
||
name: 'SubjectManage',
|
||
components: { draggable },
|
||
data() {
|
||
return {
|
||
schsystemselectlist:[],
|
||
gradeVal: '',
|
||
hoverIndex: null,
|
||
// 选中下标数组，支持多选
|
||
selectedIndexArr: [],
|
||
|
||
// 合并数组：type区分 system系统 / custom自建
|
||
subjectlist: [],
|
||
|
||
modalVisible: false,
|
||
editIndex: null,
|
||
formData: {id:0,subjectName: '',enable:true,source:1,sort:null },
|
||
formRules: {
|
||
subjectName: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
|
||
}
|
||
}
|
||
},
|
||
created(){
|
||
this.getschsystemselect();
|
||
},
|
||
methods: {
|
||
//学制下拉
|
||
getschsystemselect() {
|
||
const _this = this;
|
||
var item = {};
|
||
_this.$api.get(APIConfig.BschClassSystem.getschsystemselect, item, resp => {
|
||
if (resp.code == 0) {
|
||
_this.schsystemselectlist = resp.data;
|
||
if(_this.schsystemselectlist.length>0){
|
||
_this.gradeVal=_this.schsystemselectlist[0].id;
|
||
_this.getsubjectlist();
|
||
}
|
||
} else {
|
||
_this.schsystemselectlist = [];
|
||
}
|
||
});
|
||
},
|
||
//获取学科列表
|
||
getsubjectlist() {
|
||
const _this = this;
|
||
var item = {
|
||
schSystemId:_this.gradeVal
|
||
};
|
||
_this.$api.get(APIConfig.BschClassSystem.getsubjectlist, item, resp => {
|
||
if (resp.code == 0) {
|
||
_this.subjectlist = resp.data;
|
||
} else {
|
||
_this.subjectlist = [];
|
||
}
|
||
});
|
||
},
|
||
// 多选切换选中/取消
|
||
toggleSelect(index) {
|
||
let submap=this.subjectlist[index];
|
||
this.$set(this.subjectlist[index], 'enable', !submap.enable);
|
||
const submitData ={
|
||
id:submap.id,
|
||
name:submap.name,
|
||
schSystemId:this.gradeVal,
|
||
enable:submap.enable,
|
||
source:submap.source,
|
||
sort:submap.sort
|
||
};
|
||
const url = APIConfig.BschClassSystem.subjectsave;
|
||
this.$api.post(url, JSON.stringify(submitData), resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success("启用成功！");
|
||
this.getsubjectlist();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
},
|
||
//学科拖动前
|
||
getdata1 (evt) {
|
||
//console.log(evt.draggedContext.element)
|
||
},
|
||
|
||
//学科拖动后
|
||
datadragEnd1 (evt) {
|
||
var _this=this;
|
||
//console.log('拖动后的索引 :' + evt.newIndex);
|
||
//console.log('拖动前的索引 :' + evt.oldIndex);
|
||
var ids=[],orders=[];
|
||
_this.subjectlist.forEach(element => {
|
||
ids.push(element.code);
|
||
});
|
||
var url=APIConfig.BschClassSystem.subjectsort+'?schSystemId='+_this.gradeVal;
|
||
_this.$api.post(url,JSON.stringify(ids),(resp)=>{
|
||
_this.$Message.info('拖动排序成功！');
|
||
_this.getsubjectlist();
|
||
});
|
||
},
|
||
// 打开新增（默认新增自建学科）
|
||
openAddModal() {
|
||
this.editIndex = null
|
||
this.formData.subjectName = ''
|
||
this.modalVisible = true
|
||
},
|
||
|
||
// 编辑自建学科
|
||
editItem(index) {
|
||
const row = this.subjectlist[index]
|
||
if (row.source !== 1) return
|
||
this.editIndex = index
|
||
this.formData.subjectName = row.name;
|
||
this.formData.id=row.id;
|
||
this.formData.enable=row.enable;
|
||
this.formData.sort=row.sort;
|
||
this.modalVisible = true
|
||
},
|
||
|
||
// 删除自建学科
|
||
delItem(index) {
|
||
const row = this.subjectlist[index]
|
||
if (row.source !== 1) return
|
||
this.$Modal.confirm({
|
||
title: '提示',
|
||
content: '确定删除该学科？',
|
||
onOk: () => {
|
||
// 删除条目
|
||
var url=APIConfig.BschClassSystem.subjectdelete+this.subjectlist[index].id;
|
||
this.$api.post(url,{},(resp)=>{
|
||
this.$Message.success('删除成功！');
|
||
this.getsubjectlist();
|
||
});
|
||
}
|
||
})
|
||
},
|
||
|
||
// 弹窗提交
|
||
submitForm() {
|
||
this.$refs.form.validate(valid => {
|
||
if (!valid) return
|
||
const name = this.formData.subjectName.trim()
|
||
if (this.editIndex === null) {
|
||
// 新增默认是自建学科
|
||
const submitData ={
|
||
name:name,
|
||
schSystemId:this.gradeVal,
|
||
enable:true,
|
||
source:1,
|
||
sort:null
|
||
};
|
||
const url = APIConfig.BschClassSystem.subjectsave;
|
||
this.$api.post(url, JSON.stringify(submitData), resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success("新增自建学科成功！");
|
||
this.getsubjectlist();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
} else {
|
||
// 修改原有自建学科名称
|
||
const submitData ={
|
||
id:this.formData.id,
|
||
name:name,
|
||
schSystemId:this.gradeVal,
|
||
enable:this.formData.enable,
|
||
source:this.formData.source,
|
||
sort:this.formData.sort
|
||
};
|
||
const url = APIConfig.BschClassSystem.subjectsave;
|
||
this.$api.post(url, JSON.stringify(submitData), resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success("修改学科成功！");
|
||
this.getsubjectlist();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
}
|
||
this.modalVisible = false
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.outer-wrap {
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 4px;
|
||
padding: 16px;
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
background: #ffffff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.top-select-wrap {
|
||
margin-bottom: 16px;
|
||
}
|
||
.subject-box {
|
||
flex: 1;
|
||
}
|
||
.btn-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
row-gap: 16px;
|
||
align-items: flex-start;
|
||
}
|
||
.drag-wrap {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
row-gap: 16px;
|
||
}
|
||
|
||
/* 按钮基础通用样式 */
|
||
.subject-btn {
|
||
padding: 8px 16px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
user-select: none;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* ========== 系统学科 蓝色样式 ========== */
|
||
.sys-btn {
|
||
border: 1px solid #4080ff;
|
||
color: #4080ff;
|
||
background: #fff;
|
||
}
|
||
.sys-btn.active {
|
||
background: #4080ff;
|
||
color: #fff;
|
||
}
|
||
|
||
/* ========== 自建学科 绿色样式 ========== */
|
||
.cus-btn {
|
||
border: 1px solid #00b42a;
|
||
color: #00b42a;
|
||
background: #fff;
|
||
}
|
||
.cus-btn.active {
|
||
background: #00b42a;
|
||
color: #fff;
|
||
}
|
||
|
||
/* 悬浮编辑删除组 */
|
||
.operate-group {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
.icon-edit, .icon-del {
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.add-subject-btn {
|
||
padding: 8px 16px;
|
||
color: #666;
|
||
}
|
||
|
||
.legend-bottom {
|
||
margin-top: 30px;
|
||
display: flex;
|
||
gap: 30px;
|
||
align-items: center;
|
||
}
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
.legend-box {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 3px;
|
||
display: inline-block;
|
||
}
|
||
.system-box {
|
||
border: 1px solid #4080ff;
|
||
background: #fff;
|
||
}
|
||
.custom-box {
|
||
border: 1px solid #00b42a;
|
||
background: #fff;
|
||
}
|
||
</style> |