hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-14 21:36:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat：新增添加面授弹窗

Browse Source
This commit is contained in:
dongwug
2022-10-18 18:32:15 +08:00
parent 6dba42d3c5
commit ef02ac66de
4 changed files with 1148 additions and 1048 deletions
Download Patch File Download Diff File Expand all files Collapse all files

498
src/components/drawers/AddFaceteach.vue
View File

@@ -1,15 +1,15 @@
<template>
<a-drawer
<a-drawer
:visible="addfaceteachVisible"
class="drawerStyle"
width="80%"
title="添加在线"
title="添加面授"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">添加在线</div>
<div class="headerTitle">添加面授</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@@ -17,92 +17,192 @@
/>
</div>
<div class="contentMain">
<div class="main_items">
<div class="mi_ipts">
<div class="mii_ipt">
<div class="ipt_name">课程编号：</div>
<div class="fi_input">
<a-input
v-model:value="value1"
style="width: 240px; height: 40px; border-radius: 8px"
placeholder="请输入项目名称"
<div class="main_left">
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">课程名称：</span>
</div>
<div class="mii_ipt">
<div class="ipt_name">内容分类：</div>
<div class="select">
<a-select
dropdownClassName="dropdown-style"
style="width: 240px"
placeholder="请选择"
:options="options1"
allowClear
showSearch
<div class="btnbox">
<a-input
v-model:value="value2"
style="width: 384px; height: 32px"
placeholder="请输入小组名称"
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">选择课程：</span>
</div>
<div class="btnbox">
<button class="xkbtn">选择课程</button>
</div>
</div>
<div class="main_item2">
<div class="signbox">
<span style="margin-right: 3px">项目说明：</span>
</div>
<div class="textarea">
<a-textarea
v-model:value="textareavalue"
placeholder="请输入说明"
allow-clear
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">授课教师：</span>
</div>
<div class="btnbox">
<a-input
v-model:value="value2"
style="width: 384px; height: 32px"
placeholder="请输入授课教师"
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">面授时间：</span>
</div>
<div class="btnbox">
<a-range-picker
:placeholder="[' 开始时间', ' 结束时间']"
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">面授时长：</span>
</div>
<div class="btnbox">
<a-input
v-model:value="value2"
style="width: 384px; height: 32px"
/>
<span style="margin-left: 5px">分钟</span>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">上课地址：</span>
</div>
<div class="btnbox">
<a-input
v-model:value="value2"
style="width: 384px; height: 32px"
placeholder="请输入上课地址"
/>
</div>
</div>
<div class="main_item2">
<div class="signbox">
<span style="margin-right: 3px">考勤设置：</span>
</div>
<div class="kqszbox">
<div class="qdqtbox"><span>签到</span></div>
<div class="setbox">
<div class="timerbox">
<span>开始前：</span>
<a-input style="width: 88px; height: 32px"></a-input>
<span style="color: #999999; margin-left: 8px">分钟</span>
</div>
<div class="timerbox">
<span>开始后：</span>
<a-input style="width: 88px; height: 32px"></a-input>
<span style="color: #999999; margin-left: 8px">分钟</span>
</div>
</div>
<div class="qdqtbox"><span>签退</span></div>
<div class="setbox">
<div class="timerbox">
<span>结束前：</span>
<a-input style="width: 88px; height: 32px"></a-input>
<span style="color: #999999; margin-left: 8px"
>分钟（提前签退则记为早退）</span
>
</div>
</div>
</div>
</div>
<div class="mi_btns">
<div class="btn btn1">
<div class="search"></div>
<div class="btnText">搜索</div>
<div class="main_item">
<div class="signbox">
<span style="margin-right: 3px">完成标准设置：</span>
</div>
<div class="btn btn2">
<div class="search"></div>
<div class="btnText">重置</div>
<div class="btnbox">
<a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
<a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
</div>
</div>
<div class="main_item">
<div class="signbox">
<span style="margin-right: 3px">其他设置：</span>
</div>
<div class="btnbox">
<a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
</div>
</div>
<div class="main_item2">
<div class="signbox">
<span style="margin-right: 3px">现场参与：</span>
</div>
<div class="btnbox2">
<a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
<a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
</div>
</div>
<div class="main_item2">
<div class="signbox">
<span style="margin-right: 3px">评估：</span>
</div>
<div class="btnbox2">
<a-checkbox v-model:checked="checked">需要评估</a-checkbox>
<button class="xkbtn">选择课程</button>
</div>
</div>
</div>
<div class="main_notice">
<div class="mntc_left">
<div class="notice_icon"></div>
<span style="color: rgba(0, 0, 0, 0.65); margin-right: 17px"
>已选择 <span style="color: #388be1">4</span> 项</span
>
<span style="color: rgba(0, 0, 0, 0.65)"
>列表选项总计：<span>14</span> 条</span
>
</div>
<div class="mntc_right">
<span style="color: #387df7; margin-right: 24px">清空</span>
</div>
</div>
<div class="main_table">
<a-table
class="ant-table-striped"
:row-class-name="
(_record, index) => (index % 2 === 1 ? 'table-striped' : null)
"
:row-selection="rowSelection"
:columns="columns1"
:data-source="tableData1"
:loading="tableDataTotal === -1 ? true : false"
:pagination="{
showSizeChanger: true,
showQuickJumper: true,
hideOnSinglePage: true,
pageSizeOptions: [],
pageSize: pageSize,
current: currentPage,
total: tableDataTotal,
onChange: (page, pageSize) => {
currentPage = page;
// console.log('page', page)
// 加翻页查找代码
// this.setState({
// currentPage: page,
// }, () => {
// this.getMilitaryDeployment()
// })
},
}"
/>
</div>
<div class="main_btns">
<button class="btn1">取消</button>
<button class="btn2">确定</button>
</div>
<div class="main_right"></div>
</div>
<div class="main_btns">
<button class="btn1">取消</button>
<button class="btn2">确定</button>
</div>
</div>
</a-drawer>
@@ -278,13 +378,13 @@ export default {
const afterVisibleChange = (bool) => {
console.log("state", bool);
};
const showDrawerFaceteach = () => {
state.visible3 = true;
};
// const showDrawerFaceteach = () => {
// state.addfaceteachvisible = true;
// };
return {
...toRefs(state),
afterVisibleChange,
showDrawerFaceteach,
// showDrawerFaceteach,
closeDrawer,
options1,
columns1,
@@ -315,142 +415,116 @@ export default {
}
}
.contentMain {
.main_items {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
flex-wrap: wrap;
.mi_ipts {
display: flex;
margin-bottom: 20px;
.mii_ipt {
display: flex;
align-items: center;
margin-right: 24px;
.ipt_name {
white-space: nowrap;
}
}
}
.mi_btns {
display: flex;
margin-left: 38px;
margin-bottom: 20px;
cursor: pointer;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-left: 14px;
flex-shrink: 0;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
background: rgb(64, 158, 255);
.search {
width: 15px;
height: 17px;
background-image: url("@/assets/images/coursewareManage/search0.png");
}
.btnText {
color: rgb(255, 255, 255);
}
}
.btn2 {
background: rgb(255, 255, 255);
.search {
width: 15px;
height: 17px;
background-image: url("@/assets/images/coursewareManage/reset1.png");
}
.btnText {
color: rgb(64, 158, 255);
}
}
.btn1:hover {
background: rgb(255, 255, 255);
.search {
background-image: url("@/assets/images/courseManage/search1.png");
}
.btnText {
color: #388be1;
}
}
.btn2:hover {
background: rgba(64, 158, 255, 1);
.search {
background-image: url("@/assets/images/courseManage/reset0.png");
}
.btnText {
color: #ffffff;
}
}
}
}
.main_notice {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
height: 40px;
background-color: #e9f6fe;
.mntc_left {
display: flex;
justify-content: space-between;
.main_left {
margin-right: 30px;
.main_item {
display: flex;
align-items: center;
.notice_icon {
width: 14px;
height: 14px;
margin-right: 9px;
margin-left: 9px;
background-image: url(@/assets/images/coursewareManage/gan.png);
background-size: 100% 100%;
margin-bottom: 32px;
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
.sign {
margin-right: 5px;
}
}
.btnbox {
display: flex;
flex: 1;
align-items: center;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
border: 0;
margin-right: 8px;
color: #fff;
}
}
}
.mntc_right {
cursor: pointer;
.main_item2 {
display: flex;
align-items: flex-start;
margin-bottom: 32px;
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
}
.kqszbox {
.qdqtbox {
margin-left: 56px;
}
.setbox {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
margin-bottom: 24px;
.timerbox {
margin-top: 6px;
margin-right: 32px;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
}
}
.btnbox2{
display: flex;
flex-direction: column;
justify-content: flex-start;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
border: 0;
margin-right: 16px 8px 32px 0;
color: #fff;
}
}
}
}
.main_btns {
height: 72px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
.main_right {
width: 337px;
border-left: 1px solid #e8e8e8;
}
}
.main_btns {
height: 72px;
width: 100%;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}