From 5f90efd974de03a867c80fa0ab5ec007e8a2d6ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=99=93=E9=B8=BD?= Date: Mon, 10 Oct 2022 18:11:31 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=A1=A8=E6=A0=BC=E4=B8=8B=E6=8B=89=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/scss/common.scss | 47 +- src/components/NavTop.vue | 3 +- src/views/courselibrary/CoursewareManage.vue | 1450 ++++++++++-------- src/views/learningpath/LevelAdd.vue | 4 +- src/views/projectcenter/ProjectManage.vue | 1001 +++++++++++- 5 files changed, 1795 insertions(+), 710 deletions(-) diff --git a/src/assets/scss/common.scss b/src/assets/scss/common.scss index a6068f6b..3e8dce2d 100644 --- a/src/assets/scss/common.scss +++ b/src/assets/scss/common.scss @@ -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; } } -} \ No newline at end of file +} +// 表格--------------------------------- +//表格下拉框------------------------------------------- +.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; +} +//表格下拉框------------------------------------------- \ No newline at end of file diff --git a/src/components/NavTop.vue b/src/components/NavTop.vue index 7cd518d1..b8e05d2a 100644 --- a/src/components/NavTop.vue +++ b/src/components/NavTop.vue @@ -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; diff --git a/src/views/courselibrary/CoursewareManage.vue b/src/views/courselibrary/CoursewareManage.vue index 03da7922..0f230fd6 100644 --- a/src/views/courselibrary/CoursewareManage.vue +++ b/src/views/courselibrary/CoursewareManage.vue @@ -6,13 +6,25 @@
- +
- +
- +
- +
- +
-
-
-
搜索
-
-
-
-
重置
-
-
-
-
导出
-
-
-
-
新建课程
-
+
+
+
搜索
+
+
+
+
重置
+
+
+
+
导出
+
+
+
+
新建课程
+
- +
-
+
@@ -79,67 +94,86 @@
- ⃰ - 课程名称 + ⃰ + 课程名称
- +
课程命名规则
-
-
- 收起 +
+
+ 收起
-
- 展开 +
+ 展开
-
- - 1、课程名称统一不加书名号。
- 2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息 - 之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先 - 看到的是课程内容主题。
- 3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用 - 版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。 +
+ + 1、课程名称统一不加书名号。
+ 2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息 + 之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先 + 看到的是课程内容主题。
+ 3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用 + 版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。
- ⃰ - 授课形式 + ⃰ + 授课形式
- 线上 + 线上
-
+
- 面授 + 面授
-
+
- ⃰ - 是否设置目录 + ⃰ + 是否设置目录
- 是 + 是
- 否 + 否
取消
-
+
确定
@@ -151,151 +185,196 @@
-
-
-
- 新建面授课 -
x
-
-
课程信息
-
-
-
- ⃰ - 课程名称 -
- -
-
-
-
-
课程命名规则
-
-
- 收起 -
-
- 展开 -
-
-
-
-
- - 1、课程名称统一不加书名号。
- 2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息 - 之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先 - 看到的是课程内容主题。
- 3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用 - 版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。 - -
-
-
-
- ⃰ - 封面图 -
- - avatar -
- - -
Upload
-
- -
-
-
- 高宽比为16:9 (如:800*450) png或jpg图片 -
-
-
- ⃰ - 目标人群 -
- -
-
-
- 课程价值 -
- -
-
-
- ⃰ - 内容分类 -
- -
-
-
- 场景 -
- -
-
-
-
- 内容标签 -
- -
-
-
- Tag 2 - Prevent Default -
+
+
+
+ 新建面授课 +
x
+
+
课程信息
+
+
+
+ ⃰ + 课程名称 +
+
-
-
- ⃰ - 授课教师 +
+
+
课程命名规则
+
+
+ 收起 +
+
+ 展开 +
+
+
+
+
+ + 1、课程名称统一不加书名号。
+ 2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息 + 之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先 + 看到的是课程内容主题。
+ 3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用 + 版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。 + +
+
+
+
+ ⃰ + 封面图 +
+ + avatar +
+ + +
Upload
+
+ +
+
+
+ 高宽比为16:9 (如:800*450) png或jpg图片 +
+
+
+ ⃰ + 目标人群 +
+ +
+
+
+ 课程价值 +
+ +
+
+
+ ⃰ + 内容分类 +
+ +
+
+
+ 场景 +
+ +
+
+
+
+ 内容标签
- +
-
- 课程简介 -
- -
+
+ Tag 2 + Prevent Default
-
-
- 附件 -
- 添加附件 -
+
+
+
+
+ ⃰ + 授课教师 +
+ +
+
+
+ 课程简介 +
+ +
+
+
+
+ 附件 +
+ 添加附件
+
@@ -313,130 +392,148 @@
\ No newline at end of file + diff --git a/src/views/projectcenter/ProjectManage.vue b/src/views/projectcenter/ProjectManage.vue index 320fb7f2..d88df7c3 100644 --- a/src/views/projectcenter/ProjectManage.vue +++ b/src/views/projectcenter/ProjectManage.vue @@ -67,11 +67,10 @@
+ > + +
@@ -145,26 +159,10 @@ const columns = [ }, { title: "操作", - dataIndex: "opacation", - key: "opacation", + dataIndex: "operation", + key: "operation", width: 300, align: "center", - scopedSlots: { customRender: "action" }, //引入的插槽 - customRender: () => { - // console.log(text); - return ( -
- 编辑 - 授权 - 创建子项目 - - 更多 -
-
- -
- ); - }, }, ]; @@ -209,7 +207,7 @@ export default { time: "2022-07-20 14:00:03", children: [ { - key: 5, + key: "1-1", projectName: "管理者进阶5", manager: "黄华 刘俊", state: "草稿", @@ -217,14 +215,14 @@ export default { time: "2022-07-20 14:00:03", children: [ { - key: 7, + key: "1-1-1", projectName: "管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7", manager: "黄华 刘俊", state: "草稿", creater: "毛继禹", time: "2022-07-20 14:00:03", - }, + }, ], }, ], @@ -242,21 +240,21 @@ export default { key: 3, projectName: "管理者进阶3", manager: "黄华 刘俊", - state: "草稿", + state: "进行中", creater: "毛继禹", time: "2022-07-20 14:00:03", hasChildren: true, children: [ { - key: 35, + key: "3-1", projectName: "管理者进阶35", manager: "黄华 刘俊", - state: "草稿", + state: "已结束", creater: "毛继禹", time: "2022-07-20 14:00:03", }, { - key: 36, + key: "3-2", projectName: "管理者进阶36", manager: "黄华 刘俊", state: "草稿", @@ -277,17 +275,59 @@ export default { key: 4, projectName: "管理者进阶5", manager: "黄华 刘俊", - state: "草稿", + state: "已结束", creater: "毛继禹", time: "2022-07-20 14:00:03", + children: [ + { + key: "4-1", + projectName: "管理者进阶5", + manager: "黄华 刘俊", + state: "进行中", + creater: "毛继禹", + time: "2022-07-20 14:00:03", + children: [ + { + key: "4-1-1", + projectName: + "管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7", + manager: "黄华 刘俊", + state: "草稿", + creater: "毛继禹", + time: "2022-07-20 14:00:03", + }, + ], + }, + ], }, { - key: 4, - projectName: "管理者进阶", + key: 5, + projectName: "管理者进阶5", manager: "黄华 刘俊", - state: "草稿", + state: "已结束", creater: "毛继禹", time: "2022-07-20 14:00:03", + children: [ + { + key: "5-1", + projectName: "管理者进阶5", + manager: "黄华 刘俊", + state: "已结束", + creater: "毛继禹", + time: "2022-07-20 14:00:03", + children: [ + { + key: "5-1-1", + projectName: + "管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7", + manager: "黄华 刘俊", + state: "进行中", + creater: "毛继禹", + time: "2022-07-20 14:00:03", + }, + ], + }, + ], }, { key: 4, @@ -417,11 +457,869 @@ export default { // console.log("惦记了"); console.log("e", e, a); }; + + const getTableDate = () => { + state.tableData.map((value) => { + if (value.children) { + //多层项目 + console.log("11"); + value.operation = + value.state === "草稿" ? ( +
+ 编辑 +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ 创建子项目 +
+ + +
基础信息
+ + +
存为模板
+ + +
+
+ ) : value.state === "进行中" ? ( +
+ 查看 +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ 复制 + +
+ ) : value.state === "已结束" ? ( +
+ 查看 +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ 复制 + 删除 +
+ ) : null; + + value.children.map((item) => { + if (item.children) { + //多层子项目 + item.operation = + item.state === "草稿" ? ( +
+ 编辑 +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ 创建班级 +
+ + +
复制
+ + +
删除
+ + +
+
+ ) : item.state === "进行中" ? ( +
+ 查看 +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ + 创建班级 + 复制 +
+ ) : item.state === "已结束" ? ( +
+ 查看 +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ 复制 + 删除 +
+ ) : null; + + item.children.map((a) => { + //班级 + a.operation = + a.state === "草稿" ? ( +
+ +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ 发布 +
+ + +
复制
+ + +
删除
+ + +
存为模板
+ + +
基础信息
+ + +
+
+ ) : a.state === "进行中" ? ( +
+ +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ 复制 +
+ + +
撤回
+ + +
结束
+ + +
存为模板
+ + +
基础信息
+ + +
+
+ ) : a.state === "已结束" ? ( +
+ +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ 复制 + 复制 +
+ + +
删除
+ + +
存为模板
+ + +
基础信息
+ + +
+
+ ) : a.state === "未开始" ? ( +
+ +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ 复制 +
+ + +
结束
+ + +
撤回
+ + +
存为模板
+ + +
基础信息
+ + +
+
+ ) : null; + }); + } else { + //单层子项目 + item.operation = + item.state === "草稿" ? ( +
+ +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ 发布 +
+ + +
复制
+ + +
删除
+ + +
存为模板
+ + +
基础信息
+ + +
+
+ ) : item.state === "进行中" ? ( +
+ +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ 复制 +
+ + +
撤回
+ + +
结束
+ + +
存为模板
+ + +
基础信息
+ + +
+
+ ) : item.state === "已结束" ? ( +
+ +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ 复制 +
+ + +
删除
+ + +
结束
+ + +
存为模板
+ + +
基础信息
+ + +
+
+ ) : item.state === "未开始" ? ( +
+ +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ 复制 +
+ + +
撤回
+ + +
结束
+ + +
存为模板
+ + +
基础信息
+ + +
+
+ ) : null; + } + }); + } else { + //单层项目 + value.operation = ( +
+ +
+ + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + +
+ + {value.state === "草稿" ? ( + 发布 + ) : ( + 复制 + )} +
+ {value.state === "草稿" ? ( + + +
复制
+ + +
{ + console.log("点击了"); + }} + > + 删除 +
+ + +
存为模板
+ + +
基础信息
+ + + ) : value.state === "进行中" ? ( + + +
存为模板
+ + +
{ + console.log("点击了"); + }} + > + 结束 +
+ + +
撤回
+ + +
基础信息
+ + + ) : value.state === "已结束" || value.state === "未开始" ? ( + + +
存为模板
+ + +
{ + console.log("点击了"); + }} + > + 删除 +
+ + +
基础信息
+ + + ) : null} +
+
+ ); + } + + return 0; + }); + return state.tableData; + }; + + const tableDataFunc = () => { + const columns = [ + { + title: "项目名称", + dataIndex: "projectName", + key: "projectName", + width: 180, + // align: "center", + ellipsis: true, + // scopedSlots: { customRender: "action" }, //引入的插槽 + // customRender: (text, record) => { + // console.log(text, record); + // return {text.text}; + // }, + }, + { + title: "项目经理", + dataIndex: "manager", + key: "manager", + width: 100, + align: "center", + }, + { + title: "状态", + dataIndex: "state", + // width: "30%", + key: "state", + width: 100, + align: "center", + }, + { + title: "创建人", + dataIndex: "creater", + // width: "30%", + key: "creater", + width: 100, + align: "center", + }, + { + title: "创建时间", + dataIndex: "time", + key: "time", + width: 180, + align: "center", + }, + { + title: "操作", + dataIndex: "operation", + key: "operation", + width: 300, + align: "center", + }, + ]; + const data = getTableDate(); + return [columns, data]; + }; return { ...toRefs(state), columns, selectProjectName, expandTable, + getTableDate, + tableDataFunc, }; }, }; @@ -525,14 +1423,42 @@ export default { } .tableBox { margin: 20px 38px 30px; + .ant-table-thead > tr > th { + font-size: 14px; + font-weight: 400; + color: #999ba3; + line-height: 36px; + padding: 5px 16px; + background-color: #eff4fc; + } + .ant-table { + // overflow: visible; + // z-index: 99999; + } } - .opacation { + .operation { font-size: 14px; font-weight: 400; color: #4ea6ff; // line-height: 36px; + .operation1 { + margin-left: 21px; + width: 28px; + display: inline-block; + } + .operation3 { + margin-left: 21px; + width: 70px; + display: inline-block; + text-align: center; + } .more { + width: 50px; + display: inline-block; + margin-left: 21px; position: relative; + text-align: left; + // z-index: 99999; .moreArrow { width: 13px; height: 7px; @@ -544,7 +1470,7 @@ export default { } .moreItems { width: 80px; - height: 70px; + padding: 5px; display: none; background: #ffffff; box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05); @@ -552,8 +1478,9 @@ export default { border: 0px solid #dcdcdc; position: absolute; left: 0px; - top: 18px; + top: 28px; z-index: 100; + text-align: center; } } .more:hover .moreArrow {