feat:修改添加面授的border以及面授和考勤抽屉列表的操作

src/assets/scss/common.scss

@@ -266,6 +266,7 @@ textarea {
 
 //抽屉--------------------------------------------------------
 .drawerStyle {
+	// transform: translateX(0px) !important;
   .ant-drawer-content-wrapper {
     max-width: 1050px;
 

src/components/drawers/ActiveAttendance.vue

@@ -220,9 +220,11 @@ export default {
           gang: "产品经理",
           cur: "-",
           jin: "-",
-
           time: "缺勤",
           state: "异常",
+          signIn: false, //签到
+          signOut: false, //签退
+          leave: false, //请假
         },
         {
           key: 2,
@@ -231,8 +233,11 @@ export default {
           gang: "产品经理",
           cur: "2022-10-31  23:12",
           jin: "-",
-          time: "签到",
+          time: "签到/签退",
           state: "正常",
+          signIn: true, //签到
+          signOut: true, //签退
+          leave: false, //请假
         },
         {
           key: 3,
@@ -241,8 +246,11 @@ export default {
           gang: "产品经理",
           cur: "2022-10-31  23:12",
           jin: "2022-10-31  23:12",
-          time: "签到/签退",
+          time: "迟到",
-          state: "正常",
+          state: "异常",
+          signIn: false, //签到
+          signOut: true, //签退
+          leave: false, //请假
         },
         {
           key: 4,
@@ -251,8 +259,11 @@ export default {
           gang: "产品经理",
           cur: "2022-10-31  23:12",
           jin: "2022-10-31  23:12",
-          time: "签到/签退",
+          time: "早退",
-          state: "正常",
+          state: "异常",
+          signIn: true, //签到
+          signOut: false, //签退
+          leave: false, //请假
         },
         {
           key: 5,
@@ -263,6 +274,9 @@ export default {
           jin: "2022-10-31  23:12",
           time: "签到/签退",
           state: "正常",
+          signIn: true, //签到
+          signOut: true, //签退
+          leave: false, //请假
         },
         {
           key: 6,
@@ -273,6 +287,9 @@ export default {
           jin: "2022-10-31  23:12",
           time: "签到/签退",
           state: "正常",
+          signIn: true, //签到
+          signOut: true, //签退
+          leave: false, //请假
         },
         {
           name: "张三",
@@ -282,6 +299,9 @@ export default {
           jin: "2022-10-31  23:12",
           time: "签到/签退",
           state: "正常",
+          signIn: true, //签到
+          signOut: true, //签退
+          leave: false, //请假
         },
         {
           key: 8,
@@ -292,6 +312,9 @@ export default {
           jin: "2022-10-31  23:12",
           time: "请假",
           state: "正常",
+          signIn: false, //签到
+          signOut: false, //签退
+          leave: true, //请假
         },
       ],
       options: [
@@ -328,6 +351,43 @@ export default {
       state.selectedRowKeys = selectedRowKeys;
     };
 
+    const getTableData = () => {
+      let arr = state.tableData;
+      arr.map((value) => {
+        // console.log("value", value);
+        value.opacation = (
+          <div class="opa">
+            <a-checkbox
+              checked={value.signIn}
+              onChange={(e) => {
+                console.log("点击签到", e);
+              }}
+            >
+              签到
+            </a-checkbox>
+            <a-checkbox
+              checked={value.signOut}
+              onChange={(e) => {
+                console.log("点击签退", e);
+              }}
+            >
+              签退
+            </a-checkbox>
+            <a-checkbox
+              checked={value.leave}
+              onChange={(e) => {
+                console.log("点击请假", e);
+              }}
+            >
+              请假
+            </a-checkbox>
+          </div>
+        );
+      });
+      state.tableData = arr;
+    };
+    getTableData();
+
     const tableDataFunc = () => {
       const columns = [
         {
@@ -402,16 +462,16 @@ export default {
           className: "h",
           dataIndex: "opacation",
           key: "opacation",
-          width: 210,
+          width: 130,
           align: "center",
-          scopedSlots: { customRender: "action" }, //引入的插槽
+          // scopedSlots: { customRender: "action" }, //引入的插槽
-          customRender: () => {
+          // customRender: () => {
-            return (
+          //   return (
-              <div class="opa">
+          //     <div class="opa">
-                <a-checkbox-group />
+          //       <a-checkbox-group />
-              </div>
+          //     </div>
-            );
+          //   );
-          },
+          // },
         },
       ];
       return columns;
@@ -429,7 +489,7 @@ export default {
 };
 </script>
 
-<style  lang="scss" >
+<style lang="scss">
 .me {
   .ant-modal-body {
     padding: 0px;

src/components/drawers/AddFaceteach.vue

@@ -2,7 +2,7 @@
   <a-drawer
     :visible="addfaceteachVisible"
     class="drawerStyle addfaceteachDrawer"
-    width="80%"
+    width="90%"
     title="添加面授"
     placement="right"
     @after-visible-change="afterVisibleChange"
@@ -116,7 +116,7 @@
                 v-model:value="inputV3"
                 style="width: 384px; height: 32px"
               />
-              <span style="margin-left: 5px">分钟</span>
+              <span style="margin-left: 5px; width: 30px">分钟</span>
             </div>
           </div>
           <div class="main_item">
@@ -142,24 +142,37 @@
               <span style="margin-right: 3px">考勤设置：</span>
             </div>
             <div class="kqszbox">
-              <div class="qdqtbox"><div class="qdbtn"><div class="btntext">签到</div></div></div>
+              <div class="qdqtbox">
+                <div class="qdbtn"><div class="btntext">签到</div></div>
+              </div>
               <div class="setbox">
                 <div class="timerbox">
                   <span>开始前：</span>
-                  <a-input style="width: 88px; height: 32px" :v-model:value="inputV5"></a-input>
+                  <a-input
+                    style="width: 88px; height: 32px"
+                    :v-model:value="inputV5"
+                  ></a-input>
                   <span style="color: #999999; margin-left: 8px">分钟</span>
                 </div>
                 <div class="timerbox">
                   <span>开始后：</span>
-                  <a-input style="width: 88px; height: 32px" :v-model:value="inputV6"></a-input>
+                  <a-input
+                    style="width: 88px; height: 32px"
+                    :v-model:value="inputV6"
+                  ></a-input>
                   <span style="color: #999999; margin-left: 8px">分钟</span>
                 </div>
               </div>
-              <div class="qdqtbox"><div class="qtbtn"><div class="btntext">签退</div></div></div>
+              <div class="qdqtbox">
+                <div class="qtbtn"><div class="btntext">签退</div></div>
+              </div>
               <div class="setbox">
                 <div class="timerbox">
                   <span>结束前：</span>
-                  <a-input style="width: 88px; height: 32px" :v-model:value="inputV7"></a-input>
+                  <a-input
+                    style="width: 88px; height: 32px"
+                    :v-model:value="inputV7"
+                  ></a-input>
                   <span style="color: #999999; margin-left: 8px"
                     >分钟（提前签退则记为早退）</span
                   >
@@ -196,7 +209,9 @@
             </div>
             <div class="btnbox2">
               <a-radio-group v-model:value="radioV2">
-                <a-radio v-model:checked="checked" :value="1">允许项目内人员临时到场参加</a-radio>
+                <a-radio v-model:checked="checked" :value="1"
+                  >允许项目内人员临时到场参加</a-radio
+                >
                 <a-radio v-model:checked="checked" :value="2"
                   >允许项目外人员临时到场参加</a-radio
                 >
@@ -359,6 +374,7 @@ export default {
       display: flex;
       justify-content: space-between;
       .main_left {
+        height: 1080px;
         padding-right: 30px;
         flex: 1;
         border-right: 1px solid #e8e8e8;
@@ -410,7 +426,7 @@ export default {
             .qtbtn {
               width: 75px;
               height: 24px;
-              background: rgba(56,139,225,0.16);
+              background: rgba(56, 139, 225, 0.16);
               border-radius: 2px;
               border: 1px solid #387df7;
               display: flex;

src/components/drawers/AddGroup.vue

@@ -16,38 +16,38 @@
         />
       </div>
       <div class="main">
-          <div class="name">
+        <div class="name">
-            <div class="star" style="margin-top: -4px">
+          <div class="star" style="margin-top: -4px">
-              <img
+            <img
-                style="width: 10px; height: 10px"
+              style="width: 10px; height: 10px"
-                src="../../assets/images/basicinfo/asterisk.png"
+              src="../../assets/images/basicinfo/asterisk.png"
-              />
+            />
-            </div>
-            <div class="inname">小组名称:</div>
-            <div class="in">
-              <a-input
-                v-model:value="value"
-                placeholder="请输入小组名称"
-                style="border-radius: 8px; height: 40px"
-              />
-            </div>
           </div>
-          <div class="name">
+          <div class="inname">小组名称:</div>
-            <div class="star" style="margin-top: -4px">
+          <div class="in">
-              <img
+            <a-input
-                style="width: 10px; height: 10px; margin-left: 15px"
+              v-model:value="value"
-                src="../../assets/images/basicinfo/asterisk.png"
+              placeholder="请输入小组名称"
-              />
+              style="border-radius: 8px; height: 40px"
-            </div>
+            />
-            <div class="inname">小组长:</div>
-            <div class="in">
-              <a-input
-                v-model:value="value"
-                placeholder="请输入小组长"
-                style="border-radius: 8px; height: 40px"
-              />
-            </div>
           </div>
+        </div>
+        <div class="name">
+          <div class="star" style="margin-top: -4px">
+            <img
+              style="width: 10px; height: 10px; margin-left: 15px"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+          </div>
+          <div class="inname">小组长:</div>
+          <div class="in">
+            <a-input
+              v-model:value="value"
+              placeholder="请输入小组长"
+              style="border-radius: 8px; height: 40px"
+            />
+          </div>
+        </div>
       </div>
       <div class="btnn">
         <button class="btn1">取消</button>
@@ -55,7 +55,6 @@
       </div>
     </div>
   </a-drawer>
-  
 </template>
 
 <script>
@@ -88,7 +87,7 @@ export default {
 };
 </script>
 
-<style scoped lang="scss" >
+<style scoped lang="scss">
 .addgroup {
   .ant-drawer-content-wrapper {
     // max-width: 1000px;
@@ -122,67 +121,67 @@ export default {
       }
     }
     .main {
+      display: flex;
+      flex-direction: column;
+      //align-items: center;
+      .name {
+        //width: 78%;
+        // background-color: lightcoral;
         display: flex;
-        flex-direction: column;
+        //justify-content: right;
-        //align-items: center;
+        margin-top: 32px;
-        .name {
+        align-items: center;
-          //width: 78%;
+        height: 40px;
-          // background-color: lightcoral;
+        // border: 1px solid black;
-          display: flex;
-          //justify-content: right;
-          margin-top: 32px;
-          align-items: center;
-          height: 40px;
-          // border: 1px solid black;
 
-          .inname {
+        .inname {
-            color: #000000;
+          color: #000000;
-            font-size: 14px;
+          font-size: 14px;
-            margin-left: 7px;
+          margin-left: 7px;
-          }
-          .in {
-            margin-left: 14px;
-            //width: 81%;
-            .ant-input {
-              border-radius: 5px;
-              // height: 120%;
-              width: 384px;
-              height: 40px;
-            }
-          }
         }
-        .pubtn {
+        .in {
-          display: flex;
+          margin-left: 14px;
-          justify-content: center;
+          //width: 81%;
-          margin-top: 25px;
+          .ant-input {
-          //margin-bottom: 29px;
+            border-radius: 5px;
-          .pubtn1 {
+            // height: 120%;
-            width: 100px;
+            width: 384px;
             height: 40px;
-            margin-right: 16px;
-            margin-bottom: 29px;
-            border: 1px solid #409eff;
-            border-radius: 4px;
-            color: rgba(78, 166, 255, 1);
-            font-size: 14px;
-            //line-height: 36px;
-            align-items: center;
-            background: rgba(255, 255, 255, 1);
-          }
-          .pubtn2 {
-            width: 100px;
-            height: 40px;
-            margin-bottom: 29px;
-            border: 1px solid #409eff;
-            border-radius: 4px;
-            color: #ffffff;
-            font-size: 14px;
-            align-items: center;
-            //line-height: 36px;
-            background: #409eff;
           }
         }
       }
+      .pubtn {
+        display: flex;
+        justify-content: center;
+        margin-top: 25px;
+        //margin-bottom: 29px;
+        .pubtn1 {
+          width: 100px;
+          height: 40px;
+          margin-right: 16px;
+          margin-bottom: 29px;
+          border: 1px solid #409eff;
+          border-radius: 4px;
+          color: rgba(78, 166, 255, 1);
+          font-size: 14px;
+          //line-height: 36px;
+          align-items: center;
+          background: rgba(255, 255, 255, 1);
+        }
+        .pubtn2 {
+          width: 100px;
+          height: 40px;
+          margin-bottom: 29px;
+          border: 1px solid #409eff;
+          border-radius: 4px;
+          color: #ffffff;
+          font-size: 14px;
+          align-items: center;
+          //line-height: 36px;
+          background: #409eff;
+        }
+      }
+    }
     .btnn {
       height: 72px;
       width: 100%;

src/components/drawers/FaceStu.vue

@@ -224,9 +224,11 @@ export default {
           gang: "产品经理",
           cur: "-",
           jin: "-",
-
           time: "缺勤",
           state: "异常",
+          signIn: false, //签到
+          signOut: false, //签退
+          leave: false, //请假
         },
         {
           key: 2,
@@ -235,8 +237,11 @@ export default {
           gang: "产品经理",
           cur: "2022-10-31  23:12",
           jin: "-",
-          time: "签到",
+          time: "签到/签退",
           state: "正常",
+          signIn: true, //签到
+          signOut: true, //签退
+          leave: false, //请假
         },
         {
           key: 3,
@@ -245,8 +250,11 @@ export default {
           gang: "产品经理",
           cur: "2022-10-31  23:12",
           jin: "2022-10-31  23:12",
-          time: "签到/签退",
+          time: "迟到",
-          state: "正常",
+          state: "异常",
+          signIn: false, //签到
+          signOut: true, //签退
+          leave: false, //请假
         },
         {
           key: 4,
@@ -255,8 +263,11 @@ export default {
           gang: "产品经理",
           cur: "2022-10-31  23:12",
           jin: "2022-10-31  23:12",
-          time: "签到/签退",
+          time: "早退",
-          state: "正常",
+          state: "异常",
+          signIn: true, //签到
+          signOut: false, //签退
+          leave: false, //请假
         },
         {
           key: 5,
@@ -267,6 +278,9 @@ export default {
           jin: "2022-10-31  23:12",
           time: "签到/签退",
           state: "正常",
+          signIn: true, //签到
+          signOut: true, //签退
+          leave: false, //请假
         },
         {
           key: 6,
@@ -277,6 +291,9 @@ export default {
           jin: "2022-10-31  23:12",
           time: "签到/签退",
           state: "正常",
+          signIn: true, //签到
+          signOut: true, //签退
+          leave: false, //请假
         },
         {
           name: "张三",
@@ -286,6 +303,9 @@ export default {
           jin: "2022-10-31  23:12",
           time: "签到/签退",
           state: "正常",
+          signIn: true, //签到
+          signOut: true, //签退
+          leave: false, //请假
         },
         {
           key: 8,
@@ -296,22 +316,26 @@ export default {
           jin: "2022-10-31  23:12",
           time: "请假",
           state: "正常",
+          signIn: false, //签到
+          signOut: false, //签退
+          leave: true, //请假
         },
       ],
-      options: [
+      tableOptions: [
         {
-          label: "Apple",
+          label: "签到",
-          value: "Apple",
+          value: "1",
         },
         {
-          label: "Pear",
+          label: "签退",
-          value: "Pear",
+          value: "2",
         },
         {
-          label: "Orange",
+          label: "请假",
-          value: "Orange",
+          value: "3",
         },
       ],
+      // selectOption: [],
     });
     const selectProjectName = (value, index) => {
       console.log("value", value, index);
@@ -332,6 +356,42 @@ export default {
       state.selectedRowKeys = selectedRowKeys;
     };
 
+    const getTableData = () => {
+      let arr = state.tableData;
+      arr.map((value) => {
+        // console.log("value", value);
+        value.opacation = (
+          <div class="opa">
+            <a-checkbox
+              checked={value.signIn}
+              onChange={(e) => {
+                console.log("点击签到", e);
+              }}
+            >
+              签到
+            </a-checkbox>
+            <a-checkbox
+              checked={value.signOut}
+              onChange={(e) => {
+                console.log("点击签退", e);
+              }}
+            >
+              签退
+            </a-checkbox>
+            <a-checkbox
+              checked={value.leave}
+              onChange={(e) => {
+                console.log("点击请假", e);
+              }}
+            >
+              请假
+            </a-checkbox>
+          </div>
+        );
+      });
+      state.tableData = arr;
+    };
+    getTableData();
     const tableDataFunc = () => {
       const columns = [
         {
@@ -406,16 +466,25 @@ export default {
           className: "h",
           dataIndex: "opacation",
           key: "opacation",
-          width: 210,
+          width: 130,
           align: "center",
-          scopedSlots: { customRender: "action" }, //引入的插槽
+          // scopedSlots: { customRender: "action" }, //引入的插槽
-          customRender: () => {
+
-            return (
+          // customRender: () => {
-              <div class="opa">
+          //   return (
-                <a-checkbox-group />
+          //     <div class="opa">
-              </div>
+          //       <a-checkbox-group
-            );
+          //         // value={state.selectOption}
-          },
+          //         name="checkboxgroup"
+          //         options={state.tableOptions}
+          //         onChange={(e) => {
+          //           console.log("eee", e);
+          //           // state.selectOption = e;
+          //         }}
+          //       />
+          //     </div>
+          //   );
+          // },
         },
       ];
       return columns;
@@ -428,12 +497,13 @@ export default {
       onSelectChange,
       showEntryScore,
       tableDataFunc,
+      getTableData,
     };
   },
 };
 </script>
 
-<style  lang="scss" >
+<style lang="scss">
 .me {
   .ant-modal-body {
     padding: 0px;
@@ -678,7 +748,14 @@ export default {
           background: #f6f9fd;
         }
         .opa {
-          background-color: #bfa;
+          background-color: rgba(255, 255, 255, 0);
+          .ant-checkbox + span {
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(0, 0, 0, 0.65);
+            line-height: 22px;
+            margin-top: 5px;
+          }
         }
       }
       // .tab {

src/components/drawers/ImportStu.vue

@@ -0,0 +1,305 @@
+<template>
+  <a-drawer
+    :visible="Importvisible"
+    class="drawerStyle importstu"
+    placement="right"
+    width="50%"
+    @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="download">
+            <span class="placedown">请下载</span>
+            <span class="template">模板</span>
+            <span class="placedown">，按要求填写数据并导入</span>
+         </div>
+         <div class="upload">
+            <span class="uptext">上传:</span>
+            <div>
+                <!-- 导入学员上传 -->
+                <div class="upbox" style="display: none">
+                    <div class="uploadimg"><img src="../../assets/images/taskpage/upload.png"/></div>
+                    <div class="draghere">点击或将文件拖拽到此处上传</div>
+                    <div class="support">支持扩展名：.xls/.xlsx</div>
+                </div>
+                <!-- 导入学员上传 -->
+                <!-- 导入学员上传（有状态）-正在上传 -->
+                <div class="alreadybox">
+                    <div class="alimg"></div>
+                    <div class="upproject">京东方商业模型.xls</div>
+                    <div class="uping">正在上传</div>
+                    <div class="progress">
+                        <a-progress :percent="55"  strokeColor="rgba(56, 139, 225, 1)"/>
+                    </div>
+                    <div class="state">
+                        <span class="stop">暂停</span>
+                        <span class="stop">取消</span>
+                    </div>
+                </div>
+                <!-- 导入学员上传（有状态）-正在上传 -->
+                <div class="uploadstate">上传失败</div>
+                <!-- 导入学员上传（有状态）-上传失败 -->
+                <div class="alreadybox">
+                    <div class="alimg"></div>
+                    <div class="upproject">京东方商业模型.xls</div>
+                    <div class="uping" style="color: #FF7474">上传失败</div>
+                    <div class="progress">
+                        <a-progress :percent="55" strokeColor="rgba(255, 116, 116, 1)" />
+                    </div>
+                    <div class="fail">下载失败数据</div>
+                    <div class="state">
+                        <span class="stop">重传</span>
+                        <span class="stop">取消</span>
+                    </div>
+                </div>
+                <!-- 导入学员上传（有状态）-上传失败 -->
+                <div class="uploadstate" style="margin-top: 74px">上传成功</div>
+                <!-- 导入学员上传（有状态）-上传成功 -->
+                <div class="alreadybox">
+                    <div class="alimg"></div>
+                    <div class="upproject">京东方商业模型.xls</div>
+                    <div class="uping" style="color: #35AE69">上传成功</div>
+                    <div class="progress">
+                        <a-progress :percent="100" :show-info="false" strokeColor="rgba(87, 200, 135, 1)"/>
+                        <span style="margin-left: 2px">100%</span>
+                    </div>
+                    <div class="state">
+                        <span class="stop">删除</span>
+                        
+                    </div>
+                </div>
+                <!-- 导入学员上传（有状态）-上传成功 -->
+            </div>
+            
+         </div>
+      </div>
+      <div class="btnn">
+        <button class="btn1">取消</button>
+        <button class="btn2">确定</button>
+      </div>
+    </div>
+  </a-drawer>
+  
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "ImportStu",
+  props: {
+    Importvisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, ctx) {
+    const state = reactive({});
+    const closeDrawer = () => {
+      ctx.emit("update:Importvisible", false);
+    };
+
+    const afterVisibleChange = (bool) => {
+      console.log("state", bool);
+    };
+
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      closeDrawer,
+      // change,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" >
+.importstu {
+  .ant-drawer-content-wrapper {
+    // max-width: 1000px;
+    .ant-drawer-header {
+      display: none !important;
+    }
+    .ant-drawer-body {
+      padding: 0;
+    }
+  }
+  .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 {
+       .download {
+         display: flex;
+         .placedown {
+            color: rgba(51, 51, 51, 1);
+            font-size: 16px;
+         }
+         .template {
+            color: rgba(56, 139, 225, 1);
+            font-size: 16px;
+            cursor: pointer;
+            padding: 0 5px;
+         }
+       }
+       .upload {
+        display: flex;
+        margin-top: 27px;
+        .uptext {
+            color: rgba(51, 51, 51, 1);
+            font-size: 14px;
+        }
+        .upbox {
+            position: relative;
+            width: 500px;
+            height: 176px;
+            margin-left: 10px;
+            background: rgba(56, 139, 225, 0.1);
+            border: 1px dotted rgba(56, 139, 225, 0.2) ;
+            border-radius: 4px;
+            cursor: pointer;
+            .uploadimg {
+                position: absolute;
+                width: 28px;
+                height: 28px;
+                top: 52px;
+                left: 236px;
+            }
+            .draghere {
+                position: absolute;
+                top: 100px;
+                left: 159px;
+                color: rgba(56, 139, 225, 1);
+                font-size: 14px;
+            }
+            .support {
+                position: absolute;
+                left: 180px;
+                bottom: 24px;
+                color: rgba(153, 153, 153, 1);
+                font-size: 14px;
+            }
+        }
+        .alreadybox {
+            width: 500px;
+            height: 173px;
+            position: relative;
+            margin-left: 10px;
+            border: 1px dotted rgba(153, 153, 153, 1);
+            border-radius: 4px;
+            .fail {
+                position: absolute;
+                top: 113px;
+                left: 68px;
+                color: #FF7474;
+                font-size: 14px;
+                cursor: pointer;
+            }
+            .alimg {
+                width: 28px;
+                height: 32px;
+                position: absolute;
+                top: 66px;
+                left: 24px;
+                background: green;
+            }
+            .upproject {
+                position: absolute;
+                top: 60px;
+                left: 68px;
+                color: rgba(51, 51, 51, 1);
+                font-size: 14px;
+            }
+            .uping {
+                position: absolute;
+                top: 60px;
+                left: 274px;
+                color: rgba(56, 139, 225, 1);
+                font-size: 14px;
+            }
+            .progress {
+                position: absolute;
+                display: flex;
+                width: 293px;
+                top: 82px;
+                left: 68px;
+                
+            }
+            .state {
+                position: absolute;
+                top: 83px;
+                left: 399px;
+                .stop {
+                    color: rgba(56, 125, 247, 1);
+                    font-size: 14px;
+                    margin-right: 8px;
+                    cursor: pointer;
+                }
+            }
+        }
+        .uploadstate {
+            margin-top: 28px;
+            margin-left: 75px;
+            color: rgba(51, 51, 51, 1);
+            font-size: 14px;
+        }
+       }
+    }
+    .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>

src/components/drawers/StuAdd.vue

@@ -3,7 +3,7 @@
     :visible="Stuvisible"
     class="drawerStyle stuadd"
     placement="right"
-    width="60%"
+    width="50%"
     @after-visible-change="afterVisibleChange"
   >
     <div class="drawerMain">
@@ -60,7 +60,81 @@
                     :data-source="tabledata"
                     :loading="tableDataTotal === -1 ? true : false"
                     expandRowByClick="true"
-                    :scroll="{ x: 590, y: 560 }"
+                    :scroll="{ x: 560, 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>
+              </a-tab-pane>
+              <a-tab-pane key="2" tab="添加组织" force-render>
+                <div class="tab2">
+                  <div class="organize">组织：</div>
+                  <a-cascader
+                        v-model:value="value"
+                        placeholder="请输入组织名称"
+                        :options="organizeList"
+                  />
+                </div>
+              </a-tab-pane>
+              <a-tab-pane key="3" tab="受众关联">
+                <div class="tab1">
+                  <div class="nameinp">
+                    <div class="namee">受众名称：</div>
+                    <a-select
+                        v-model:value="value"
+                        style="width: 264px; border-radius: 8px"
+                        placeholder="请输入组织名称"
+                        :options="organizeList1"
+                    />
+                  </div>
+                  <div class="btns">
+                    <div class="btn1">
+                      <div class="img1"><img src="../../assets/images/courseManage/search0.png"/></div>
+                      <div class="wz">搜索</div>
+                    </div>
+                    <div class="btn2">
+                      <div class="img2"><img src="../../assets/images/courseManage/reset1.png"/></div>
+                      <div class="wz">重置</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="line">
+                  <div class="inline">
+                    <div class="left1">
+                      <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="right1">清空</div>
+                  </div>
+                </div>
+                <div class="tabb" style="margin-top: 16px">
+                  <a-table
+                    style="border: 1px solid #f2f6fe"
+                    :columns="tablecolumns1"
+                    :data-source="tabledata1"
+                    :loading="tableDataTotal === -1 ? true : false"
+                    expandRowByClick="true"
+                    :scroll="{ x: 700, y: 400 }"
                     @expand="expandTable"
                     :pagination="false"
                     :row-selection="{
@@ -82,8 +156,6 @@
                   </div>
                 </div>
               </a-tab-pane>
-              <a-tab-pane key="2" tab="添加组织" force-render>Content of Tab Pane 2</a-tab-pane>
-              <a-tab-pane key="3" tab="受众关联">Content of Tab Pane 3</a-tab-pane>
             </a-tabs>
           </div>
         </div>
@@ -129,6 +201,49 @@ export default {
       pageSize: 10,
       currentPage: 1,
       tableDataTotal: 50,
+      organizeList: [
+        {
+          id: 1,
+          value: "京东方",
+          label: "京东方",
+          children: [
+            {
+              id:2,
+              value: "产研部",
+              label: "产研部",
+              children: [
+                          {
+                            id:4,
+                            value: "产品部门",
+                            label: "产品部门",
+                          },
+                          {
+                            id:5,
+                            value: "研发部门",
+                            label: "研发部门",
+                          },
+                        ],
+            },
+            {
+              id:3,
+              value: "人力资源部",
+              label: "人力资源部",
+              children: [
+                          {
+                            id:6,
+                            value: "人事部",
+                            label: "人事部",
+                          },
+                          {
+                            id:7,
+                            value: "行政部",
+                            label: "行政部",
+                          },
+                        ],
+            },
+          ],
+        },
+      ],
       tabledata: [
         {
           key: 1,
@@ -211,6 +326,98 @@ export default {
           className: "h",
         },
       ],
+      tabledata1: [
+        {
+          key: 1,
+          name: "学习受众",
+          time: "2022-10-31 23:12:00",
+          total: "1",
+          state: "已发布",
+          type: "普通受众",
+        },
+        {
+          key: 2,
+          name: "2",
+          time: "2022-10-31 23:12:00",
+          total: "2",
+          state: "已发布",
+          type: "普通受众",
+        },
+        {
+          key: 3,
+          name: "mask",
+          time: "2022-10-31 23:12:00",
+          total: "1",
+          state: "已发布",
+          type: "普通受众",
+        },
+        {
+          key: 4,
+          name: "学习受众",
+          time: "2022-10-31 23:12:00",
+          total: "1",
+          state: "已发布",
+          type: "普通受众",
+        },
+        {
+          key: 5,
+          name: "学业受众",
+          time: "2022-10-31 23:12:00",
+          total: "2",
+          state: "已发布",
+          type: "普通受众",
+        },
+        {
+          key: 6,
+          name: "案例受众",
+          time: "2022-10-31 23:12:00",
+          total: "3",
+          state: "已发布",
+          type: "普通受众",
+        },       
+      ],
+      tablecolumns1: [
+        {
+          title: "受众名称",
+          dataIndex: "name",
+          key: "name",
+          width: 30,
+          align: "left",
+          className: "h",
+        },
+        {
+          title: "创建时间",
+          dataIndex: "time",
+          key: "time",
+          width: 40,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "人数",
+          dataIndex: "total",
+          key: "total",
+          width: 20,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "状态",
+          dataIndex: "state",
+          key: "state",
+          width: 20,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "类型",
+          dataIndex: "type",
+          key: "type",
+          width: 30,
+          align: "center",
+          className: "h",
+        },
+      ],
     });
     const closeDrawer = () => {
       ctx.emit("update:Stuvisible", false);
@@ -265,8 +472,10 @@ export default {
     }
     .main {
         display: flex;
+        height: 80%;
         .left {
           width: 65%;
+          height: 100%;
           border-right: 1px solid rgba(233, 233, 233, 1);
           .tabs {
             margin-right: 33px;
@@ -407,6 +616,25 @@ export default {
                 // bottom: 20px;
               }
             }
+            .tab2 {
+              display: flex;
+              align-items: center;
+              .organize {
+                color: rgba(0, 0, 0, 0.8500);
+                font-size: 14px;
+              }
+              .ant-cascader {
+                width: 264px;
+                height: 40px;
+                border-radius: 8px;
+                .ant-select-selector{
+                  height: 100%;
+                }
+                .ant-select-selection-search-input {
+                  height: 40px;
+                }
+              }
+            }
           }
         }
         .right {

src/components/drawers/SubsetManage.vue

@@ -19,34 +19,33 @@
         <div class="groupl">小组：</div>
         <div>
           <div class="groupin">
-          <a-input
+            <a-input
-                v-model:value="value"
+              v-model:value="value"
-                placeholder="好好学习小组"
+              placeholder="好好学习小组"
-                style="border-radius: 8px; height: 40px"
+              style="border-radius: 8px; height: 40px"
-          />
+            />
-          <div class="delete">删除</div>
+            <div class="delete">删除</div>
-        </div>
+          </div>
-        <div class="groupin">          
+          <div class="groupin">
-          <a-input
+            <a-input
-                v-model:value="value"
+              v-model:value="value"
-                placeholder="全能小组"
+              placeholder="全能小组"
-                style="border-radius: 8px; height: 40px"
+              style="border-radius: 8px; height: 40px"
-          />
+            />
-          <div class="delete">删除</div>
+            <div class="delete">删除</div>
-        </div>
+          </div>
-        <div class="groupin">
+          <div class="groupin">
-
+            <a-input
-          <a-input
+              v-model:value="value"
-                v-model:value="value"
+              placeholder="宇宙第一最强小组"
-                placeholder="宇宙第一最强小组"
+              style="border-radius: 8px; height: 40px"
-                style="border-radius: 8px; height: 40px"
+            />
-          />
+            <div class="delete">删除</div>
-          <div class="delete">删除</div>
+          </div>
-        </div>
         </div>
       </div>
       <div class="addgroup" @click="showAddGroup">
-        <img src="../../assets/images/courseManage/add0.png"/>
+        <img src="../../assets/images/courseManage/add0.png" />
         <span class="grot">创建小组</span>
       </div>
       <div class="zhu">注：随机分组不对小组长生效</div>
@@ -103,7 +102,7 @@ export default {
 };
 </script>
 
-<style scoped lang="scss" >
+<style scoped lang="scss">
 .subset {
   .ant-drawer-content-wrapper {
     // max-width: 1000px;
@@ -143,10 +142,10 @@ export default {
         align-items: center;
         margin-top: 32px;
         .ant-input {
-              border-radius: 5px;
+          border-radius: 5px;
-              // height: 120%;
+          // height: 120%;
-              width: 384px;
+          width: 384px;
-              height: 40px;
+          height: 40px;
         }
         .delete {
           color: rgba(56, 125, 247, 1);
@@ -156,30 +155,29 @@ export default {
         }
       }
       .groupl {
-          color: rgba(0, 0, 0, 0.8500);
+        color: rgba(0, 0, 0, 0.85);
-          font-size: 16px;
+        font-size: 16px;
-          margin-top: 36px;
+        margin-top: 36px;
       }
     }
     .addgroup {
-        width: 130px;
+      width: 130px;
-        height: 40px;
+      height: 40px;
-        display: flex;
+      display: flex;
-        align-items: center;
+      align-items: center;
-        justify-content: center;
+      justify-content: center;
-        //margin-right: 16px;
+      //margin-right: 16px;
-        margin-top: 32px;
+      margin-top: 32px;
-        border: 1px solid #409eff;
+      border: 1px solid #409eff;
-        border-radius: 8px;
+      border-radius: 8px;
-        background: #409eff;
+      background: #409eff;
-        cursor: pointer;
+      cursor: pointer;
-        .grot {
+      .grot {
-          color: #ffffff;
+        color: #ffffff;
-          margin-left: 5px;
+        margin-left: 5px;
-          font-size: 14px;
+        font-size: 14px;
-          
-        }
       }
+    }
     .zhu {
       margin-top: 24px;
       color: rgba(153, 153, 153, 1);

src/views/projectcenter/TaskPage.vue

@@ -536,11 +536,11 @@
                   </div>
                 </div>
                 <div class="second2" style="margin-top: 20px">
-                  <div class="btn1">
+                  <div class="btn1" @click="showStuAdd">
                     <img src="../../assets/images/courseManage/add0.png" />
                     <span class="btn1text">添加学员</span>
                   </div>
-                  <div class="btn2">
+                  <div class="btn2" @click="showImportStu">
                     <img src="../../assets/images/courseManage/reset2.png" />
                     <span class="btn2text">导入学员</span>
                   </div>
@@ -1053,6 +1053,10 @@
     <face-manage v-model:Fvisible="FaceVisivle" />
     <!-- 学员（小组管理）创建小组抽屉 -->
     <subset-manage v-model:Svisible="subsetVisivle" />
+    <!-- 学员管理-添加学员抽屉 -->
+    <stu-add v-model:Stuvisible="Stuvisible" />
+    <!-- 学员管理-导入学员抽屉 -->
+    <import-stu v-model:Importvisible="Importvisible" />
     <!-- 组员名单抽屉 -->
     <member-list v-model:Lvisible="Lvisible" />
     <!-- 面授学员抽屉 -->
@@ -1234,6 +1238,8 @@ import ActiveAttendance from "../../components/drawers/ActiveAttendance";
 import WorkManage from "../../components/drawers/WorkManage";
 import FaceStu from "../../components/drawers/FaceStu";
 import TestManage from "../../components/drawers/TestManage";
+import StuAdd from "../../components/drawers/StuAdd";
+import ImportStu from "../../components/drawers/ImportStu";
 export default {
   name: "taskPage",
   components: {
@@ -1245,6 +1251,8 @@ export default {
     ActiveAttendance,
     WorkManage,
     TestManage,
+    StuAdd,
+    ImportStu,
   },
   setup() {
     const state = reactive({
@@ -1409,6 +1417,8 @@ export default {
       AAvisible: false, //活动考勤
       Wvisible: false, //作业管理
       TMvisible: false, //考试管理
+      Stuvisible: false, //添加学员
+      Importvisible: false, //导入学员
       pubproject: false,
       stugroup: false,
       checked: false,
@@ -1793,7 +1803,12 @@ export default {
     const showTest = () => {
       state.TMvisible = true;
     };
-
+    const showStuAdd = () => {
+      state.Stuvisible = true;
+    };
+    const showImportStu = () => {
+      state.Importvisible = true;
+    };
     const changecheck2 = () => {
       state.checkedd = !state.checkedd;
     };
@@ -1816,6 +1831,8 @@ export default {
       showTest,
       changecheck2,
       changecheck3,
+      showStuAdd,
+      showImportStu,
     };
   },
 };