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

Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/fe-manage

Browse Source
This commit is contained in:
岳佳鑫
2022-10-10 18:18:38 +08:00
parent e843bef08f fd1f5728af
commit 6f9638f6dc
23 changed files with 2219 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/leveladd/add.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 781 B

BIN
src/assets/images/leveladd/an.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 950 B

BIN
src/assets/images/leveladd/ce.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/assets/images/leveladd/diao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/leveladd/gan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 352 B

BIN
src/assets/images/leveladd/huo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/images/leveladd/kao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/assets/images/leveladd/mian.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1007 B

BIN
src/assets/images/leveladd/tao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/images/leveladd/tou.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/leveladd/wai.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/leveladd/xiang.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 785 B

BIN
src/assets/images/leveladd/z1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 B

BIN
src/assets/images/leveladd/z2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 B

BIN
src/assets/images/leveladd/zai.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/images/leveladd/zhi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 940 B

BIN
src/assets/images/leveladd/zuo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

47
src/assets/scss/common.scss
View File

@@ -78,7 +78,6 @@ border: 1px solid #C7CBD2 !important;
// 表格---------------------------------
.tableBox{
.ant-table-row .ant-table-cell{
height: 48px ;
font-size: 14px;
@@ -148,4 +147,48 @@ border: 1px solid #C7CBD2 !important;
display: none;
}
}
}
}
// 表格---------------------------------
//表格下拉框-------------------------------------------
.tableSelect {
margin-left: 21px;
display: inline-block;
.ant-select:not(.ant-select-customize-input)
.ant-select-selector
.ant-select-selection-search-input {
background-color: rgba(255, 255, 255, 0);
border: none;
}
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
background-color: rgba(255, 255, 255, 0);
border: none;
}
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
padding: 0;
}
.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
.ant-select-selector {
box-shadow: none;
}
.ant-select-arrow {
right: 0px;
color: rgba(0, 0, 0, 0.8);
font-size: 14px;
line-height: 36px;
// top: 17px;
top:14px;
}
.ant-select-selection-item {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
line-height: 36px;
}
.ant-select-single.ant-select-open .ant-select-selection-item{
color: #4ea6ff;
}
}
.tabledropdown {
width: 100px !important;
}
//表格下拉框-------------------------------------------

3
src/components/NavTop.vue
View File

@@ -112,7 +112,7 @@ export default {
}
.roleItems {
width: 109px;
height: 80px;
height: 90px;
padding-top: 10px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
@@ -121,6 +121,7 @@ export default {
right: 0px;
text-align: center;
display: none;
z-index: 100;
}
.roleItem {
font-size: 14px;

470
src/views/courselibrary/CoursewareManage.vue
View File

@@ -49,10 +49,10 @@
</div>
<div class="select fitems">
<a-range-picker
v-model:value="value2"
separator="至"
:placeholder="[' 开始时间', ' 结束时间']"
/>
v-model:value="value2"
separator="至"
:placeholder="[' 开始时间', ' 结束时间']"
/>
</div>
</div>
</div>
@@ -410,9 +410,9 @@
</div>
</template>
<script>
import { reactive, toRefs, defineComponent, ref } from 'vue';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
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();
@@ -427,202 +427,262 @@ export default defineComponent({
setup() {
const state = reactive({
tableData : [{
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,
}],
tableData: [
{
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,
},
],
});
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) => {
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(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 class={text.record.status === '已审核' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >管理</span>
<span class={text.record.status === '待审核' ? "errorCls" : "activecls"} style={{ "margin-left": "25px" }} >复制</span>
<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
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>
@@ -638,12 +698,12 @@ export default defineComponent({
</span>
</div>
</div>
);
);
},
}];
},
];
return columns;
}
};
const fileList = ref([]);
const loading = ref(false);
@@ -748,16 +808,16 @@ export default defineComponent({
const of_hShow = () => {
if (state.of_hs == false) {
state.of_hs = true
}
}
state.of_hs = true;
}
};
const hideShow = () => {
if (state.hideshow == false) {
state.hideshow = true;
} else {
state.hideshow = false;
}
}
};
const bs_hShow = () => {
if (state.bs_hs == true) {
state.bs_hs = false;
@@ -1037,7 +1097,7 @@ export default defineComponent({
}
}
.faceteach{
.faceteach {
display: none;
z-index: 1000;
width: 1358px;
@@ -1190,7 +1250,7 @@ export default defineComponent({
.tableBox {
margin: 20px 38px 30px;
.op_box{
.op_box {
display: flex;
justify-content: right;
.opacation {

20
src/views/learningpath/LevelAdd.vue
View File

@@ -185,8 +185,12 @@
<div class="box"></div>
<div class="onetitle">关卡晋级规则</div>
</div>
<div class="twomain">
<a-switch size="small" v-model:checked="checked2" />
<div class="twomain clearfix">
<a-switch
size="small"
v-model:checked="checked2"
style="margin-top: -5px"
/>
<span class="info">启用关卡自动规则加入</span>
<div class="infor">
若开启“新建/编辑关卡-添加学员”支持设定自动加入规则，将于每日8点同步数据
@@ -351,7 +355,7 @@ export default {
};
</script>
<style scoped lang="scss" >
<style scoped lang="scss">
.clearfix:before,
.clearfix:after {
content: " ";
@@ -758,7 +762,7 @@ export default {
position: absolute;
// margin-top: 10px;
left: 0;
top: 5px;
top: 3px;
}
.yulan {
// color: yellow;
@@ -773,10 +777,14 @@ export default {
.twomain {
margin-left: 20px;
margin-top: 20px;
.ant-switch-checked {
background-color: #5dc988;
}
.info {
margin-left: 10px;
color: #6f6f6f;
font-size: 14px;
// margin-top: 10px;
}
.infor {
margin-left: 38px;
@@ -818,7 +826,7 @@ export default {
position: relative;
.inl {
position: absolute;
top: 5px;
top: 2px;
}
.sh {
margin-left: 23px;
@@ -832,4 +840,4 @@ export default {
}
}
}
</style>
</style>

931
src/views/learningpath/LevelAddDetail.vue
View File

@@ -1,12 +1,939 @@
<template>
<div>ddd</div>
<div class="allCon">
<div class="left clearfix">
<div class="leftmain">
<div class="tit">关卡</div>
<div class="btn btn3">
<div class="search"></div>
<div class="btnText">添加关卡</div>
</div>
<div class="maincon">
<div class="item" v-for="item in level" :key="item.id">
<div class="itemle">
<div class="tit">{{ item.tit }}</div>
<div class="name">{{ item.name }}</div>
</div>
<div class="itemri">
<img src="../../assets/images/leveladd/z1.png" />
<img
style="margin-top: 40px"
src="../../assets/images/leveladd/z2.png"
/>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="addhead">
<div class="filt">
<div class="le">
<div class="leftimg">
<img class="img" src="../../assets/px.jpg" />
</div>
<div class="imgfor">
<div class="forz">产品经理进阶路径</div>
<div class="fort">创建时间：2022-07-21 00:00</div>
</div>
</div>
<div class="rightt">
<div class="select">
<a-select
v-model:value="projectName"
style="width: 270px"
placeholder="自由学习模式"
:options="projectNameList"
@change="selectProjectName"
allowClear
showSearch
></a-select>
</div>
<div class="line"></div>
<img class="img2" src="../../assets/images/leveladd/pub.png" />
<div class="pub">发布</div>
<div class="line"></div>
<img
style="margin-right: 15px"
class="img2"
src="../../assets/images/leveladd/more.png"
/>
<div class="more">
<span style="color: #7096e3">更多</span>
<div class="moreArrow"></div>
<div class="moreItems">
<div class="sammo">撤回</div>
<div class="sammo">复制</div>
</div>
</div>
<div class="line"></div>
<img class="img2" src="../../assets/images/leveladd/back.png" />
<router-link to="/leveladd">
<div class="return">返回</div></router-link
>
</div>
</div>
</div>
<div class="mid">
<!-- <div class="item" v-for="(item, index) in mid" :key="item.id">
<div class="itcon">
<div class="img">
<img :src="item.img" />
</div>
<div class="text">{{ item.title }}</div>
</div>
<div :class="[index === mid.length - 1 ? 'no' : 'lin']"></div>
</div> -->
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/zai.png" />
</div>
<div class="text">在线</div>
</div>
<div class="lin"></div>
</div>
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/mian.png" />
</div>
<div class="text">面授</div>
</div>
<div class="lin"></div>
</div>
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/an.png" />
</div>
<div class="text">案例</div>
</div>
<div class="lin"></div>
</div>
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/zuo.png" />
</div>
<div class="text">作业</div>
</div>
<div class="lin"></div>
</div>
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/kao.png" />
</div>
<div class="text">考试</div>
</div>
<div class="lin"></div>
</div>
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/zhi.png" />
</div>
<div class="text">直播</div>
</div>
<div class="lin"></div>
</div>
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/wai.png" />
</div>
<div class="text">外链</div>
</div>
<div class="lin"></div>
</div>
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/tao.png" />
</div>
<div class="text">讨论</div>
</div>
<div class="lin"></div>
</div>
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/huo.png" />
</div>
<div class="text">活动</div>
</div>
<div class="lin"></div>
</div>
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/ce.png" />
</div>
<div class="text">测评</div>
</div>
<div class="lin"></div>
</div>
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/diao.png" />
</div>
<div class="text">调研</div>
</div>
<div class="lin"></div>
</div>
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/tou.png" />
</div>
<div class="text">投票</div>
</div>
<div class="lin"></div>
</div>
<div class="item">
<div class="itcon">
<div class="img">
<img
src="../../assets/images/leveladd/xiang.png"
@click="showDrawer"
/>
</div>
<div class="text">项目</div>
</div>
</div>
</div>
<div class="boom">
<div class="boomcen">
<div class="select">
<a-select
v-model:value="projectName"
style="width: 270px"
placeholder="移动任务到关卡"
:options="projectNameList2"
@change="selectProjectName2"
allowClear
showSearch
></a-select>
</div>
<div class="talk">
<img class="im" src="../../assets/images/leveladd/gan.png" />
<div class="xu">
<span class="yi">已选择</span>
<div style="width: 5px; display: inline-block"></div>
<span class="th">3</span>
<div style="width: 5px; display: inline-block"></div>
<span class="yi">项</span>
<span class="zon">总数：</span>
<span class="yi">5</span>
<span class="yi">条</span>
</div>
</div>
<div class="tableBox">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tableDataFunc()"
:data-source="tableData"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ x: 1500, y: 300 }"
@expand="expandTable"
:pagination="false"
/>
<!-- :pagination= showSizeChanger: true, showQuickJumper: true,
hideOnSinglePage: true, pageSizeOptions: [], pageSize: pageSize, current:
currentPage, total: tableDataTotal, -->
<div class="pa">
<a-pagination
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
/>
</div>
</div>
</div>
</div>
<a-drawer
v-model:visible="visible"
class="custom-class"
title="关联项目"
placement="right"
width="50%"
@after-visible-change="afterVisibleChange"
>
</a-drawer>
</div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
name: "LevelAddDetail",
setup() {
const state = reactive({
projectNameList: [
{
id: 1,
value: "项目一",
label: "项目一",
},
{
id: 2,
value: "项目二",
label: "项目二",
},
{
id: 3,
value: "项目三",
label: "项目三",
},
{
id: 4,
value: "项目四",
label: "项目四",
},
],
projectNameList2: [
{
id: 1,
value: "项目一",
label: "项目一",
},
{
id: 2,
value: "项目二",
label: "项目二",
},
{
id: 3,
value: "项目三",
label: "项目三",
},
{
id: 4,
value: "项目四",
label: "项目四",
},
],
level: [
{
id: "1",
tit: "关卡1关卡1关卡1关卡1关卡1关卡1",
name: "初级产品经理fewfewfwefwefe",
},
{
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: 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: "-",
haspub: true,
checked1: true,
checkedd: false,
},
],
currentPage: 1,
tableDataTotal: 100,
pageSize: 10,
visible: false,
});
const selectProjectName = (value, index) => {
console.log("value", value, index);
};
const selectProjectName2 = (value, index) => {
console.log("value", value, index);
};
const showDrawer = () => {
state.visible = true;
};
const afterVisibleChange = (bool) => {
console.log("visible", bool);
};
const tableDataFunc = () => {
const columns = [
{
title: "类型",
dataIndex: "state",
// width: "30%",
key: "state",
width: 90,
align: "center",
className: "h",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: (text) => {
console.log(text.record.checked1);
return (
<div class="racona">
<div class="img"></div>
<a-checkbox class="ch" v-model:checked={text.record.checkedd}>
{text.record.lei}
</a-checkbox>
</div>
);
},
},
{
title: "任务名称",
dataIndex: "creater",
// width: "30%",
key: "creater",
width: 200,
align: "center",
className: "h",
},
{
title: "必修/选修",
dataIndex: "pubtime",
key: "pubtime",
width: 200,
align: "center",
className: "h",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: (text) => {
console.log(text.record.checked1);
return (
<div class="opat">
<div class="opacationt clearfix">
<a-switch
style="margin-left:-50px;margin-top:3px"
v-model:checked={text.record.checked1}
size="small"
active-color="red"
/>
<div class="showt clearfix">
<div
class="bi"
style={
text.record.checked1 ? "z-index:999" : "z-index:998"
}
>
必修
</div>
<div class="xuan">选修</div>
</div>
</div>
</div>
);
},
},
{
title: "时长",
dataIndex: "cretime",
key: "cretime",
width: 100,
align: "center",
className: "h",
},
{
title: "操作",
className: "h",
dataIndex: "opacation",
key: "opacation",
width: 100,
align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: () => {
return (
<div class="opa">
<div class="opacation">
<span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
编辑
</span>
<span style="color:#4EA6FF;cursor:pointer">删除</span>
</div>
</div>
);
},
},
];
return columns;
};
return {
...toRefs(state),
selectProjectName,
selectProjectName2,
tableDataFunc,
showDrawer,
afterVisibleChange,
};
},
};
</script>
<style scoped lang="scss" >
<style lang="scss" >
.clearfix:after,
.clearfix:before {
content: " ";
display: block;
clear: both;
}
.allCon {
width: 100%;
height: 100%;
background-color: #f1f4f8;
display: flex;
.left {
margin-right: 20px;
width: 208px;
flex-shrink: 0;
height: 100%;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
display: flex;
justify-content: center;
.leftmain {
width: 86%;
margin-top: 20px;
.tit {
font-size: 18px;
color: #363636;
}
// flex-wrap: wrap;
.btn {
margin-top: 20px;
// padding: 0px 26px 0px 26px;
height: 38px;
background: #fff6e8;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
// margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffb64e;
// line-height: 38px;
margin-top: 4px;
margin-left: 5px;
}
}
.btn3 {
margin-right: 0px;
.search {
width: 17px;
height: 18px;
background-image: url("../../assets/images/leveladd/add.png");
background-size: 100% 100%;
}
}
.maincon {
margin-top: 17px;
width: 100%;
// background-color: #bfa;
.item {
width: 100%;
height: 83px;
display: flex;
background: rgba(255, 182, 78, 0.1);
border: 1px solid #ffb64e;
opacity: 0.45;
border-radius: 8px;
margin-bottom: 17px;
align-items: center;
position: relative;
.itemle {
margin-left: 17px;
.tit {
color: black;
// color: red;
font-size: 14px;
margin-bottom: 8px;
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100px;
}
.name {
font-size: 14px;
color: #878b92;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100px;
}
}
.itemri {
display: flex;
flex-direction: column;
position: absolute;
right: 16px;
}
}
}
}
}
.right {
flex: 1;
height: 100%;
width: 100%;
// background-color: #fff;
display: flex;
flex-direction: column;
.addhead {
width: 100%;
// min-width: 500px;
// height: 130px;
background-color: #fff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
display: flex;
align-items: center;
position: relative;
.filt {
margin: 16px 30px 16px 22px;
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
flex-wrap: wrap;
.le {
display: flex;
align-items: center;
// margin-bottom: 10px;
.leftimg {
width: 151px;
height: 100px;
border: 10px solid #e7f2ff;
border-radius: 8px;
margin-left: 20px;
.img {
width: 100%;
height: 100%;
}
}
.imgfor {
margin-left: 32px;
.forz {
color: #363636;
font-size: 16px;
}
.fort {
color: #878b92;
font-size: 14px;
margin-top: 20px;
}
}
}
.rightt {
// width: 500px;
height: 100%;
// background-color: red;
// position: absolute;
// right: 0;
display: flex;
align-items: center;
.select {
margin-right: 50px;
// margin-bottom: 20px;
}
.line {
height: 60px;
width: 1px;
background-color: #e8effa;
margin-right: 28px;
}
.img2 {
width: 42px;
height: 42px;
margin-right: 22px;
}
.pub {
color: #ffb64e;
font-size: 14px;
margin-top: 5px;
margin-right: 30px;
}
.return {
color: #4ea6ff;
font-size: 14px;
margin-top: 5px;
margin-right: 20px;
}
.more {
position: relative;
margin-right: 30px;
.moreArrow {
width: 13px;
height: 7px;
display: inline-block;
background-image: url("../../assets/images/navtop/down.png");
background-size: 100%;
margin: 2px;
margin-left: 15px;
}
.moreItems {
width: 110px;
height: 80px;
display: none;
background: #ffffff;
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
// border-radius: 3px;
border: 0px solid #dcdcdc;
position: absolute;
left: -48px;
top: 28px;
z-index: 100;
.sammo {
text-align: center;
margin-top: 12px;
}
.sammo:hover {
color: #4ea6ff;
}
}
.moreItems:hover {
display: block;
}
}
.more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png");
}
.more:hover .moreItems {
display: block;
}
}
}
}
.mid {
width: 100%;
height: 130px;
margin-top: 20px;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
display: flex;
align-items: center;
.item {
height: 100%;
width: 7.7%;
display: flex;
align-items: center;
.itcon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
.img {
cursor: pointer;
}
.text {
font-size: 16px;
color: #363636;
margin-top: 5px;
}
}
.lin {
width: 1px;
height: 60%;
background-color: #e8effa;
}
.no {
display: none;
}
}
}
.boom {
position: relative;
width: 100%;
flex: 1;
background-color: #fff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
display: flex;
justify-content: center;
.boomcen {
width: 95%;
height: 100%;
// background-color: #bfa;
.select {
margin-top: 30px;
}
.talk {
margin-top: 24px;
margin-bottom: 11px;
width: 100%;
height: 50px;
background: #f5faff;
border: 1px solid #4ea6ff;
// opacity: 0.22;
display: flex;
align-items: center;
.im {
width: 14px;
height: 15px;
margin-left: 27px;
}
.xu {
height: 100%;
line-height: 50px;
margin-left: 13px;
.yi {
color: #4f5156;
font-size: 14px;
}
.zon {
color: #999ba3;
font-size: 14px;
margin-left: 34px;
}
.th {
color: #4ea6ff;
}
}
}
.tableBox {
// margin: 20px 38px 30px;
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
.pa {
left: 0;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
}
}
}
}
}
.opat {
.opacationt {
display: flex;
align-items: center;
justify-content: center;
.ant-switch-checked {
background-color: #5dc988;
}
.showt {
// margin-top: 10px;
display: flex;
margin-left: 10px;
height: 23px;
.bi {
// margin-top: 10px;
width: 63px;
height: 23;
background-color: #5dc988;
line-height: 23px;
position: absolute;
z-index: 998;
color: #ffffff;
border-radius: 4px;
}
.xuan {
width: 63px;
height: 23px;
background-color: #f2f6fc;
line-height: 23px;
// display: none;
position: absolute;
z-index: 998;
color: #5dc988;
border-radius: 4px;
}
}
}
}
.racona {
// background-color: #bfa;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.img {
margin-left: -40px;
margin-top: -2px;
width: 17px;
height: 14px;
background-image: url("../../assets/images/leveladd/z1.png");
}
.ch {
margin-left: 10px;
}
}
}
</style>

1001
src/views/projectcenter/ProjectManage.vue
View File

File diff suppressed because it is too large Load Diff