mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-10 19:36:46 +08:00
feat:增加阶段及任务列表拖拽
This commit is contained in:
李晓鸽
@@ -4,8 +4,9 @@
|
||||
v-model="openList"
|
||||
chosenClass="chosen"
|
||||
forceFallback="true"
|
||||
group="people"
|
||||
animation="1000"
|
||||
ghostClass="ghost"
|
||||
group="openPage"
|
||||
animation="500"
|
||||
@start="onStart"
|
||||
@end="onEnd"
|
||||
:list="openList"
|
||||
@@ -121,5 +122,13 @@ export default {
|
||||
.close:hover {
|
||||
background: rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.chosen {
|
||||
// background-color: pink;
|
||||
}
|
||||
.ghost {
|
||||
// background-color: red;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -238,7 +238,10 @@
|
||||
<div class="text">测评</div>
|
||||
<!-- 添加测评侧弹窗 -->
|
||||
<div>
|
||||
<add-eval v-model:addevalVisible="addevalvisible" v-model:edit="edit" />
|
||||
<add-eval
|
||||
v-model:addevalVisible="addevalvisible"
|
||||
v-model:edit="edit"
|
||||
/>
|
||||
</div>
|
||||
<!-- 添加测评侧弹窗 -->
|
||||
</div>
|
||||
@@ -770,7 +773,7 @@ export default {
|
||||
value1: "",
|
||||
value2: "",
|
||||
selectedRowKeys: [],
|
||||
edit:false, //是否点击编辑
|
||||
edit: false, //是否点击编辑
|
||||
gqxy_hs: true,
|
||||
isactive: 0,
|
||||
projectChecked: null, //项目单选框
|
||||
@@ -865,6 +868,7 @@ export default {
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const getDetail = (index) => {
|
||||
GetRouterDetail(92)
|
||||
.then((res) => {
|
||||
@@ -1009,7 +1013,7 @@ export default {
|
||||
<div class="opacation">
|
||||
<span
|
||||
style="color:#4EA6FF;margin-right:25px;cursor:pointer"
|
||||
onClick={()=>{
|
||||
onClick={() => {
|
||||
state.edit = true;
|
||||
state.addevalvisible = true;
|
||||
}}
|
||||
|
||||
@@ -15,25 +15,39 @@
|
||||
<div class="btnText">添加阶段</div>
|
||||
</div>
|
||||
<div class="maincon" style="background-color: #fff">
|
||||
<div
|
||||
class="item"
|
||||
:class="isactive == index && isActive == true ? 'bgcactive' : ''"
|
||||
v-for="(item, index) in level"
|
||||
@click="changebgc(index)"
|
||||
:key="item.id"
|
||||
<draggable
|
||||
v-model="level"
|
||||
chosenClass="chosen"
|
||||
ghostClass="ghost"
|
||||
forceFallback="true"
|
||||
group="stage"
|
||||
animation="500"
|
||||
@start="onStart"
|
||||
@end="onEnd"
|
||||
:list="level"
|
||||
>
|
||||
<div class="itemle">
|
||||
<div class="tit">{{ item.tit }}</div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="itemri">
|
||||
<img src="../../assets/images/leveladd/z1.png" />
|
||||
<img
|
||||
style="margin-top: 40px"
|
||||
src="../../assets/images/leveladd/z2.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<template #item="{ element }">
|
||||
<div
|
||||
class="item"
|
||||
:class="
|
||||
isactive == index && isActive == true ? 'bgcactive' : ''
|
||||
"
|
||||
@click="changebgc(index)"
|
||||
>
|
||||
<div class="itemle">
|
||||
<div class="tit">{{ element.tit }}</div>
|
||||
<div class="name">{{ element.name }}</div>
|
||||
</div>
|
||||
<div class="itemri">
|
||||
<img src="../../assets/images/leveladd/z1.png" />
|
||||
<img
|
||||
style="margin-top: 40px"
|
||||
src="../../assets/images/leveladd/z2.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -207,7 +221,10 @@
|
||||
</div>
|
||||
<!-- 添加活动侧弹窗 -->
|
||||
<div>
|
||||
<add-active v-model:addactiveVisible="addactivevisible" @changeData="updateTableData"/>
|
||||
<add-active
|
||||
v-model:addactiveVisible="addactivevisible"
|
||||
@changeData="updateTableData"
|
||||
/>
|
||||
</div>
|
||||
<!-- 添加活动侧弹窗 -->
|
||||
<div class="lin"></div>
|
||||
@@ -221,8 +238,10 @@
|
||||
</div>
|
||||
<!-- 添加测评侧弹窗 -->
|
||||
<div>
|
||||
<add-eval v-model:addevalVisible="addevalvisible"
|
||||
@changeData="updateTableData"/>
|
||||
<add-eval
|
||||
v-model:addevalVisible="addevalvisible"
|
||||
@changeData="updateTableData"
|
||||
/>
|
||||
</div>
|
||||
<!-- 添加测评侧弹窗 -->
|
||||
<div class="lin"></div>
|
||||
@@ -236,8 +255,10 @@
|
||||
</div>
|
||||
<!-- 添加评估侧弹窗 -->
|
||||
<div>
|
||||
<add-invist v-model:addinvistVisible="addinvistvisible"
|
||||
@changeData="updateTableData"/>
|
||||
<add-invist
|
||||
v-model:addinvistVisible="addinvistvisible"
|
||||
@changeData="updateTableData"
|
||||
/>
|
||||
</div>
|
||||
<!-- 添加评估侧弹窗 -->
|
||||
<div class="lin"></div>
|
||||
@@ -250,8 +271,10 @@
|
||||
<div class="text">投票</div>
|
||||
<!-- 添加投票侧弹窗 -->
|
||||
<div>
|
||||
<add-vote v-model:addvoteVisible="addvotevisible"
|
||||
@changeData="updateTableData"/>
|
||||
<add-vote
|
||||
v-model:addvoteVisible="addvotevisible"
|
||||
@changeData="updateTableData"
|
||||
/>
|
||||
</div>
|
||||
<!-- 添加投票侧弹窗 -->
|
||||
</div>
|
||||
@@ -300,8 +323,155 @@
|
||||
<span class="yi">条</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="tableBox">
|
||||
<a-table
|
||||
<div class="tableBox" style="border: 1px solid #f2f6fc">
|
||||
<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;
|
||||
"
|
||||
>
|
||||
<a-checkbox :checked="selectRow.length !== 0 ? true : false">
|
||||
</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"
|
||||
:list="tableData"
|
||||
>
|
||||
<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="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"
|
||||
/>
|
||||
<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">
|
||||
删除
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<!-- <a-table
|
||||
style="border: 1px solid #f2f6fe"
|
||||
:columns="tableDataFunc()"
|
||||
:data-source="tableData"
|
||||
@@ -314,7 +484,7 @@
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
/>
|
||||
/> -->
|
||||
|
||||
<!-- <div class="pa">
|
||||
<a-pagination
|
||||
@@ -564,6 +734,7 @@ import * as apieval from "../../api/indexEval";
|
||||
import * as apiinvist from "../../api/indexInvist";
|
||||
import * as apivote from "../../api/indexVote";
|
||||
import * as apistage from "../../api/indexStage";
|
||||
import draggable from "vuedraggable";
|
||||
const drawercolumns = [
|
||||
{
|
||||
title: "项目名称",
|
||||
@@ -605,6 +776,7 @@ const drawercolumns = [
|
||||
export default {
|
||||
name: "TaskAdd",
|
||||
components: {
|
||||
draggable,
|
||||
AddOnline,
|
||||
EditOnline,
|
||||
AddFaceteach,
|
||||
@@ -798,6 +970,7 @@ export default {
|
||||
deleteDiscussID: null, //删除讨论id
|
||||
deleteActivityID: null, //删除活动id
|
||||
deleteID: "",
|
||||
selectRow: [], //选择行
|
||||
});
|
||||
const selectProjectName = (value, index) => {
|
||||
console.log("value", value, index);
|
||||
@@ -1492,6 +1665,22 @@ export default {
|
||||
state.isActive = !state.isActive;
|
||||
};
|
||||
|
||||
//选择表格
|
||||
const changeRow = (e) => {
|
||||
console.log("选择行", e);
|
||||
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;
|
||||
console.log("state.selectRow", state.selectRow);
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
selectProjectName,
|
||||
@@ -1542,6 +1731,7 @@ export default {
|
||||
deleteTask,
|
||||
editStage,
|
||||
updateTableData,
|
||||
changeRow,
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -1932,6 +2122,13 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; // background-color: #bfa;
|
||||
.chosen {
|
||||
// background-color: pink;
|
||||
}
|
||||
.ghost {
|
||||
// background-color: red;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.item {
|
||||
width: 171px;
|
||||
height: 83px;
|
||||
@@ -2320,6 +2517,20 @@ export default {
|
||||
.tableBox {
|
||||
padding-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
.chosen {
|
||||
background-color: #f2f6fc;
|
||||
opacity: 1;
|
||||
}
|
||||
.ghost {
|
||||
// background-color: red;
|
||||
opacity: 0;
|
||||
}
|
||||
.tableRow:hover {
|
||||
background-color: #f2f6fc;
|
||||
}
|
||||
// .tableRow: {
|
||||
// background-color: #f2f6fc;
|
||||
// }
|
||||
.classify {
|
||||
margin-left: 10px !important;
|
||||
padding-left: 9px !important;
|
||||
@@ -2411,19 +2622,15 @@ export default {
|
||||
}
|
||||
}
|
||||
.racona {
|
||||
// background-color: #bfa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
height: 100%;
|
||||
.img {
|
||||
// margin-left: -40px;
|
||||
// margin-top: -2px;
|
||||
width: 17px;
|
||||
height: 14px;
|
||||
background-image: url("../../assets/images/leveladd/z1.png");
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
// position: absolute;
|
||||
// left: -40px;
|
||||
}
|
||||
.ch {
|
||||
margin-left: 10px;
|
||||
|
||||
Reference in New Issue
Block a user