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

feat:创建班级,创建单层子项目

Browse Source
This commit is contained in:
岳佳鑫
2022-10-17 16:27:59 +08:00
parent f9c0cd67fc
commit 01d53d2f44
4 changed files with 1070 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -43,7 +43,8 @@ LevelCheck.vue查看页面
```
ProjectManage.vue:项目页面
ProjectAdd.vue:创建项目页面
ProjectAdd.vue:创建单层项目页面
SonProject.vue:创建单层子项目页面
TaskPage.vue:任务页面
TaskAdd.vue:创建任务页面
TemplateLibrary.vue:模板页面

536
src/views/projectcenter/ClassAdd.vue Normal file
View File

@@ -0,0 +1,536 @@
<!---- 创建班级页面 --->
<template>
<div class="projectAdd">
<div class="header">
<span class="title">创建/编辑班级</span>
<router-link to="/projectmanage" class="goback">
<span class="return"></span
><span class="returntext">返回</span></router-link
>
</div>
<div class="content">
<div class="main">
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">项目归属</div>
</div>
<div class="in">
<div style="color: #C7CBD2;font-size: 14px;margin-left: 15px">管理者进阶/管理者进阶-腾飞班</div>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">班级名称</div>
</div>
<div class="in">
<a-input class="ant-input1" v-model:value="valueE" placeholder="请输入班级名称" show-count :maxlength="30"/>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">分类</div>
</div>
<div class="in select">
<a-select
:value="classifySelect"
placeholder="四个养成"
style="width: 100%"
:options="classifyList"
allowClear
showSearch
></a-select>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">封面图</div>
</div>
<div
class="box"
style="
width: 100px;
height: 100px;
border: 1px solid rgba(78, 166, 255, 1);
border-radius: 5px;
cursor: pointer;
"
>
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">项目时间</div>
</div>
<div class="in">
<a-range-picker
separator="至"
style="width: 100%; height: 40px; border-radius: 5px"
show-time
/>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">项目经理</div>
</div>
<div class="in select">
<a-select
:value="classifySelect"
placeholder="请选择项目经理"
style="width: 100%"
:options="classifyList"
allowClear
showSearch
></a-select>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">资源归属</div>
</div>
<div class="in">
<a-input v-model:value="valueE" placeholder="自动带出 可修改" />
</div>
</div>
<div class="name name2">
<div class="namebox">
<div class="inname" style="margin-top: 13px">项目说明</div>
</div>
<div class="in">
<a-textarea
v-model:value="valuei"
style="height: 80px"
placeholder="请输入项目说明"
show-count :maxlength="200"
/>
</div>
</div>
<div class="name name2">
<div class="namebox">
<div class="inname">同步学习记录</div>
</div>
<div class="in">
<a-radio v-model:checked="checked"
><span
style="
width: 100%;
color: rgba(109, 117, 132, 1);
font-size: 14px;
"
>同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
></a-radio
>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">项目级别</div>
</div>
<div class="in">
<a-input
v-model:value="valueE"
placeholder="集团级/组织级/现地级/部门级"
/>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">培训体系</div>
</div>
<div class="in">
<a-input
v-model:value="valueE"
placeholder="集团级/组织级/现地级/部门级"
/>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">是否BOEU实施</div>
</div>
<div class="in">
<a-radio v-model:checked="checked"
><span
style="
width: 100%;
color: rgba(109, 117, 132, 1);
font-size: 14px;
"
>BOEU实施</span
></a-radio
>
</div>
</div>
<div class="name name2">
<div class="namebox" style="margin-top: 8px">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">附件</div>
</div>
<div class="filebox">
<div style="cursor: pointer">
<img
class="fileimg"
src="../../assets/images/projectadd/enclosure.png"
/>
<span class="filetext">上传附件</span>
</div>
<div class="support">
支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
</div>
</div>
</div>
</div>
<div class="template">
<div class="name">
<div class="inname" style="width: 50px">模板</div>
<div class="in select" style="margin-left: 2px">
<a-select
v-model:value="value1"
placeholder="请选择模板"
:size="size"
style="width: 100%"
:options="options"
></a-select>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="btn">
<a-button
type="primary"
style="width: 100px; height: 40px; border-radius: 8px"
>确认</a-button
>
<a-button
type="primary"
ghost
style="
width: 100px;
height: 40px;
margin-left: 14px;
border-radius: 8px;
"
>取消</a-button
>
</div>
</div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
name: "sonProject",
setup() {
const state = reactive({
classifyList: [
{
id: 1,
name: "分类一",
label: "分类一",
},
{
id: 2,
name: "分类二",
label: "分类二",
},
{
id: 3,
name: "分类三",
label: "分类三",
},
{
id: 4,
name: "分类四",
label: "分类四",
},
],
classifySelect: null,
classifySelectId: null,
});
return {
...toRefs(state),
};
},
};
</script>
<style lang="scss">
.projectAdd {
width: 100%;
// height: inherit;
// flex: 1;
// flex-shrink: 0;
// overflow-y: scroll;
.header {
width: 100%;
display: flex;
justify-content: space-between;
.title {
color: #000000;
font-size: 18px;
//line-height: 36px;
padding-top: 30px;
padding-left: 37px;
//font-weight: 500;
}
.goback {
padding-right: 70px;
//padding-top: 37px;
position: relative;
.return {
display: inline-block;
width: 42px;
height: 42px;
margin-top: 17px;
margin-right: 10px;
background-image: url("../../assets/images/projectadd/return.png");
}
.returntext {
display: inline-block;
position: absolute;
top: 27px;
color: #4ea6ff;
font-size: 14px;
}
}
}
.content {
display: flex;
.main {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
//justify-content: center;
float: left;
border-right: 1px solid rgba(153, 155, 163, 0.3);
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
//height: 40px;
// border: 1px solid black;
.namebox {
width: 120px;
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
.nameimg {
width: 10px;
height: 10px;
}
}
.d {
margin-top: 8px;
font-size: 25px;
color: #ff4e4e;
}
.box {
position: relative;
margin-left: 14px;
.box1 {
position: absolute;
left: 50%;
top: 50%;
width: 50px;
margin-left: -25px;
margin-top: -5px;
border-top: 2px solid rgba(78, 166, 255, 1);
}
.box2 {
position: absolute;
left: 50%;
top: 50%;
height: 50px;
//margin-left: -5px;
margin-top: -25px;
border-left: 2px solid rgba(78, 166, 255, 1);
}
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
flex: 1;
// .ant-radio-wrapper {
// }
.ant-input-textarea-show-count {
position: relative;
height: 88px;
}
.ant-input-textarea-show-count::after {
position: absolute;
right: 10px;
bottom: 0px;
}
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
.ant-input1 {
border-radius: 5px;
width: 100%;
.ant-input {
height: 30px;
}
}
.ant-select-selector {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
}
.filebox {
margin-left: 14px;
flex: 1;
.fileimg {
width: 15px;
height: 15px;
margin-right: 6px;
}
.filetext {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
line-height: 36px;
}
.support {
font-size: 14px;
font-weight: 400;
color: #999ba3;
line-height: 36px;
//margin-top: 8px;
word-break: break-all;
}
}
}
.name2 {
display: flex;
align-items: flex-start;
.ant-input-textarea {
.ant-input {
height: 88px;
}
}
}
}
.template {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
//justify-content: center;
float: right;
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
height: 40px;
// border: 1px solid black;
.d {
margin-top: 8px;
font-size: 25px;
color: #ff4e4e;
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
width: 65px;
}
.in {
margin-left: 14px;
width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
.ant-select-selector {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
}
}
}
}
.footer {
width: 100%;
margin-top: 31px;
margin-bottom: 14px;
padding-bottom: 20px;
.btn {
display: flex;
justify-content: center;
}
.text {
color: rgba(153, 155, 163, 1);
font-size: 14px;
margin-left: 223px;
}
}
}
</style>

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

@@ -133,12 +133,12 @@
</div>
</div>
<div class="modalMain">
<div class="taskbox" style="margin-right: 24px;background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
<router-link to="/sonproject" class="taskbox" style="margin-right: 24px;background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
<div class="leftt"><img src="../../assets/images/taskpage/left2.png"/></div>
<div class="photo"><img src="../../assets/images/taskpage/picture4.png"/></div>
<div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
<div class="centerbox" style="color: rgba(78, 166, 255, 1)">单层子项目</div>
</div>
</router-link>
<div class="taskbox" @click="showModal3" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);">
<div class="leftt"><img src="../../assets/images/taskpage/left1.png"/></div>
<div class="photo"><img src="../../assets/images/taskpage/picture5.png"/></div>
@@ -912,7 +912,7 @@ export default {
</a-select-option>
</a-select>
</div>
<span class="operation3">创建班级</span>
<router-link to="/classadd" class="operation3">创建班级</router-link>
<div class="tableSelect">
<a-select
style="width: 50px"
@@ -960,7 +960,7 @@ export default {
</a-select>
</div>
<span class="operation3">创建班级</span>
<router-link to="/classadd" class="operation3">创建班级</router-link>
<span class="more">复制</span>
</div>
) : item.state === "已结束" ? (

528
src/views/projectcenter/SonProject.vue Normal file
View File

@@ -0,0 +1,528 @@
<!---- 创建单层子项目页面 --->
<template>
<div class="projectAdd">
<div class="header">
<span class="title">创建/编辑单层子项目</span>
<router-link to="/projectmanage" class="goback">
<span class="return"></span
><span class="returntext">返回</span></router-link
>
</div>
<div class="content">
<div class="main">
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">项目归属</div>
</div>
<div class="in">
<div style="color: #C7CBD2;font-size: 14px;margin-left: 15px">HRBP2.0</div>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">子项目名称</div>
</div>
<div class="in">
<div style="color: #C7CBD2;font-size: 14px;margin-left: 15px">HRBP2.0-band</div>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">分类</div>
</div>
<div class="in select">
<a-select
:value="classifySelect"
placeholder="四个养成"
style="width: 100%"
:options="classifyList"
allowClear
showSearch
></a-select>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">封面图</div>
</div>
<div
class="box"
style="
width: 100px;
height: 100px;
border: 1px solid rgba(78, 166, 255, 1);
border-radius: 5px;
cursor: pointer;
"
>
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">项目时间</div>
</div>
<div class="in">
<a-range-picker
separator="至"
style="width: 100%; height: 40px; border-radius: 5px"
show-time
/>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">项目经理</div>
</div>
<div class="in select">
<a-select
:value="classifySelect"
placeholder="请选择项目经理"
style="width: 100%"
:options="classifyList"
allowClear
showSearch
></a-select>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">资源归属</div>
</div>
<div class="in">
<a-input v-model:value="valueE" placeholder="自动带出 可修改" />
</div>
</div>
<div class="name name2">
<div class="namebox">
<div class="inname" style="margin-top: 13px">项目说明</div>
</div>
<div class="in">
<a-textarea
v-model:value="valuei"
style="height: 80px"
placeholder="请输入项目说明"
show-count :maxlength="200"
/>
</div>
</div>
<div class="name name2">
<div class="namebox">
<div class="inname">同步学习记录</div>
</div>
<div class="in">
<a-radio v-model:checked="checked"
><span
style="
width: 100%;
color: rgba(109, 117, 132, 1);
font-size: 14px;
"
>同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
></a-radio
>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">项目级别</div>
</div>
<div class="in">
<a-input
v-model:value="valueE"
placeholder="集团级/组织级/现地级/部门级"
/>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">培训体系</div>
</div>
<div class="in">
<a-input
v-model:value="valueE"
placeholder="集团级/组织级/现地级/部门级"
/>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">是否BOEU实施</div>
</div>
<div class="in">
<a-radio v-model:checked="checked"
><span
style="
width: 100%;
color: rgba(109, 117, 132, 1);
font-size: 14px;
"
>BOEU实施</span
></a-radio
>
</div>
</div>
<div class="name name2">
<div class="namebox" style="margin-top: 8px">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">附件</div>
</div>
<div class="filebox">
<div style="cursor: pointer">
<img
class="fileimg"
src="../../assets/images/projectadd/enclosure.png"
/>
<span class="filetext">上传附件</span>
</div>
<div class="support">
支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
</div>
</div>
</div>
</div>
<div class="template">
<div class="name">
<div class="inname" style="width: 50px">模板</div>
<div class="in select" style="margin-left: 2px">
<a-select
v-model:value="value1"
placeholder="请选择模板"
:size="size"
style="width: 100%"
:options="options"
></a-select>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="btn">
<a-button
type="primary"
style="width: 100px; height: 40px; border-radius: 8px"
>确认</a-button
>
<a-button
type="primary"
ghost
style="
width: 100px;
height: 40px;
margin-left: 14px;
border-radius: 8px;
"
>取消</a-button
>
</div>
</div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
name: "sonProject",
setup() {
const state = reactive({
classifyList: [
{
id: 1,
name: "分类一",
label: "分类一",
},
{
id: 2,
name: "分类二",
label: "分类二",
},
{
id: 3,
name: "分类三",
label: "分类三",
},
{
id: 4,
name: "分类四",
label: "分类四",
},
],
classifySelect: null,
classifySelectId: null,
});
return {
...toRefs(state),
};
},
};
</script>
<style lang="scss">
.projectAdd {
width: 100%;
// height: inherit;
// flex: 1;
// flex-shrink: 0;
// overflow-y: scroll;
.header {
width: 100%;
display: flex;
justify-content: space-between;
.title {
color: #000000;
font-size: 18px;
//line-height: 36px;
padding-top: 30px;
padding-left: 37px;
//font-weight: 500;
}
.goback {
padding-right: 70px;
//padding-top: 37px;
position: relative;
.return {
display: inline-block;
width: 42px;
height: 42px;
margin-top: 17px;
margin-right: 10px;
background-image: url("../../assets/images/projectadd/return.png");
}
.returntext {
display: inline-block;
position: absolute;
top: 27px;
color: #4ea6ff;
font-size: 14px;
}
}
}
.content {
display: flex;
.main {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
//justify-content: center;
float: left;
border-right: 1px solid rgba(153, 155, 163, 0.3);
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
//height: 40px;
// border: 1px solid black;
.namebox {
width: 120px;
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
.nameimg {
width: 10px;
height: 10px;
}
}
.d {
margin-top: 8px;
font-size: 25px;
color: #ff4e4e;
}
.box {
position: relative;
margin-left: 14px;
.box1 {
position: absolute;
left: 50%;
top: 50%;
width: 50px;
margin-left: -25px;
margin-top: -5px;
border-top: 2px solid rgba(78, 166, 255, 1);
}
.box2 {
position: absolute;
left: 50%;
top: 50%;
height: 50px;
//margin-left: -5px;
margin-top: -25px;
border-left: 2px solid rgba(78, 166, 255, 1);
}
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
flex: 1;
// .ant-radio-wrapper {
// }
.ant-input-textarea-show-count {
position: relative;
height: 88px;
}
.ant-input-textarea-show-count::after {
position: absolute;
right: 10px;
bottom: 0px;
}
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
.ant-select-selector {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
}
.filebox {
margin-left: 14px;
flex: 1;
.fileimg {
width: 15px;
height: 15px;
margin-right: 6px;
}
.filetext {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
line-height: 36px;
}
.support {
font-size: 14px;
font-weight: 400;
color: #999ba3;
line-height: 36px;
//margin-top: 8px;
word-break: break-all;
}
}
}
.name2 {
display: flex;
align-items: flex-start;
.ant-input-textarea {
.ant-input {
height: 88px;
}
}
}
}
.template {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
//justify-content: center;
float: right;
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
height: 40px;
// border: 1px solid black;
.d {
margin-top: 8px;
font-size: 25px;
color: #ff4e4e;
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
width: 65px;
}
.in {
margin-left: 14px;
width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
.ant-select-selector {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
}
}
}
}
.footer {
width: 100%;
margin-top: 31px;
margin-bottom: 14px;
padding-bottom: 20px;
.btn {
display: flex;
justify-content: center;
}
.text {
color: rgba(153, 155, 163, 1);
font-size: 14px;
margin-left: 223px;
}
}
}
</style>