From a236a9ccb8dffb970c5904b6d9d29b938f9d8b21 Mon Sep 17 00:00:00 2001
From: wuyx <wuyx@dongwu-inc.com>
Date: Thu, 22 Dec 2022 09:48:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E9=A1=B9=E7=9B=AE=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/projectcenter/TaskAdd.vue | 5246 +++++++++++++--------------
 1 file changed, 2502 insertions(+), 2744 deletions(-)

diff --git a/src/views/projectcenter/TaskAdd.vue b/src/views/projectcenter/TaskAdd.vue
index 6caa1c9a..854e9c28 100644
--- a/src/views/projectcenter/TaskAdd.vue
+++ b/src/views/projectcenter/TaskAdd.vue
@@ -1,92 +1,71 @@
 <template>
-  <div class="taskadd">
-    <div style="display: flex">
-      <div class="left clearfix">
-        <div class="leftmain">
-          <div class="tit">
-            阶段
-            <img
-              src="../../assets/images/projectadd/right.png"
-              style="margin-left: 10px; cursor: pointer"
-              @click="showCancel"
-            />
-          </div>
-          <div class="btn btn3" @click="showModal()" style="margin-left: 19px">
-            <div class="search"></div>
-            <div class="btnText">添加阶段</div>
-          </div>
-          <div class="maincon" style="background-color: #fff">
-            <draggable
-              v-model="level"
-              chosenClass="chosen"
-              ghostClass="ghost"
-              forceFallback="true"
-              group="stage"
-              animation="500"
-            >
-              <template #item="{ element }">
-                <div
-                  class="items"
-                  :class="chooseStageId == element.id ? 'active' : ''"
-                  @click="changebgc(element.id)"
-                >
-                  <div class="items1">
-                    <div class="boxs_left">
-                      <a-popover placement="topLeft" trigger="click">
-                        <template #content>
-                          <div style="width: 130px">
-                            {{ element.name ? element.name : "暂无说明" }}
-                          </div>
-                        </template>
-                        <template #title>
-                          <span>阶段说明</span>
-                        </template>
-                        <div class="script">
-                          <span style="font-size: 12px; color: #ffffff"
-                            >说明</span
-                          >
-                        </div>
-                      </a-popover>
+	<div class="taskadd">
+		<div style="display: flex">
+			<div class="left clearfix">
+				<div class="leftmain">
+					<div class="tit">
+						阶段
+						<img src="../../assets/images/projectadd/right.png" style="margin-left: 10px; cursor: pointer"
+							@click="showCancel" />
+					</div>
+					<div class="btn btn3" @click="showModal()" style="margin-left: 19px">
+						<div class="search"></div>
+						<div class="btnText">添加阶段</div>
+					</div>
+					<div class="maincon" style="background-color: #fff">
+						<draggable v-model="level" chosenClass="chosen" ghostClass="ghost" forceFallback="true" group="stage"
+							animation="500">
+							<template #item="{ element }">
+								<div class="items" :class="chooseStageId == element.id ? 'active' : ''" @click="changebgc(element.id)">
+									<div class="items1">
+										<div class="boxs_left">
+											<a-popover placement="topLeft" trigger="click">
+												<template #content>
+													<div style="width: 130px">
+														{{ element.name ? element.name : "暂无说明" }}
+													</div>
+												</template>
+												<template #title>
+													<span>阶段说明</span>
+												</template>
+												<div class="script">
+													<span style="font-size: 12px; color: #ffffff">说明</span>
+												</div>
+											</a-popover>
 
-                      <div class="imgIcon" @click="showModal(element)"></div>
-                    </div>
-                    <div class="boxs_right">
-                      <div
-                        class="imgIcon"
-                        @click="showDeleteStage(element.id)"
-                      ></div>
-                    </div>
-                  </div>
-                  <div class="items2">
-                    <a-popover
-                      placement="topLeft"
-                      v-if="element.tit?.length > 10"
-                    >
-                      <template #content>
-                        <div style="width: 130px">
-                          {{ element.tit }}
-                        </div>
-                      </template>
-                      <!-- <template #title>
+											<div class="imgIcon" @click="showModal(element)"></div>
+										</div>
+										<div class="boxs_right">
+											<div class="imgIcon" @click="showDeleteStage(element.id)"></div>
+										</div>
+									</div>
+									<div class="items2">
+										<a-popover placement="topLeft" v-if="element.tit?.length > 10">
+											<template #content>
+												<div style="width: 130px">
+													{{ element.tit }}
+												</div>
+											</template>
+											<!-- <template #title>
                         <span>关卡说明</span>
                       </template> -->
-                      <div class="nname">
-                        {{ element.tit }}
-                      </div>
-                    </a-popover>
-                    <div class="nname" v-if="element.tit?.length <= 10">
-                      {{ element.tit }}
-                    </div>
-                  </div>
-                  <!-- <div class="itemle">
+											<div class="nname">
+												{{ element.tit }}
+											</div>
+										</a-popover>
+										<div class="nname" v-if="element.tit?.length <= 10">
+											{{ element.tit }}
+										</div>
+									</div>
+									<!-- <div class="itemle">
               <div class="tit">{{ item.remark }}</div>
               <div class="name">{{ item.name }}</div>
             </div> -->
-                </div>
-              </template>
-            </draggable>
+								</div>
+							</template>
+						</draggable>
 
-            <!-- <div
+						<!-- <div
             class="items"
             :class="isactive == index ? 'active' : ''"
             @click="changebgc(index)"
@@ -108,25 +87,25 @@
               <div class="nname">{{ item.name }}</div>
             </div>
           </div> -->
-          </div>
-        </div>
-      </div>
-      <div class="right">
-        <div class="addhead">
-          <div class="filt">
-            <div class="le">
-              <div class="leftimg">
-                <img class="img" :src="picUrl" />
-              </div>
-              <div class="imgfor">
-                <div class="forz" style="font-weight: 700">
-                  {{ projectTitle }}
-                </div>
-              </div>
-            </div>
-            <div class="rightt">
-              <!-- 2022-11-30注释 后面放开 -->
-              <!-- <div class="select">
+					</div>
+				</div>
+			</div>
+			<div class="right">
+				<div class="addhead">
+					<div class="filt">
+						<div class="le">
+							<div class="leftimg">
+								<img class="img" :src="picUrl" />
+							</div>
+							<div class="imgfor">
+								<div class="forz" style="font-weight: 700">
+									{{ projectTitle }}
+								</div>
+							</div>
+						</div>
+						<div class="rightt">
+							<!-- 2022-11-30注释 后面放开 -->
+							<!-- <div class="select">
                 <span>学习模式：</span>
                 <div class="inputbox">
                   <input type="text" placeholder="按学习时间解锁" />
@@ -136,187 +115,135 @@
                   <unlock-mode v-model:unlockModeVisible="unlockModeVisible" />
                 </div>
               </div> -->
-              <div class="line"></div>
-              <!-- <img class="img2" src="../../assets/images/projectadd/keep.png" />
+							<div class="line"></div>
+							<!-- <img class="img2" src="../../assets/images/projectadd/keep.png" />
             <div class="pub">保存</div>
             <div class="line"></div> -->
-              <router-link
-                :to="{ path: `/taskpage`, query: { projectId: projectId } }"
-              >
-                <div style="display: flex">
-                  <img
-                    class="img2"
-                    src="../../assets/images/leveladd/back.png"
-                  />
-                  <div class="return">返回</div>
-                </div>
-              </router-link>
-            </div>
-          </div>
-        </div>
-        <div class="mid">
-          <div class="item" @click="showDrawerOnline">
-            <div class="itcon">
-              <div class="img">
-                <img src="../../assets/images/leveladd/zai.png" />
-              </div>
-              <div class="text">在线</div>
-            </div>
-            <!-- 添加在线侧弹窗 -->
-            <div>
-              <add-online
-                v-model:addonlineVisible="addonlinevisible"
-                @changeData="updateTableData"
-                :isLevel="isLevel"
-                v-model:edit="edit"
-                v-model:projectId="projectId"
-                v-model:chooseStageId="chooseStageId"
-                v-model:projectTaskId="projectTaskId"
-                v-model:EditOnlineId="EditOnlineId"
-              />
-            </div>
-            <!-- 添加在线侧弹窗 -->
-            <div class="lin"></div>
-          </div>
-          <div class="item" @click="showDrawerFaceteach">
-            <div class="itcon">
-              <div class="img">
-                <img src="../../assets/images/leveladd/mian.png" />
-              </div>
-              <div class="text">面授</div>
-            </div>
-            <!-- 添加面授侧弹窗 -->
-            <div>
-              <add-faceteach
-                v-model:addfaceteachVisible="addfaceteachvisible"
-                v-model:EditFaceId="EditFaceId"
-                v-model:edit="edit"
-                :isLevel="isLevel"
-                v-model:projectId="projectId"
-                v-model:chooseStageId="chooseStageId"
-                @changeData="updateTableData"
-                v-model:projectTaskId="projectTaskId"
-              />
-            </div>
-            <!-- 添加面授侧弹窗 -->
-            <div class="lin"></div>
-          </div>
-          <div class="item" @click="showDrawerAddCase">
-            <div class="itcon">
-              <div class="img">
-                <img src="../../assets/images/leveladd/an.png" />
-              </div>
-              <div class="text">案例</div>
-            </div>
-            <!-- 添加案例侧弹窗 -->
-            <div>
-              <add-case
-                v-model:addcaseVisible="addcasevisible"
-                @changeData="updateTableData"
-                :isLevel="isLevel"
-                v-model:edit="edit"
-                v-model:projectId="projectId"
-                v-model:chooseStageId="chooseStageId"
-                v-model:projectTaskId="projectTaskId"
-                v-model:EditCaseId="EditCaseId"
-              />
-            </div>
-            <!-- 添加案例侧弹窗 -->
-            <div class="lin"></div>
-          </div>
-          <div class="item">
-            <div class="itcon">
-              <div class="img" @click="showDrawerAddHomework">
-                <img src="../../assets/images/leveladd/zuo.png" />
-              </div>
-              <div class="text">作业</div>
-            </div>
-            <!-- 添加作业侧弹窗 -->
-            <div>
-              <add-homework
-                v-model:addhomeworkVisible="addhomeworkvisible"
-                @changeData="updateTableData"
-                v-model:isLevel="isLevel"
-                v-model:edit="edit"
-                v-model:projectId="projectId"
-                v-model:chooseStageId="chooseStageId"
-                v-model:EditWorkId="EditWorkId"
-                v-model:projectTaskId="projectTaskId"
-              />
-            </div>
-            <!-- 添加作业侧弹窗 -->
-            <div class="lin"></div>
-          </div>
-          <div class="item" @click="showDrawerAddTest">
-            <div class="itcon">
-              <div class="img">
-                <img src="../../assets/images/leveladd/kao.png" />
-              </div>
-              <div class="text">考试</div>
-            </div>
-            <!-- 添加考试侧弹窗 -->
-            <div>
-              <add-test
-                v-model:addtestVisible="addtestvisible"
-                @changeData="updateTableData"
-                :isLevel="isLevel"
-                v-model:edit="edit"
-                v-model:projectId="projectId"
-                v-model:chooseStageId="chooseStageId"
-                v-model:EditTestId="EditTestId"
-                v-model:projectTaskId="projectTaskId"
-              />
-            </div>
-            <!-- 添加考试侧弹窗 -->
-            <div class="lin"></div>
-          </div>
-          <div class="item" @click="showDrawerAddLive">
-            <div class="itcon">
-              <div class="img">
-                <img src="../../assets/images/leveladd/zhi.png" />
-              </div>
-              <div class="text">直播</div>
-            </div>
-            <!-- 添加直播侧弹窗 -->
-            <div>
-              <add-live
-                v-model:addliveVisible="addlivevisible"
-                :isLevel="isLevel"
-                @changeData="updateTableData"
-                v-model:projectId="projectId"
-                v-model:chooseStageId="chooseStageId"
-                v-model:edit="edit"
-                v-model:EditLiveId="EditLiveId"
-                v-model:projectTaskId="projectTaskId"
-              />
-            </div>
-            <!-- 添加直播侧弹窗 -->
-            <div class="lin"></div>
-          </div>
-          <div class="item" @click="showDrawerAddRef">
-            <div class="itcon">
-              <div class="img">
-                <img src="../../assets/images/leveladd/wai.png" />
-              </div>
-              <div class="text">外链</div>
-            </div>
-            <!-- 添加外链侧弹窗 -->
-            <div>
-              <add-ref
-                v-model:addrefVisible="addrefvisible"
-                :isLevel="isLevel"
-                @changeData="updateTableData"
-                v-model:projectId="projectId"
-                v-model:chooseStageId="chooseStageId"
-                v-model:edit="edit"
-                v-model:EditRefId="EditRefId"
-                v-model:projectTaskId="projectTaskId"
-              />
-            </div>
-            <!-- 添加外链侧弹窗 -->
-            <div class="lin"></div>
-          </div>
-          <!--TODO1216
+							<router-link :to="{ path: `/taskpage`, query: { projectId: projectId } }">
+								<div style="display: flex">
+									<img class="img2" src="../../assets/images/leveladd/back.png" />
+									<div class="return">返回</div>
+								</div>
+							</router-link>
+						</div>
+					</div>
+				</div>
+				<div class="mid">
+					<div class="item" @click="showDrawerOnline">
+						<div class="itcon">
+							<div class="img">
+								<img src="../../assets/images/leveladd/zai.png" />
+							</div>
+							<div class="text">在线</div>
+						</div>
+						<!-- 添加在线侧弹窗 -->
+						<div>
+							<add-online v-model:addonlineVisible="addonlinevisible" @changeData="updateTableData" :isLevel="isLevel"
+								v-model:edit="edit" v-model:projectId="projectId" v-model:chooseStageId="chooseStageId"
+								v-model:projectTaskId="projectTaskId" v-model:EditOnlineId="EditOnlineId" />
+						</div>
+						<!-- 添加在线侧弹窗 -->
+						<div class="lin"></div>
+					</div>
+					<div class="item" @click="showDrawerFaceteach">
+						<div class="itcon">
+							<div class="img">
+								<img src="../../assets/images/leveladd/mian.png" />
+							</div>
+							<div class="text">面授</div>
+						</div>
+						<!-- 添加面授侧弹窗 -->
+						<div>
+							<add-faceteach v-model:addfaceteachVisible="addfaceteachvisible" v-model:EditFaceId="EditFaceId"
+								v-model:edit="edit" :isLevel="isLevel" v-model:projectId="projectId"
+								v-model:chooseStageId="chooseStageId" @changeData="updateTableData"
+								v-model:projectTaskId="projectTaskId" />
+						</div>
+						<!-- 添加面授侧弹窗 -->
+						<div class="lin"></div>
+					</div>
+					<div class="item" @click="showDrawerAddCase">
+						<div class="itcon">
+							<div class="img">
+								<img src="../../assets/images/leveladd/an.png" />
+							</div>
+							<div class="text">案例</div>
+						</div>
+						<!-- 添加案例侧弹窗 -->
+						<div>
+							<add-case v-model:addcaseVisible="addcasevisible" @changeData="updateTableData" :isLevel="isLevel"
+								v-model:edit="edit" v-model:projectId="projectId" v-model:chooseStageId="chooseStageId"
+								v-model:projectTaskId="projectTaskId" v-model:EditCaseId="EditCaseId" />
+						</div>
+						<!-- 添加案例侧弹窗 -->
+						<div class="lin"></div>
+					</div>
+					<div class="item">
+						<div class="itcon">
+							<div class="img" @click="showDrawerAddHomework">
+								<img src="../../assets/images/leveladd/zuo.png" />
+							</div>
+							<div class="text">作业</div>
+						</div>
+						<!-- 添加作业侧弹窗 -->
+						<div>
+							<add-homework v-model:addhomeworkVisible="addhomeworkvisible" @changeData="updateTableData"
+								v-model:isLevel="isLevel" v-model:edit="edit" v-model:projectId="projectId"
+								v-model:chooseStageId="chooseStageId" v-model:EditWorkId="EditWorkId"
+								v-model:projectTaskId="projectTaskId" />
+						</div>
+						<!-- 添加作业侧弹窗 -->
+						<div class="lin"></div>
+					</div>
+					<div class="item" @click="showDrawerAddTest">
+						<div class="itcon">
+							<div class="img">
+								<img src="../../assets/images/leveladd/kao.png" />
+							</div>
+							<div class="text">考试</div>
+						</div>
+						<!-- 添加考试侧弹窗 -->
+						<div>
+							<add-test v-model:addtestVisible="addtestvisible" @changeData="updateTableData" :isLevel="isLevel"
+								v-model:edit="edit" v-model:projectId="projectId" v-model:chooseStageId="chooseStageId"
+								v-model:EditTestId="EditTestId" v-model:projectTaskId="projectTaskId" />
+						</div>
+						<!-- 添加考试侧弹窗 -->
+						<div class="lin"></div>
+					</div>
+					<div class="item" @click="showDrawerAddLive">
+						<div class="itcon">
+							<div class="img">
+								<img src="../../assets/images/leveladd/zhi.png" />
+							</div>
+							<div class="text">直播</div>
+						</div>
+						<!-- 添加直播侧弹窗 -->
+						<div>
+							<add-live v-model:addliveVisible="addlivevisible" :isLevel="isLevel" @changeData="updateTableData"
+								v-model:projectId="projectId" v-model:chooseStageId="chooseStageId" v-model:edit="edit"
+								v-model:EditLiveId="EditLiveId" v-model:projectTaskId="projectTaskId" />
+						</div>
+						<!-- 添加直播侧弹窗 -->
+						<div class="lin"></div>
+					</div>
+					<div class="item" @click="showDrawerAddRef">
+						<div class="itcon">
+							<div class="img">
+								<img src="../../assets/images/leveladd/wai.png" />
+							</div>
+							<div class="text">外链</div>
+						</div>
+						<!-- 添加外链侧弹窗 -->
+						<div>
+							<add-ref v-model:addrefVisible="addrefvisible" :isLevel="isLevel" @changeData="updateTableData"
+								v-model:projectId="projectId" v-model:chooseStageId="chooseStageId" v-model:edit="edit"
+								v-model:EditRefId="EditRefId" v-model:projectTaskId="projectTaskId" />
+						</div>
+						<!-- 添加外链侧弹窗 -->
+						<div class="lin"></div>
+					</div>
+					<!--TODO1216
           <div class="item" @click="showDrawerAddDiscuss">
             <div class="itcon">
               <div class="img">
@@ -341,77 +268,56 @@
             <div class="lin"></div>
           </div>
  -->
-          <div class="item" @click="showDrawerAddActive">
-            <div class="itcon">
-              <div class="img">
-                <img src="../../assets/images/leveladd/huo.png" />
-              </div>
-              <div class="text">活动</div>
-            </div>
-            <!-- 添加活动侧弹窗 -->
-            <div>
-              <add-active
-                v-model:addactiveVisible="addactivevisible"
-                v-model:projectId="projectId"
-                v-model:EditActiveId="EditActiveId"
-                v-model:projectTaskId="projectTaskId"
-                v-model:edit="edit"
-                :isLevel="isLevel"
-                v-model:chooseStageId="chooseStageId"
-                @changeData="updateTableData"
-              />
-            </div>
-            <!-- 添加活动侧弹窗 -->
-            <div class="lin"></div>
-          </div>
-          <div class="item" @click="showDrawerAddEval">
-            <div class="itcon">
-              <div class="img">
-                <img src="../../assets/images/leveladd/ce.png" />
-              </div>
-              <div class="text">测评</div>
-            </div>
-            <!-- 添加测评侧弹窗 -->
-            <div>
-              <add-eval
-                v-model:addevalVisible="addevalvisible"
-                @changeData="updateTableData"
-                v-model:edit="edit"
-                :isLevel="isLevel"
-                v-model:projectId="projectId"
-                v-model:chooseStageId="chooseStageId"
-                v-model:projectTaskId="projectTaskId"
-                v-model:EditEvalId="EditEvalId"
-              />
-            </div>
-            <!-- 添加测评侧弹窗 -->
-            <div class="lin"></div>
-          </div>
-          <div class="item" @click="showDrawerAddInvist">
-            <div class="itcon">
-              <div class="img">
-                <img src="../../assets/images/leveladd/diao.png" />
-              </div>
-              <div class="text">评估</div>
-            </div>
-            <!-- 添加评估侧弹窗 -->
-            <div>
-              <add-invist
-                v-model:addinvistVisible="addinvistvisible"
-                @changeData="updateTableData"
-                v-model:edit="edit"
-                :isLevel="isLevel"
-                v-model:projectId="projectId"
-                v-model:chooseStageId="chooseStageId"
-                v-model:projectTaskId="projectTaskId"
-                v-model:EditInvistId="EditInvistId"
-              />
-            </div>
+					<div class="item" @click="showDrawerAddActive">
+						<div class="itcon">
+							<div class="img">
+								<img src="../../assets/images/leveladd/huo.png" />
+							</div>
+							<div class="text">活动</div>
+						</div>
+						<!-- 添加活动侧弹窗 -->
+						<div>
+							<add-active v-model:addactiveVisible="addactivevisible" v-model:projectId="projectId"
+								v-model:EditActiveId="EditActiveId" v-model:projectTaskId="projectTaskId" v-model:edit="edit"
+								:isLevel="isLevel" v-model:chooseStageId="chooseStageId" @changeData="updateTableData" />
+						</div>
+						<!-- 添加活动侧弹窗 -->
+						<div class="lin"></div>
+					</div>
+					<div class="item" @click="showDrawerAddEval">
+						<div class="itcon">
+							<div class="img">
+								<img src="../../assets/images/leveladd/ce.png" />
+							</div>
+							<div class="text">测评</div>
+						</div>
+						<!-- 添加测评侧弹窗 -->
+						<div>
+							<add-eval v-model:addevalVisible="addevalvisible" @changeData="updateTableData" v-model:edit="edit"
+								:isLevel="isLevel" v-model:projectId="projectId" v-model:chooseStageId="chooseStageId"
+								v-model:projectTaskId="projectTaskId" v-model:EditEvalId="EditEvalId" />
+						</div>
+						<!-- 添加测评侧弹窗 -->
+						<div class="lin"></div>
+					</div>
+					<div class="item" @click="showDrawerAddInvist">
+						<div class="itcon">
+							<div class="img">
+								<img src="../../assets/images/leveladd/diao.png" />
+							</div>
+							<div class="text">评估</div>
+						</div>
+						<!-- 添加评估侧弹窗 -->
+						<div>
+							<add-invist v-model:addinvistVisible="addinvistvisible" @changeData="updateTableData" v-model:edit="edit"
+								:isLevel="isLevel" v-model:projectId="projectId" v-model:chooseStageId="chooseStageId"
+								v-model:projectTaskId="projectTaskId" v-model:EditInvistId="EditInvistId" />
+						</div>
 
-            <div class="lin"></div>
-          </div>
+						<div class="lin"></div>
+					</div>
 
-          <!--TODO1216
+					<!--TODO1216
           <div class="item" @click="showDrawerAddVote">
             <div class="itcon">
               <div class="img">
@@ -437,40 +343,38 @@
             
             </div>
           </div>
-        --></div>
-        <div class="boom">
-          <div class="boomcen">
-            <div class="onerow">
-              <div class="taskmain">任务列表</div>
-              <button class="btn" @click="showChangeModal">
-                移动任务到阶段
-              </button>
-              <div class="edit" @click="showdeAll">
-                <img
-                  class="editimg"
-                  src="../../assets/images/projectadd/delete.png"
-                />
-                <span class="editext">批量删除</span>
-              </div>
-            </div>
-            <!-- 无数据样式 -->
-            <div class="notable" style="display: none">
-              <div class="notablebox">
-                <div class="boxbody">
-                  <div class="boximg"></div>
-                  <div class="boxtitle">
-                    <span style="color: #ffb64e; font-size: 20px">无课程</span>
-                  </div>
-                  <div class="boxtitle2">
-                    <span style="color: #878b92">请点击新建开课，创建课程</span>
-                  </div>
-                </div>
-                <div class="smallleft"></div>
-                <div class="smallright"></div>
-              </div>
-            </div>
-            <div class="rwbox">
-              <!-- <div class="talk">
+        -->
+				</div>
+				<div class="boom">
+					<div class="boomcen">
+						<div class="onerow">
+							<div class="taskmain">任务列表</div>
+							<button class="btn" @click="showChangeModal">
+								移动任务到阶段
+							</button>
+							<div class="edit" @click="showdeAll">
+								<img class="editimg" src="../../assets/images/projectadd/delete.png" />
+								<span class="editext">批量删除</span>
+							</div>
+						</div>
+						<!-- 无数据样式 -->
+						<div class="notable" style="display: none">
+							<div class="notablebox">
+								<div class="boxbody">
+									<div class="boximg"></div>
+									<div class="boxtitle">
+										<span style="color: #ffb64e; font-size: 20px">无课程</span>
+									</div>
+									<div class="boxtitle2">
+										<span style="color: #878b92">请点击新建开课，创建课程</span>
+									</div>
+								</div>
+								<div class="smallleft"></div>
+								<div class="smallright"></div>
+							</div>
+						</div>
+						<div class="rwbox">
+							<!-- <div class="talk">
               <img class="im" src="../../assets/images/leveladd/gan.png" />
               <div class="xu">
                 <span class="yi">已选择</span>
@@ -483,9 +387,8 @@
                 <span class="yi">条</span>
               </div>
             </div> -->
-              <div class="tableBox" style="border: 1px solid #f2f6fc">
-                <div
-                  style="
+							<div class="tableBox" style="border: 1px solid #f2f6fc">
+								<div style="
                     height: 50px;
                     display: flex;
                     justify-content: space-between;
@@ -496,61 +399,43 @@
                     color: #999ba3;
                     line-height: 36px;
                     border-bottom: 1px solid #f2f6fc;
-                  "
-                >
-                  <div
-                    style="
+                  ">
+									<div style="
                       width: 87px;
                       text-align: center;
                       display: flex;
                       margin-left: 46px;
-                    "
-                  >
-                    <img
-                      style="
+                    ">
+										<img style="
                         width: 16px;
                         height: 16px;
                         cursor: pointer;
                         margin-top: 12px;
-                      "
-                      :src="
-                        selectAll === 0
-                          ? require('../../assets/images/notSelect.png')
-                          : selectAll === 1
-                          ? require('../../assets/images/selectAll.png')
-                          : require('../../assets/images/select.png')
-                      "
-                      @click="selectRowAll"
-                    />
-                    <!-- <a-checkbox
+                      " :src="
+                      	selectAll === 0
+                      		? require('../../assets/images/notSelect.png')
+                      		: selectAll === 1
+                      			? require('../../assets/images/selectAll.png')
+                      			: require('../../assets/images/select.png')
+                      " @click="selectRowAll" />
+										<!-- <a-checkbox
                     v-model:checked="selectAll"
                     @change="selectRowAll"
                   >
                   </a-checkbox> -->
-                    <div style="margin-top: 2px; margin-left: 8px">类型</div>
-                  </div>
-                  <div style="width: 120px; text-align: center">任务名称</div>
-                  <div style="width: 120px; text-align: center">必修/选修</div>
-                  <div style="width: 87px; text-align: center">时长</div>
-                  <div
-                    style="width: 120px; text-align: center; margin-right: 20px"
-                  >
-                    操作
-                  </div>
-                </div>
-                <draggable
-                  v-model="tableData"
-                  chosenClass="chosen"
-                  ghostClass="ghost"
-                  forceFallback="true"
-                  group="task"
-                  animation="500"
-                  @start="onStart"
-                  @end="onEnd"
-                >
-                  <template #item="{ element }">
-                    <div
-                      style="
+										<div style="margin-top: 2px; margin-left: 8px">类型</div>
+									</div>
+									<div style="width: 120px; text-align: center">任务名称</div>
+									<div style="width: 120px; text-align: center">必修/选修</div>
+									<div style="width: 87px; text-align: center">时长</div>
+									<div style="width: 120px; text-align: center; margin-right: 20px">
+										操作
+									</div>
+								</div>
+								<draggable v-model="tableData" chosenClass="chosen" ghostClass="ghost" forceFallback="true" group="task"
+									animation="500" @start="onStart" @end="onEnd">
+									<template #item="{ element }">
+										<div style="
                         height: 50px;
                         display: flex;
                         justify-content: space-between;
@@ -560,120 +445,90 @@
                         font-weight: 400;
                         color: #4f5156;
                         line-height: 36px;
-                      "
-                      class="tableRow"
-                    >
-                      <div
-                        style="
+                      " class="tableRow">
+											<div style="
                           width: 87px;
                           text-align: center;
                           margin-left: 46px;
                           position: relative;
-                        "
-                      >
-                        <div class="racona">
-                          <div
-                            class="img"
-                            style="
+                        ">
+												<div class="racona">
+													<div class="img" style="
                               cursor: pointer;
                               margin-top: 2px;
                               margin-right: 9px;
                               position: absolute;
                               left: -25px;
-                            "
-                          ></div>
-                          <a-checkbox
-                            :id="element.id"
-                            v-model:checked="element.checked"
-                            @change="changeRow"
-                          >
-                          </a-checkbox>
-                          <div style="margin-top: 2px; margin-left: 8px">
-                            {{ element.lei }}
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        style="
+                            "></div>
+													<a-checkbox :id="element.id" v-model:checked="element.checked" @change="changeRow">
+													</a-checkbox>
+													<div style="margin-top: 2px; margin-left: 8px">
+														{{ element.lei }}
+													</div>
+												</div>
+											</div>
+											<div style="
                           width: 120px;
                           text-align: center;
                           overflow: hidden;
                           text-overflow: ellipsis;
                           white-space: nowrap;
-                        "
-                        :title="element.creater"
-                      >
-                        {{ element.creater }}
-                      </div>
-                      <div style="width: 120px; text-align: center">
-                        <div class="opat">
-                          <div class="opacationt clearfix">
-                            <a-switch
-                              style="margin-left: -50px; margin-top: 3px"
-                              v-model:checked="element.checked1"
-                              size="small"
-                              active-color="red"
-                              @click="changeCourseType(element)"
-                            />
-                            <div class="showt clearfix">
-                              <div
-                                class="bi"
-                                :style="{
-                                  'z-index': element.checked1 ? 999 : 998,
-                                }"
-                              >
-                                必修
-                              </div>
-                              <div class="xuan">选修</div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div style="width: 87px; text-align: center">
-                        {{
-                          element.cretime 
-                            ? element.cretime + "分钟"
-                            : "-"
-                        }}
-                      </div>
-                      <div
-                        style="
+                        " :title="element.creater">
+												{{ element.creater }}
+											</div>
+											<div style="width: 120px; text-align: center">
+												<div class="opat">
+													<div class="opacationt clearfix">
+														<a-switch style="margin-left: -50px; margin-top: 3px" v-model:checked="element.checked1"
+															size="small" active-color="red" @click="changeCourseType(element)" />
+														<div class="showt clearfix">
+															<div class="bi" :style="{
+																'z-index': element.checked1 ? 999 : 998,
+															}">
+																必修
+															</div>
+															<div class="xuan">选修</div>
+														</div>
+													</div>
+												</div>
+											</div>
+											<div style="width: 87px; text-align: center">
+												{{
+														element.cretime
+															? element.cretime + "分钟"
+															: "-"
+												}}
+											</div>
+											<div style="
                           width: 120px;
                           text-align: center;
                           margin-right: 20px;
-                        "
-                      >
-                        <div class="opa">
-                          <div class="opacation">
-                            <span
-                              style="
+                        ">
+												<div class="opa">
+													<div class="opacation">
+														<span style="
                                 color: #4ea6ff;
                                 margin-right: 25px;
                                 cursor: pointer;
-                              "
-                              @click="
-                                decideType(
-                                  element.lei,
-                                  element.courseId,
-                                  element.id
-                                )
-                              "
-                            >
-                              编辑
-                            </span>
-                            <span
-                              style="color: #4ea6ff; cursor: pointer"
-                              @click="showDelete(element.id)"
-                            >
-                              删除
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </template>
-                </draggable>
-                <!-- <a-table
+                              " @click="
+                              	decideType(
+                              		element.lei,
+                              		element.courseId,
+                              		element.id
+                              	)
+                              ">
+															编辑
+														</span>
+														<span style="color: #4ea6ff; cursor: pointer" @click="showDelete(element.id)">
+															删除
+														</span>
+													</div>
+												</div>
+											</div>
+										</div>
+									</template>
+								</draggable>
+								<!-- <a-table
                 style="border: 1px solid #f2f6fe"
                 :columns="tableDataFunc()"
                 :data-source="tableData"
@@ -688,7 +543,7 @@
                 }"
               /> -->
 
-                <!-- <div class="pa">
+								<!-- <div class="pa">
                 <a-pagination
                   :showSizeChanger="false"
                   showQuickJumper="true"
@@ -699,14 +554,14 @@
                   class="pagination"
                 />
               </div> -->
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
 
-    <!-- <div class="footbtn">
+		<!-- <div class="footbtn">
       <div class="btnbox">
         <div class="btn btn2" @click="temporaryStorage">
           <div class="btnText">暂存</div>
@@ -720,87 +575,52 @@
       </div>
     </div> -->
 
-    <!-- 添加阶段弹窗 -->
-    <div>
-      <a-modal
-        v-model:visible="stage"
-        :title="null"
-        @ok="closeModal"
-        :footer="null"
-        :closable="false"
-        wrapClassName="addstage"
-        width="624px"
-        height="388px"
-        centered="true"
-        @cancel="closeModal"
-      >
-        <div
-          class="modalHeader"
-          style="
+		<!-- 添加阶段弹窗 -->
+		<div>
+			<a-modal v-model:visible="stage" :title="null" @ok="closeModal" :footer="null" :closable="false"
+				wrapClassName="addstage" width="624px" height="388px" centered="true" @cancel="closeModal">
+				<div class="modalHeader" style="
             width: 100%;
             height: 68px;
             display: flex;
             align-items: center;
             justify-content: space-between;
-          "
-        >
-          <div class="headerLeft" style="margin-left: 32px">
-            <span class="headerLeftText" style="font-size: 16px"
-              >编辑/添加阶段</span
-            >
-          </div>
-          <div style="cursor: pointer; margin-right: 32px" @click="closeModal">
-            <img
-              style="width: 22px; height: 22px"
-              src="../../assets/images/basicinfo/close22.png"
-            />
-          </div>
-        </div>
-        <div class="modalMain" style="width: 100%">
-          <div class="name">
-            <div class="namebox">
-              <div>
-                <img
-                  src="@/assets/images/coursewareManage/asterisk.png"
-                  alt=""
-                />
-              </div>
-              <div class="inname">阶段名称：</div>
-            </div>
-            <div class="in">
-              <a-input
-                v-model:value="valuesname"
-                show-count
-                :maxlength="20"
-                placeholder="请输入阶段名称"
-              />
-            </div>
-          </div>
-          <div class="name" style="display: flex; align-items: flex-start">
-            <div class="namebox">
-              <div class="inname">阶段说明：</div>
-            </div>
-            <div class="intext" style="margin-left: 14px">
-              <a-textarea
-                v-model:value="valuesnotice"
-                style="height: 88px"
-                show-count
-                :maxlength="100"
-                placeholder="请输入阶段说明"
-              />
-            </div>
-          </div>
-          <div
-            style="
+          ">
+					<div class="headerLeft" style="margin-left: 32px">
+						<span class="headerLeftText" style="font-size: 16px">编辑/添加阶段</span>
+					</div>
+					<div style="cursor: pointer; margin-right: 32px" @click="closeModal">
+						<img style="width: 22px; height: 22px" src="../../assets/images/basicinfo/close22.png" />
+					</div>
+				</div>
+				<div class="modalMain" style="width: 100%">
+					<div class="name">
+						<div class="namebox">
+							<div>
+								<img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
+							</div>
+							<div class="inname">阶段名称：</div>
+						</div>
+						<div class="in">
+							<a-input v-model:value="valuesname" show-count :maxlength="20" placeholder="请输入阶段名称" />
+						</div>
+					</div>
+					<div class="name" style="display: flex; align-items: flex-start">
+						<div class="namebox">
+							<div class="inname">阶段说明：</div>
+						</div>
+						<div class="intext" style="margin-left: 14px">
+							<a-textarea v-model:value="valuesnotice" style="height: 88px" show-count :maxlength="100"
+								placeholder="请输入阶段说明" />
+						</div>
+					</div>
+					<div style="
               display: flex;
               width: 100%;
               justify-content: center;
               margin-top: 40px;
-            "
-          >
-            <button
-              @click="closeModal"
-              style="
+            ">
+						<button @click="closeModal" style="
                 cursor: pointer;
                 height: 40px;
                 width: 100px;
@@ -808,13 +628,10 @@
                 border-radius: 4px;
                 color: #4ea6ff;
                 background-color: #ffffff;
-              "
-            >
-              取消
-            </button>
-            <button
-              @click="editStage"
-              style="
+              ">
+							取消
+						</button>
+						<button @click="editStage" style="
                 cursor: pointer;
                 margin-left: 16px;
                 margin-bottom: 40px;
@@ -824,234 +641,179 @@
                 border-radius: 4px;
                 color: #ffffff;
                 background-color: #4ea6ff;
-              "
-            >
-              确定
-            </button>
-          </div>
-        </div>
-        <div
-          class="aeLoading"
-          :style="{ display: addLoading ? 'flex' : 'none' }"
-        >
-          <a-spin
-            :spinning="addLoading"
-            :tip="updateStageID ? '修改中...' : ''"
-          />
-        </div>
-      </a-modal>
-    </div>
-    <!-- 确认添加阶段弹窗 -->
-    <a-modal
-      v-model:visible="confirmModal"
-      :footer="null"
-      :closable="cC"
-      wrapClassName="ConfirmModal"
-      centered="true"
-    >
-      <div class="delete">
-        <div class="del_header"></div>
-        <div class="del_main">
-          <div class="header">
-            <div class="icon"></div>
-            <span>提示</span>
-            <div class="close_exit" @click="closeConfirm"></div>
-          </div>
-          <div class="body">
-            <span>您确定要添加阶段吗</span>
-          </div>
-          <div class="del_btnbox">
-            <div class="del_btn btn1" @click="closeConfirm">
-              <div class="btnText">取消</div>
-            </div>
-            <div class="del_btn btn2" @click="showModal">
-              <div class="btnText">确定</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-    <!-- 确认取消阶段弹窗 -->
-    <a-modal
-      v-model:visible="cancelModal"
-      :footer="null"
-      :closable="cC"
-      wrapClassName="ConfirmModal"
-      centered="true"
-    >
-      <div class="delete">
-        <div class="del_header"></div>
-        <div class="del_main">
-          <div class="header">
-            <div class="icon"></div>
-            <span>提示</span>
-            <div class="close_exit" @click="closeCancel"></div>
-          </div>
-          <div class="body">
-            <span>您确定要删除所有阶段吗？</span>
-          </div>
-          <div class="del_btnbox">
-            <div class="del_btn btn1" @click="closeCancel">
-              <div class="btnText">取消</div>
-            </div>
-            <div class="del_btn btn2" @click="removeAllLevel">
-              <div class="btnText">确定</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-    <!-- 确认删除任务弹窗 -->
-    <a-modal
-      v-model:visible="deleteModal"
-      :footer="null"
-      :closable="cC"
-      wrapClassName="ConfirmModal"
-      centered="true"
-    >
-      <div class="delete">
-        <div class="del_header"></div>
-        <div class="del_main">
-          <div class="header">
-            <div class="icon"></div>
-            <span>提示</span>
-            <div class="close_exit" @click="closeDelete"></div>
-          </div>
-          <div class="body">
-            <span>您确定要删除此任务吗</span>
-          </div>
-          <div class="del_btnbox">
-            <div class="del_btn btn1" @click="closeDelete">
-              <div class="btnText">取消</div>
-            </div>
-            <div class="del_btn btn2" @click="showModal1">
-              <div class="btnText">确定</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-    <a-modal
-      v-model:visible="deAll"
-      :footer="null"
-      :closable="cC"
-      wrapClassName="ConfirmModal"
-      centered="true"
-    >
-      <div class="delete">
-        <div class="del_header"></div>
-        <div class="del_main">
-          <div class="header">
-            <div class="icon"></div>
-            <span>提示</span>
-            <div class="close_exit" @click="closeDeAll"></div>
-          </div>
-          <div class="body">
-            <span>您确定要批量删除任务吗</span>
-          </div>
-          <div class="del_btnbox">
-            <div class="del_btn btn1" @click="closeDeAll">
-              <div class="btnText">取消</div>
-            </div>
-            <div class="del_btn btn2" @click="deleteTaskAll">
-              <div class="btnText">确定</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-    <!-- 移动任务到阶段 -->
-    <a-modal
-      style="padding: 0"
-      :closable="sh"
-      v-model:visible="visiblene"
-      :footer="null"
-      centered="true"
-      wrapClassName="moveModal"
-    >
-      <div class="con">
-        <div class="header">
-          <div class="inhe">
-            <div class="mod"></div>
-            <div class="tz">选择任务移动到阶段</div>
-          </div>
-        </div>
-        <div class="mid">
-          <div class="inher">
-            <div class="cur">已选中{{ selectRow.length }}个任务</div>
-            <div class="select">
-              <a-select
-                v-model:value="curLevel"
-                style="width: 100%"
-                placeholder="请选择阶段"
-                :options="level"
-                @change="handleChangeStage"
-                allowClear
-                showSearch
-              ></a-select>
-            </div>
-            <div class="btn">
-              <button
-                style="cursor: pointer"
-                class="sameb btn1"
-                @click="closeChangeModal"
-              >
-                取消
-              </button>
-              <button
-                style="cursor: pointer"
-                class="sameb btn2"
-                @click="moveTask"
-              >
-                确定
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </a-modal>
+              ">
+							确定
+						</button>
+					</div>
+				</div>
+				<div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
+					<a-spin :spinning="addLoading" :tip="updateStageID ? '修改中...' : ''" />
+				</div>
+			</a-modal>
+		</div>
+		<!-- 确认添加阶段弹窗 -->
+		<a-modal v-model:visible="confirmModal" :footer="null" :closable="cC" wrapClassName="ConfirmModal" centered="true">
+			<div class="delete">
+				<div class="del_header"></div>
+				<div class="del_main">
+					<div class="header">
+						<div class="icon"></div>
+						<span>提示</span>
+						<div class="close_exit" @click="closeConfirm"></div>
+					</div>
+					<div class="body">
+						<span>您确定要添加阶段吗</span>
+					</div>
+					<div class="del_btnbox">
+						<div class="del_btn btn1" @click="closeConfirm">
+							<div class="btnText">取消</div>
+						</div>
+						<div class="del_btn btn2" @click="showModal">
+							<div class="btnText">确定</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</a-modal>
+		<!-- 确认取消阶段弹窗 -->
+		<a-modal v-model:visible="cancelModal" :footer="null" :closable="cC" wrapClassName="ConfirmModal" centered="true">
+			<div class="delete">
+				<div class="del_header"></div>
+				<div class="del_main">
+					<div class="header">
+						<div class="icon"></div>
+						<span>提示</span>
+						<div class="close_exit" @click="closeCancel"></div>
+					</div>
+					<div class="body">
+						<span>您确定要删除所有阶段吗？</span>
+					</div>
+					<div class="del_btnbox">
+						<div class="del_btn btn1" @click="closeCancel">
+							<div class="btnText">取消</div>
+						</div>
+						<div class="del_btn btn2" @click="removeAllLevel">
+							<div class="btnText">确定</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</a-modal>
+		<!-- 确认删除任务弹窗 -->
+		<a-modal v-model:visible="deleteModal" :footer="null" :closable="cC" wrapClassName="ConfirmModal" centered="true">
+			<div class="delete">
+				<div class="del_header"></div>
+				<div class="del_main">
+					<div class="header">
+						<div class="icon"></div>
+						<span>提示</span>
+						<div class="close_exit" @click="closeDelete"></div>
+					</div>
+					<div class="body">
+						<span>您确定要删除此任务吗</span>
+					</div>
+					<div class="del_btnbox">
+						<div class="del_btn btn1" @click="closeDelete">
+							<div class="btnText">取消</div>
+						</div>
+						<div class="del_btn btn2" @click="showModal1">
+							<div class="btnText">确定</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</a-modal>
+		<a-modal v-model:visible="deAll" :footer="null" :closable="cC" wrapClassName="ConfirmModal" centered="true">
+			<div class="delete">
+				<div class="del_header"></div>
+				<div class="del_main">
+					<div class="header">
+						<div class="icon"></div>
+						<span>提示</span>
+						<div class="close_exit" @click="closeDeAll"></div>
+					</div>
+					<div class="body">
+						<span>您确定要批量删除任务吗</span>
+					</div>
+					<div class="del_btnbox">
+						<div class="del_btn btn1" @click="closeDeAll">
+							<div class="btnText">取消</div>
+						</div>
+						<div class="del_btn btn2" @click="deleteTaskAll">
+							<div class="btnText">确定</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</a-modal>
+		<!-- 移动任务到阶段 -->
+		<a-modal style="padding: 0" :closable="sh" v-model:visible="visiblene" :footer="null" centered="true"
+			wrapClassName="moveModal">
+			<div class="con">
+				<div class="header">
+					<div class="inhe">
+						<div class="mod"></div>
+						<div class="tz">选择任务移动到阶段</div>
+					</div>
+				</div>
+				<div class="mid">
+					<div class="inher">
+						<div class="cur">已选中{{ selectRow.length }}个任务</div>
+						<div class="select">
+							<a-select v-model:value="curLevel" style="width: 100%" placeholder="请选择阶段" :options="level"
+								@change="handleChangeStage" allowClear showSearch></a-select>
+						</div>
+						<div class="btn">
+							<button style="cursor: pointer" class="sameb btn1" @click="closeChangeModal">
+								取消
+							</button>
+							<button style="cursor: pointer" class="sameb btn2" @click="moveTask">
+								确定
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</a-modal>
 
-    <!-- 是否删除阶段弹窗 -->
-    <a-modal
-      v-model:visible="deleteStageModal"
-      :footer="null"
-      :closable="cC"
-      wrapClassName="ConfirmModal"
-      centered="true"
-    >
-      <div class="delete">
-        <div class="del_header"></div>
-        <div class="del_main">
-          <div class="header">
-            <div class="icon"></div>
-            <span>提示</span>
-            <div class="close_exit" @click="closeDeleteStage"></div>
-          </div>
-          <div class="body">
-            <span style="width:320px;display:flex;justify-content:center;align-items:center;">{{level.length==1?"当前为最后一个阶段，删除后任务将被移出，为无阶段模式，确认删除阶段吗?":"您确定要删除此阶段"}}</span>
-          </div>
-          <div class="del_btnbox">
-            <div class="del_btn btn1" @click="closeDeleteStage">
-              <div class="btnText">取消</div>
-            </div>
-            <div class="del_btn btn2" @click="deleteStage">
-              <div class="btnText">确定</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-  </div>
+		<!-- 是否删除阶段弹窗 -->
+		<a-modal v-model:visible="deleteStageModal" :footer="null" :closable="cC" wrapClassName="ConfirmModal"
+			centered="true">
+			<div class="delete">
+				<div class="del_header"></div>
+				<div class="del_main">
+					<div class="header">
+						<div class="icon"></div>
+						<span>提示</span>
+						<div class="close_exit" @click="closeDeleteStage"></div>
+					</div>
+					<div class="body">
+						<span style="width:320px;display:flex;justify-content:center;align-items:center;">{{ level.length == 1 ?
+								"当前为最后一个阶段，删除后任务将被移出，为无阶段模式，确认删除阶段吗?" : "您确定要删除此阶段"
+						}}</span>
+					</div>
+					<div class="del_btnbox">
+						<div class="del_btn btn1" @click="closeDeleteStage">
+							<div class="btnText">取消</div>
+						</div>
+						<div class="del_btn btn2" @click="deleteStage">
+							<div class="btnText">确定</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</a-modal>
+	</div>
 </template>
 
 <script>
 import {
-  reactive,
-  toRefs,
-  onMounted,
-  onUnmounted,
-  onUpdated,
-  watch,
+	reactive,
+	toRefs,
+	onMounted,
+	onUnmounted,
+	onUpdated,
+	watch,
 } from "vue";
 import AddOnline from "../../components/drawers/AddOnline.vue";
 import AddFaceteach from "../../components/drawers/AddFaceteach.vue";
@@ -1074,2011 +836,2007 @@ import draggable from "vuedraggable";
 import { useRoute, useRouter } from "vue-router";
 
 export default {
-  name: "TaskAdd",
-  components: {
-    draggable,
-    AddOnline,
-    AddFaceteach,
-    AddCase,
-    AddHomework,
-    AddTest,
-    AddLive,
-    AddRef,
-    // AddDiscuss,
-    AddActive,
-    AddEval,
-    AddInvist,
-    //AddVote,
-    // UnlockMode,
-  },
-  setup() {
-    const router = useRouter();
-    const route = useRoute();
-    const state = reactive({
-      projectId: route.query.projectId,
-      chooseStageId: null, 
-      removeStageId: null,
-      onceChoice: true,
-      edit: false,
-      isLevel: 2, //学习路径1项目2模板库3
-      // isRefEdit: 1, //外链编辑
-      // isLiveEdit: 1, //直播编辑
-      isRefEdit: false, //外链编辑
-      isLiveEdit: false, //直播编辑
-      EditRefId: null, //要编辑的外链的id
-      EditLiveId: null, //要编辑的直播的ids
-      deAll: false,
-      EditDiscussId: null, //要编辑的讨论的id
-      EditActiveId: null, //要编辑的活动id
-      EditWorkId: null, // 要编辑的作业id
-      EditTestId: null, // 要编辑的考试id
-      EditCaseId: null, //要编辑的案例id
-      EditOnlineId: null, //要编辑的在线id
-      EditFaceTeach: null,
-      EditFaceId: null,
-      EditEvalId: null, //要编辑的测评id
-      EditInvistId: null,
-      EditVoteId: null, //编辑需要投票的id
-      ballotId: "", //编辑需要的题干id
-      projectTaskId: null, // 要编辑的具体任务id
-      //阶段数据
-      level: [],
-      stageList: [],
+	name: "TaskAdd",
+	components: {
+		draggable,
+		AddOnline,
+		AddFaceteach,
+		AddCase,
+		AddHomework,
+		AddTest,
+		AddLive,
+		AddRef,
+		// AddDiscuss,
+		AddActive,
+		AddEval,
+		AddInvist,
+		//AddVote,
+		// UnlockMode,
+	},
+	setup() {
+		const router = useRouter();
+		const route = useRoute();
+		const state = reactive({
+			projectId: route.query.projectId,
+			chooseStageId: null,
+			removeStageId: null,
+			onceChoice: true,
+			edit: false,
+			isLevel: 2, //学习路径1项目2模板库3
+			// isRefEdit: 1, //外链编辑
+			// isLiveEdit: 1, //直播编辑
+			isRefEdit: false, //外链编辑
+			isLiveEdit: false, //直播编辑
+			EditRefId: null, //要编辑的外链的id
+			EditLiveId: null, //要编辑的直播的ids
+			deAll: false,
+			EditDiscussId: null, //要编辑的讨论的id
+			EditActiveId: null, //要编辑的活动id
+			EditWorkId: null, // 要编辑的作业id
+			EditTestId: null, // 要编辑的考试id
+			EditCaseId: null, //要编辑的案例id
+			EditOnlineId: null, //要编辑的在线id
+			EditFaceTeach: null,
+			EditFaceId: null,
+			EditEvalId: null, //要编辑的测评id
+			EditInvistId: null,
+			EditVoteId: null, //编辑需要投票的id
+			ballotId: "", //编辑需要的题干id
+			projectTaskId: null, // 要编辑的具体任务id
+			//阶段数据
+			level: [],
+			stageList: [],
 
-      projectTitle: null,
-      picUrl: null,
-      //任务数据
-      tableData: [],
-      currentPage: 1,
-      tableDataTotal: 100,
-      pageSize: 10,
-      addonlinevisible: false,
-      addfaceteachvisible: false,
-      addcasevisible: false,
-      addhomeworkvisible: false,
-      addtestvisible: false,
-      addlivevisible: false,
-      addrefvisible: false,
-      adddiscussvisible: false,
-      addactivevisible: false,
-      addevalvisible: false,
-      addinvistvisible: false,
-      addvotevisible: false,
-      stage: false,
-      selectedRowKeys: [],
-      valuesname: "",
-      valuesnotice: "",
-      visiblene: false, //移动任务弹窗
-      confirmModal: false, //确认添加阶段弹窗
-      cC: false,
-      cancelModal: false, //确认取消阶段弹窗
-      deleteModal: false, //确认删除弹窗
-      isActive: false,
-      deleteLiveID: null, //删除直播id
-      deleteExternalID: null, //删除外链id
-      deleteEvalID: null, //测评
-      deleteInvistID: 4, //评估
-      deleteDiscussID: null, //删除讨论id
-      deleteActivityID: null, //删除活动id
-      voteId: "", //删除投票id
-      deleteID: "",
-      selectRow: [], //选择行
-      curLevel: null, //阶段名称
-      selectAll: 0, //0：未选择，1：全选，2：部分选择
+			projectTitle: null,
+			picUrl: null,
+			//任务数据
+			tableData: [],
+			currentPage: 1,
+			tableDataTotal: 100,
+			pageSize: 10,
+			addonlinevisible: false,
+			addfaceteachvisible: false,
+			addcasevisible: false,
+			addhomeworkvisible: false,
+			addtestvisible: false,
+			addlivevisible: false,
+			addrefvisible: false,
+			adddiscussvisible: false,
+			addactivevisible: false,
+			addevalvisible: false,
+			addinvistvisible: false,
+			addvotevisible: false,
+			stage: false,
+			selectedRowKeys: [],
+			valuesname: "",
+			valuesnotice: "",
+			visiblene: false, //移动任务弹窗
+			confirmModal: false, //确认添加阶段弹窗
+			cC: false,
+			cancelModal: false, //确认取消阶段弹窗
+			deleteModal: false, //确认删除弹窗
+			isActive: false,
+			deleteLiveID: null, //删除直播id
+			deleteExternalID: null, //删除外链id
+			deleteEvalID: null, //测评
+			deleteInvistID: 4, //评估
+			deleteDiscussID: null, //删除讨论id
+			deleteActivityID: null, //删除活动id
+			voteId: "", //删除投票id
+			deleteID: "",
+			selectRow: [], //选择行
+			curLevel: null, //阶段名称
+			selectAll: 0, //0：未选择，1：全选，2：部分选择
 
-      updateStageID: null, //编辑阶段id
-      deleteStageId: null, //删除阶段的id
-      deleteStageModal: false, //删除阶段弹窗
+			updateStageID: null, //编辑阶段id
+			deleteStageId: null, //删除阶段的id
+			deleteStageModal: false, //删除阶段弹窗
 
-      unlockModeVisible: false, //切换模式抽屉
+			unlockModeVisible: false, //切换模式抽屉
 
-      addLoading: false, // 添加编辑阶段动画
-    });
-    console.log("projectId", state.projectId);
-    const selectProjectName = (value, index) => {
-      console.log("value", value, index);
-    };
-    const selectProjectName2 = (value, index) => {
-      console.log("value", value, index);
-    };
-    const afterVisibleChange = (bool) => {
-      console.log("visible", bool);
-    };
+			addLoading: false, // 添加编辑阶段动画
+		});
+		console.log("projectId", state.projectId);
+		const selectProjectName = (value, index) => {
+			console.log("value", value, index);
+		};
+		const selectProjectName2 = (value, index) => {
+			console.log("value", value, index);
+		};
+		const afterVisibleChange = (bool) => {
+			console.log("visible", bool);
+		};
 
-    watch(route, () => {
-      console.log(route);
-    });
+		watch(route, () => {
+			console.log(route);
+		});
 
-    // 把数据放到state里
-    const getTableData = (tableData) => {
-      let data = tableData;
-      let array = [];
-      console.log("data", data);
-      data.map((value) => {
-        let obj = {
-          id: value.projectTaskId,
-          key: value.projectTaskId,
-          lei:
-            value.type == 1
-              ? "在线"
-              : value.type == 2
-              ? "面授"
-              : value.type == 3
-              ? "案例"
-              : value.type == 4
-              ? "作业"
-              : value.type == 5
-              ? "考试"
-              : value.type == 6
-              ? "直播"
-              : value.type == 7
-              ? "外链"
-              : value.type == 8
-              ? "讨论"
-              : value.type == 9
-              ? "活动"
-              : value.type == 10
-              ? "测评"
-              : value.type == 11
-              ? "评估"
-              : value.type == 12
-              ? "投票"
-              : "-",
-          creater: value.name,
-          cretime:
-            value.duration || value.duration == 0 ? value.duration : "-",
-          checked1: value.flag ? true : false,
-          checked: false, //是否选中类型
-          courseId: value.courseId,
-          projectId: value.projectId,
-          stageId: value.stageId,
-          type: value.type,
-        };
-        array.push(obj);
-      });
-      state.tableData = array;
-      console.log("state.tableData", state.tableData);
-    };
-    //把阶段放到level里
-    const getStageData = (tableData) => {
-      let data = tableData;
-      let array = [];
-      data.map((value) => {
-        if (value.stageId != 0) {
-          let obj = {
-            id: value.stageId,
-            tit: value.name,
-            name: value.remark,
-            taskList: value.taskList,
-            value: value.stageId,
-            label: value.name,
-            courseId: value.courseId ? value.courseId : null,
-          };
-          array.push(obj);
-        }
-      });
-      console.log(array)
-      state.level = array.sort((a,b)=>{ return a.id - b.id });
-    };
+		// 把数据放到state里
+		const getTableData = (tableData) => {
+			let data = tableData;
+			let array = [];
+			console.log("data", data);
+			data.map((value) => {
+				let obj = {
+					id: value.projectTaskId,
+					key: value.projectTaskId,
+					lei:
+						value.type == 1
+							? "在线"
+							: value.type == 2
+								? "面授"
+								: value.type == 3
+									? "案例"
+									: value.type == 4
+										? "作业"
+										: value.type == 5
+											? "考试"
+											: value.type == 6
+												? "直播"
+												: value.type == 7
+													? "外链"
+													: value.type == 8
+														? "讨论"
+														: value.type == 9
+															? "活动"
+															: value.type == 10
+																? "测评"
+																: value.type == 11
+																	? "评估"
+																	: value.type == 12
+																		? "投票"
+																		: "-",
+					creater: value.name,
+					cretime:
+						value.duration || value.duration == 0 ? value.duration : "-",
+					checked1: value.flag ? true : false,
+					checked: false, //是否选中类型
+					courseId: value.courseId,
+					projectId: value.projectId,
+					stageId: value.stageId,
+					type: value.type,
+				};
+				array.push(obj);
+			});
+			state.tableData = array;
+			console.log("state.tableData", state.tableData);
+		};
+		//把阶段放到level里
+		const getStageData = (tableData) => {
+			let data = tableData;
+			let array = [];
+			data.map((value) => {
+				if (value.stageId != 0) {
+					let obj = {
+						id: value.stageId,
+						tit: value.name,
+						name: value.remark,
+						taskList: value.taskList,
+						value: value.stageId,
+						label: value.name,
+						courseId: value.courseId ? value.courseId : null,
+					};
+					array.push(obj);
+				}
+			});
+			console.log(array)
+			state.level = array.sort((a, b) => { return a.id - b.id });
+		};
 
-    const tableDataFunc = () => {
-      const columns = [
-        {
-          title: "类型",
-          dataIndex: "state",
-          // width: "30%",
-          key: "state",
-          width: 60,
-          align: "left",
-          className: "classify",
-          scopedSlots: { customRender: "action" },
-          customRender: (text) => {
-            // console.log(text.record.checked1);
-            return (
-              <div class="racona">
-                <div
-                  class="img"
-                  style={{ cursor: "pointer" }}
-                  onClick={() => {
-                    console.log("点击了");
-                  }}
-                ></div>
-                <span> {text.record.lei}</span>
+		const tableDataFunc = () => {
+			const columns = [
+				{
+					title: "类型",
+					dataIndex: "state",
+					// width: "30%",
+					key: "state",
+					width: 60,
+					align: "left",
+					className: "classify",
+					scopedSlots: { customRender: "action" },
+					customRender: (text) => {
+						// console.log(text.record.checked1);
+						return (
+							<div class="racona">
+								<div
+									class="img"
+									style={{ cursor: "pointer" }}
+									onClick={() => {
+										console.log("点击了");
+									}}
+								></div>
+								<span> {text.record.lei}</span>
 
-                {/**
+								{/**
                    <div class="img"></div>
                    <a-checkbox class="ch" checked={text.record.checkedd}>
                    {text.record.lei}
                    </a-checkbox>
                    */}
-              </div>
-            );
-          },
-        },
-        {
-          title: "任务名称",
-          dataIndex: "creater",
-          // width: "30%",
-          key: "creater",
-          width: 200,
-          align: "center",
-          className: "h",
-        },
-        {
-          title: "必修/选修",
-          dataIndex: "pubtime",
-          key: "pubtime",
-          // width: 100,
-          align: "center",
-          className: "h",
-          scopedSlots: { customRender: "action" },
-          customRender: (text) => {
-            // console.log(text.record.checked1);
-            return (
-              <div class="opat">
-                <div class="opacationt clearfix">
-                  <a-switch
-                    style="margin-left:-50px;margin-top:3px"
-                    checked={text.record.checked1}
-                    size="small"
-                    active-color="red"
-                    onClick={() => {
-                      console.log("点击了");
-                      text.record.checked1 = !text.record.checked1;
-                    }}
-                  />
-                  <div class="showt clearfix">
-                    <div
-                      class="bi"
-                      style={
-                        text.record.checked1 ? "z-index:999" : "z-index:998"
-                      }
-                    >
-                      必修
-                    </div>
-                    <div class="xuan">选修</div>
-                  </div>
-                </div>
-              </div>
-            );
-          },
-        },
-        {
-          title: "时长",
-          dataIndex: "cretime",
-          key: "cretime",
-          // width: 100,
-          align: "center",
-          className: "h",
-        },
-        {
-          title: "操作",
-          className: "h",
-          dataIndex: "opacation",
-          key: "opacation",
-          // width: 100,
-          align: "center",
-          scopedSlots: { customRender: "action" },
-          customRender: (text) => {
-            return (
-              <div class="opa">
-                <div class="opacation">
-                  <span
-                    onClick={() => {
-                      console.log(text, "编辑text");
-                    }}
-                    style="color:#4EA6FF;margin-right:25px;cursor:pointer"
-                  >
-                    编辑
-                  </span>
-                  <span
-                    style="color:#4EA6FF;cursor:pointer"
-                    onClick={() => {
-                      showDelete();
-                      state.deleteID = text.record.id;
-                    }}
-                  >
-                    删除
-                  </span>
-                </div>
-              </div>
-            );
-          },
-        },
-      ];
-      return columns;
-    };
+							</div>
+						);
+					},
+				},
+				{
+					title: "任务名称",
+					dataIndex: "creater",
+					// width: "30%",
+					key: "creater",
+					width: 200,
+					align: "center",
+					className: "h",
+				},
+				{
+					title: "必修/选修",
+					dataIndex: "pubtime",
+					key: "pubtime",
+					// width: 100,
+					align: "center",
+					className: "h",
+					scopedSlots: { customRender: "action" },
+					customRender: (text) => {
+						// console.log(text.record.checked1);
+						return (
+							<div class="opat">
+								<div class="opacationt clearfix">
+									<a-switch
+										style="margin-left:-50px;margin-top:3px"
+										checked={text.record.checked1}
+										size="small"
+										active-color="red"
+										onClick={() => {
+											console.log("点击了");
+											text.record.checked1 = !text.record.checked1;
+										}}
+									/>
+									<div class="showt clearfix">
+										<div
+											class="bi"
+											style={
+												text.record.checked1 ? "z-index:999" : "z-index:998"
+											}
+										>
+											必修
+										</div>
+										<div class="xuan">选修</div>
+									</div>
+								</div>
+							</div>
+						);
+					},
+				},
+				{
+					title: "时长",
+					dataIndex: "cretime",
+					key: "cretime",
+					// width: 100,
+					align: "center",
+					className: "h",
+				},
+				{
+					title: "操作",
+					className: "h",
+					dataIndex: "opacation",
+					key: "opacation",
+					// width: 100,
+					align: "center",
+					scopedSlots: { customRender: "action" },
+					customRender: (text) => {
+						return (
+							<div class="opa">
+								<div class="opacation">
+									<span
+										onClick={() => {
+											console.log(text, "编辑text");
+										}}
+										style="color:#4EA6FF;margin-right:25px;cursor:pointer"
+									>
+										编辑
+									</span>
+									<span
+										style="color:#4EA6FF;cursor:pointer"
+										onClick={() => {
+											showDelete();
+											state.deleteID = text.record.id;
+										}}
+									>
+										删除
+									</span>
+								</div>
+							</div>
+						);
+					},
+				},
+			];
+			return columns;
+		};
 
-    //获取任务列表
-    const getTask = async () => {
-      let obj = {
-        projectId: state.projectId,
-      };
-      await api.getTask(obj).then((res) => {
-        console.log("22222", res.data.data.stageList);
+		//获取任务列表
+		const getTask = async () => {
+			let obj = {
+				projectId: state.projectId,
+			};
+			await api.getTask(obj).then((res) => {
+				console.log("22222", res.data.data.stageList);
 
-        if(state.onceChoice){
-          let data = res.data.data.stageList;
-          state.onceChoice = false;
-          let arraynew = []
-          for(let i=0;i<data.length;i++){
-            if(data[i].stageId!=='0'){
-              arraynew.push(data[i])
-            }
-          }
-          console.log(arraynew)
-          state.chooseStageId = Number(arraynew[arraynew.length-1].stageId);
-        }
+				if (state.onceChoice) {
+					let data = res.data.data.stageList;
+					state.onceChoice = false;
+					let arraynew = []
+					for (let i = 0; i < data.length; i++) {
+						if (data[i].stageId !== '0') {
+							arraynew.push(data[i])
+						}
+					}
+					console.log(arraynew)
+					if (arraynew.length !== 0) {
+						state.chooseStageId = Number(arraynew[arraynew.length - 1].stageId);
+					}
+				}
 
-        state.projectTitle = res.data.data.projectInfo.name;
-        state.picUrl = res.data.data.projectInfo.picUrl;
-        state.stageList = res.data.data.stageList;
-        getStageData(res.data.data.stageList);
-        updateStageChoosd();
-        
-      });
-    };
+				state.projectTitle = res.data.data.projectInfo.name;
+				state.picUrl = res.data.data.projectInfo.picUrl;
+				state.stageList = res.data.data.stageList;
+				getStageData(res.data.data.stageList);
+				updateStageChoosd();
 
-    //获取修改、删除id（投票)
-    const changeVData = (data) => {
-      console.log("获取修改、删除id投票", data);
-      state.voteId = data.voteId;
-      state.ballotId = data.ballotId;
-    };
-    //数据变化
-    const updateTableData = (data) => {
-      console.log("添加数据", data);
-      getTask(data);
-    };
+			});
+		};
 
-    //删除任务
-    const deleteTask = async () => {
-      await api.deleteTask({ projectTaskIds: state.deleteID });
-      //删除后更新索引
-    };
+		//获取修改、删除id（投票)
+		const changeVData = (data) => {
+			console.log("获取修改、删除id投票", data);
+			state.voteId = data.voteId;
+			state.ballotId = data.ballotId;
+		};
+		//数据变化
+		const updateTableData = (data) => {
+			console.log("添加数据", data);
+			getTask(data);
+		};
 
-    function updateStageChoosd() {
-      console.log("updateStageChoosd");
-      console.log(state.chooseStageId);
-      if (
-        state.chooseStageId &&
-        state.stageList.find((e) => e.stageId == state.chooseStageId)
-      ) {
-        getTableData(
-          state.stageList.find((e) => e.stageId == state.chooseStageId)
-            ?.taskList
-        );
-        return;
-      }
-      state.chooseStageId = "";
-      const arr = state.stageList.filter((e) => e.name);
-      arr && arr.length && (state.chooseStageId = arr[0].stageId);
-      if (!state.chooseStageId) {
-        getTableData(state.stageList[0].taskList);
-        return;
-      }
-      getTableData(
-        state.stageList.find((e) => e.stageId == state.chooseStageId)?.taskList
-      );
-    }
+		//删除任务
+		const deleteTask = async () => {
+			await api.deleteTask({ projectTaskIds: state.deleteID });
+			//删除后更新索引
+		};
 
-    const showChangeModal = () => {
-      if (state.selectRow.length == 0) {
-        message.destroy();
-        return message.warning("请选择要移动的任务");
-      } else {
-        state.visiblene = true;
-      }
-    };
-    const closeChangeModal = () => {
-      state.visiblene = false;
-    };
-    //移动任务到阶段
-    const moveTask = () => {
-      if (state.chooseStageId == state.removeStageId) {
-        message.destroy();
-        message.warning("选择的任务已在当前阶段");
-      } else if (state.removeStageId == null) {
-        message.destroy();
-        message.warning("请选择阶段");
-      } else {
-        {
-          let obj = {
-            stageId: state.removeStageId,
-            projectTaskId: state.selectRow,
-          };
-          apimove
-            .moveTask(obj)
-            .then((res) => {
-              console.log("移动成功", res);
-              message.destroy();
-              message.success("移动成功");
-              state.selectRow = []; //选择行
-              state.selectAll = 0; //0：未选择，1：全选，2：部分选择
-              console.log(state.removeStageId);
-              getTask();
+		function updateStageChoosd() {
+			console.log("updateStageChoosd");
+			console.log(state.chooseStageId);
+			if (
+				state.chooseStageId &&
+				state.stageList.find((e) => e.stageId == state.chooseStageId)
+			) {
+				getTableData(
+					state.stageList.find((e) => e.stageId == state.chooseStageId)
+						?.taskList
+				);
+				return;
+			}
+			state.chooseStageId = "";
+			const arr = state.stageList.filter((e) => e.name);
+			arr && arr.length && (state.chooseStageId = arr[0].stageId);
+			if (!state.chooseStageId) {
+				getTableData(state.stageList[0].taskList);
+				return;
+			}
+			getTableData(
+				state.stageList.find((e) => e.stageId == state.chooseStageId)?.taskList
+			);
+		}
 
-              localStorage.setItem("stageId", state.chooseStageId);
-            })
-            .catch((err) => {
-              console.log("移动失败", err);
-            });
-          state.visiblene = false;
-        }
-      }
-    };
-    //批量删除
-    const deleteTaskAll = () => {
-      let arr = state.selectRow;
-      console.log("选择的行信息", arr);
-      arr.map((value) => {
-        let obj = {
-          projectTaskIds: value,
-        };
-        api
-          .deleteTask(obj)
-          .then((res) => {
-            console.log(res);
-            message.destroy();
-            message.success("批量删除成功");
-            getTask();
-          })
-          .catch((err) => {
-            console.log(err);
-            message.destroy();
-            message.warning("批量删除失败");
-          });
-      });
-      state.deAll = false;
-    };
-    const onSelectChange = (selectedRowKeys) => {
-      console.log("selectedRowKeys changed: ", selectedRowKeys);
-      state.selectedRowKeys = selectedRowKeys;
-    };
-    // const getClientHeight = () => {
-    //   state.rightheight =
-    //     document.getElementsByClassName("addhead")[0].offsetHeight +
-    //     document.getElementsByClassName("mid")[0].offsetHeight +
-    //     document.getElementsByClassName("boom")[0].offsetHeight +
-    //     40 +
-    //     "px";
-    // };
+		const showChangeModal = () => {
+			if (state.selectRow.length == 0) {
+				message.destroy();
+				return message.warning("请选择要移动的任务");
+			} else {
+				state.visiblene = true;
+			}
+		};
+		const closeChangeModal = () => {
+			state.visiblene = false;
+		};
+		//移动任务到阶段
+		const moveTask = () => {
+			if (state.chooseStageId == state.removeStageId) {
+				message.destroy();
+				message.warning("选择的任务已在当前阶段");
+			} else if (state.removeStageId == null) {
+				message.destroy();
+				message.warning("请选择阶段");
+			} else {
+				{
+					let obj = {
+						stageId: state.removeStageId,
+						projectTaskId: state.selectRow,
+					};
+					apimove
+						.moveTask(obj)
+						.then((res) => {
+							console.log("移动成功", res);
+							message.destroy();
+							message.success("移动成功");
+							state.selectRow = []; //选择行
+							state.selectAll = 0; //0：未选择，1：全选，2：部分选择
+							console.log(state.removeStageId);
+							getTask();
 
-    const showModal1 = () => {
-      //关闭确认框
-      state.deleteModal = false;
-      deleteTask();
-      message.success("删除成功");
-      getTask();
-    };
-    //关闭添加阶段弹窗
-    const closeModal = () => {
-      state.stage = false;
-      state.valuesname = "";
-      state.valuesnotice = "";
-      state.updateStageID = null;
-    };
-    //显示添加阶段弹窗
-    const showModal = (element) => {
-      state.stage = true;
-      //关闭确认框
-      closeConfirm();
+							localStorage.setItem("stageId", state.chooseStageId);
+						})
+						.catch((err) => {
+							console.log("移动失败", err);
+						});
+					state.visiblene = false;
+				}
+			}
+		};
+		//批量删除
+		const deleteTaskAll = () => {
+			let arr = state.selectRow;
+			console.log("选择的行信息", arr);
+			arr.map((value) => {
+				let obj = {
+					projectTaskIds: value,
+				};
+				api
+					.deleteTask(obj)
+					.then((res) => {
+						console.log(res);
+						message.destroy();
+						message.success("批量删除成功");
+						getTask();
+					})
+					.catch((err) => {
+						console.log(err);
+						message.destroy();
+						message.warning("批量删除失败");
+					});
+			});
+			state.deAll = false;
+		};
+		const onSelectChange = (selectedRowKeys) => {
+			console.log("selectedRowKeys changed: ", selectedRowKeys);
+			state.selectedRowKeys = selectedRowKeys;
+		};
+		// const getClientHeight = () => {
+		//   state.rightheight =
+		//     document.getElementsByClassName("addhead")[0].offsetHeight +
+		//     document.getElementsByClassName("mid")[0].offsetHeight +
+		//     document.getElementsByClassName("boom")[0].offsetHeight +
+		//     40 +
+		//     "px";
+		// };
 
-      if (element) {
-        state.valuesname = element.tit;
-        state.valuesnotice = element.name;
-        state.updateStageID = element.id;
-      }
-    };
-    //添加阶段
-    const editStage = async () => {
-      if (!state.valuesname) {
-        message.destroy();
-        return message.warning("请输入阶段名称");
-      }
+		const showModal1 = () => {
+			//关闭确认框
+			state.deleteModal = false;
+			deleteTask();
+			message.success("删除成功");
+			getTask();
+		};
+		//关闭添加阶段弹窗
+		const closeModal = () => {
+			state.stage = false;
+			state.valuesname = "";
+			state.valuesnotice = "";
+			state.updateStageID = null;
+		};
+		//显示添加阶段弹窗
+		const showModal = (element) => {
+			state.stage = true;
+			//关闭确认框
+			closeConfirm();
 
-      state.addLoading = true;
-      if (state.updateStageID) {
-        let obj = {
-          name: state.valuesname,
-          projectId: state.projectId,
-          remark: state.valuesnotice,
-          stageId: state.updateStageID,
-        };
-        await apistage
-          .editStage(obj)
-          .then(async (res) => {
-            console.log("修改阶段成功", res);
-            state.valuesname = "";
-            state.valuesnotice = "";
-            closeModal();
-            state.updateStageID = null;
-            message.destroy();
-            message.success("修改阶段成功");
-            await getTask();
-            state.chooseStageId = res.data.data.stageId;
-            let final = state.level.find(
-              (item) => item.id == state.chooseStageId
-            );
-            getTableData(final.taskList);
-            state.addLoading = false;
-          })
-          .catch((err) => {
-            console.log("添加阶段失败", err);
-          });
-      } else {
-        let obj = {
-          name: state.valuesname,
-          projectId: state.projectId,
-          remark: state.valuesnotice,
-        };
-        await apistage
-          .editStage(obj)
-          .then(async (res) => {
-            console.log("添加阶段成功", res);
-            state.valuesname = "";
-            state.valuesnotice = "";
-            closeModal();
-            message.destroy();
-            message.success("添加阶段成功");
-            await getTask();
-            state.chooseStageId = res.data.data.stageId;
-            let final = state.level.find(
-              (item) => item.id == state.chooseStageId
-            );
-            getTableData(final.taskList);
-            state.addLoading = false;
-          })
-          .catch((err) => {
-            console.log("添加阶段失败", err);
-          });
-      }
-    };
+			if (element) {
+				state.valuesname = element.tit;
+				state.valuesnotice = element.name;
+				state.updateStageID = element.id;
+			}
+		};
+		//添加阶段
+		const editStage = async () => {
+			if (!state.valuesname) {
+				message.destroy();
+				return message.warning("请输入阶段名称");
+			}
 
-    //打开删除阶段弹窗
-    const showDeleteStage = (id) => {
-      state.deleteStageId = id;
-      state.deleteStageModal = true;
-      console.log(state.level);
-    };
-    //关闭删除阶段弹窗
-    const closeDeleteStage = () => {
-      state.deleteStageId = null;
-      state.deleteStageModal = false;
-    };
-    //删除阶段
-    const deleteStage = () => {
-      console.log("chapterId", state.deleteStageId);
-      let obj = {
-        stageId: state.deleteStageId,
-      };
-      apistage
-        .deleteStage(obj)
-        .then((res) => {
-          console.log("删除阶段成功", res);
-          message.success("删除阶段成功");
-          closeDeleteStage();
-          localStorage.setItem("stageId", "");
-          getTask();
-        })
-        .catch((err) => {
-          console.log("删除阶段失败", err);
-        });
-    };
-    onMounted(() => {
-      document.getElementsByTagName("main")[0].style.background =
-        "rgb(245, 247, 250,1)";
-      document.getElementsByTagName("main")[0].style.boxShadow = "none";
-      getTask();
-    });
-    onUpdated(() => {
-      // getTask();
-      // setTimeout(() => {
-      //   getTask();
-      // }, 500);
-    });
-    onUnmounted(() => {
-      document.getElementsByTagName("main")[0].style.background = "#ffffff";
-      document.getElementsByTagName("main")[0].style.boxShadow =
-        "0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
-    });
-    const showDrawerOnline = (id, eleId) => {
-      console.log("id, eleId", id, eleId);
-      state.addonlinevisible = true;
-      state.EditOnlineId = id;
-      state.projectTaskId = eleId;
-    };
-    const showDrawerFaceteach = (id, eleId) => {
-      state.addfaceteachvisible = true;
-      state.EditFaceId = id;
-      state.projectTaskId = eleId;
-    };
-    const showDrawerAddCase = (id, eleId) => {
-      state.addcasevisible = true;
-      state.EditCaseId = id;
-      state.projectTaskId = eleId;
-    };
-    const showDrawerAddHomework = (id, eleId) => {
-      console.log("id222222", id, eleId);
-      state.EditWorkId = id;
-      state.projectTaskId = eleId;
-      state.addhomeworkvisible = true;
-    };
-    const showDrawerAddTest = (id, eleId) => {
-      state.EditTestId = id;
-      state.projectTaskId = eleId;
-      state.addtestvisible = true;
-    };
-    const showDrawerAddLive = (id, eleId) => {
-      state.addlivevisible = true;
-      state.EditLiveId = id;
-      state.projectTaskId = eleId;
-    };
-    const showDrawerAddRef = (id, eleId) => {
-      state.EditRefId = id;
-      state.projectTaskId = eleId;
-      state.addrefvisible = true;
-    };
-    const showDrawerAddDiscuss = (id, eleId) => {
-      state.EditDiscussId = id;
-      state.projectTaskId = eleId;
-      state.adddiscussvisible = true;
-    };
-    const showDrawerAddActive = (id, eleId) => {
-      state.addactivevisible = true;
-      state.EditActiveId = id;
-      state.projectTaskId = eleId;
-    };
-    const showDrawerAddEval = (id, eleId) => {
-      state.addevalvisible = true;
-      state.EditEvalId = id;
-      state.projectTaskId = eleId;
-    };
-    const showDrawerAddInvist = (id, eleId) => {
-      state.EditInvistId = id;
-      state.addinvistvisible = true;
-      state.projectTaskId = eleId;
-    };
-    const showDrawerAddVote = (id, eleId) => {
-      state.addvotevisible = true;
-      state.EditVoteId = id;
-      state.projectTaskId = eleId;
-      // voteId = state.voteId;
-      // ballotId = state.ballotId;
-    };
-    const showConfirm = () => {
-      state.confirmModal = true;
-    };
-    const closeConfirm = () => {
-      state.confirmModal = false;
-    };
-    const showCancel = () => {
-      state.cancelModal = true;
-    };
-    const closeCancel = () => {
-      state.cancelModal = false;
-    };
-    const showDelete = (id) => {
-      state.deleteModal = true;
-      state.deleteID = id;
-    };
-    const closeDelete = () => {
-      state.deleteModal = false;
-    };
-    const changebgc = (id) => {
-      state.isActive = !state.isActive;
-      state.selectRow = []; //选择行
-      state.selectAll = 0; //0：未选择，1：全选，2：部分选择
-      console.log("state.level", id, state.level);
-      state.chooseStageId = id;
-      let final = state.level.find((item) => item.id == id);
-      getTableData(final.taskList);
-    };
+			state.addLoading = true;
+			if (state.updateStageID) {
+				let obj = {
+					name: state.valuesname,
+					projectId: state.projectId,
+					remark: state.valuesnotice,
+					stageId: state.updateStageID,
+				};
+				await apistage
+					.editStage(obj)
+					.then(async (res) => {
+						console.log("修改阶段成功", res);
+						state.valuesname = "";
+						state.valuesnotice = "";
+						closeModal();
+						state.updateStageID = null;
+						message.destroy();
+						message.success("修改阶段成功");
+						await getTask();
+						state.chooseStageId = res.data.data.stageId;
+						let final = state.level.find(
+							(item) => item.id == state.chooseStageId
+						);
+						getTableData(final.taskList);
+						state.addLoading = false;
+					})
+					.catch((err) => {
+						console.log("添加阶段失败", err);
+					});
+			} else {
+				let obj = {
+					name: state.valuesname,
+					projectId: state.projectId,
+					remark: state.valuesnotice,
+				};
+				await apistage
+					.editStage(obj)
+					.then(async (res) => {
+						console.log("添加阶段成功", res);
+						state.valuesname = "";
+						state.valuesnotice = "";
+						closeModal();
+						message.destroy();
+						message.success("添加阶段成功");
+						await getTask();
+						state.chooseStageId = res.data.data.stageId;
+						let final = state.level.find(
+							(item) => item.id == state.chooseStageId
+						);
+						getTableData(final.taskList);
+						state.addLoading = false;
+					})
+					.catch((err) => {
+						console.log("添加阶段失败", err);
+					});
+			}
+		};
 
-    // 删除所有阶段
-    const removeAllLevel = () => {
-      // state.cancelModal = false;
-      console.log(state.level);
-      let removeArr = state.level;
-      for (let i = 0; i < removeArr.length; i++) {
-        let obj = {
-          stageId: removeArr[i].id,
-        };
-        apistage
-          .deleteStage(obj)
-          .then((res) => {
-            console.log("删除阶段成功", res);
-            if (removeArr.length - 1 == i) {
-              message.destroy();
-              message.success("删除全部阶段成功");
-              closeDeleteStage();
-              localStorage.setItem("stageId", "");
-              getTask();
-              state.cancelModal = false;
-            }
-          })
-          .catch((err) => {
-            if (removeArr.length - 1 == i) {
-              console.log("删除阶段失败", err);
-              message.destroy();
-              message.success("删除全部阶段失败");
-              state.cancelModal = false;
-            }
-          });
-      }
-    };
+		//打开删除阶段弹窗
+		const showDeleteStage = (id) => {
+			state.deleteStageId = id;
+			state.deleteStageModal = true;
+			console.log(state.level);
+		};
+		//关闭删除阶段弹窗
+		const closeDeleteStage = () => {
+			state.deleteStageId = null;
+			state.deleteStageModal = false;
+		};
+		//删除阶段
+		const deleteStage = () => {
+			console.log("chapterId", state.deleteStageId);
+			let obj = {
+				stageId: state.deleteStageId,
+			};
+			apistage
+				.deleteStage(obj)
+				.then((res) => {
+					console.log("删除阶段成功", res);
+					message.success("删除阶段成功");
+					closeDeleteStage();
+					localStorage.setItem("stageId", "");
+					getTask();
+				})
+				.catch((err) => {
+					console.log("删除阶段失败", err);
+				});
+		};
+		onMounted(() => {
+			document.getElementsByTagName("main")[0].style.background =
+				"rgb(245, 247, 250,1)";
+			document.getElementsByTagName("main")[0].style.boxShadow = "none";
+			getTask();
+		});
+		onUpdated(() => {
+			// getTask();
+			// setTimeout(() => {
+			//   getTask();
+			// }, 500);
+		});
+		onUnmounted(() => {
+			document.getElementsByTagName("main")[0].style.background = "#ffffff";
+			document.getElementsByTagName("main")[0].style.boxShadow =
+				"0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
+		});
+		const showDrawerOnline = (id, eleId) => {
+			console.log("id, eleId", id, eleId);
+			state.addonlinevisible = true;
+			state.EditOnlineId = id;
+			state.projectTaskId = eleId;
+		};
+		const showDrawerFaceteach = (id, eleId) => {
+			state.addfaceteachvisible = true;
+			state.EditFaceId = id;
+			state.projectTaskId = eleId;
+		};
+		const showDrawerAddCase = (id, eleId) => {
+			state.addcasevisible = true;
+			state.EditCaseId = id;
+			state.projectTaskId = eleId;
+		};
+		const showDrawerAddHomework = (id, eleId) => {
+			console.log("id222222", id, eleId);
+			state.EditWorkId = id;
+			state.projectTaskId = eleId;
+			state.addhomeworkvisible = true;
+		};
+		const showDrawerAddTest = (id, eleId) => {
+			state.EditTestId = id;
+			state.projectTaskId = eleId;
+			state.addtestvisible = true;
+		};
+		const showDrawerAddLive = (id, eleId) => {
+			state.addlivevisible = true;
+			state.EditLiveId = id;
+			state.projectTaskId = eleId;
+		};
+		const showDrawerAddRef = (id, eleId) => {
+			state.EditRefId = id;
+			state.projectTaskId = eleId;
+			state.addrefvisible = true;
+		};
+		const showDrawerAddDiscuss = (id, eleId) => {
+			state.EditDiscussId = id;
+			state.projectTaskId = eleId;
+			state.adddiscussvisible = true;
+		};
+		const showDrawerAddActive = (id, eleId) => {
+			state.addactivevisible = true;
+			state.EditActiveId = id;
+			state.projectTaskId = eleId;
+		};
+		const showDrawerAddEval = (id, eleId) => {
+			state.addevalvisible = true;
+			state.EditEvalId = id;
+			state.projectTaskId = eleId;
+		};
+		const showDrawerAddInvist = (id, eleId) => {
+			state.EditInvistId = id;
+			state.addinvistvisible = true;
+			state.projectTaskId = eleId;
+		};
+		const showDrawerAddVote = (id, eleId) => {
+			state.addvotevisible = true;
+			state.EditVoteId = id;
+			state.projectTaskId = eleId;
+			// voteId = state.voteId;
+			// ballotId = state.ballotId;
+		};
+		const showConfirm = () => {
+			state.confirmModal = true;
+		};
+		const closeConfirm = () => {
+			state.confirmModal = false;
+		};
+		const showCancel = () => {
+			state.cancelModal = true;
+		};
+		const closeCancel = () => {
+			state.cancelModal = false;
+		};
+		const showDelete = (id) => {
+			state.deleteModal = true;
+			state.deleteID = id;
+		};
+		const closeDelete = () => {
+			state.deleteModal = false;
+		};
+		const changebgc = (id) => {
+			state.isActive = !state.isActive;
+			state.selectRow = []; //选择行
+			state.selectAll = 0; //0：未选择，1：全选，2：部分选择
+			console.log("state.level", id, state.level);
+			state.chooseStageId = id;
+			let final = state.level.find((item) => item.id == id);
+			getTableData(final.taskList);
+		};
 
-    //选择单个任务
-    const changeRow = (e) => {
-      //selectRow:已经选择的任务的id数组
-      let arr = state.selectRow;
-      if (e.target.checked) {
-        arr.push(e.target.id);
-      } else {
-        arr.map((value, index) => {
-          if (value == e.target.id) {
-            arr.splice(index, 1);
-          }
-        });
-      }
-      state.selectRow = arr;
-      console.log(state.selectRow, "xuanzhong");
-      console.log(Object.prototype.toString.call(state.selectRow));
-      //判断是否是全部选择或者是全部未选择来修改selectAll框的样式
-      if (arr.length !== 0) {
-        if (arr.length === state.tableData.length) {
-          state.selectAll = 1;
-        } else {
-          state.selectAll = 2;
-        }
-      } else {
-        state.selectAll = 0;
-      }
-      console.log("state.selectRow", state.selectRow, state.selectAll);
-    };
-    //全选任务或全不选任务
-    const selectRowAll = () => {
-      let arr = state.tableData;
-      let array = [];
-      if (state.selectAll === 0 || state.selectAll === 2) {
-        arr.map((value) => {
-          // console.log("value", value, index);
-          value.checked = true;
-          array.push(value.id);
-          // if (value == e.target.id) {
-          //   arr.splice(index, 1);
-          // }
-          state.selectAll = 1;
-        });
-      } else {
-        array = [];
-        arr.map((value) => {
-          // console.log("value", value, index);
-          value.checked = false;
-          state.selectAll = 0;
-        });
-      }
-      state.tableData = arr;
-      state.selectRow = array;
-    };
-    //修改任务的课程类型 id为任务id
-    const changeCourseType = (ele) => {
-      console.log("任务id", ele.id);
-      console.log("flag", ele.checked1);
-      let obj = {
-        courseId: ele.courseId,
-        duration: ele.cretime == "-" ? 0 : ele.cretime,
-        flag: ele.checked1,
-        name: ele.creater,
-        projectId: ele.projectId,
-        projectTaskId: ele.id,
-        stageId: ele.stageId,
-        type: ele.type,
-      };
-      api
-        .addTask(obj)
-        .then((res) => {
-          console.log(`修改状态成功${res.data}`);
-          message.destroy();
-          message.success("修改成功");
-        })
-        .catch((err) => {
-          console.log(`修改状态失败${err.data}`);
-          message.destroy();
-          message.warning("修改失败");
-        });
-    };
-    //编辑的按钮
-    const decideType = (type, id, eleId) => {
-      state.edit = true;
-      console.log(type, id, eleId);
-      if (type == "外链") {
-        showDrawerAddRef(id, eleId);
-      } else if (type == "直播") {
-        showDrawerAddLive(id, eleId);
-      } else if (type == "测评") {
-        showDrawerAddEval(id, eleId);
-      } else if (type == "评估") {
-        showDrawerAddInvist(id, eleId);
-      } else if (type == "投票") {
-        showDrawerAddVote(id, eleId);
-      } else if (type == "讨论") {
-        showDrawerAddDiscuss(id, eleId);
-      } else if (type == "活动") {
-        showDrawerAddActive(id, eleId);
-      } else if (type == "作业") {
-        showDrawerAddHomework(id, eleId);
-      } else if (type == "考试") {
-        showDrawerAddTest(id, eleId);
-      } else if (type == "在线") {
-        showDrawerOnline(id, eleId);
-      } else if (type == "面授") {
-        showDrawerFaceteach(id, eleId);
-      } else if (type == "案例") {
-        showDrawerAddCase(id, eleId);
-      }
-    };
-    const showdeAll = () => {
-      if (state.selectRow.length == 0) {
-        message.destroy();
-        return message.warning("请选择要删除的任务");
-      } else {
-        state.deAll = true;
-      }
-    };
-    const closeDeAll = () => {
-      state.deAll = false;
-    };
-    const handleChangeStage = (value, option) => {
-      console.log("阶段改变", value, option);
-      state.removeStageId = option.id;
-    };
+		// 删除所有阶段
+		const removeAllLevel = () => {
+			// state.cancelModal = false;
+			console.log(state.level);
+			let removeArr = state.level;
+			for (let i = 0; i < removeArr.length; i++) {
+				let obj = {
+					stageId: removeArr[i].id,
+				};
+				apistage
+					.deleteStage(obj)
+					.then((res) => {
+						console.log("删除阶段成功", res);
+						if (removeArr.length - 1 == i) {
+							message.destroy();
+							message.success("删除全部阶段成功");
+							closeDeleteStage();
+							localStorage.setItem("stageId", "");
+							getTask();
+							state.cancelModal = false;
+						}
+					})
+					.catch((err) => {
+						if (removeArr.length - 1 == i) {
+							console.log("删除阶段失败", err);
+							message.destroy();
+							message.success("删除全部阶段失败");
+							state.cancelModal = false;
+						}
+					});
+			}
+		};
 
-    //显示切换模式抽屉
-    const showModeVisible = () => {
-      state.unlockModeVisible = true;
-    };
+		//选择单个任务
+		const changeRow = (e) => {
+			//selectRow:已经选择的任务的id数组
+			let arr = state.selectRow;
+			if (e.target.checked) {
+				arr.push(e.target.id);
+			} else {
+				arr.map((value, index) => {
+					if (value == e.target.id) {
+						arr.splice(index, 1);
+					}
+				});
+			}
+			state.selectRow = arr;
+			console.log(state.selectRow, "xuanzhong");
+			console.log(Object.prototype.toString.call(state.selectRow));
+			//判断是否是全部选择或者是全部未选择来修改selectAll框的样式
+			if (arr.length !== 0) {
+				if (arr.length === state.tableData.length) {
+					state.selectAll = 1;
+				} else {
+					state.selectAll = 2;
+				}
+			} else {
+				state.selectAll = 0;
+			}
+			console.log("state.selectRow", state.selectRow, state.selectAll);
+		};
+		//全选任务或全不选任务
+		const selectRowAll = () => {
+			let arr = state.tableData;
+			let array = [];
+			if (state.selectAll === 0 || state.selectAll === 2) {
+				arr.map((value) => {
+					// console.log("value", value, index);
+					value.checked = true;
+					array.push(value.id);
+					// if (value == e.target.id) {
+					//   arr.splice(index, 1);
+					// }
+					state.selectAll = 1;
+				});
+			} else {
+				array = [];
+				arr.map((value) => {
+					// console.log("value", value, index);
+					value.checked = false;
+					state.selectAll = 0;
+				});
+			}
+			state.tableData = arr;
+			state.selectRow = array;
+		};
+		//修改任务的课程类型 id为任务id
+		const changeCourseType = (ele) => {
+			console.log("任务id", ele.id);
+			console.log("flag", ele.checked1);
+			let obj = {
+				courseId: ele.courseId,
+				duration: ele.cretime == "-" ? 0 : ele.cretime,
+				flag: ele.checked1,
+				name: ele.creater,
+				projectId: ele.projectId,
+				projectTaskId: ele.id,
+				stageId: ele.stageId,
+				type: ele.type,
+			};
+			api
+				.addTask(obj)
+				.then((res) => {
+					console.log(`修改状态成功${res.data}`);
+					message.destroy();
+					message.success("修改成功");
+				})
+				.catch((err) => {
+					console.log(`修改状态失败${err.data}`);
+					message.destroy();
+					message.warning("修改失败");
+				});
+		};
+		//编辑的按钮
+		const decideType = (type, id, eleId) => {
+			state.edit = true;
+			console.log(type, id, eleId);
+			if (type == "外链") {
+				showDrawerAddRef(id, eleId);
+			} else if (type == "直播") {
+				showDrawerAddLive(id, eleId);
+			} else if (type == "测评") {
+				showDrawerAddEval(id, eleId);
+			} else if (type == "评估") {
+				showDrawerAddInvist(id, eleId);
+			} else if (type == "投票") {
+				showDrawerAddVote(id, eleId);
+			} else if (type == "讨论") {
+				showDrawerAddDiscuss(id, eleId);
+			} else if (type == "活动") {
+				showDrawerAddActive(id, eleId);
+			} else if (type == "作业") {
+				showDrawerAddHomework(id, eleId);
+			} else if (type == "考试") {
+				showDrawerAddTest(id, eleId);
+			} else if (type == "在线") {
+				showDrawerOnline(id, eleId);
+			} else if (type == "面授") {
+				showDrawerFaceteach(id, eleId);
+			} else if (type == "案例") {
+				showDrawerAddCase(id, eleId);
+			}
+		};
+		const showdeAll = () => {
+			if (state.selectRow.length == 0) {
+				message.destroy();
+				return message.warning("请选择要删除的任务");
+			} else {
+				state.deAll = true;
+			}
+		};
+		const closeDeAll = () => {
+			state.deAll = false;
+		};
+		const handleChangeStage = (value, option) => {
+			console.log("阶段改变", value, option);
+			state.removeStageId = option.id;
+		};
 
-    //暂存
-    const temporaryStorage = () => {
-      message.success("暂存成功");
-    };
-    //确定
-    const submitStorage = () => {
-      router.push({
-        path: "/leveladd",
-      });
-    };
-    //取消
-    const cancelStorage = () => {
-      router.push({
-        path: "/leveladd",
-      });
-    };
-    return {
-      ...toRefs(state),
-      selectProjectName,
-      selectProjectName2,
-      tableDataFunc,
-      showModal,
-      closeModal,
-      afterVisibleChange,
-      onSelectChange,
-      showDrawerOnline,
-      showDrawerFaceteach,
-      showDrawerAddCase,
-      showDrawerAddHomework,
-      showDrawerAddTest,
-      showDrawerAddLive,
-      showDrawerAddRef,
-      showDrawerAddDiscuss,
-      showDrawerAddActive,
-      showDrawerAddEval,
-      showDrawerAddInvist,
-      showDrawerAddVote,
-      showConfirm,
-      closeConfirm,
-      showCancel,
-      showModal1,
-      closeCancel,
-      showDelete,
-      closeDelete,
-      showChangeModal,
-      closeChangeModal,
-      changebgc,
-      getTask,
-      getTableData,
-      deleteTask,
-      editStage,
-      updateTableData,
-      changeVData,
-      changeRow,
-      selectRowAll,
-      changeCourseType,
-      getStageData,
-      moveTask,
-      deleteTaskAll,
-      decideType,
-      showdeAll,
-      closeDeAll,
-      handleChangeStage,
+		//显示切换模式抽屉
+		const showModeVisible = () => {
+			state.unlockModeVisible = true;
+		};
 
-      showDeleteStage,
-      closeDeleteStage,
-      deleteStage,
+		//暂存
+		const temporaryStorage = () => {
+			message.success("暂存成功");
+		};
+		//确定
+		const submitStorage = () => {
+			router.push({
+				path: "/leveladd",
+			});
+		};
+		//取消
+		const cancelStorage = () => {
+			router.push({
+				path: "/leveladd",
+			});
+		};
+		return {
+			...toRefs(state),
+			selectProjectName,
+			selectProjectName2,
+			tableDataFunc,
+			showModal,
+			closeModal,
+			afterVisibleChange,
+			onSelectChange,
+			showDrawerOnline,
+			showDrawerFaceteach,
+			showDrawerAddCase,
+			showDrawerAddHomework,
+			showDrawerAddTest,
+			showDrawerAddLive,
+			showDrawerAddRef,
+			showDrawerAddDiscuss,
+			showDrawerAddActive,
+			showDrawerAddEval,
+			showDrawerAddInvist,
+			showDrawerAddVote,
+			showConfirm,
+			closeConfirm,
+			showCancel,
+			showModal1,
+			closeCancel,
+			showDelete,
+			closeDelete,
+			showChangeModal,
+			closeChangeModal,
+			changebgc,
+			getTask,
+			getTableData,
+			deleteTask,
+			editStage,
+			updateTableData,
+			changeVData,
+			changeRow,
+			selectRowAll,
+			changeCourseType,
+			getStageData,
+			moveTask,
+			deleteTaskAll,
+			decideType,
+			showdeAll,
+			closeDeAll,
+			handleChangeStage,
 
-      showModeVisible,
+			showDeleteStage,
+			closeDeleteStage,
+			deleteStage,
 
-      temporaryStorage,
-      submitStorage,
-      cancelStorage,
-      removeAllLevel,
-    };
-  },
+			showModeVisible,
+
+			temporaryStorage,
+			submitStorage,
+			cancelStorage,
+			removeAllLevel,
+		};
+	},
 };
 </script>
 
 <style lang="scss">
 .ConfirmModal {
-  .ant-modal {
-    width: 424px !important;
-    height: 258px !important;
+	.ant-modal {
+		width: 424px !important;
+		height: 258px !important;
 
-    .ant-modal-content {
-      width: 424px !important;
-      height: 258px !important;
+		.ant-modal-content {
+			width: 424px !important;
+			height: 258px !important;
 
-      .ant-modal-body {
-        width: 424px !important;
-        height: 258px !important;
-        padding: 0 !important;
+			.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;
+				.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;
 
-          .del_header {
-            position: absolute;
-            width: calc(100%);
-            height: 40px;
-            background: linear-gradient(
-              rgba(78, 166, 255, 0.2) 0%,
-              rgba(78, 166, 255, 0) 100%
-            );
-          }
+					.del_header {
+						position: absolute;
+						width: calc(100%);
+						height: 40px;
+						background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
+								rgba(78, 166, 255, 0) 100%);
+					}
 
-          .del_main {
-            width: 100%;
-            position: relative;
+					.del_main {
+						width: 100%;
+						position: relative;
 
-            .header {
-              display: flex;
-              align-items: center;
-              padding-top: 20px;
-              padding-left: 26px;
-              font-size: 16px;
+						.header {
+							display: flex;
+							align-items: center;
+							padding-top: 20px;
+							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%;
-              }
+							.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%;
-              }
-            }
+							.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;
-              position: relative;
+						.body {
+							width: 100%;
+							margin: 34px auto 56px auto;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							flex-direction: column;
+							position: relative;
 
-              .back {
-                position: absolute;
-                top: 30px;
-                font-size: 12px;
-                font-weight: 400;
-                color: #666666;
-              }
-            }
+							.back {
+								position: absolute;
+								top: 30px;
+								font-size: 12px;
+								font-weight: 400;
+								color: #666666;
+							}
+						}
 
-            .del_btnbox {
-              display: flex;
-              margin: 30px auto;
-              justify-content: center;
+						.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;
+							.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;
+								flex-shrink: 0;
+								cursor: pointer;
 
-                .btnText {
-                  font-size: 14px;
-                  font-weight: 400;
-                  line-height: 40px;
-                }
-              }
+								.btnText {
+									font-size: 14px;
+									font-weight: 400;
+									line-height: 40px;
+								}
+							}
 
-              .btn1 {
-                border: 1px solid rgba(64, 158, 255, 1);
-                color: #4ea6ff;
-                margin-right: 14px;
-              }
+							.btn1 {
+								border: 1px solid rgba(64, 158, 255, 1);
+								color: #4ea6ff;
+								margin-right: 14px;
+							}
 
-              .btn2 {
-                background-color: #4ea6ff;
-                color: #ffffff;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+							.btn2 {
+								background-color: #4ea6ff;
+								color: #ffffff;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
 }
 
 .addstage {
-  .ant-modal {
-    .ant-modal-body {
-      padding: 0 !important;
+	.ant-modal {
+		.ant-modal-body {
+			padding: 0 !important;
 
-      .modalHeader {
-        background: linear-gradient(
-          0deg,
-          rgba(78, 166, 255, 0) 0%,
-          rgba(78, 166, 255, 0.2) 100%
-        );
-      }
+			.modalHeader {
+				background: linear-gradient(0deg,
+						rgba(78, 166, 255, 0) 0%,
+						rgba(78, 166, 255, 0.2) 100%);
+			}
 
-      .modalMain {
-        .ant-input-textarea-show-count {
-          position: relative;
-          height: 88px;
-        }
+			.modalMain {
+				.ant-input-textarea-show-count {
+					position: relative;
+					height: 88px;
+				}
 
-        .ant-input-textarea-show-count::after {
-          position: absolute;
-          right: 10px;
-          bottom: 5px;
-        }
-      }
-    }
-  }
+				.ant-input-textarea-show-count::after {
+					position: absolute;
+					right: 10px;
+					bottom: 5px;
+				}
+			}
+		}
+	}
 
-  .name {
-    width: 78%;
-    display: flex;
-    margin-top: 20px;
-    align-items: center;
+	.name {
+		width: 78%;
+		display: flex;
+		margin-top: 20px;
+		align-items: center;
 
-    .namebox {
-      width: 120px;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      flex-shrink: 0;
+		.namebox {
+			width: 120px;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			flex-shrink: 0;
 
-      .nameimg {
-        width: 10px;
-        height: 10px;
-      }
-    }
+			.nameimg {
+				width: 10px;
+				height: 10px;
+			}
+		}
 
-    .d {
-      margin-top: 8px;
-      font-size: 25px;
-      color: #ff4e4e;
-    }
+		.d {
+			margin-top: 8px;
+			font-size: 25px;
+			color: #ff4e4e;
+		}
 
-    .box {
-      position: relative;
-      margin-left: 14px;
+		.box {
+			position: relative;
+			margin-left: 14px;
 
-      .box1 {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 50px;
-        margin-left: -25px;
-        margin-top: -5px;
-        border-top: 2px solid rgba(78, 166, 255, 1);
-      }
+			.box1 {
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				width: 50px;
+				margin-left: -25px;
+				margin-top: -5px;
+				border-top: 2px solid rgba(78, 166, 255, 1);
+			}
 
-      .box2 {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        height: 50px;
-        margin-top: -25px;
-        border-left: 2px solid rgba(78, 166, 255, 1);
-      }
-    }
+			.box2 {
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				height: 50px;
+				margin-top: -25px;
+				border-left: 2px solid rgba(78, 166, 255, 1);
+			}
+		}
 
-    .inname {
-      color: #000000;
-      font-size: 14px;
-      margin-left: 7px;
-    }
+		.inname {
+			color: #000000;
+			font-size: 14px;
+			margin-left: 7px;
+		}
 
-    .in {
-      margin-left: 14px;
-      flex: 1;
+		.in {
+			margin-left: 14px;
+			flex: 1;
 
-      .ant-input-affix-wrapper {
-        width: 384px;
-        border-radius: 8px;
-      }
+			.ant-input-affix-wrapper {
+				width: 384px;
+				border-radius: 8px;
+			}
 
-      .ant-input {
-        border-radius: 8px;
-        height: 30px;
-      }
-    }
-  }
+			.ant-input {
+				border-radius: 8px;
+				height: 30px;
+			}
+		}
+	}
 }
 
 .moveModal {
-  .ant-modal {
-    width: 549px !important;
-    height: 245px !important;
+	.ant-modal {
+		width: 549px !important;
+		height: 245px !important;
 
-    .ant-modal-content {
-      width: 549px !important;
-      height: 245px !important;
+		.ant-modal-content {
+			width: 549px !important;
+			height: 245px !important;
 
-      .ant-modal-body {
-        padding: 0 !important;
-        width: 549px !important;
-        height: 245px !important;
+			.ant-modal-body {
+				padding: 0 !important;
+				width: 549px !important;
+				height: 245px !important;
 
-        .con {
-          width: 100%;
-          height: 100%;
+				.con {
+					width: 100%;
+					height: 100%;
 
-          .header {
-            width: 100%;
-            display: flex;
-            height: 68px;
-            position: relative;
-            justify-content: center;
+					.header {
+						width: 100%;
+						display: flex;
+						height: 68px;
+						position: relative;
+						justify-content: center;
 
-            background: linear-gradient(
-              rgba(78, 166, 255, 0.2) 0%,
-              rgba(78, 166, 255, 0) 100%
-            );
+						background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
+								rgba(78, 166, 255, 0) 100%);
 
-            .inhe {
-              width: 80%;
-              height: 100%;
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
+						.inhe {
+							width: 80%;
+							height: 100%;
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
 
-              .mod {
-                left: 30px;
-                top: 27px;
-                position: absolute;
-                width: 18px;
-                height: 17px;
-                background-image: url(../../assets/images/leveladd/mod.png);
-              }
+							.mod {
+								left: 30px;
+								top: 27px;
+								position: absolute;
+								width: 18px;
+								height: 17px;
+								background-image: url(../../assets/images/leveladd/mod.png);
+							}
 
-              .tz {
-                color: #000000;
-                font-weight: 400;
-                font-size: 16px;
-              }
+							.tz {
+								color: #000000;
+								font-weight: 400;
+								font-size: 16px;
+							}
 
-              .mg {
-                width: 20px;
-                height: 20px;
-                background-image: url(../../assets/images/basicinfo/close22.png);
-                background-size: 100% 100%;
-                cursor: pointer;
-              }
-            }
-          }
+							.mg {
+								width: 20px;
+								height: 20px;
+								background-image: url(../../assets/images/basicinfo/close22.png);
+								background-size: 100% 100%;
+								cursor: pointer;
+							}
+						}
+					}
 
-          .mid {
-            width: 100%;
-            display: flex;
-            height: 100%;
-            justify-content: center;
+					.mid {
+						width: 100%;
+						display: flex;
+						height: 100%;
+						justify-content: center;
 
-            .inher {
-              width: 80%;
-              height: 100%;
+						.inher {
+							width: 80%;
+							height: 100%;
 
-              .cur {
-                color: #6f6f6f;
-                font-size: 14px;
-              }
+							.cur {
+								color: #6f6f6f;
+								font-size: 14px;
+							}
 
-              .select {
-                margin-top: 10px;
-              }
+							.select {
+								margin-top: 10px;
+							}
 
-              .btn {
-                width: 100%;
-                display: flex;
-                justify-content: center;
-                margin-top: 30px;
+							.btn {
+								width: 100%;
+								display: flex;
+								justify-content: center;
+								margin-top: 30px;
 
-                .sameb {
-                  width: 100px;
-                  height: 40px;
-                  font-size: 14px;
+								.sameb {
+									width: 100px;
+									height: 40px;
+									font-size: 14px;
 
-                  border-radius: 8px;
-                }
+									border-radius: 8px;
+								}
 
-                .btn1 {
-                  color: #4ea6ff;
-                  background: #ffffff;
-                  border: 1px solid #4ea6ff;
-                }
+								.btn1 {
+									color: #4ea6ff;
+									background: #ffffff;
+									border: 1px solid #4ea6ff;
+								}
 
-                .btn2 {
-                  margin-left: 16px;
-                  border: 0;
-                  color: #ffffff;
-                  background: #4ea6ff;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+								.btn2 {
+									margin-left: 16px;
+									border: 0;
+									color: #ffffff;
+									background: #4ea6ff;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
 }
 
 .taskadd {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  min-width: 933px;
-  background-color: rgba(245, 247, 250, 1);
-
-  .left {
-    margin-right: 20px;
-    width: 208px;
-    background: #ffffff;
-    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
-    display: flex;
-    justify-content: center;
-
-    .leftmain {
-      margin-top: 20px;
-      min-height: 800px;
-      .tit {
-        margin-left: 20px;
-        font-size: 18px;
-        color: #363636;
-      }
-
-      .btn {
-        margin-top: 20px;
-        height: 38px;
-        background: #fff6e8;
-        border-radius: 8px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        cursor: pointer;
-
-        .search {
-          background-size: 100%;
-        }
-
-        .btnText {
-          font-size: 14px;
-          font-weight: 400;
-          color: #ffb64e;
-          margin-top: 4px;
-          margin-left: 5px;
-        }
-      }
-
-      .btn3 {
-        width: 171px;
-        margin-right: 0px;
-
-        .search {
-          width: 17px;
-          height: 18px;
-          background-image: url("../../assets/images/leveladd/add.png");
-          background-size: 100% 100%;
-        }
-      }
-
-      .maincon {
-        margin-top: 17px;
-        width: 208px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .ghost {
-          opacity: 0 !important;
-        }
-
-        .items {
-          width: 171px;
-          background: rgba(255, 182, 78, 0.1);
-          border: 1px solid #ffb64e;
-          opacity: 0.45;
-          border-radius: 8px;
-          margin-bottom: 16px;
-          align-items: center;
-          padding: 16px;
-          opacity: 0.5;
-          cursor: pointer;
-
-          .items1 {
-            margin-bottom: 12px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .boxs_left {
-              display: flex;
-              align-items: center;
-
-              .script {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                width: 56px;
-                height: 24px;
-                background: #ffb64e;
-                border-radius: 6px;
-                margin-right: 12px;
-                white-space: nowrap;
-              }
-
-              .imgIcon {
-                width: 16px;
-                height: 16px;
-                background-image: url(@/assets/images/leveladd/edit1.png);
-                background-size: 100% 100%;
-              }
-            }
-
-            .boxs_right {
-              .imgIcon {
-                width: 16px;
-                height: 16px;
-                background-image: url(@/assets/images/leveladd/delete.png);
-                background-size: 100% 100%;
-              }
-            }
-          }
-
-          .items2 {
-            .nname {
-              width: 140px;
-              font-weight: bold;
-
-              overflow: hidden;
-              text-overflow: ellipsis;
-              -webkit-line-clamp: 2;
-              display: -webkit-box;
-              -webkit-box-orient: vertical;
-            }
-          }
-        }
-
-        .active {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  .right {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-
-    .addhead {
-      width: 100%;
-      background-color: #fff;
-      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
-      display: flex;
-      align-items: center;
-      position: relative;
-
-      .filt {
-        margin: 16px 30px 16px 22px;
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-        align-items: center;
-        flex-wrap: wrap;
-
-        .le {
-          display: flex;
-          align-items: center;
-
-          .leftimg {
-            width: 151px;
-            height: 100px;
-            border: 10px solid #e7f2ff;
-            border-radius: 8px;
-            margin-left: 20px;
-
-            .img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-
-          .imgfor {
-            margin-left: 32px;
-
-            .forz {
-              color: #363636;
-              font-size: 16px;
-            }
-
-            .fort {
-              color: #878b92;
-              font-size: 14px;
-              margin-top: 20px;
-            }
-          }
-        }
-
-        .rightt {
-          height: 100%;
-          display: flex;
-          align-items: center;
-
-          .select {
-            display: flex;
-            align-items: center;
-            white-space: nowrap;
-            margin-right: 56px;
-
-            .inputbox {
-              display: flex;
-              align-items: center;
-              border: 1px solid #c7cbd2;
-              width: 238px;
-              height: 40px;
-              border-radius: 8px;
-
-              input {
-                border: none;
-                outline: none;
-              }
-
-              .bottonbox {
-                width: 100px;
-                height: 40px;
-                background: #4ea6ff;
-                border-radius: 8px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                cursor: pointer;
-                flex-shrink: 0;
-
-                .btnText {
-                  font-size: 14px;
-                  font-weight: 400;
-                  color: #ffffff;
-                  line-height: 36px;
-                  margin-left: 5px;
-                }
-              }
-            }
-          }
-
-          .line {
-            height: 60px;
-            width: 1px;
-            background-color: #e8effa;
-            margin-right: 18px;
-          }
-
-          .img2 {
-            width: 42px;
-            height: 42px;
-            margin-right: 18px;
-          }
-
-          .pub {
-            color: #57c887;
-            font-size: 14px;
-            margin-top: 5px;
-            margin-right: 30px;
-            cursor: pointer;
-            white-space: nowrap;
-          }
-
-          @media screen and (max-width: 1050px) {
-            .pub {
-              margin-right: 10px;
-            }
-            .line {
-              margin-right: 10px;
-            }
-          }
-
-          .return {
-            color: #4ea6ff;
-            font-size: 14px;
-            margin-top: 13px;
-            margin-right: 20px;
-            white-space: nowrap;
-          }
-
-          .role {
-            display: flex;
-            align-items: center;
-            font-size: 16px;
-            font-weight: 400;
-            color: #333330;
-            line-height: 36px;
-            cursor: pointer;
-            position: relative;
-            margin-right: 20px;
-
-            .roleArrow {
-              width: 13px;
-              height: 7px;
-              margin-left: 8px;
-              background-image: url(../../assets/images/navtop/down.png);
-              background-size: 100%;
-            }
-
-            .roleItems {
-              width: 109px;
-              height: 90px;
-              padding-top: 10px;
-              background: #ffffff;
-              box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
-              position: absolute;
-              top: 35px;
-              right: 0px;
-              text-align: center;
-              display: none;
-              z-index: 100;
-            }
-
-            .roleItem {
-              font-size: 14px;
-              font-weight: 400;
-              color: rgba(79, 81, 86, 1);
-              line-height: 36px;
-            }
-
-            .roleItem:hover {
-              color: #4ea6ff;
-            }
-          }
-
-          .role:hover .roleItems {
-            display: block;
-          }
-
-          .role:hover .roleArrow {
-            background-image: url(../../assets/images/navtop/up.png);
-          }
-        }
-      }
-    }
-
-    .mid {
-      width: 100%;
-      margin-top: 20px;
-      margin-bottom: 20px;
-      background-color: #fff;
-      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-
-      .item {
-        height: 115px;
-        display: flex;
-        align-items: center;
-
-        .itcon {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          height: 100%;
-          width: 100%;
-          margin-left: 38px;
-          margin-right: 38px;
-
-          .img {
-            cursor: pointer;
-          }
-
-          .text {
-            font-size: 16px;
-            color: #363636;
-            margin-top: 5px;
-            white-space: nowrap;
-          }
-        }
-
-        .lin {
-          width: 1px;
-          height: 60%;
-          background-color: #e8effa;
-        }
-
-        .no {
-          display: none;
-        }
-      }
-    }
-
-    .boom {
-      width: 100%;
-      flex: 1;
-      background-color: #fff;
-      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
-      display: flex;
-      justify-content: center;
-
-      .boomcen {
-        width: 95%;
-
-        .onerow {
-          width: 100%;
-          display: flex;
-          height: 40px;
-          position: relative;
-          margin-top: 20px;
-
-          .taskmain {
-            font-size: 18px;
-            color: #000000;
-            margin-top: 10px;
-          }
-
-          .btn {
-            position: absolute;
-            top: 0;
-            right: 130px;
-            background-color: #4ea6ff;
-            width: 130px;
-            height: 40px;
-            border-radius: 8px;
-            border: 1px solid #4ea6ff;
-            color: #ffffff;
-            cursor: pointer;
-          }
-
-          .edit {
-            position: absolute;
-            right: 0;
-            top: 0;
-            color: #4ea6ff;
-            width: 120px;
-            height: 40px;
-            border: 1px solid #4ea6ff;
-            border-radius: 8px;
-
-            .editimg {
-              width: 15px;
-              height: 15px;
-              margin-top: -2px;
-              margin-left: 25px;
-              margin-right: 5px;
-            }
-
-            .editext {
-              line-height: 40px;
-            }
-          }
-
-          .edit:hover {
-            color: #ffffff;
-            background-color: #4ea6ff;
-            cursor: pointer;
-
-            .editimg {
-              background-image: url("../../assets/images/projectadd/delete1.png");
-            }
-          }
-        }
-
-        .notable {
-          width: 100%;
-          display: flex;
-          justify-content: center;
-
-          .notablebox {
-            width: 412px;
-            height: 212px;
-            background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
-            border-radius: 10px;
-            display: flex;
-            justify-content: center;
-            text-align: center;
-            margin-top: 77px;
-            margin-bottom: 109px;
-            cursor: pointer;
-            position: relative;
-
-            .smallleft {
-              position: absolute;
-              top: 18px;
-              left: 0px;
-              width: 8px;
-              height: 21px;
-              border-radius: 0px 4px 4px 0px;
-              background-color: #ffb64e;
-            }
-
-            .smallright {
-              position: absolute;
-              bottom: 18px;
-              right: 0px;
-              width: 8px;
-              height: 21px;
-              border-radius: 4px 0px 0px 4px;
-              background-color: #ffb64e;
-            }
-
-            .boxbody {
-              .boximg {
-                width: 72px;
-                height: 72px;
-                margin: 32px auto 20px auto;
-                background-image: url(@/assets/images/coursewareManage/nostate.png);
-                background-size: 100% 100%;
-              }
-
-              .boxtitle {
-                margin-bottom: 4px;
-              }
-            }
-          }
-        }
-
-        .rwbox {
-          position: relative;
-
-          .talk {
-            margin-top: 24px;
-            margin-bottom: 11px;
-            width: 100%;
-            height: 50px;
-            background: #f5faff;
-            border: 1px solid #4ea6ff;
-            display: flex;
-            align-items: center;
-
-            .im {
-              width: 14px;
-              height: 15px;
-              margin-left: 27px;
-            }
-
-            .xu {
-              height: 100%;
-              line-height: 50px;
-              margin-left: 13px;
-
-              .yi {
-                color: #4f5156;
-                font-size: 14px;
-              }
-
-              .zon {
-                color: #999ba3;
-                font-size: 14px;
-                margin-left: 34px;
-              }
-
-              .th {
-                color: #4ea6ff;
-              }
-            }
-          }
-
-          .tableBox {
-            margin-bottom: 20px;
-            margin-top: 20px;
-
-            .chosen {
-              background-color: #f2f6fc;
-              opacity: 1;
-            }
-
-            .ghost {
-              opacity: 0;
-            }
-
-            .tableRow:hover {
-              background-color: #f2f6fc;
-            }
-
-            .classify {
-              margin-left: 10px !important;
-              padding-left: 9px !important;
-            }
-
-            .ant-checkbox-wrapper {
-              align-items: center;
-              margin-top: -2px;
-            }
-
-            .ant-table-selection-column {
-              padding: 0px !important;
-              padding-left: 60px !important;
-            }
-
-            .ant-table-thead > tr > th {
-              background-color: rgba(239, 244, 252, 1);
-            }
-
-            th.h {
-              background-color: #eff4fc !important;
-            }
-
-            .ant-table-tbody
-              > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
-              > td {
-              background: #f6f9fd;
-            }
-
-            .pa {
-              left: 0;
-              width: 100%;
-              display: flex;
-              justify-content: center;
-              position: absolute;
-              bottom: 20px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .opat {
-    .opacationt {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .ant-switch-checked {
-        background-color: #5dc988;
-      }
-
-      .showt {
-        display: flex;
-        margin-left: 10px;
-        height: 23px;
-        position: relative;
-
-        .bi {
-          width: 63px;
-          height: 23;
-          background-color: #5dc988;
-          line-height: 23px;
-          position: absolute;
-          z-index: 998;
-          color: #ffffff;
-          border-radius: 4px;
-        }
-
-        .xuan {
-          width: 63px;
-          height: 23px;
-          background-color: #f2f6fc;
-          line-height: 23px;
-          position: absolute;
-          z-index: 998;
-          color: #5dc988;
-          border-radius: 4px;
-        }
-      }
-    }
-  }
-
-  .racona {
-    display: flex;
-    align-items: center;
-    height: 100%;
-
-    .img {
-      width: 17px;
-      height: 14px;
-      background-image: url("../../assets/images/leveladd/z1.png");
-    }
-
-    .ch {
-      margin-left: 10px;
-    }
-  }
-
-  .footbtn {
-    width: 100%;
-    height: 80px;
-    margin-top: 16px;
-    background-color: #fff;
-    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
-    display: flex;
-    justify-content: end;
-
-    .btnbox {
-      display: flex;
-      margin-right: 36px;
-      height: 80px;
-
-      .btn {
-        padding: 0px 26px 0px 26px;
-        height: 38px;
-        border-radius: 8px;
-        border: 1px solid rgba(64, 158, 255, 1);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        margin: 21px 0px 19px 14px;
-        cursor: pointer;
-        white-space: nowrap;
-
-        .btnText {
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 36px;
-          margin-left: 5px;
-        }
-      }
-
-      .btn1 {
-        background-color: #4ea6ff;
-
-        .btnText {
-          color: #ffffff;
-        }
-      }
-
-      .btn2 {
-        background-color: #ffffff;
-
-        .btnText {
-          color: #4ea6ff;
-        }
-      }
-    }
-  }
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	min-width: 933px;
+	background-color: rgba(245, 247, 250, 1);
+
+	.left {
+		margin-right: 20px;
+		width: 208px;
+		background: #ffffff;
+		box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+		display: flex;
+		justify-content: center;
+
+		.leftmain {
+			margin-top: 20px;
+			min-height: 800px;
+
+			.tit {
+				margin-left: 20px;
+				font-size: 18px;
+				color: #363636;
+			}
+
+			.btn {
+				margin-top: 20px;
+				height: 38px;
+				background: #fff6e8;
+				border-radius: 8px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+				cursor: pointer;
+
+				.search {
+					background-size: 100%;
+				}
+
+				.btnText {
+					font-size: 14px;
+					font-weight: 400;
+					color: #ffb64e;
+					margin-top: 4px;
+					margin-left: 5px;
+				}
+			}
+
+			.btn3 {
+				width: 171px;
+				margin-right: 0px;
+
+				.search {
+					width: 17px;
+					height: 18px;
+					background-image: url("../../assets/images/leveladd/add.png");
+					background-size: 100% 100%;
+				}
+			}
+
+			.maincon {
+				margin-top: 17px;
+				width: 208px;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				.ghost {
+					opacity: 0 !important;
+				}
+
+				.items {
+					width: 171px;
+					background: rgba(255, 182, 78, 0.1);
+					border: 1px solid #ffb64e;
+					opacity: 0.45;
+					border-radius: 8px;
+					margin-bottom: 16px;
+					align-items: center;
+					padding: 16px;
+					opacity: 0.5;
+					cursor: pointer;
+
+					.items1 {
+						margin-bottom: 12px;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+
+						.boxs_left {
+							display: flex;
+							align-items: center;
+
+							.script {
+								display: flex;
+								justify-content: center;
+								align-items: center;
+								width: 56px;
+								height: 24px;
+								background: #ffb64e;
+								border-radius: 6px;
+								margin-right: 12px;
+								white-space: nowrap;
+							}
+
+							.imgIcon {
+								width: 16px;
+								height: 16px;
+								background-image: url(@/assets/images/leveladd/edit1.png);
+								background-size: 100% 100%;
+							}
+						}
+
+						.boxs_right {
+							.imgIcon {
+								width: 16px;
+								height: 16px;
+								background-image: url(@/assets/images/leveladd/delete.png);
+								background-size: 100% 100%;
+							}
+						}
+					}
+
+					.items2 {
+						.nname {
+							width: 140px;
+							font-weight: bold;
+
+							overflow: hidden;
+							text-overflow: ellipsis;
+							-webkit-line-clamp: 2;
+							display: -webkit-box;
+							-webkit-box-orient: vertical;
+						}
+					}
+				}
+
+				.active {
+					opacity: 1;
+				}
+			}
+		}
+	}
+
+	.right {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+
+		.addhead {
+			width: 100%;
+			background-color: #fff;
+			box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
+			display: flex;
+			align-items: center;
+			position: relative;
+
+			.filt {
+				margin: 16px 30px 16px 22px;
+				display: flex;
+				justify-content: space-between;
+				width: 100%;
+				align-items: center;
+				flex-wrap: wrap;
+
+				.le {
+					display: flex;
+					align-items: center;
+
+					.leftimg {
+						width: 151px;
+						height: 100px;
+						border: 10px solid #e7f2ff;
+						border-radius: 8px;
+						margin-left: 20px;
+
+						.img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+
+					.imgfor {
+						margin-left: 32px;
+
+						.forz {
+							color: #363636;
+							font-size: 16px;
+						}
+
+						.fort {
+							color: #878b92;
+							font-size: 14px;
+							margin-top: 20px;
+						}
+					}
+				}
+
+				.rightt {
+					height: 100%;
+					display: flex;
+					align-items: center;
+
+					.select {
+						display: flex;
+						align-items: center;
+						white-space: nowrap;
+						margin-right: 56px;
+
+						.inputbox {
+							display: flex;
+							align-items: center;
+							border: 1px solid #c7cbd2;
+							width: 238px;
+							height: 40px;
+							border-radius: 8px;
+
+							input {
+								border: none;
+								outline: none;
+							}
+
+							.bottonbox {
+								width: 100px;
+								height: 40px;
+								background: #4ea6ff;
+								border-radius: 8px;
+								display: flex;
+								justify-content: center;
+								align-items: center;
+								cursor: pointer;
+								flex-shrink: 0;
+
+								.btnText {
+									font-size: 14px;
+									font-weight: 400;
+									color: #ffffff;
+									line-height: 36px;
+									margin-left: 5px;
+								}
+							}
+						}
+					}
+
+					.line {
+						height: 60px;
+						width: 1px;
+						background-color: #e8effa;
+						margin-right: 18px;
+					}
+
+					.img2 {
+						width: 42px;
+						height: 42px;
+						margin-right: 18px;
+					}
+
+					.pub {
+						color: #57c887;
+						font-size: 14px;
+						margin-top: 5px;
+						margin-right: 30px;
+						cursor: pointer;
+						white-space: nowrap;
+					}
+
+					@media screen and (max-width: 1050px) {
+						.pub {
+							margin-right: 10px;
+						}
+
+						.line {
+							margin-right: 10px;
+						}
+					}
+
+					.return {
+						color: #4ea6ff;
+						font-size: 14px;
+						margin-top: 13px;
+						margin-right: 20px;
+						white-space: nowrap;
+					}
+
+					.role {
+						display: flex;
+						align-items: center;
+						font-size: 16px;
+						font-weight: 400;
+						color: #333330;
+						line-height: 36px;
+						cursor: pointer;
+						position: relative;
+						margin-right: 20px;
+
+						.roleArrow {
+							width: 13px;
+							height: 7px;
+							margin-left: 8px;
+							background-image: url(../../assets/images/navtop/down.png);
+							background-size: 100%;
+						}
+
+						.roleItems {
+							width: 109px;
+							height: 90px;
+							padding-top: 10px;
+							background: #ffffff;
+							box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+							position: absolute;
+							top: 35px;
+							right: 0px;
+							text-align: center;
+							display: none;
+							z-index: 100;
+						}
+
+						.roleItem {
+							font-size: 14px;
+							font-weight: 400;
+							color: rgba(79, 81, 86, 1);
+							line-height: 36px;
+						}
+
+						.roleItem:hover {
+							color: #4ea6ff;
+						}
+					}
+
+					.role:hover .roleItems {
+						display: block;
+					}
+
+					.role:hover .roleArrow {
+						background-image: url(../../assets/images/navtop/up.png);
+					}
+				}
+			}
+		}
+
+		.mid {
+			width: 100%;
+			margin-top: 20px;
+			margin-bottom: 20px;
+			background-color: #fff;
+			box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+
+			.item {
+				height: 115px;
+				display: flex;
+				align-items: center;
+
+				.itcon {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					height: 100%;
+					width: 100%;
+					margin-left: 38px;
+					margin-right: 38px;
+
+					.img {
+						cursor: pointer;
+					}
+
+					.text {
+						font-size: 16px;
+						color: #363636;
+						margin-top: 5px;
+						white-space: nowrap;
+					}
+				}
+
+				.lin {
+					width: 1px;
+					height: 60%;
+					background-color: #e8effa;
+				}
+
+				.no {
+					display: none;
+				}
+			}
+		}
+
+		.boom {
+			width: 100%;
+			flex: 1;
+			background-color: #fff;
+			box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
+			display: flex;
+			justify-content: center;
+
+			.boomcen {
+				width: 95%;
+
+				.onerow {
+					width: 100%;
+					display: flex;
+					height: 40px;
+					position: relative;
+					margin-top: 20px;
+
+					.taskmain {
+						font-size: 18px;
+						color: #000000;
+						margin-top: 10px;
+					}
+
+					.btn {
+						position: absolute;
+						top: 0;
+						right: 130px;
+						background-color: #4ea6ff;
+						width: 130px;
+						height: 40px;
+						border-radius: 8px;
+						border: 1px solid #4ea6ff;
+						color: #ffffff;
+						cursor: pointer;
+					}
+
+					.edit {
+						position: absolute;
+						right: 0;
+						top: 0;
+						color: #4ea6ff;
+						width: 120px;
+						height: 40px;
+						border: 1px solid #4ea6ff;
+						border-radius: 8px;
+
+						.editimg {
+							width: 15px;
+							height: 15px;
+							margin-top: -2px;
+							margin-left: 25px;
+							margin-right: 5px;
+						}
+
+						.editext {
+							line-height: 40px;
+						}
+					}
+
+					.edit:hover {
+						color: #ffffff;
+						background-color: #4ea6ff;
+						cursor: pointer;
+
+						.editimg {
+							background-image: url("../../assets/images/projectadd/delete1.png");
+						}
+					}
+				}
+
+				.notable {
+					width: 100%;
+					display: flex;
+					justify-content: center;
+
+					.notablebox {
+						width: 412px;
+						height: 212px;
+						background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
+						border-radius: 10px;
+						display: flex;
+						justify-content: center;
+						text-align: center;
+						margin-top: 77px;
+						margin-bottom: 109px;
+						cursor: pointer;
+						position: relative;
+
+						.smallleft {
+							position: absolute;
+							top: 18px;
+							left: 0px;
+							width: 8px;
+							height: 21px;
+							border-radius: 0px 4px 4px 0px;
+							background-color: #ffb64e;
+						}
+
+						.smallright {
+							position: absolute;
+							bottom: 18px;
+							right: 0px;
+							width: 8px;
+							height: 21px;
+							border-radius: 4px 0px 0px 4px;
+							background-color: #ffb64e;
+						}
+
+						.boxbody {
+							.boximg {
+								width: 72px;
+								height: 72px;
+								margin: 32px auto 20px auto;
+								background-image: url(@/assets/images/coursewareManage/nostate.png);
+								background-size: 100% 100%;
+							}
+
+							.boxtitle {
+								margin-bottom: 4px;
+							}
+						}
+					}
+				}
+
+				.rwbox {
+					position: relative;
+
+					.talk {
+						margin-top: 24px;
+						margin-bottom: 11px;
+						width: 100%;
+						height: 50px;
+						background: #f5faff;
+						border: 1px solid #4ea6ff;
+						display: flex;
+						align-items: center;
+
+						.im {
+							width: 14px;
+							height: 15px;
+							margin-left: 27px;
+						}
+
+						.xu {
+							height: 100%;
+							line-height: 50px;
+							margin-left: 13px;
+
+							.yi {
+								color: #4f5156;
+								font-size: 14px;
+							}
+
+							.zon {
+								color: #999ba3;
+								font-size: 14px;
+								margin-left: 34px;
+							}
+
+							.th {
+								color: #4ea6ff;
+							}
+						}
+					}
+
+					.tableBox {
+						margin-bottom: 20px;
+						margin-top: 20px;
+
+						.chosen {
+							background-color: #f2f6fc;
+							opacity: 1;
+						}
+
+						.ghost {
+							opacity: 0;
+						}
+
+						.tableRow:hover {
+							background-color: #f2f6fc;
+						}
+
+						.classify {
+							margin-left: 10px !important;
+							padding-left: 9px !important;
+						}
+
+						.ant-checkbox-wrapper {
+							align-items: center;
+							margin-top: -2px;
+						}
+
+						.ant-table-selection-column {
+							padding: 0px !important;
+							padding-left: 60px !important;
+						}
+
+						.ant-table-thead>tr>th {
+							background-color: rgba(239, 244, 252, 1);
+						}
+
+						th.h {
+							background-color: #eff4fc !important;
+						}
+
+						.ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {
+							background: #f6f9fd;
+						}
+
+						.pa {
+							left: 0;
+							width: 100%;
+							display: flex;
+							justify-content: center;
+							position: absolute;
+							bottom: 20px;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.opat {
+		.opacationt {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.ant-switch-checked {
+				background-color: #5dc988;
+			}
+
+			.showt {
+				display: flex;
+				margin-left: 10px;
+				height: 23px;
+				position: relative;
+
+				.bi {
+					width: 63px;
+					height: 23;
+					background-color: #5dc988;
+					line-height: 23px;
+					position: absolute;
+					z-index: 998;
+					color: #ffffff;
+					border-radius: 4px;
+				}
+
+				.xuan {
+					width: 63px;
+					height: 23px;
+					background-color: #f2f6fc;
+					line-height: 23px;
+					position: absolute;
+					z-index: 998;
+					color: #5dc988;
+					border-radius: 4px;
+				}
+			}
+		}
+	}
+
+	.racona {
+		display: flex;
+		align-items: center;
+		height: 100%;
+
+		.img {
+			width: 17px;
+			height: 14px;
+			background-image: url("../../assets/images/leveladd/z1.png");
+		}
+
+		.ch {
+			margin-left: 10px;
+		}
+	}
+
+	.footbtn {
+		width: 100%;
+		height: 80px;
+		margin-top: 16px;
+		background-color: #fff;
+		box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
+		display: flex;
+		justify-content: end;
+
+		.btnbox {
+			display: flex;
+			margin-right: 36px;
+			height: 80px;
+
+			.btn {
+				padding: 0px 26px 0px 26px;
+				height: 38px;
+				border-radius: 8px;
+				border: 1px solid rgba(64, 158, 255, 1);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+				margin: 21px 0px 19px 14px;
+				cursor: pointer;
+				white-space: nowrap;
+
+				.btnText {
+					font-size: 14px;
+					font-weight: 400;
+					line-height: 36px;
+					margin-left: 5px;
+				}
+			}
+
+			.btn1 {
+				background-color: #4ea6ff;
+
+				.btnText {
+					color: #ffffff;
+				}
+			}
+
+			.btn2 {
+				background-color: #ffffff;
+
+				.btnText {
+					color: #4ea6ff;
+				}
+			}
+		}
+	}
 }
 </style>