From 1f4bb0fd2a2875a0a40242d6274b89e224e3d1d5 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, 26 Oct 2022 11:58:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9=E5=AF=BC=E5=85=A5?=
 =?UTF-8?q?=E5=AD=A6=E5=91=98,=E6=B7=BB=E5=8A=A0=E5=AD=A6=E5=91=98,?=
 =?UTF-8?q?=E5=8F=96=E6=B6=88=E4=BC=98=E7=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/drawers/ImportStu.vue  | 473 ++++++++++++++++----------
 src/components/drawers/MemberList.vue |   2 +-
 src/components/drawers/StuAdd.vue     |   8 +-
 src/views/projectcenter/TaskPage.vue  | 160 ++++++++-
 4 files changed, 459 insertions(+), 184 deletions(-)

diff --git a/src/components/drawers/ImportStu.vue b/src/components/drawers/ImportStu.vue
index 54c0e763..34634f9e 100644
--- a/src/components/drawers/ImportStu.vue
+++ b/src/components/drawers/ImportStu.vue
@@ -3,7 +3,7 @@
     :visible="Importvisible"
     class="drawerStyle importstu"
     placement="right"
-    width="70%"
+    width="800px"
     @after-visible-change="afterVisibleChange"
   >
     <div class="drawerMain">
@@ -16,70 +16,90 @@
         />
       </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"><img src="../../assets/images/studentimg/xls.png"/></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"><img src="../../assets/images/studentimg/xls.png"/></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"><img src="../../assets/images/studentimg/xls.png"/></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 class="minatitl">
+          <div class="up1">请下载</div>
+          <div class="up2">模板</div>
+          <div class="up1">，按要求填写数据并导入</div>
+        </div>
+        <div class="upload">
+          <div class="text">上传：</div>
+          <div class="right">
+            <div class="load">
+              <div class="cloud"></div>
+              <div class="tip">点击或将文件拖拽到此处上传</div>
+              <div class="tipz">支持扩展名：.xls/.xlsx</div>
             </div>
-            
-         </div>
+            <div class="loadstate">
+              <div class="loadborder">
+                <div class="content">
+                  <div class="img"></div>
+                  <div class="timebox">
+                    <div class="timetop">
+                      <div class="tit">京东方商业模型.xls</div>
+                      <div class="stateloading">正在上传</div>
+                    </div>
+                    <div class="prog">
+                      <div class="inprogloading"></div>
+                    </div>
+                  </div>
+                  <div class="curloading">
+                    <div class="cur">55%</div>
+                    <div class="cancel" style="margin-left: 20px">暂停</div>
+                    <div class="cancel" style="margin-left: 15px">取消</div>
+                  </div>
+                </div>
+              </div>
+              <div class="loadborder">
+                <div class="content">
+                  <div class="img"></div>
+                  <div class="timebox">
+                    <div class="timetop">
+                      <div class="tit">京东方商业模型.xls</div>
+                      <div class="statedefeat">上传失败</div>
+                    </div>
+                    <div class="prog">
+                      <div class="inprogdefeat"></div>
+                    </div>
+                  </div>
+                  <div class="curloading">
+                    <div class="cur">55%</div>
+                    <div class="cancel" style="margin-left: 20px">重传</div>
+                    <div class="cancel" style="margin-left: 15px">取消</div>
+                  </div>
+                  <div class="defeat">
+                    <div class="detext">下载失败数据</div>
+                  </div>
+                </div>
+              </div>
+              <div class="defeatbox">
+                <div class="lefimg"></div>
+                <div class="tacl">20条数据导入成功，5条数据导入失败</div>
+              </div>
+              <div class="loadborder">
+                <div class="content">
+                  <div class="img"></div>
+                  <div class="timebox">
+                    <div class="timetop">
+                      <div class="tit">京东方商业模型.xls</div>
+                      <div class="statesucce">上传成功</div>
+                    </div>
+                    <div class="prog">
+                      <div class="inprogsucce"></div>
+                    </div>
+                  </div>
+                  <div class="curloading">
+                    <div class="cur">100%</div>
+                    <div class="cancel" style="margin-left: 20px">删除</div>
+                  </div>
+                </div>
+              </div>
+              <div class="succebox">
+                <div class="lefimg"></div>
+                <div class="tacl">20条数据导入成功，5条数据导入失败</div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="btnn">
         <button class="btn1">取消</button>
@@ -122,19 +142,9 @@ export default {
 
 <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;
+    min-width: 450px;
     margin: 0px 32px 0px 32px;
-    overflow-x: scroll;
     display: flex;
     flex-direction: column;
     .header {
@@ -143,9 +153,9 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
+      flex-shrink: 0;
       // background-color: red;
       margin-bottom: 20px;
-      flex-shrink: 0;
       .headerTitle {
         font-size: 18px;
         font-weight: 600;
@@ -155,126 +165,235 @@ export default {
       }
     }
     .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 {
+      overflow: scroll;
+      .minatitl {
         display: flex;
-        margin-top: 27px;
-        .uptext {
-            color: rgba(51, 51, 51, 1);
-            font-size: 14px;
+        .up1 {
+          font-size: 16px;
+          font-weight: 400;
+          color: #333333;
         }
-        .upbox {
-            position: relative;
+        .up2 {
+          font-size: 16px;
+          font-weight: 400;
+          color: #388be1;
+          margin-left: 4px;
+        }
+      }
+      .upload {
+        margin-top: 32px;
+        display: flex;
+        .text {
+          font-size: 14px;
+          font-weight: 400;
+          color: #333333;
+          white-space: nowrap;
+        }
+        .right {
+          margin-left: 6px;
+          .load {
+            cursor: pointer;
             width: 500px;
             height: 176px;
-            margin-left: 10px;
-            background: rgba(56, 139, 225, 0.1);
-            border: 1px dotted rgba(56, 139, 225, 0.2) ;
+            background: #f5f9fd;
             border-radius: 4px;
-            cursor: pointer;
-            .uploadimg {
-                position: absolute;
-                width: 28px;
-                height: 28px;
-                top: 52px;
-                left: 236px;
+            // opacity: 0.3;
+            border: 1px dashed #caddfd;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-bottom: 20px;
+            .cloud {
+              margin-top: 52px;
+              width: 28px;
+              height: 28px;
+              background-image: url(../../assets/images/basicinfo/cloud.png);
             }
-            .draghere {
-                position: absolute;
-                top: 100px;
-                left: 159px;
-                color: rgba(56, 139, 225, 1);
-                font-size: 14px;
+            .tip {
+              font-size: 14px;
+              font-weight: 400;
+              color: #388be1;
+              margin-top: 15px;
+              cursor: pointer;
             }
-            .support {
-                position: absolute;
-                left: 180px;
-                bottom: 24px;
-                color: rgba(153, 153, 153, 1);
-                font-size: 14px;
+            .tipz {
+              font-size: 14px;
+              font-weight: 400;
+              color: #999999;
+              margin-top: 10px;
             }
-        }
-        .alreadybox {
+          }
+          .loadstate {
             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: 32px;
-                height: 34px;
-                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;
+            margin-bottom: 100px;
+
+            .loadborder {
+              width: 500px;
+              height: 173px;
+              border-radius: 4px;
+              border: 1px dashed #eaeaea;
+              margin-bottom: 10px;
+              margin-top: 10px;
+              display: flex;
+              align-items: center;
+              .content {
                 display: flex;
-                width: 293px;
-                top: 82px;
-                left: 68px;
-                
-            }
-            .state {
-                position: absolute;
-                top: 83px;
-                left: 399px;
-                .stop {
-                    color: rgba(56, 125, 247, 1);
+                margin-left: 20px;
+                position: relative;
+                .defeat {
+                  position: absolute;
+                  left: 46px;
+                  top: 42px;
+                  font-size: 14px;
+                  font-weight: 500;
+                  width: 120px;
+                  height: 32px;
+                  border-radius: 2px;
+                  border: 1px solid #387df7;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  cursor: pointer;
+                  .detext {
                     font-size: 14px;
-                    margin-right: 8px;
-                    cursor: pointer;
+                    font-weight: 400;
+                    color: #387df7;
+                  }
                 }
+                .img {
+                  width: 30px;
+                  height: 34px;
+                  background-image: url(../../assets/images/basicinfo/exl.png);
+                }
+                .timebox {
+                  margin-left: 15px;
+                  margin-top: -5px;
+                  .timetop {
+                    display: flex;
+                    width: 262px;
+                    justify-content: space-between;
+                    margin-bottom: 8px;
+                    .tit {
+                      font-size: 14px;
+                      font-weight: 400;
+                      color: #333333;
+                    }
+                    .stateloading {
+                      font-size: 14px;
+                      font-weight: 400;
+                      color: #388be1;
+                    }
+                    .statedefeat {
+                      font-size: 14px;
+                      font-weight: 400;
+                      color: #ff7474;
+                    }
+                    .statesucce {
+                      font-size: 14px;
+                      font-weight: 400;
+                      color: #35ae69;
+                    }
+                  }
+                  .prog {
+                    width: 262px;
+                    height: 5px;
+                    background: #eaf1fe;
+                    border-radius: 4px;
+                    .inprogloading {
+                      width: 55%;
+                      height: 5px;
+                      border-radius: 4px;
+
+                      background: #388be1;
+                    }
+                    //下载失败条
+                    .inprogdefeat {
+                      width: 55%;
+                      height: 5px;
+                      border-radius: 4px;
+
+                      background: #ff7474;
+                    }
+                    //下载成功条
+                    .inprogsucce {
+                      width: 100%;
+                      height: 5px;
+                      border-radius: 4px;
+
+                      background: #57c887;
+                    }
+                  }
+                }
+                .curloading {
+                  margin-left: 15px;
+                  margin-top: 15px;
+                  display: flex;
+                  .cur {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #333333;
+                  }
+                  .cancel {
+                    cursor: pointer;
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #387df7;
+                  }
+                }
+              }
             }
+            .defeatbox {
+              width: 500px;
+              height: 40px;
+              background: rgba(255, 116, 116, 0.1);
+              border: 1px solid #ff7474;
+              display: flex;
+              align-items: center;
+              .lefimg {
+                width: 14px;
+                height: 14px;
+                margin-left: 17px;
+                margin-right: 8px;
+                background-image: url(../../assets/images/leveladd/nodone.png);
+                background-size: 100%;
+              }
+              .tacl {
+                font-size: 14px;
+                font-weight: 400;
+                color: #ff7474;
+              }
+            }
+            .succebox {
+              width: 500px;
+              height: 40px;
+              background: rgba(53, 174, 105, 0.1);
+              border: 1px solid #35ae69;
+              display: flex;
+              align-items: center;
+              .lefimg {
+                width: 14px;
+                height: 14px;
+                margin-left: 17px;
+                margin-right: 8px;
+                background-image: url(../../assets/images/leveladd/done.png);
+                background-size: 100%;
+              }
+              .tacl {
+                font-size: 14px;
+                font-weight: 400;
+
+                color: rgba(0, 0, 0, 0.65);
+              }
+            }
+          }
         }
-        .uploadstate {
-            margin-top: 28px;
-            margin-left: 75px;
-            color: rgba(51, 51, 51, 1);
-            font-size: 14px;
-        }
-       }
+      }
     }
     .btnn {
       height: 72px;
       width: 100%;
       position: absolute;
+      background-color: #fff;
       bottom: 0;
       left: 0;
       display: flex;
diff --git a/src/components/drawers/MemberList.vue b/src/components/drawers/MemberList.vue
index a546f63d..7e08f8fa 100644
--- a/src/components/drawers/MemberList.vue
+++ b/src/components/drawers/MemberList.vue
@@ -297,7 +297,7 @@ export default {
   .drawerMain {
     min-width: 600px;
     margin: 0px 32px 0px 32px;
-    overflow-x: scroll;
+    //overflow-x: scroll;
     display: flex;
     flex-direction: column;
 
diff --git a/src/components/drawers/StuAdd.vue b/src/components/drawers/StuAdd.vue
index db03b4bf..0d856116 100644
--- a/src/components/drawers/StuAdd.vue
+++ b/src/components/drawers/StuAdd.vue
@@ -3,7 +3,7 @@
     :visible="Stuvisible"
     class="drawerStyle stuadd"
     placement="right"
-    width="70%"
+    width="60%"
     @after-visible-change="afterVisibleChange"
   >
     <div class="drawerMain">
@@ -1013,11 +1013,11 @@ export default {
     };
     const onSelectChange1 = (selectedRowKeys) => {
       console.log("selectedRowKeys changed: ", selectedRowKeys);
-      state.selectedRowKeys = selectedRowKeys;
+      state.selectedRowKeys1 = selectedRowKeys;
     };
     const onSelectChange2 = (selectedRowKeys) => {
       console.log("selectedRowKeys changed: ", selectedRowKeys);
-      state.selectedRowKeys = selectedRowKeys;
+      state.selectedRowKeys2 = selectedRowKeys;
     };
 
     const getMousePosition = () => {
@@ -1048,7 +1048,7 @@ export default {
 <style lang="scss">
 .stuadd {
   .drawerMain {
-    min-width: 600px;
+    min-width: 540px;
     margin: 0px 32px 0px 32px;
     // overflow-y: scroll;
     display: flex;
diff --git a/src/views/projectcenter/TaskPage.vue b/src/views/projectcenter/TaskPage.vue
index a4433ed1..af1450b8 100644
--- a/src/views/projectcenter/TaskPage.vue
+++ b/src/views/projectcenter/TaskPage.vue
@@ -1216,6 +1216,38 @@
       </a-modal>
     </div>
     <!-- 取消学员弹窗 -->
+    <!-- 优秀学员弹窗 -->
+    <div>
+      <a-modal
+        v-model:visible="canclestu1"
+        :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="closeModal3">取消</div>
+              </div>
+              <div class="del_btn btn2">
+                <div class="btnText" @click="closeModal3">确定</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-modal>
+    </div>
+    <!-- 取消学员弹窗 -->
     <!-- 编辑弹窗 -->
     <div>
       <a-modal
@@ -1644,6 +1676,7 @@ export default {
       pubproject: false,
       stugroup: false,
       canclestu: false,
+      canclestu1: false,
       checked: false,
       checked1: true,
       checked2: false,
@@ -2204,6 +2237,12 @@ export default {
     const closeModal1 = () => {
       state.canclestu = false;
     };
+    const showModal3 = () => {
+      state.canclestu1 = true;
+    };
+    const closeModal3 = () => {
+      state.canclestu1 = false;
+    };
     const showModal2 = () => {
       state.stugroup = true;
     };
@@ -2313,7 +2352,7 @@ export default {
                 if (value.excellent === false) {
                   state.canclestu = true;
                 } else if (value.excellent === true) {
-                  state.canclestu = false;
+                  state.canclestu1 = true;
                 }
               }}
             >
@@ -2485,6 +2524,8 @@ export default {
       closeModal1,
       showModal2,
       closeModal2,
+      showModal3,
+      closeModal3,
       showCopyModal,
       closeCopyModal,
       showTime,
@@ -2731,6 +2772,122 @@ export default {
               padding-left: 26px;
               font-size: 16px;
               .icon {
+                width: 16px;
+                height: 16px;
+                margin-right: 10px;
+                background-image: url(@/assets/images/coursewareManage/QR.png);
+                background-size: 100% 100%;
+              }
+              .close_exit {
+                position: absolute;
+                right: 42px;
+                cursor: pointer;
+                width: 20px;
+                height: 20px;
+                background-image: url(@/assets/images/coursewareManage/close.png);
+                background-size: 100% 100%;
+              }
+            }
+            .body {
+              width: 100%;
+              margin: 34px auto 56px auto;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              flex-direction: column;
+              // background-color: red;
+              position: relative;
+              .back {
+                position: absolute;
+                top: 30px;
+                font-size: 12px;
+                font-weight: 400;
+                color: #666666;
+              }
+            }
+            .del_btnbox {
+              display: flex;
+              margin: 30px auto;
+              justify-content: center;
+              .del_btn {
+                width: 100px;
+                height: 40px;
+                background: rgba(64, 158, 255, 0);
+                border-radius: 8px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                flex-shrink: 0;
+                cursor: pointer;
+                .btnText {
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 40px;
+                }
+              }
+              .btn1 {
+                border: 1px solid rgba(64, 158, 255, 1);
+                color: #4ea6ff;
+                margin-right: 14px;
+              }
+              .btn2 {
+                background-color: #4ea6ff;
+                color: #ffffff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.canclestu1 {
+  .ant-modal {
+    width: 424px !important;
+    height: 258px !important;
+    .ant-modal-content {
+      width: 424px !important;
+      height: 258px !important;
+      .ant-modal-close {
+        margin-right: 18px;
+        margin-top: 5px;
+      }
+      .ant-modal-body {
+        width: 424px !important;
+        height: 258px !important;
+        padding: 0 !important;
+
+        .delete {
+          z-index: 999;
+          width: 424px;
+          height: 258px;
+          background: #ffffff;
+          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+          border-radius: 4px;
+          // position: absolute;
+          // left: 50%;
+          // top: 10%;
+          // transform: translate(-50%, -50%);
+          .del_header {
+            position: absolute;
+            width: calc(100%);
+            height: 68px;
+            background: linear-gradient(
+              rgba(78, 166, 255, 0.2) 0%,
+              rgba(78, 166, 255, 0) 100%
+            );
+          }
+          .del_main {
+            width: 100%;
+            position: relative;
+            .header {
+              display: flex;
+              align-items: center;
+              padding-top: 20px;
+              padding-left: 26px;
+              font-size: 16px;
+              .icon1 {
                 width: 16px;
                 height: 16px;
                 margin-right: 10px;
@@ -2801,7 +2958,6 @@ export default {
     }
   }
 }
-
 .doublepro {
   .ant-modal {
     .ant-modal-body {