feat:修改面授课抽屉显示隐藏问题

src/components/drawers/AddFaceteach.vue

@@ -0,0 +1,458 @@
+<template>
+  <a-drawer
+    :visible="addfaceteachVisible"
+    class="drawerStyle"
+    width="80%"
+    title="添加在线"
+    placement="right"
+    @after-visible-change="afterVisibleChange"
+  >
+    <div class="drawerMain">
+      <div class="header">
+        <div class="headerTitle">添加在线</div>
+        <img
+          style="width: 29px; height: 29px; cursor: pointer"
+          src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer"
+        />
+      </div>
+      <div class="contentMain">
+        <div class="main_items">
+          <div class="mi_ipts">
+            <div class="mii_ipt">
+              <div class="ipt_name">课程编号：</div>
+              <div class="fi_input">
+                <a-input
+                  v-model:value="value1"
+                  style="width: 240px; height: 40px; border-radius: 8px"
+                  placeholder="请输入项目名称"
+                />
+              </div>
+            </div>
+            <div class="mii_ipt">
+              <div class="ipt_name">内容分类：</div>
+              <div class="select">
+                <a-select
+                  dropdownClassName="dropdown-style"
+                  style="width: 240px"
+                  placeholder="请选择"
+                  :options="options1"
+                  allowClear
+                  showSearch
+                />
+              </div>
+            </div>
+          </div>
+          <div class="mi_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="main_notice">
+          <div class="mntc_left">
+            <div class="notice_icon"></div>
+            <span style="color: rgba(0, 0, 0, 0.65); margin-right: 17px"
+              >已选择 <span style="color: #388be1">4</span> 项</span
+            >
+            <span style="color: rgba(0, 0, 0, 0.65)"
+              >列表选项总计：<span>14</span> 条</span
+            >
+          </div>
+          <div class="mntc_right">
+            <span style="color: #387df7; margin-right: 24px">清空</span>
+          </div>
+        </div>
+        <div class="main_table">
+          <a-table
+            class="ant-table-striped"
+            :row-class-name="
+              (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
+            "
+            :row-selection="rowSelection"
+            :columns="columns1"
+            :data-source="tableData1"
+            :loading="tableDataTotal === -1 ? true : false"
+            :pagination="{
+              showSizeChanger: true,
+              showQuickJumper: true,
+              hideOnSinglePage: true,
+              pageSizeOptions: [],
+              pageSize: pageSize,
+              current: currentPage,
+              total: tableDataTotal,
+              onChange: (page, pageSize) => {
+                currentPage = page;
+                // console.log('page', page)
+                // 加翻页查找代码
+                // 	this.setState({
+                // 		currentPage: page,
+                // 	}, () => {
+                // 		this.getMilitaryDeployment()
+                // 	})
+              },
+            }"
+          />
+        </div>
+        <div class="main_btns">
+          <button class="btn1">取消</button>
+          <button class="btn2">确定</button>
+        </div>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+<script>
+import { reactive, toRefs, ref } from "vue";
+const options1 = ref([
+  {
+    value: "value1",
+    label: "请选择状态",
+  },
+]);
+const columns1 = [
+  {
+    title: "课程编号",
+    width: "20%",
+    dataIndex: "num",
+    key: "num",
+    align: "center",
+  },
+  {
+    title: "名称",
+    width: "20%",
+    dataIndex: "name",
+    key: "name",
+    align: "center",
+  },
+  {
+    title: "内容分类",
+    width: "13%",
+    dataIndex: "content",
+    key: "content",
+    align: "center",
+  },
+  {
+    title: "授课教师",
+    width: "13%",
+    dataIndex: "teacher",
+    key: "teacher",
+    align: "center",
+  },
+  {
+    title: "创建人",
+    width: "13%",
+    dataIndex: "creator",
+    key: "creator",
+    align: "center",
+  },
+  {
+    title: "完成时间",
+    width: "20%",
+    dataIndex: "time",
+    key: "time",
+    align: "center",
+  },
+];
+const rowSelection = ref({
+  checkStrictly: false,
+  onChange: (selectedRowKeys, selectedRows) => {
+    console.log(
+      `selectedRowKeys: ${selectedRowKeys}`,
+      "selectedRows: ",
+      selectedRows
+    );
+  },
+  onSelect: (record, selected, selectedRows) => {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: (selected, selectedRows, changeRows) => {
+    console.log(selected, selectedRows, changeRows);
+  },
+});
+export default {
+  name: "AddFaceteach",
+  props: {
+    addfaceteachVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, ctx) {
+    const state = reactive({
+      tableData1: [
+        {
+          key: "1",
+          num: "JDF2022071100001",
+          name: "时间管理课程",
+          content: "通用力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "2",
+          num: "JDF2022071100001",
+          name: "管理能力课程",
+          content: "领导力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "3",
+          num: "JDF2022071100001",
+          name: "快速换模SMED",
+          content: "通用力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "4",
+          num: "JDF2022071100001",
+          name: "巧妙对话人见人夸",
+          content: "领导力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "5",
+          num: "JDF2022071100001",
+          name: "管理能力课程",
+          content: "领导力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "6",
+          num: "JDF2022071100001",
+          name: "时间管理课程",
+          content: "领导力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "7",
+          num: "JDF2022071100001",
+          name: "时间管理课程",
+          content: "领导力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "8",
+          num: "JDF2022071100001",
+          name: "时间管理课程",
+          content: "领导力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "9",
+          num: "JDF2022071100001",
+          name: "时间管理课程",
+          content: "领导力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+      ],
+      currentPage: 1,
+      tableDataTotal: 100,
+      pageSize: 10,
+    });
+    const closeDrawer = () => {
+      ctx.emit("update:addfaceteachVisible", false);
+    };
+    const afterVisibleChange = (bool) => {
+      console.log("state", bool);
+    };
+    const showDrawerFaceteach = () => {
+      state.visible3 = true;
+    };
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      showDrawerFaceteach,
+      closeDrawer,
+      options1,
+      columns1,
+      rowSelection,
+      // change,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.ant-table-striped :deep(.table-striped) td {
+  background-color: #fafafa !important;
+}
+.drawerStyle {
+  .drawerMain {
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        margin-left: 24px;
+      }
+    }
+    .contentMain {
+      .main_items {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 12px;
+        flex-wrap: wrap;
+        .mi_ipts {
+          display: flex;
+          margin-bottom: 20px;
+          .mii_ipt {
+            display: flex;
+            align-items: center;
+            margin-right: 24px;
+            .ipt_name {
+              white-space: nowrap;
+            }
+          }
+        }
+        .mi_btns {
+          display: flex;
+          margin-left: 38px;
+          margin-bottom: 20px;
+          cursor: pointer;
+          .btn {
+            padding: 0px 26px 0px 26px;
+            height: 38px;
+            border-radius: 8px;
+            border: 1px solid rgba(64, 158, 255, 1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 14px;
+            flex-shrink: 0;
+            .search {
+              background-size: 100%;
+            }
+            .btnText {
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 36px;
+              margin-left: 5px;
+            }
+          }
+          .btn1 {
+            background: rgb(64, 158, 255);
+            .search {
+              width: 15px;
+              height: 17px;
+              background-image: url("@/assets/images/coursewareManage/search0.png");
+            }
+            .btnText {
+              color: rgb(255, 255, 255);
+            }
+          }
+          .btn2 {
+            background: rgb(255, 255, 255);
+            .search {
+              width: 15px;
+              height: 17px;
+              background-image: url("@/assets/images/coursewareManage/reset1.png");
+            }
+            .btnText {
+              color: rgb(64, 158, 255);
+            }
+          }
+          .btn1:hover {
+            background: rgb(255, 255, 255);
+            .search {
+              background-image: url("@/assets/images/courseManage/search1.png");
+            }
+            .btnText {
+              color: #388be1;
+            }
+          }
+          .btn2:hover {
+            background: rgba(64, 158, 255, 1);
+            .search {
+              background-image: url("@/assets/images/courseManage/reset0.png");
+            }
+            .btnText {
+              color: #ffffff;
+            }
+          }
+        }
+      }
+      .main_notice {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 32px;
+        height: 40px;
+        background-color: #e9f6fe;
+        .mntc_left {
+          display: flex;
+          align-items: center;
+          .notice_icon {
+            width: 14px;
+            height: 14px;
+            margin-right: 9px;
+            margin-left: 9px;
+            background-image: url(@/assets/images/coursewareManage/gan.png);
+            background-size: 100% 100%;
+          }
+        }
+        .mntc_right {
+          cursor: pointer;
+        }
+      }
+      .main_btns {
+        height: 72px;
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+        .btn1 {
+          width: 100px;
+          height: 40px;
+          border: 1px solid #4ea6ff;
+          border-radius: 8px;
+          color: #4ea6ff;
+          background-color: #fff;
+          cursor: pointer;
+        }
+        .btn2 {
+          cursor: pointer;
+          width: 100px;
+          height: 40px;
+          background: #4ea6ff;
+          border-radius: 8px;
+          border: 0;
+          margin-left: 15px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/drawers/AddOnline.vue

@@ -24,7 +24,7 @@
                             <div class="fi_input">
                                 <a-input
                                     v-model:value="value1"
-                                    style="width: 270px; height: 40px; border-radius: 8px"
+                                    style="width: 240px; height: 40px; border-radius: 8px"
                                     placeholder="请输入项目名称"
                                 />
                             </div>
@@ -34,7 +34,7 @@
                             <div class="select">
                                 <a-select
                                 dropdownClassName="dropdown-style"
-                                style="width: 200px"
+                                style="width: 240px"
                                 placeholder="请选择"
                                 :options="options1"
                                 allowClear
@@ -283,7 +283,7 @@ import { reactive, toRefs, ref } from "vue";
     },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .ant-table-striped :deep(.table-striped) td {
   background-color: #fafafa !important;
 }
@@ -307,18 +307,24 @@ import { reactive, toRefs, ref } from "vue";
             .main_items{
                 display: flex;
                 justify-content: space-between;
-                margin-bottom: 32px;
+                margin-bottom: 12px;
+                flex-wrap: wrap;
                 .mi_ipts{
                     display: flex;
+                    margin-bottom: 20px;
                     .mii_ipt{
                         display: flex;
                         align-items: center;
                         margin-right: 24px;
+                        .ipt_name{
+                            white-space: nowrap;
+                        }
                     }
                 }
                 .mi_btns{
                     display: flex;
                     margin-left: 38px;
+                    margin-bottom: 20px;
                     cursor: pointer;
                     .btn {
                         padding: 0px 26px 0px 26px;

src/components/drawers/EditOnline.vue

@@ -9,7 +9,7 @@
     >
         <div class="drawerMain">
             <div class="header">
-                <div class="headerTitle">添加在线</div>
+                <div class="headerTitle">编辑在线</div>
                 <img
                     style="width: 29px; height: 29px; cursor: pointer"
                     src="../../assets/images/basicinfo/close.png"
@@ -17,6 +17,29 @@
                 />
             </div>
             <div class="contentMain">
+                <div class="main_item">
+                    <div class="signbox">
+                        <div class="sign"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
+                        <span style="margin-right: 3px">课程名称：</span>
+                    </div>
+                    <div class="fi_input">
+                        <a-input
+                        v-model:value="value2"
+                        style="width: 384px; height: 40px; border-radius: 8px"
+                        placeholder="请输入小组名称"
+                        />
+                    </div>
+                </div>
+                <div class="main_item">
+                    <div class="signbox">
+                        <div class="sign"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
+                        <span style="margin-right: 3px">选择课程：</span>
+                    </div>
+                    <div class="btnbox">
+                        <button class="xkbtn">选择课程</button>
+                        <a-tag closable @close="log" color='#F0FFFF' style="background-color: #388BE1;">时间管理</a-tag>
+                    </div>
+                </div>
                 <div class="main_items">
                     <div class="mi_ipts">
                         <div class="mii_ipt">
@@ -24,7 +47,7 @@
                             <div class="fi_input">
                                 <a-input
                                     v-model:value="value1"
-                                    style="width: 270px; height: 40px; border-radius: 8px"
+                                    style="width: 240px; height: 40px; border-radius: 8px"
                                     placeholder="请输入项目名称"
                                 />
                             </div>
@@ -34,7 +57,7 @@
                             <div class="select">
                                 <a-select
                                 dropdownClassName="dropdown-style"
-                                style="width: 200px"
+                                style="width: 240px"
                                 placeholder="请选择"
                                 :options="options1"
                                 allowClear
@@ -54,16 +77,6 @@
                         </div>
                     </div>
                 </div>
-                <div class="main_notice">
-                    <div class="mntc_left">
-                        <div class="notice_icon"></div>
-                        <span style="color:rgba(0, 0, 0, .65); margin-right:17px;">已选择 <span style="color:#388BE1;">4</span> 项</span>
-                        <span style="color:rgba(0, 0, 0, .65)">列表选项总计：<span>14</span> 条</span>
-                    </div>
-                    <div class="mntc_right">
-                        <span style="color:#387DF7; margin-right:24px;">清空</span>
-                    </div>
-                </div>
                 <div class="main_table">
                     <a-table class="ant-table-striped" 
                         :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)" 
@@ -238,42 +251,20 @@ import { reactive, toRefs, ref } from "vue";
                     creator:'管理员',
                     time:'2022-10-31 23:12:00',
                 },
-                {
-                    key: "8",
-                    num: 'JDF2022071100001',
-                    name:'时间管理课程',
-                    content:'领导力',
-                    teacher:'BOE教师',
-                    creator:'管理员',
-                    time:'2022-10-31 23:12:00',
-                },
-                {
-                    key: "9",
-                    num: 'JDF2022071100001',
-                    name:'时间管理课程',
-                    content:'领导力',
-                    teacher:'BOE教师',
-                    creator:'管理员',
-                    time:'2022-10-31 23:12:00',
-                },
             ],
             currentPage: 1,
             tableDataTotal: 100,
             pageSize: 10,
         });
-        // const closeDrawer = () => {
+        const closeDrawer = () => {
-        //     ctx.emit("update:addonlineVisible", false);
+            ctx.emit("update:editonlineVisible", false);
-        // };
+        };
-        // const afterVisibleChange = (bool) => {
+        const afterVisibleChange = (bool) => {
-        //     console.log("state", bool);
+            console.log("state", bool);
-        // };
+        };
-        // const showDrawerOnline = () => {
-        //     state.visible = true;
-        // };
         return {
             ...toRefs(state),
             afterVisibleChange,
-            showDrawerOnline,
             closeDrawer,
             options1,
             columns1,
@@ -283,7 +274,7 @@ import { reactive, toRefs, ref } from "vue";
     },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .ant-table-striped :deep(.table-striped) td {
   background-color: #fafafa !important;
 }
@@ -304,21 +295,55 @@ import { reactive, toRefs, ref } from "vue";
             }
         }
         .contentMain {
+            .main_item{
+                display: flex;
+                align-items: center;
+                margin-bottom: 32px;
+                .signbox{
+                    display: flex;
+                    align-items: center;
+                    .sign{
+                        margin-right: 5px;
+                    }
+                }
+                .btnbox{
+                    display: flex;
+                    align-items: center;
+                    .xkbtn {
+                        cursor: pointer;
+                        width: 130px;
+                        height: 40px;
+                        background: #388BE1;
+                        border-radius: 8px;
+                        border: 0;
+                        margin-right: 8px;
+                        color: #fff;
+                    }
+                }
+            }
             .main_items{
                 display: flex;
                 justify-content: space-between;
-                margin-bottom: 32px;
+                flex-wrap:wrap;
+                margin-bottom: 12px;
                 .mi_ipts{
                     display: flex;
+                    margin-bottom: 20px;
+                    flex-wrap: wrap;
                     .mii_ipt{
                         display: flex;
                         align-items: center;
                         margin-right: 24px;
+                        margin-bottom: 10px;
+                        .ipt_name{
+                            white-space: nowrap;
+                        }
                     }
                 }
                 .mi_btns{
                     display: flex;
                     margin-left: 38px;
+                    margin-bottom: 20px;
                     cursor: pointer;
                     .btn {
                         padding: 0px 26px 0px 26px;
@@ -382,29 +407,6 @@ import { reactive, toRefs, ref } from "vue";
                     }
                 }
             }
-            .main_notice{
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                margin-bottom: 32px;
-                height: 40px;
-                background-color: #E9F6FE;
-                .mntc_left{
-                    display: flex;
-                    align-items: center;    
-                    .notice_icon{
-                        width: 14px;
-                        height: 14px;
-                        margin-right: 9px;
-                        margin-left: 9px;
-                        background-image: url(@/assets/images/coursewareManage/gan.png);
-                        background-size: 100% 100%;
-                    }
-                }
-                .mntc_right{
-                    cursor: pointer;
-                }
-            }
             .main_btns{
                 height: 72px;
                 width: 100%;

src/views/courselibrary/CoursewareManage.vue

@@ -567,7 +567,7 @@
       />
     </div>
     <!-- 表格 -->
-    <!-- 操作在线课程管理页面 -->
+    <!-- 操作在线面授课程管理页面 -->
     <a-modal
       v-model:visible="om_1"
       title="Title"
@@ -583,7 +583,8 @@
               style="width: 17px; height: 18px; margin-right: 8px"
               src="../../assets/images/basicinfo/add.png"
             />
-            <span class="headerLeftText">在线课程管理</span>
+            <div :style="{ display: ft_1 ? 'none' : 'block'}"> <span class="headerLeftText">在线课程管理</span> </div>
+            <div :style="{ display: ft_1 ? 'block' : 'none' }"> <span class="headerLeftText">面授课程管理</span> </div>
           </div>
           <div style="margin-right: 57px; cursor: pointer">
             <img
@@ -606,13 +607,13 @@
                       <div class="bs_left">状态：</div>
                       <div class="bs_right">已审核</div>
                     </div>
-                    <div class="b_menu">
+                    <a-tabs
-                      <a-menu v-model:selectedKeys="current" mode="horizontal">
+                        class="b_menu"
-                        <a-menu-item key="mail"> 报名管理 </a-menu-item>
+                        v-model:activeKey="activeKey"
-                        <a-menu-item key="sub2"> 学习记录 </a-menu-item>
+                        size="large"
-                        <a-menu-item key="sub3"> 资源完成情况 </a-menu-item>
+                        :tabBarStyle="{ marginLeft: '10px' }"
-                      </a-menu>
+                    >
-                    </div>
+                      <a-tab-pane key="1" tab="报名管理">
                         <div class="b_menunav">
                           <div class="bm_select">
                             <a-select
@@ -652,59 +653,6 @@
                             :pagination="false"
                           />
                         </div>
-                  </div>
-                </div>
-          </div>
-        </div>
-    </a-modal>
-    <!-- 操作在线课程管理页面 -->
-    <!-- 操作面授课程管理页面 -->
-    <a-modal
-      v-model:visible="ftm_1"
-      title="Title"
-      @ok="closeModal"
-      :footer="null"
-      :closable="false"
-      wrapClassName="modalStyle"
-      width="80%"
-    >
-        <div class="modalHeader">
-          <div class="headerLeft">
-            <img
-              style="width: 17px; height: 18px; margin-right: 8px"
-              src="../../assets/images/basicinfo/add.png"
-            />
-            <span class="headerLeftText">面授课程管理</span>
-          </div>
-          <div style="margin-right: 57px; cursor: pointer">
-            <img
-              @click="ftm_exit"
-              style="width: 22px; height: 22px"
-              src="../../assets/images/basicinfo/close22.png"
-            />
-          </div>
-        </div>
-        <div class="modalMain">
-          <div class="faceteachmanage" :style="{ display: ftm_1 ? 'block' : 'none' }">
-            <div class="om_main">
-              <div class="om_body">
-                <div class="b_title">课程：BMOT2021年职级晋升-安全管理（高级）</div>
-                <div class="b_sub">
-                  <div class="bs_type">类型：</div>
-                  <div class="bs_right">录播课</div>
-                  <div class="bs_left">内容分类：</div>
-                  <div class="bs_right">领导力</div>
-                  <div class="bs_left">状态：</div>
-                  <div class="bs_right">已审核</div>
-                </div>
-                <a-tabs
-                    class="b_menu"
-                    v-model:activeKey="activeKey"
-                    size="large"
-                    :tabBarStyle="{ marginLeft: '10px' }"
-                >
-                  <a-tab-pane key="1" tab="报名管理">
-                      1
                       </a-tab-pane>
                       <a-tab-pane key="2" tab="学习记录">
                         <div class="b_menunav">
@@ -754,63 +702,12 @@
                         </div>
                       </a-tab-pane>
                     </a-tabs>
-                <!-- <div class="b_menu">
-                  <a-menu v-model:selectedKeys="current" mode="horizontal">
-                    <a-menu-item key="mail"> 报名管理 </a-menu-item>
-                    <a-menu-item key="sub2"> 学习记录 </a-menu-item>
-                  </a-menu>
-                </div> -->
-                <!-- <div class="b_menunav">
-                  <div class="bm_select">
-                    <a-select
-                      class="select"
-                      ref="select"
-                      placeholder="请选择状态"
-                      v-model:value="value14"
-                      style="width: 200px"
-                      @focus="focus"
-                      @change="handleChange"
-                    >
-                      <a-select-option value="status">状态</a-select-option>
-                      <a-select-option value="passed">已通过</a-select-option>
-                      <a-select-option value="weishenhe">未审核</a-select-option>
-                      <a-select-option value="reject">管理员拒绝</a-select-option>
-                    </a-select>
-                  </div>
-                  <div class="bm_input">
-                    <a-input
-                      v-model:value="value15"
-                      style="width: 200px; height: 40px; border-radius: 8px"
-                      placeholder="姓名"
-                    />
-                  </div>
-                  <div class="bm_btn">
-                    <div class="btn btn1">
-                      <div class="search"></div>
-                      <div class="btnText">搜索</div>
-                    </div>
-                  </div>
-                </div>
-                <div class="bm_table" style="margin-bottom: 20px">
-                  <a-table
-                    :columns="columns2"
-                    :data-source="tableData3"
-                    :loading="tableDataTotal === -1 ? true : false"
-                    :pagination="false"
-                  >
-                    <template #bodyCell="{ column }">
-                      <template v-if="column.key === 'opacation'">
-                        <a @click="ckxq_hs">查看详情</a>
-                      </template>
-                    </template>
-                  </a-table>
-                </div> -->
                   </div>
                 </div>
           </div>
         </div>
     </a-modal>
-    <!-- 操作面授课程管理页面 -->
+    <!-- 操作在线面授课程管理页面 -->
     <!-- 面授课程管理查看详情页面 -->
     <a-modal
       v-model:visible="om_ckxq"
@@ -1142,12 +1039,10 @@
                 <span style="margin-right: 3px">签到设置</span>
               </div>
               <div class="b_input">
-                <a-checkbox v-model:checked="checked">
+                <a-radio-group v-model:value="valueB">
-                  <span style="color: #6d7584; margin-right: 30px">是否允许未报名的学员签到</span>
+                  <a-radio :value="24"><span style="color: #6d7584; margin-right: 30px">是否允许未报名的学员签到</span></a-radio>
-                </a-checkbox>
+                  <a-radio :value="25"><span style="color: #6d7584">签到是否需要口令</span></a-radio>
-                <a-checkbox v-model:checked="checked">
+                </a-radio-group>
-                  <span style="color: #6d7584">签到是否需要口令</span>
-                </a-checkbox>
               </div>
           </div>
           <div class="cstm_items">
@@ -1165,15 +1060,11 @@
                 <span style="margin-right: 3px">完成规则</span>
               </div>
               <div class="b_input">
-                <a-checkbox v-model:checked="checked">
+                <a-radio-group v-model:value="valueC">
-                  <span style="color: #6d7584; margin-right: 30px">报名即完成</span>
+                  <a-radio :value="26"><span style="color: #6d7584; margin-right: 30px">报名即完成</span></a-radio>
-                </a-checkbox>
+                  <a-radio :value="27"><span style="color: #6d7584; margin-right: 30px">签到即完成</span></a-radio>
-                <a-checkbox v-model:checked="checked">
+                  <a-radio :value="28"><span style="color: #6d7584">请假算完成</span></a-radio>
-                  <span style="color: #6d7584; margin-right: 30px">签到即完成</span>
+                </a-radio-group>
-                </a-checkbox>
-                <a-checkbox v-model:checked="checked">
-                  <span style="color: #6d7584">请假算完成</span>
-                </a-checkbox>
               </div>
           </div>
           <div class="cstm_items items_fj">
@@ -2186,7 +2077,7 @@ export default defineComponent({
       bs_hs: true,
       ft_hs:false,
       om_1: false,
-      ftm_1: false,
+      ft_1: false,
       om_ckxq: false,
       gpm_hs: false,
       stm_hs: false,
@@ -2204,6 +2095,8 @@ export default defineComponent({
       value5:"",
       value6:"",
       valueE:"",
+      valueB:"",
+      valueC:"",
       selectedRowKeys: [],
     });
     const fileList = ref([]);
@@ -2266,8 +2159,10 @@ export default defineComponent({
                         onClick={() => {
                           if (value.courseform === "线上" ) {
                             state.om_1 = true;
+                            state.ft_1 = false;
                           } else if (value.courseform === "面授") {
-                            state.ftm_1 = true;
+                            state.om_1 = true;
+                            state.ft_1 = true;
                           }
                         }}
                       >
@@ -2766,9 +2661,6 @@ export default defineComponent({
     const om_exit = () => {
       state.om_1 = false;
     };
-    const ftm_exit = () => {
-      state.ftm_1 = false;
-    };
     const ckxq_hs = () => {
       state.om_ckxq = true;
     };
@@ -2840,7 +2732,6 @@ export default defineComponent({
       createft,
       ft_exit,
       om_exit,
-      ftm_exit,
       ckxq_hs,
       ftsr_exit,
       gpm_exit,
@@ -3935,8 +3826,7 @@ export default defineComponent({
         }
       }
       .modalMain{
-        .onlinemanage,
+        .onlinemanage {
-        .faceteachmanage {
           display: none;
           z-index: 999;
           min-width: 1000px;

src/views/projectcenter/TaskAdd.vue

@@ -84,12 +84,17 @@
           <div class="lin"></div>
         </div>
         <div class="item">
-          <div class="itcon">
+          <div class="itcon" @click="showDrawerFaceteach">
             <div class="img">
               <img src="../../assets/images/leveladd/mian.png" />
             </div>
             <div class="text">面授</div>
           </div>
+          <!-- 添加面授侧弹窗 -->
+          <div>
+            <add-faceteach v-model:addfaceteachVisible="visible3" />
+          </div>
+          <!-- 添加面授侧弹窗 -->
           <div class="lin"></div>
         </div>
         <div class="item">
@@ -238,7 +243,7 @@
           </div>
           <!-- 编辑在线侧弹窗 -->
           <div>
-            <add-online v-model:addonlineVisible="visible" />
+            <edit-online v-model:editonlineVisible="visible2" />
           </div>
           <!-- 编辑在线侧弹窗 -->
         </div>
@@ -356,6 +361,8 @@
 <script>
 import { reactive, toRefs, onMounted, onUnmounted } from "vue";
 import AddOnline from "../../components/drawers/AddOnline.vue";
+import EditOnline from "../../components/drawers/EditOnline.vue";
+import AddFaceteach from "../../components/drawers/AddFaceteach.vue";
 const drawercolumns = [
   {
     title: "项目名称",
@@ -398,6 +405,8 @@ export default {
   name: "LevelAddDetail",
   components: {
     AddOnline,
+    EditOnline,
+    AddFaceteach,
   },
   setup() {
     const state = reactive({
@@ -625,14 +634,7 @@ export default {
           time: "2022-07-20 14:00:03",
         },
         {
-          key: 6,
+          key: "1-1-1",
-          projectName: "管理者进阶-腾飞班K1",
-          manager: "黄华  刘俊",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 7,
           projectName: "管理者进阶-腾飞班K1",
           manager: "黄华  刘俊",
           creater: "毛继禹",
@@ -644,6 +646,7 @@ export default {
       pageSize: 10,
       visible: false,
       visible2: false,
+      visible3: false,
       stage: false,
       selectedRowKeys: [],
     });
@@ -806,6 +809,10 @@ export default {
     const showDrawerOnline = () => {
       state.visible = true;
     };
+    const showDrawerFaceteach = () => {
+      state.visible3 = true;
+      console.log(state.visible3);
+    };
     return {
       ...toRefs(state),
       selectProjectName,
@@ -818,6 +825,7 @@ export default {
       drawercolumns,
       onSelectChange,
       showDrawerOnline,
+      showDrawerFaceteach,
     };
   },
 };