mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-11 20:06:47 +08:00
feat:修改项目任务列表选中逻辑
This commit is contained in:
BIN
src/assets/images/notSelect.png
Normal file
BIN
src/assets/images/notSelect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 152 B |
BIN
src/assets/images/select.png
Normal file
BIN
src/assets/images/select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 B |
BIN
src/assets/images/selectAll.png
Normal file
BIN
src/assets/images/selectAll.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 352 B |
@@ -9,7 +9,6 @@
|
||||
animation="500"
|
||||
@start="onStart"
|
||||
@end="onEnd"
|
||||
:list="openList"
|
||||
style="display: flex"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
|
||||
@@ -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 },
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user