feat：获取学员列表 搜索 重置 批量删除 单个删除 清空 勾选效果

src/views/projectcenter/TaskPage.vue

@@ -478,7 +478,7 @@
                     >
                       <div class="groupname">小组名称：</div>
                       <a-input
-                        v-model:value="valuestug"
+                        v-model:value="valuestugroup"
                         placeholder="请输入小组名称"
                       />
                     </div>
@@ -494,6 +494,8 @@
                       <a-select
                         v-model:value="valuestub"
                         placeholder="请选择部门"
+                        :options="bum"
+                        @change="handleChangeBum"
                       />
                     </div>
                     <div
@@ -508,15 +510,16 @@
                         v-model:value="valuegood"
                         placeholder="是否为优秀学员"
                         :options="goodstuList"
+                        @change="handleChangeGood"
                       />
                     </div>
                   </div>
                   <div class="groupright">
-                    <div class="btn1">
+                    <div class="btn1" @click="searchStu">
                       <img src="../../assets/images/courseManage/search0.png" />
                       <span class="btn1text">搜索</span>
                     </div>
-                    <div class="btn2">
+                    <div class="btn2" @click="resetCancel">
                       <img src="../../assets/images/courseManage/reset1.png" />
                       <span class="btn2text">重置</span>
                     </div>
@@ -531,7 +534,7 @@
                     <img src="../../assets/images/courseManage/reset2.png" />
                     <span class="btn2text">导入学员</span>
                   </div>
-                  <div class="btn2">
+                  <div class="btn2" @click="showAllDelete">
                     <img src="../../assets/images/projectadd/delete.png" />
                     <span class="btn2text">批量删除</span>
                   </div>
@@ -541,14 +544,14 @@
                   <div class="xu">
                     <span class="yi">已选择</span>
                     <div style="width: 5px; display: inline-block"></div>
-                    <span class="th">2</span>
+                    <span class="th">{{ choosed }}</span>
                     <div style="width: 5px; display: inline-block"></div>
                     <span class="yi">项</span>
                     <span class="zon">列表选项总计：</span>
-                    <span class="yi">4</span>
+                    <span class="yi">{{ total }}</span>
                     <span class="yi">条</span>
                   </div>
-                  <div class="clear">清空</div>
+                  <div class="clear" @click="clearChooseStu">清空</div>
                 </div>
                 <div class="tab" style="margin: 20px 32px 30px 32px">
                   <a-table
@@ -1271,7 +1274,7 @@
     <!-- 删除学员弹窗 -->
     <div>
       <a-modal
-        v-model:visible="canclestu2"
+        v-model:visible="deleteOneStu"
         :footer="null"
         :closable="close"
         wrapClassName="canclestu1"
@@ -1289,10 +1292,10 @@
             </div>
             <div class="del_btnbox">
               <div class="del_btn btn1">
-                <div class="btnText" @click="closeModal4">取消</div>
+                <div class="btnText" @click="closeDeleteOne">取消</div>
               </div>
               <div class="del_btn btn2">
-                <div class="btnText" @click="closeModal4">确定</div>
+                <div class="btnText" @click="closeDeleteOneConfirm">确定</div>
               </div>
             </div>
           </div>
@@ -1644,10 +1647,41 @@
         </div>
       </div>
     </a-modal>
+    <!-- 批量删除弹窗 -->
+    <div>
+      <a-modal
+        v-model:visible="allDelete"
+        :footer="null"
+        :closable="close"
+        wrapClassName="canclestu1"
+        centered="true"
+      >
+        <div class="delete">
+          <div class="del_header"></div>
+          <div class="del_main">
+            <div class="header">
+              <div class="icon1"></div>
+              <span>提示</span>
+            </div>
+            <div class="body">
+              <span>您确定批量删除吗？</span>
+            </div>
+            <div class="del_btnbox">
+              <div class="del_btn btn1">
+                <div class="btnText" @click="closeCancelDelete">取消</div>
+              </div>
+              <div class="del_btn btn2">
+                <div class="btnText" @click="closeAllDelete">确定</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-modal>
+    </div>
   </div>
 </template>
 <script>
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs, onMounted } from "vue";
 import { useRoute } from "vue-router";
 // import { CaretRightOutlined } from "@ant-design/icons-vue";
 import TimeManage from "../../components/drawers/TimeManage";
@@ -1667,6 +1701,8 @@ import ProjectScore from "../../components/drawers/ProjectScore";
 import TaskImpStu from "../../components/drawers/TaskFaceIn";
 import { storage } from "../../api/storage";
 import * as api from "../../api/index1";
+import { getProjStu, deleteStu } from "../../api/indexProjStu";
+import { message } from "ant-design-vue";
 export default {
   name: "taskPage",
   components: {
@@ -1689,7 +1725,9 @@ export default {
   },
   setup() {
     const state = reactive({
-      projectId: storage.get("projectId") ?JSON.parse(storage.get("projectId")) : null,
+      projectId: storage.get("projectId")
+        ? JSON.parse(storage.get("projectId"))
+        : null,
       goodstuList: [
         {
           id: 1,
@@ -1707,57 +1745,64 @@ export default {
           label: "优秀学员",
         },
       ],
+      bum: [
+        {
+          id: 1,
+          value: "",
+          label: "",
+        },
+      ],
+      //学员信息列表
       tabledata: [
         {
           key: 1,
-          name: "小李",
-          bum: "产研部",
-          gangw: "产品经理",
-          group: "好好学习",
-          progress: "5/20",
+          name: "sss",
+          bum: "c",
+          gangw: "ss",
+          group: "sss",
+          progress: "sss",
           diploma: "0",
-          stutime: "2022-10-31 23:12:00",
-          putin: "手动加入",
-          excellent: true, //是否是优秀学员
+          stutime: "20202",
+          putin: "shs",
+          excellent: true,
+          studentId: 22,
         },
         {
           key: 2,
-          name: "小刘",
-          bum: "产研部",
-          gangw: "产品经理",
-          group: "天天向上",
-          progress: "5/20",
+          name: "sss",
+          bum: "c",
+          gangw: "ss",
+          group: "sss",
+          progress: "sss",
           diploma: "0",
-          stutime: "2022-10-21 23:12:00",
-          putin: "手动加入",
-          excellent: false, //是否是优秀学员
+          stutime: "20202",
+          putin: "shs",
+          excellent: true,
+          studentId: 23,
         },
         {
           key: 3,
-          name: "小王",
-          bum: "产研部",
-          gangw: "后端",
-          group: "好好学习",
-          progress: "5/20",
+          name: "sss",
+          bum: "c",
+          gangw: "ss",
+          group: "sss",
+          progress: "sss",
           diploma: "0",
-          stutime: "2022-10-11 23:12:00",
-          putin: "手动加入",
-          excellent: false, //是否是优秀学员
-        },
-        {
-          key: 4,
-          name: "小赵",
-          bum: "产研部",
-          gangw: "前端",
-          group: "天天向上",
-          progress: "5/20",
-          diploma: "0",
-          stutime: "2022-10-31 23:12:00",
-          putin: "手动加入",
-          excellent: true, //是否是优秀学员
+          stutime: "20202",
+          putin: "shs",
+          excellent: false,
+          studentId: 24,
         },
       ],
-
+      // stuName: "", //搜索的学员姓名
+      // stuGroup: "", //搜索的学员小组名称
+      // stuBum: "", //搜索的学员小组部门
+      // stuGood: "", //搜索的学员是否优秀
+      total: null, //学员列表数据总条数
+      choosed: 0, //勾选的学员总数
+      selectedRowKeys: [], //选择的学员
+      selectedRows: [], //选择的学员的id值
+      chooseDeleteOne: [], //删除的单个学员id
       //进度排行学员
       rankjindu: [{ value: "学员", label: "学员" }],
       valuestu1: "学员",
@@ -1789,12 +1834,12 @@ export default {
       zhibModal: false, //直播二维码弹窗
 
       huodModal: false, //活动二维码弹窗
-
+      allDelete: false, //批量删除弹窗
       pubproject: false,
       stugroup: false,
       canclestu: false,
       canclestu1: false,
-      canclestu2: false,
+      deleteOneStu: false, //删除单个学员弹窗
       checked: false,
       checked1: true,
       checked2: false,
@@ -1813,8 +1858,8 @@ export default {
       valuestun: "", //学员管理姓名
       valuegood: "",
       valuestub: "", //学员管理部门
-      valuestug: "", //学员管理小组名称
-
+      valuestug: "", //学员小组管理名称
+      valuestugroup: "", //学员管理小组名称
       valueDate: "", //排行榜输入日期
       noticeChecked: true,
       noticeContent: "",
@@ -2382,12 +2427,7 @@ export default {
     const closeModal3 = () => {
       state.canclestu1 = false;
     };
-    const showModal4 = () => {
-      state.canclestu2 = true;
-    };
-    const closeModal4 = () => {
-      state.canclestu2 = false;
-    };
+
     const showModal2 = () => {
       state.stugroup = true;
     };
@@ -2544,8 +2584,8 @@ export default {
                 <a-select-option value="删除" label="删除">
                   <div
                     onClick={() => {
-                      console.log("点击了111");
-                      state.canclestu2 = true;
+                      console.log("点击了111", value.studentId);
+                      showDeleteOne(value.studentId);
                     }}
                   >
                     删除
@@ -2676,24 +2716,19 @@ export default {
 
     //tabs切换
     const tabsChange = (e) => {
-     
       //排行榜
       if (e == 6) {
         //获取进度榜
-      getbillboard(1, 1);
-      //获取学分榜
-      getbillboard(2, 1);
-      //获取学时榜
-      getbillboard(3, 1);
+        getbillboard(1, 1);
+        //获取学分榜
+        getbillboard(2, 1);
+        //获取学时榜
+        getbillboard(3, 1);
       } else {
         rankReset();
       }
     };
 
-    
-
-
-
     // start -------排行榜---------------排行榜------------排行榜------------------排行榜---------
     //选择搜索时间
     const rankTimeChange = (e, date) => {
@@ -2743,8 +2778,191 @@ export default {
 
     // end -----排行榜----------------排行榜----------------------排行榜-----------排行榜----------
 
-
-
+    //start---------学员------
+    //删除单个学员
+    const showDeleteOne = (id) => {
+      state.deleteOneStu = true;
+      state.chooseDeleteOne.push(id);
+    };
+    //点击取消删除单个学员
+    const closeDeleteOne = () => {
+      state.deleteOneStu = false;
+    };
+    //点击确认删除单个学员
+    const closeDeleteOneConfirm = () => {
+      state.deleteOneStu = false;
+      deleteStu({
+        projectId: state.projectId,
+        studentIds: state.chooseDeleteOne,
+      })
+        .then((res) => {
+          console.log(res, "单个删除成功");
+          message.success("删除成功");
+        })
+        .catch((err) => {
+          console.log(err, "单个删除失败");
+          message.warning("删除失败");
+        });
+      state.chooseDeleteOne = [];
+    };
+    //批量删除学员弹窗
+    const showAllDelete = () => {
+      if (state.selectedRows.length == 0) {
+        message.destroy();
+        return message.warning("请选择要删除的学员");
+      } else {
+        state.allDelete = true;
+      }
+    };
+    //点击取消的批量删除弹窗
+    const closeCancelDelete = () => {
+      state.allDelete = false;
+    };
+    //点击确定的批量删除弹窗
+    const closeAllDelete = () => {
+      deleteStu({
+        projectId: state.projectId,
+        studentIds: state.selectedRows,
+      })
+        .then((res) => {
+          console.log(res, "删除成功");
+          message.success("删除成功");
+        })
+        .catch((err) => {
+          console.log(err, "删除失败");
+          message.warning("删除成功");
+        });
+      state.allDelete = false;
+    };
+    const handleChangeGood = (value) => {
+      console.log(value, state.valuegood, 11111);
+    };
+    const handleChangeBum = (value) => {
+      console.log(value, 22222);
+    };
+    //把数据放到state里
+    const getTableDataList = (tableData) => {
+      let data = tableData;
+      let array = [];
+      data.map((value) => {
+        let obj = {
+          projectId: value.projectId, //项目id
+          groupId: value.groupId, //小组id
+          group: value.groupName, //小组名
+          studentId: value.studentId, //学生id
+          currentStageId: value.currentStageId, //当前关卡id
+          name: value.userInfoBo.userName, //用户名
+          bum: value.userInfoBo.deptName, //部门
+          gangw: value.userInfoBo.jobName, //岗位
+          completeStageCnt: value.userInfoBo.completeStageCnt, //当前完成阶段数
+          totalStageCnt: value.userInfoBo.totalStageCnt, //总阶段数
+          excellent: value.topFlag == 1 ? "0" : "1", //是否优秀学员
+          progress:
+            value.userInfoBo.completeStageCnt +
+            "/" +
+            value.userInfoBo.totalStageCnt,
+          putin:
+            value.source == 0
+              ? "报名加入"
+              : value.source == 1
+              ? "指定添加"
+              : value.source == 2
+              ? "组织添加"
+              : value.source == 3
+              ? "受众添加"
+              : "-", //加入方式
+          beginStudyTime: value.beginStudyTime, //开始学习时间
+        };
+        array.push(obj);
+      });
+      state.tabledata = array;
+    };
+    //学员搜索
+    const searchStu = () => {
+      let obj = {
+        deptIds: [], //部门
+        groupName: state.valuestugroup,
+        name: state.valuestun,
+        pageNo: 0,
+        pageSize: 0,
+        projectId: state.projectId,
+        topFlag:
+          state.valuegood == "优秀学员"
+            ? 1
+            : state.valuegood == "普通学员"
+            ? 0
+            : null,
+      };
+      getProjStu(obj).then((res) => {
+        console.log("搜索成功", res);
+        //重新获取列表
+        let leng = res.data.data.rows;
+        if (leng > 0) {
+          let arr = res.data.data.rows;
+          getTableDataList(arr);
+        }
+      });
+    };
+    //勾选学员
+    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 resetCancel = () => {
+      (state.valuestun = null),
+        (state.valuestugroup = null),
+        (state.valuestub = null),
+        (state.valuegood = null);
+    };
+    //获取学员列表
+    const getStu = () => {
+      let obj = {
+        deptIds: [], //部门
+        groupName: "",
+        name: "",
+        pageNo: 1,
+        pageSize: 1,
+        projectId: state.projectId,
+        topFlag: 0,
+      };
+      getProjStu(obj).then((res) => {
+        console.log(res.data.data.rows, "获取学员列表");
+        let leng = res.data.data.rows;
+        state.total = res.data.data.total;
+        if (leng > 0) {
+          let arr = res.data.data.rows;
+          getTableDataList(arr);
+        }
+      });
+    };
+    //end---------学员------
+    onMounted(() => {
+      getStu();
+    });
     return {
       ...toRefs(state),
       totask,
@@ -2757,8 +2975,8 @@ export default {
       closeModal2,
       showModal3,
       closeModal3,
-      showModal4,
-      closeModal4,
+      showDeleteOne,
+      closeDeleteOne,
       showCopyModal,
       closeCopyModal,
       showTime,
@@ -2789,12 +3007,22 @@ export default {
 
       tabsChange,
 
-     
-
       rankTimeChange,
       getbillboard,
       rankSearch,
       rankReset,
+      handleChangeGood,
+      getStu,
+      getTableDataList,
+      searchStu,
+      handleChangeBum,
+      resetCancel,
+      showAllDelete,
+      closeAllDelete,
+      onSelectChange,
+      closeCancelDelete,
+      clearChooseStu,
+      closeDeleteOneConfirm,
     };
   },
 };