fe-manage/src/views/courselibrary/CoursewareManage.vue

<!-- 课件管理页面 -->
<template>
  <div class="courseManage">
    <div class="headerf">
      <!-- 搜索框及按钮 -->
      <div class="filter">
        <div class="filterItems">
          <div class="fi_input fitems">
              <a-input v-model:value="value" style="width: 270px ;height:40px;border-radius: 8px;" placeholder="请输入项目名称" />
          </div>
          <div class="fi_input fitems">
              <a-input v-model:value="value" style="width: 270px ;height:40px;border-radius: 8px;" placeholder="请输入名称" />
          </div>
          <div class="fi_input fitems">
              <a-input v-model:value="value" style="width: 270px ;height:40px;border-radius: 8px;" placeholder="请输入所属项目" />
          </div>
          <div class="select fitems">
            <a-select
              dropdownClassName="dropdown-style"
              style="width: 200px"
              placeholder="请选择状态"
              :options="options1"
              allowClear
              showSearch
            >
          </a-select>
          </div>
          <div class="select fitems">
            <a-select
              dropdownClassName="dropdown-style"
              style="width: 200px"
              placeholder="请选择内容分类"
              :options="options2"
              allowClear
              showSearch
            ></a-select>
          </div>
          <div class="select fitems">
            <a-time-range-picker />
            <!-- <a-date-picker
              v-model="selectTime"
              type="date"
              placeholder="创建时间"
              style="width: 286px"
            /> -->
          </div>
        </div>
      </div>
      
      <div class="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 class="btn btn3">
            <div class="search"></div>
            <div class="btnText">导出</div>
          </div>
          <div class="btn btn4">
            <div class="search"></div>
            <div class="btnText" @click="ft_hShow">新建课程</div>
          </div>
      </div>
    <!-- 搜索框及按钮 -->
    </div>

    <!-- 新建面授课弹窗 -->
    <div class="faceteach" :style="{display:ft_hs ?  'block' :'none' }">
      <div class="ft_header"></div>
      <div class="ft_main">
        <div class="m_header">
          <div class="add_icon"></div>
          <span>请选择课程类型</span>
          <div class="add_exit">x</div>
        </div>
        <div class="m_body">
          <div class="b_header">
            <span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
            <span style="margin-right:14px;">课程名称</span>
            <div class="b_input">
              <a-input v-model:value="value" style="width: 440px ;height:40px;border-radius: 8px;" placeholder="请输入课程名称" />
            </div>
          </div>
          <div class="b_sub">
            <div class="bs_header">
              <div class="b_left">课程命名规则</div>
              <div class="b_right" @click="hideShow" >
                <div class="b_zk" :style="{display:hideshow ?  'block' :'none' }">
                  <span  style="color: #4EA6FF;">收起</span>
                </div>
                <div class="b_sq" :style="{display:hideshow ?  'none' :'block' }">
                  <span style="color: #4EA6FF;">展开</span>
                </div>
                <div class="b_icon"></div>
              </div>
            </div>
            <div class="bl_detail" :style="{display:hideshow ?  'block' :'none'  }">
              <span style="color: #999BA3;">
                  1、课程名称统一不加书名号。<br/>
                  2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
                  之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
                  看到的是课程内容主题。<br/>
                  3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用
                  版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。
              </span>
            </div>
          </div>
          <div class="b_center">
            <span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
            <span style="margin-right:14px;">授课形式</span>
            <div class="bc_boxl">
              <div class="ol_checkbox"><div class="checkbtn"></div></div>
              <span style="margin:auto 31px auto 5px;">线上</span>
            </div>
            <div class="bc_boxr"  @click="bs_hShow">
              <div class="ol_checkbox"><div class="checkbtn"></div></div>
              <span style="margin:auto 31px auto 5px;">面授</span>
            </div>
          </div>
          <div class="b_sup" :style="{display:bs_hs ?  'block' :'none'  }">
            <div class="bs_box">
              <span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
              <span style="margin-right:14px;">是否设置目录</span>
              <div class="ol_checkbox">
                <div class="checkbtn"></div>
              </div>
              <span style="margin:auto 31px auto 5px;">线上</span>
              <div class="ol_checkbox">
                <div class="checkbtn"></div>
              </div>
              <span style="margin:auto 31px auto 5px;">面授</span>
            </div>
          </div>
          <div class="b_footer">
            <div class="btn btn5">
              <div class="btnText">取消</div>
            </div>
            <div class="btn btn6" >
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新建面授课弹窗 -->

    <!-- 表格 -->
    <div class="tableBox">
      <a-table :columns="columns" :data-source="data" :scroll="{ x: 800 }">
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'operation'">
            <a>action</a>
          </template>
        </template>
      </a-table>
    </div>
    <!-- 表格 -->
  </div>
</template>
<script>
import { reactive, toRefs, defineComponent, ref } from 'vue';
const columns = [{
  title: '序号',
  width: 200,
  dataIndex: 'num',
  key: 'num',
  align: "center",
}, {
  title: '名称',
  width: 200,
  dataIndex: 'name',
  key: 'name',
}, {
  title: '内容分类',
  width: 200,
  dataIndex: 'content',
  key: '1',
  align: "center",
}, {
  title: '课程形式',
  width: 200,
  dataIndex: 'courseform',
  key: '2',
  align: "center",
}, {
  title: ' 所属项目',
  width: 300,
  dataIndex: 'project',
  key: '3',
  align: "center",
}, {
  title: '学习人数',
  width: 200,
  dataIndex: 'stunum',
  key: '4',
  align: "center",
}, {
  title: '评分',
  width: 200,
  dataIndex: 'grade',
  key: '5',
  align: "center",
}, {
  title: '状态',
  width: 200,
  dataIndex: 'status',
  key: '6',
  align: "center",
}, {
  title: '是否发布',
  width: 200,
  dataIndex: 'ynpub',
  key: '7',
  align: "center",
}, {
  title: '创建人',
  width: 200,
  dataIndex: 'creator',
  key: '8',
  align: "center",
}, {
  title: '创建时间',
  width: 280,
  dataIndex: 'createtime',
  key: '9',
  align: "center",
}, {
  title: '上线时间',
  width: 280,
  dataIndex: 'pubtime',
  key: '10',
  align: "center",
}, {
  title: '是否停用',
  width: 200,
  key: 'either',
  dataIndex: 'ynuse',
  align: "center",
}, {
  title: '操作',
  width: 400,
  key: 'operation',
  fixed: 'right',
  align: "center",
}];
const data = [{
  key: '1',
  num:1,
  name: '时间管理',
  content: '领导力',
  courseform: '线上',
  project: '管理者进阶-腾飞班1',
  stunum: '50',
  grade: '5',
  status: '未提交',
  ynpub: '未发布',
  creator: '管理员',
  createtime: '2022-07-20 9:30',
  pubtime: '2022-07-20 9:30',
  ynuse: '启用',
  kkty:false,
}, {
  key: '2',
  num:2,
  name: '智能制造初级课程',
  content: '专业力',
  courseform: '线上',
  project: '-',
  stunum: '200',
  grade: '5',
  status: '待审核',
  ynpub: '未发布',
  creator: '管理员',
  createtime: '2022-07-20 9:30',
  pubtime: '2022-07-20 9:30',
  ynuse: '启用',
  kkty:true,
  }];
export default defineComponent({
  data() {
    const options1 = ref([ {
      value: 'value1',
      label: '请选择状态',
    },{
      value: 'uncommitted',
      label: '未提交',
    }, {
      value: 'tocheck',
      label: '待审核',
    }, {
      value: 'checked',
      label: '已审核',
    }, {
      value: 'uncheck',
      label: '审核未通过',
      }]);

    const options2 = ref([{
      value: 'value2',
      label: '请选择内容分类',
    }, {
      value: 'leadership',
      label: '领导力',
    }, {
      value: 'ingeneral',
      label: '通用力',
    }, {
      value: 'profession',
      label: '专业力',
      }]);

    const state = reactive({
      ft_hs:false,
      hideshow: false,
      bs_hs:true,
    });

    const ft_hShow = () => {
      if (state.ft_hs == false) {
        state.ft_hs = true
      } 
    }

    const hideShow = () => {
      if (state.hideshow == false) {
        state.hideshow = true
      } else {
        state.hideshow = false
      }
    }

    const bs_hShow = () => {
      if (state.bs_hs == true) {
        state.bs_hs = false
      } else {
        state.bs_hs = true
      }
    }
    return {
      ...toRefs(state),
      data,
      columns,
      options1,
      options2,
      ft_hShow,
      hideShow,
      bs_hShow,
    };
  },
});

</script>
<style lang="scss">
// .dropdown-style{
//   .ant-select-dropdown-menu{
//     background: #6767bd;
//   }
//   .ant-select-dropdown-menu-item {
//     color: #4EA6FF !important;
// }
// }
.courseManage {
  width: 100%;
  min-width: 1000px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .headerf{
    display: flex;
    margin-left: 38px;
    margin-top: 30px;
    .filter {
      width: calc(70% - 40px) ;
      margin-right: 30px ;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .filterItems {
        display: flex;
        flex-wrap: wrap;
        .fitems{
          margin-right: 20px;
          margin-bottom: 20px;
        }
      }
    }
      .btns {
        display: flex;
        // flex-wrap: wrap;
        .btn {
          padding: 0px 26px 0px 26px;
          height: 38px;
          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/courseManage/search1.png");
          }
        }
        .btn2 {
          .search {
            width: 16px;
            height: 18px;
            background-image: url("../../assets/images/courseManage/reset1.png");
          }
        }
        .btn3 {
          .search {
            width: 17px;
            height: 18px;
            background-image: url("../../assets/images/courseManage/add1.png");
          }
        }
        .btn4 {
          margin-right: 0px;
          .search {
            width: 17px;
            height: 18px;
            background-image: url("../../assets/images/courseManage/add1.png");
          }
        }
        .btn1:hover {
          background: rgba(64, 158, 255, 1);
          .search {
            background-image: url("../../assets/images/courseManage/search0.png");
          }
          .btnText {
            color: #ffffff;
          }
        }
        .btn2:hover {
          background: rgba(64, 158, 255, 1);
          .search {
            background-image: url("../../assets/images/courseManage/reset0.png");
          }
          .btnText {
            color: #ffffff;
          }
        }
        .btn3:hover {
          background: rgba(64, 158, 255, 1);
          .search {
            background-image: url("../../assets/images/courseManage/add0.png");
          }
          .btnText {
            color: #ffffff;
          }
        }
        .btn4:hover {
          background: rgba(64, 158, 255, 1);
          .search {
            background-image: url("../../assets/images/courseManage/add0.png");
          }
          .btnText {
            color: #ffffff;
          }
        }
      }
    }
  
  .faceteach{
    z-index: 1000;
    width: 679px;
    height: 525px;
    background: #FFFFFF;
    box-shadow: 0px 1px 35px 0px rgba(118,136,166,0.21);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    .ft_header{
        position: absolute;
        width:calc(100%);
        height: 40px;
        background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
    }
    .ft_main{
        width:calc(100%);
        position: relative;
        .m_header{
            display: flex;
            align-items: center;
            padding-top: 20px;
            padding-left: 26px;
            font-size: 16px;
            .add_icon{
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/coursewareManage/add1.png);
                background-size: 100% 100%;
            }
            .add_exit{
                position: absolute;
                right:42px;
                cursor: pointer;
            }
        }
        .m_body{
          width: 88%;
          .checkbtn{
            width: 7.8px;
            height: 7.8px;
            border: 1px solid #4EA6FF;
            background-color: #4EA6FF;
            border-radius: 50%;
          }
          .ol_checkbox{
              width: 14px;
              height: 14px;
              border: 1px solid #000000;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          .b_header{
            display: flex;
            align-items: center;
            margin: 21px auto 14px 80px;
          }
          .b_sub{
            margin-left: 164px;
            .bs_header{
              display: flex;
              justify-content: space-between;
              .b_right{
                display: flex;
              }
            }
          }
          .bl_detail{
            top: 24px;
          }
          .b_center{
            display: flex;
            align-items: center;
            margin: 21px auto 14px 80px;
            .bc_boxl,.bc_boxr{
              display: flex;
              align-items: center;
            }
          }
          .b_sup{
            margin: 21px auto 14px 52px;
            .bs_box{
              display: flex;
              align-items: center;
            }
          }
          .b_footer{
            width: 100%;
            margin-left: 212px;
            margin-top: 25px;
            display: flex;
            .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;
              .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;
            }
          }
        }
      }
  }  

  .tableBox {
    margin: 20px 38px 30px;
  }
}
</style>