diff --git a/src/views/projectcenter/TaskAdd.vue b/src/views/projectcenter/TaskAdd.vue
index af2c8f4a..154fc5db 100644
--- a/src/views/projectcenter/TaskAdd.vue
+++ b/src/views/projectcenter/TaskAdd.vue
@@ -1,400 +1,150 @@
 <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="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="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="projectInfo.stageList" chosenClass="chosen" ghostClass="ghost" forceFallback="true"
+                       group="stage" animation="500">
+              <template #item="{ element,index }">
+                <div class="items" :class="activeIndex === index ? 'active' : ''" @click="changeStageIndex(index)" >
+                  <div class="items1">
+                    <div class="boxs_left">
+                      <a-popover placement="topLeft" trigger="click">
+                        <template #content>
+                          <div style="width: 130px">
+                            {{ 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(index)"></div>
+                    </div>
+                    <div class="boxs_right">
+                      <div class="imgIcon" @click="showDeleteStage(index)"></div>
+                    </div>
+                  </div>
+                  <div class="items2">
+                    <a-popover placement="topLeft" v-if="element.name?.length > 10">
+                      <template #content>
+                        <div style="width: 130px">
+                          {{ element.name }}
+                        </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="tit">{{ item.remark }}</div>
-              <div class="name">{{ item.name }}</div>
-            </div> -->
-								</div>
-							</template>
-						</draggable>
-
-						<!-- <div
-            class="items"
-            :class="isactive == index ? 'active' : ''"
-            @click="changebgc(index)"
-            v-for="(item, index) in level"
-            :key="item.chapterId"
-          >
-            <div class="items1">
-              <div class="boxs_left">
-                <div class="script">
-                  <span style="font-size: 12px; color: #ffffff">说明</span>
+                      <div class="nname">
+                        {{ element.name }}
+                      </div>
+                    </a-popover>
+                    <div class="nname" v-if="element.name?.length <= 10">
+                      {{ element.name }}
+                    </div>
+                  </div>
                 </div>
-                <div class="imgIcon"></div>
+              </template>
+            </Draggable>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="addhead">
+          <div class="filt">
+            <div class="le">
+              <div class="leftimg">
+                <img class="img" :src="projectInfo?.projectInfo?.picUrl"/>
               </div>
-              <div class="boxs_right">
-                <div class="imgIcon"></div>
+              <div class="imgfor">
+                <div class="forz" style="font-weight: 700">
+                  {{ projectInfo?.projectInfo?.name }}
+                </div>
               </div>
             </div>
-            <div class="items2">
-              <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" style="margin-right:90px;">
-								<span>学习模式：</span>
-								<span
-									style="border: 1px solid rgba(0, 0, 0, 0.25);width: 120px;height: 38px; border-radius: 10px;text-align: center;line-height: 38px;">
-									{{ unlockMode == 1 ? '自由学习模式': unlockMode == 2 || unlockMode == 3 ? '闯关模式': '' }}
+            <div class="rightt">
+              <!-- 2022-11-30注释 后面放开 -->
+              <div class="select" style="margin-right:90px;">
+                <span>学习模式：</span>
+                <span
+                    style="border: 1px solid rgba(0, 0, 0, 0.25);width: 120px;height: 38px; border-radius: 10px;text-align: center;line-height: 38px;">
+									{{ projectInfo?.projectInfo?.unlockMode === 1 ? '自由学习模式' : '闯关模式' }}
 								</span>
-								<!-- <div class="inputbox"> -->
-									<!-- <input type="text" placeholder="按学习时间解锁" style="padding-left:12px;" /> -->
-									<!-- <a-select v-model:value="unlockMode" ref="select" size="small" style="width: 150px"
-										disabled>
-										<a-select-option :value="1">自由学习模式</a-select-option>
-										<a-select-option :value="2">闯关模式</a-select-option>
-										<a-select-option :value="3">闯关模式</a-select-option>
-									</a-select> -->
-									<a-button type="primary" size="large" style="margin-left:10px;border-radius: 10px;"   @click="showModeVisible">切换模式</a-button>
-									<!-- <div class="bottonbox" @click="showModeVisible">
-										<div class="btnText">切换模式</div>
-									</div> -->
-									<unlock-mode ref="unlockModeModal" v-model:unlockModeVisible="unlockModeVisible" :objData="projectInfo" @saveUnlock="saveUnlock"/>
-								<!-- </div> -->
-							</div>
-							<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 -->
-					<div class="item" @click="showDrawerAddDiscuss">
-						<div class="itcon">
-							<div class="img">
-								<img src="../../assets/images/leveladd/tao.png" />
-							</div>
-							<div class="text">讨论</div>
-						</div>
-
-						<div>
-							<add-discuss v-model:adddiscussVisible="adddiscussvisible" v-model:edit="edit"
-								:isLevel="isLevel" v-model:projectId="projectId" v-model:chooseStageId="chooseStageId"
-								v-model:EditDiscussId="EditDiscussId" v-model:projectTaskId="projectTaskId"
-								@changeData="updateTableData" />
-						</div>
-
-						<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="lin"></div>
-					</div>
-
-					<!-- TODO1216 -->
-					<div class="item" @click="showDrawerAddVote">
-						<div class="itcon">
-							<div class="img">
-								<img src="../../assets/images/leveladd/tou.png" />
-							</div>
-							<div class="text">投票</div>
-
-							<div>
-								<add-vote v-model:addvoteVisible="addvotevisible" @changeData="updateTableData"
-									@getData="changeVData" v-model:edit="edit" :isLevel="isLevel"
-									v-model:projectId="projectId" v-model:chooseStageId="chooseStageId"
-									v-model:projectTaskId="projectTaskId" v-model:EditVoteId="EditVoteId"
-									v-model:voteId="voteId" v-model:ballotId="ballotId" />
-							</div>
-
-						</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">
-              <img class="im" src="../../assets/images/leveladd/gan.png" />
-              <div class="xu">
-                <span class="yi">已选择</span>
-                <div style="width: 5px; display: inline-block"></div>
-                <span class="th">3</span>
-                <div style="width: 5px; display: inline-block"></div>
-                <span class="yi">项</span>
-                <span class="zon">任务总数：</span>
-                <span class="yi">5</span>
-                <span class="yi">条</span>
+                <unlock-mode :routerInfo="projectInfo.projectInfo" :types="2">
+                  <a-button type="primary" size="large" style="margin-left:10px;border-radius: 10px;">切换模式
+                  </a-button>
+                </unlock-mode>
               </div>
-            </div> -->
-							<div class="tableBox" style="border: 1px solid #f2f6fc">
-								<div style="
+              <div class="line"></div>
+              <router-link :to="{ path: `/taskpage`, query: { projectId: route.query.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" v-for="(value,key) in TASK_TYPE" :key="key">
+            <component :is="value.component" :ref="el=>courseRef['el'+key]=el" :type="key"
+                       v-model:task-list="projectInfo.stageList[activeIndex].taskList">
+              <div class="itcon">
+                <div class="img">
+                  <img :src="value.img"/>
+                </div>
+                <div class="text">{{ value.name }}</div>
+              </div>
+            </component>
+            <div>
+            </div>
+            <div class="lin"></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="tableBox" style="border: 1px solid #f2f6fc">
+                <div style="
                     height: 50px;
                     display: flex;
                     justify-content: space-between;
@@ -406,13 +156,13 @@
                     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;
@@ -423,25 +173,20 @@
                       		: 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="
+                     " @click="selectRowAll"/>
+                    <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="projectInfo.stageList[activeIndex].taskList" chosenClass="chosen" ghostClass="ghost"
+                           forceFallback="true" group="task" animation="500">
+                  <template #item="{ element,index }">
+                    <div style="
                         height: 50px;
                         display: flex;
                         justify-content: space-between;
@@ -452,192 +197,141 @@
                         color: #4f5156;
                         line-height: 36px;
                       " class="tableRow">
-											<div style="
+                      <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="
+                          <a-checkbox :id="element.id" v-model:checked="element.checked"></a-checkbox>
+                          <div style="margin-top: 2px; margin-left: 8px">
+                            {{ TASK_TYPE[element.type]?.name || '' }}
+                          </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.type == 1 ? Math.ceil(Number(element.cretime) / 60) + "分钟" :
-															element.cretime + "分钟"
-														: "-"
-												}}
-											</div>
-											<div style="
+                        " :title="element.name">
+                        {{ element.name }}
+                      </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.flag" size="small"
+                                      active-color="red"/>
+                            <div class="showt clearfix">
+                              <div class="bi" :style="{'z-index': element.flag ? 999 : 998,}">必修</div>
+                              <div class="xuan">选修</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div style="width: 87px; text-align: center">
+                        {{ element.duration ? element.duration + "分钟" : "-" }}
+                      </div>
+                      <div style="
                           width: 120px;
                           text-align: center;
                           margin-right: 20px;
                         ">
-												<div class="opa">
-													<div class="opacation">
+                        <div class="opa">
+                          <div class="opacation">
 														<span v-if="element.type !== 5" style="
                                 color: #4ea6ff;
                                 margin-right: 25px;
                                 cursor: pointer;
-                              " @click="
-                              	decideType(
-                              		element.lei,
-                              		element.courseId,
-                              		element.id
-                              	)
-                              ">
+                              " @click="editTaskForType(element,index)">
 															编辑
 														</span>
-														<span v-else style="
+                            <span v-else style="
 															color: #4ea6ff;
 															margin-right: 55px;
 															cursor: pointer;
 															">
 														</span>
-														<span style="color: #4ea6ff; cursor: pointer"
-															@click="showDelete(element.id)">
+                            <span style="color: #4ea6ff; cursor: pointer" @click="showDelete(element,index)">
 															删除
 														</span>
-													</div>
-												</div>
-											</div>
-										</div>
-									</template>
-								</draggable>
-								<!-- <a-table
-                style="border: 1px solid #f2f6fe"
-                :columns="tableDataFunc()"
-                :data-source="tableData"
-                :loading="tableDataTotal === -1 ? true : false"
-                expandRowByClick="true"
-                @expand="expandTable"
-                :pagination="false"
-                :row-selection="{
-                  columnWidth: 30,
-                  selectedRowKeys: selectedRowKeys,
-                  onChange: onSelectChange,
-                }"
-              /> -->
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </Draggable>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
-								<!-- <div class="pa">
-                <a-pagination
-                  :showSizeChanger="false"
-                  showQuickJumper="true"
-                  hideOnSinglePage="true"
-                  :pageSize="pageSize"
-                  :current="currentPage"
-                  :total="tableDataTotal"
-                  class="pagination"
-                />
-              </div> -->
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+    <div class="footbtn">
+      <div class="btnbox">
+        <a-button class="btn btn2" @click="temporaryStorage" :loading="templateLoading">暂存</a-button>
+        <a-button class="btn btn2" @click="submitStorage" :loading="confirmLoading">确定</a-button>
+        <a-button class="btn btn1" @click="cancelStorage" :loading="cancleLoading">取消</a-button>
+      </div>
+    </div>
 
-		<div class="footbtn">
-			<div class="btnbox">
-				<div class="btn btn2" @click="temporaryStorage">
-					<div class="btnText">暂存</div>
-				</div>
-				<div class="btn btn2" @click="submitStorage">
-					<div class="btnText">确定</div>
-				</div>
-				<div class="btn btn1" @click="cancelStorage">
-					<div class="btnText">取消</div>
-				</div>
-			</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="formValue.name" 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="formValue.remark" 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;
@@ -646,9 +340,9 @@
                 color: #4ea6ff;
                 background-color: #ffffff;
               ">
-							取消
-						</button>
-						<button @click="editStage" style="
+              取消
+            </button>
+            <button @click="editStage" style="
                 cursor: pointer;
                 margin-left: 16px;
                 margin-bottom: 40px;
@@ -659,2224 +353,1420 @@
                 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>
+      </a-modal>
+    </div>
+    <!-- 确认添加阶段弹窗 -->
+    <a-modal v-model:visible="confirmModal" :footer="null" 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" 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="confirmDelTask">
+              <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">
+    <!-- 是否删除阶段弹窗 -->
+    <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>
+                projectInfo.stageList?.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,
-} from "vue";
-import AddOnline from "../../components/drawers/AddOnline.vue";
-import AddFaceteach from "../../components/drawers/AddFaceteach.vue";
-import AddCase from "../../components/drawers/AddCase.vue";
-import AddHomework from "../../components/drawers/AddHomework.vue";
-import AddTest from "../../components/drawers/AddTest.vue";
-import AddLive from "../../components/drawers/AddLive.vue";
-import AddRef from "../../components/drawers/AddRef.vue";
-import AddDiscuss from "../../components/drawers/AddDiscuss.vue";
-import AddActive from "../../components/drawers/AddActive.vue";
-import AddEval from "../../components/drawers/AddEval.vue";
-import AddInvist from "../../components/drawers/AddInvist.vue";
-import AddVote from "../../components/vote/AddVote.vue";
-import { message } from "ant-design-vue";
+<script setup>
+import {computed, onMounted, onUnmounted, ref,} from "vue";
+import {message} from "ant-design-vue";
 import * as api from "../../api/indexTaskadd";
-import * as apistage from "../../api/indexStage";
-import * as apimove from "../../api/indexMovetask";
-import draggable from "vuedraggable";
 import UnlockMode from "../../components/drawers/UnlockMode.vue";
+import Draggable from "vuedraggable";
+import {useRoute} from "vue-router";
+import {TASK_TYPE} from "@/utils/const";
+import {request} from "@/api/request";
+import {PROJECT_DETAIL_MODIFY, PROJECT_RELEASE} from "@/api/apis";
 
-import { useRoute, useRouter } from "vue-router";
+const route = useRoute();
+const courseRef = ref({})
+const visiblene = ref(false);
+const deAll = ref(false);
+const deleteModal = ref(false);
+const confirmModal = ref(false);
+const stage = ref(false);
+const cancelModal = ref(false);
+const deleteStageModal = ref(false);
+const templateLoading = ref(false);
+const confirmLoading = ref(false);
+const cancleLoading = ref(false);
+const projectInfo = ref({stageList: [{taskList: [{}]}], projectInfo: {}});
+const activeIndex = ref(0);
+const moveChapterIndex = ref(0);
+const formValue = ref({taskList: []});
 
-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: [],
-			projectInfo: null, // 项目信息
-			unlockMode: 1, // 学习模式
 
-			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：部分选择
+const selectAll = computed(() => {
+  const selectedNum = projectInfo.value?.stageList[activeIndex.value]?.taskList?.filter(t => t.checked)?.length
+  if (!selectedNum) {
+    return 0
+  }
+  if (selectedNum === projectInfo.value?.stageList[activeIndex.value]?.taskList?.length) {
+    return 1
+  }
+  return 2
+})
 
-			updateStageID: null, //编辑阶段id
-			deleteStageId: null, //删除阶段的id
-			deleteStageModal: false, //删除阶段弹窗
+function changeStageIndex(index){
+  activeIndex.value = index
+}
 
-			unlockModeVisible: false, //切换模式抽屉
+//获取任务列表
+const getTask = async () => {
+  await api.getTask({projectId: route.query.projectId}).then((res) => {
+    projectInfo.value = res.data.data
+  });
+};
 
-			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);
-		};
+const editTaskForType = (ele, index) => {
+  courseRef.value['el' + ele.type].openDrawer(index, ele)
+};
 
-		watch(route, () => {
-			console.log(route);
-		});
+//删除任务
+// const deleteTask = async () => {
+//   projectInfo.value.stageList[activeIndex.value].draftTaskList.splice(deleteIndex.value, 1)
+//   closeConfirm()
+// };
 
-		// 把数据放到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.id,
-						tit: value.name,
-						name: value.remark,
-						taskList: value.taskList,
-						value: value.id,
-						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 showChangeModal = () => {
+  if (projectInfo.value?.stageList?.length <= 1) {
+    message.warning("请添加阶段！");
+    return
+  }
+  if (!projectInfo.value?.stageList[activeIndex.value]?.taskList?.filter(t => t.checked)?.length) {
+    message.warning("请选择要移动的任务！");
+    return
+  }
+  visiblene.value = true
+};
+const closeChangeModal = () => {
+  visiblene.value = false;
+};
+//移动任务到阶段
+const moveTask = () => {
+  projectInfo.value.stageList[moveChapterIndex.value].taskList.push(...projectInfo.value.stageList[activeIndex.value].taskList.filter(t => t.checked).map((t) => ({
+    ...t,
+    checked: false
+  })));
+  projectInfo.value.stageList[activeIndex.value].taskList = projectInfo.value.stageList[activeIndex.value].taskList.filter(t => !t.checked);
+  visiblene.value = false;
+};
+//批量删除
+const deleteTaskAll = () => {
+  projectInfo.value.stageList[activeIndex.value].taskList = projectInfo.value.stageList[activeIndex.value].taskList.filter(t => !t.checked);
+  deAll.value = false;
+};
 
-		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 confirmDelTask = () => {
 
-								{/**
-                   <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;
-		};
+};
+//关闭添加阶段弹窗
+const closeModal = () => {
+  stage.value = false
+};
+//显示添加阶段弹窗
+const showModal = () => {
+  stage.value = true
+};
+//添加阶段
+const editStage = async () => {
+  if (!formValue.value.name) {
+    return message.warning("请输入关卡名称");
+  }
+  projectInfo.value.stageList.push({...formValue.value})
+  formValue.value = {taskList: []}
+  stage.value = false
+};
 
-		const saveUnlock = (num)=>{
-			console.log('保存操作',num)
-			state.projectInfo.unlockMode = num
-			api.editProj(state.projectInfo).then(res=>{
-				if(res.data.code === 200){
-					message.success(res.data.msg)
-					getTask()
-				}else{
-					message.error(res.data.msg)
-				}
-			}).catch(e=>{
-				message.error(e.data.msg)
-			})
-		}
+//打开删除阶段弹窗
+const showDeleteStage = () => {
+  deleteStageModal.value = true;
+};
+//关闭删除阶段弹窗
+const closeDeleteStage = () => {
+  deleteStageModal.value = false;
+};
+//删除阶段
+const deleteStage = () => {
 
-		//获取任务列表
-		const getTask = async () => {
-			let obj = {
-				projectId: state.projectId,
-			};
-			await api.getTask(obj).then((res) => {
-				console.log("22222", res.data.data.stageList);
+};
+onMounted(() => {
+  document.getElementsByTagName("main")[0].style.background = "rgb(245, 247, 250,1)";
+  document.getElementsByTagName("main")[0].style.boxShadow = "none";
+  getTask();
+});
 
-				if (state.onceChoice) {
-					let data = res.data.data.stageList;
-					state.onceChoice = false;
-					state.projectInfo = res.data.data.projectInfo
-					state.unlockMode = res.data.data.projectInfo.unlockMode
-					let arraynew = []
-					for (let i = 0; i < data.length; i++) {
-						if (data[i].id !== '0') {
-							arraynew.push(data[i])
-						}
-					}
-					// console.log(arraynew)
-					if (arraynew.length !== 0) {
-						state.chooseStageId = Number(arraynew[arraynew.length - 1].id);
-					}
-				}
+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 closeConfirm = () => {
+  confirmModal.value = false;
+};
+const showCancel = () => {
+  cancelModal.value = true;
+};
+const closeCancel = () => {
+  cancelModal.value = false;
+};
+const showDelete = () => {
+  deleteModal.value = true;
+};
+const closeDelete = () => {
+  deleteModal.value = false;
+};
+// 删除所有阶段
+const removeAllLevel = () => {
 
-				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();
+};
+//全选任务或全不选任务
+const selectRowAll = () => {
+  if (selectAll.value === 1) {
+    projectInfo.value.stageList[activeIndex.value].taskList.forEach(t => t.checked = false)
+    return
+  }
+  projectInfo.value.stageList[activeIndex.value].taskList.forEach(t => t.checked = true)
+};
+const showdeAll = () => {
+  if (!projectInfo.value?.stageList[activeIndex.value]?.taskList?.filter(t => t.checked)?.length) {
+    message.warning("请选择要删除的任务！");
+    return
+  }
+  deAll.value = true
+};
+const closeDeAll = () => {
+  deAll.value = false;
+};
 
-			});
-		};
-
-		//获取修改、删除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 });
-			//删除后更新索引
-		};
-
-		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 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();
-
-							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 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();
-
-			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("请输入阶段名称");
-			}
-
-			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 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 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 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 showModeVisible = () => {
-			state.unlockModeVisible = true;
-		};
-
-		//暂存
-		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,
-			saveUnlock,
-			closeDelete,
-			showChangeModal,
-			closeChangeModal,
-			changebgc,
-			getTask,
-			getTableData,
-			deleteTask,
-			editStage,
-			updateTableData,
-			changeVData,
-			changeRow,
-			selectRowAll,
-			changeCourseType,
-			getStageData,
-			moveTask,
-			deleteTaskAll,
-			decideType,
-			showdeAll,
-			closeDeAll,
-			handleChangeStage,
-
-			showDeleteStage,
-			closeDeleteStage,
-			deleteStage,
-
-			showModeVisible,
-
-			temporaryStorage,
-			submitStorage,
-			cancelStorage,
-			removeAllLevel,
-		};
-	},
+//暂存
+const temporaryStorage = async () => {
+  templateLoading.value = true
+  await request(PROJECT_DETAIL_MODIFY, projectInfo.value)
+  message.success("暂存成功");
+  templateLoading.value = false
+};
+//确定
+const submitStorage = async () => {
+  confirmLoading.value = true
+  await request(PROJECT_RELEASE, {projectId: route.query.projectId})
+  message.success("阶段和任务数据已保存")
+  confirmLoading.value = false
+};
+//取消
+const cancelStorage = async () => {
+  cancleLoading.value = true
+  await getTask()
+  message.success("取消成功");
+  cancleLoading.value = false
 };
 </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 {
+          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;
+        color: #ffffff;
+
+        .btnText {
+          color: #ffffff;
+        }
+      }
+
+      .btn2 {
+        background-color: #ffffff;
+        color: #4ea6ff;
+
+        .btnText {
+          color: #4ea6ff;
+        }
+      }
+    }
+  }
 }
 </style>