feat:我的成绩-增加拖动功能
This commit is contained in:
parent
431f496b6e
commit
6717ff9bae
|
|
@ -19,6 +19,7 @@
|
|||
"lodash": "^4.17.21",
|
||||
"mitt": "^3.0.1",
|
||||
"sass": "^1.75.0",
|
||||
"sortablejs": "^1.15.6",
|
||||
"swiper": "^7.4.1",
|
||||
"vite-vue": "file:",
|
||||
"vue": "^3.2.37",
|
||||
|
|
|
|||
|
|
@ -38,6 +38,9 @@ importers:
|
|||
sass:
|
||||
specifier: ^1.75.0
|
||||
version: 1.94.2
|
||||
sortablejs:
|
||||
specifier: ^1.15.6
|
||||
version: 1.15.6
|
||||
swiper:
|
||||
specifier: ^7.4.1
|
||||
version: 7.4.1
|
||||
|
|
@ -1575,6 +1578,9 @@ packages:
|
|||
resolution: {integrity: sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
sortablejs@1.15.6:
|
||||
resolution: {integrity: sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==}
|
||||
|
||||
source-map-js@1.2.1:
|
||||
resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
|
@ -3508,6 +3514,8 @@ snapshots:
|
|||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
sortablejs@1.15.6: {}
|
||||
|
||||
source-map-js@1.2.1: {}
|
||||
|
||||
source-map-resolve@0.5.3:
|
||||
|
|
|
|||
|
|
@ -313,6 +313,18 @@
|
|||
<div class="flex-item-2 pl-10"><el-button @click="handlerAutoSortVolunteer">智能排序</el-button></div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- [修改] 在这里增加保存按钮的显示逻辑 -->
|
||||
<div class="flex-item-4 pl-20 pr-10" style="line-height: 30px;">
|
||||
<div class="flexWrap" v-if="state.visible.showOrderSaveBtn">
|
||||
<div class="flex-item-1" style="color: #f56c6c; font-weight: bold;">提示</div>
|
||||
<div class="flex-item-4 pl-10">
|
||||
<span style="font-size: 12px; color: #666; margin-right: 10px;">顺序已变更</span>
|
||||
<el-button type="primary" size="default" @click="handleSaveVolunteerOrder">保存排序</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flexWrap mt-15">
|
||||
<div class="flex-item-4 pl-10 pr-10" style="line-height: 30px">
|
||||
|
|
@ -330,7 +342,10 @@
|
|||
<div class="panetype" v-if="state.scoreInfo.meBatchLevel==0" :class="state.selectForm.batchPaneName==='本科批'?'panetype-active':''" @click="switchBatchPane('本科批')">本科批</div>
|
||||
<div class="panetype" v-if="state.scoreInfo.meBatchLevel<=3" :class="state.selectForm.batchPaneName==='高职高专'?'panetype-active':''" @click="switchBatchPane('高职高专')">高职高专</div>
|
||||
</div>
|
||||
<el-table row-draggable :data="returnVolunteerList()" height="800" style="width: 100%;">
|
||||
<el-table
|
||||
ref="volunteerTableRef"
|
||||
row-key="id"
|
||||
row-draggable :data="returnVolunteerList()" height="800" style="width: 100%; cursor: move;">
|
||||
<el-table-column label="招生院校" width="190">
|
||||
<template #default="scope">
|
||||
<div class="top-align" v-if="scope.row.schoolName">
|
||||
|
|
@ -704,9 +719,10 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
document.title = '模拟报志愿|' + import.meta.env.VITE_PROGRAM_TYPE;
|
||||
import {inject,onMounted,reactive} from 'vue';
|
||||
import { inject, onMounted, reactive, ref, nextTick, watch } from 'vue'; // 确保引入 ref, nextTick, watch
|
||||
import Sortable from 'sortablejs'; // [新增] 引入 Sortablejs
|
||||
|
||||
import {checkLevel, isNull} from '@/utils/tool';
|
||||
import {getScore,getRulesEnrollrobabilityMenuList} from '@/axios/api';
|
||||
import {ScoreInfoEntity} from '@/types/index';
|
||||
|
|
@ -723,6 +739,9 @@ import { useRoute } from 'vue-router';
|
|||
import VolunteerList from '../volunteer/volunteer-list.vue';
|
||||
const route = useRoute();
|
||||
|
||||
// [新增] 定义表格的 ref，用于获取 DOM
|
||||
const volunteerTableRef = ref();
|
||||
|
||||
// 定义一个变量，可以是布尔值，也可以是空值
|
||||
type myBoolean= boolean | null | undefined;
|
||||
|
||||
|
|
@ -770,6 +789,7 @@ const state = reactive({
|
|||
activePage:'zntj',//当前打开的子页面 {label:'一键填报',value:'yjtb'},{label:'我的订单',value:'wddd'}
|
||||
pages:[{label:'智能推荐',value:'zntj'},{label:'我的志愿',value:'wdzy'},],//智能推荐，一键填报，我的志愿，我的订单
|
||||
visible:{
|
||||
showOrderSaveBtn: false,// 是否显示排序保存按钮
|
||||
showOtherMajorDialog:false,//查看其他专业弹出层判断
|
||||
showOtherVolunteerDialog:false,//切换志愿表
|
||||
switchVolunteerDialog:false,//切换志愿顺序
|
||||
|
|
@ -1113,9 +1133,7 @@ function getVolunteerDetail(){
|
|||
let e = null
|
||||
for(let i=1;i<=64;i++){
|
||||
e = volunteeZhuanOfIndexsMap.get(i)
|
||||
if(!e){
|
||||
volunteerZhuanList.push({indexs:i})
|
||||
}else{
|
||||
if(e){
|
||||
volunteerZhuanList.push(e)
|
||||
}
|
||||
}
|
||||
|
|
@ -1125,14 +1143,11 @@ function getVolunteerDetail(){
|
|||
let volunteerBenList=[] as any
|
||||
for(let i=1;i<=64;i++){
|
||||
e = volunteerBenOfIndexsMap.get(i)
|
||||
if(!e){
|
||||
volunteerBenList.push({indexs:i})
|
||||
}else{
|
||||
if(e){
|
||||
volunteerBenList.push(e)
|
||||
}
|
||||
}
|
||||
state.volunteerInfo.volunteerBenList = volunteerBenList
|
||||
|
||||
}
|
||||
}).catch((error: any) => {
|
||||
console.log(error);
|
||||
|
|
@ -1163,7 +1178,6 @@ function returnStorgeVolunteerIndex(majorInfo:any){
|
|||
//选择该专业
|
||||
function selectVolunteer(majorInfo:any){
|
||||
console.log('aa')
|
||||
let a = '-'
|
||||
let key = majorInfo.id
|
||||
//majorInfo.schoolCode+a+majorInfo.batch+a+majorInfo.majorCode+a+majorInfo.majorName+a+majorInfo.enrollmentCode
|
||||
let valuesArray = []
|
||||
|
|
@ -1287,6 +1301,7 @@ function cancelSelectVolunteer(majorInfo:any){
|
|||
let key = majorInfo.id
|
||||
deleteVolunteerMapByKey(null,key)
|
||||
}
|
||||
|
||||
//模拟志愿列表
|
||||
function getRecommendVolunteerList(){
|
||||
//处理真正要查询的批次
|
||||
|
|
@ -1600,6 +1615,92 @@ function returnVolunteerList(){
|
|||
state.selectForm.batchPaneName==='本科批'?state.volunteerInfo.volunteerBenList:
|
||||
state.volunteerInfo.volunteerZhuanList;
|
||||
}
|
||||
|
||||
// [新增] 初始化拖拽功能
|
||||
const initSortable = () => {
|
||||
// 确保表格渲染后再初始化
|
||||
nextTick(() => {
|
||||
const tableEl = volunteerTableRef.value?.$el;
|
||||
if (!tableEl) return;
|
||||
|
||||
// 获取 tbody 元素
|
||||
const tbody = tableEl.querySelector('.el-table__body-wrapper tbody');
|
||||
|
||||
if (tbody) {
|
||||
Sortable.create(tbody, {
|
||||
animation: 150, // 动画时间
|
||||
handle: '.el-table__row', // 设置整行皆可拖拽
|
||||
onEnd: ({ newIndex, oldIndex }: any) => {
|
||||
if (newIndex === oldIndex) return;
|
||||
|
||||
// 1. 获取当前列表的引用
|
||||
const currentList = returnVolunteerList();
|
||||
|
||||
// 2. 移动数据：从旧位置删除，插入新位置
|
||||
const currRow = currentList.splice(oldIndex, 1)[0];
|
||||
currentList.splice(newIndex, 0, currRow);
|
||||
|
||||
// 3. 重算 indexs (志愿序号)，确保 UI 上的 "志愿1, 志愿2" 显示正确
|
||||
currentList.forEach((item: any, index: number) => {
|
||||
item.indexs = index + 1;
|
||||
});
|
||||
|
||||
// 4. 显示保存按钮
|
||||
state.visible.showOrderSaveBtn = true;
|
||||
|
||||
// 提示用户
|
||||
// ElMessage.info('顺序已调整，请点击保存生效');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// [新增] 监听 activePage 变化，当切换到 'wdzy' (我的志愿) 时初始化拖拽
|
||||
watch(() => state.activePage, (newVal) => {
|
||||
if (newVal === 'wdzy') {
|
||||
initSortable();
|
||||
}
|
||||
});
|
||||
|
||||
// [新增] 监听批次切换，切换批次后重新初始化拖拽(防止DOM重绘导致失效)
|
||||
watch(() => state.selectForm.batchPaneName, () => {
|
||||
if (state.activePage === 'wdzy') {
|
||||
initSortable();
|
||||
}
|
||||
});
|
||||
|
||||
// [新增] 保存排序事件
|
||||
const handleSaveVolunteerOrder = () => {
|
||||
const currentList = returnVolunteerList();
|
||||
|
||||
// 提取需要的参数，通常只需要 id 和新的 indexs
|
||||
const sortData = currentList.map((item: any) => ({
|
||||
id: item.id || item.calculationMajorId, // 根据你实际的ID字段调整
|
||||
indexs: item.indexs
|
||||
})).filter((item: any) => item.id); // 过滤掉空行
|
||||
|
||||
// 这里调用你的后端接口
|
||||
// 模拟调用
|
||||
console.log('提交保存的数据:', sortData);
|
||||
|
||||
/*
|
||||
axiosInstance({
|
||||
url: ApiConstant.Volunteer.saveOrder, // 替换为你的保存排序接口
|
||||
method: 'post',
|
||||
data: sortData
|
||||
}).then(res => {
|
||||
if(res.data.success){
|
||||
ElMessage.success('志愿顺序保存成功');
|
||||
state.visible.showOrderSaveBtn = false; // 隐藏按钮
|
||||
getVolunteerDetail(); // 重新获取最新数据
|
||||
}
|
||||
});
|
||||
*/
|
||||
// 临时模拟成功
|
||||
ElMessage.success('顺序已保存 (演示)');
|
||||
state.visible.showOrderSaveBtn = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -1868,4 +1969,16 @@ function returnVolunteerList(){
|
|||
font-weight: 600;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
/* [新增] 拖拽时的样式 */
|
||||
:deep(.sortable-ghost) {
|
||||
opacity: 0.8;
|
||||
background: #ecf5ff !important;
|
||||
}
|
||||
:deep(.el-table__row) {
|
||||
cursor: grab; // 手型光标
|
||||
}
|
||||
:deep(.el-table__row:active) {
|
||||
cursor: grabbing; // 抓取时的光标
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue