mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-06 09:26:44 +08:00
feat:创建班级,创建单层子项目
This commit is contained in:
岳佳鑫
@@ -43,7 +43,8 @@ LevelCheck.vue查看页面
|
|||||||
|
|
||||||
```
|
```
|
||||||
ProjectManage.vue:项目页面
|
ProjectManage.vue:项目页面
|
||||||
ProjectAdd.vue:创建项目页面
|
ProjectAdd.vue:创建单层项目页面
|
||||||
|
SonProject.vue:创建单层子项目页面
|
||||||
TaskPage.vue:任务页面
|
TaskPage.vue:任务页面
|
||||||
TaskAdd.vue:创建任务页面
|
TaskAdd.vue:创建任务页面
|
||||||
TemplateLibrary.vue:模板页面
|
TemplateLibrary.vue:模板页面
|
||||||
|
|||||||
536
src/views/projectcenter/ClassAdd.vue
Normal file
536
src/views/projectcenter/ClassAdd.vue
Normal 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>
|
||||||
@@ -133,12 +133,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modalMain">
|
<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="leftt"><img src="../../assets/images/taskpage/left2.png"/></div>
|
||||||
<div class="photo"><img src="../../assets/images/taskpage/picture4.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="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
|
||||||
<div class="centerbox" style="color: rgba(78, 166, 255, 1)">单层子项目</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="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="leftt"><img src="../../assets/images/taskpage/left1.png"/></div>
|
||||||
<div class="photo"><img src="../../assets/images/taskpage/picture5.png"/></div>
|
<div class="photo"><img src="../../assets/images/taskpage/picture5.png"/></div>
|
||||||
@@ -912,7 +912,7 @@ export default {
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
<span class="operation3">创建班级</span>
|
<router-link to="/classadd" class="operation3">创建班级</router-link>
|
||||||
<div class="tableSelect">
|
<div class="tableSelect">
|
||||||
<a-select
|
<a-select
|
||||||
style="width: 50px"
|
style="width: 50px"
|
||||||
@@ -960,7 +960,7 @@ export default {
|
|||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span class="operation3">创建班级</span>
|
<router-link to="/classadd" class="operation3">创建班级</router-link>
|
||||||
<span class="more">复制</span>
|
<span class="more">复制</span>
|
||||||
</div>
|
</div>
|
||||||
) : item.state === "已结束" ? (
|
) : item.state === "已结束" ? (
|
||||||
|
|||||||
528
src/views/projectcenter/SonProject.vue
Normal file
528
src/views/projectcenter/SonProject.vue
Normal 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>
|
||||||
Reference in New Issue
Block a user