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/learningpath/LearningPath.vue

@@ -90,7 +90,12 @@
 
     <!-- 表格 -->
 
-    <a-modal v-model:visible="out" footer="null" style="margin-top: 400px">
+    <a-modal
+      :closable="sh"
+      v-model:visible="out"
+      :footer="null"
+      style="margin-top: 400px"
+    >
       <div class="out">
         <div class="top">
           <img class="topimg" src="../../assets/images/courseManage/add1.png" />
@@ -203,6 +208,7 @@ export default {
       out: false,
       number: null,
       selectTime: null,
+      sh: false,
       tableData: [
         {
           key: 1,

src/views/learningpath/LevelAdd.vue

@@ -20,7 +20,7 @@
           src="../../assets/images/leveladd/more.png"
         />
         <div class="more">
-          <span style="color: #7096e3">更多</span>
+          <span style="color: #7096e3; cursor: pointer">更多</span>
           <div class="moreArrow"></div>
           <div class="moreItems">
             <div class="sammo">撤回</div>
@@ -137,9 +137,88 @@
             <div class="pad"></div>
           </div>
         </a-tab-pane>
-        <a-tab-pane key="2" tab="学员管理" force-render
+        <a-tab-pane key="2" tab="学员管理" force-render>
-          ><div class="sametab"></div
+          <div class="xwid">
+            <div class="pad"></div>
+            <div class="xin" style="overflow-x: auto">
+              <div class="xhead">
+                <a-input
+                  v-model:value="gatenamee"
+                  style="width: 270px; height: 40px; border-radius: 8px"
+                  placeholder="关卡名称"
+                />
+                <div class="btns">
+                  <div class="btn btn1">
+                    <div class="search"></div>
+                    <div class="btnText">搜索</div>
+                  </div>
+                  <div class="btn btn2">
+                    <div class="search"></div>
+                    <div class="btnText">重置</div>
+                  </div>
+                </div>
+              </div>
+              <div class="xheadb">
+                <button class="addx">添加学员</button>
+                <button class="addd">导入学员</button>
+                <div class="select">
+                  <a-select
+                    v-model:value="projectName"
+                    style="width: 130px"
+                    placeholder="更多操作"
+                    :options="projectNameListt"
+                    @change="selectProjectName"
+                    allowClear
+                    showSearch
+                  ></a-select>
+                </div>
+              </div>
+              <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>
+                </div>
+              </div>
+              <div class="tableBox" style="margin-top: 30px">
+                <a-table
+                  style="border: 1px solid #f2f6fe"
+                  :columns="tableDataFunc()"
+                  :scroll="{ x: 1600, y: 235 }"
+                  :data-source="tableData"
+                  :loading="tableDataTotal === -1 ? true : false"
+                  expandRowByClick="true"
+                  @expand="expandTable"
+                  :pagination="false"
+                  :row-selection="{
+                    columnWidth: 30,
+                    selectedRowKeys: selectedRowKeys,
+                    onChange: onSelectChange,
+                  }"
+                />
+
+                <div class="pa">
+                  <a-pagination
+                    showSizeChanger="true"
+                    showQuickJumper="true"
+                    hideOnSinglePage="true"
+                    :pageSize="pageSize"
+                    :current="currentPage"
+                    :total="tableDataTotal"
+                    class="pagination"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="pad"></div></div
         ></a-tab-pane>
+
         <a-tab-pane key="3" tab="设置">
           <div class="sametab">
             <div class="Gcon">
@@ -259,6 +338,43 @@
           </div></a-tab-pane
         >
       </a-tabs>
+      <a-modal
+        style="padding: 0"
+        :closable="sh"
+        v-model:visible="visible"
+        :footer="null"
+        centered="true"
+      >
+        <div class="con">
+          <div class="header">
+            <div class="inhe">
+              <div class="mod"></div>
+              <div class="tz">调整关卡</div>
+              <div class="mg"></div>
+            </div>
+          </div>
+          <div class="mid">
+            <div class="inher">
+              <div class="cur">当前关卡：</div>
+              <div class="select">
+                <a-select
+                  v-model:value="projectName"
+                  style="width: 100%"
+                  placeholder="请选择关卡"
+                  :options="projectNameList4"
+                  @change="selectProjectName4"
+                  allowClear
+                  showSearch
+                ></a-select>
+              </div>
+              <div class="btn">
+                <button class="sameb btn1">取消</button>
+                <button class="sameb btn2">确定</button>
+              </div>
+            </div>
+          </div>
+        </div></a-modal
+      >
     </div>
   </div>
 </template>
@@ -271,6 +387,29 @@ export default {
   setup() {
     const state = reactive({
       gatename: null, //关卡名称
+      gatenamee: null, //学员管理关卡名称
+      projectNameListt: [
+        {
+          id: 1,
+          value: "项目一",
+          label: "项目一",
+        },
+        {
+          id: 2,
+          value: "项目二",
+          label: "项目二",
+        },
+        {
+          id: 3,
+          value: "项目三",
+          label: "项目三",
+        },
+        {
+          id: 4,
+          value: "项目四",
+          label: "项目四",
+        },
+      ],
       projectNameList: [
         {
           id: 1,
@@ -315,9 +454,31 @@ export default {
           label: "项目四",
         },
       ],
+      projectNameList4: [
+        {
+          id: 1,
+          value: "请选择关卡",
+          label: "请选择关卡",
+        },
+        {
+          id: 2,
+          value: "关卡1",
+          label: "关卡1",
+        },
+        {
+          id: 3,
+          value: "关卡2",
+          label: "关卡2",
+        },
+      ],
       activeKey: ref("1"),
       value: ref(" "),
       checked2: false,
+      currentPage: 1,
+      tableDataTotal: 100,
+      pageSize: 10,
+      visible: false,
+      sh: false,
       level: [
         {
           id: 1,
@@ -342,6 +503,80 @@ export default {
           test: 1,
         },
       ],
+      tableData: [
+        {
+          key: 1,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡2",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+        {
+          key: 2,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡2",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+        {
+          key: 3,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡2",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+        {
+          key: 4,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡1",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+        {
+          key: 5,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡1",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+        {
+          key: 6,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡2",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+        {
+          key: 7,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡2",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+        {
+          key: 8,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡2",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+      ],
     });
     const selectProjectName = (value, index) => {
       console.log("value", value, index);
@@ -349,10 +584,129 @@ export default {
     const selectProjectName2 = (value, index) => {
       console.log("value", value, index);
     };
+    const selectProjectName3 = (value, index) => {
+      console.log("value", value, index);
+    };
+    const selectProjectName4 = (value, index) => {
+      console.log("value", value, index);
+    };
+    const tableDataFunc = () => {
+      const columns = [
+        {
+          title: "姓名",
+          dataIndex: "name",
+          // width: "30%",
+          key: "name",
+          width: 100,
+          align: "left",
+          className: "classify",
+
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: (text) => {
+            // console.log(text.record.checked1);
+            return (
+              <div class="racona">
+                <span> {text.record.name}</span>
+
+                {/**
+								<div class="img"></div>
+                <a-checkbox class="ch" checked={text.record.checkedd}>
+                  {text.record.lei}
+                </a-checkbox>
+*/}
+              </div>
+            );
+          },
+        },
+        {
+          title: "部门",
+          dataIndex: "com",
+          // width: "30%",
+          key: "com",
+          width: 110,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "岗位",
+          dataIndex: "gang",
+          key: "gang",
+          width: 110,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "当前关卡",
+          dataIndex: "cur",
+          key: "cur",
+          width: 110,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "进度",
+          dataIndex: "jin",
+          key: "jin",
+          width: 110,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "开始时间",
+          dataIndex: "time",
+          key: "time",
+          width: 110,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "操作",
+          className: "h",
+          dataIndex: "opacation",
+          key: "opacation",
+          width: 110,
+          align: "center",
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: () => {
+            return (
+              <div class="opa">
+                <div class="opacation">
+                  <span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
+                    查看
+                  </span>
+                  <span
+                    onClick={() => {
+                      state.visible = true;
+                    }}
+                    style="color:#4EA6FF;margin-right:25px;cursor:pointer"
+                  >
+                    调整
+                  </span>
+                  <span style="color:#4EA6FF;cursor:pointer">删除</span>
+                </div>
+              </div>
+            );
+          },
+        },
+      ];
+      return columns;
+    };
+    const onSelectChange = (selectedRowKeys) => {
+      console.log("selectedRowKeys changed: ", selectedRowKeys);
+      state.selectedRowKeys = selectedRowKeys;
+    };
+    const showModal = () => {
+      state.visible = true;
+    };
     return {
       ...toRefs(state),
       selectProjectName,
       selectProjectName2,
+      selectProjectName3,
+      selectProjectName4,
+      tableDataFunc,
+      onSelectChange,
+      showModal,
     };
   },
 };
@@ -364,6 +718,102 @@ export default {
   display: block;
   clear: both;
 }
+.ant-modal {
+  .ant-modal-content {
+    width: 549px !important;
+    .ant-modal-body {
+      padding: 0 !important;
+      width: 549px !important;
+      height: 245px !important;
+      .con {
+        // background-color: #bfa;
+        width: 100%;
+        height: 100%;
+
+        .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%
+          );
+          .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);
+            }
+            .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%;
+            }
+          }
+        }
+        .mid {
+          width: 100%;
+          display: flex;
+          height: 100%;
+          justify-content: center;
+          .inher {
+            width: 80%;
+            height: 100%;
+            .cur {
+              color: #6f6f6f;
+              font-size: 14px;
+            }
+            .select {
+              margin-top: 10px;
+            }
+            .btn {
+              width: 100%;
+              display: flex;
+              justify-content: center;
+              margin-top: 30px;
+              .sameb {
+                width: 100px;
+                height: 40px;
+                font-size: 14px;
+
+                border-radius: 8px;
+              }
+              .btn1 {
+                color: #4ea6ff;
+                background: #ffffff;
+                border: 1px solid #4ea6ff;
+              }
+              .btn2 {
+                margin-left: 16px;
+                border: 0;
+                color: #ffffff;
+                background: #4ea6ff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .addwrapper {
   width: 100%;
   height: 100%;
@@ -432,6 +882,7 @@ export default {
         font-size: 14px;
         margin-top: 5px;
         margin-right: 30px;
+        cursor: pointer;
       }
       .return {
         color: #4ea6ff;
@@ -466,9 +917,11 @@ export default {
           left: -48px;
           top: 30px;
           z-index: 100;
+          cursor: pointer;
           .sammo {
             text-align: center;
             margin-top: 12px;
+            cursor: pointer;
           }
           .sammo:hover {
             color: #4ea6ff;
@@ -523,6 +976,7 @@ export default {
     }
     .cont {
       display: flex;
+
       .pad {
         height: 100%;
         width: 40px;
@@ -690,6 +1144,7 @@ export default {
                 .te {
                   color: #4ea6ff;
                   font-size: 14px;
+                  cursor: pointer;
                 }
                 .more {
                   position: relative;
@@ -724,6 +1179,7 @@ export default {
                       line-height: 36px;
                       display: flex;
                       justify-content: center;
+                      cursor: pointer;
                     }
                     .roleItem:hover {
                       color: #4ea6ff;
@@ -742,6 +1198,200 @@ export default {
         }
       }
     }
+    .xwid {
+      // width: 100%;
+      // height: 100%;
+      // background-color: #bfa;
+      position: relative;
+      margin-top: 30px;
+      display: flex;
+      margin-bottom: 20px;
+      // overflow-x: auto;
+      .pad {
+        height: 100%;
+        width: 40px;
+        flex-shrink: 0;
+      }
+      .xin {
+        width: 100%;
+        .xhead {
+          display: flex;
+          .btns {
+            display: flex;
+            margin-left: 20px;
+            // flex-wrap: wrap;
+            .btn {
+              padding: 0px 26px 0px 26px;
+              height: 38px;
+              background: rgba(64, 158, 255, 0);
+              border-radius: 8px;
+              border: 1px solid rgba(64, 158, 255, 1);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-right: 14px;
+              flex-shrink: 0;
+              cursor: pointer;
+              .search {
+                background-size: 100%;
+              }
+              .btnText {
+                font-size: 14px;
+                font-weight: 400;
+                color: rgba(64, 158, 255, 1);
+                line-height: 36px;
+                margin-left: 5px;
+              }
+            }
+            .btn1 {
+              .search {
+                width: 15px;
+                height: 17px;
+                background-image: url("../../assets/images/courseManage/search1.png");
+              }
+            }
+            .btn2 {
+              .search {
+                width: 16px;
+                height: 18px;
+                background-image: url("../../assets/images/courseManage/reset1.png");
+              }
+            }
+            .btn3 {
+              margin-right: 0px;
+              .search {
+                width: 17px;
+                height: 18px;
+                background-image: url("../../assets/images/courseManage/add1.png");
+              }
+            }
+            .btn1:hover {
+              background: rgba(64, 158, 255, 1);
+              .search {
+                background-image: url("../../assets/images/courseManage/search0.png");
+              }
+              .btnText {
+                color: #ffffff;
+              }
+            }
+            .btn2:hover {
+              background: rgba(64, 158, 255, 1);
+              .search {
+                background-image: url("../../assets/images/courseManage/reset0.png");
+              }
+              .btnText {
+                color: #ffffff;
+              }
+            }
+            .btn3:hover {
+              background: rgba(64, 158, 255, 1);
+              .search {
+                background-image: url("../../assets/images/courseManage/add0.png");
+              }
+              .btnText {
+                color: #ffffff;
+              }
+            }
+          }
+        }
+        .xheadb {
+          display: flex;
+          margin-top: 30px;
+          .addx {
+            width: 130px;
+            height: 40px;
+            background: #4ea6ff;
+            border-radius: 8px;
+            color: #fff;
+            border: 0;
+            cursor: pointer;
+            margin-right: 20px;
+          }
+          .addd {
+            width: 130px;
+            height: 40px;
+            background: #fff;
+            border-radius: 8px;
+            border: 1px solid #4ea6ff;
+            color: #4ea6ff;
+            cursor: pointer;
+            margin-right: 20px;
+          }
+        }
+        .talk {
+          margin-top: 24px;
+          margin-bottom: 11px;
+          width: 100%;
+          height: 50px;
+          background: #f5faff;
+          border: 1px solid #4ea6ff;
+          // opacity: 0.22;
+          display: flex;
+          align-items: center;
+          .im {
+            width: 14px;
+            height: 15px;
+            margin-left: 27px;
+            margin-top: -3px;
+          }
+          .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: 80px;
+
+          .classify {
+            margin-left: 11px !important;
+            padding-left: 9px !important;
+          }
+          .ant-checkbox-wrapper {
+            align-items: center;
+            margin-top: -2px;
+          }
+          .ant-table-selection-column {
+            padding: 0px !important;
+            padding-left: 45px !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%;
+            // height: 20px;
+            // background-color: red;
+            display: flex;
+            justify-content: center;
+            position: absolute;
+            bottom: 0px;
+          }
+        }
+      }
+    }
     .Gcon {
       display: flex;
       .pad {
@@ -769,6 +1419,7 @@ export default {
           .oneedi {
             margin-left: 15px;
             color: #4ea6ff;
+            cursor: pointer;
           }
         }
         .onemain {

src/views/learningpath/LevelAddDetail.vue

@@ -66,7 +66,7 @@
               </div>
             </div> -->
             <div class="role">
-              <div>更多</div>
+              <div style="white-space: nowrap">更多</div>
               <div class="roleArrow"></div>
               <div class="roleItems">
                 <div class="roleItem">复制</div>
@@ -1028,13 +1028,24 @@ export default {
             color: #ffb64e;
             font-size: 14px;
             margin-top: 5px;
-            margin-right: 18px;
+            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 {
@@ -1118,6 +1129,7 @@ export default {
             font-size: 16px;
             color: #363636;
             margin-top: 5px;
+            white-space: nowrap;
           }
         }
         .lin {

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" @click="showModal" 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">
@@ -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">
@@ -264,11 +259,65 @@
         </a-drawer>
       </div>
     </div>
+    <div>
+      <a-modal
+        v-model:visible="stage"
+        :title="null"
+        @ok="closeModal"
+        :footer="null"
+        :closable="false"
+        wrapClassName="addstage"
+        width="624px"
+        height="388px"
+      >
+        <div class="modalHeader" 
+             style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
+          >
+          <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 class="inname">阶段名称：</div>
+              </div>
+              <div class="in">
+                <a-input v-model:value="valueE" 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="in">
+                <a-textarea  v-model:value="value" 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=" cursor: pointer;height: 40px;width: 100px;border: 1px solid #387DF7;border-radius: 4px;color: #387DF7;background-color: #FFFFFF"
+            >取消</button>
+            <button @click="closeModal"
+              style=" cursor: pointer;margin-left: 16px;margin-bottom: 40px;height: 40px;width: 100px;border: 1px solid #388BE1;border-radius: 4px;color: #FFFFFF;background-color: #388BE1"
+            >确定</button>
+          </div>
+        </div>
+      </a-modal>
+    </div>
   </div>
 </template>
 
 <script>
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs, onMounted, onUnmounted } from "vue";
 const drawercolumns = [
   {
     title: "项目名称",
@@ -336,16 +385,11 @@ export default {
       projectNameList2: [
         {
           id: 1,
-          value: "批量操作",
-          label: "批量操作",
-        },
-        {
-          id: 2,
           value: "删除任务",
           label: "删除任务",
         },
         {
-          id: 3,
+          id: 2,
           value: "移动任务到关卡",
           label: "移动任务到关卡",
         },
@@ -359,7 +403,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 +444,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 +483,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 +610,8 @@ export default {
       tableDataTotal: 100,
       pageSize: 10,
       visible: false,
+      stage: false,
+      selectedRowKeys: [],
     });
     const selectProjectName = (value, index) => {
       console.log("value", value, index);
@@ -538,18 +632,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"
+                  style={{ cursor: "pointer" }}
+                  onClick={() => {
+                    console.log("点击了");
+                  }}
+                ></div>
+                <span> {text.record.lei}</span>
+
+                {/**
 								<div class="img"></div>
-                <a-checkbox class="ch" v-model:checked={text.record.checkedd}>
+                <a-checkbox class="ch" checked={text.record.checkedd}>
                   {text.record.lei}
                 </a-checkbox>
+*/}
               </div>
             );
           },
@@ -567,20 +672,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 +711,7 @@ export default {
           title: "时长",
           dataIndex: "cretime",
           key: "cretime",
-          width: 100,
+          // width: 100,
           align: "center",
           className: "h",
         },
@@ -611,7 +720,7 @@ export default {
           className: "h",
           dataIndex: "opacation",
           key: "opacation",
-          width: 100,
+          // width: 100,
           align: "center",
           scopedSlots: { customRender: "action" }, //引入的插槽
           customRender: () => {
@@ -631,30 +740,177 @@ 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";
+    // };
+    const showModal = () => {
+      state.stage = true;
+    };
+    const closeModal = () => {
+      state.stage = false;
+    };
+    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,
       selectProjectName2,
       tableDataFunc,
+      showModal,
+      closeModal,
       showDrawer,
       afterVisibleChange,
       drawercolumns,
+      onSelectChange,
     };
   },
 };
 </script>
 
 <style lang="scss">
-.clearfix:after,
-.clearfix:before {
-  content: " ";
-  display: block;
-  clear: both;
-}
 
+.ant-input {
+            border-radius: 8px;
+            // height: 120%;
+            width: 384px;
+            height: 40px;
+}
+.addstage {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0 !important;  
+      .modalMain {
+        
+            .ant-input-textarea-show-count {
+              position: relative;
+              height: 88px;
+            }
+            .ant-input-textarea-show-count::after {
+              position: absolute;
+              right: 10px;
+              bottom: 10px;
+            }        
+       }
+      }
+  }
+}
+.info {
+      width: 78%;
+      // background-color: lightcoral;
+      display: flex;
+      margin-top: 30px;
+      // align-items: center;
+      // height: 40px;
+      // border: 1px solid black;
+
+      .inname {
+        color: #6f6f6f;
+        font-size: 14px;
+        margin-left: 26px;
+        margin-top: 15px;
+      }
+      .in {
+        margin-left: 14px;
+        width: 81%;
+        position: relative;
+        .ant-input {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 130px;
+          resize: none;
+        }
+      }
+    }
+.name {
+        width: 78%;
+        // background-color: lightcoral;
+        display: flex;
+        margin-top: 20px;
+        align-items: center;
+        //height: 40px;
+        // border: 1px solid black;
+        .namebox {
+          width: 120px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          flex-shrink: 0;
+          .nameimg {
+            width: 10px;
+            height: 10px;
+          }
+        }
+        .d {
+          margin-top: 8px;
+          font-size: 25px;
+          color: #ff4e4e;
+        }
+        .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);
+          }
+          .box2 {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            height: 50px;
+            //margin-left: -5px;
+            margin-top: -25px;
+            border-left: 2px solid rgba(78, 166, 255, 1);
+          }
+        }
+        .inname {
+          color: #000000;
+          font-size: 14px;
+          margin-left: 7px;
+        }
+        .in {
+          margin-left: 14px;
+          flex: 1;
+          .ant-radio-wrapper {
+          }
+          .ant-input-affix-wrapper {
+            width: 384px;
+            border-radius: 8px;
+          }
+          .ant-input {
+            border-radius: 8px;
+            // height: 120%;
+            //width: 384px;
+            height: 30px;
+          }
+        }
+      }
 .drawerStyle {
   .ant-drawer-content-wrapper {
-    max-width: 1000px;
+    // max-width: 1000px;
     .ant-drawer-header {
       display: none !important;
     }
@@ -730,22 +986,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 +1039,7 @@ export default {
       }
 
       .btn3 {
+        width: 171px;
         margin-right: 0px;
         .search {
           width: 17px;
@@ -787,10 +1050,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 +1099,6 @@ export default {
   }
   .right {
     flex: 1;
-    height: 100%;
-    width: 100%;
     // background-color: #fff;
     display: flex;
     flex-direction: column;
@@ -843,7 +1106,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 +1164,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 +1247,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 +1267,8 @@ export default {
           justify-content: center;
           height: 100%;
           width: 100%;
+          margin-left: 38px;
+          margin-right: 38px;
           .img {
             cursor: pointer;
           }
@@ -999,6 +1276,7 @@ export default {
             font-size: 16px;
             color: #363636;
             margin-top: 5px;
+            white-space: nowrap;
           }
         }
         .lin {
@@ -1021,7 +1299,7 @@ export default {
       justify-content: center;
       .boomcen {
         width: 95%;
-        height: 100%;
+        // height: 100%;
         // background-color: #bfa;
         .onerow {
             width: 100%;
@@ -1032,6 +1310,7 @@ export default {
             .taskmain {
                 font-size: 18px;
                 color: #000000;
+                margin-top: 10px;
             }
             .btn {
                 position: absolute;
@@ -1108,7 +1387,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 +1437,6 @@ export default {
     //     background: #f6f9fd;
     //   }
     // }
-    .draw {
-      .drawerbox {
-      }
-    }
   }
 
   .opat {
@@ -1191,14 +1481,16 @@ 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;

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>