init
This commit is contained in:
lijing
@@ -0,0 +1,372 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user