mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-15 05:46:45 +08:00
feat:新增AddOnline弹窗（未完成）
This commit is contained in:
dongwug
232
src/components/drawers/AddOnline.vue
Normal file
232
src/components/drawers/AddOnline.vue
Normal file
@@ -0,0 +1,232 @@
|
|||||||
|
<template>
|
||||||
|
<a-drawer
|
||||||
|
:visible="addonlineVisible"
|
||||||
|
class="drawerStyle"
|
||||||
|
width="80%"
|
||||||
|
title="添加在线"
|
||||||
|
placement="right"
|
||||||
|
@after-visible-change="afterVisibleChange"
|
||||||
|
>
|
||||||
|
<div class="drawerMain">
|
||||||
|
<div class="header">
|
||||||
|
<div class="headerTitle">添加在线</div>
|
||||||
|
<img
|
||||||
|
style="width: 29px; height: 29px; cursor: pointer"
|
||||||
|
src="../../assets/images/basicinfo/close.png"
|
||||||
|
@click="closeDrawer"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="contentMain">
|
||||||
|
<div class="main_items">
|
||||||
|
<div class="mi_ipts">
|
||||||
|
<div class="mii_ipt">
|
||||||
|
<div class="ipt_name">课程编号：</div>
|
||||||
|
<div class="fi_input">
|
||||||
|
<a-input
|
||||||
|
v-model:value="value1"
|
||||||
|
style="width: 270px; height: 40px; border-radius: 8px"
|
||||||
|
placeholder="请输入项目名称"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mii_ipt">
|
||||||
|
<div class="ipt_name">内容分类：</div>
|
||||||
|
<div class="select">
|
||||||
|
<a-select
|
||||||
|
dropdownClassName="dropdown-style"
|
||||||
|
style="width: 200px"
|
||||||
|
placeholder="请选择"
|
||||||
|
:options="options1"
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mi_btns">
|
||||||
|
<div class="btn btn1">
|
||||||
|
<div class="search"></div>
|
||||||
|
<div class="btnText">搜索</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn btn2">
|
||||||
|
<div class="search"></div>
|
||||||
|
<div class="btnText">重置</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main_notice">
|
||||||
|
<div class="mntc_left">
|
||||||
|
<div class="notice_icon"></div>
|
||||||
|
<span style="color:rgba(0, 0, 0, .65); margin-right:17px;">已选择 <span style="color:#388BE1;">4</span> 项</span>
|
||||||
|
<span style="color:rgba(0, 0, 0, .65)">列表选项总计：<span>14</span> 条</span>
|
||||||
|
</div>
|
||||||
|
<div class="mntc_right">
|
||||||
|
<span style="color:#387DF7; margin-right:24px;">清空</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-drawer>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { reactive, toRefs, ref } from "vue";
|
||||||
|
const options1 = ref([
|
||||||
|
{
|
||||||
|
value: "value1",
|
||||||
|
label: "请选择状态",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
export default {
|
||||||
|
name: "AddOnline",
|
||||||
|
props: {
|
||||||
|
addonlineVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props, ctx) {
|
||||||
|
const state = reactive({});
|
||||||
|
const closeDrawer = () => {
|
||||||
|
ctx.emit("update:addonlineVisible", false);
|
||||||
|
};
|
||||||
|
const afterVisibleChange = (bool) => {
|
||||||
|
console.log("state", bool);
|
||||||
|
};
|
||||||
|
const showDrawerOnline = () => {
|
||||||
|
state.visible = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
afterVisibleChange,
|
||||||
|
showDrawerOnline,
|
||||||
|
closeDrawer,
|
||||||
|
options1,
|
||||||
|
// change,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.drawerStyle {
|
||||||
|
.drawerMain {
|
||||||
|
.header {
|
||||||
|
height: 73px;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.headerTitle {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 25px;
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.contentMain {
|
||||||
|
.main_items{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
.mi_ipts{
|
||||||
|
display: flex;
|
||||||
|
.mii_ipt{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mi_btns{
|
||||||
|
display: flex;
|
||||||
|
margin-left: 38px;
|
||||||
|
cursor: pointer;
|
||||||
|
.btn {
|
||||||
|
padding: 0px 26px 0px 26px;
|
||||||
|
height: 38px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(64, 158, 255, 1);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: 14px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
.search {
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
.btnText {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 36px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn1 {
|
||||||
|
background: rgb(64, 158, 255);
|
||||||
|
.search {
|
||||||
|
width: 15px;
|
||||||
|
height: 17px;
|
||||||
|
background-image: url("@/assets/images/coursewareManage/search0.png");
|
||||||
|
}
|
||||||
|
.btnText{
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn2 {
|
||||||
|
background: rgb(255, 255, 255);
|
||||||
|
.search {
|
||||||
|
width: 15px;
|
||||||
|
height: 17px;
|
||||||
|
background-image: url("@/assets/images/coursewareManage/reset1.png");
|
||||||
|
}
|
||||||
|
.btnText{
|
||||||
|
color: rgb(64, 158, 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn1:hover {
|
||||||
|
background: rgb(255, 255, 255);
|
||||||
|
.search {
|
||||||
|
background-image: url("@/assets/images/courseManage/search1.png");
|
||||||
|
}
|
||||||
|
.btnText {
|
||||||
|
color: #388BE1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn2:hover {
|
||||||
|
background: rgba(64, 158, 255, 1);
|
||||||
|
.search {
|
||||||
|
background-image: url("@/assets/images/courseManage/reset0.png");
|
||||||
|
}
|
||||||
|
.btnText {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.main_notice{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: #E9F6FE;
|
||||||
|
.mntc_left{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.notice_icon{
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
margin-right: 9px;
|
||||||
|
margin-left: 9px;
|
||||||
|
background-image: url(@/assets/images/coursewareManage/gan.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mntc_right{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -62,12 +62,17 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="mid">
|
<div class="mid">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="itcon">
|
<div class="itcon" @click="showDrawerOnline">
|
||||||
<div class="img">
|
<div class="img">
|
||||||
<img src="../../assets/images/leveladd/zai.png" />
|
<img src="../../assets/images/leveladd/zai.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="text">在线</div>
|
<div class="text" >在线</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 添加在线侧弹窗 -->
|
||||||
|
<div>
|
||||||
|
<add-online v-model:addonlineVisible="visible" />
|
||||||
|
</div>
|
||||||
|
<!-- 添加在线侧弹窗 -->
|
||||||
<div class="lin"></div>
|
<div class="lin"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
@@ -222,42 +227,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="draw" style="position: relative">
|
|
||||||
<a-drawer
|
|
||||||
v-model:visible="visible"
|
|
||||||
class="drawerStyle"
|
|
||||||
title="关联项目"
|
|
||||||
placement="right"
|
|
||||||
width="80%"
|
|
||||||
@after-visible-change="afterVisibleChange"
|
|
||||||
>
|
|
||||||
<div class="drawerMain">
|
|
||||||
<div class="header">
|
|
||||||
<div class="headerTitle">关联项目</div>
|
|
||||||
<img
|
|
||||||
style="width: 29px; height: 29px; cursor: pointer"
|
|
||||||
src="../../assets/images/basicinfo/close.png"
|
|
||||||
@click="showDrawer"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="drawerbox">
|
|
||||||
<a-table
|
|
||||||
:columns="drawercolumns"
|
|
||||||
:data-source="drawertableData"
|
|
||||||
:loading="tableDataTotal === -1 ? true : false"
|
|
||||||
:scroll="{ x: 700 }"
|
|
||||||
@expand="expandTable"
|
|
||||||
:pagination="false"
|
|
||||||
>
|
|
||||||
</a-table>
|
|
||||||
</div>
|
|
||||||
<div class="btnn">
|
|
||||||
<button @click="showDrawer" class="btn1">取消</button>
|
|
||||||
<button @click="showDrawer" class="btn2">确定</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-drawer>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a-modal
|
<a-modal
|
||||||
@@ -318,6 +287,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
|
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
|
||||||
|
import AddOnline from "../../components/drawers/AddOnline.vue";
|
||||||
const drawercolumns = [
|
const drawercolumns = [
|
||||||
{
|
{
|
||||||
title: "项目名称",
|
title: "项目名称",
|
||||||
@@ -357,431 +327,404 @@ const drawercolumns = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
export default {
|
export default {
|
||||||
name: "LevelAddDetail",
|
name: "LevelAddDetail",
|
||||||
setup() {
|
components: {
|
||||||
const state = reactive({
|
AddOnline,
|
||||||
projectNameList: [
|
},
|
||||||
{
|
setup() {
|
||||||
id: 1,
|
const state = reactive({
|
||||||
value: "项目一",
|
projectNameList: [
|
||||||
label: "项目一",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
value: "项目二",
|
|
||||||
label: "项目二",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
value: "项目三",
|
|
||||||
label: "项目三",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
value: "项目四",
|
|
||||||
label: "项目四",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
projectNameList2: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
value: "删除任务",
|
|
||||||
label: "删除任务",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
value: "移动任务到关卡",
|
|
||||||
label: "移动任务到关卡",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
level: [
|
|
||||||
{
|
|
||||||
id: "1",
|
|
||||||
tit: "阶段1",
|
|
||||||
name: "腾飞班1基础",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
tit: "阶段2",
|
|
||||||
name: "腾飞班基础",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
tit: "阶段2",
|
|
||||||
name: "中级产品经理",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
tit: "阶段2",
|
|
||||||
name: "中级产品经理",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
tit: "阶段2",
|
|
||||||
name: "中级产品经理",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
key: 1,
|
|
||||||
lei: "在线",
|
|
||||||
// state: "已发布",
|
|
||||||
creater: "管理者课程",
|
|
||||||
// pubtime: "2022-07-20 14:00:03",
|
|
||||||
cretime: "60分钟",
|
|
||||||
haspub: false,
|
|
||||||
checked1: false,
|
|
||||||
checkedd: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 2,
|
|
||||||
lei: "面授",
|
|
||||||
// state: "草稿",
|
|
||||||
creater: "管理者面授",
|
|
||||||
// pubtime: "2022-07-20 14:00:03",
|
|
||||||
cretime: "20分钟",
|
|
||||||
haspub: true,
|
|
||||||
checked1: false,
|
|
||||||
checkedd: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 1,
|
|
||||||
lei: "在线",
|
|
||||||
// state: "已发布",
|
|
||||||
creater: "管理者课程",
|
|
||||||
// pubtime: "2022-07-20 14:00:03",
|
|
||||||
cretime: "60分钟",
|
|
||||||
haspub: false,
|
|
||||||
checked1: false,
|
|
||||||
checkedd: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 3,
|
|
||||||
lei: "作业",
|
|
||||||
// state: "已停用",
|
|
||||||
creater: "管理者作业",
|
|
||||||
// pubtime: "2022-07-20 14:00:03",
|
|
||||||
cretime: "60分钟",
|
|
||||||
haspub: false,
|
|
||||||
checked1: false,
|
|
||||||
checkedd: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 4,
|
|
||||||
lei: "考试",
|
|
||||||
// state: "草稿",
|
|
||||||
creater: "管理者考试",
|
|
||||||
// pubtime: "2022-07-20 14:00:03",
|
|
||||||
cretime: "20分钟",
|
|
||||||
haspub: true,
|
|
||||||
checked1: false,
|
|
||||||
checkedd: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 5,
|
|
||||||
lei: "案例",
|
|
||||||
// state: "草稿",
|
|
||||||
creater: "腾飞班1案例",
|
|
||||||
// pubtime: "2022-07-20 14:00:03",
|
|
||||||
cretime: "20分钟",
|
|
||||||
haspub: true,
|
|
||||||
checked1: true,
|
|
||||||
checkedd: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 4,
|
|
||||||
lei: "考试",
|
|
||||||
// state: "草稿",
|
|
||||||
creater: "管理者考试",
|
|
||||||
// pubtime: "2022-07-20 14:00:03",
|
|
||||||
cretime: "20分钟",
|
|
||||||
haspub: true,
|
|
||||||
checked1: false,
|
|
||||||
checkedd: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 5,
|
|
||||||
lei: "案例",
|
|
||||||
// state: "草稿",
|
|
||||||
creater: "腾飞班1案例",
|
|
||||||
// pubtime: "2022-07-20 14:00:03",
|
|
||||||
cretime: "20分钟",
|
|
||||||
haspub: true,
|
|
||||||
checked1: true,
|
|
||||||
checkedd: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
drawertableData: [
|
|
||||||
{
|
|
||||||
key: 1,
|
|
||||||
projectName: "管理者进阶",
|
|
||||||
manager: "黄华 刘俊",
|
|
||||||
creater: "毛继禹",
|
|
||||||
time: "2022-07-20 14:00:03",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: "1-1",
|
|
||||||
projectName: "管理者进阶-腾飞班",
|
|
||||||
manager: "黄华 刘俊",
|
|
||||||
|
|
||||||
creater: "毛继禹",
|
|
||||||
time: "2022-07-20 14:00:03",
|
|
||||||
children: [
|
|
||||||
{
|
{
|
||||||
key: "1-1-1",
|
id: 1,
|
||||||
projectName: "管理者进阶-腾飞班K1",
|
value: "项目一",
|
||||||
manager: "黄华 刘俊",
|
label: "项目一",
|
||||||
creater: "毛继禹",
|
|
||||||
time: "2022-07-20 14:00:03",
|
|
||||||
},
|
},
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 2,
|
|
||||||
projectName: "管理者进阶",
|
|
||||||
manager: "黄华 刘俊",
|
|
||||||
creater: "毛继禹",
|
|
||||||
time: "2022-07-20 14:00:03",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: "2-1",
|
|
||||||
projectName: "管理者进阶-腾飞班",
|
|
||||||
manager: "黄华 刘俊",
|
|
||||||
|
|
||||||
creater: "毛继禹",
|
|
||||||
time: "2022-07-20 14:00:03",
|
|
||||||
children: [
|
|
||||||
{
|
{
|
||||||
key: "2-1-1",
|
id: 2,
|
||||||
projectName: "管理者进阶-腾飞班K1",
|
value: "项目二",
|
||||||
manager: "黄华 刘俊",
|
label: "项目二",
|
||||||
creater: "毛继禹",
|
|
||||||
time: "2022-07-20 14:00:03",
|
|
||||||
},
|
},
|
||||||
],
|
{
|
||||||
},
|
id: 3,
|
||||||
],
|
value: "项目三",
|
||||||
},
|
label: "项目三",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
key: 3,
|
id: 4,
|
||||||
projectName: "管理者进阶-腾飞班K1",
|
value: "项目四",
|
||||||
manager: "黄华 刘俊",
|
label: "项目四",
|
||||||
|
},
|
||||||
creater: "毛继禹",
|
],
|
||||||
time: "2022-07-20 14:00:03",
|
projectNameList2: [
|
||||||
},
|
{
|
||||||
{
|
id: 1,
|
||||||
key: 4,
|
value: "删除任务",
|
||||||
projectName: "管理者进阶-腾飞班K1",
|
label: "删除任务",
|
||||||
manager: "黄华 刘俊",
|
},
|
||||||
|
{
|
||||||
creater: "毛继禹",
|
id: 2,
|
||||||
time: "2022-07-20 14:00:03",
|
value: "移动任务到关卡",
|
||||||
},
|
label: "移动任务到关卡",
|
||||||
{
|
},
|
||||||
key: 5,
|
],
|
||||||
projectName: "管理者进阶-腾飞班K1",
|
level: [
|
||||||
manager: "黄华 刘俊",
|
{
|
||||||
|
id: "1",
|
||||||
creater: "毛继禹",
|
tit: "阶段1",
|
||||||
time: "2022-07-20 14:00:03",
|
name: "腾飞班1基础",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 6,
|
id: "2",
|
||||||
projectName: "管理者进阶-腾飞班K1",
|
tit: "阶段2",
|
||||||
manager: "黄华 刘俊",
|
name: "腾飞班基础",
|
||||||
|
},
|
||||||
creater: "毛继禹",
|
{
|
||||||
time: "2022-07-20 14:00:03",
|
id: "2",
|
||||||
},
|
tit: "阶段2",
|
||||||
{
|
name: "中级产品经理",
|
||||||
key: 7,
|
},
|
||||||
projectName: "管理者进阶-腾飞班K1",
|
{
|
||||||
manager: "黄华 刘俊",
|
id: "2",
|
||||||
|
tit: "阶段2",
|
||||||
creater: "毛继禹",
|
name: "中级产品经理",
|
||||||
time: "2022-07-20 14:00:03",
|
},
|
||||||
},
|
{
|
||||||
],
|
id: "2",
|
||||||
currentPage: 1,
|
tit: "阶段2",
|
||||||
tableDataTotal: 100,
|
name: "中级产品经理",
|
||||||
pageSize: 10,
|
},
|
||||||
visible: false,
|
],
|
||||||
stage: false,
|
tableData: [
|
||||||
selectedRowKeys: [],
|
{
|
||||||
});
|
key: 1,
|
||||||
const selectProjectName = (value, index) => {
|
lei: "在线",
|
||||||
console.log("value", value, index);
|
// state: "已发布",
|
||||||
};
|
creater: "管理者课程",
|
||||||
const selectProjectName2 = (value, index) => {
|
// pubtime: "2022-07-20 14:00:03",
|
||||||
console.log("value", value, index);
|
cretime: "60分钟",
|
||||||
};
|
haspub: false,
|
||||||
const showDrawer = () => {
|
checked1: false,
|
||||||
state.visible = !state.visible;
|
checkedd: false,
|
||||||
};
|
},
|
||||||
const afterVisibleChange = (bool) => {
|
{
|
||||||
console.log("visible", bool);
|
key: 2,
|
||||||
};
|
lei: "面授",
|
||||||
const tableDataFunc = () => {
|
// state: "草稿",
|
||||||
const columns = [
|
creater: "管理者面授",
|
||||||
{
|
// pubtime: "2022-07-20 14:00:03",
|
||||||
title: "类型",
|
cretime: "20分钟",
|
||||||
dataIndex: "state",
|
haspub: true,
|
||||||
// width: "30%",
|
checked1: false,
|
||||||
key: "state",
|
checkedd: false,
|
||||||
width: 60,
|
},
|
||||||
align: "left",
|
{
|
||||||
className: "classify",
|
key: 1,
|
||||||
scopedSlots: { customRender: "action" }, //引入的插槽
|
lei: "在线",
|
||||||
customRender: (text) => {
|
// state: "已发布",
|
||||||
// console.log(text.record.checked1);
|
creater: "管理者课程",
|
||||||
return (
|
// pubtime: "2022-07-20 14:00:03",
|
||||||
<div class="racona">
|
cretime: "60分钟",
|
||||||
<div
|
haspub: false,
|
||||||
class="img"
|
checked1: false,
|
||||||
style={{ cursor: "pointer" }}
|
checkedd: false,
|
||||||
onClick={() => {
|
},
|
||||||
console.log("点击了");
|
{
|
||||||
}}
|
key: 3,
|
||||||
></div>
|
lei: "作业",
|
||||||
|
// state: "已停用",
|
||||||
|
creater: "管理者作业",
|
||||||
|
// pubtime: "2022-07-20 14:00:03",
|
||||||
|
cretime: "60分钟",
|
||||||
|
haspub: false,
|
||||||
|
checked1: false,
|
||||||
|
checkedd: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 4,
|
||||||
|
lei: "考试",
|
||||||
|
// state: "草稿",
|
||||||
|
creater: "管理者考试",
|
||||||
|
// pubtime: "2022-07-20 14:00:03",
|
||||||
|
cretime: "20分钟",
|
||||||
|
haspub: true,
|
||||||
|
checked1: false,
|
||||||
|
checkedd: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 5,
|
||||||
|
lei: "案例",
|
||||||
|
// state: "草稿",
|
||||||
|
creater: "腾飞班1案例",
|
||||||
|
// pubtime: "2022-07-20 14:00:03",
|
||||||
|
cretime: "20分钟",
|
||||||
|
haspub: true,
|
||||||
|
checked1: true,
|
||||||
|
checkedd: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 4,
|
||||||
|
lei: "考试",
|
||||||
|
// state: "草稿",
|
||||||
|
creater: "管理者考试",
|
||||||
|
// pubtime: "2022-07-20 14:00:03",
|
||||||
|
cretime: "20分钟",
|
||||||
|
haspub: true,
|
||||||
|
checked1: false,
|
||||||
|
checkedd: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 5,
|
||||||
|
lei: "案例",
|
||||||
|
// state: "草稿",
|
||||||
|
creater: "腾飞班1案例",
|
||||||
|
// pubtime: "2022-07-20 14:00:03",
|
||||||
|
cretime: "20分钟",
|
||||||
|
haspub: true,
|
||||||
|
checked1: true,
|
||||||
|
checkedd: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
drawertableData: [
|
||||||
|
{
|
||||||
|
key: 1,
|
||||||
|
projectName: "管理者进阶",
|
||||||
|
manager: "黄华 刘俊",
|
||||||
|
creater: "毛继禹",
|
||||||
|
time: "2022-07-20 14:00:03",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: "1-1",
|
||||||
|
projectName: "管理者进阶-腾飞班",
|
||||||
|
manager: "黄华 刘俊",
|
||||||
|
creater: "毛继禹",
|
||||||
|
time: "2022-07-20 14:00:03",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: "1-1-1",
|
||||||
|
projectName: "管理者进阶-腾飞班K1",
|
||||||
|
manager: "黄华 刘俊",
|
||||||
|
creater: "毛继禹",
|
||||||
|
time: "2022-07-20 14:00:03",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 2,
|
||||||
|
projectName: "管理者进阶",
|
||||||
|
manager: "黄华 刘俊",
|
||||||
|
creater: "毛继禹",
|
||||||
|
time: "2022-07-20 14:00:03",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: "2-1",
|
||||||
|
projectName: "管理者进阶-腾飞班",
|
||||||
|
manager: "黄华 刘俊",
|
||||||
|
creater: "毛继禹",
|
||||||
|
time: "2022-07-20 14:00:03",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: "2-1-1",
|
||||||
|
projectName: "管理者进阶-腾飞班K1",
|
||||||
|
manager: "黄华 刘俊",
|
||||||
|
creater: "毛继禹",
|
||||||
|
time: "2022-07-20 14:00:03",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 3,
|
||||||
|
projectName: "管理者进阶-腾飞班K1",
|
||||||
|
manager: "黄华 刘俊",
|
||||||
|
creater: "毛继禹",
|
||||||
|
time: "2022-07-20 14:00:03",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 4,
|
||||||
|
projectName: "管理者进阶-腾飞班K1",
|
||||||
|
manager: "黄华 刘俊",
|
||||||
|
creater: "毛继禹",
|
||||||
|
time: "2022-07-20 14:00:03",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 5,
|
||||||
|
projectName: "管理者进阶-腾飞班K1",
|
||||||
|
manager: "黄华 刘俊",
|
||||||
|
creater: "毛继禹",
|
||||||
|
time: "2022-07-20 14:00:03",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 6,
|
||||||
|
projectName: "管理者进阶-腾飞班K1",
|
||||||
|
manager: "黄华 刘俊",
|
||||||
|
creater: "毛继禹",
|
||||||
|
time: "2022-07-20 14:00:03",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 7,
|
||||||
|
projectName: "管理者进阶-腾飞班K1",
|
||||||
|
manager: "黄华 刘俊",
|
||||||
|
creater: "毛继禹",
|
||||||
|
time: "2022-07-20 14:00:03",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
currentPage: 1,
|
||||||
|
tableDataTotal: 100,
|
||||||
|
pageSize: 10,
|
||||||
|
visible: false,
|
||||||
|
stage: false,
|
||||||
|
selectedRowKeys: [],
|
||||||
|
});
|
||||||
|
const selectProjectName = (value, index) => {
|
||||||
|
console.log("value", value, index);
|
||||||
|
};
|
||||||
|
const selectProjectName2 = (value, index) => {
|
||||||
|
console.log("value", value, index);
|
||||||
|
};
|
||||||
|
const afterVisibleChange = (bool) => {
|
||||||
|
console.log("visible", bool);
|
||||||
|
};
|
||||||
|
const tableDataFunc = () => {
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: "类型",
|
||||||
|
dataIndex: "state",
|
||||||
|
// width: "30%",
|
||||||
|
key: "state",
|
||||||
|
width: 60,
|
||||||
|
align: "left",
|
||||||
|
className: "classify",
|
||||||
|
scopedSlots: { customRender: "action" },
|
||||||
|
customRender: (text) => {
|
||||||
|
// console.log(text.record.checked1);
|
||||||
|
return (<div class="racona">
|
||||||
|
<div class="img" style={{ cursor: "pointer" }} onClick={() => {
|
||||||
|
console.log("点击了");
|
||||||
|
}}></div>
|
||||||
<span> {text.record.lei}</span>
|
<span> {text.record.lei}</span>
|
||||||
|
|
||||||
{/**
|
{/**
|
||||||
<div class="img"></div>
|
<div class="img"></div>
|
||||||
<a-checkbox class="ch" checked={text.record.checkedd}>
|
<a-checkbox class="ch" checked={text.record.checkedd}>
|
||||||
{text.record.lei}
|
{text.record.lei}
|
||||||
</a-checkbox>
|
</a-checkbox>
|
||||||
*/}
|
*/}
|
||||||
</div>
|
</div>);
|
||||||
);
|
},
|
||||||
},
|
},
|
||||||
},
|
{
|
||||||
{
|
title: "任务名称",
|
||||||
title: "任务名称",
|
dataIndex: "creater",
|
||||||
dataIndex: "creater",
|
// width: "30%",
|
||||||
// width: "30%",
|
key: "creater",
|
||||||
key: "creater",
|
width: 200,
|
||||||
width: 200,
|
align: "center",
|
||||||
align: "center",
|
className: "h",
|
||||||
className: "h",
|
},
|
||||||
},
|
{
|
||||||
{
|
title: "必修/选修",
|
||||||
title: "必修/选修",
|
dataIndex: "pubtime",
|
||||||
dataIndex: "pubtime",
|
key: "pubtime",
|
||||||
key: "pubtime",
|
// width: 100,
|
||||||
// width: 100,
|
align: "center",
|
||||||
align: "center",
|
className: "h",
|
||||||
className: "h",
|
scopedSlots: { customRender: "action" },
|
||||||
scopedSlots: { customRender: "action" }, //引入的插槽
|
customRender: (text) => {
|
||||||
customRender: (text) => {
|
// console.log(text.record.checked1);
|
||||||
// console.log(text.record.checked1);
|
return (<div class="opat">
|
||||||
return (
|
|
||||||
<div class="opat">
|
|
||||||
<div class="opacationt clearfix">
|
<div class="opacationt clearfix">
|
||||||
<a-switch
|
<a-switch style="margin-left:-50px;margin-top:3px" checked={text.record.checked1} size="small" active-color="red" onClick={() => {
|
||||||
style="margin-left:-50px;margin-top:3px"
|
console.log("点击了");
|
||||||
checked={text.record.checked1}
|
text.record.checked1 = !text.record.checked1;
|
||||||
size="small"
|
}}/>
|
||||||
active-color="red"
|
|
||||||
onClick={() => {
|
|
||||||
console.log("点击了");
|
|
||||||
text.record.checked1 = !text.record.checked1;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div class="showt clearfix">
|
<div class="showt clearfix">
|
||||||
<div
|
<div class="bi" style={text.record.checked1 ? "z-index:999" : "z-index:998"}>
|
||||||
class="bi"
|
|
||||||
style={
|
|
||||||
text.record.checked1 ? "z-index:999" : "z-index:998"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
必修
|
必修
|
||||||
</div>
|
</div>
|
||||||
<div class="xuan">选修</div>
|
<div class="xuan">选修</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>);
|
||||||
);
|
},
|
||||||
},
|
},
|
||||||
},
|
{
|
||||||
{
|
title: "时长",
|
||||||
title: "时长",
|
dataIndex: "cretime",
|
||||||
dataIndex: "cretime",
|
key: "cretime",
|
||||||
key: "cretime",
|
// width: 100,
|
||||||
// width: 100,
|
align: "center",
|
||||||
align: "center",
|
className: "h",
|
||||||
className: "h",
|
},
|
||||||
},
|
{
|
||||||
{
|
title: "操作",
|
||||||
title: "操作",
|
className: "h",
|
||||||
className: "h",
|
dataIndex: "opacation",
|
||||||
dataIndex: "opacation",
|
key: "opacation",
|
||||||
key: "opacation",
|
// width: 100,
|
||||||
// width: 100,
|
align: "center",
|
||||||
align: "center",
|
scopedSlots: { customRender: "action" },
|
||||||
scopedSlots: { customRender: "action" }, //引入的插槽
|
customRender: () => {
|
||||||
customRender: () => {
|
return (<div class="opa">
|
||||||
return (
|
|
||||||
<div class="opa">
|
|
||||||
<div class="opacation">
|
<div class="opacation">
|
||||||
<span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
|
<span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
|
||||||
编辑
|
编辑
|
||||||
</span>
|
</span>
|
||||||
<span style="color:#4EA6FF;cursor:pointer">删除</span>
|
<span style="color:#4EA6FF;cursor:pointer">删除</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>);
|
||||||
);
|
},
|
||||||
},
|
},
|
||||||
},
|
];
|
||||||
];
|
return columns;
|
||||||
return columns;
|
};
|
||||||
};
|
const onSelectChange = (selectedRowKeys) => {
|
||||||
|
console.log("selectedRowKeys changed: ", selectedRowKeys);
|
||||||
const onSelectChange = (selectedRowKeys) => {
|
state.selectedRowKeys = selectedRowKeys;
|
||||||
console.log("selectedRowKeys changed: ", selectedRowKeys);
|
};
|
||||||
state.selectedRowKeys = selectedRowKeys;
|
// const getClientHeight = () => {
|
||||||
};
|
// state.rightheight =
|
||||||
|
// document.getElementsByClassName("addhead")[0].offsetHeight +
|
||||||
// const getClientHeight = () => {
|
// document.getElementsByClassName("mid")[0].offsetHeight +
|
||||||
// state.rightheight =
|
// document.getElementsByClassName("boom")[0].offsetHeight +
|
||||||
// document.getElementsByClassName("addhead")[0].offsetHeight +
|
// 40 +
|
||||||
// document.getElementsByClassName("mid")[0].offsetHeight +
|
// "px";
|
||||||
// document.getElementsByClassName("boom")[0].offsetHeight +
|
// };
|
||||||
// 40 +
|
const showModal = () => {
|
||||||
// "px";
|
state.stage = true;
|
||||||
// };
|
};
|
||||||
const showModal = () => {
|
const closeModal = () => {
|
||||||
state.stage = true;
|
state.stage = false;
|
||||||
};
|
};
|
||||||
const closeModal = () => {
|
onMounted(() => {
|
||||||
state.stage = false;
|
document.getElementsByTagName("main")[0].style.background =
|
||||||
};
|
"rgb(245, 247, 250,1)";
|
||||||
onMounted(() => {
|
document.getElementsByTagName("main")[0].style.boxShadow = "none";
|
||||||
document.getElementsByTagName("main")[0].style.background =
|
});
|
||||||
"rgb(245, 247, 250,1)";
|
onUnmounted(() => {
|
||||||
document.getElementsByTagName("main")[0].style.boxShadow = "none";
|
document.getElementsByTagName("main")[0].style.background = "#ffffff";
|
||||||
});
|
document.getElementsByTagName("main")[0].style.boxShadow =
|
||||||
onUnmounted(() => {
|
"0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
|
||||||
document.getElementsByTagName("main")[0].style.background = "#ffffff";
|
});
|
||||||
document.getElementsByTagName("main")[0].style.boxShadow =
|
const showDrawerOnline = () => {
|
||||||
"0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
|
state.visible = true;
|
||||||
});
|
};
|
||||||
return {
|
return {
|
||||||
...toRefs(state),
|
...toRefs(state),
|
||||||
selectProjectName,
|
selectProjectName,
|
||||||
selectProjectName2,
|
selectProjectName2,
|
||||||
tableDataFunc,
|
tableDataFunc,
|
||||||
showModal,
|
showModal,
|
||||||
closeModal,
|
closeModal,
|
||||||
showDrawer,
|
// showDrawer,
|
||||||
afterVisibleChange,
|
afterVisibleChange,
|
||||||
drawercolumns,
|
drawercolumns,
|
||||||
onSelectChange,
|
onSelectChange,
|
||||||
};
|
showDrawerOnline,
|
||||||
},
|
};
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user