feat：项目任务列表 作业的删除，编辑，新增

src/components/drawers/AddHomework.vue

@@ -1,112 +1,76 @@
 <template>
-  <a-drawer
-    :visible="addhomeworkVisible"
-    class="drawerStyle addhomeworkDrawer"
-    width="80%"
-    placement="right"
-    @after-visible-change="afterVisibleChange"
-  >
+  <a-drawer :visible="addhomeworkVisible" class="drawerStyle addhomeworkDrawer" width="80%" placement="right"
+    @after-visible-change="afterVisibleChange">
     <div class="drawerMain">
       <div class="header">
-        <div class="headerTitle">{{workId ? '编辑':'添加' }}作业</div>
-        <img
-          style="width: 29px; height: 29px; cursor: pointer"
-          src="../../assets/images/basicinfo/close.png"
-          @click="closeDrawer"
-        />
+        <div class="headerTitle">{{ EditWorkId ? '编辑' : '添加' }}作业</div>
+        <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer" />
       </div>
-      <a-form
-            ref="formRef"
-            name="custom-validation"
-            :model="formState"
-            :rules="rules"
-            v-bind="layout"
-            @finish="handleFinish"
-            @validate="handleValidate"
-            @finishFailed="handleFinishFailed"
-          >
-      <div class="contentMain">
-        <div class="main_left">
-          
-          <div class="main_item">
-            <div class="btnbox">
-              <a-form-item has-feedback label="作业名称" name="workName">
-                <a-input v-model:value="formState.workName"
-                style="width: 424px; height: 32px;margin-left: 35px;"
-                placeholder="请输入作业名称"
-                autocomplete="off" />
-              </a-form-item>
-             
-            </div>
-          </div>
-          <div class="main_item2">
-              <a-form-item has-feedback label="作业要求" name="workRequirement">
-              <a-textarea
-                v-model:value="formState.workRequirement"
-                placeholder="请输入作业要求"
-                autocomplete="off"
-                allow-clear
-                style="margin-left: 35px"
-                maxlength="150"
-              />
-              </a-form-item>
-          </div>
-          <div class="main_item">
-            <div class="btnbox">
-              <a-form-item has-feedback label="提交时间" name="choosedTime">
-              <a-range-picker
-              style="width: 424px;margin-left: 35px;"
-              v-model:value="formState.choosedTime"
-              format="YYYY-MM-DD"
-                :placeholder="['      开始时间', '        结束时间']"
-              />
-            </a-form-item>
-            </div>
-          </div>
-          <div class="main_item">
-            <div class="signbox">
-              <div class="sign">
-                <img
-                  src="@/assets/images/coursewareManage/enclosure.png"
-                  alt=""
-                />
+      <a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules" v-bind="layout"
+        @finish="handleFinish" @validate="handleValidate" @finishFailed="handleFinishFailed">
+        <div class="contentMain">
+          <div class="main_left">
+
+            <div class="main_item">
+              <div class="btnbox">
+                <a-form-item has-feedback label="作业名称" name="workName">
+                  <a-input v-model:value="formState.workName" style="width: 424px; height: 32px;margin-left: 35px;"
+                    placeholder="请输入作业名称" autocomplete="off" />
+                </a-form-item>
+
               </div>
-              <span style="margin-right: 3px">附件：</span>
             </div>
-            <div class="btnbox">
-              <a-upload
-                v-model:file-list="fileList"
-                name="file"
-                action="/api/file/upload"
-                @change="handleChange"
-              >
-              <button class="xkbtn" type="button">上传附件</button>
-            </a-upload>
+            <div class="main_item2">
+              <a-form-item has-feedback label="作业要求" name="workRequirement">
+                <a-textarea v-model:value="formState.workRequirement" placeholder="请输入作业要求" autocomplete="off"
+                  allow-clear style="margin-left: 35px" maxlength="150" />
+              </a-form-item>
             </div>
-          </div>
-          <div class="main_item" style="margin-top:-25px;">
-            <div class="signbox">
+            <div class="main_item">
+              <div class="btnbox">
+                <a-form-item has-feedback label="提交时间" name="choosedTime">
+                  <a-range-picker style="width: 424px;margin-left: 35px;" v-model:value="formState.choosedTime"
+                    format="YYYY-MM-DD" :placeholder="['      开始时间', '        结束时间']" />
+                </a-form-item>
+              </div>
             </div>
-            <div class="btnbox">
-              <span style="color:#999999;">支持：pdf.ppt.pptx.doc.docx.xls.xlsx.jpeg.png.gif.zip</span>
+            <div class="main_item">
+              <div class="signbox">
+                <div class="sign">
+                  <img src="@/assets/images/coursewareManage/enclosure.png" alt="" />
+                </div>
+                <span style="margin-right: 3px">附件：</span>
+              </div>
+              <div class="btnbox">
+                <a-upload v-model:file-list="fileList" name="file" action="/api/file/upload" @change="handleChange">
+                  <button class="xkbtn" type="button">上传附件</button>
+                </a-upload>
+              </div>
+            </div>
+            <div class="main_item" style="margin-top:-25px;">
+              <div class="signbox">
+              </div>
+              <div class="btnbox">
+                <span style="color:#999999;">支持：pdf.ppt.pptx.doc.docx.xls.xlsx.jpeg.png.gif.zip</span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="main_btns">
-        <a-button class="btn1"  @click="closeDrawer">取消</a-button>
-        <a-button class="btn2" html-type="submit">确定</a-button>
-      </div>
-    </a-form>
+        <div class="main_btns">
+          <a-button class="btn1" @click="closeDrawer">取消</a-button>
+          <a-button class="btn2" html-type="submit">确定</a-button>
+        </div>
+      </a-form>
 
     </div>
   </a-drawer>
 </template>
 <script>
 import { reactive, ref } from "vue";
-import {message} from"ant-design-vue";
-import { createWorkTask, queryWorkDetailById, updateWorkTaskUsing} from "@/api/indexWork";
-import { ProjectEditTask,RouterEditTask } from "@/api/indexTask";
+import { message } from "ant-design-vue";
+import { createWorkTask, queryWorkDetailById, updateWorkTaskUsing } from "@/api/indexWork";
+import { ProjectEditTask, RouterEditTask } from "@/api/indexTask";
 import { storage } from "../../api/storage";
 import dayjs from 'dayjs';
 
@@ -135,18 +99,34 @@ export default {
       type: Boolean,
       default: false,
     },
-    flag: {
-      type: Number,
-      default: 0,
+    edit: { //  是否为编辑
+      type: Boolean,
+      default: null,
     },
-    projectTaskId: {
+    projectId: {
       type: Number,
-      default: 0,
+      default: null,
+    },
+    chooseStageId: {
+      type: Number,
+      default: null,
     },
     routerTaskId: {
       type: Number,
       default: 0,
-    }
+    },
+    isLevel: { // 是否是关卡页面触发
+      type: Boolean,
+      default: null,
+    },
+    EditWorkId: { // 要编辑的workId 
+      type: Number,
+      default: null,
+    },
+    projectTaskId: { // 要编辑的projectId 
+      type: Number,
+      default: null,
+    },
   },
   setup(props, ctx) {
     const formState = reactive({
@@ -156,7 +136,7 @@ export default {
     });
     const formRef = ref();
     const state = reactive({
-      routerId: storage.get("routerId") ?JSON.parse(storage.get("routerId"))  : null,
+      routerId: storage.get("routerId") ? JSON.parse(storage.get("routerId")) : null,
     })
 
     let checkWorkName = async (_rule, value) => {
@@ -237,97 +217,133 @@ export default {
       fileList.value = [];
       formState.choosedTime = '';
       ctx.emit("update:addhomeworkVisible", false);
+      ctx.emit("update:edit", false);
     };
     const afterVisibleChange = (bool) => {
-      if(props.addhomeworkVisible && props.workId){
-        queryWork({workId: props.workId})
+      if (props.addhomeworkVisible && props.edit) { // 该页面显示同时 edit为true 时，发送查询请求, 
+        queryWork()
       }
       console.log("state", bool);
     };
-    const queryWork = (data) => {
-      queryWorkDetailById(data).then((res) => {
-        console.log(dayjs(res.data.data.submitStartTime).format("YYYY-MM-DD"));
-        formState.workName = res.data.data.workName;
-        formState.workRequirement = res.data.data.workRequirement;
-        formState.choosedTime=[dayjs(res.data.data.submitStartTime,"YYYY-MM-DD"),dayjs(res.data.data.submitEndTime,"YYYY-MM-DD")]
-        console.log(res);
-      }).catch(() => {
-        message.error(`查询失败`)
-      })
+
+    const updateWork = () => {
+
+      // 如果是关卡页面进入 ---------------------------------
+      if (props.isLevel) {
+        myRouterEditTask()
+      } else { // 任务页面进入------------------------------
+        if (props.edit) { // 编辑任务
+          myUpdateWorkTaskUsing()
+        } else {  // 创建任务
+          console.log('创建任务***************');
+          myCreateWorkTask()
+        }
+      }
     };
-    const updateWork = (id) => {
-      let obj = {
-        "createTime": "",
-        "createUser": 0,
-        "submitEndTime": dayjs(formState.choosedTime[1]).format("YYYY-MM-DD"),
-        "submitStartTime": dayjs(formState.choosedTime[0]).format("YYYY-MM-DD"),
-        "updateTime": "",
-        "updateUser": 0,
-        "workEnclosureAddress": "",
-        "workFlag": "",
-        "workId": id || 0,
-        "workName": formState.workName,
-        "workRequirement": formState.workRequirement,
-        "workTag": ""
-      }
-      if(id) {
-        updateWorkTaskUsing(obj).then((res) => {
-        console.log(res);
-      }).catch((err) => {
-        message.error(`编辑失败${err}`)
-      })
-      } else {
-        createWorkTask(obj).then((res)=>{
+
+        // 新增任务
+        const myCreateWorkTask = () => {
+          let obj = {
+            "createTime": "",
+            "createUser": 0,
+            "submitEndTime": dayjs(formState.choosedTime[1]).format("YYYY-MM-DD"),
+            "submitStartTime": dayjs(formState.choosedTime[0]).format("YYYY-MM-DD"),
+            "updateTime": "",
+            "updateUser": 0,
+            "workEnclosureAddress": "",
+            "workFlag": "",
+            "workId": 0,
+            "workName": formState.workName,
+            "workRequirement": formState.workRequirement,
+            "workTag": ""
+          }
+          createWorkTask(obj).then((res) => {
+            myProjectEditTask(res.data.data.workId);
+          }).catch((err) => {
+            message.error(`添加失败${err}`)
+          })
+        }
+        // 编辑任务
+        const myUpdateWorkTaskUsing = () => {
+          let editObj = {
+            "createTime": "",
+            "createUser": 0,
+            "submitEndTime": dayjs(formState.choosedTime[1]).format("YYYY-MM-DD"),
+            "submitStartTime": dayjs(formState.choosedTime[0]).format("YYYY-MM-DD"),
+            "updateTime": "",
+            "updateUser": 0,
+            "workEnclosureAddress": "",
+            "workFlag": "",
+            "workId": props.EditWorkId,
+            "workName": formState.workName,
+            "workRequirement": formState.workRequirement,
+            "workTag": ""
+          }
+          updateWorkTaskUsing(editObj).then((res) => {
           console.log(res);
-      }).catch((err)=>{
-        message.error(`添加失败${err}`)
-      })
-      }
-      if(props.flag == 1) {
-        let editObj = {
-        "courseId": 0,
-        "duration": 0,
-        "flag": true,
-        "name": formState.workName,
-        "projectId": 0,
-        "projectTaskId": props.workId || '',
-        "stageId": 0,
-        "type": 4
-      }
-      // 新增编辑或新增项目任务
-      ProjectEditTask(editObj).then(res => {
-        console.log(` 编辑项目成功的打印 ${res}`);
-        message.success(`${props.workId? '编辑' : '新增'}阶段任务成功`)
-        closeDrawer();
-      }).catch(err => {
-        message.error(`${props.workId? '编辑' : '新增'}阶段任务失败`)
-        console.log(` 编辑项目失败的打印 ${err}`);
-      })
-      } else {
-        let editObj1 = {
-          "chapterId":36,
-          "courseId": 0,
-          "duration": 0,
+          myProjectEditTask(res.data.data.workId)
+        }).catch((err) => {
+          message.error(`编辑失败${err}`)
+        })
+        }
+        // 查询任务
+        const queryWork = () => {
+          queryWorkDetailById({workId:props.EditWorkId}).then((res) => {
+            console.log(dayjs(res.data.data.submitStartTime).format("YYYY-MM-DD"));
+            formState.workName = res.data.data.workName;
+            formState.workRequirement = res.data.data.workRequirement;
+            formState.choosedTime = [dayjs(res.data.data.submitStartTime, "YYYY-MM-DD"), dayjs(res.data.data.submitEndTime, "YYYY-MM-DD")]
+            console.log(res);
+          }).catch(() => {
+            message.error(`查询失败`)
+          })
+        };
+        // 新增编辑或新增项目任务
+        const myProjectEditTask = (workId) => {
+          let editObj = {
+          "courseId": workId,
+          "duration": 60,
           "flag": true,
           "name": formState.workName,
-          "routerId": Number(storage.get('routerId')),
-          "routerTaskId": '',
+          "projectId": props.projectId,
+          "projectTaskId":  props.projectTaskId || null,
+          "stageId": props.chooseStageId,
           "type": 4
         }
-        // 新增编辑或新增关卡任务
-      RouterEditTask(editObj1).then(res => {
-        console.log(` 编辑关卡成功的打印 ${res}`);
-        message.success(`${props.workId? '编辑' : '新增'}关卡任务成功`)
-        closeDrawer();
-      }).catch(err => {
-        message.error(`${props.workId? '编辑' : '新增'}关卡任务失败`)
-        console.log(` 编辑关卡失败的打印 ${err}`);
-      })
-      }
-      
-      
+        ProjectEditTask(editObj).then(res => {
+          console.log(` 编辑项目成功的打印 ${res}`);
+          message.success(`${props.edit ? '编辑' : '新增'}阶段任务成功`)
+          ctx.emit("changeData", false);
+          closeDrawer();
+        }).catch(err => {
+          message.error(`${props.edit ? '编辑' : '新增'}阶段任务失败`)
+          console.log(` 编辑项目失败的打印 ${err}`);
+        })
+
+        }
+        // 新增编辑或新增关卡任务
+        const myRouterEditTask = () => {
+          let editObj1 = {
+            "chapterId": 70,
+            "courseId": 0,
+            "duration": 0,
+            "flag": true,
+            "name": formState.workName,
+            "routerId": Number(storage.get('routerId')),
+            "routerTaskId": 0,
+            "type": 4
+          }
+
+          RouterEditTask(editObj1).then(res => {
+            console.log(` 编辑关卡成功的打印 ${res}`);
+            message.success(`${props.workId ? '编辑' : '新增'}关卡任务成功`)
+            closeDrawer();
+          }).catch(err => {
+            message.error(`${props.workId ? '编辑' : '新增'}关卡任务失败`)
+            console.log(` 编辑关卡失败的打印 ${err}`);
+          })
+        }
 
-    };
     return {
       afterVisibleChange,
       closeDrawer,
@@ -342,7 +358,6 @@ export default {
       formRef,
       // layout,
       rules,
-      queryWork,
       updateWork,
       state,
     };
@@ -353,6 +368,7 @@ export default {
 .ant-table-striped :deep(.table-striped) td {
   background-color: #fafafa !important;
 }
+
 .addhomeworkDrawer {
   .drawerMain {
     .header {
@@ -362,6 +378,7 @@ export default {
       justify-content: space-between;
       align-items: center;
       flex-shrink: 0;
+
       .headerTitle {
         font-size: 18px;
         font-weight: 600;
@@ -370,30 +387,37 @@ export default {
         margin-left: 24px;
       }
     }
+
     .contentMain {
       display: flex;
       justify-content: space-between;
+
       .main_left {
         padding-right: 30px;
         flex: 1;
         border-right: 1px solid #e8e8e8;
+
         .main_item {
           display: flex;
           align-items: center;
           margin-bottom: 32px;
+
           .signbox {
             width: 120px;
             display: flex;
             justify-content: end;
             align-items: center;
+
             .sign {
               margin-right: 5px;
             }
           }
+
           .btnbox {
             display: flex;
             flex: 1;
             align-items: center;
+
             .xkbtn {
               cursor: pointer;
               width: 130px;
@@ -406,28 +430,34 @@ export default {
             }
           }
         }
+
         .main_item2 {
           display: flex;
           align-items: flex-start;
           margin-bottom: 32px;
+
           .signbox {
             width: 120px;
             display: flex;
             justify-content: end;
             align-items: center;
+
             .sign {
               margin-right: 5px;
             }
           }
+
           .kqszbox {
             .qdqtbox {
               margin-left: 56px;
             }
+
             .setbox {
               display: flex;
               flex-wrap: wrap;
               margin-top: 10px;
               margin-bottom: 24px;
+
               .timerbox {
                 margin-top: 6px;
                 margin-right: 32px;
@@ -437,10 +467,12 @@ export default {
               }
             }
           }
+
           .btnbox2 {
             display: flex;
             flex-direction: column;
             justify-content: flex-start;
+
             .xkbtn {
               cursor: pointer;
               width: 130px;
@@ -457,6 +489,7 @@ export default {
         }
       }
     }
+
     .main_btns {
       position: absolute;
       height: 72px;
@@ -467,6 +500,7 @@ export default {
       align-items: center;
       justify-content: center;
       box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+
       .btn1 {
         width: 100px;
         height: 40px;
@@ -476,6 +510,7 @@ export default {
         background-color: #fff;
         cursor: pointer;
       }
+
       .btn2 {
         cursor: pointer;
         width: 100px;