From 13ddba8ef57860c3dcc7673403dfa60a159ba8ea Mon Sep 17 00:00:00 2001
From: dongwug <guoys@dongwu-inc.com>
Date: Tue, 18 Oct 2022 11:36:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=9C=A8=E7=BA=BF=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/drawers/AddOnline.vue          |  14 +-
 .../{EidtOnline.vue => EditOnline.vue}        | 136 +++++++++---------
 src/views/projectcenter/TaskAdd.vue           |   4 +-
 3 files changed, 82 insertions(+), 72 deletions(-)
 rename src/components/drawers/{EidtOnline.vue => EditOnline.vue} (83%)

diff --git a/src/components/drawers/AddOnline.vue b/src/components/drawers/AddOnline.vue
index 0fd2359f..dee80d18 100644
--- a/src/components/drawers/AddOnline.vue
+++ b/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;
diff --git a/src/components/drawers/EidtOnline.vue b/src/components/drawers/EditOnline.vue
similarity index 83%
rename from src/components/drawers/EidtOnline.vue
rename to src/components/drawers/EditOnline.vue
index 6babc1ec..feaec1d1 100644
--- a/src/components/drawers/EidtOnline.vue
+++ b/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)" 
@@ -172,7 +185,7 @@ import { reactive, toRefs, ref } from "vue";
             default: false,
         },
     },
-    setup(props, ctx) {
+    setup( props,ctx) {
         const state = reactive({
             tableData1: [
                 {
@@ -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 = () => {
-        //     ctx.emit("update:addonlineVisible", false);
-        // };
-        // const afterVisibleChange = (bool) => {
-        //     console.log("state", bool);
-        // };
-        // const showDrawerOnline = () => {
-        //     state.visible = true;
-        // };
+        const closeDrawer = () => {
+            ctx.emit("update:editonlineVisible", false);
+        };
+        const afterVisibleChange = (bool) => {
+            console.log("state", bool);
+        };
         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%;
diff --git a/src/views/projectcenter/TaskAdd.vue b/src/views/projectcenter/TaskAdd.vue
index 855b3f0a..56e22366 100644
--- a/src/views/projectcenter/TaskAdd.vue
+++ b/src/views/projectcenter/TaskAdd.vue
@@ -227,7 +227,7 @@
           </div>
           <!-- 编辑在线侧弹窗 -->
           <div>
-            <add-online  v-model:addonlineVisible="visible" />
+            <edit-online  v-model:editonlineVisible="visible2" />
           </div>
           <!-- 编辑在线侧弹窗 -->
         </div>
@@ -293,6 +293,7 @@
 <script>
 import { reactive, toRefs, onMounted, onUnmounted } from "vue";
 import AddOnline from "../../components/drawers/AddOnline.vue";
+import EditOnline from "../../components/drawers/EditOnline.vue";
 const drawercolumns = [
   {
     title: "项目名称",
@@ -335,6 +336,7 @@ export default {
     name: "LevelAddDetail",
     components: {
       AddOnline,
+      EditOnline,
     },
     setup() {
         const state = reactive({