feat:新增AddOnline弹窗（未完成）

src/components/drawers/AddOnline.vue

@@ -0,0 +1,232 @@
+<template>
+    <a-drawer
+        :visible="addonlineVisible"
+        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: 270px; 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: 200px"
+                                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, .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>
+        </div>
+    </a-drawer>
+</template>
+<script>
+import { reactive, toRefs, ref } from "vue";
+    const options1 = ref([
+            {
+                value: "value1",
+                label: "请选择状态",
+            },
+        ]);
+    export default {
+        name: "AddOnline",
+        props: {
+        addonlineVisible: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    setup(props, ctx) {
+        const state = reactive({});
+        const closeDrawer = () => {
+            ctx.emit("update:addonlineVisible", false);
+        };
+        const afterVisibleChange = (bool) => {
+            console.log("state", bool);
+        };
+        const showDrawerOnline = () => {
+            state.visible = true;
+        };
+
+        return {
+            ...toRefs(state),
+            afterVisibleChange,
+            showDrawerOnline,
+            closeDrawer,
+            options1,
+            // change,
+        };
+    },
+};
+</script>
+<style lang="scss">
+.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: 32px;
+                .mi_ipts{
+                    display: flex;
+                    .mii_ipt{
+                        display: flex;
+                        align-items: center;
+                        margin-right: 24px;
+                    }
+                }
+                .mi_btns{
+                    display: flex;
+                    margin-left: 38px;
+                    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;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/projectcenter/TaskAdd.vue

@@ -62,12 +62,17 @@
       </div>
       <div class="mid">
         <div class="item">
-          <div class="itcon">
+          <div class="itcon" @click="showDrawerOnline">
             <div class="img">
               <img src="../../assets/images/leveladd/zai.png" />
             </div>
-            <div class="text">在线</div>
+            <div class="text" >在线</div>
           </div>
+          <!-- 添加在线侧弹窗 -->
+          <div>
+              <add-online  v-model:addonlineVisible="visible" />
+          </div>
+          <!-- 添加在线侧弹窗 -->
           <div class="lin"></div>
         </div>
         <div class="item">
@@ -222,42 +227,6 @@
           </div>
         </div>
       </div>
-      <div class="draw" style="position: relative">
-        <a-drawer
-          v-model:visible="visible"
-          class="drawerStyle"
-          title="关联项目"
-          placement="right"
-          width="80%"
-          @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="showDrawer"
-              />
-            </div>
-            <div class="drawerbox">
-              <a-table
-                :columns="drawercolumns"
-                :data-source="drawertableData"
-                :loading="tableDataTotal === -1 ? true : false"
-                :scroll="{ x: 700 }"
-                @expand="expandTable"
-                :pagination="false"
-              >
-              </a-table>
-            </div>
-            <div class="btnn">
-              <button @click="showDrawer" class="btn1">取消</button>
-              <button @click="showDrawer" class="btn2">确定</button>
-            </div>
-          </div>
-        </a-drawer>
-      </div>
     </div>
     <div>
       <a-modal
@@ -318,6 +287,7 @@
 
 <script>
 import { reactive, toRefs, onMounted, onUnmounted } from "vue";
+import AddOnline from "../../components/drawers/AddOnline.vue";
 const drawercolumns = [
   {
     title: "项目名称",
@@ -358,6 +328,9 @@ const drawercolumns = [
 ];
 export default {
     name: "LevelAddDetail",
+    components: {
+      AddOnline,
+    },
     setup() {
         const state = reactive({
             projectNameList: [
@@ -523,7 +496,6 @@ export default {
                             key: "1-1",
                             projectName: "管理者进阶-腾飞班",
                             manager: "黄华  刘俊",
-
                             creater: "毛继禹",
                             time: "2022-07-20 14:00:03",
                             children: [
@@ -549,7 +521,6 @@ export default {
                             key: "2-1",
                             projectName: "管理者进阶-腾飞班",
                             manager: "黄华  刘俊",
-
                             creater: "毛继禹",
                             time: "2022-07-20 14:00:03",
                             children: [
@@ -564,12 +535,10 @@ export default {
                         },
                     ],
                 },
-
                 {
                     key: 3,
                     projectName: "管理者进阶-腾飞班K1",
                     manager: "黄华  刘俊",
-
                     creater: "毛继禹",
                     time: "2022-07-20 14:00:03",
                 },
@@ -577,7 +546,6 @@ export default {
                     key: 4,
                     projectName: "管理者进阶-腾飞班K1",
                     manager: "黄华  刘俊",
-
                     creater: "毛继禹",
                     time: "2022-07-20 14:00:03",
                 },
@@ -585,7 +553,6 @@ export default {
                     key: 5,
                     projectName: "管理者进阶-腾飞班K1",
                     manager: "黄华  刘俊",
-
                     creater: "毛继禹",
                     time: "2022-07-20 14:00:03",
                 },
@@ -593,7 +560,6 @@ export default {
                     key: 6,
                     projectName: "管理者进阶-腾飞班K1",
                     manager: "黄华  刘俊",
-
                     creater: "毛继禹",
                     time: "2022-07-20 14:00:03",
                 },
@@ -601,7 +567,6 @@ export default {
                     key: 7,
                     projectName: "管理者进阶-腾飞班K1",
                     manager: "黄华  刘俊",
-
                     creater: "毛继禹",
                     time: "2022-07-20 14:00:03",
                 },
@@ -619,9 +584,6 @@ export default {
         const selectProjectName2 = (value, index) => {
             console.log("value", value, index);
         };
-    const showDrawer = () => {
-      state.visible = !state.visible;
-    };
         const afterVisibleChange = (bool) => {
             console.log("visible", bool);
         };
@@ -635,18 +597,13 @@ export default {
                     width: 60,
                     align: "left",
                     className: "classify",
-          scopedSlots: { customRender: "action" }, //引入的插槽
+                    scopedSlots: { customRender: "action" },
                     customRender: (text) => {
                         // console.log(text.record.checked1);
-            return (
+                        return (<div class="racona">
-              <div class="racona">
+                <div class="img" style={{ cursor: "pointer" }} onClick={() => {
-                <div
-                  class="img"
-                  style={{ cursor: "pointer" }}
-                  onClick={() => {
                                 console.log("点击了");
-                  }}
+                            }}></div>
-                ></div>
                 <span> {text.record.lei}</span>
 
                 {/**
@@ -654,9 +611,8 @@ export default {
                             <a-checkbox class="ch" checked={text.record.checkedd}>
                               {text.record.lei}
                             </a-checkbox>
-*/}
+            */}
-              </div>
+              </div>);
-            );
                     },
                 },
                 {
@@ -675,36 +631,23 @@ export default {
                     // width: 100,
                     align: "center",
                     className: "h",
-          scopedSlots: { customRender: "action" }, //引入的插槽
+                    scopedSlots: { customRender: "action" },
                     customRender: (text) => {
                         // console.log(text.record.checked1);
-            return (
+                        return (<div class="opat">
-              <div class="opat">
                 <div class="opacationt clearfix">
-                  <a-switch
+                  <a-switch style="margin-left:-50px;margin-top:3px" checked={text.record.checked1} size="small" active-color="red" onClick={() => {
-                    style="margin-left:-50px;margin-top:3px"
-                    checked={text.record.checked1}
-                    size="small"
-                    active-color="red"
-                    onClick={() => {
                                 console.log("点击了");
                                 text.record.checked1 = !text.record.checked1;
-                    }}
+                            }}/>
-                  />
                   <div class="showt clearfix">
-                    <div
+                    <div class="bi" style={text.record.checked1 ? "z-index:999" : "z-index:998"}>
-                      class="bi"
-                      style={
-                        text.record.checked1 ? "z-index:999" : "z-index:998"
-                      }
-                    >
                       必修
                     </div>
                     <div class="xuan">选修</div>
                   </div>
                 </div>
-              </div>
+              </div>);
-            );
                     },
                 },
                 {
@@ -722,29 +665,25 @@ export default {
                     key: "opacation",
                     // width: 100,
                     align: "center",
-          scopedSlots: { customRender: "action" }, //引入的插槽
+                    scopedSlots: { customRender: "action" },
                     customRender: () => {
-            return (
+                        return (<div class="opa">
-              <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>
+              </div>);
-            );
                     },
                 },
             ];
             return columns;
         };
-
         const onSelectChange = (selectedRowKeys) => {
             console.log("selectedRowKeys changed: ", selectedRowKeys);
             state.selectedRowKeys = selectedRowKeys;
         };
-
         // const getClientHeight = () => {
         //   state.rightheight =
         //     document.getElementsByClassName("addhead")[0].offsetHeight +
@@ -769,6 +708,9 @@ export default {
             document.getElementsByTagName("main")[0].style.boxShadow =
                 "0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
         });
+        const showDrawerOnline = () => {
+            state.visible = true;
+        };
         return {
             ...toRefs(state),
             selectProjectName,
@@ -776,10 +718,11 @@ export default {
             tableDataFunc,
             showModal,
             closeModal,
-      showDrawer,
+            // showDrawer,
             afterVisibleChange,
             drawercolumns,
             onSelectChange,
+            showDrawerOnline,
         };
     },
 };