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

feat:合并

Browse Source
This commit is contained in:
songwc
2022-10-22 11:08:11 +08:00
parent c5d7b88011 5f4924d31d
commit 0e4de7b885
2 changed files with 611 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/taskpage/edit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 443 B

735
src/views/projectcenter/TaskPage.vue
View File

@@ -225,136 +225,186 @@
<a-collapse v-model:activeKey="taskSyllabusActive" accordion>
<template #expandIcon="{ isActive }">
<img
:style="{
width: isActive ? 9.1 : 8.1,
height: isActive ? 8.1 : 9.1,
'margin-right': isActive ? '12px' : '13px',
}"
:src="
isActive
? require('../../assets/images/projectadd/open.png')
: require('../../assets/images/projectadd/close.png')
"
class="editimg"
src="../../assets/images/projectadd/edit.png"
/>
<div></div>
</template>
<a-collapse-panel
v-for="(value, index) in taskSyllabus"
:key="index"
:header="value.text"
>
<div
class="course"
v-for="(item, key) in value.children"
:key="key"
<span class="editext">编辑</span>
</router-link>
</div>
<div class="taskSyllabus">
<a-collapse v-model:activeKey="taskSyllabusActive" accordion>
<template #expandIcon="{ isActive }">
<img
:style="{
width: isActive ? 9.1 : 8.1,
height: isActive ? 8.1 : 9.1,
'margin-right': isActive ? '12px' : '13px',
}"
:src="
isActive
? require('../../assets/images/projectadd/open.png')
: require('../../assets/images/projectadd/close.png')
"
/>
<div></div>
</template>
<a-collapse-panel
v-for="(value, index) in taskSyllabus"
:key="index"
:header="value.text"
>
<div class="first">
<div class="icon">
<img src="../../assets/images/leveladd/zai.png" />
<div
class="course"
v-for="(item, key) in value.children"
:key="key"
>
<!-- :style="{width:item.course==='在线'?'28px':
height:item.course==='在线'?'27px':}" -->
<div class="first">
<div class="icon">
<div
style="
width: 31px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
"
>
<img
:src="
item.course === '在线'
? require('../../assets/images/leveladd/zai.png')
: item.course === '面授'
? require('../../assets/images/leveladd/mian.png')
: item.course === '案例'
? require('../../assets/images/leveladd/an.png')
: item.course === '作业'
? require('../../assets/images/leveladd/zuo.png')
: item.course === '考试'
? require('../../assets/images/leveladd/kao.png')
: item.course === '直播'
? require('../../assets/images/leveladd/zhi.png')
: item.course === '外链'
? require('../../assets/images/leveladd/wai.png')
: item.course === '讨论'
? require('../../assets/images/leveladd/tao.png')
: item.course === '活动'
? require('../../assets/images/leveladd/huo.png')
: item.course === '测评'
? require('../../assets/images/leveladd/ce.png')
: item.course === '调研'
? require('../../assets/images/leveladd/diao.png')
: item.course === '投票'
? require('../../assets/images/leveladd/tou.png')
: null
"
/>
</div>
</div>
<div>
<div class="iconame">「{{ item.course }}」</div>
<div class="icontext">{{ item.name }}</div>
</div>
</div>
<div>
<div class="iconame">「{{ item.course }}」</div>
<div class="icontext">{{ item.name }}</div>
</div>
</div>
<div class="type">
<div
:class="
item.classify == '必修' ? 'typename1' : 'typename'
"
>
{{ item.classify }}
</div>
</div>
<div class="time">
<div class="timetext">开始时间</div>
<div class="timetext">{{ item.beginTime }}</div>
</div>
<div class="progress">
<div class="progresstext">
{{ item.complete }}/{{ item.total }}人
</div>
<div style="display: flex">
<a-progress
:showInfo="false"
:percent="item.percent"
strokeColor="#FFC067"
trailColor="rgba(253, 209, 98, 0.2)"
/>
<span class="progresstext" style="margin-left: 10px"
>{{ item.percent }}%</span
<div class="type">
<div
:class="
item.classify == '必修' ? 'typename1' : 'typename'
"
>
{{ item.classify }}
</div>
</div>
</div>
<div class="operations">
<div
class="operation"
style="cursor: pointer"
:style="{
display: item.course === '面授' ? 'flex' : 'none',
}"
@click="showFS"
>
学员
<div class="time">
<div class="timetext">开始时间</div>
<div class="timetext">{{ item.beginTime }}</div>
</div>
<div
class="operation"
style="cursor: pointer"
@click="showAA"
:style="{
display:
item.course === '直播' || item.course === '活动'
? 'flex'
: 'none',
}"
>
考勤
<div class="progress">
<div class="progresstext">
{{ item.complete }}/{{ item.total }}人
</div>
<div style="display: flex">
<a-progress
:showInfo="false"
:percent="item.percent"
strokeColor="#FFC067"
trailColor="rgba(253, 209, 98, 0.2)"
/>
<span class="progresstext" style="margin-left: 10px"
>{{ item.percent }}%</span
>
</div>
</div>
<div
class="operation"
style="cursor: pointer"
:style="{
display:
<div class="operations">
<div
class="operation"
style="cursor: pointer"
:style="{
display: item.course === '面授' ? 'flex' : 'none',
}"
@click="showFS"
>
学员
</div>
<div
class="operation"
style="cursor: pointer"
@click="showAA"
:style="{
display:
item.course === '直播' || item.course === '活动'
? 'flex'
: 'none',
}"
>
考勤
</div>
<div
class="operation"
style="cursor: pointer"
:style="{
display:
item.course === '直播' ||
item.course === '活动' ||
item.course === '面授'
? 'flex'
: 'none',
}"
>
二维码
</div>
<div
class="operation"
style="cursor: pointer; margin-right: 35px"
@click="
item.course === '在线' ||
item.course === '案例' ||
item.course === '外链' ||
item.course === '讨论' ||
item.course === '直播' ||
item.course === '活动' ||
item.course === '面授'
? 'flex'
: 'none',
}"
>
二维码
</div>
<div
class="operation"
style="cursor: pointer; margin-right: 35px"
@click="
item.course === '在线' ||
item.course === '案例' ||
item.course === '外链' ||
item.course === '讨论' ||
item.course === '直播' ||
item.course === '调研' ||
item.course === '投票' ||
item.course === '活动'
? showTime(item.course, item.name)
: item.course === '考试' || item.course === '测评'
? showTest(item.course, item.name)
: item.course === '面授'
? showFace(item.course)
: item.course === '作业'
? showWork(item.course)
: null
"
>
管理
item.course === '调研' ||
item.course === '投票' ||
item.course === '活动'
? showTime(item.course, item.name)
: item.course === '考试' || item.course === '测评'
? showTest(item.course, item.name)
: item.course === '面授'
? showFace(item.course)
: item.course === '作业'
? showWork(item.course)
: null
"
>
管理
</div>
</div>
</div>
</div>
</a-collapse-panel>
</a-collapse>
</a-collapse-panel>
</a-collapse>
</div>
<div style="display: flex; height: 20px"></div>
</div>
<div style="display: flex; height: 20px"></div>
</a-tab-pane>
<a-tab-pane key="3" tab="学员">
<div class="split"></div>
@@ -864,9 +914,9 @@
-->
<div class="line"></div>
<div class="set_body">
<div class="edit">
<div class="edit" @click="edit_hShow">
<div class="img"></div>
<div class="ed">编辑</div>
<div class="ed">编辑11</div>
</div>
<div class="set_content">
<div class="setc_name"><span>项目名称：</span></div>
@@ -1148,6 +1198,245 @@
</a-modal>
</div>
<!-- 取消学员弹窗 -->
<!-- 编辑弹窗 -->
<div>
<a-modal
v-model:visible="edit_hs"
:title="null"
@ok="closeModal"
:footer="null"
:closable="false"
wrapClassName="set_edit"
width="679px"
@cancel="edit_exit"
>
<div
class="modalHeader"
style="
width: 100%;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
"
>
<div class="headerLeft" style="margin-left: 32px">
<span style="width: 15px; height: 15px"
><img src="../../assets/images/taskpage/edit.png"
/></span>
<span
class="headerLeftText"
style="font-size: 16px; margin-left: 10px"
>编辑</span
>
</div>
<div style="cursor: pointer; margin-right: 32px" @click="closeModal">
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close.png"
/>
</div>
</div>
<div class="modalMain">
<div class="projectname">基本信息</div>
<div class="setbody">
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">项目名称：</span>
</div>
<div class="btnbox">
<a-input
v-model:value="inputV1"
style="width: 424px; height: 32px"
placeholder="请输入项目名称"
maxlength="20"
/>
</div>
</div>
<div class="main_item2">
<div class="signbox">
<span style="margin-right: 3px">直播封面：</span>
</div>
<div class="textarea">
<a-upload
v-model:file-list="fileList"
name="avatar"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:before-upload="beforeUpload"
@change="handleChange"
>
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
<div v-else>
<loading-outlined v-if="loading"></loading-outlined>
<plus-outlined v-else></plus-outlined>
<div class="ant-upload-text">Upload</div>
</div>
</a-upload>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">项目时间：</span>
</div>
<div class="btnbox">
<a-range-picker
style="width: 424px"
:placeholder="[' 开始时间', ' 结束时间']"
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">项目经理：</span>
</div>
<div class="btnbox">
<a-select
dropdownClassName="dropdown-style"
style="width: 424px"
placeholder="请选择项目经理"
:options="options1"
allowClear
showSearch
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">资源归属：</span>
</div>
<div class="btnbox">
<a-input
v-model:value="inputV1"
style="width: 424px; height: 32px"
placeholder="自动带出 可修改"
maxlength="20"
/>
</div>
</div>
<div class="main_item2">
<div class="signbox">
<span style="margin-right: 3px">项目说明：</span>
</div>
<div class="textarea">
<a-textarea
v-model:value="textV1"
placeholder="请输入说明"
allow-clear
maxlength="150"
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<span style="margin-right: 3px">同步学习记录：</span>
</div>
<div class="btnbox">
<a-radio-group v-model:value="radioV1">
<a-radio
v-model:checked="checked"
:value="1"
@click="cloradio1"
>同步课程学习记录（如学员在课程库中拥有课程的学习记录，自由免修改课程）</a-radio
>
</a-radio-group>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">项目级别：</span>
</div>
<div class="btnbox">
<a-input
v-model:value="inputV1"
style="width: 424px; height: 32px"
placeholder="集团级/组织级/现地级/部门级"
maxlength="20"
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">培训体系：</span>
</div>
<div class="btnbox">
<a-input
v-model:value="inputV1"
style="width: 424px; height: 32px"
placeholder="集团级/组织级/现地级/部门级"
maxlength="20"
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">是否BOEU实施：</span>
</div>
<div class="btnbox">
<a-radio-group v-model:value="radioV2">
<a-radio
v-model:checked="checked"
:value="1"
@click="cloradio2"
>BOEU实施</a-radio
>
</a-radio-group>
</div>
</div>
</div>
<div class="pubtn">
<a-button class="pubtn1" @click="closeModal">取消</a-button>
<a-button class="pubtn2" @click="closeModal">发布</a-button>
</div>
</div>
</a-modal>
</div>
<!-- 编辑弹窗 -->
</div>
</template>
<script>
@@ -1351,6 +1640,7 @@ export default {
Importvisible: false, //导入学员
Seevisible: false, //查看学员
Changevisible: false, //学员换组
edit_hs: false, //编辑弹窗
pubproject: false,
stugroup: false,
canclestu: false,
@@ -1359,6 +1649,8 @@ export default {
checked2: false,
checkedd: false, //设置按钮1
checkedd2: false, //设置按钮2
radioV1: "",
radioV2: "",
activeKey: "2",
activeKey1: "8",
valueName: "", //排行榜输入姓名
@@ -1894,6 +2186,22 @@ export default {
const changecheck3 = () => {
state.checkedd2 = !state.checkedd2;
};
const edit_hShow = () => {
state.edit_hs = true;
};
const edit_exit = () => {
state.edit_hs = false;
};
const cloradio1 = (value) => {
if (value != "") {
state.radioV1 = "";
}
};
const cloradio2 = (value) => {
if (value != "") {
state.radioV2 = "";
}
};
return {
...toRefs(state),
showModal,
@@ -1917,6 +2225,10 @@ export default {
showSeeStu,
showChangeGroup,
showFaceIn,
edit_hShow,
edit_exit,
cloradio1,
cloradio2,
};
},
};
@@ -2470,7 +2782,6 @@ export default {
background-color: #edf0f5;
}
.content {
//display: flex;
//margin: 0 37px;
.ant-tabs-top > .ant-tabs-nav::before,
.ant-tabs-bottom > .ant-tabs-nav::before,
@@ -2704,10 +3015,15 @@ export default {
}
}
.taskSyllabus {
// flex: 1;
overflow-x: scroll;
.ant-collapse {
border: 0px;
background-color: rgba(255, 255, 255, 0);
min-width: 1040px;
}
.ant-collapse-content > .ant-collapse-content-box {
padding-top: 0px;
padding-bottom: 0px;
@@ -2755,12 +3071,15 @@ export default {
}
.course {
//width: 100%;
flex-shrink: 0;
margin-right: 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 25px 0px;
margin-left: 22px;
margin-right: 24px;
//margin: 0 12px;
border: 1px solid #f2f6fc;
border-top: 0px;
@@ -2777,12 +3096,13 @@ export default {
//position: absolute;
color: #4f5156;
font-size: 16px;
margin-left: 4px;
}
.icontext {
//positipn: absolute;
color: #999ba3;
font-size: 14px;
margin-left: 8px;
margin-left: 12px;
width: 83px;
}
}
@@ -3401,4 +3721,171 @@ export default {
}
}
}
.set_edit {
.ant-modal {
width: 866px !important;
height: 870px !important;
.ant-modal-body {
.modalHeader {
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
padding: 0;
.modalHeader {
background: linear-gradient(
0deg,
rgba(78, 166, 255, 0) 0%,
rgba(78, 166, 255, 0.2) 100%
);
}
.modalMain {
.projectname {
color: rgba(79, 81, 86, 1);
font-size: 14px;
line-height: 36px;
margin-left: 62px;
font-weight: 500;
margin-bottom: 24px;
}
.setbody {
margin-left: 67px;
.main_item {
display: flex;
align-items: center;
margin-bottom: 32px;
.signbox {
width: 130px;
display: flex;
justify-content: end;
align-items: center;
white-space: nowrap;
.sign {
margin-right: 5px;
}
}
.btnbox {
display: flex;
flex: 1;
align-items: center;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
border: 0;
margin-right: 8px;
color: #fff;
}
}
}
.main_item2 {
display: flex;
align-items: flex-start;
margin-bottom: 32px;
.signbox {
width: 130px;
display: flex;
justify-content: end;
align-items: center;
white-space: nowrap;
.sign {
margin-right: 5px;
}
}
.kqszbox {
.qdqtbox {
margin-left: 5px;
cursor: pointer;
}
.qdbtn,
.qtbtn {
width: 75px;
height: 24px;
background: rgba(56, 139, 225, 0.16);
border-radius: 2px;
border: 1px solid #387df7;
display: flex;
align-items: center;
justify-content: center;
.btntext {
color: #387df7;
}
}
.setbox {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
margin-bottom: 24px;
.timerbox {
margin-top: 6px;
margin-right: 32px;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
}
}
.btnbox2 {
display: flex;
flex-direction: column;
justify-content: flex-start;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
border: 0;
margin-right: 16px 8px 32px 0;
color: #fff;
margin-top: 16px;
margin-bottom: 60px;
}
}
}
}
.pubtn {
display: flex;
justify-content: center;
margin-top: 25px;
//margin-bottom: 29px;
.pubtn1 {
width: 100px;
height: 40px;
margin-right: 16px;
margin-bottom: 29px;
border: 1px solid #409eff;
border-radius: 4px;
color: rgba(78, 166, 255, 1);
font-size: 14px;
//line-height: 36px;
align-items: center;
background: rgba(255, 255, 255, 1);
}
.pubtn2 {
width: 100px;
height: 40px;
margin-bottom: 29px;
border: 1px solid #409eff;
border-radius: 4px;
color: #ffffff;
font-size: 14px;
align-items: center;
//line-height: 36px;
background: #409eff;
}
}
}
}
}
}
</style>