From 8a232ed70c63e0d91c4d6a99b1f14ce39b107766 Mon Sep 17 00:00:00 2001 From: dongwug Date: Mon, 17 Oct 2022 18:34:26 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9EAddOnline=E5=BC=B9?= =?UTF-8?q?=E7=AA=97=EF=BC=88=E6=9C=AA=E5=AE=8C=E6=88=90=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/drawers/AddOnline.vue | 232 ++++++++ src/views/projectcenter/TaskAdd.vue | 829 +++++++++++++-------------- 2 files changed, 618 insertions(+), 443 deletions(-) create mode 100644 src/components/drawers/AddOnline.vue diff --git a/src/components/drawers/AddOnline.vue b/src/components/drawers/AddOnline.vue new file mode 100644 index 00000000..772b81cf --- /dev/null +++ b/src/components/drawers/AddOnline.vue @@ -0,0 +1,232 @@ + + + \ No newline at end of file diff --git a/src/views/projectcenter/TaskAdd.vue b/src/views/projectcenter/TaskAdd.vue index 0bbd1138..338f6785 100644 --- a/src/views/projectcenter/TaskAdd.vue +++ b/src/views/projectcenter/TaskAdd.vue @@ -62,12 +62,17 @@
-
+
-
在线
+
在线
+ +
+ +
+
@@ -222,42 +227,6 @@
-
- -
-
-
关联项目
- -
-
- - -
-
- - -
-
- -
import { reactive, toRefs, onMounted, onUnmounted } from "vue"; +import AddOnline from "../../components/drawers/AddOnline.vue"; const drawercolumns = [ { title: "项目名称", @@ -357,431 +327,404 @@ const drawercolumns = [ }, ]; 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: "移动任务到关卡", - }, - ], - 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: [ + name: "LevelAddDetail", + components: { + AddOnline, + }, + setup() { + const state = reactive({ + projectNameList: [ { - key: "1-1-1", - projectName: "管理者进阶-腾飞班K1", - manager: "黄华 刘俊", - creater: "毛继禹", - time: "2022-07-20 14:00:03", + id: 1, + value: "项目一", + label: "项目一", }, - ], - }, - ], - }, - { - 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", + id: 2, + value: "项目二", + label: "项目二", }, - ], - }, - ], - }, - - { - 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 showDrawer = () => { - state.visible = !state.visible; - }; - 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 ( -
-
{ - console.log("点击了"); - }} - >
+ { + 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", + 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 (
+
{ + console.log("点击了"); + }}>
{text.record.lei} {/** -
- - {text.record.lei} - -*/} -
- ); - }, - }, - { - title: "任务名称", - dataIndex: "creater", - // width: "30%", - key: "creater", - width: 200, - align: "center", - className: "h", - }, - { - title: "必修/选修", - dataIndex: "pubtime", - key: "pubtime", - // width: 100, - align: "center", - className: "h", - scopedSlots: { customRender: "action" }, //引入的插槽 - customRender: (text) => { - // console.log(text.record.checked1); - return ( -
+
+ + {text.record.lei} + + */} +
); + }, + }, + { + title: "任务名称", + dataIndex: "creater", + // width: "30%", + key: "creater", + width: 200, + align: "center", + className: "h", + }, + { + title: "必修/选修", + dataIndex: "pubtime", + key: "pubtime", + // width: 100, + align: "center", + className: "h", + scopedSlots: { customRender: "action" }, + customRender: (text) => { + // console.log(text.record.checked1); + return (
- { - console.log("点击了"); - text.record.checked1 = !text.record.checked1; - }} - /> + { + console.log("点击了"); + text.record.checked1 = !text.record.checked1; + }}/>
-
+
必修
选修
-
- ); - }, - }, - { - 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 ( -
+
); + }, + }, + { + 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 (
编辑 删除
-
- ); - }, - }, - ]; - return columns; - }; - - const onSelectChange = (selectedRowKeys) => { - console.log("selectedRowKeys changed: ", selectedRowKeys); - state.selectedRowKeys = selectedRowKeys; - }; - - // const getClientHeight = () => { - // state.rightheight = - // document.getElementsByClassName("addhead")[0].offsetHeight + - // document.getElementsByClassName("mid")[0].offsetHeight + - // document.getElementsByClassName("boom")[0].offsetHeight + - // 40 + - // "px"; - // }; - const showModal = () => { - state.stage = true; - }; - const closeModal = () => { - state.stage = false; - }; - onMounted(() => { - document.getElementsByTagName("main")[0].style.background = - "rgb(245, 247, 250,1)"; - document.getElementsByTagName("main")[0].style.boxShadow = "none"; - }); - onUnmounted(() => { - document.getElementsByTagName("main")[0].style.background = "#ffffff"; - document.getElementsByTagName("main")[0].style.boxShadow = - "0px 1px 35px 0px rgba(118, 136, 166, 0.07)"; - }); - return { - ...toRefs(state), - selectProjectName, - selectProjectName2, - tableDataFunc, - showModal, - closeModal, - showDrawer, - afterVisibleChange, - drawercolumns, - onSelectChange, - }; - }, +
); + }, + }, + ]; + return columns; + }; + const onSelectChange = (selectedRowKeys) => { + console.log("selectedRowKeys changed: ", selectedRowKeys); + state.selectedRowKeys = selectedRowKeys; + }; + // const getClientHeight = () => { + // state.rightheight = + // document.getElementsByClassName("addhead")[0].offsetHeight + + // document.getElementsByClassName("mid")[0].offsetHeight + + // document.getElementsByClassName("boom")[0].offsetHeight + + // 40 + + // "px"; + // }; + const showModal = () => { + state.stage = true; + }; + const closeModal = () => { + state.stage = false; + }; + onMounted(() => { + document.getElementsByTagName("main")[0].style.background = + "rgb(245, 247, 250,1)"; + document.getElementsByTagName("main")[0].style.boxShadow = "none"; + }); + onUnmounted(() => { + document.getElementsByTagName("main")[0].style.background = "#ffffff"; + document.getElementsByTagName("main")[0].style.boxShadow = + "0px 1px 35px 0px rgba(118, 136, 166, 0.07)"; + }); + const showDrawerOnline = () => { + state.visible = true; + }; + return { + ...toRefs(state), + selectProjectName, + selectProjectName2, + tableDataFunc, + showModal, + closeModal, + // showDrawer, + afterVisibleChange, + drawercolumns, + onSelectChange, + showDrawerOnline, + }; + }, };