From fc45ee33909f8d0bc23d8a3500ccec9a618bfede Mon Sep 17 00:00:00 2001
From: dongwug <guoys@dongwu-inc.com>
Date: Tue, 18 Oct 2022 10:25:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9=E9=9D=A2=E6=8E=88?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=AD=A6=E4=B9=A0=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/drawers/EidtOnline.vue        | 441 +++++++++++++++++++
 src/views/courselibrary/CoursewareManage.vue |  65 ++-
 src/views/projectcenter/TaskAdd.vue          |  13 +-
 3 files changed, 514 insertions(+), 5 deletions(-)
 create mode 100644 src/components/drawers/EidtOnline.vue

diff --git a/src/components/drawers/EidtOnline.vue b/src/components/drawers/EidtOnline.vue
new file mode 100644
index 00000000..6babc1ec
--- /dev/null
+++ b/src/components/drawers/EidtOnline.vue
@@ -0,0 +1,441 @@
+<template>
+    <a-drawer
+        :visible="editonlineVisible"
+        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 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: "EditOnline",
+        props: {
+        editonlineVisible: {
+            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:addonlineVisible", false);
+        // };
+        // const afterVisibleChange = (bool) => {
+        //     console.log("state", bool);
+        // };
+        // const showDrawerOnline = () => {
+        //     state.visible = true;
+        // };
+        return {
+            ...toRefs(state),
+            afterVisibleChange,
+            showDrawerOnline,
+            closeDrawer,
+            options1,
+            columns1,
+            rowSelection,
+            // change,
+        };
+    },
+};
+</script>
+<style lang="scss">
+.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: 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;
+                }
+            }
+            .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>
\ No newline at end of file
diff --git a/src/views/courselibrary/CoursewareManage.vue b/src/views/courselibrary/CoursewareManage.vue
index 6424a0f1..569cf566 100644
--- a/src/views/courselibrary/CoursewareManage.vue
+++ b/src/views/courselibrary/CoursewareManage.vue
@@ -697,13 +697,70 @@
                   <div class="bs_left">状态：</div>
                   <div class="bs_right">已审核</div>
                 </div>
-                <div class="b_menu">
+                <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">
+                      <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>
+                  </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> -->
+                <!-- <div class="b_menunav">
                   <div class="bm_select">
                     <a-select
                       class="select"
@@ -747,7 +804,7 @@
                       </template>
                     </template>
                   </a-table>
-                </div>
+                </div> -->
               </div>
             </div>
           </div>
diff --git a/src/views/projectcenter/TaskAdd.vue b/src/views/projectcenter/TaskAdd.vue
index 338f6785..855b3f0a 100644
--- a/src/views/projectcenter/TaskAdd.vue
+++ b/src/views/projectcenter/TaskAdd.vue
@@ -225,6 +225,11 @@
               />
             </div>
           </div>
+          <!-- 编辑在线侧弹窗 -->
+          <div>
+            <add-online  v-model:addonlineVisible="visible" />
+          </div>
+          <!-- 编辑在线侧弹窗 -->
         </div>
       </div>
     </div>
@@ -575,6 +580,7 @@ export default {
             tableDataTotal: 100,
             pageSize: 10,
             visible: false,
+            visible2:false,
             stage: false,
             selectedRowKeys: [],
         });
@@ -669,7 +675,12 @@ export default {
                     customRender: () => {
                         return (<div class="opa">
                 <div class="opacation">
-                  <span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
+                  <span
+                    onClick={() => {
+                      state.visible2 = true;
+                    }}
+                    style="color:#4EA6FF;margin-right:25px;cursor:pointer"
+                  >
                     编辑
                   </span>
                   <span style="color:#4EA6FF;cursor:pointer">删除</span>