Files
fe-manage/src/components/drawers/MemberList.vue
2023-02-28 23:33:26 +08:00

994 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<a-drawer
:visible="Lvisible"
class="drawerStyle MemberList"
placement="right"
width="70%"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">组员名单</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<div class="main">
<div class="search">
<div class="namecon" style="margin-right: 30px">
<div class="name">组员名称</div>
<a-input
v-model:value="name"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入姓名"
/>
</div>
<div class="btns">
<div class="btn btn1" style="margin-right: 20px" @click="searchStu">
<div class="img1"></div>
<div class="wz">搜索</div>
</div>
<div class="btn btn2" @click="resetSearch">
<div class="img2"></div>
<div class="wz">重置</div>
</div>
</div>
</div>
<div class="btnss" style="margin-top: 20px">
<!-- <div
class="btn btn1"
@click="showStuAdd"
style="margin-right: 20px; color: #fff"
>
<div class="img1"></div>
<div class="wz">添加组员</div>
</div> -->
<CommonStudent
:type="1"
title="添加组员"
@finash="submitCall"
:isGroup="true"
:id="projectId"
:groupId="chooseGroupId"
:groupName="chooseGroupName"
:groupMemberCount="groupMemberCount"
:groupMemberNumber="total"
>
<a-button class="cus-btn" style="background: #4ea6ff; color: #fff">
<template #icon
><img
style="margin-right: 10px"
src="../../assets/images/courseManage/add0.png"
/></template>
添加组员
</a-button></CommonStudent
>
<div class="btn btn2" @click="showModal">
<div class="img3"></div>
<div class="wz">批量删除</div>
</div>
<!-- 2022-11-30注释 后面放开 -->
<div class="btn btn2" @click="exportGroupMember">
<div class="img2"></div>
<div class="wz">导出组员</div>
</div>
</div>
<div class="line">
<div class="inline">
<div class="left">
<div class="img"></div>
<div class="text" style="margin-left: 10px">已选择</div>
<div class="text2">{{ choosed }}</div>
<div class="text"></div>
<div class="text3">列表选项总计</div>
<div class="text4">{{ total }}</div>
</div>
<div class="right" @click="clearChooseStu">清空</div>
</div>
</div>
<div class="tableBox" style="margin-top: 20px; margin-bottom: 100px">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tablecolumns"
:data-source="tabledata"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ x: 900 }"
@expand="expandTable"
:pagination="false"
:row-selection="{
columnWidth: 30,
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
/>
<div class="pa">
<a-pagination
v-if="total > 10"
:showSizeChanger="false"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="total"
class="pagination"
@change="changePaginationStu"
/>
</div>
</div>
</div>
<div class="btnn">
<button class="btn1" @click="closeDrawer">取消</button>
<button class="btn2" @click="closeDrawer">确定</button>
</div>
<!-- 批量删除的弹窗 -->
<a-modal
:closable="closable"
v-model:visible="showmodal"
centered="true"
:footer="null"
wrapClassName="FacMa"
>
<div class="head">
<div class="inhead">
<div class="left">
<img src="../../assets/images/coursewareManage/notice.png" />
<div class="tis">提示</div>
</div>
<div class="right" @click="closeModal"></div>
</div>
</div>
<div class="main">请确认是否批量删除组员</div>
<div class="butn">
<button class="btn btn1" @click="closeModal">取消</button>
<button class="btn btn2" @click="sureDeModal">确定</button>
</div>
</a-modal>
<!-- 单独删除的弹窗 -->
<a-modal
:closable="closable"
v-model:visible="deone"
centered="true"
:footer="null"
wrapClassName="FacMa"
>
<div class="head">
<div class="inhead">
<div class="left">
<img src="../../assets/images/coursewareManage/notice.png" />
<div class="tis">提示</div>
</div>
<div class="right" @click="closedeleone"></div>
</div>
</div>
<div class="main">请确认是否删除组员</div>
<div class="butn">
<button class="btn btn1" @click="closedeleone">取消</button>
<button class="btn btn2" @click="yesdele">确定</button>
</div>
</a-modal>
<!-- <stu-add v-model:Stuvisible="Stuvisible" /> -->
<!-- <add-group-members
v-model:AGMembers="Stuvisible"
:chooseGroupId="chooseGroupId"
:projectId="projectId"
@getStuPro="getStu"
/> -->
</div>
</a-drawer>
</template>
<script>
import { toRefs, reactive, watch } from "vue";
// import StuAdd from "./StuAdd.vue";
// import { getProjStu } from "../../api/indexProjStu";
import { groupMemberList, delGroupStudent } from "@/api/index1";
import { toDate } from "../../api/method";
import { message } from "ant-design-vue";
// import AddGroupMembers from "./AddGroupMembers.vue";
import CommonStudent from "@/components/student/CommonStudent";
export default {
name: "MemberList",
components: {
// StuAdd,
// AddGroupMembers,
CommonStudent,
},
props: {
Lvisible: {
type: Boolean,
default: false,
},
chooseGroupId: {
type: Number,
default: null,
},
chooseGroupName: {
type: String,
default: null,
},
groupMemberCount: {
type: Number,
default: null,
},
projectId: {
type: Number,
default: null,
},
},
setup(props, ctx) {
const state = reactive({
Stuvisible: false,
// chooseGroupId: props.chooseGroupId,
// projectId: props.projectId,
name: null,
showmodal: false,
closable: false, //modal右上角的关闭按钮
pageSize: 10,
currentPage: 1,
total: null,
tableDataTotal: -1,
selectedRowKeys: [],
choosed: 0, //勾选的学员总数
selectedRows: [], //选择的学员的id值
deleteOne: null,
deone: false,
tabledata: [
// {
// key: 1,
// name: "小李",
// bum: "产品部",
// gangw: "产品经理",
// progress: "20%",
// operations: "删除",
// },
],
tablecolumns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
width: 40,
align: "center",
className: "h head",
},
{
title: "部门",
dataIndex: "bum",
key: "bum",
width: 60,
align: "center",
className: "h",
},
{
title: "岗位",
dataIndex: "gangw",
key: "gangw",
width: 60,
align: "center",
className: "h",
},
{
title: "进度",
dataIndex: "progress",
key: "progress",
width: 60,
align: "center",
className: "h",
},
{
title: "操作",
dataIndex: "operations",
key: "operations",
width: 60,
align: "center",
className: "operation",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: (value) => {
return (
<div
onClick={() => {
deleteOne(value.record.key,value.record);
}}
>
删除
</div>
);
},
},
],
addAuthList: [], //学员
authClassify: 3,
});
const closeDrawer = () => {
ctx.emit("update:Lvisible", false);
state.tabledata = [];
console.log("tabledata", state.tabledata);
};
const showModal = () => {
if (state.selectedRows.length == 0) {
message.destroy();
return message.warning("请选择要删除的学员");
} else {
state.showmodal = true;
}
// state.showmodal = true;
};
//点击确认批量删除弹窗
const sureDeModal = () => {
// 判断选择的人员中是否有小组长
let arr = [...state.tabledata].filter(x => [...state.selectedRowKeys].some(id => id === x.key)).filter(item => item.leaderId !== null);
if (arr.length > 0) {
return message.warning("选择人员中:"+arr[0].name + "是小组长,请勿删除!");
}
console.log(arr)
let obj = {
projectGroupId: props.chooseGroupId,
projectId: props.projectId,
ids: state.selectedRowKeys,
};
delGroupStudent(obj)
.then((res) => {
console.log(res, "删除成功");
message.success("删除成功");
state.selectedRows = [];
getStu();
})
.catch((err) => {
console.log(err, "删除失败");
message.warning("删除失败");
});
state.showmodal = false;
};
const closeModal = () => {
state.showmodal = false;
state.selectedRows = [];
state.selectedRowKeys = [];
};
const showStuAdd = () => {
state.Stuvisible = true;
// console.log("单击");
};
//把数据放到state里
const getTableDataList = (tableData) => {
let data = tableData;
let array = [];
data.map((value) => {
let obj = {
key: value.id,
projectId: value.projectId, //项目id
groupId: value.groupId, //小组id
group: value.groupName, //小组名
studentId: value.studentId, //学生id
leaderId: value.leaderId, //小组长
currentStageId: value.currentStageId, //当前关卡id
name: value.studentName, //用户名
bum: value.studentDepartName, //部门
gangw: value.studentJobName, //岗位
completeStageCnt: value.completeStageCnt, //当前完成阶段数
totalStageCnt: value.totalStageCnt, //总阶段数
progress: value.completeStageCnt + "/" + value.totalStageCnt,
stutime: toDate(value.beginStudyTime / 1000, "Y-M-D"), //开始学习时间
};
array.push(obj);
});
state.tabledata = array;
};
//获取组员列表
const getStu = (obj) => {
let objf = obj || {
studentName: state.name,
pageNo: state.currentPage,
pageSize: 10,
pid: props.projectId,
groupId: props.chooseGroupId, //暂时写死
};
state.tableDataTotal = -1;
groupMemberList(objf).then((res) => {
console.log(res.data.data, "获取学员列表");
if (res.data.code === 200) {
state.total = res.data.data.total;
state.tableDataTotal = res.data.data.total;
let arr = res.data.data.records;
console.log("获取小组学员", arr);
getTableDataList(arr);
}
// let leng = res.data.data.rows.length;
// state.tableDataTotal = res.data.data.total;
// if (leng > 0) {
// }
});
};
const afterVisibleChange = (bool) => {
if (bool) {
getStu();
}
};
//分页
const changePaginationStu = (page) => {
state.currentPage = page;
getStu();
};
//勾选学员
const onSelectChange = (selectedRowKeys, selectedRows) => {
console.log("selectedRowKeys changed: ", selectedRowKeys);
state.selectedRowKeys = selectedRowKeys;
state.choosed = state.selectedRowKeys.length;
console.log("ssss", selectedRows);
state.selectedRows = [];
console.log("before", state.selectedRows);
// let arr = [];
//遍历 插入到state.selectedRows里
selectedRows.map((item) => {
console.log(item.studentId);
state.selectedRows.push(item.studentId);
// arr.push(item.studentId);
// console.log("asdfasdf", arr);
});
// state.selectedRows = arr;
console.log("after", state.selectedRows);
// console.log(state.selectedRows[0]);
// console.log("dddd",selectedRows.)
//判断是否为数组
// console.log("wwwwww", Object.prototype.toString.call(state.selectedRows));
};
//清空所选的学员
const clearChooseStu = () => {
state.selectedRowKeys = [];
state.choosed = 0;
};
//学员搜索
const searchStu = () => {
// let obj = {
// studentName: state.name,
// pageNo: state.currentPage,
// pageSize: 10,
// pid: props.projectId,
// groupId: props.chooseGroupId, //暂时写死
// };
//重新获取列表
getStu();
};
//重置
const resetSearch = () => {
state.name = null;
// let obj = {
// deptIds: [], //部门
// groupName: "",
// name: "",
// pageNo: 1,
// pageSize: 10,
// projectId: props.projectId,
// groupId: props.chooseGroupId,
// topFlag: "",
// };
//重新获取列表
getStu();
};
const deleteOne = (id,row) => {
console.log("row", row);
if (row.leaderId !== null) {
return message.warning(""+row.name + "是小组长,请勿删除!");
}
console.log(`${id}`);
state.deone = true;
state.selectedRows = [];
state.selectedRows.push(id);
// state.deleteClassify=1
};
//点击取消删除单个学员
const closedeleone = () => {
state.deone = false;
state.selectedRows = [];
state.selectedRowKeys = [];
};
const yesdele = () => {
let obj = {
projectGroupId: props.chooseGroupId,
projectId: props.projectId,
ids: state.selectedRows,
};
console.log("删除小组学员obj", obj);
delGroupStudent(obj)
.then((res) => {
state.deone = false;
console.log(res, "单个删除成功");
message.success("删除成功");
getStu();
})
.catch((err) => {
console.log(err, "单个删除失败");
message.warning("删除失败");
});
state.selectedRows = [];
};
//添加学员
watch(
() => state.addAuthList,
(res) => {
console.log("res", res, state.addAuthList);
// let obj = {
// deptList: res[1],
// groupList: res[2],
// projectId: state.projectId,
// studentList: res[0],
// projectGroupId: 0,
// };
// console.log("obj", obj);
// state.loading = true;
// api
// .addStudentProject(obj)
// .then((res) => {
// console.log("添加学员成功", res);
// message.success("添加学员成功");
// getStu();
// })
// .catch((err) => {
// console.log("添加学员失败", err);
// });
}
);
// 导出数据
function exportGroupMember() {
console.log("props.datasource", props);
window.open(
`${process.env.VUE_APP_BASE_API}/admin/studentGroup/exportGroupMember?pid=${props.projectId}&groupId=${props.chooseGroupId}&stageId=${-1}`
);
}
function submitCall(flag) {
flag && getStu();
}
return {
...toRefs(state),
closeDrawer,
showModal,
closeModal,
showStuAdd,
getStu,
getTableDataList,
afterVisibleChange,
changePaginationStu,
clearChooseStu,
onSelectChange,
searchStu,
resetSearch,
sureDeModal,
deleteOne,
closedeleone,
yesdele,
submitCall,
exportGroupMember
};
},
};
</script>
<style lang="scss">
.MemberList {
.drawerMain {
min-width: 600px;
margin: 0px 32px 0px 32px;
//overflow-x: auto;
display: flex;
flex-direction: column;
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
// background-color: red;
margin-bottom: 20px;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
// margin-left: 24px;
}
}
.main {
width: 100%;
height: 100%;
// background-color: #bfa;
overflow-y: auto;
.endtime {
font-size: 16px;
font-weight: 500;
color: #333333;
}
.search {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 20px;
.namecon {
display: flex;
flex-wrap: nowrap;
margin-bottom: 10px;
.name {
margin-top: 8px;
}
// .name {
// margin-top: 8px;
// color: rgba(0, 0, 0, 0.85);
// font-size: 14px;
// font-weight: 400;
// }
}
.btns {
display: flex;
flex-wrap: nowrap;
.btn {
cursor: pointer;
width: 100px;
height: 40px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
.img1 {
width: 15px;
height: 17px;
background-image: url(../../assets/images/courseManage/search0.png);
background-size: 100% 100%;
margin-right: 7px;
}
.img2 {
width: 16px;
height: 18px;
background-image: url(../../assets/images/courseManage/reset1.png);
background-size: 100% 100%;
margin-right: 7px;
}
}
.btn1 {
background: #4ea6ff;
color: #ffffff;
}
.btn2 {
background: #ffffff;
color: #4ea6ff;
border: 1px solid #4ea6ff;
}
}
}
.btnss {
display: flex;
flex-wrap: nowrap;
.btn {
cursor: pointer;
width: 130px;
height: 40px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
.img1 {
width: 15px;
height: 17px;
background-image: url(../../assets/images/courseManage/add0.png);
background-size: 100% 100%;
margin-right: 7px;
}
.img2 {
width: 17px;
height: 16px;
background-image: url(../../assets/images/coursewareManage/export.png);
background-size: 100% 100%;
margin-right: 7px;
}
.img3 {
width: 17px;
height: 16px;
background-image: url(../../assets/images/projectadd/delete.png);
background-size: 100% 100%;
margin-right: 7px;
}
}
.btn1 {
background: #4ea6ff;
color: #ffffff;
}
.btn2 {
background: #ffffff;
margin-right: 20px;
color: #4ea6ff;
border: 1px solid #4ea6ff;
}
}
.line {
width: 100%;
height: 40px;
background-color: #e9f6fe;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
border: 1px solid #c3e6fc;
.inline {
width: 95%;
height: 100%;
display: flex;
justify-content: space-between;
// background-color: #bfa;
.left {
height: 100%;
display: flex;
align-items: center;
.img {
width: 14px;
height: 15px;
background-image: url(../../assets/images/leveladd/gan.png);
background-size: 100% 100%;
}
.text {
color: #999ba3;
}
.text2 {
color: #4ea6ff;
margin-left: 5px;
margin-right: 5px;
}
.text3 {
color: #999ba3;
margin-left: 20px;
}
}
.right {
font-size: 14px;
font-weight: 400;
color: #387df7;
height: 100%;
display: flex;
align-items: center;
cursor: pointer;
}
}
}
.tableBox {
.ant-table-selection-column {
padding: 0px !important;
// padding-left: 45px !important;
}
.ant-table-thead > tr > th {
background-color: rgba(239, 244, 252, 1) !important;
color: rgba(0, 0, 0, 0.85);
}
.ant-table-cell {
color: rgba(0, 0, 0, 0.65);
}
.ant-table-selection-column {
padding: 0 !important;
}
th.h {
background-color: #eff4fc !important;
}
.head {
padding-left: 0px !important;
}
.operation {
color: rgba(56, 125, 247, 1);
cursor: pointer;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
.ant-table-tbody > tr > td {
border-bottom: 1px solid rgba(240, 244, 254, 1);
}
.pa {
// left: 0;
margin-top: 15px;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
// position: absolute;
// bottom: 20px;
}
}
}
.btnn {
height: 72px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
.FacMa {
.ant-modal {
width: 424px;
height: 258px;
.ant-modal-content {
width: 424px;
height: 258px;
.ant-modal-body {
width: 424px;
height: 258px;
padding: 0px;
.head {
width: 424px;
height: 68px;
// position: absolute;
// left: 0;
// top: 0;
background: linear-gradient(
180deg,
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
justify-content: center;
.inhead {
width: 90%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.gan {
width: 16px;
height: 16px;
background-image: url(../../assets/images/taskpage/gan.png);
}
.tis {
margin-left: 5px;
width: 32px;
font-size: 16px;
font-weight: 600;
color: #333333;
}
}
.right {
width: 22px;
height: 22px;
background-image: url(../../assets/images/basicinfo/close.png);
background-size: 100% 100%;
cursor: pointer;
}
}
}
.main {
margin-top: 20px;
width: 100%;
display: flex;
justify-content: center;
font-size: 14px;
font-weight: 400;
color: #333333;
}
.butn {
width: 100%;
display: flex;
margin-top: 60px;
justify-content: center;
.btn {
width: 100px;
height: 40px;
border-radius: 4px;
cursor: pointer;
}
.btn1 {
color: #387df7;
background: #ffffff;
border: 1px solid #387df7;
}
.btn2 {
background: #4ea6ff;
color: #fff;
border: 0;
margin-left: 10px;
}
}
}
}
}
}
</style>