feat:修改基础信息的任务大纲的操作

src/views/projectcenter/TaskPage.vue

@@ -221,13 +221,145 @@
               <span class="editext">编辑</span>
             </router-link>
           </div>
-          <div class="stage">
+          <div class="taskSyllabus">
+            <a-collapse v-model:activeKey="taskSyllabusActive" accordion>
+              <template #expandIcon="{ isActive }">
+                <img
+                  :style="{
+                    width: isActive ? 9.1 : 8.1,
+                    height: isActive ? 8.1 : 9.1,
+                    'margin-right': isActive ? '12px' : '13px',
+                  }"
+                  :src="
+                    isActive
+                      ? require('../../assets/images/projectadd/open.png')
+                      : require('../../assets/images/projectadd/close.png')
+                  "
+                />
+                <div></div>
+              </template>
+              <a-collapse-panel
+                v-for="(value, index) in taskSyllabus"
+                :key="index"
+                :header="value.text"
+              >
+                <div
+                  class="course"
+                  v-for="(item, key) in value.children"
+                  :key="key"
+                >
+                  <div class="first">
+                    <div class="icon">
+                      <img src="../../assets/images/leveladd/zai.png" />
+                    </div>
+                    <div>
+                      <div class="iconame">「{{ item.course }}」</div>
+                      <div class="icontext">{{ item.name }}</div>
+                    </div>
+                  </div>
+                  <div class="type">
+                    <div
+                      :class="
+                        item.classify == '必修' ? 'typename1' : 'typename'
+                      "
+                    >
+                      {{ item.classify }}
+                    </div>
+                  </div>
+                  <div class="time">
+                    <div class="timetext">开始时间</div>
+                    <div class="timetext">{{ item.beginTime }}</div>
+                  </div>
+                  <div class="progress">
+                    <div class="progresstext">
+                      {{ item.complete }}/{{ item.total }}人
+                    </div>
+                    <div style="display: flex">
+                      <a-progress
+                        :showInfo="false"
+                        :percent="item.percent"
+                        strokeColor="#FFC067"
+                        trailColor="rgba(253, 209, 98, 0.2)"
+                      />
+                      <span class="progresstext" style="margin-left: 10px"
+                        >{{ item.percent }}%</span
+                      >
+                    </div>
+                  </div>
+                  <div class="operations">
+                    <div
+                      class="operation"
+                      style="cursor: pointer"
+                      :style="{
+                        display: item.course === '面授' ? 'flex' : 'none',
+                      }"
+                      @click="showFS"
+                    >
+                      学员
+                    </div>
+                    <div
+                      class="operation"
+                      style="cursor: pointer"
+                      @click="showAA"
+                      :style="{
+                        display:
+                          item.course === '直播' || item.course === '活动'
+                            ? 'flex'
+                            : 'none',
+                      }"
+                    >
+                      考勤
+                    </div>
+                    <div
+                      class="operation"
+                      style="cursor: pointer"
+                      :style="{
+                        display:
+                          item.course === '直播' ||
+                          item.course === '活动' ||
+                          item.course === '面授'
+                            ? 'flex'
+                            : 'none',
+                      }"
+                    >
+                      二维码
+                    </div>
+                    <div
+                      class="operation"
+                      style="cursor: pointer; margin-right: 35px"
+                      @click="
+                        item.course === '在线' ||
+                        item.course === '案例' ||
+                        item.course === '外链' ||
+                        item.course === '讨论' ||
+                        item.course === '直播' ||
+                        item.course === '调研' ||
+                        item.course === '投票' ||
+                        item.course === '活动'
+                          ? showTime
+                          : item.course === '考试' || item.course === '测评'
+                          ? showTesk
+                          : item.course === '面授'
+                          ? showFace
+                          : item.course === '作业'
+                          ? showWork
+                          : null
+                      "
+                    >
+                      管理
+                    </div>
+                  </div>
+                </div>
+              </a-collapse-panel>
+            </a-collapse>
+          </div>
+          <!-- <div class="stage">
             <span class="stageimg"
               ><img src="../../assets/images/projectadd/open.png"
             /></span>
             <span class="stagename">阶段1腾飞班阶级1</span>
-          </div>
+          </div> -->
-          <div class="course">
+          <!-- <div class="course">
             <div class="first">
               <div class="icon">
                 <img src="../../assets/images/leveladd/zai.png" />
@@ -448,7 +580,7 @@
               ><img src="../../assets/images/projectadd/close.png"
             /></span>
             <span class="stagename">阶段2 腾飞班阶级2</span>
-          </div>
+          </div> -->
           <div style="display: flex; height: 20px"></div>
         </a-tab-pane>
         <a-tab-pane key="3" tab="学员">
@@ -1215,6 +1347,7 @@
 </template>
 <script>
 import { reactive, toRefs } from "vue";
+// import { CaretRightOutlined } from "@ant-design/icons-vue";
 import TimeManage from "../../components/drawers/TimeManage";
 import FaceManage from "../../components/drawers/FaceManage";
 import SubsetManage from "../../components/drawers/SubsetManage";
@@ -1229,6 +1362,7 @@ import SeeStu from "../../components/drawers/SeeStu";
 export default {
   name: "taskPage",
   components: {
+    // CaretRightOutlined,
     TimeManage,
     FaceManage,
     SubsetManage,
@@ -1406,7 +1540,7 @@ export default {
       TMvisible: false, //考试管理
       Stuvisible: false, //添加学员
       Importvisible: false, //导入学员
-      Seevisible: true, //查看学员
+      Seevisible: false, //查看学员
       pubproject: false,
       stugroup: false,
       checked: false,
@@ -1414,7 +1548,7 @@ export default {
       checked2: false,
       checkedd: false, //设置按钮1
       checkedd2: false, //设置按钮2
-      activeKey: "1",
+      activeKey: "2",
       activeKey1: "8",
       valueName: "", //排行榜输入姓名
       valueDate: "", //排行榜输入日期
@@ -1742,6 +1876,129 @@ export default {
           className: "h",
         },
       ],
+
+      //任务大纲列表
+      taskSyllabus: [
+        {
+          text: "阶段1腾飞班阶段1",
+          children: [
+            {
+              course: "在线",
+              name: "时间管理",
+              classify: "选修",
+              beginTime: "2022-09-10 14:03",
+              total: 50, //总人数
+              complete: 20, //完成人数
+              percent: 40,
+            },
+            {
+              course: "直播",
+              name: "管理直播间",
+              classify: "必修",
+              beginTime: "2022-09-12 14:03",
+              total: 50, //总人数
+              complete: 10, //完成人数
+              percent: 20,
+            },
+            {
+              course: "面授",
+              name: "管理面授课",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 80, //总人数
+              complete: 0, //完成人数
+              percent: 0,
+            },
+            {
+              course: "活动",
+              name: "管理活动",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 40, //完成人数
+              percent: 80,
+            },
+            {
+              course: "作业",
+              name: "管理者作业",
+              classify: "选修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 30, //完成人数
+              percent: 60,
+            },
+            {
+              course: "考试",
+              name: "管理者考试",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 50, //完成人数
+              percent: 100,
+            },
+            {
+              course: "案例",
+              name: "管理直播间",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 10, //完成人数
+              percent: 20,
+            },
+            {
+              course: "外链",
+              name: "管理直播间",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 10, //完成人数
+              percent: 20,
+            },
+          ],
+        },
+        {
+          text: "阶段2腾飞班阶段2",
+          children: [
+            {
+              course: "讨论",
+              name: "时间管理",
+              classify: "选修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 20, //完成人数
+              percent: 40,
+            },
+            {
+              course: "测评",
+              name: "管理直播间",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 10, //完成人数
+              percent: 20,
+            },
+            {
+              course: "调研",
+              name: "管理直播间",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 10, //完成人数
+              percent: 20,
+            },
+            {
+              course: "投票",
+              name: "管理直播间",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 10, //完成人数
+              percent: 20,
+            },
+          ],
+        },
+      ],
+      taskSyllabusActive: 0,
     });
     const showModal = () => {
       state.pubproject = true;
@@ -2232,8 +2489,15 @@ export default {
   .content {
     //display: flex;
     //margin: 0 37px;
+    .ant-tabs-top > .ant-tabs-nav::before,
+    .ant-tabs-bottom > .ant-tabs-nav::before,
+    .ant-tabs-top > div > .ant-tabs-nav::before,
+    .ant-tabs-bottom > div > .ant-tabs-nav::before {
+      border-bottom: 0px;
+    }
     .ant-tabs-nav-wrap {
       margin-left: 30px;
+      margin-top: 10px;
     }
     .onerow {
       //width: 100%;
@@ -2262,7 +2526,7 @@ export default {
       }
       .edit {
         position: absolute;
-        right: 48px;
+        right: 38px;
         top: 0;
         color: #409eff;
         width: 100px;
@@ -2456,6 +2720,38 @@ export default {
         }
       }
     }
+    .taskSyllabus {
+      .ant-collapse {
+        border: 0px;
+        background-color: rgba(255, 255, 255, 0);
+      }
+      .ant-collapse-content > .ant-collapse-content-box {
+        padding-top: 0px;
+        padding-bottom: 0px;
+      }
+      .ant-collapse > .ant-collapse-item {
+        border: 0px;
+      }
+      .ant-collapse-header {
+        display: flex;
+        height: 49px;
+        background-color: #eff4fc;
+        align-items: center;
+        margin-top: 20px;
+        margin-left: 38px;
+        margin-right: 40px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #409eff;
+        line-height: 36px;
+        .ant-collapse-arrow {
+          margin-left: 15px !important;
+        }
+      }
+      .ant-collapse-content {
+        border-top: 0px;
+      }
+    }
     .stage {
       display: flex;
       height: 49px;
@@ -2479,11 +2775,12 @@ export default {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      padding: 10px;
+      padding: 25px 0px;
-      margin-left: 38px;
+      margin-left: 22px;
-      margin-right: 38px;
+      margin-right: 24px;
       //margin: 0 12px;
       border: 1px solid #f2f6fc;
+      border-top: 0px;
       .first {
         //position: relative;
         display: flex;