feat:修改创建任务页面

src/components/BreadCrumb.vue

@@ -103,6 +103,23 @@ export default {
             },
           ];
         }
+        if (n === "/taskadd" || n === "/TaskAdd") {
+          state.list = [
+            {
+              name: "项目",
+              href: "",
+            },
+            {
+              name: "基础信息",
+            },
+            {
+              name: "任务",
+            },
+            {
+              name: "添加任务",
+            }
+          ];
+        }
         if (n === "/templatelibrary" || n === "/TemplateLibrary") {
           state.list = [
             {

src/views/projectcenter/TaskAdd.vue

@@ -3,11 +3,11 @@
     <div class="left clearfix">
       <div class="leftmain">
         <div class="tit">阶段<img src="../../assets/images/projectadd/right.png" style="margin-left: 10px"/></div>
-        <div class="btn btn3">
+        <div class="btn btn3" style="margin-left: 19px">
           <div class="search"></div>
           <div class="btnText">添加阶段</div>
         </div>
-        <div class="maincon">
+        <div class="maincon" style="background-color: #fff">
           <div class="item" v-for="item in level" :key="item.id">
             <div class="itemle">
               <div class="tit">{{ item.tit }}</div>
@@ -32,14 +32,14 @@
               <img class="img" src="../../assets/images/projectadd/picture.png" />
             </div>
             <div class="imgfor">
-              <div class="forz" style="font-weight: 500">管理者进阶-腾飞班</div>
+              <div class="forz" style="font-weight: 700">管理者进阶-腾飞班</div>
             </div>
           </div>
           <div class="rightt">
             <div class="select">
               <a-select
                 v-model:value="projectName"
-                style="width: 270px"
+                style="width: 200px"
                 placeholder="自由学习模式"
                 :options="projectNameList"
                 @change="selectProjectName"
@@ -51,23 +51,16 @@
             <img class="img2" src="../../assets/images/projectadd/keep.png" />
             <div class="pub">保存</div>
             <div class="line"></div>
-            <img class="img2" src="../../assets/images/leveladd/back.png" />
             <router-link to="/taskpage">
-              <div class="return">返回</div></router-link
+              <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="(item, index) in mid" :key="item.id">
-          <div class="itcon">
-            <div class="img">
-              <img :src="item.img" />
-            </div>
-            <div class="text">{{ item.title }}</div>
-          </div>
-          <div :class="[index === mid.length - 1 ? 'no' : 'lin']"></div>
-        </div> -->
         <div class="item">
           <div class="itcon">
             <div class="img">
@@ -185,7 +178,7 @@
                         <img class="editimg" src="../../assets/images/projectadd/delete.png"/>
                         <span class="editext">批量删除</span>
                     </div>
-                </div>
+          </div>
           <div class="talk">
             <img class="im" src="../../assets/images/leveladd/gan.png" />
             <div class="xu">
@@ -194,7 +187,7 @@
               <span class="th">3</span>
               <div style="width: 5px; display: inline-block"></div>
               <span class="yi">项</span>
-              <span class="zon">人物总数：</span>
+              <span class="zon">任务总数：</span>
               <span class="yi">5</span>
               <span class="yi">条</span>
             </div>
@@ -206,13 +199,15 @@
               :data-source="tableData"
               :loading="tableDataTotal === -1 ? true : false"
               expandRowByClick="true"
-              :scroll="{ x: 1500, y: 300 }"
               @expand="expandTable"
               :pagination="false"
+              :row-selection="{
+                columnWidth: 30,
+                selectedRowKeys: selectedRowKeys,
+                onChange: onSelectChange,
+              }"
             />
-            <!-- :pagination= showSizeChanger: true, showQuickJumper: true,
+
-      hideOnSinglePage: true, pageSizeOptions: [], pageSize: pageSize, current:
-      currentPage, total: tableDataTotal, -->
             <div class="pa">
               <a-pagination
                 showSizeChanger="true"
@@ -233,7 +228,7 @@
           class="drawerStyle"
           title="关联项目"
           placement="right"
-          width="50%"
+          width="80%"
           @after-visible-change="afterVisibleChange"
         >
           <div class="drawerMain">
@@ -268,7 +263,7 @@
 </template>
 
 <script>
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs, onMounted, onUnmounted } from "vue";
 const drawercolumns = [
   {
     title: "项目名称",
@@ -336,16 +331,11 @@ export default {
       projectNameList2: [
         {
           id: 1,
-          value: "批量操作",
-          label: "批量操作",
-        },
-        {
-          id: 2,
           value: "删除任务",
           label: "删除任务",
         },
         {
-          id: 3,
+          id: 2,
           value: "移动任务到关卡",
           label: "移动任务到关卡",
         },
@@ -359,7 +349,22 @@ export default {
         {
           id: "2",
           tit: "阶段2",
-          name: "腾飞班1基础",
+          name: "腾飞班基础",
+        },
+        {
+          id: "2",
+          tit: "阶段2",
+          name: "中级产品经理",
+        },
+        {
+          id: "2",
+          tit: "阶段2",
+          name: "中级产品经理",
+        },
+        {
+          id: "2",
+          tit: "阶段2",
+          name: "中级产品经理",
         },
       ],
       tableData: [
@@ -385,6 +390,17 @@ export default {
           checked1: false,
           checkedd: false,
         },
+        {
+          key: 1,
+          lei: "在线",
+          // state: "已发布",
+          creater: "管理者课程",
+          // pubtime: "2022-07-20 14:00:03",
+          cretime: "60分钟",
+          haspub: false,
+          checked1: false,
+          checkedd: false,
+        },
         {
           key: 3,
           lei: "作业",
@@ -413,7 +429,29 @@ export default {
           // state: "草稿",
           creater: "腾飞班1案例",
           // pubtime: "2022-07-20 14:00:03",
-          cretime: "-",
+          cretime: "20分钟",
+          haspub: true,
+          checked1: true,
+          checkedd: false,
+        },
+        {
+          key: 4,
+          lei: "考试",
+          // state: "草稿",
+          creater: "管理者考试",
+          // pubtime: "2022-07-20 14:00:03",
+          cretime: "20分钟",
+          haspub: true,
+          checked1: false,
+          checkedd: false,
+        },
+        {
+          key: 5,
+          lei: "案例",
+          // state: "草稿",
+          creater: "腾飞班1案例",
+          // pubtime: "2022-07-20 14:00:03",
+          cretime: "20分钟",
           haspub: true,
           checked1: true,
           checkedd: false,
@@ -518,6 +556,7 @@ export default {
       tableDataTotal: 100,
       pageSize: 10,
       visible: false,
+      selectedRowKeys: [],
     });
     const selectProjectName = (value, index) => {
       console.log("value", value, index);
@@ -538,18 +577,29 @@ export default {
           dataIndex: "state",
           // width: "30%",
           key: "state",
-          width: 90,
+          width: 60,
-          align: "center",
+          align: "left",
-          className: "h",
+          className: "classify",
           scopedSlots: { customRender: "action" }, //引入的插槽
           customRender: (text) => {
-            console.log(text.record.checked1);
+            // console.log(text.record.checked1);
             return (
               <div class="racona">
-                <div class="img"></div>
+                <div
-                <a-checkbox class="ch" v-model:checked={text.record.checkedd}>
+                  class="img"
+                  style={{ cursor: "pointer" }}
+                  onClick={() => {
+                    console.log("点击了");
+                  }}
+                ></div>
+                <span> {text.record.lei}</span>
+
+                {/**
+								<div class="img"></div>
+                <a-checkbox class="ch" checked={text.record.checkedd}>
                   {text.record.lei}
                 </a-checkbox>
+*/}
               </div>
             );
           },
@@ -567,20 +617,24 @@ export default {
           title: "必修/选修",
           dataIndex: "pubtime",
           key: "pubtime",
-          width: 200,
+          // width: 100,
           align: "center",
           className: "h",
           scopedSlots: { customRender: "action" }, //引入的插槽
           customRender: (text) => {
-            console.log(text.record.checked1);
+            // console.log(text.record.checked1);
             return (
               <div class="opat">
                 <div class="opacationt clearfix">
                   <a-switch
                     style="margin-left:-50px;margin-top:3px"
-                    v-model:checked={text.record.checked1}
+                    checked={text.record.checked1}
                     size="small"
                     active-color="red"
+                    onClick={() => {
+                      console.log("点击了");
+                      text.record.checked1 = !text.record.checked1;
+                    }}
                   />
                   <div class="showt clearfix">
                     <div
@@ -602,7 +656,7 @@ export default {
           title: "时长",
           dataIndex: "cretime",
           key: "cretime",
-          width: 100,
+          // width: 100,
           align: "center",
           className: "h",
         },
@@ -611,7 +665,7 @@ export default {
           className: "h",
           dataIndex: "opacation",
           key: "opacation",
-          width: 100,
+          // width: 100,
           align: "center",
           scopedSlots: { customRender: "action" }, //引入的插槽
           customRender: () => {
@@ -631,6 +685,30 @@ export default {
       return columns;
     };
 
+    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";
+    // };
+
+    onMounted(() => {
+      document.getElementsByTagName("main")[0].style.background =
+        "rgb(245, 247, 250,1)";
+      document.getElementsByTagName("main")[0].style.boxShadow = "none";
+    });
+    onUnmounted(() => {
+      document.getElementsByTagName("main")[0].style.background = "#ffffff";
+      document.getElementsByTagName("main")[0].style.boxShadow =
+        "0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
+    });
     return {
       ...toRefs(state),
       selectProjectName,
@@ -639,12 +717,13 @@ export default {
       showDrawer,
       afterVisibleChange,
       drawercolumns,
+      onSelectChange,
     };
   },
 };
 </script>
 
-<style  lang="scss" >
+<style lang="scss">
 .clearfix:after,
 .clearfix:before {
   content: " ";
@@ -654,7 +733,7 @@ export default {
 
 .drawerStyle {
   .ant-drawer-content-wrapper {
-    max-width: 1000px;
+    // max-width: 1000px;
     .ant-drawer-header {
       display: none !important;
     }
@@ -730,22 +809,28 @@ export default {
 }
 .allCon {
   width: 100%;
-  height: 100%;
-  background-color: #f1f4f8;
   display: flex;
+  min-width: 933px;
+  // min-width: 1200px;
+  // overflow-x: hidden;
+  // min-width: 1400px;
+  // overflow: scroll;
+  background-color: rgba(245, 247, 250, 1);
   .left {
     margin-right: 20px;
     width: 208px;
-    flex-shrink: 0;
+    // height: 100%;
-    height: 100%;
+    // flex: 1;
+    // height: 100%;
     background: #ffffff;
     box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
     display: flex;
     justify-content: center;
     .leftmain {
-      width: 86%;
+      // width: 86%;
       margin-top: 20px;
       .tit {
+        margin-left: 20px;
         font-size: 18px;
         color: #363636;
       }
@@ -777,6 +862,7 @@ export default {
       }
 
       .btn3 {
+        width: 171px;
         margin-right: 0px;
         .search {
           width: 17px;
@@ -787,10 +873,12 @@ export default {
       }
       .maincon {
         margin-top: 17px;
-        width: 100%;
+        width: 208px;
-        // background-color: #bfa;
+        display: flex;
+        flex-direction: column;
+        align-items: center; // background-color: #bfa;
         .item {
-          width: 100%;
+          width: 171px;
           height: 83px;
           display: flex;
           background: rgba(255, 182, 78, 0.1);
@@ -834,8 +922,6 @@ export default {
   }
   .right {
     flex: 1;
-    height: 100%;
-    width: 100%;
     // background-color: #fff;
     display: flex;
     flex-direction: column;
@@ -843,7 +929,7 @@ export default {
       width: 100%;
       // min-width: 500px;
       // height: 130px;
-
+      // flex: 1;
       background-color: #fff;
       box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
       display: flex;
@@ -901,24 +987,35 @@ export default {
             height: 60px;
             width: 1px;
             background-color: #e8effa;
-            margin-right: 28px;
+            margin-right: 18px;
           }
           .img2 {
             width: 42px;
             height: 42px;
-            margin-right: 22px;
+            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: 5px;
+            margin-top: 13px;
             margin-right: 20px;
+            white-space: nowrap;
           }
 
           .role {
@@ -973,16 +1070,17 @@ export default {
 
     .mid {
       width: 100%;
-      height: 130px;
+      // height: 130px;
       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: 100%;
+        height: 115px;
-        width: 7.7%;
+        // width: 7.7%;
         display: flex;
         align-items: center;
         .itcon {
@@ -992,6 +1090,8 @@ export default {
           justify-content: center;
           height: 100%;
           width: 100%;
+          margin-left: 38px;
+          margin-right: 38px;
           .img {
             cursor: pointer;
           }
@@ -999,6 +1099,7 @@ export default {
             font-size: 16px;
             color: #363636;
             margin-top: 5px;
+            white-space: nowrap;
           }
         }
         .lin {
@@ -1021,7 +1122,7 @@ export default {
       justify-content: center;
       .boomcen {
         width: 95%;
-        height: 100%;
+        // height: 100%;
         // background-color: #bfa;
         .onerow {
             width: 100%;
@@ -1108,7 +1209,22 @@ export default {
           }
         }
         .tableBox {
-          // margin: 20px 38px 30px;
+          margin-bottom: 80px;
+          .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;
           }
@@ -1143,10 +1259,6 @@ export default {
     //     background: #f6f9fd;
     //   }
     // }
-    .draw {
-      .drawerbox {
-      }
-    }
   }
 
   .opat {
@@ -1191,18 +1303,20 @@ export default {
     // background-color: #bfa;
     display: flex;
     align-items: center;
-    justify-content: center;
+    // justify-content: center;
     height: 100%;
     .img {
-      margin-left: -40px;
+      // margin-left: -40px;
-      margin-top: -2px;
+      // margin-top: -2px;
       width: 17px;
       height: 14px;
       background-image: url("../../assets/images/leveladd/z1.png");
+      position: absolute;
+      left: -40px;
     }
     .ch {
       margin-left: 10px;
     }
   }
 }
-</style>
+</style>

src/views/projectcenter/TaskPage.vue

@@ -59,10 +59,10 @@
                 <div class="onerow">
                     <div class="taskmain">任务大纲</div>
                     <button class="btn">批量面授报名</button>
-                    <div class="edit">
+                    <router-link to="/taskadd" class="edit">
                         <img class="editimg" src="../../assets/images/projectadd/edit.png"/>
                         <span class="editext">编辑</span>
-                    </div>
+                    </router-link>
                 </div>
                 <div class="stage">
                     <span class="stageimg"><img src="../../assets/images/projectadd/open.png"/></span>