mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-14 21:36:44 +08:00
feat:修改关卡页面的拖拽
This commit is contained in:
jade-kylin
@@ -15,7 +15,45 @@
|
||||
v-for="item in level"
|
||||
:key="item.id"
|
||||
> -->
|
||||
<div
|
||||
|
||||
<draggable
|
||||
v-model="level"
|
||||
chosenClass="chosen"
|
||||
ghostClass="ghost"
|
||||
forceFallback="true"
|
||||
group="stage"
|
||||
animation="500"
|
||||
>
|
||||
<template #item="{ element}">
|
||||
<div
|
||||
class="items"
|
||||
:class="isactive == element.chapterId ? 'active' : ''"
|
||||
@click="changebgc(element.chapterId)"
|
||||
>
|
||||
<div class="items1">
|
||||
<div class="boxs_left">
|
||||
<div class="script">
|
||||
<span style="font-size: 12px; color: #ffffff">说明</span>
|
||||
</div>
|
||||
<div class="imgIcon"></div>
|
||||
</div>
|
||||
<div class="boxs_right">
|
||||
<div class="imgIcon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="items2">
|
||||
<div class="nname">{{ element.name }}</div>
|
||||
</div>
|
||||
<!-- <div class="itemle">
|
||||
<div class="tit">{{ item.remark }}</div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
|
||||
<!-- <div
|
||||
class="items"
|
||||
:class="isactive == index ? 'active' : ''"
|
||||
@click="changebgc(index)"
|
||||
@@ -36,11 +74,8 @@
|
||||
<div class="items2">
|
||||
<div class="nname">{{ item.name }}</div>
|
||||
</div>
|
||||
<!-- <div class="itemle">
|
||||
<div class="tit">{{ item.remark }}</div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -317,7 +352,177 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="tableBox">
|
||||
<a-table
|
||||
<div
|
||||
style="
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #eff4fc;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #999ba3;
|
||||
line-height: 36px;
|
||||
border-bottom: 1px solid #f2f6fc;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 87px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
margin-left: 46px;
|
||||
"
|
||||
>
|
||||
<img
|
||||
style="
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
margin-top: 12px;
|
||||
"
|
||||
:src="
|
||||
selectAll === 0
|
||||
? require('../../assets/images/notSelect.png')
|
||||
: selectAll === 1
|
||||
? require('../../assets/images/selectAll.png')
|
||||
: require('../../assets/images/select.png')
|
||||
"
|
||||
@click="selectRowAll"
|
||||
/>
|
||||
<!-- <a-checkbox
|
||||
v-model:checked="selectAll"
|
||||
@change="selectRowAll"
|
||||
>
|
||||
</a-checkbox> -->
|
||||
<div style="margin-top: 2px; margin-left: 8px">类型</div>
|
||||
</div>
|
||||
<div style="width: 120px; text-align: center">任务名称</div>
|
||||
<div style="width: 120px; text-align: center">必修/选修</div>
|
||||
<div style="width: 87px; text-align: center">时长</div>
|
||||
<div
|
||||
style="width: 120px; text-align: center; margin-right: 20px"
|
||||
>
|
||||
操作
|
||||
</div>
|
||||
</div>
|
||||
<draggable
|
||||
v-model="tableData"
|
||||
chosenClass="chosen"
|
||||
ghostClass="ghost"
|
||||
forceFallback="true"
|
||||
group="task"
|
||||
animation="500"
|
||||
@start="onStart"
|
||||
@end="onEnd"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div
|
||||
style="
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f2f6fc;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #4f5156;
|
||||
line-height: 36px;
|
||||
"
|
||||
class="tableRow"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 87px;
|
||||
text-align: center;
|
||||
margin-left: 46px;
|
||||
position: relative;
|
||||
"
|
||||
>
|
||||
<div class="racona">
|
||||
<div
|
||||
class="img"
|
||||
style="
|
||||
cursor: pointer;
|
||||
margin-top: 2px;
|
||||
margin-right: 9px;
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
"
|
||||
></div>
|
||||
<a-checkbox
|
||||
:id="element.id"
|
||||
v-model:checked="element.checked"
|
||||
@change="changeRow"
|
||||
>
|
||||
</a-checkbox>
|
||||
<div style="margin-top: 2px; margin-left: 8px">
|
||||
{{ element.lei }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 120px; text-align: center">
|
||||
{{ element.creater }}
|
||||
</div>
|
||||
<div style="width: 120px; text-align: center">
|
||||
<div class="opat">
|
||||
<div class="opacationt clearfix">
|
||||
<a-switch
|
||||
style="margin-left: -50px; margin-top: 3px"
|
||||
:checked="element.checked1"
|
||||
size="small"
|
||||
active-color="red"
|
||||
@click="changeCourseType(element.id)"
|
||||
/>
|
||||
<div class="showt clearfix">
|
||||
<div
|
||||
class="bi"
|
||||
:style="{
|
||||
'z-index': element.checked1 ? 999 : 998,
|
||||
}"
|
||||
>
|
||||
必修
|
||||
</div>
|
||||
<div class="xuan">选修</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 87px; text-align: center">
|
||||
{{ element.cretime }}分钟
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
margin-right: 20px;
|
||||
"
|
||||
>
|
||||
<div class="opa">
|
||||
<div class="opacation">
|
||||
<span
|
||||
style="
|
||||
color: #4ea6ff;
|
||||
margin-right: 25px;
|
||||
cursor: pointer;
|
||||
"
|
||||
>
|
||||
编辑
|
||||
</span>
|
||||
<span
|
||||
style="color: #4ea6ff; cursor: pointer"
|
||||
@click="showDelete(element.id)"
|
||||
>
|
||||
删除
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<!-- <a-table
|
||||
style="border: 1px solid #f2f6fe"
|
||||
:columns="tableDataFunc()"
|
||||
:data-source="tableData"
|
||||
@@ -331,7 +536,7 @@
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
<!-- 无数据样式 -->
|
||||
<div class="notable" :style="{ display: stm_hs ? 'block' : 'none' }">
|
||||
@@ -630,6 +835,7 @@ import * as api from "../../api/indexLevel";
|
||||
import { GetRouterDetail, RouterDeleteTask } from "../../api/indexTask";
|
||||
import { message } from "ant-design-vue";
|
||||
import { storage } from "../../api/storage";
|
||||
import draggable from "vuedraggable";
|
||||
export default {
|
||||
name: "LevelAddDetail",
|
||||
components: {
|
||||
@@ -644,6 +850,7 @@ export default {
|
||||
AddVote,
|
||||
AddLive,
|
||||
AddRef,
|
||||
draggable,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
@@ -874,6 +1081,8 @@ export default {
|
||||
updateChapterID: null, //修改关卡id
|
||||
// 表示当前触发列表的id,用来发送编辑和删除
|
||||
ListChoosedId: 0,
|
||||
selectRow: [], //选择行
|
||||
selectAll: 0, //0：未选择，1：全选，2：部分选择
|
||||
});
|
||||
const showDrawerAddDiscuss = () => {
|
||||
state.adddiscussvisible = true;
|
||||
@@ -957,8 +1166,12 @@ export default {
|
||||
// tableData数据赋值方法
|
||||
const dataAssignment = (id) => {
|
||||
console.log(state.level);
|
||||
state.level[id].taskList.forEach((element, index) => {
|
||||
state.tableData[index] = {
|
||||
for(let i=0;i<state.level.length;i++){
|
||||
if(state.level[i].chapterId===id){
|
||||
let array=[]
|
||||
state.level[i].taskList.forEach((element, ) => {
|
||||
let obj = {
|
||||
id: element.routerTaskId,
|
||||
key: element.routerTaskId,
|
||||
lei: checkType(element.type),
|
||||
creater: element.name,
|
||||
@@ -966,15 +1179,21 @@ export default {
|
||||
checked1: element.flag,
|
||||
routerTaskId: element.routerTaskId,
|
||||
};
|
||||
array.push(obj)
|
||||
});
|
||||
state.tableData=array
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
const getDetail = (index) => {
|
||||
GetRouterDetail(state.routerId)
|
||||
.then((res) => {
|
||||
state.level = res.data.data.chapterList;
|
||||
console.log(state.level);
|
||||
if (index == 0) {
|
||||
dataAssignment(0);
|
||||
if (index == 0&&state.level.length>0) {
|
||||
dataAssignment(state.level[0].chapterId);
|
||||
state.isactive=state.level[0].chapterId
|
||||
}
|
||||
state.deleteModal = false;
|
||||
})
|
||||
@@ -1340,9 +1559,11 @@ export default {
|
||||
document.getElementsByTagName("main")[0].style.boxShadow =
|
||||
"0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
|
||||
});
|
||||
const changebgc = (index) => {
|
||||
state.isactive = index;
|
||||
dataAssignment(index);
|
||||
const changebgc = (chapterId) => {
|
||||
state.isactive = chapterId;
|
||||
state.selectRow= [], //选择行
|
||||
state.selectAll=0, //0：未选择，1：全选，2：部分选择
|
||||
dataAssignment(chapterId);
|
||||
};
|
||||
const gqxy_hShow = () => {
|
||||
state.gqxy_hs = !state.gqxy_hs;
|
||||
@@ -1390,6 +1611,58 @@ export default {
|
||||
getDetail(0);
|
||||
};
|
||||
|
||||
|
||||
//选择单个任务
|
||||
const changeRow = (e) => {
|
||||
//selectRow:已经选择的任务的id数组
|
||||
let arr = state.selectRow;
|
||||
if (e.target.checked) {
|
||||
arr.push(e.target.id);
|
||||
} else {
|
||||
arr.map((value, index) => {
|
||||
if (value == e.target.id) {
|
||||
arr.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
state.selectRow = arr;
|
||||
//判断是否是全部选择或者是全部未选择来修改selectAll框的样式
|
||||
if (arr.length !== 0) {
|
||||
if (arr.length === state.tableData.length) {
|
||||
state.selectAll = 1;
|
||||
} else {
|
||||
state.selectAll = 2;
|
||||
}
|
||||
} else {
|
||||
state.selectAll = 0;
|
||||
}
|
||||
console.log("state.selectRow", state.selectRow, state.selectAll);
|
||||
};
|
||||
//全选任务或全不选任务
|
||||
const selectRowAll = () => {
|
||||
let arr = state.tableData;
|
||||
let array = [];
|
||||
if (state.selectAll === 0 || state.selectAll === 2) {
|
||||
arr.map((value) => {
|
||||
// console.log("value", value, index);
|
||||
value.checked = true;
|
||||
array.push(value.id);
|
||||
// if (value == e.target.id) {
|
||||
// arr.splice(index, 1);
|
||||
// }
|
||||
state.selectAll = 1;
|
||||
});
|
||||
} else {
|
||||
array = [];
|
||||
arr.map((value) => {
|
||||
// console.log("value", value, index);
|
||||
value.checked = false;
|
||||
state.selectAll = 0;
|
||||
});
|
||||
}
|
||||
state.tableData = arr;
|
||||
state.selectRow = array;
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
tableDataFunc,
|
||||
@@ -1423,6 +1696,8 @@ export default {
|
||||
clearEditData,
|
||||
showDrawerAddDiscuss,
|
||||
showDrawerAddActive,
|
||||
selectRowAll,
|
||||
changeRow,
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -1818,6 +2093,13 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.chosen {
|
||||
// background-color: pink;
|
||||
}
|
||||
.ghost {
|
||||
// background-color: red;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.items {
|
||||
width: 171px;
|
||||
// height: 83px;
|
||||
@@ -1877,7 +2159,7 @@ export default {
|
||||
}
|
||||
.active {
|
||||
opacity: 1;
|
||||
transition: all 0.5s;
|
||||
// transition: all 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2102,6 +2384,14 @@ export default {
|
||||
.tableBox {
|
||||
margin-top: 21px;
|
||||
margin-bottom: 20px;
|
||||
.chosen {
|
||||
background-color: #f2f6fc;
|
||||
opacity: 1;
|
||||
}
|
||||
.ghost {
|
||||
// background-color: red;
|
||||
opacity: 0;
|
||||
}
|
||||
.classify {
|
||||
margin-left: 10px !important;
|
||||
padding-left: 9px !important;
|
||||
@@ -2515,6 +2805,7 @@ export default {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
height: 23px;
|
||||
position: relative;
|
||||
.bi {
|
||||
// margin-top: 10px;
|
||||
width: 63px;
|
||||
|
||||
Reference in New Issue
Block a user