feat:修改项目任务列表选中逻辑

This commit is contained in:
李晓鸽
2022-11-04 13:34:44 +08:00
parent 2d683472c1
commit 548301083c
6 changed files with 81 additions and 11 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 173 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 352 B

View File

@@ -9,7 +9,6 @@
animation="500"
@start="onStart"
@end="onEnd"
:list="openList"
style="display: flex"
>
<template #item="{ element }">

View File

@@ -603,6 +603,7 @@ import ManageRight from "../../components/drawers/ManageRight";
import * as api from "../../api/index1";
import { message } from "ant-design-vue";
import { toDate } from "../../api/method";
export default {
name: "learningPath",
components: { OwnerShip, PowerList, QueryRight, ManageRight },

View File

@@ -24,7 +24,6 @@
animation="500"
@start="onStart"
@end="onEnd"
:list="level"
>
<template #item="{ element }">
<div
@@ -346,8 +345,27 @@
margin-left: 46px;
"
>
<a-checkbox :checked="selectRow.length !== 0 ? true : false">
</a-checkbox>
<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>
@@ -368,7 +386,6 @@
animation="500"
@start="onStart"
@end="onEnd"
:list="tableData"
>
<template #item="{ element }">
<div
@@ -406,7 +423,7 @@
></div>
<a-checkbox
:id="element.id"
v-model:checked="checked"
v-model:checked="element.checked"
@change="changeRow"
>
</a-checkbox>
@@ -426,6 +443,7 @@
:checked="element.checked1"
size="small"
active-color="red"
@click="changeCourseType(element.id)"
/>
<div class="showt clearfix">
<div
@@ -735,6 +753,7 @@ 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: "项目名称",
@@ -971,6 +990,7 @@ export default {
deleteActivityID: null, //删除活动id
deleteID: "",
selectRow: [], //选择行
selectAll: 0, //0未选择1全选2部分选择
});
const selectProjectName = (value, index) => {
console.log("value", value, index);
@@ -1040,10 +1060,12 @@ export default {
creater: value.name,
cretime: value.duration ? value.duration : "-",
checked1: value.flag ? true : false,
checked: false, //是否选中类型
};
array.push(obj);
});
state.tableData = array;
console.log("state.tableData", state.tableData);
};
const tableDataFunc = () => {
@@ -1186,7 +1208,14 @@ export default {
.then((res) => {
if (res.status == 200) {
console.log("22222", res.data.data.stageList);
let arr = res.data.data.stageList[4].taskList;
let arr =
res.data.data.stageList[res.data.data.stageList.length - 1]
.taskList;
console.log(
"res.data.data.stageList[91].taskList",
res.data.data.stageList[92].taskList
);
getTableData(arr);
}
})
@@ -1665,9 +1694,9 @@ export default {
state.isActive = !state.isActive;
};
//选择表格
//选择单个任务
const changeRow = (e) => {
console.log("选择行", e);
//selectRow:已经选择的任务的id数组
let arr = state.selectRow;
if (e.target.checked) {
arr.push(e.target.id);
@@ -1679,7 +1708,46 @@ export default {
});
}
state.selectRow = arr;
console.log("state.selectRow", state.selectRow);
//判断是否是全部选择或者是全部未选择来修改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;
};
//修改任务的课程类型 id为任务id
const changeCourseType = (id) => {
console.log("任务id", id);
};
return {
...toRefs(state),
@@ -1732,6 +1800,8 @@ export default {
editStage,
updateTableData,
changeRow,
selectRowAll,
changeCourseType,
};
},
};
@@ -2515,7 +2585,7 @@ export default {
}
}
.tableBox {
padding-bottom: 20px;
margin-bottom: 20px;
margin-top: 20px;
.chosen {
background-color: #f2f6fc;