Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/fe-manage

src/assets/scss/common.scss

@@ -78,7 +78,6 @@ border: 1px solid #C7CBD2 !important;
 
 // 表格---------------------------------
 .tableBox{
-
 	.ant-table-row .ant-table-cell{
 		height: 48px ;
 		font-size: 14px;
@@ -148,4 +147,48 @@ border: 1px solid #C7CBD2 !important;
 display: none;
 		} 
 	}
-}
+}
+// 表格---------------------------------
+//表格下拉框-------------------------------------------
+.tableSelect {
+	margin-left: 21px;
+	display: inline-block;
+	.ant-select:not(.ant-select-customize-input)
+		.ant-select-selector
+		.ant-select-selection-search-input {
+		background-color: rgba(255, 255, 255, 0);
+		border: none;
+	}
+	.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+		background-color: rgba(255, 255, 255, 0);
+		border: none;
+	}
+	.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+		padding: 0;
+	}
+	.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
+		.ant-select-selector {
+		box-shadow: none;
+	}
+	.ant-select-arrow {
+		right: 0px;
+		color: rgba(0, 0, 0, 0.8);
+		font-size: 14px;
+		line-height: 36px;
+		// top: 17px;
+		top:14px;
+	}
+	.ant-select-selection-item {
+		font-size: 14px;
+		font-weight: 400;
+		color: #4ea6ff;
+		line-height: 36px;
+	}
+	.ant-select-single.ant-select-open .ant-select-selection-item{
+		color: #4ea6ff;
+	}
+}
+.tabledropdown {
+  width: 100px !important;
+}
+//表格下拉框-------------------------------------------

src/components/NavTop.vue

@@ -112,7 +112,7 @@ export default {
       }
       .roleItems {
         width: 109px;
-        height: 80px;
+        height: 90px;
         padding-top: 10px;
         background: #ffffff;
         box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
@@ -121,6 +121,7 @@ export default {
         right: 0px;
         text-align: center;
         display: none;
+        z-index: 100;
       }
       .roleItem {
         font-size: 14px;

src/views/courselibrary/CoursewareManage.vue

@@ -49,10 +49,10 @@
           </div>
           <div class="select fitems">
             <a-range-picker
-            v-model:value="value2"
+              v-model:value="value2"
-            separator="至"
+              separator="至"
-            :placeholder="['        开始时间', '        结束时间']"
+              :placeholder="['        开始时间', '        结束时间']"
-          />
+            />
           </div>
         </div>
       </div>
@@ -410,9 +410,9 @@
   </div>
 </template>
 <script>
-import { reactive, toRefs, defineComponent, ref } from 'vue';
+import { reactive, toRefs, defineComponent, ref } from "vue";
-import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
+import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
-import { message } from 'ant-design-vue';
+import { message } from "ant-design-vue";
 
 function getBase64(img, callback) {
   const reader = new FileReader();
@@ -427,202 +427,262 @@ export default defineComponent({
 
   setup() {
     const state = reactive({
-    tableData : [{
+      tableData: [
-      key: '1',
+        {
-      num:1,
+          key: "1",
-      name: '时间管理',
+          num: 1,
-      content: '领导力',
+          name: "时间管理",
-      courseform: '线上',
+          content: "领导力",
-      project: '管理者进阶-腾飞班1',
+          courseform: "线上",
-      stunum: '50',
+          project: "管理者进阶-腾飞班1",
-      grade: '5',
+          stunum: "50",
-      status: '未提交',
+          grade: "5",
-      ynpub: '未发布',
+          status: "未提交",
-      creator: '管理员',
+          ynpub: "未发布",
-      createtime: '2022-07-20 9:30',
+          creator: "管理员",
-      pubtime: '2022-07-20 9:30',
+          createtime: "2022-07-20 9:30",
-      ynuse: '启用',
+          pubtime: "2022-07-20 9:30",
-      kkty:false,
+          ynuse: "启用",
-    }, {
+          kkty: false,
-      key: '2',
+        },
-      num:2,
+        {
-      name: '智能制造初级课程',
+          key: "2",
-      content: '专业力',
+          num: 2,
-      courseform: '线上',
+          name: "智能制造初级课程",
-      project: '-',
+          content: "专业力",
-      stunum: '200',
+          courseform: "线上",
-      grade: '5',
+          project: "-",
-      status: '待审核',
+          stunum: "200",
-      ynpub: '未发布',
+          grade: "5",
-      creator: '管理员',
+          status: "待审核",
-      createtime: '2022-07-20 9:30',
+          ynpub: "未发布",
-      pubtime: '2022-07-20 9:30',
+          creator: "管理员",
-      ynuse: '启用',
+          createtime: "2022-07-20 9:30",
-      kkty:true,
+          pubtime: "2022-07-20 9:30",
-      }, {
+          ynuse: "启用",
-      key: '3',
+          kkty: true,
-      num:3,
+        },
-      name: '产业必备技能',
+        {
-      content: '专业力',
+          key: "3",
-      courseform: '线上',
+          num: 3,
-      project: '-',
+          name: "产业必备技能",
-      stunum: '200',
+          content: "专业力",
-      grade: '5',
+          courseform: "线上",
-      status: '已审核',
+          project: "-",
-      ynpub: '已发布',
+          stunum: "200",
-      creator: '管理员',
+          grade: "5",
-      createtime: '2022-07-20 9:30',
+          status: "已审核",
-      pubtime: '2022-07-20 9:30',
+          ynpub: "已发布",
-      ynuse: '启用',
+          creator: "管理员",
-      kkty:true,
+          createtime: "2022-07-20 9:30",
-      }, {
+          pubtime: "2022-07-20 9:30",
-      key: '4',
+          ynuse: "启用",
-      num:4,
+          kkty: true,
-      name: 'B11入模培训',
+        },
-      content: '专业力',
+        {
-      courseform: '线上',
+          key: "4",
-      project: '-',
+          num: 4,
-      stunum: '200',
+          name: "B11入模培训",
-      grade: '5',
+          content: "专业力",
-      status: '审核未通过',
+          courseform: "线上",
-      ynpub: '未发布',
+          project: "-",
-      creator: '管理员',
+          stunum: "200",
-      createtime: '2022-07-20 9:30',
+          grade: "5",
-      pubtime: '2022-07-20 9:30',
+          status: "审核未通过",
-      ynuse: '停用',
+          ynpub: "未发布",
-      kkty:true,
+          creator: "管理员",
-      }, {
+          createtime: "2022-07-20 9:30",
-      key: '5',
+          pubtime: "2022-07-20 9:30",
-      num:5,
+          ynuse: "停用",
-      name: '入职培训',
+          kkty: true,
-      content: '通用力',
+        },
-      courseform: '面授',
+        {
-      project: '-',
+          key: "5",
-      stunum: '5',
+          num: 5,
-      grade: '5',
+          name: "入职培训",
-      status: '未提交',
+          content: "通用力",
-      ynpub: '未发布',
+          courseform: "面授",
-      creator: '管理员',
+          project: "-",
-      createtime: '2022-07-20 9:30',
+          stunum: "5",
-      pubtime: '2022-07-20 9:30',
+          grade: "5",
-      ynuse: '启用',
+          status: "未提交",
-      kkty:true,
+          ynpub: "未发布",
-      }, {
+          creator: "管理员",
-      key: '6',
+          createtime: "2022-07-20 9:30",
-      num:6,
+          pubtime: "2022-07-20 9:30",
-      name: '入职培训',
+          ynuse: "启用",
-      content: '通用力',
+          kkty: true,
-      courseform: '面授',
+        },
-      project: '-',
+        {
-      stunum: '5',
+          key: "6",
-      grade: '6',
+          num: 6,
-      status: '已审核',
+          name: "入职培训",
-      ynpub: '已发布',
+          content: "通用力",
-      creator: '管理员',
+          courseform: "面授",
-      createtime: '2022-07-20 9:30',
+          project: "-",
-      pubtime: '2022-07-20 9:30',
+          stunum: "5",
-      ynuse: '启用',
+          grade: "6",
-      kkty:true,
+          status: "已审核",
-      }],
+          ynpub: "已发布",
+          creator: "管理员",
+          createtime: "2022-07-20 9:30",
+          pubtime: "2022-07-20 9:30",
+          ynuse: "启用",
+          kkty: true,
+        },
+      ],
     });
     const tableDataFunc = () => {
       const columns = [
         {
-        title: '序号',
+          title: "序号",
-        width: 200,
+          width: 200,
-        dataIndex: 'num',
+          dataIndex: "num",
-        key: 'num',
+          key: "num",
-        align: "center",
+          align: "center",
-      }, {
+        },
-        title: '名称',
+        {
-        width: 200,
+          title: "名称",
-        dataIndex: 'name',
+          width: 200,
-        key: 'name',
+          dataIndex: "name",
-      }, {
+          key: "name",
-        title: '内容分类',
+        },
-        width: 200,
+        {
-        dataIndex: 'content',
+          title: "内容分类",
-        key: '1',
+          width: 200,
-        align: "center",
+          dataIndex: "content",
-      }, {
+          key: "1",
-        title: '课程形式',
+          align: "center",
-        width: 200,
+        },
-        dataIndex: 'courseform',
+        {
-        key: '2',
+          title: "课程形式",
-        align: "center",
+          width: 200,
-      }, {
+          dataIndex: "courseform",
-        title: ' 所属项目',
+          key: "2",
-        width: 300,
+          align: "center",
-        dataIndex: 'project',
+        },
-        key: '3',
+        {
-        align: "center",
+          title: " 所属项目",
-      }, {
+          width: 300,
-        title: '学习人数',
+          dataIndex: "project",
-        width: 200,
+          key: "3",
-        dataIndex: 'stunum',
+          align: "center",
-        key: '4',
+        },
-        align: "center",
+        {
-      }, {
+          title: "学习人数",
-        title: '评分',
+          width: 200,
-        width: 200,
+          dataIndex: "stunum",
-        dataIndex: 'grade',
+          key: "4",
-        key: '5',
+          align: "center",
-        align: "center",
+        },
-      }, {
+        {
-        title: '状态',
+          title: "评分",
-        width: 200,
+          width: 200,
-        dataIndex: 'status',
+          dataIndex: "grade",
-        key: '6',
+          key: "5",
-        align: "center",
+          align: "center",
-      }, {
+        },
-        title: '是否发布',
+        {
-        width: 200,
+          title: "状态",
-        dataIndex: 'ynpub',
+          width: 200,
-        key: '7',
+          dataIndex: "status",
-        align: "center",
+          key: "6",
-      }, {
+          align: "center",
-        title: '创建人',
+        },
-        width: 200,
+        {
-        dataIndex: 'creator',
+          title: "是否发布",
-        key: '8',
+          width: 200,
-        align: "center",
+          dataIndex: "ynpub",
-      }, {
+          key: "7",
-        title: '创建时间',
+          align: "center",
-        width: 280,
+        },
-        dataIndex: 'createtime',
+        {
-        key: '9',
+          title: "创建人",
-        align: "center",
+          width: 200,
-      }, {
+          dataIndex: "creator",
-        title: '上线时间',
+          key: "8",
-        width: 280,
+          align: "center",
-        dataIndex: 'pubtime',
+        },
-        key: '10',
+        {
-        align: "center",
+          title: "创建时间",
-      }, {
+          width: 280,
-        title: '是否停用',
+          dataIndex: "createtime",
-        width: 200,
+          key: "9",
-        key: 'either',
+          align: "center",
-        dataIndex: 'ynuse',
+        },
-        align: "center",
+        {
-      }, {
+          title: "上线时间",
-        title: '操作',
+          width: 280,
-        width: 400,
+          dataIndex: "pubtime",
-        className: "h",
+          key: "10",
-        dataIndex: "opacation",
+          align: "center",
-        key: 'operation',
+        },
-        fixed: 'right',
+        {
-        align: "center",
+          title: "是否停用",
-        scopedSlots: { customRender: "action" }, 
+          width: 200,
-        customRender: (text) => {
+          key: "either",
+          dataIndex: "ynuse",
+          align: "center",
+        },
+        {
+          title: "操作",
+          width: 400,
+          className: "h",
+          dataIndex: "opacation",
+          key: "operation",
+          fixed: "right",
+          align: "center",
+          scopedSlots: { customRender: "action" },
+          customRender: (text) => {
             // console.log(text);
             return (
               <div class="op_box">
                 <div class="opacation">
-                  <span class={text.record.courseform === '面授' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >开课</span>
+                  <span
-                  <span class={text.record.ynuse === '停用' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >停用</span>
+                    class={
-                  <span class={text.record.status === '未提交' || text.record.status === '审核未通过' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >编辑</span>
+                      text.record.courseform === "面授"
-                  <span class={text.record.status === '已审核' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >管理</span>
+                        ? "activecls"
-                  <span class={text.record.status === '待审核' ?  "errorCls" : "activecls"} style={{ "margin-left": "25px" }} >复制</span>
+                        : "errorCls"
+                    }
+                    style={{ "margin-left": "25px" }}
+                  >
+                    开课
+                  </span>
+                  <span
+                    class={
+                      text.record.ynuse === "停用" ? "activecls" : "errorCls"
+                    }
+                    style={{ "margin-left": "25px" }}
+                  >
+                    停用
+                  </span>
+                  <span
+                    class={
+                      text.record.status === "未提交" ||
+                      text.record.status === "审核未通过"
+                        ? "activecls"
+                        : "errorCls"
+                    }
+                    style={{ "margin-left": "25px" }}
+                  >
+                    编辑
+                  </span>
+                  <span
+                    class={
+                      text.record.status === "已审核" ? "activecls" : "errorCls"
+                    }
+                    style={{ "margin-left": "25px" }}
+                  >
+                    管理
+                  </span>
+                  <span
+                    class={
+                      text.record.status === "待审核" ? "errorCls" : "activecls"
+                    }
+                    style={{ "margin-left": "25px" }}
+                  >
+                    复制
+                  </span>
                   <span style={{ "margin-left": "25px" }} class="more">
                     <span>授权</span>
                     <div class="moreArrow"></div>
@@ -638,12 +698,12 @@ export default defineComponent({
                   </span>
                 </div>
               </div>
-              
+            );
-              );
           },
-      }];
+        },
+      ];
       return columns;
-    }
+    };
 
     const fileList = ref([]);
     const loading = ref(false);
@@ -748,16 +808,16 @@ export default defineComponent({
 
     const of_hShow = () => {
       if (state.of_hs == false) {
-        state.of_hs = true
+        state.of_hs = true;
-      } 
+      }
-    }
+    };
     const hideShow = () => {
       if (state.hideshow == false) {
         state.hideshow = true;
       } else {
         state.hideshow = false;
       }
-    }
+    };
     const bs_hShow = () => {
       if (state.bs_hs == true) {
         state.bs_hs = false;
@@ -1037,7 +1097,7 @@ export default defineComponent({
     }
   }
 
-  .faceteach{
+  .faceteach {
     display: none;
     z-index: 1000;
     width: 1358px;
@@ -1190,7 +1250,7 @@ export default defineComponent({
 
   .tableBox {
     margin: 20px 38px 30px;
-    .op_box{
+    .op_box {
       display: flex;
       justify-content: right;
       .opacation {

src/views/learningpath/LevelAdd.vue

@@ -185,8 +185,12 @@
                   <div class="box"></div>
                   <div class="onetitle">关卡晋级规则</div>
                 </div>
-                <div class="twomain">
+                <div class="twomain clearfix">
-                  <a-switch size="small" v-model:checked="checked2" />
+                  <a-switch
+                    size="small"
+                    v-model:checked="checked2"
+                    style="margin-top: -5px"
+                  />
                   <span class="info">启用关卡自动规则加入</span>
                   <div class="infor">
                     若开启“新建/编辑关卡-添加学员”支持设定自动加入规则，将于每日8点同步数据
@@ -351,7 +355,7 @@ export default {
 };
 </script>
 
-<style scoped lang="scss" >
+<style scoped lang="scss">
 .clearfix:before,
 .clearfix:after {
   content: " ";
@@ -758,7 +762,7 @@ export default {
               position: absolute;
               // margin-top: 10px;
               left: 0;
-              top: 5px;
+              top: 3px;
             }
             .yulan {
               // color: yellow;
@@ -773,10 +777,14 @@ export default {
         .twomain {
           margin-left: 20px;
           margin-top: 20px;
+          .ant-switch-checked {
+            background-color: #5dc988;
+          }
           .info {
             margin-left: 10px;
             color: #6f6f6f;
             font-size: 14px;
+            // margin-top: 10px;
           }
           .infor {
             margin-left: 38px;
@@ -818,7 +826,7 @@ export default {
                 position: relative;
                 .inl {
                   position: absolute;
-                  top: 5px;
+                  top: 2px;
                 }
                 .sh {
                   margin-left: 23px;
@@ -832,4 +840,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/views/learningpath/LevelAddDetail.vue

@@ -1,12 +1,939 @@
 <template>
-  <div>ddd</div>
+  <div class="allCon">
+    <div class="left clearfix">
+      <div class="leftmain">
+        <div class="tit">关卡</div>
+        <div class="btn btn3">
+          <div class="search"></div>
+          <div class="btnText">添加关卡</div>
+        </div>
+        <div class="maincon">
+          <div class="item" v-for="item in level" :key="item.id">
+            <div class="itemle">
+              <div class="tit">{{ item.tit }}</div>
+              <div class="name">{{ item.name }}</div>
+            </div>
+            <div class="itemri">
+              <img src="../../assets/images/leveladd/z1.png" />
+              <img
+                style="margin-top: 40px"
+                src="../../assets/images/leveladd/z2.png"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="addhead">
+        <div class="filt">
+          <div class="le">
+            <div class="leftimg">
+              <img class="img" src="../../assets/px.jpg" />
+            </div>
+            <div class="imgfor">
+              <div class="forz">产品经理进阶路径</div>
+              <div class="fort">创建时间：2022-07-21 00:00</div>
+            </div>
+          </div>
+          <div class="rightt">
+            <div class="select">
+              <a-select
+                v-model:value="projectName"
+                style="width: 270px"
+                placeholder="自由学习模式"
+                :options="projectNameList"
+                @change="selectProjectName"
+                allowClear
+                showSearch
+              ></a-select>
+            </div>
+            <div class="line"></div>
+            <img class="img2" src="../../assets/images/leveladd/pub.png" />
+            <div class="pub">发布</div>
+            <div class="line"></div>
+            <img
+              style="margin-right: 15px"
+              class="img2"
+              src="../../assets/images/leveladd/more.png"
+            />
+            <div class="more">
+              <span style="color: #7096e3">更多</span>
+              <div class="moreArrow"></div>
+              <div class="moreItems">
+                <div class="sammo">撤回</div>
+                <div class="sammo">复制</div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <img class="img2" src="../../assets/images/leveladd/back.png" />
+            <router-link to="/leveladd">
+              <div class="return">返回</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">
+              <img src="../../assets/images/leveladd/zai.png" />
+            </div>
+            <div class="text">在线</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/mian.png" />
+            </div>
+            <div class="text">面授</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/an.png" />
+            </div>
+            <div class="text">案例</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/zuo.png" />
+            </div>
+            <div class="text">作业</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/kao.png" />
+            </div>
+            <div class="text">考试</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/zhi.png" />
+            </div>
+            <div class="text">直播</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/wai.png" />
+            </div>
+            <div class="text">外链</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/tao.png" />
+            </div>
+            <div class="text">讨论</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/huo.png" />
+            </div>
+            <div class="text">活动</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/ce.png" />
+            </div>
+            <div class="text">测评</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/diao.png" />
+            </div>
+            <div class="text">调研</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/tou.png" />
+            </div>
+            <div class="text">投票</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img
+                src="../../assets/images/leveladd/xiang.png"
+                @click="showDrawer"
+              />
+            </div>
+            <div class="text">项目</div>
+          </div>
+        </div>
+      </div>
+      <div class="boom">
+        <div class="boomcen">
+          <div class="select">
+            <a-select
+              v-model:value="projectName"
+              style="width: 270px"
+              placeholder="移动任务到关卡"
+              :options="projectNameList2"
+              @change="selectProjectName2"
+              allowClear
+              showSearch
+            ></a-select>
+          </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">
+            <a-table
+              style="border: 1px solid #f2f6fe"
+              :columns="tableDataFunc()"
+              :data-source="tableData"
+              :loading="tableDataTotal === -1 ? true : false"
+              expandRowByClick="true"
+              :scroll="{ x: 1500, y: 300 }"
+              @expand="expandTable"
+              :pagination="false"
+            />
+            <!-- :pagination= showSizeChanger: true, showQuickJumper: true,
+      hideOnSinglePage: true, pageSizeOptions: [], pageSize: pageSize, current:
+      currentPage, total: tableDataTotal, -->
+            <div class="pa">
+              <a-pagination
+                showSizeChanger="true"
+                showQuickJumper="true"
+                hideOnSinglePage="true"
+                :pageSize="pageSize"
+                :current="currentPage"
+                :total="tableDataTotal"
+                class="pagination"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <a-drawer
+        v-model:visible="visible"
+        class="custom-class"
+        title="关联项目"
+        placement="right"
+        width="50%"
+        @after-visible-change="afterVisibleChange"
+      >
+      </a-drawer>
+    </div>
+  </div>
 </template>
 
 <script>
+import { reactive, toRefs } from "vue";
 export default {
   name: "LevelAddDetail",
+  setup() {
+    const state = reactive({
+      projectNameList: [
+        {
+          id: 1,
+          value: "项目一",
+          label: "项目一",
+        },
+        {
+          id: 2,
+          value: "项目二",
+          label: "项目二",
+        },
+        {
+          id: 3,
+          value: "项目三",
+          label: "项目三",
+        },
+        {
+          id: 4,
+          value: "项目四",
+          label: "项目四",
+        },
+      ],
+      projectNameList2: [
+        {
+          id: 1,
+          value: "项目一",
+          label: "项目一",
+        },
+        {
+          id: 2,
+          value: "项目二",
+          label: "项目二",
+        },
+        {
+          id: 3,
+          value: "项目三",
+          label: "项目三",
+        },
+        {
+          id: 4,
+          value: "项目四",
+          label: "项目四",
+        },
+      ],
+      level: [
+        {
+          id: "1",
+          tit: "关卡1关卡1关卡1关卡1关卡1关卡1",
+          name: "初级产品经理fewfewfwefwefe",
+        },
+        {
+          id: "2",
+          tit: "关卡2",
+          name: "中级产品经理",
+        },
+      ],
+      tableData: [
+        {
+          key: 1,
+          lei: "在线",
+          // state: "已发布",
+          creater: "管理者课程",
+          // pubtime: "2022-07-20 14:00:03",
+          cretime: "60分钟",
+          haspub: false,
+          checked1: false,
+          checkedd: false,
+        },
+        {
+          key: 2,
+          lei: "面授",
+          // state: "草稿",
+          creater: "管理者面授",
+          // pubtime: "2022-07-20 14:00:03",
+          cretime: "20分钟",
+          haspub: true,
+          checked1: false,
+          checkedd: false,
+        },
+        {
+          key: 3,
+          lei: "作业",
+          // state: "已停用",
+          creater: "管理者作业",
+          // pubtime: "2022-07-20 14:00:03",
+          cretime: "60分钟",
+          haspub: false,
+          checked1: false,
+          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: "-",
+          haspub: true,
+          checked1: true,
+          checkedd: false,
+        },
+      ],
+      currentPage: 1,
+      tableDataTotal: 100,
+      pageSize: 10,
+      visible: false,
+    });
+    const selectProjectName = (value, index) => {
+      console.log("value", value, index);
+    };
+    const selectProjectName2 = (value, index) => {
+      console.log("value", value, index);
+    };
+    const showDrawer = () => {
+      state.visible = true;
+    };
+    const afterVisibleChange = (bool) => {
+      console.log("visible", bool);
+    };
+    const tableDataFunc = () => {
+      const columns = [
+        {
+          title: "类型",
+          dataIndex: "state",
+          // width: "30%",
+          key: "state",
+          width: 90,
+          align: "center",
+          className: "h",
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: (text) => {
+            console.log(text.record.checked1);
+            return (
+              <div class="racona">
+                <div class="img"></div>
+                <a-checkbox class="ch" v-model: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: 200,
+          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"
+                    v-model:checked={text.record.checked1}
+                    size="small"
+                    active-color="red"
+                  />
+                  <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: () => {
+            return (
+              <div class="opa">
+                <div class="opacation">
+                  <span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
+                    编辑
+                  </span>
+                  <span style="color:#4EA6FF;cursor:pointer">删除</span>
+                </div>
+              </div>
+            );
+          },
+        },
+      ];
+      return columns;
+    };
+
+    return {
+      ...toRefs(state),
+      selectProjectName,
+      selectProjectName2,
+      tableDataFunc,
+      showDrawer,
+      afterVisibleChange,
+    };
+  },
 };
 </script>
 
-<style scoped lang="scss" >
+<style  lang="scss" >
+.clearfix:after,
+.clearfix:before {
+  content: " ";
+  display: block;
+  clear: both;
+}
+
+.allCon {
+  width: 100%;
+  height: 100%;
+  background-color: #f1f4f8;
+  display: flex;
+  .left {
+    margin-right: 20px;
+    width: 208px;
+    flex-shrink: 0;
+    height: 100%;
+    background: #ffffff;
+    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+    display: flex;
+    justify-content: center;
+    .leftmain {
+      width: 86%;
+      margin-top: 20px;
+      .tit {
+        font-size: 18px;
+        color: #363636;
+      }
+
+      // flex-wrap: wrap;
+      .btn {
+        margin-top: 20px;
+        // padding: 0px 26px 0px 26px;
+        height: 38px;
+        background: #fff6e8;
+        border-radius: 8px;
+        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: #ffb64e;
+          // line-height: 38px;
+          margin-top: 4px;
+          margin-left: 5px;
+        }
+      }
+
+      .btn3 {
+        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: 100%;
+        // background-color: #bfa;
+        .item {
+          width: 100%;
+          height: 83px;
+          display: flex;
+          background: rgba(255, 182, 78, 0.1);
+          border: 1px solid #ffb64e;
+          opacity: 0.45;
+          border-radius: 8px;
+          margin-bottom: 17px;
+          align-items: center;
+          position: relative;
+          .itemle {
+            margin-left: 17px;
+            .tit {
+              color: black;
+              // color: red;
+              font-size: 14px;
+              margin-bottom: 8px;
+              font-weight: bold;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              width: 100px;
+            }
+            .name {
+              font-size: 14px;
+              color: #878b92;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              width: 100px;
+            }
+          }
+          .itemri {
+            display: flex;
+            flex-direction: column;
+            position: absolute;
+            right: 16px;
+          }
+        }
+      }
+    }
+  }
+  .right {
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    // background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    .addhead {
+      width: 100%;
+      // min-width: 500px;
+      // height: 130px;
+
+      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;
+          // margin-bottom: 10px;
+          .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 {
+          // width: 500px;
+          height: 100%;
+          // background-color: red;
+          // position: absolute;
+          // right: 0;
+          display: flex;
+          align-items: center;
+          .select {
+            margin-right: 50px;
+            // margin-bottom: 20px;
+          }
+          .line {
+            height: 60px;
+            width: 1px;
+            background-color: #e8effa;
+            margin-right: 28px;
+          }
+          .img2 {
+            width: 42px;
+            height: 42px;
+            margin-right: 22px;
+          }
+          .pub {
+            color: #ffb64e;
+            font-size: 14px;
+            margin-top: 5px;
+            margin-right: 30px;
+          }
+          .return {
+            color: #4ea6ff;
+            font-size: 14px;
+            margin-top: 5px;
+            margin-right: 20px;
+          }
+
+          .more {
+            position: relative;
+            margin-right: 30px;
+
+            .moreArrow {
+              width: 13px;
+              height: 7px;
+              display: inline-block;
+              background-image: url("../../assets/images/navtop/down.png");
+              background-size: 100%;
+              margin: 2px;
+              margin-left: 15px;
+            }
+            .moreItems {
+              width: 110px;
+              height: 80px;
+              display: none;
+              background: #ffffff;
+              box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
+              // border-radius: 3px;
+              border: 0px solid #dcdcdc;
+              position: absolute;
+              left: -48px;
+              top: 28px;
+              z-index: 100;
+              .sammo {
+                text-align: center;
+                margin-top: 12px;
+              }
+              .sammo:hover {
+                color: #4ea6ff;
+              }
+            }
+            .moreItems:hover {
+              display: block;
+            }
+          }
+
+          .more:hover .moreArrow {
+            background-image: url("../../assets/images/navtop/up.png");
+          }
+          .more:hover .moreItems {
+            display: block;
+          }
+        }
+      }
+    }
+
+    .mid {
+      width: 100%;
+      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;
+      .item {
+        height: 100%;
+        width: 7.7%;
+        display: flex;
+        align-items: center;
+        .itcon {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          width: 100%;
+          .img {
+            cursor: pointer;
+          }
+          .text {
+            font-size: 16px;
+            color: #363636;
+            margin-top: 5px;
+          }
+        }
+        .lin {
+          width: 1px;
+          height: 60%;
+          background-color: #e8effa;
+        }
+        .no {
+          display: none;
+        }
+      }
+    }
+    .boom {
+      position: relative;
+      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%;
+        height: 100%;
+        // background-color: #bfa;
+        .select {
+          margin-top: 30px;
+        }
+        .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;
+          }
+          .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: 20px 38px 30px;
+          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: 20px;
+          }
+        }
+      }
+    }
+  }
+  .opat {
+    .opacationt {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .ant-switch-checked {
+        background-color: #5dc988;
+      }
+      .showt {
+        // margin-top: 10px;
+        display: flex;
+        margin-left: 10px;
+        height: 23px;
+        .bi {
+          // margin-top: 10px;
+          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;
+          // display: none;
+          position: absolute;
+          z-index: 998;
+          color: #5dc988;
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+  .racona {
+    // background-color: #bfa;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    .img {
+      margin-left: -40px;
+      margin-top: -2px;
+      width: 17px;
+      height: 14px;
+      background-image: url("../../assets/images/leveladd/z1.png");
+    }
+    .ch {
+      margin-left: 10px;
+    }
+  }
+}
 </style>