feat:公告 历史公告 更改是否优秀 分页 组员名单对接 组员名单各操作

src/components/drawers/MemberList.vue

@@ -27,11 +27,11 @@
           </div>
 
           <div class="btns">
-            <div class="btn btn1" style="margin-right: 20px">
+            <div class="btn btn1" style="margin-right: 20px" @click="searchStu">
               <div class="img1"></div>
               <div class="wz">搜索</div>
             </div>
-            <div class="btn btn2">
+            <div class="btn btn2" @click="resetSearch">
               <div class="img2"></div>
               <div class="wz">重置</div>
             </div>
@@ -56,10 +56,10 @@
             <div class="left">
               <div class="img"></div>
               <div class="text" style="margin-left: 10px">已选择</div>
-              <div class="text2">2</div>
+              <div class="text2">{{ choosed }}</div>
               <div class="text">项</div>
               <div class="text3">列表选项总计：</div>
-              <div class="text4">9条</div>
+              <div class="text4">{{ total }}条</div>
             </div>
             <div class="right">清空</div>
           </div>
@@ -82,13 +82,15 @@
           />
           <div class="pa">
             <a-pagination
+              v-if="total > 10"
               showSizeChanger="true"
               showQuickJumper="true"
               hideOnSinglePage="true"
               :pageSize="pageSize"
               :current="currentPage"
-              :total="tableDataTotal"
+              :total="total"
               class="pagination"
+              @change="changePaginationStu"
             />
           </div>
         </div>
@@ -97,7 +99,7 @@
         <button class="btn1">取消</button>
         <button class="btn2">确定</button>
       </div>
-
+      <!-- 批量删除的弹窗 -->
       <a-modal
         :closable="closable"
         v-model:visible="showmodal"
@@ -117,7 +119,30 @@
         <div class="main">请确认是否批量删除组员</div>
         <div class="butn">
           <button class="btn btn1" @click="closeModal">取消</button>
-          <button class="btn btn2" @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" />
@@ -128,6 +153,9 @@
 <script>
 import { toRefs, reactive } from "vue";
 import StuAdd from "./StuAdd.vue";
+import { getProjStu, deleteStu } from "../../api/indexProjStu";
+import { toDate } from "../../api/method";
+import { message } from "ant-design-vue";
 export default {
   name: "MemberList",
   components: { StuAdd },
@@ -136,6 +164,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    chooseGroupId: {
+      type: Number,
+      default: null,
+    },
+    projectId: {
+      type: Number,
+      default: null,
+    },
   },
 
   setup(props, ctx) {
@@ -144,85 +180,25 @@ export default {
       name: null,
       showmodal: false,
       closable: false, //modal右上角的关闭按钮
-
       pageSize: 10,
       currentPage: 1,
-      tableDataTotal: 100,
-
+      total: null,
+      selectedRowKeys: [],
+      choosed: 0, //勾选的学员总数
+      selectedRows: [], //选择的学员的id值
+      deleteOne: null,
+      deone: false,
       tabledata: [
-        {
-          key: 1,
-          name: "小李",
-          bum: "产品部",
-          gangw: "产品经理",
-          progress: "20%",
-          operations: "删除",
-        },
-        {
-          key: 2,
-          name: "小李",
-          bum: "产品部",
-          gangw: "产品经理",
-          progress: "20%",
-          operations: "删除",
-        },
-        {
-          key: 3,
-          name: "小李",
-          bum: "产品部",
-          gangw: "产品经理",
-          progress: "20%",
-          operations: "删除",
-        },
-        {
-          key: 4,
-          name: "小李",
-          bum: "产品部",
-          gangw: "产品经理",
-          progress: "20%",
-          operations: "删除",
-        },
-        {
-          key: 5,
-          name: "小李",
-          bum: "产品部",
-          gangw: "产品经理",
-          progress: "20%",
-          operations: "删除",
-        },
-        {
-          key: 6,
-          name: "小李",
-          bum: "产品部",
-          gangw: "产品经理",
-          progress: "20%",
-          operations: "删除",
-        },
-        {
-          key: 7,
-          name: "小李",
-          bum: "产品部",
-          gangw: "产品经理",
-          progress: "20%",
-          operations: "删除",
-        },
-        {
-          key: 8,
-          name: "小李",
-          bum: "产品部",
-          gangw: "产品经理",
-          progress: "20%",
-          operations: "删除",
-        },
-        {
-          key: 9,
-          name: "小李",
-          bum: "产品部",
-          gangw: "产品经理",
-          progress: "20%",
-          operations: "删除",
-        },
+        // {
+        //   key: 1,
+        //   name: "小李",
+        //   bum: "产品部",
+        //   gangw: "产品经理",
+        //   progress: "20%",
+        //   operations: "删除",
+        // },
       ],
+
       tablecolumns: [
         {
           title: "姓名",
@@ -263,6 +239,18 @@ export default {
           width: 60,
           align: "center",
           className: "operation",
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: (value) => {
+            return (
+              <div
+                onClick={() => {
+                  deleteOne(value.record.key);
+                }}
+              >
+                删除
+              </div>
+            );
+          },
         },
       ],
     });
@@ -270,7 +258,31 @@ export default {
       ctx.emit("update:Lvisible", false);
     };
     const showModal = () => {
-      state.showmodal = true;
+      if (state.selectedRows.length == 0) {
+        message.destroy();
+        return message.warning("请选择要删除的学员");
+      } else {
+        state.showmodal = true;
+      }
+      // state.showmodal = true;
+    };
+    //点击确认批量删除弹窗
+    const sureDeModal = () => {
+      deleteStu({
+        projectId: props.projectId,
+        studentIds: state.selectedRows,
+      })
+        .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;
@@ -278,14 +290,167 @@ export default {
     const showStuAdd = () => {
       state.Stuvisible = true;
     };
+    //把数据放到state里
+    const getTableDataList = (tableData) => {
+      let data = tableData;
+      let array = [];
+      data.map((value) => {
+        let obj = {
+          key: value.studentId,
+          projectId: value.projectId, //项目id
+          groupId: value.groupId, //小组id
+          group: value.groupName, //小组名
+          studentId: value.studentId, //学生id
+          currentStageId: value.currentStageId, //当前关卡id
+          name: value.name, //用户名
+          bum: value.userInfoBo.deptName, //部门
+          gangw: value.userInfoBo.jobName, //岗位
+          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 || {
+        deptIds: [], //部门
+        groupName: "",
+        name: "",
+        pageNo: state.currentPage,
+        pageSize: 10,
+        projectId: props.projectId,
+        topFlag: "",
+        groupId: 10, //暂时写死
+      };
+      getProjStu(objf).then((res) => {
+        console.log(res.data.data, "获取学员列表");
+        let leng = res.data.data.rows.length;
+        state.total = res.data.data.total;
+        if (leng > 0) {
+          let arr = res.data.data.rows;
+          getTableDataList(arr);
+        }
+      });
+    };
+
+    const afterVisibleChange = () => {
+      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 = {
+        deptIds: [], //部门
+        groupName: "",
+        name: state.name,
+        pageNo: state.currentPage,
+        pageSize: 10,
+        projectId: props.projectId,
+        topFlag: "",
+      };
+      //重新获取列表
+      getStu(obj);
+    };
+    //重置
+    const resetSearch = () => {
+      state.name = null;
+      let obj = {
+        deptIds: [], //部门
+        groupName: "",
+        name: "",
+        pageNo: 1,
+        pageSize: 10,
+        projectId: props.projectId,
+        topFlag: "",
+      };
+      //重新获取列表
+      getStu(obj);
+    };
+    const deleteOne = (id) => {
+      // console.log(id, "fewfew");
+      console.log(`${id}`);
+      state.deone = true;
+      state.selectedRows.push(id);
+    };
+    //点击取消删除单个学员
+    const closedeleone = () => {
+      state.deone = false;
+      state.selectedRows = [];
+    };
+    const yesdele = () => {
+      state.deone = false;
+      deleteStu({
+        projectId: props.projectId,
+        studentIds: state.selectedRows,
+      })
+        .then((res) => {
+          console.log(res, "单个删除成功");
+          message.success("删除成功");
+          getStu();
+        })
+        .catch((err) => {
+          console.log(err, "单个删除失败");
+          message.warning("删除失败");
+        });
+      state.selectedRows = [];
+    };
 
     return {
       ...toRefs(state),
       closeDrawer,
-
       showModal,
       closeModal,
       showStuAdd,
+      getStu,
+      getTableDataList,
+      afterVisibleChange,
+      changePaginationStu,
+      clearChooseStu,
+      onSelectChange,
+      searchStu,
+      resetSearch,
+      sureDeModal,
+      deleteOne,
+      closedeleone,
+      yesdele,
     };
   },
 };