mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-09 10:56:46 +08:00
3736 lines
116 KiB
Vue
3736 lines
116 KiB
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-range-picker
|
||
v-model:value="value2"
|
||
separator="至"
|
||
:placeholder="[' 开始时间', ' 结束时间']"
|
||
/>
|
||
</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="of_hShow">新建课程</div>
|
||
</div>
|
||
</div>
|
||
<!-- 搜索框及按钮 -->
|
||
</div>
|
||
<!-- 新建选择线上还是面授课弹窗 -->
|
||
<a-modal v-model:visible="of_hs" style="margin-top: 400px">
|
||
<div
|
||
class="selectonlineface"
|
||
:style="{ display: of_hs ? 'block' : 'none' }"
|
||
>
|
||
<div class="of_header"></div>
|
||
<div class="of_main">
|
||
<div class="ofm_header">
|
||
<div class="add_icon"></div>
|
||
<span>请选择课程类型</span>
|
||
<div class="close_exit" @click="of_exit"></div>
|
||
</div>
|
||
<div class="ofm_body">
|
||
<div class="ofmb_items">
|
||
<div class="signbox">
|
||
<div class="sign"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
|
||
<span style="margin-right: 3px">课程名称：</span>
|
||
</div>
|
||
<div class="b_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
maxlength="20"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入课程名称"
|
||
/>
|
||
</div>
|
||
<!-- <div class="showcount">{{ valueE.length }}/20</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' }"
|
||
>
|
||
<div class="zksqbox" style="display:flex;">
|
||
<span style="color: #4ea6ff;margin-right:5px;">收起</span>
|
||
<div class="b_icon"><img src="@/assets/images/coursewareManage/up.png" alt=""></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="b_sq"
|
||
:style="{ display: hideshow ? 'none' : 'block' }"
|
||
>
|
||
<div class="zksqbox" style="display:flex;">
|
||
<span style="color: #4ea6ff;margin-right:5px;">展开</span>
|
||
<div class="b_icon"><img src="@/assets/images/coursewareManage/down.png" alt=""></div>
|
||
</div>
|
||
</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="ofmb_items">
|
||
<div class="signbox">
|
||
<div class="sign"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
|
||
<span>授课形式</span>
|
||
</div>
|
||
<a-radio-group v-model:value="onftvalue">
|
||
<div class="bc_box">
|
||
<div class="bc_boxl" @click="bs_hShow">
|
||
<div class="ol_checkbox">
|
||
<a-radio v-model:checked="checked" :value="1">线上</a-radio>
|
||
</div>
|
||
</div>
|
||
<div class="bc_boxr" @click="clear_valueE">
|
||
<div class="ol_checkbox">
|
||
<a-radio v-model:checked="checked" :value="2">面授</a-radio>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-radio-group>
|
||
</div>
|
||
<div class="b_sup" :style="{ display: bs_hs ? 'block' : 'none' }">
|
||
<div class="ofmb_items">
|
||
<div class="signbox">
|
||
<div class="sign"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
|
||
<span>是否设置目录</span>
|
||
</div>
|
||
<a-radio-group v-model:value="valueE">
|
||
<div class="bc_box">
|
||
<div class="ol_checkbox">
|
||
<a-radio v-model:checked="checked" :value="3">是</a-radio>
|
||
</div>
|
||
<div class="ol_checkbox">
|
||
<a-radio v-model:checked="checked" :valueA="4">否</a-radio>
|
||
</div>
|
||
</div>
|
||
</a-radio-group>
|
||
</div>
|
||
</div>
|
||
<div class="b_footer">
|
||
<div class="btn btn5">
|
||
<div class="btnText">取消</div>
|
||
</div>
|
||
<div class="btn btn6">
|
||
<div class="btnText" @click="createft">确定</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
<!-- 新建选择线上还是面授课弹窗 -->
|
||
<!-- 确定新建面授课弹窗 -->
|
||
<div class="faceteach" :style="{ display: ft_hs ? 'block' : 'none' }">
|
||
<div class="ft_main">
|
||
<div
|
||
style="
|
||
width: 130px;
|
||
height: 40px;
|
||
background: #388be1;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
"
|
||
@click="showModal"
|
||
>
|
||
</div>
|
||
<a-modal
|
||
v-model:visible="ft_hs"
|
||
title="Title"
|
||
@ok="closeModal"
|
||
:footer="null"
|
||
:closable="false"
|
||
wrapClassName="modalStyle"
|
||
width="80%"
|
||
>
|
||
<div class="modalHeader">
|
||
<div class="headerLeft">
|
||
<img
|
||
style="width: 17px; height: 18px; margin-right: 8px"
|
||
src="../../assets/images/basicinfo/add.png"
|
||
/>
|
||
<span class="headerLeftText">新建面授课</span>
|
||
</div>
|
||
<div style="margin-right: 57px; cursor: pointer">
|
||
<img
|
||
@click="ft_exit"
|
||
style="width: 22px; height: 22px"
|
||
src="../../assets/images/basicinfo/close22.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="modalMain">
|
||
<div class="m_title">课程信息</div>
|
||
<div class="m_body">
|
||
<div class="mb_left">
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<div class="asterisk_icon"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
|
||
<span style="margin-right: 14px">课程名称</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i1_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入课程名称"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="i2_cz">
|
||
<div class="i2_top">
|
||
<div class="i2_left">课程命名规则</div>
|
||
<div class="i2_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="i2_detail"
|
||
:style="{ display: hideshow ? 'block' : 'none' }"
|
||
>
|
||
<span style="color: #999ba3">
|
||
1、课程名称统一不加书名号。<br />
|
||
2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
|
||
之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
|
||
看到的是课程内容主题。<br />
|
||
3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用
|
||
版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<div class="asterisk_icon"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
|
||
<span style="margin-right: 14px">封面图</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i3_upload">
|
||
<a-upload
|
||
v-model:file-list="fileList"
|
||
name="avatar"
|
||
list-type="picture-card"
|
||
class="avatar-uploader"
|
||
:show-upload-list="false"
|
||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||
:before-upload="beforeUpload"
|
||
@change="handleChange"
|
||
>
|
||
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
|
||
<div v-else>
|
||
<loading-outlined v-if="loading"></loading-outlined>
|
||
<plus-outlined v-else></plus-outlined>
|
||
<div class="ant-upload-text">Upload</div>
|
||
</div>
|
||
</a-upload>
|
||
</div>
|
||
<div class="i3_bottom">
|
||
<span style="color: #999ba3"
|
||
>高宽比为16:9 (如:800*450) png或jpg图片</span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<div class="asterisk_icon" ><img style="width:10px;height:10px;" src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
|
||
<span style="margin-right: 14px">目标人群</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i1_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入目标人群"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<span style="margin-right: 14px">课程价值</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i1_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入课程价值"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<div class="asterisk_icon"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
|
||
<span style="margin-right: 14px">内容分类</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="select i6_input">
|
||
<a-select
|
||
dropdownClassName="dropdown-style"
|
||
style="width: 440px"
|
||
placeholder="请选择"
|
||
:options="options2"
|
||
allowClear
|
||
showSearch
|
||
></a-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<span style="margin-right: 14px">场景</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="select i7_input">
|
||
<a-select
|
||
dropdownClassName="dropdown-style"
|
||
style="width: 440px"
|
||
placeholder="请选择"
|
||
:options="options2"
|
||
allowClear
|
||
showSearch
|
||
></a-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<span style="margin-right: 14px">内容标签</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入按回车键创建成功"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="i8_bottom">
|
||
<a-tag closable @close="log">Tag 2</a-tag>
|
||
<a-tag closable @close.prevent>Prevent Default</a-tag>
|
||
</div>
|
||
</div>
|
||
<div class="mb_right">
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<div class="asterisk_icon"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
|
||
<span style="margin-right: 14px">授课教师</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i1_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<span style="margin-right: 14px">课程简介</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i10_textarea">
|
||
<a-textarea
|
||
v-model:value="value"
|
||
style="width: 440px; height: 100px; border-radius: 8px"
|
||
placeholder="请输入"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<span style="margin-right: 10px">附件</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="accessory">
|
||
<div class="accessory_icon"><img src="@/assets/images/coursewareManage/enclosure.png" alt=""></div>
|
||
<span style="color: #4ea6ff">添加附件</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items12">
|
||
<div class="i12_box1">
|
||
<div class="file_img"></div>
|
||
<div class="file_detail">
|
||
<div class="file_name">
|
||
<span style="color:#6F6F6F;">图片1.png</span>
|
||
</div>
|
||
<div class="file_size">
|
||
<span style="color:#999BA3">152.77K</span>
|
||
</div>
|
||
</div>
|
||
<div class="file_operation"><span style="color: #4EA6FF;">删除</span></div>
|
||
</div>
|
||
<div class="i12_box1">
|
||
<div class="file_img"></div>
|
||
<div class="file_detail">
|
||
<div class="file_name">
|
||
<span style="color:#6F6F6F;">图片2.png</span>
|
||
</div>
|
||
<div class="file_updata">
|
||
<div class="updatabox">
|
||
<div class="updatacolor"></div>
|
||
<div class="updataxq">上传完成</div>
|
||
</div>
|
||
<div class="upjd"><span style="margin:auto 5px">100%</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="file_operation"><span style="color: #4EA6FF;">删除</span></div>
|
||
</div>
|
||
<div class="i12_box1">
|
||
<div class="file_img"></div>
|
||
<div class="file_detail">
|
||
<div class="file_name">
|
||
<span style="color:#6F6F6F;">图片3.png</span>
|
||
</div>
|
||
<div class="file_updata">
|
||
<div class="updatabox">
|
||
<div class="updatacolor2"></div>
|
||
<div class="updataxq2">上传失败</div>
|
||
</div>
|
||
<div class="upjd"><span style="margin:auto 5px">80%</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="file_operation"><span style="color: #4EA6FF;margin-right:5px;">重传</span><span style="color: #4EA6FF;">取消</span></div>
|
||
</div>
|
||
<div class="i12_box1">
|
||
<div class="file_img"></div>
|
||
<div class="file_detail">
|
||
<div class="file_name">
|
||
<span style="color:#6F6F6F;">图片4.png</span>
|
||
</div>
|
||
<div class="file_updata">
|
||
<div class="updatabox">
|
||
<div class="updatacolor3"></div>
|
||
<div class="updataxq3">正在上传</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="file_operation"><span style="color: #4EA6FF;margin-right:5px;">暂停</span><span style="color: #4EA6FF;">取消</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
</div>
|
||
<!-- 确定新建面授课弹窗 -->
|
||
<!-- 表格 -->
|
||
<div class="tableBox">
|
||
<!-- <a-table
|
||
:columns="tableDataFunc()"
|
||
:data-source="tableData"
|
||
:loading="tableDataTotal === -1 ? true : false"
|
||
:scroll="{ x: 600 }"
|
||
expandRowByClick="true"
|
||
@expand="expandTable"
|
||
:pagination="false"
|
||
/> -->
|
||
<a-table
|
||
:columns="columns1"
|
||
:data-source="tableData1"
|
||
:loading="tableDataTotal === -1 ? true : false"
|
||
:scroll="{ x: 600 }"
|
||
expandRowByClick="true"
|
||
@expand="expandTable"
|
||
:pagination="false"
|
||
/>
|
||
</div>
|
||
<!-- 表格 -->
|
||
<!-- 操作管理在线课程管理页面 -->
|
||
<a-modal
|
||
v-model:visible="om_1"
|
||
title="Title"
|
||
@ok="closeModal"
|
||
:footer="null"
|
||
:closable="false"
|
||
wrapClassName="modalStyle"
|
||
width="80%"
|
||
>
|
||
<div class="modalHeader">
|
||
<div class="headerLeft">
|
||
<img
|
||
style="width: 17px; height: 18px; margin-right: 8px"
|
||
src="../../assets/images/basicinfo/add.png"
|
||
/>
|
||
<span class="headerLeftText">在线课程管理</span>
|
||
</div>
|
||
<div style="margin-right: 57px; cursor: pointer">
|
||
<img
|
||
@click="om_exit"
|
||
style="width: 22px; height: 22px"
|
||
src="../../assets/images/basicinfo/close22.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="modalMain">
|
||
<div class="onlinemanage" :style="{ display: om_1 ? 'block' : 'none' }">
|
||
<div class="om_main">
|
||
<div class="om_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="value"
|
||
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" style="margin-bottom: 20px">
|
||
<a-table
|
||
:columns="columns2"
|
||
:data-source="tableData2"
|
||
:loading="tableDataTotal === -1 ? true : false"
|
||
:pagination="false"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
<!-- 操作管理在线课程管理页面 -->
|
||
<!-- 操作管理面授课程管理页面 -->
|
||
<a-modal
|
||
v-model:visible="ftm_1"
|
||
title="Title"
|
||
@ok="closeModal"
|
||
:footer="null"
|
||
:closable="false"
|
||
wrapClassName="modalStyle"
|
||
width="80%"
|
||
>
|
||
<div class="modalHeader">
|
||
<div class="headerLeft">
|
||
<img
|
||
style="width: 17px; height: 18px; margin-right: 8px"
|
||
src="../../assets/images/basicinfo/add.png"
|
||
/>
|
||
<span class="headerLeftText">面授课程管理</span>
|
||
</div>
|
||
<div style="margin-right: 57px; cursor: pointer">
|
||
<img
|
||
@click="ftm_exit"
|
||
style="width: 22px; height: 22px"
|
||
src="../../assets/images/basicinfo/close22.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="modalMain">
|
||
<div class="faceteachmanage" :style="{ display: ftm_1 ? 'block' : 'none' }">
|
||
<div class="om_main">
|
||
<div class="om_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>
|
||
</div>
|
||
<div class="b_menunav">
|
||
<div class="bm_select">
|
||
<a-select
|
||
class="select"
|
||
ref="select"
|
||
placeholder="请选择状态"
|
||
v-model:value="value"
|
||
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" 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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
<!-- 操作管理面授课程管理页面 -->
|
||
<!-- 操作管理面授课程管理查看详情页面 -->
|
||
<a-modal
|
||
v-model:visible="om_ckxq"
|
||
title="Title"
|
||
@ok="closeModal"
|
||
:footer="null"
|
||
:closable="false"
|
||
wrapClassName="modalStyle"
|
||
width="80%"
|
||
>
|
||
<div class="modalHeader">
|
||
<div class="headerLeft">
|
||
<img
|
||
style="width: 17px; height: 18px; margin-right: 8px"
|
||
src="../../assets/images/basicinfo/add.png"
|
||
/>
|
||
<span class="headerLeftText">查看详情</span>
|
||
</div>
|
||
<div style="margin-right: 57px; cursor: pointer">
|
||
<img
|
||
@click="ftsr_exit"
|
||
style="width: 22px; height: 22px"
|
||
src="../../assets/images/basicinfo/close22.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="modalMain">
|
||
<div class="ftsturecord" :style="{ display: om_ckxq ? 'block' : 'none' }">
|
||
<div class="ftsr_main">
|
||
<div class="ftsr_table">
|
||
<a-table
|
||
:columns="columns4"
|
||
:data-source="tableData4"
|
||
:loading="tableDataTotal === -1 ? true : false"
|
||
:pagination="false"
|
||
>
|
||
</a-table>
|
||
</div>
|
||
<div class="ftsr_btn" @click="ftsr_exit">
|
||
<div class="btnText">取消</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
<!-- 面授课程管理查看详情页面 -->
|
||
<!-- 操作授权页面 -->
|
||
<a-modal
|
||
v-model:visible="gpm_hs"
|
||
title="Title"
|
||
@ok="closeModal"
|
||
:footer="null"
|
||
:closable="false"
|
||
wrapClassName="modalStyle"
|
||
width="80%"
|
||
>
|
||
<div class="modalHeader">
|
||
<div class="headerLeft">
|
||
<img
|
||
style="width: 17px; height: 18px; margin-right: 8px"
|
||
src="../../assets/images/basicinfo/add.png"
|
||
/>
|
||
<span class="headerLeftText">授权</span>
|
||
</div>
|
||
<div style="margin-right: 57px; cursor: pointer">
|
||
<img
|
||
@click="gpm_exit"
|
||
style="width: 22px; height: 22px"
|
||
src="../../assets/images/basicinfo/close22.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="modalMain">
|
||
<div class="givepower" :style="{ display: gpm_hs ? 'block' : 'none' }">
|
||
<div class="gp_main">
|
||
<div class="gpm_inputbtn">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="
|
||
width: 270px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
margin-right: 14px;
|
||
"
|
||
placeholder="请输入姓名"
|
||
/>
|
||
<div class="gpm_btn btn1">
|
||
<div class="search"></div>
|
||
<div class="btnText">搜索</div>
|
||
</div>
|
||
<div class="gpm_btn btn2">
|
||
<div class="reset"></div>
|
||
<div class="btnText">重置</div>
|
||
</div>
|
||
</div>
|
||
<div class="gpm_notice">
|
||
<div class="th_icon"></div>
|
||
<div class="textarea">
|
||
已选择 <span style="color: #4ea6ff">1</span> 项
|
||
</div>
|
||
<div class="textarea">
|
||
<span style="color: #999ba3">列表选项总计：</span><span>5条</span>
|
||
</div>
|
||
</div>
|
||
<div class="gpm_table">
|
||
<a-table
|
||
:columns="columns5"
|
||
:data-source="tableData5"
|
||
: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()
|
||
// })
|
||
},
|
||
}"
|
||
>
|
||
<template #bodyCell="{ column }">
|
||
<template v-if="column.key === 'opacation'">
|
||
<a>取消授权</a>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
<!--操作授权页面 -->
|
||
<!--开课页面 -->
|
||
<a-modal
|
||
v-model:visible="stm_hs"
|
||
title="Title"
|
||
@ok="closeModal"
|
||
:footer="null"
|
||
:closable="false"
|
||
wrapClassName="modalStyle"
|
||
width="80%"
|
||
>
|
||
<div class="modalHeader">
|
||
<div class="headerLeft">
|
||
<img
|
||
style="width: 17px; height: 18px; margin-right: 8px"
|
||
src="../../assets/images/basicinfo/add.png"
|
||
/>
|
||
<span class="headerLeftText">开课</span>
|
||
</div>
|
||
<div style="margin-right: 57px; cursor: pointer">
|
||
<img
|
||
@click="stm_exit"
|
||
style="width: 22px; height: 22px"
|
||
src="../../assets/images/basicinfo/close22.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="modalMain">
|
||
<div class="schooltime" :style="{ display: stm_hs ? 'block' : 'none' }">
|
||
<div class="st_main">
|
||
<div class="stm_inputbtn">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="
|
||
width: 270px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
margin-right: 14px;
|
||
"
|
||
placeholder="请输入创建人"
|
||
/>
|
||
<a-input
|
||
v-model:value="value"
|
||
style="
|
||
width: 270px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
margin-right: 14px;
|
||
"
|
||
placeholder="请输入教师名称"
|
||
/>
|
||
<div class="select">
|
||
<a-date-picker
|
||
v-model="selectTime"
|
||
type="date"
|
||
placeholder="创建时间"
|
||
style="width: 270px; margin-right: 14px"
|
||
/>
|
||
</div>
|
||
<div class="stm_btn btn1">
|
||
<div class="search"></div>
|
||
<div class="btnText">搜索</div>
|
||
</div>
|
||
<div class="stm_btn btn2">
|
||
<div class="reset"></div>
|
||
<div class="btnText">重置</div>
|
||
</div>
|
||
<div class="stm_btn3 btn3">
|
||
<div class="add"></div>
|
||
<div class="btnText" @click="createkk">
|
||
<span style="color: #ffffff">新建开课</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stm_table">
|
||
<a-table
|
||
:columns="columns6"
|
||
:data-source="tableData6"
|
||
:loading="tableDataTotal === -1 ? true : false"
|
||
:scroll="{ x: 700, y: 800 }"
|
||
expandRowByClick="true"
|
||
@expand="expandTable"
|
||
: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>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
<!--开课页面 -->
|
||
<!--新建开课页面 -->
|
||
<a-modal v-model:visible="cstm_hs" style="margin-top: 400px">
|
||
<div
|
||
class="createschooltime"
|
||
:style="{ display: cstm_hs ? 'block' : 'none' }"
|
||
>
|
||
<div class="cst_header"></div>
|
||
<div class="cst_main">
|
||
<div class="cstm_header">
|
||
<div class="add_icon"></div>
|
||
<span>新建开课</span>
|
||
<div class="close_exit" @click="cstm_exit"></div>
|
||
</div>
|
||
<div class="cstm_title"><span>面授名称：管理者的专属面授课</span></div>
|
||
<div class="cstm_items">
|
||
<div class="signbox">
|
||
<div class="sign"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
|
||
<span style="margin-right: 3px">开课名称</span>
|
||
</div>
|
||
<div class="b_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入开课名称"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items">
|
||
<div class="signbox">
|
||
<div class="sign"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
|
||
<span style="margin-right: 3px">地点</span>
|
||
</div>
|
||
<div class="b_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入详细地点"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items">
|
||
<div class="signbox">
|
||
<div class="sign"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
|
||
<span style="margin-right: 3px">面授时间</span>
|
||
</div>
|
||
<div class="select fitems">
|
||
<a-range-picker
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
v-model:value="value2"
|
||
separator="至"
|
||
:placeholder="[' 开始时间', ' 结束时间']"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items">
|
||
<div class="signbox">
|
||
<div class="sign"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
|
||
<span style="margin-right: 3px">授课教师</span>
|
||
</div>
|
||
<div class="b_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入教师"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items">
|
||
<div class="signbox">
|
||
<span style="margin-right: 3px">报名设置</span>
|
||
</div>
|
||
<div class="b_input">
|
||
<a-checkbox v-model:checked="checked">
|
||
<span style="color: #6d7584">是否允许公开报名</span>
|
||
</a-checkbox>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items">
|
||
<div class="signbox">
|
||
<span style="margin-right: 3px">签到设置</span>
|
||
</div>
|
||
<div class="b_input">
|
||
<a-checkbox v-model:checked="checked">
|
||
<span style="color: #6d7584; margin-right: 30px">是否允许未报名的学员签到</span>
|
||
</a-checkbox>
|
||
<a-checkbox v-model:checked="checked">
|
||
<span style="color: #6d7584">签到是否需要口令</span>
|
||
</a-checkbox>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items">
|
||
<div class="signbox">
|
||
<span style="margin-right: 3px">评估设置</span>
|
||
</div>
|
||
<div class="b_input">
|
||
<a-checkbox v-model:checked="checked">
|
||
<span style="color: #6d7584">是否需要评估</span>
|
||
</a-checkbox>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items">
|
||
<div class="signbox">
|
||
<span style="margin-right: 3px">完成规则</span>
|
||
</div>
|
||
<div class="b_input">
|
||
<a-checkbox v-model:checked="checked">
|
||
<span style="color: #6d7584; margin-right: 30px">报名即完成</span>
|
||
</a-checkbox>
|
||
<a-checkbox v-model:checked="checked">
|
||
<span style="color: #6d7584; margin-right: 30px">签到即完成</span>
|
||
</a-checkbox>
|
||
<a-checkbox v-model:checked="checked">
|
||
<span style="color: #6d7584">请假算完成</span>
|
||
</a-checkbox>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items items_fj">
|
||
<div class="signbox">
|
||
<span style="margin-right: 3px">附件</span>
|
||
</div>
|
||
<div class="b_input">
|
||
<div class="upload_box">
|
||
<div class="upload_icon"><img src="@/assets/images/coursewareManage/enclosure.png" alt=""></div>
|
||
<span style="color: #4ea6ff">上传附件</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items">
|
||
<div class="signbox">
|
||
<span style="margin-right: 3px"> </span>
|
||
</div>
|
||
<div class="b_input">
|
||
<span style="color: #999ba3;">支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</span>
|
||
</div>
|
||
</div>
|
||
<div class="items_btn">
|
||
<div class="cstm_btn btn5">
|
||
<div class="btnText">取消</div>
|
||
</div>
|
||
<div class="cstm_btn btn6">
|
||
<div class="btnText" @click="cstm_exit">确定</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
<!--新建开课页面 -->
|
||
<!--新建开课学员管理页面页面 -->
|
||
<a-modal
|
||
v-model:visible="sm_hs"
|
||
title="Title"
|
||
@ok="closeModal"
|
||
:footer="null"
|
||
:closable="false"
|
||
wrapClassName="modalStyle"
|
||
width="80%"
|
||
>
|
||
<div class="modalHeader">
|
||
<div class="headerLeft">
|
||
<img
|
||
style="width: 17px; height: 18px; margin-right: 8px"
|
||
src="../../assets/images/basicinfo/add.png"
|
||
/>
|
||
<span class="headerLeftText">学员管理</span>
|
||
</div>
|
||
<div style="margin-right: 57px; cursor: pointer">
|
||
<img
|
||
@click="sm_exit"
|
||
style="width: 22px; height: 22px"
|
||
src="../../assets/images/basicinfo/close22.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="modalMain">
|
||
<div class="studentsmanage" :style="{ display: sm_hs ? 'block' : 'none' }">
|
||
<div class="stm_main">
|
||
<div class="stmmitems">
|
||
<div class="stmm_i1">
|
||
<span style="margin-right: 52px">XXX课程-第1期-20220726</span
|
||
><span style="color: #ffb751">已开课 4.5</span>
|
||
</div>
|
||
<div class="stmm_i2">
|
||
<span style="color: #999ba3">时间：</span
|
||
><span>2022-07-26 14：30-15：00</span>
|
||
</div>
|
||
<div class="stmm_i3">
|
||
<span style="color: #999ba3">地点：</span
|
||
><span>核心能力大楼培训教室</span>
|
||
</div>
|
||
<div class="stmm_i4">
|
||
<span style="color: #999ba3">授课教师：</span><span>王雪han</span>
|
||
</div>
|
||
<div class="stmm_i5">
|
||
<div class="i5_left">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="
|
||
width: 270px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
margin-right: 14px;
|
||
"
|
||
placeholder="请输入姓名"
|
||
/>
|
||
<div class="stmm_btn btn1">
|
||
<div class="search"></div>
|
||
<div class="btnText">搜索</div>
|
||
</div>
|
||
<div class="stmm_btn btn2">
|
||
<div class="reset"></div>
|
||
<div class="btnText">重置</div>
|
||
</div>
|
||
</div>
|
||
<div class="i5_right">
|
||
<div class="stmm_btn btn3">
|
||
<span style="color: #ffffff">添加学员</span>
|
||
</div>
|
||
<div class="stmm_btn btn4" @click="hideShow">
|
||
<div class="btn4_sub">
|
||
<span style="color: #4ea6ff; margin-right: 4px"
|
||
>批量操作</span
|
||
>
|
||
<div
|
||
class="b_zk"
|
||
:style="{ display: hideshow ? 'block' : 'none' }"
|
||
></div>
|
||
<div
|
||
class="b_sq"
|
||
:style="{ display: hideshow ? 'none' : 'block' }"
|
||
></div>
|
||
</div>
|
||
<div
|
||
class="btn4_sup"
|
||
:style="{ display: hideshow ? 'none' : 'block' }"
|
||
>
|
||
<div class="btn4_tit">
|
||
<span style="color: #4ea6ff">批量录入成绩</span>
|
||
</div>
|
||
<div class="btn4_op1">
|
||
<span style="margin: 10px auto">批量结业</span>
|
||
</div>
|
||
<div class="btn4_op2">
|
||
<span style="margin: 10px auto">批量通过</span>
|
||
</div>
|
||
<div class="btn4_op3">
|
||
<span style="margin: 10px auto">批量拒绝</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stmm_btn btn5">
|
||
<div class="export"></div>
|
||
<div class="btnText">导出</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stmm_i6">
|
||
<a-table
|
||
:columns="columns7"
|
||
:data-source="tableData7"
|
||
:loading="tableDataTotal === -1 ? true : false"
|
||
:scroll="{ x: 800 }"
|
||
expandRowByClick="true"
|
||
@expand="expandTable"
|
||
: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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
<!--新建开课学员管理页面页面 -->
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { reactive, toRefs, defineComponent, ref } from "vue";
|
||
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
|
||
import { message } from "ant-design-vue";
|
||
function getBase64(img, callback) {
|
||
const reader = new FileReader();
|
||
reader.addEventListener("load", () => callback(reader.result));
|
||
reader.readAsDataURL(img);
|
||
}
|
||
const columns1 = [
|
||
{
|
||
title: "序号",
|
||
width: 100,
|
||
dataIndex: "num",
|
||
key: "num",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "名称",
|
||
width: 200,
|
||
dataIndex: "name",
|
||
key: "name",
|
||
ellipsis: true,
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "内容分类",
|
||
width: 100,
|
||
dataIndex: "content",
|
||
key: "1",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "课程形式",
|
||
width: 100,
|
||
dataIndex: "courseform",
|
||
key: "2",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: " 所属项目",
|
||
width: 200,
|
||
dataIndex: "project",
|
||
key: "3",
|
||
align: "center",
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
title: "学习人数",
|
||
width: 110,
|
||
dataIndex: "stunum",
|
||
key: "4",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "评分",
|
||
width: 100,
|
||
dataIndex: "grade",
|
||
key: "5",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "状态",
|
||
width: 100,
|
||
dataIndex: "status",
|
||
key: "6",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "是否发布",
|
||
width: 100,
|
||
dataIndex: "ynpub",
|
||
key: "7",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "创建人",
|
||
width: 100,
|
||
dataIndex: "creator",
|
||
key: "8",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "创建时间",
|
||
width: 160,
|
||
dataIndex: "createtime",
|
||
key: "9",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "上线时间",
|
||
width: 160,
|
||
dataIndex: "pubtime",
|
||
key: "10",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "是否停用",
|
||
width: 100,
|
||
key: "either",
|
||
dataIndex: "ynuse",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "操作",
|
||
width: 300,
|
||
className: "h",
|
||
dataIndex: "operation",
|
||
key: "operation",
|
||
fixed: "right",
|
||
align: "center",
|
||
},
|
||
];
|
||
const columns2 = [
|
||
{
|
||
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",
|
||
},
|
||
];
|
||
const columns4 = [
|
||
{
|
||
title: "开课名称",
|
||
dataIndex: "projectName",
|
||
key: "projectName",
|
||
width: "30%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "地点",
|
||
dataIndex: "address",
|
||
key: "address",
|
||
width: "30%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "状态",
|
||
dataIndex: "status",
|
||
key: "status",
|
||
width: "40%",
|
||
align: "center",
|
||
},
|
||
];
|
||
const columns5 = [
|
||
{
|
||
title: "姓名",
|
||
dataIndex: "name",
|
||
key: "name",
|
||
width: "18%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "归属组织",
|
||
dataIndex: "organization",
|
||
key: "organization",
|
||
width: "18%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "岗位",
|
||
dataIndex: "position",
|
||
key: "position",
|
||
width: "18%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "拥有权限",
|
||
dataIndex: "authority",
|
||
key: "authority",
|
||
width: "18%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "操作",
|
||
dataIndex: "opacation",
|
||
key: "opacation",
|
||
width: "30%",
|
||
align: "center",
|
||
},
|
||
];
|
||
const columns6 = [
|
||
{
|
||
title: "序号",
|
||
dataIndex: "num",
|
||
key: "num",
|
||
width: "8%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "归属组织",
|
||
dataIndex: "organization",
|
||
key: "organization",
|
||
width: "10%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "场地",
|
||
dataIndex: "address",
|
||
key: "saddress",
|
||
width: "10%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "开始时间",
|
||
dataIndex: "starttime",
|
||
key: "starttime",
|
||
width: "18%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "创建时间",
|
||
dataIndex: "createtime",
|
||
key: "createtime",
|
||
width: "18%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "操作",
|
||
width: "30%",
|
||
dataIndex: "operation",
|
||
key: "operation",
|
||
align: "center",
|
||
},
|
||
];
|
||
const columns7 = [
|
||
{
|
||
title: "序号",
|
||
width: 200,
|
||
dataIndex: "num",
|
||
key: "num",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "姓名",
|
||
width: 200,
|
||
dataIndex: "name",
|
||
key: "name",
|
||
},
|
||
{
|
||
title: "工号",
|
||
width: 200,
|
||
dataIndex: "number",
|
||
key: "1",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "部门",
|
||
width: 200,
|
||
dataIndex: "department",
|
||
key: "2",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: " 岗位",
|
||
width: 300,
|
||
dataIndex: "postion",
|
||
key: "3",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "Band",
|
||
width: 200,
|
||
dataIndex: "band",
|
||
key: "4",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "报名状态",
|
||
width: 200,
|
||
dataIndex: "status",
|
||
key: "5",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "加入方式",
|
||
width: 200,
|
||
dataIndex: "join",
|
||
key: "6",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "签到状态",
|
||
width: 200,
|
||
dataIndex: "signstatus",
|
||
key: "7",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "评估状态",
|
||
width: 200,
|
||
dataIndex: "evastatus",
|
||
key: "8",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "结业状态",
|
||
width: 280,
|
||
dataIndex: "overstatus",
|
||
key: "9",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "操作",
|
||
width: 280,
|
||
className: "h",
|
||
dataIndex: "operation",
|
||
key: "operation",
|
||
fixed: "right",
|
||
align: "center",
|
||
},
|
||
];
|
||
export default defineComponent({
|
||
components: {
|
||
LoadingOutlined,
|
||
PlusOutlined,
|
||
},
|
||
setup() {
|
||
const current = ref(["mail"]);
|
||
const state = reactive({
|
||
tableData1: [
|
||
{
|
||
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,
|
||
},
|
||
{
|
||
key: "3",
|
||
num: 3,
|
||
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,
|
||
},
|
||
{
|
||
key: "4",
|
||
num: 4,
|
||
name: "B11入模培训",
|
||
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,
|
||
},
|
||
{
|
||
key: "5",
|
||
num: 5,
|
||
name: "入职培训",
|
||
content: "通用力",
|
||
courseform: "面授",
|
||
project: "-",
|
||
stunum: "5",
|
||
grade: "5",
|
||
status: "未提交",
|
||
ynpub: "未发布",
|
||
creator: "管理员",
|
||
createtime: "2022-07-20 9:30",
|
||
pubtime: "2022-07-20 9:30",
|
||
ynuse: "启用",
|
||
kkty: true,
|
||
},
|
||
{
|
||
key: "6",
|
||
num: 6,
|
||
name: "入职培训",
|
||
content: "通用力",
|
||
courseform: "面授",
|
||
project: "-",
|
||
stunum: "5",
|
||
grade: "6",
|
||
status: "已审核",
|
||
ynpub: "已发布",
|
||
creator: "管理员",
|
||
createtime: "2022-07-20 9:30",
|
||
pubtime: "2022-07-20 9:30",
|
||
ynuse: "启用",
|
||
kkty: true,
|
||
},
|
||
],
|
||
tableData2: [
|
||
{
|
||
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: "已完成",
|
||
},
|
||
],
|
||
tableData3: [
|
||
{
|
||
key: 1,
|
||
projectName: "刘莉",
|
||
numb: "10064511",
|
||
applytime: "2022-07-20 14:00:00",
|
||
signtime: "-",
|
||
status: "已通过",
|
||
},
|
||
],
|
||
tableData4: [
|
||
{
|
||
key: 1,
|
||
projectName: "刘莉",
|
||
address: "10064511",
|
||
status: "已通过",
|
||
},
|
||
],
|
||
tableData5: [
|
||
{
|
||
key: 1,
|
||
name: "李明",
|
||
organization: "-",
|
||
position: "产品经理",
|
||
authority: "归属权",
|
||
},
|
||
{
|
||
key: 2,
|
||
name: "李洋",
|
||
organization: "-",
|
||
position: "产品经理",
|
||
authority: "查看权",
|
||
},
|
||
{
|
||
key: 3,
|
||
name: "小李",
|
||
organization: "-",
|
||
position: "产品经理",
|
||
authority: "管理权",
|
||
},
|
||
{
|
||
key: 4,
|
||
name: "雄安名",
|
||
organization: "-",
|
||
position: "产品经理",
|
||
authority: "管理权",
|
||
},
|
||
{
|
||
key: 5,
|
||
name: "王哥",
|
||
organization: "-",
|
||
position: "产品经理",
|
||
authority: "管理权",
|
||
},
|
||
],
|
||
tableData6: [
|
||
{
|
||
key: 1,
|
||
num: 1,
|
||
organization: "管理者面授课1",
|
||
address: "核心能力大楼培训",
|
||
starttime: "2022-07-20 14:00:00",
|
||
createtime: "2022-07-14 14:00:00",
|
||
},
|
||
{
|
||
key: 2,
|
||
num: 2,
|
||
organization: "管理者面授课2",
|
||
address: "核心能力大楼培训",
|
||
starttime: "2022-07-20 14:00:00",
|
||
createtime: "2022-07-14 14:00:00",
|
||
},
|
||
{
|
||
key: 3,
|
||
num: 3,
|
||
organization: "管理者面授课3",
|
||
address: "核心能力大楼培训",
|
||
starttime: "2022-07-20 14:00:00",
|
||
createtime: "2022-07-14 14:00:00",
|
||
},
|
||
{
|
||
key: 4,
|
||
num: 4,
|
||
organization: "管理者面授课4",
|
||
address: "核心能力大楼培训",
|
||
starttime: "2022-07-20 14:00:00",
|
||
createtime: "2022-07-14 14:00:00",
|
||
},
|
||
{
|
||
key: 5,
|
||
num: 5,
|
||
organization: "管理者面授课5",
|
||
address: "核心能力大楼培训",
|
||
starttime: "2022-07-20 14:00:00",
|
||
createtime: "2022-07-14 14:00:00",
|
||
},
|
||
],
|
||
tableData7: [
|
||
{
|
||
key: "1",
|
||
num: 1,
|
||
name: "李梦",
|
||
number: "1000",
|
||
department: "显示事业",
|
||
postion: "产品经理",
|
||
band: "Band9",
|
||
status: "待审核",
|
||
join: "手动加入",
|
||
signstatus: "-",
|
||
evastatus: "-",
|
||
overstatus: "-",
|
||
operation: "2022-07-20 9:30",
|
||
},
|
||
{
|
||
key: "2",
|
||
num: 2,
|
||
name: "李梦",
|
||
number: "1001",
|
||
department: "智慧医工",
|
||
postion: "产品经理",
|
||
band: "Band10",
|
||
status: "已通过",
|
||
join: "手动加入",
|
||
signstatus: "已签到",
|
||
evastatus: "已评估",
|
||
overstatus: "-",
|
||
operation: "2022-07-20 9:30",
|
||
},
|
||
{
|
||
key: "3",
|
||
num: 3,
|
||
name: "李梦",
|
||
number: "1002",
|
||
department: "业务支援",
|
||
postion: "产品经理",
|
||
band: "Band10",
|
||
status: "已拒绝",
|
||
join: "手动加入",
|
||
signstatus: "-",
|
||
evastatus: "-",
|
||
overstatus: "-",
|
||
operation: "2022-07-20 9:30",
|
||
},
|
||
{
|
||
key: "4",
|
||
num: 4,
|
||
name: "李梦",
|
||
number: "1003",
|
||
department: "业务支援",
|
||
postion: "产品经理",
|
||
band: "Band9",
|
||
status: "已通过",
|
||
join: "报名加入",
|
||
signstatus: "已签到",
|
||
evastatus: "-",
|
||
overstatus: "90/已结业",
|
||
operation: "2022-07-20 9:30",
|
||
},
|
||
{
|
||
key: "5",
|
||
num: 5,
|
||
name: "李梦",
|
||
number: "1004",
|
||
department: "业务支援",
|
||
postion: "产品经理",
|
||
band: "Band9",
|
||
status: "已通过",
|
||
join: "报名加入",
|
||
signstatus: "请假",
|
||
evastatus: "-",
|
||
overstatus: "",
|
||
operation: "2022-07-20 9:30",
|
||
},
|
||
],
|
||
currentPage: 1,
|
||
tableDataTotal: 100,
|
||
pageSize: 10,
|
||
of_hs: false,
|
||
hideshow: true,
|
||
bs_hs: true,
|
||
ft_hs:false,
|
||
om_1: false,
|
||
ftm_1: false,
|
||
om_ckxq: false,
|
||
gpm_hs: false,
|
||
stm_hs: false,
|
||
cstm_hs: false,
|
||
sm_hs: false,
|
||
value:"",
|
||
valueE:"",
|
||
});
|
||
// const tableDataFunc = () => {
|
||
// 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,
|
||
// className: "h",
|
||
// dataIndex: "opacation",
|
||
// key: 'operation',
|
||
// fixed: 'right',
|
||
// align: "center",
|
||
// scopedSlots: { customRender: "action" },
|
||
// customRender: (text) => {
|
||
// // console.log('111',text);
|
||
// return (
|
||
// <div class="op_box">
|
||
// <div class="opacation">
|
||
// <span class={text.record.courseform === '面授' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >开课</span>
|
||
// <span class={text.record.ynuse === '停用' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >停用</span>
|
||
// <span class={text.record.status === '未提交' || text.record.status === '审核未通过' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >编辑</span>
|
||
// <span onClick={() => {}} class={text.record.status === '已审核' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >管理</span>
|
||
// <span class={text.record.status === '待审核' ? "errorCls" : "activecls"} style={{ "margin-left": "25px" }} >复制</span>
|
||
// <span style={{ "margin-left": "25px" }} class="more">
|
||
// <span>授权</span>
|
||
// <div class="moreArrow"></div>
|
||
// <div class="moreItems">
|
||
// <span style="color:#4EA6FF;">权限名单</span>
|
||
// <div class="mitems1">归属权</div>
|
||
// <div class="mitems2">管理权</div>
|
||
// <div class="mitems3">查看权</div>
|
||
// </div>
|
||
// </span>
|
||
// <span
|
||
// style={{ "margin-left": "21px", "margin-right": "30px" }}
|
||
// class="more"
|
||
// >
|
||
// <span>更多</span>
|
||
// <div class="moreArrow"></div>
|
||
// <div class="moreItems"></div>
|
||
// </span>
|
||
// </div>
|
||
// </div>
|
||
// );
|
||
// },
|
||
// },
|
||
// ];
|
||
// return columns;
|
||
// };
|
||
const fileList = ref([]);
|
||
const loading = ref(false);
|
||
const imageUrl = ref("");
|
||
const handleChange = (info) => {
|
||
if (info.file.status === "uploading") {
|
||
loading.value = true;
|
||
return;
|
||
}
|
||
if (info.file.status === "done") {
|
||
// Get this url from response in real world.
|
||
getBase64(info.file.originFileObj, (base64Url) => {
|
||
imageUrl.value = base64Url;
|
||
loading.value = false;
|
||
});
|
||
}
|
||
if (info.file.status === "error") {
|
||
loading.value = false;
|
||
message.error("upload error");
|
||
}
|
||
};
|
||
const beforeUpload = (file) => {
|
||
const isJpgOrPng =
|
||
file.type === "image/jpeg" || file.type === "image/png";
|
||
if (!isJpgOrPng) {
|
||
message.error("You can only upload JPG file!");
|
||
}
|
||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||
if (!isLt2M) {
|
||
message.error("Image must smaller than 2MB!");
|
||
}
|
||
return isJpgOrPng && isLt2M;
|
||
};
|
||
const getTableDate = () => {
|
||
let datas = state.tableData1;
|
||
datas.map((value) => {
|
||
{
|
||
//单层项目
|
||
value.operation = (
|
||
<div class="operation" style="justify-content: flex-start;">
|
||
<div class="nSelect">
|
||
{value.status === "已审核" ? (
|
||
<div class="nselect">
|
||
<div class="ops1">
|
||
<div
|
||
class="jc"
|
||
style={{ width: "30px" }}
|
||
onClick={() => {
|
||
state.stm_hs = true;
|
||
}}
|
||
>
|
||
开课
|
||
</div>
|
||
</div>
|
||
<div class="ops2">
|
||
<div
|
||
class="jc"
|
||
style={{ width: "30px" }}
|
||
onClick={() => {
|
||
if (value.courseform === "线上") {
|
||
state.om_1 = true;
|
||
} else if (value.courseform === "面授") {
|
||
state.ftm_1 = true;
|
||
}
|
||
}}
|
||
>
|
||
管理
|
||
</div>
|
||
</div>
|
||
<div class="ops3">
|
||
<div class="jc" style={{ width: "30px" }}>
|
||
复制
|
||
</div>
|
||
</div>
|
||
<div class="tableSelect">
|
||
<div class="ops4">
|
||
<a-select
|
||
style="width: 50px;margin-top:2px;margin-left:25px"
|
||
value="授权"
|
||
// options={state.projectNameList}
|
||
dropdownClassName="tabledropdown"
|
||
>
|
||
<a-select-option value="权限名单" label="权限名单">
|
||
<div
|
||
onClick={() => {
|
||
state.gpm_hs = true;
|
||
}}
|
||
>
|
||
权限名单
|
||
</div>
|
||
</a-select-option>
|
||
<a-select-option value="归属权" label="归属权">
|
||
<div
|
||
onClick={() => {
|
||
console.log("点击了");
|
||
}}
|
||
>
|
||
归属权
|
||
</div>
|
||
</a-select-option>
|
||
<a-select-option value="查看权" label="查看权">
|
||
<div>查看权</div>
|
||
</a-select-option>
|
||
<a-select-option value="管理权" label="管理权">
|
||
<div>管理权</div>
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
</div>
|
||
<div class="tableSelect">
|
||
<div class="ops5">
|
||
<a-select
|
||
style="width: 50px;margin-top:2px;margin-left:25px;margin-right:10px"
|
||
value="更多"
|
||
// options={state.projectNameList}
|
||
dropdownClassName="tabledropdown"
|
||
>
|
||
<a-select-option
|
||
value="复制"
|
||
label="复制"
|
||
style="padding-left:35px"
|
||
>
|
||
<div>复制</div>
|
||
</a-select-option>
|
||
<a-select-option
|
||
value="取消"
|
||
label="取消"
|
||
style="padding-left:35px"
|
||
>
|
||
<div
|
||
onClick={() => {
|
||
console.log("点击了");
|
||
}}
|
||
>
|
||
取消
|
||
</div>
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
{value.status === "待审核" ? (
|
||
<div class="nselect">
|
||
<div class="ops1">
|
||
<div
|
||
class="jc"
|
||
style={{ width: "30px" }}
|
||
onClick={() => {
|
||
state.stm_hs = true;
|
||
}}
|
||
>
|
||
开课
|
||
</div>
|
||
</div>
|
||
<div class="ops1">
|
||
<div class="jc" style={{ width: "30px" }}></div>
|
||
</div>
|
||
<div class="ops1">
|
||
<div class="jc" style={{ width: "30px" }}></div>
|
||
</div>
|
||
<div class="tableSelect">
|
||
<div class="ops4">
|
||
<a-select
|
||
style="width: 50px;margin-top:2px;margin-left:25px"
|
||
value="授权"
|
||
// options={state.projectNameList}
|
||
dropdownClassName="tabledropdown"
|
||
>
|
||
<a-select-option value="权限名单" label="权限名单">
|
||
<div
|
||
onClick={() => {
|
||
state.gpm_hs = true;
|
||
}}
|
||
>
|
||
权限名单
|
||
</div>
|
||
</a-select-option>
|
||
<a-select-option value="归属权" label="归属权">
|
||
<div
|
||
onClick={() => {
|
||
console.log("点击了");
|
||
}}
|
||
>
|
||
归属权
|
||
</div>
|
||
</a-select-option>
|
||
<a-select-option value="查看权" label="查看权">
|
||
<div>查看权</div>
|
||
</a-select-option>
|
||
<a-select-option value="管理权" label="管理权">
|
||
<div>管理权</div>
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
</div>
|
||
<div class="ops5">
|
||
<div class="jc" style="margin-left:22px">
|
||
撤回
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
{value.status === "未提交" ? (
|
||
<div class="nselect">
|
||
<div class="ops1">
|
||
<div
|
||
class="jc"
|
||
style={{ width: "30px" }}
|
||
onClick={() => {
|
||
state.stm_hs = true;
|
||
}}
|
||
>
|
||
开课
|
||
</div>
|
||
</div>
|
||
<div class="ops2">
|
||
<div class="jc" style={{ width: "30px" }}>
|
||
编辑
|
||
</div>
|
||
</div>
|
||
<div class="ops3" style={{ "margin-right": "10px" }}>
|
||
<div class="jc" style={{ width: "30px" }}>
|
||
复制
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
{value.status === "审核未通过" ? (
|
||
<div class="nselect">
|
||
<div class="ops1">
|
||
<div
|
||
class="jc"
|
||
style={{ width: "30px" }}
|
||
onClick={() => {
|
||
state.stm_hs = true;
|
||
}}
|
||
>
|
||
开课
|
||
</div>
|
||
</div>
|
||
<div class="ops2">
|
||
<div class="jc" style={{ width: "30px" }}>
|
||
编辑
|
||
</div>
|
||
</div>
|
||
<div class="ops3">
|
||
<div class="jc" style={{ width: "30px" }}>
|
||
复制
|
||
</div>
|
||
</div>
|
||
<div class="tableSelect">
|
||
<div class="ops4">
|
||
<a-select
|
||
style="width: 50px;margin-top:2px;margin-left:25px"
|
||
value="授权"
|
||
// options={state.projectNameList}
|
||
dropdownClassName="tabledropdown"
|
||
>
|
||
<a-select-option value="权限名单" label="权限名单">
|
||
<div
|
||
onClick={() => {
|
||
state.gpm_hs = true;
|
||
}}
|
||
>
|
||
权限名单
|
||
</div>
|
||
</a-select-option>
|
||
<a-select-option value="归属权" label="归属权">
|
||
<div
|
||
onClick={() => {
|
||
console.log("点击了");
|
||
}}
|
||
>
|
||
归属权
|
||
</div>
|
||
</a-select-option>
|
||
<a-select-option value="查看权" label="查看权">
|
||
<div>查看权</div>
|
||
</a-select-option>
|
||
<a-select-option value="管理权" label="管理权">
|
||
<div>管理权</div>
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
</div>
|
||
<div class="ops5">
|
||
<div class="jc" style="margin-left:22px">
|
||
删除
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
});
|
||
state.tableData = datas;
|
||
};
|
||
getTableDate();
|
||
const getTableDate2 = () => {
|
||
let data2 = state.tableData7;
|
||
data2.map((value) => {
|
||
{
|
||
//单层项目
|
||
value.operation = (
|
||
<div class="operation">
|
||
<div class="nSelect">
|
||
{value.status === "待审核" ? (
|
||
<div class="nselect">
|
||
<div class="ops1">
|
||
<div class="jc">通过</div>
|
||
</div>
|
||
<div class="ops1">
|
||
<div class="jc">拒绝</div>
|
||
</div>
|
||
<div class="ops2">
|
||
<div class="jc">删除</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
{value.status === "已通过" ? (
|
||
<div class="nselect">
|
||
<div class="ops2">
|
||
<div class="jc">删除</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
{value.status === "已拒绝" ? (
|
||
<div class="nselect">
|
||
<div class="ops2">
|
||
<div class="jc">删除</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
});
|
||
state.tableData = data2;
|
||
};
|
||
getTableDate2();
|
||
const getTableDate3 = () => {
|
||
let datas = state.tableData6;
|
||
datas.map((value) => {
|
||
{
|
||
//单层项目
|
||
value.operation = (
|
||
<div class="operation">
|
||
<div class="nSelect">
|
||
<div class="nselect">
|
||
<div class="jc">签到</div>
|
||
<div class="jc">编辑</div>
|
||
<div
|
||
class="jc"
|
||
onClick={() => {
|
||
state.sm_hs = true;
|
||
}}
|
||
>
|
||
管理
|
||
</div>
|
||
<div class="tableSelect">
|
||
<a-select
|
||
style="width: 50px;margin-top:2px;margin-left:25px"
|
||
value="更多"
|
||
// options={state.projectNameList}
|
||
dropdownClassName="tabledropdown"
|
||
>
|
||
<a-select-option
|
||
value="复制"
|
||
label="复制"
|
||
style="padding-left:35px"
|
||
>
|
||
<div>复制</div>
|
||
</a-select-option>
|
||
<a-select-option
|
||
value="取消"
|
||
label="取消"
|
||
style="padding-left:35px"
|
||
>
|
||
<div
|
||
onClick={() => {
|
||
console.log("点击了");
|
||
}}
|
||
>
|
||
取消
|
||
</div>
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
});
|
||
state.tableData = datas;
|
||
};
|
||
getTableDate3();
|
||
const onftvalue = ref();
|
||
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 of_hShow = () => {
|
||
if (state.of_hs == false) {
|
||
state.of_hs = true;
|
||
}
|
||
};
|
||
const of_exit = () => {
|
||
state.of_hs = false;
|
||
};
|
||
const hideShow = () => {
|
||
if (state.hideshow == true) {
|
||
state.hideshow = false;
|
||
} else {
|
||
state.hideshow = true;
|
||
}
|
||
};
|
||
const bs_hShow = () => {
|
||
state.bs_hs = true;
|
||
};
|
||
const createft = () => {
|
||
if (state.bs_hs == false) {
|
||
state.of_hs = false;
|
||
state.ft_hs = true;
|
||
}
|
||
};
|
||
const ft_exit = () => {
|
||
state.ft_hs = false;
|
||
};
|
||
const om_exit = () => {
|
||
state.om_1 = false;
|
||
};
|
||
const ftm_exit = () => {
|
||
state.ftm_1 = false;
|
||
};
|
||
const ckxq_hs = () => {
|
||
state.om_ckxq = true;
|
||
};
|
||
const ftsr_exit = () => {
|
||
state.om_ckxq = false;
|
||
};
|
||
const gpm_exit = () => {
|
||
state.gpm_hs = false;
|
||
};
|
||
const stm_exit = () => {
|
||
state.stm_hs = false;
|
||
};
|
||
const createkk = () => {
|
||
state.cstm_hs = true;
|
||
};
|
||
const cstm_exit = () => {
|
||
state.cstm_hs = false;
|
||
};
|
||
const sm_exit = () => {
|
||
state.sm_hs = false;
|
||
};
|
||
const clear_valueE = () => {
|
||
state.bs_hs = false;
|
||
state.valueE = "";
|
||
}
|
||
return {
|
||
onftvalue,
|
||
current,
|
||
...toRefs(state),
|
||
fileList,
|
||
loading,
|
||
imageUrl,
|
||
columns1,
|
||
columns2,
|
||
columns4,
|
||
columns5,
|
||
columns6,
|
||
columns7,
|
||
// tableDataFunc,
|
||
handleChange,
|
||
beforeUpload,
|
||
getTableDate,
|
||
getTableDate2,
|
||
options1,
|
||
options2,
|
||
of_hShow,
|
||
of_exit,
|
||
hideShow,
|
||
bs_hShow,
|
||
createft,
|
||
ft_exit,
|
||
om_exit,
|
||
ftm_exit,
|
||
ckxq_hs,
|
||
ftsr_exit,
|
||
gpm_exit,
|
||
stm_exit,
|
||
createkk,
|
||
cstm_exit,
|
||
sm_exit,
|
||
clear_valueE,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="scss">
|
||
// .dropdown-style{
|
||
// .ant-select-dropdown-menu{
|
||
// background: #6767bd;
|
||
// }
|
||
// .ant-select-dropdown-menu-item {
|
||
// color: #4EA6FF !important;
|
||
// }
|
||
// }
|
||
.courseManage {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
.headerf {
|
||
.filter {
|
||
margin-left: 38px;
|
||
margin-right: 38px;
|
||
margin-top: 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;
|
||
margin-left: 38px;
|
||
.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: 999;
|
||
width: 90%;
|
||
min-width: 1000px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
|
||
.ft_main {
|
||
width: calc(100%);
|
||
position: relative;
|
||
}
|
||
}
|
||
.tableBox {
|
||
margin: 20px 38px 30px;
|
||
.operation {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #4ea6ff;
|
||
.nselect {
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
.jc {
|
||
margin-left: 20px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.tableSelect {
|
||
margin-right: 10px;
|
||
margin-left: -5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: right;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.modalStyle {
|
||
.ant-modal{
|
||
.modalHeader {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.headerLeft {
|
||
margin-left: 27px;
|
||
display: flex;
|
||
align-items: center;
|
||
.headerLeftText {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
line-height: 36px;
|
||
}
|
||
}
|
||
}
|
||
.modalMain{
|
||
.m_title {
|
||
margin-bottom: 20px;
|
||
}
|
||
.m_body {
|
||
display: flex;
|
||
.mb_left {
|
||
width: 50%;
|
||
.mbl_items {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-bottom: 10px;
|
||
.item_nam{
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
.asterisk_icon{
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-right: 5px;
|
||
margin-top:-15px;
|
||
}
|
||
}
|
||
.item_inp{
|
||
flex:1;
|
||
}
|
||
}
|
||
.i2_cz{
|
||
width:440px;
|
||
margin-left:100px;
|
||
.i2_top{
|
||
display:flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.i8_bottom{
|
||
display:flex;
|
||
width:440px;
|
||
margin-left:100px;
|
||
}
|
||
}
|
||
|
||
.mb_right {
|
||
width: 50%;
|
||
.mbl_items {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-bottom: 10px;
|
||
.item_nam{
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
.asterisk_icon{
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-top: -15px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
.item_inp{
|
||
flex:1;
|
||
}
|
||
.accessory{
|
||
display:flex;
|
||
align-items: center;
|
||
.accessory_icon{
|
||
width:16px;
|
||
height:16px;
|
||
margin-top: -8px;
|
||
margin-right:5px;
|
||
}
|
||
}
|
||
}
|
||
.mbl_items12{
|
||
width:440px;
|
||
margin-left:100px;
|
||
.i12_box1{
|
||
display: flex;
|
||
align-items: center;
|
||
padding:17px 0px 17px 21px;
|
||
border: 1px solid #EFF4FC;
|
||
border-radius: 8px;
|
||
margin-bottom:10px;
|
||
.file_img{
|
||
width:27px;
|
||
height:32px;
|
||
background-color: red;
|
||
margin-right:22px;
|
||
}
|
||
.file_detail{
|
||
width:250px;
|
||
margin-right:21px;
|
||
.file_updata{
|
||
display:flex;
|
||
align-items: center;
|
||
.updatabox{
|
||
position: relative;
|
||
width: 230px;
|
||
height: 5px;
|
||
background-color: rgba(192, 192, 192, 0.25);
|
||
border-radius: 3px;
|
||
.updatacolor{
|
||
position: absolute;
|
||
left:0;
|
||
width: 100%;
|
||
height: 5px;
|
||
background-color: #57C887;
|
||
border-radius: 3px;
|
||
}
|
||
.updatacolor2{
|
||
position: absolute;
|
||
left:0;
|
||
width: 80%;
|
||
height: 5px;
|
||
background-color: #FF7474;
|
||
border-radius: 3px;
|
||
}
|
||
.updatacolor3{
|
||
position: absolute;
|
||
left:0;
|
||
width: 60%;
|
||
height: 5px;
|
||
background-color: #388BE1;
|
||
border-radius: 3px;
|
||
}
|
||
.updataxq{
|
||
position: absolute;
|
||
right:2px;
|
||
top:-30px;
|
||
color: #57C887;
|
||
}
|
||
.updataxq2{
|
||
position: absolute;
|
||
right:2px;
|
||
top:-30px;
|
||
color: #FF7474;
|
||
}
|
||
.updataxq3{
|
||
position: absolute;
|
||
right:2px;
|
||
top:-30px;
|
||
color: #388BE1;
|
||
}
|
||
}
|
||
}
|
||
.file_operation{
|
||
display: flex;
|
||
|
||
span{
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.selectonlineface {
|
||
z-index: 999;
|
||
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%);
|
||
.of_header {
|
||
position: absolute;
|
||
width: calc(100%);
|
||
height: 40px;
|
||
background: linear-gradient(
|
||
rgba(78, 166, 255, 0.2) 0%,
|
||
rgba(78, 166, 255, 0) 100%
|
||
);
|
||
}
|
||
.of_main {
|
||
width: calc(100%);
|
||
position: relative;
|
||
.ofm_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%;
|
||
}
|
||
.close_exit {
|
||
position: absolute;
|
||
right: 42px;
|
||
cursor: pointer;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-image: url(@/assets/images/coursewareManage/close.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.ofm_body {
|
||
width:80%;
|
||
margin:3px auto;
|
||
.ofmb_items {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: end;
|
||
margin: 14px auto;
|
||
.signbox{
|
||
width:110px;
|
||
display: flex;
|
||
justify-content: end;
|
||
.sign {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-top:-3px;
|
||
margin-right: 6px;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.b_input{
|
||
flex:1;
|
||
}
|
||
.bc_box {
|
||
display: flex;
|
||
width: 440px;
|
||
flex:1;
|
||
.bc_boxl,
|
||
.bc_boxr {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
.ol_checkbox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 6px;
|
||
}
|
||
.b_sub {
|
||
width: 440px;
|
||
margin-left: 110px;
|
||
.bs_header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.b_right {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
.bl_detail {
|
||
top: 24px;
|
||
}
|
||
.b_footer {
|
||
width: 100%;
|
||
margin-left: 212px;
|
||
margin-top: 25px;
|
||
margin-bottom: 20px;
|
||
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;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.createschooltime {
|
||
z-index: 999;
|
||
width: 679px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 10%;
|
||
transform: translate(-50%, -50%);
|
||
.cst_header {
|
||
position: absolute;
|
||
width: calc(100%);
|
||
height: 40px;
|
||
background: linear-gradient(
|
||
rgba(78, 166, 255, 0.2) 0%,
|
||
rgba(78, 166, 255, 0) 100%
|
||
);
|
||
}
|
||
.cst_main {
|
||
width: calc(100%);
|
||
position: relative;
|
||
.cstm_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%;
|
||
}
|
||
.close_exit {
|
||
position: absolute;
|
||
right: 42px;
|
||
cursor: pointer;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-image: url(@/assets/images/coursewareManage/close.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.cstm_title {
|
||
margin: 10px auto 20px 51px;
|
||
font-weight: bold;
|
||
}
|
||
.cstm_items {
|
||
display: flex;
|
||
width: 80%;
|
||
margin:auto;
|
||
align-items: center;
|
||
margin-bottom: 23px;
|
||
.signbox{
|
||
display:flex;
|
||
justify-content: end;
|
||
width:100px;
|
||
margin-right:6px;
|
||
.sign{
|
||
margin-top:-5px;
|
||
margin-right:4px;
|
||
}
|
||
}
|
||
.b_input{
|
||
flex:1;
|
||
.upload_box {
|
||
display: flex;
|
||
cursor: pointer;
|
||
.upload_icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.items_fj{
|
||
margin-bottom:1px;
|
||
}
|
||
.items_btn {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
.cstm_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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.modalStyle {
|
||
.ant-modal{
|
||
.modalHeader {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.headerLeft {
|
||
margin-left: 27px;
|
||
display: flex;
|
||
align-items: center;
|
||
.headerLeftText {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
line-height: 36px;
|
||
}
|
||
}
|
||
}
|
||
.modalMain{
|
||
.onlinemanage,
|
||
.faceteachmanage {
|
||
display: none;
|
||
z-index: 999;
|
||
min-width: 1000px;
|
||
background: #ffffff;
|
||
.om_main {
|
||
width: 100%;
|
||
.om_body {
|
||
margin-right:50px;
|
||
.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;
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.ftsturecord {
|
||
z-index: 999;
|
||
min-width: 1000px;
|
||
background: #ffffff;
|
||
.ftsr_main {
|
||
width: 100%;
|
||
.ftsr_table {
|
||
width: 90%;
|
||
margin: 30px auto;
|
||
border: 1px solid #f0f4fe;
|
||
}
|
||
.ftsr_btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
background: #ffffff;
|
||
border: 1px solid #4ea6ff;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 30px auto;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
.btnText {
|
||
color: #4ea6ff;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.givepower {
|
||
z-index: 999;
|
||
min-width: 1000px;
|
||
background: #ffffff;
|
||
.gp_main {
|
||
width: 100%;
|
||
position: relative;
|
||
.gpm_inputbtn {
|
||
width: 90%;
|
||
margin: 20px auto;
|
||
display: flex;
|
||
.gpm_btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
margin-right: 14px;
|
||
background: #ffffff;
|
||
border: 1px solid #4ea6ff;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
.btnText {
|
||
color: #4ea6ff;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
.btn1 {
|
||
.search {
|
||
width: 15px;
|
||
height: 17px;
|
||
margin-right: 6px;
|
||
background-image: url("../../assets/images/courseManage/search1.png");
|
||
}
|
||
}
|
||
.btn2 {
|
||
.reset {
|
||
width: 16px;
|
||
height: 18px;
|
||
margin-right: 6px;
|
||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||
}
|
||
}
|
||
.btn1:hover {
|
||
background: #4ea6ff;
|
||
.search {
|
||
background-image: url("@/assets/images/coursewareManage/search0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
.btn2:hover {
|
||
background: #4ea6ff;
|
||
.reset {
|
||
background-image: url("@/assets/images/coursewareManage/reset0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
.gpm_notice {
|
||
display: flex;
|
||
background: rgba(78, 166, 255, 0.25);
|
||
border: 1px solid #4ea6ff;
|
||
width: 90%;
|
||
height: 62px;
|
||
margin: 20px auto;
|
||
align-items: center;
|
||
line-height: 64px;
|
||
.th_icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
background-image: url(@/assets/images/coursewareManage/gan.png);
|
||
background-size: 100% 100%;
|
||
margin: auto 13px auto 37px;
|
||
}
|
||
.textarea {
|
||
margin-right: 33px;
|
||
}
|
||
}
|
||
.gpm_table {
|
||
width: 90%;
|
||
margin: 30px auto;
|
||
border: 1px solid #f0f4fe;
|
||
}
|
||
}
|
||
}
|
||
.schooltime {
|
||
z-index: 999;
|
||
min-width: 1000px;
|
||
background: #ffffff;
|
||
.st_main {
|
||
width: 100%;
|
||
.stm_inputbtn {
|
||
display: flex;
|
||
width: 90%;
|
||
margin: 20px auto;
|
||
.stm_btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
margin-right: 14px;
|
||
background: #ffffff;
|
||
border: 1px solid #4ea6ff;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
.btnText {
|
||
color: #4ea6ff;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
.btn1 {
|
||
.search {
|
||
width: 15px;
|
||
height: 17px;
|
||
margin-right: 6px;
|
||
background-image: url("@/assets/images/coursewareManage/search1.png");
|
||
}
|
||
}
|
||
.btn2 {
|
||
.reset {
|
||
width: 16px;
|
||
height: 18px;
|
||
margin-right: 6px;
|
||
background-image: url("@/assets/images/coursewareManage/reset1.png");
|
||
}
|
||
}
|
||
.btn1:hover {
|
||
background: #4ea6ff;
|
||
.search {
|
||
background-image: url("@/assets/images/coursewareManage/search0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
.btn2:hover {
|
||
background: #4ea6ff;
|
||
.reset {
|
||
background-image: url("@/assets/images/coursewareManage/reset0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
.stm_btn3 {
|
||
width: 130px;
|
||
height: 40px;
|
||
border: 1px solid #4ea6ff;
|
||
background-color: #4ea6ff;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
.btnText {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
.btn3 {
|
||
.add {
|
||
width: 17px;
|
||
height: 18px;
|
||
background-image: url("@/assets/images/coursewareManage/add0.png");
|
||
background-size: 100% 100%;
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
}
|
||
.stm_table {
|
||
width: 90%;
|
||
margin: 30px auto;
|
||
border: 1px solid #f0f4fe;
|
||
.operation {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #4ea6ff;
|
||
.nselect {
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
.jc {
|
||
margin-left: 20px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.tableSelect {
|
||
margin-right: 10px;
|
||
margin-left: -5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: right;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.studentsmanage {
|
||
z-index: 999;
|
||
min-width: 1000px;
|
||
background: #ffffff;
|
||
.stm_main {
|
||
width: 100%;
|
||
.stmmitems {
|
||
margin: auto 49px;
|
||
.stmm_i1,
|
||
.stmm_i2,
|
||
.stmm_i3,
|
||
.stmm_i4 {
|
||
margin: 19px 0;
|
||
}
|
||
.stmm_i5 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.i5_left {
|
||
display: flex;
|
||
.stmm_btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
margin-right: 14px;
|
||
background: #ffffff;
|
||
border: 1px solid #4ea6ff;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
.btnText {
|
||
color: #4ea6ff;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
.btn1 {
|
||
.search {
|
||
width: 15px;
|
||
height: 17px;
|
||
margin-right: 6px;
|
||
background-image: url("../../assets/images/courseManage/search1.png");
|
||
}
|
||
}
|
||
.btn2 {
|
||
.reset {
|
||
width: 16px;
|
||
height: 18px;
|
||
margin-right: 6px;
|
||
background-image: url("../../assets/images/courseManage/reset1.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);
|
||
.reset {
|
||
background-image: url("../../assets/images/courseManage/reset0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
.i5_right {
|
||
display: flex;
|
||
.stmm_btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
margin-right: 14px;
|
||
background: #ffffff;
|
||
border: 1px solid #4ea6ff;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
.btnText {
|
||
color: #4ea6ff;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
.btn3 {
|
||
background-color: #4ea6ff;
|
||
}
|
||
.btn4 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
.btn4_sub {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.b_zk {
|
||
width: 10px;
|
||
height: 8px;
|
||
background-image: url("@/assets/images/coursewareManage/down.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
.b_sq {
|
||
width: 10px;
|
||
height: 8px;
|
||
background-image: url("@/assets/images/coursewareManage/up.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.btn4_sup {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #ffffff;
|
||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
|
||
position: absolute;
|
||
top: 40px;
|
||
z-index: 999;
|
||
.btn4_tit {
|
||
margin-top: 8px;
|
||
margin-left: 8px;
|
||
}
|
||
.btn4_op1,
|
||
.btn4_op2,
|
||
.btn4_op3 {
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
.btn5 {
|
||
margin-right: 0px;
|
||
.export {
|
||
width: 17px;
|
||
height: 18px;
|
||
margin-right: 5px;
|
||
background-image: url("@/assets/images/coursewareManage/export.png");
|
||
}
|
||
}
|
||
.btn5:hover {
|
||
background: #4ea6ff;
|
||
.export {
|
||
background-image: url("@/assets/images/coursewareManage/export1.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.stmm_i6 {
|
||
margin-top: 20px;
|
||
.operation,
|
||
.nselect {
|
||
display: flex;
|
||
justify-content: center;
|
||
color: #4ea6ff;
|
||
font-size: 14px;
|
||
.ops1,
|
||
.ops2 {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|