feat:补齐确定面授课和全部弹窗样式

src/views/courselibrary/CoursewareManage.vue

@@ -7,21 +7,21 @@
         <div class="filterItems">
           <div class="fi_input fitems">
             <a-input
-              v-model:value="value"
+              v-model:value="value1"
               style="width: 270px; height: 40px; border-radius: 8px"
               placeholder="请输入项目名称"
             />
           </div>
           <div class="fi_input fitems">
             <a-input
-              v-model:value="value"
+              v-model:value="value2"
               style="width: 270px; height: 40px; border-radius: 8px"
               placeholder="请输入名称"
             />
           </div>
           <div class="fi_input fitems">
             <a-input
-              v-model:value="value"
+              v-model:value="value3"
               style="width: 270px; height: 40px; border-radius: 8px"
               placeholder="请输入所属项目"
             />
@@ -49,7 +49,7 @@
           </div>
           <div class="select fitems">
             <a-range-picker
-              v-model:value="value2"
+              v-model:value="value4"
               separator="至"
               :placeholder="['        开始时间', '        结束时间']"
             />
@@ -97,11 +97,12 @@
               </div>
               <div class="b_input">
                 <a-input
-                  v-model:value="value"
+                  v-model:value="value5"
                   maxlength="20"
                   style="width: 440px; height: 40px; border-radius: 8px"
                   placeholder="请输入课程名称"
                 />
+                <div class="inp_num"><span style="color:#C7CBD2">{{ value5.length }}/20</span></div>
               </div>
               <!-- <div class="showcount">{{ valueE.length }}/20</div> -->
             </div>
@@ -253,10 +254,12 @@
                     <div class="item_inp">
                       <div class="i1_input">
                         <a-input
-                          v-model:value="value"
+                          v-model:value="value6"
+                          maxlength="90"
                           style="width: 440px; height: 40px; border-radius: 8px"
                           placeholder="请输入课程名称"
-                        />
+                        >
+                        </a-input>
                       </div>
                     </div>
                   </div>
@@ -334,7 +337,8 @@
                     <div class="item_inp">
                       <div class="i1_input">
                         <a-input
-                          v-model:value="value"
+                          v-model:value="value7"
+                          maxlength="50"
                           style="width: 440px; height: 40px; border-radius: 8px"
                           placeholder="请输入目标人群"
                         />
@@ -348,7 +352,8 @@
                     <div class="item_inp">
                       <div class="i1_input">
                         <a-input
-                          v-model:value="value"
+                          v-model:value="value8"
+                          maxlength="200"
                           style="width: 440px; height: 40px; border-radius: 8px"
                           placeholder="请输入课程价值"
                         />
@@ -416,7 +421,7 @@
                     <div class="item_inp">
                       <div class="i1_input">
                         <a-input
-                          v-model:value="value"
+                          v-model:value="value10"
                           style="width: 440px; height: 40px; border-radius: 8px"
                           placeholder="请输入"
                         />
@@ -431,7 +436,8 @@
                     <div class="item_inp">
                       <div class="i10_textarea">
                         <a-textarea
-                          v-model:value="value"
+                          v-model:value="value11"
+                          maxlength="150"
                           style="width: 440px; height: 100px; border-radius: 8px"
                           placeholder="请输入"
                         />
@@ -513,6 +519,27 @@
                   </div>
                 </div>
               </div>
+              <div class="m_footer">
+                <div class="fotnam">
+                  <span>课程大纲</span>
+                </div>
+                <div class="fotarea">
+                  <div class="fuwenben"></div>
+                  <a-textarea
+                    v-model:value="value25"
+                    style="width: 926px; height: 130px; border-radius: 8px; padding-top:20px;"
+                    placeholder=""
+                  />
+                </div>
+              </div>
+              <div class="m_btn">
+                <div class="btn btn5">
+                  <div class="btnText" @click="ft_exit">取消</div>
+                </div>
+                <div class="btn btn6">
+                  <div class="btnText" @click="ft_exit">确定</div>
+                </div>
+              </div>
             </div>
         </a-modal>
       </div>
@@ -592,7 +619,7 @@
                           class="select"
                           ref="select"
                           placeholder="请选择状态"
-                          v-model:value="value"
+                          v-model:value="value12"
                           style="width: 200px"
                           @focus="focus"
                           @change="handleChange"
@@ -605,7 +632,7 @@
                       </div>
                       <div class="bm_input">
                         <a-input
-                          v-model:value="value"
+                          v-model:value="value13"
                           style="width: 200px; height: 40px; border-radius: 8px"
                           placeholder="姓名"
                         />
@@ -682,7 +709,7 @@
                       class="select"
                       ref="select"
                       placeholder="请选择状态"
-                      v-model:value="value"
+                      v-model:value="value14"
                       style="width: 200px"
                       @focus="focus"
                       @change="handleChange"
@@ -695,7 +722,7 @@
                   </div>
                   <div class="bm_input">
                     <a-input
-                      v-model:value="value"
+                      v-model:value="value15"
                       style="width: 200px; height: 40px; border-radius: 8px"
                       placeholder="姓名"
                     />
@@ -804,7 +831,7 @@
             <div class="gp_main">
               <div class="gpm_inputbtn">
                 <a-input
-                v-model:value="value"
+                v-model:value="value16"
                   style="
                     width: 270px;
                     height: 40px;
@@ -833,6 +860,7 @@
               </div>
               <div class="gpm_table">
                 <a-table
+                  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                   :columns="columns5"
                   :data-source="tableData5"
                   :loading="tableDataTotal === -1 ? true : false"
@@ -899,7 +927,7 @@
             <div class="st_main">
               <div class="stm_inputbtn">
                 <a-input
-                  v-model:value="value"
+                  v-model:value="value17"
                   style="
                     width: 270px;
                     height: 40px;
@@ -909,7 +937,7 @@
                   placeholder="请输入创建人"
                 />
                 <a-input
-                  v-model:value="value"
+                  v-model:value="value18"
                   style="
                     width: 270px;
                     height: 40px;
@@ -996,7 +1024,7 @@
             </div>
             <div class="b_input">
               <a-input
-                v-model:value="value"
+                v-model:value="value19"
                 style="width: 440px; height: 40px; border-radius: 8px"
                 placeholder="请输入开课名称"
               />
@@ -1009,7 +1037,7 @@
             </div>
             <div class="b_input">
               <a-input
-                v-model:value="value"
+                v-model:value="value20"
                 style="width: 440px; height: 40px; border-radius: 8px"
                 placeholder="请输入详细地点"
               />
@@ -1023,7 +1051,7 @@
             <div class="select fitems">
               <a-range-picker
                 style="width: 440px; height: 40px; border-radius: 8px"
-                v-model:value="value2"
+                v-model:value="value21"
                 separator="至"
                 :placeholder="['        开始时间', '        结束时间']"
               />
@@ -1036,7 +1064,7 @@
             </div>
             <div class="b_input">
               <a-input
-                v-model:value="value"
+                v-model:value="value22"
                 style="width: 440px; height: 40px; border-radius: 8px"
                 placeholder="请输入教师"
               />
@@ -1170,7 +1198,7 @@
                 <div class="stmm_i5">
                   <div class="i5_left">
                     <a-input
-                      v-model:value="value"
+                      v-model:value="value23"
                       style="
                         width: 270px;
                         height: 40px;
@@ -1312,7 +1340,7 @@
               </div>
               <div class="rgmb_input">
                 <a-input
-                  v-model:value="value"
+                  v-model:value="value24"
                   maxlength="20"
                   style="width: 440px; height: 40px; border-radius: 8px"
                   placeholder=""
@@ -1626,35 +1654,35 @@ const columns5 = [
     title: "姓名",
     dataIndex: "name",
     key: "name",
-    width: "18%",
+    width: "10%",
-    align: "center",
+    align: "left",
   },
   {
     title: "归属组织",
     dataIndex: "organization",
     key: "organization",
-    width: "18%",
+    width: "19%",
     align: "center",
   },
   {
     title: "岗位",
     dataIndex: "position",
     key: "position",
-    width: "18%",
+    width: "19%",
     align: "center",
   },
   {
     title: "拥有权限",
     dataIndex: "authority",
     key: "authority",
-    width: "18%",
+    width: "19%",
     align: "center",
   },
   {
     title: "操作",
     dataIndex: "opacation",
     key: "opacation",
-    width: "30%",
+    width: "34%",
     align: "center",
   },
 ];
@@ -2114,7 +2142,12 @@ export default defineComponent({
       agreestudy_hs:false,
       rejectstudy_hs:false,
       value:"",
+      // value1:"",
+      // value2:"",
+      value5:"",
+      value6:"",
       valueE:"",
+      selectedRowKeys: [],
     });
     const fileList = ref([]);
     const loading = ref(false);
@@ -2719,6 +2752,10 @@ export default defineComponent({
     const rejectstudy_exit = () => {
       state.rejectstudy_hs = false;
     }
+    const onSelectChange = selectedRowKeys => {
+      console.log('selectedRowKeys changed: ', selectedRowKeys);
+      state.selectedRowKeys = selectedRowKeys;
+    };
     return {
       onftvalue,
       current,
@@ -2760,6 +2797,7 @@ export default defineComponent({
       graduate_exit,
       agreestudy_exit,
       rejectstudy_exit,
+      onSelectChange,
     };
   },
 });
@@ -3106,6 +3144,62 @@ export default defineComponent({
           }
         }
       }
+      .m_footer{
+        display:flex;
+        margin:20px 0;
+        .fotnam{
+          width:100px;
+          display: flex;
+          justify-content: end;
+          padding-right:15px;
+        }
+        .fotarea{
+          position: relative;
+          .fuwenben{
+            width: 90%;
+            height:20px;
+            background-color: rgb(95, 95, 95);
+            position: absolute;
+            left:50%;
+            transform: translate(-50%,0);
+            top: 3px;
+            z-index: 9999;
+          }
+        }
+      }
+      .m_btn {
+          width: 100%;
+          margin-top: 25px;
+          margin-bottom: 20px;
+          display: flex;
+          justify-content: center;
+          align-content: center;
+          .btn {
+            width: 100px;
+            height: 40px;
+            background: rgba(64, 158, 255, 0);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 14px;
+            flex-shrink: 0;
+            cursor: pointer;
+            .btnText {
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 40px;
+            }
+          }
+          .btn5 {
+            border: 1px solid rgba(64, 158, 255, 1);
+            color: #4ea6ff;
+          }
+          .btn6 {
+            background-color: #4ea6ff;
+            color: #ffffff;
+          }
+        }
     }
   }
 }
@@ -3177,6 +3271,12 @@ export default defineComponent({
           }
           .b_input{
             flex:1;
+            position: relative;
+            .inp_num{
+              position: absolute;
+              right:10px;
+              top:10px;
+            }
           }
           .bc_box {
             display: flex;

src/views/courselibrary/conponents/OnlineManage.vue

@@ -1,279 +0,0 @@
-<template>
-    <div class="onlinemanage">
-        <div class="om_header">
-        </div>
-        <div class="main">
-            <div class="m_header">
-                <div class="pc_icon"></div>
-                <span>在线课程管理</span>
-                <div class="pc_exit">x</div>
-            </div>
-            <div class="m_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>
-                <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-item key="sub3">
-                            资源完成情况
-                        </a-menu-item>
-                    </a-menu>
-                </div>
-                <div class="b_menunav">
-                    <div class="bm_select">
-                        <a-select
-                            class="select"
-                            ref="select"
-                            placeholder="请选择状态"
-                            v-model:value="value1"
-                            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="value" 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">
-                    <a-table
-                        :columns="columns"
-                        :data-source="tableData"
-                        :loading="tableDataTotal === -1 ? true : false"
-                        :pagination="false"
-                    />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import { reactive, toRefs, ref } from "vue";
-const columns = [
-    {
-        title: "姓名",
-        dataIndex: "projectName",
-        key: "projectName",
-        width: '16%',
-        align: "center",
-    },
-    {
-        title: "工号",
-        dataIndex: "numb",
-        key: "numb",
-        width: '16%',
-        align: "center",
-    },
-    {
-        title: "报名时间",
-        dataIndex: "applytime",
-        key: "applytime",
-        width: '16%',
-        align: "center",
-    },
-    {
-        title: "签到时间",
-        dataIndex: "signtime",
-        key: "signtime",
-        width: '16%',
-        align: "center",
-    },
-    {
-        title: "状态",
-        dataIndex: "status",
-        key: "status",
-        width: '16%',
-        align: "center",
-    },
-    {
-        title: "操作",
-        dataIndex: "opacation",
-        key: "opacation",
-        width: '16%',
-        align: "center",
-    },
-];
-export default {
-name: "onlineManage",
-setup() {
-    const current = ref(['mail']);
-    const state = reactive({
-        tableData: [
-            {
-                key: 1,
-                projectName:"刘莉",
-                numb: "10064511",
-                applytime:"2022-07-20 14:00:00",
-                signtime: "-",
-                status: "已通过",
-            },
-            {
-                key: 2,
-                projectName:"",
-                numb: "",
-                applytime:"2022-07-20 14:00:00",
-                signtime: "2022-09-26 13:30:30",
-                status:"已通过",
-            },
-        ],
-    });
-
-    
-    return {
-        columns,
-        current,
-        ...toRefs(state),
-    };
-  },
-};
-</script>
-<style lang="scss" scoped>
-.onlinemanage{
-    width: 1358px;
-    min-width: 1000px;
-    height: 537px;
-    background: #FFFFFF;
-    box-shadow: 0px 1px 35px 0px rgba(118,136,166,0.21);
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%,-50%);
-    font-size: 14px;
-    font-family: PingFangSC-Regular;
-    color: #000000;
-    overflow: auto;
-    .om_header{
-        position: absolute;
-        width:calc(100%);
-        height: 40px;
-        background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
-    }
-    .main{
-        width:calc(100%);
-        position: relative;
-        .m_header{
-            display: flex;
-            align-items: center;
-            padding-top: 20px;
-            padding-left: 26px;
-            font-size: 16px;
-            .pc_icon{
-                width: 16px;
-                height: 16px;
-                margin-right: 10px;
-                background-image: url(@/assets/images/coursewareManage/pc.png);
-            }
-            .pc_exit{
-                position: absolute;
-                right:42px;
-                cursor: pointer;
-            }
-        }
-        .m_body{
-            width:calc(100% - 50px);
-            padding-left: 50px;
-            padding-top: 17px;
-            .b_title{
-                color: #4F5156;
-                font-weight: 500;
-                margin-bottom: 19px;
-            }
-            .b_sub{
-                display: flex;
-                margin-bottom: 10px;
-                .bs_type{
-                    color: #999BA3;
-                }
-                .bs_left{
-                    color: #999BA3;
-                    margin-left: 35px;
-                }
-                .bs_right{
-                    color: #4F5156;
-                }
-            }
-            .b_menu{
-                width:calc(100%);
-            }
-            .b_menunav{
-                display: flex;
-                margin-top: 20px;
-                margin-bottom: 20px;
-                .bm_select{
-                    margin-right: 20px;
-                }
-                .bm_input{
-                    margin-right: 20px;
-                }
-                .bm_btn {
-                display: flex;
-                // flex-wrap: wrap;
-                .btn {
-                    padding: 0px 26px 0px 26px;
-                    height: 40px;
-                    background: rgba(64, 158, 255, 0);
-                    border-radius: 8px;
-                    border: 1px solid rgba(64, 158, 255, 1);
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    margin-right: 14px;
-                    flex-shrink: 0;
-                    .search {
-                    background-size: 100%;
-                    }
-                    .btnText {
-                    font-size: 14px;
-                    font-weight: 400;
-                    color: rgba(64, 158, 255, 1);
-                    line-height: 36px;
-                    margin-left: 5px;
-                    }
-                }
-                .btn1 {
-                    .search {
-                    width: 15px;
-                    height: 17px;
-                    background-image: url("@/assets/images/coursewareManage/search1.png");
-                    }
-                }
-                .btn1:hover {
-                    background: rgba(64, 158, 255, 1);
-                    .search {
-                    background-image: url("@/assets/images/coursewareManage/search0.png");
-                    }
-                    .btnText {
-                    color: #ffffff;
-                    }
-                }
-            }
-            }
-        }
-    }
-}
-
-</style>

src/views/projectcenter/TemplateLibrary.vue

@@ -1 +1,166 @@
-<!-- 模板库页面 -->
+<template>
+  <div class="templatelibrary">
+    <div class="tmpl">
+        <div class="tmpl_header">
+            <div class="tmplh_inp">
+                <div class="inpbox">
+                    <div class="inpbox1">
+                        <span>模版名称：</span>
+                        <a-input
+                            v-model:value="value1"
+                            style="
+                                width: 270px;
+                                height: 40px;
+                                border-radius: 8px;
+                                margin-right: 14px;
+                            "
+                            placeholder="请输入项目名称"
+                        />
+                    </div>
+                    <div class="inpbox1">
+                        <span>创建时间：</span>
+                        <a-date-picker
+                            v-model="selectTime"
+                            type="date"
+                            placeholder="创建时间"
+                            style="width: 270px; margin-right: 14px"
+                        />
+                    </div>
+                </div>
+            </div>
+            <div class="tmplh_btn">
+                <div class="btn btn1">
+                    <div class="search"></div>
+                    <div class="btnText btnText1">搜索</div>
+                </div>
+                <div class="btn btn2">
+                    <div class="search"></div>
+                    <div class="btnText btnText2">重置</div>
+                </div>
+            </div>
+        </div>
+        <div class="tmpl_body">
+            <div class="tmpl_tabbox">
+                <!-- <a-table
+                    :columns="columns1"
+                    :data-source="tableData1"
+                    :loading="tableDataTotal === -1 ? true : false"
+                    expandRowByClick="true"
+                    @expand="expandTable"
+                    :pagination="false"
+                /> -->
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "TemplateLibrary",
+    // import { reactive, defineComponent, ref } from "vue";
+    // export default defineComponent({
+    //     setup() { 
+    //         const state = reactive({
+                
+    //         })
+    //     }
+    // })
+}
+
+</script>
+
+<style lang="scss">
+    .templatelibrary{
+        width: 100%;
+        .tmpl{
+            width:100%;
+            .tmpl_header{
+                display:flex;
+                justify-content: space-between;
+                margin: 32px;
+                .tmplh_inp{
+                    .inpbox{
+                        display: flex;
+                        .inpbox1{
+                            display:flex;
+                            justify-content: center;
+                            align-items: center;
+                            margin-right: 24px;
+                        }
+                    }
+                }
+                .tmplh_btn{
+                    display: flex;
+                    margin-left: 38px;
+                    .btn {
+                        padding: 0px 26px 0px 26px;
+                        height: 38px;
+                        border-radius: 8px;
+                        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;
+                        }
+                        .btnText1{
+                            color: rgb(255, 255, 255);
+                        }
+                        .btnText2{
+                            color: rgba(64, 158, 255, 1);
+                        }
+                    }
+                    .btn1 {
+                        background: #409EFF;
+                        .search {
+                        width: 15px;
+                        height: 17px;
+                        background-image: url("../../assets/images/courseManage/search0.png");
+                        }
+                    }
+                    .btn2 {
+                        background: #FFFFFF;
+                        border: 1px solid #388BE1;
+                        .search {
+                        width: 16px;
+                        height: 18px;
+                        background-image: url("../../assets/images/courseManage/reset1.png");
+                        }
+                    }
+                    .btn1:hover {
+                        background: rgb(255, 255, 255);
+                        border: 1px solid #388BE1;
+                        .search {
+                        background-image: url("../../assets/images/courseManage/search1.png");
+                        }
+                        .btnText {
+                            color: rgba(64, 158, 255, 1);
+                        }
+                    }
+                    .btn2:hover {
+                        background: rgba(64, 158, 255, 1);
+                        .search {
+                        background-image: url("../../assets/images/courseManage/reset0.png");
+                        }
+                        .btnText {
+                        color: #ffffff;
+                        }
+                    }
+                }
+            }
+            .tmpl_body{
+                .tmpl_tabbox{
+
+                }
+            }
+        }
+    }
+</style>