From a86d0ea2e84398f3a4e22002affb4e07b2da4ff1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B2=B3=E4=BD=B3=E9=91=AB?= <yuejx@dongwu-inc.com>
Date: Wed, 19 Oct 2022 15:58:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=BB=84=E5=91=98=E5=90=8D=E5=8D=95?=
 =?UTF-8?q?=E6=8A=BD=E5=B1=89,=E6=89=B9=E9=87=8F=E5=88=A0=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/drawers/MemberList.vue | 596 ++++++++++++++++++++++++++
 src/views/projectcenter/TaskPage.vue  |  18 +-
 2 files changed, 610 insertions(+), 4 deletions(-)
 create mode 100644 src/components/drawers/MemberList.vue

diff --git a/src/components/drawers/MemberList.vue b/src/components/drawers/MemberList.vue
new file mode 100644
index 00000000..335becf8
--- /dev/null
+++ b/src/components/drawers/MemberList.vue
@@ -0,0 +1,596 @@
+<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">
+              <div class="img1"></div>
+              <div class="wz">搜索</div>
+            </div>
+            <div class="btn btn2">
+              <div class="img2"></div>
+              <div class="wz">重置</div>
+            </div>
+          </div>
+        </div>
+        <div class="btnss" style="margin-top: 20px">
+          <div class="btn btn1" style="margin-right: 20px">
+            <div class="img1"></div>
+            <div class="wz">添加组员</div>
+          </div>
+          <div class="btn btn2" @click="showModal">
+            <div class="img3"></div>
+            <div class="wz">批量删除</div>
+          </div>
+          <div class="btn btn2">
+            <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">2</div>
+              <div class="text">项</div>
+              <div class="text3">列表选项总计：</div>
+              <div class="text4">9条</div>
+            </div>
+            <div class="right">清空</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, y: 560 }"
+                    @expand="expandTable"
+                    :pagination="false"
+                    :row-selection="{
+                      columnWidth: 30,
+                      selectedRowKeys: selectedRowKeys,
+                      onChange: onSelectChange,
+                    }"
+          />
+          <div class="pa">
+            <a-pagination
+              showSizeChanger="true"
+              showQuickJumper="true"
+              hideOnSinglePage="true"
+              :pageSize="pageSize"
+              :current="currentPage"
+              :total="tableDataTotal"
+              class="pagination"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="btnn">
+        <button class="btn1">取消</button>
+        <button class="btn2">确定</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="closeModal">确定</button>
+        </div>
+      </a-modal>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+import { toRefs, reactive } from "vue";
+export default {
+  name: "MemberList",
+  props: {
+    Lvisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  setup(props, ctx) {
+    const state = reactive({
+      name: null,
+      showmodal: false,
+      closable: false, //modal右上角的关闭按钮
+      checked: false,
+      pageSize: 10,
+      currentPage: 1,
+      tableDataTotal: 100,
+      selectedRowKeys: [],
+      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: "删除",
+        },
+      ],
+      tablecolumns: [
+        {
+          title: "姓名",
+          dataIndex: "name",
+          key: "name",
+          width: 40,
+          align: "left",
+          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",
+        },
+      ],
+    });
+    const closeDrawer = () => {
+      ctx.emit("update:Lvisible", false);
+    };
+    const showModal = () => {
+      state.showmodal = true;
+    };
+    const closeModal = () => {
+      state.showmodal = false;
+    };
+    const onSelectChange = (selectedRowKeys) => {
+      console.log("selectedRowKeys changed: ", selectedRowKeys);
+      
+    };
+
+    return {
+      ...toRefs(state),
+      closeDrawer,
+      onSelectChange,
+      showModal,
+      closeModal,
+    };
+  },
+};
+</script>
+
+<style  lang="scss" >
+.MemberList {
+  .drawerMain {
+    min-width: 600px;
+    margin: 0px 32px 0px 32px;
+    overflow-x: scroll;
+    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: #409EFF;
+
+            color: #ffffff;
+          }
+
+          .btn2 {
+            background: #ffffff;
+
+            color: #409EFF;
+            border: 1px solid #409EFF;
+          }
+        }
+      }
+
+      .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/search0.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: #409EFF;
+
+          color: #ffffff;
+        }
+
+        .btn2 {
+          background: #ffffff;
+          margin-right: 20px;
+          color:#409EFF;
+          border: 1px solid #409EFF;
+        }
+      }
+
+      .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.8500);
+        }
+
+        .ant-table-cell {
+          color: rgba(0, 0, 0, 0.6500);
+        }
+
+        .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;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/projectcenter/TaskPage.vue b/src/views/projectcenter/TaskPage.vue
index 0d6a0e4a..629749d2 100644
--- a/src/views/projectcenter/TaskPage.vue
+++ b/src/views/projectcenter/TaskPage.vue
@@ -633,7 +633,7 @@
                         <div class="leader1">进度</div>
                         <a-progress :percent="55" />
                       </div>
-                      <div class="grofooter">
+                      <div class="grofooter" @click="showMemberList">
                         <div class="ftext">组员名单 ></div>
                         <div class="peoples">
                           <div class="people1">
@@ -680,7 +680,7 @@
                         <div class="leader1">进度</div>
                         <a-progress :percent="55" />
                       </div>
-                      <div class="grofooter">
+                      <div class="grofooter" @click="showMemberList">
                         <div class="ftext">组员名单 ></div>
                         <div class="peoples">
                           <div class="people1">
@@ -727,7 +727,7 @@
                         <div class="leader1">进度</div>
                         <a-progress :percent="55" />
                       </div>
-                      <div class="grofooter">
+                      <div class="grofooter" @click="showMemberList">
                         <div class="ftext">组员名单 ></div>
                         <div class="peoples">
                           <div class="people1">
@@ -774,7 +774,7 @@
                         <div class="leader1">进度</div>
                         <a-progress :percent="55" />
                       </div>
-                      <div class="grofooter">
+                      <div class="grofooter" @click="showMemberList">
                         <div class="ftext">组员名单 ></div>
                         <div class="peoples">
                           <div class="people1">
@@ -822,6 +822,8 @@
     <face-manage v-model:Fvisible="FaceVisivle" />
     <!-- 学员（小组管理）创建小组抽屉 -->
     <subset-manage v-model:Svisible="subsetVisivle" />
+    <!-- 组员名单抽屉 -->
+    <member-list v-model:Lvisible="Lvisible" />
     <!-- 面授学员抽屉 -->
     <face-stu v-model:FSvisible="FSvisible" />
     <!-- 活动考勤抽屉 -->
@@ -985,6 +987,7 @@ import { reactive, toRefs } from "vue";
 import TimeManage from "../../components/drawers/TimeManage";
 import FaceManage from "../../components/drawers/FaceManage";
 import SubsetManage from "../../components/drawers/SubsetManage";
+import MemberList from "../../components/drawers/MemberList";
 import ActiveAttendance from "../../components/drawers/ActiveAttendance";
 import WorkManage from "../../components/drawers/WorkManage.vue";
 import FaceStu from "../../components/drawers/FaceStu";
@@ -994,6 +997,7 @@ export default {
     TimeManage,
     FaceManage,
     SubsetManage,
+    MemberList,
     FaceStu,
     ActiveAttendance,
     WorkManage,
@@ -1144,6 +1148,7 @@ export default {
       visible: false, //时间管理
       FaceVisivle: false, //面授管理
       subsetVisivle: false, //随机小组
+      Lvisible: false, //组员名单
       FSvisible: false, //面授学员
       AAvisible: false, //活动考勤
       Wvisible: false, //作业管理
@@ -1187,6 +1192,10 @@ export default {
     const showFS = () => {
       state.FSvisible = true;
     };
+    //面授学员的弹窗
+    const showMemberList = () => {
+      state.Lvisible = true;
+    };
     //活动考勤的抽屉
     const showAA = () => {
       state.AAvisible = true;
@@ -1204,6 +1213,7 @@ export default {
       showTime,
       showFace,
       showSubset,
+      showMemberList,
       showFS,
       showAA,
       showWork,