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

feat:修改创建任务页面

Browse Source
This commit is contained in:
岳佳鑫
2022-10-13 11:16:14 +08:00
parent 7980911be1
commit 69fe65af93
3 changed files with 205 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/BreadCrumb.vue
View File

@@ -103,6 +103,23 @@ export default {
},
];
}
if (n === "/taskadd" || n === "/TaskAdd") {
state.list = [
{
name: "项目",
href: "",
},
{
name: "基础信息",
},
{
name: "任务",
},
{
name: "添加任务",
}
];
}
if (n === "/templatelibrary" || n === "/TemplateLibrary") {
state.list = [
{

256
src/views/projectcenter/TaskAdd.vue
View File

@@ -3,11 +3,11 @@
<div class="left clearfix">
<div class="leftmain">
<div class="tit">阶段<img src="../../assets/images/projectadd/right.png" style="margin-left: 10px"/></div>
<div class="btn btn3">
<div class="btn btn3" style="margin-left: 19px">
<div class="search"></div>
<div class="btnText">添加阶段</div>
</div>
<div class="maincon">
<div class="maincon" style="background-color: #fff">
<div class="item" v-for="item in level" :key="item.id">
<div class="itemle">
<div class="tit">{{ item.tit }}</div>
@@ -32,14 +32,14 @@
<img class="img" src="../../assets/images/projectadd/picture.png" />
</div>
<div class="imgfor">
<div class="forz" style="font-weight: 500">管理者进阶-腾飞班</div>
<div class="forz" style="font-weight: 700">管理者进阶-腾飞班</div>
</div>
</div>
<div class="rightt">
<div class="select">
<a-select
v-model:value="projectName"
style="width: 270px"
style="width: 200px"
placeholder="自由学习模式"
:options="projectNameList"
@change="selectProjectName"
@@ -51,23 +51,16 @@
<img class="img2" src="../../assets/images/projectadd/keep.png" />
<div class="pub">保存</div>
<div class="line"></div>
<img class="img2" src="../../assets/images/leveladd/back.png" />
<router-link to="/taskpage">
<div class="return">返回</div></router-link
>
<div style="display: flex">
<img class="img2" src="../../assets/images/leveladd/back.png" />
<div class="return">返回</div>
</div>
</router-link>
</div>
</div>
</div>
<div class="mid">
<!-- <div class="item" v-for="(item, index) in mid" :key="item.id">
<div class="itcon">
<div class="img">
<img :src="item.img" />
</div>
<div class="text">{{ item.title }}</div>
</div>
<div :class="[index === mid.length - 1 ? 'no' : 'lin']"></div>
</div> -->
<div class="item">
<div class="itcon">
<div class="img">
@@ -185,7 +178,7 @@
<img class="editimg" src="../../assets/images/projectadd/delete.png"/>
<span class="editext">批量删除</span>
</div>
</div>
</div>
<div class="talk">
<img class="im" src="../../assets/images/leveladd/gan.png" />
<div class="xu">
@@ -194,7 +187,7 @@
<span class="th">3</span>
<div style="width: 5px; display: inline-block"></div>
<span class="yi">项</span>
<span class="zon">人物总数：</span>
<span class="zon">任务总数：</span>
<span class="yi">5</span>
<span class="yi">条</span>
</div>
@@ -206,13 +199,15 @@
:data-source="tableData"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ x: 1500, y: 300 }"
@expand="expandTable"
:pagination="false"
:row-selection="{
columnWidth: 30,
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
/>
<!-- :pagination= showSizeChanger: true, showQuickJumper: true,
hideOnSinglePage: true, pageSizeOptions: [], pageSize: pageSize, current:
currentPage, total: tableDataTotal, -->
<div class="pa">
<a-pagination
showSizeChanger="true"
@@ -233,7 +228,7 @@
class="drawerStyle"
title="关联项目"
placement="right"
width="50%"
width="80%"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
@@ -268,7 +263,7 @@
</template>
<script>
import { reactive, toRefs } from "vue";
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
const drawercolumns = [
{
title: "项目名称",
@@ -336,16 +331,11 @@ export default {
projectNameList2: [
{
id: 1,
value: "批量操作",
label: "批量操作",
},
{
id: 2,
value: "删除任务",
label: "删除任务",
},
{
id: 3,
id: 2,
value: "移动任务到关卡",
label: "移动任务到关卡",
},
@@ -359,7 +349,22 @@ export default {
{
id: "2",
tit: "阶段2",
name: "腾飞班1基础",
name: "腾飞班基础",
},
{
id: "2",
tit: "阶段2",
name: "中级产品经理",
},
{
id: "2",
tit: "阶段2",
name: "中级产品经理",
},
{
id: "2",
tit: "阶段2",
name: "中级产品经理",
},
],
tableData: [
@@ -385,6 +390,17 @@ export default {
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: "作业",
@@ -413,7 +429,29 @@ export default {
// state: "草稿",
creater: "腾飞班1案例",
// pubtime: "2022-07-20 14:00:03",
cretime: "-",
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,
@@ -518,6 +556,7 @@ export default {
tableDataTotal: 100,
pageSize: 10,
visible: false,
selectedRowKeys: [],
});
const selectProjectName = (value, index) => {
console.log("value", value, index);
@@ -538,18 +577,29 @@ export default {
dataIndex: "state",
// width: "30%",
key: "state",
width: 90,
align: "center",
className: "h",
width: 60,
align: "left",
className: "classify",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: (text) => {
console.log(text.record.checked1);
// console.log(text.record.checked1);
return (
<div class="racona">
<div class="img"></div>
<a-checkbox class="ch" v-model:checked={text.record.checkedd}>
<div
class="img"
style={{ cursor: "pointer" }}
onClick={() => {
console.log("点击了");
}}
></div>
<span> {text.record.lei}</span>
{/**
<div class="img"></div>
<a-checkbox class="ch" checked={text.record.checkedd}>
{text.record.lei}
</a-checkbox>
*/}
</div>
);
},
@@ -567,20 +617,24 @@ export default {
title: "必修/选修",
dataIndex: "pubtime",
key: "pubtime",
width: 200,
// width: 100,
align: "center",
className: "h",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: (text) => {
console.log(text.record.checked1);
// console.log(text.record.checked1);
return (
<div class="opat">
<div class="opacationt clearfix">
<a-switch
style="margin-left:-50px;margin-top:3px"
v-model:checked={text.record.checked1}
checked={text.record.checked1}
size="small"
active-color="red"
onClick={() => {
console.log("点击了");
text.record.checked1 = !text.record.checked1;
}}
/>
<div class="showt clearfix">
<div
@@ -602,7 +656,7 @@ export default {
title: "时长",
dataIndex: "cretime",
key: "cretime",
width: 100,
// width: 100,
align: "center",
className: "h",
},
@@ -611,7 +665,7 @@ export default {
className: "h",
dataIndex: "opacation",
key: "opacation",
width: 100,
// width: 100,
align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: () => {
@@ -631,6 +685,30 @@ export default {
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";
// };
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,
@@ -639,12 +717,13 @@ export default {
showDrawer,
afterVisibleChange,
drawercolumns,
onSelectChange,
};
},
};
</script>
<style lang="scss" >
<style lang="scss">
.clearfix:after,
.clearfix:before {
content: " ";
@@ -654,7 +733,7 @@ export default {
.drawerStyle {
.ant-drawer-content-wrapper {
max-width: 1000px;
// max-width: 1000px;
.ant-drawer-header {
display: none !important;
}
@@ -730,22 +809,28 @@ export default {
}
.allCon {
width: 100%;
height: 100%;
background-color: #f1f4f8;
display: flex;
min-width: 933px;
// min-width: 1200px;
// overflow-x: hidden;
// min-width: 1400px;
// overflow: scroll;
background-color: rgba(245, 247, 250, 1);
.left {
margin-right: 20px;
width: 208px;
flex-shrink: 0;
height: 100%;
// height: 100%;
// flex: 1;
// height: 100%;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
display: flex;
justify-content: center;
.leftmain {
width: 86%;
// width: 86%;
margin-top: 20px;
.tit {
margin-left: 20px;
font-size: 18px;
color: #363636;
}
@@ -777,6 +862,7 @@ export default {
}
.btn3 {
width: 171px;
margin-right: 0px;
.search {
width: 17px;
@@ -787,10 +873,12 @@ export default {
}
.maincon {
margin-top: 17px;
width: 100%;
// background-color: #bfa;
width: 208px;
display: flex;
flex-direction: column;
align-items: center; // background-color: #bfa;
.item {
width: 100%;
width: 171px;
height: 83px;
display: flex;
background: rgba(255, 182, 78, 0.1);
@@ -834,8 +922,6 @@ export default {
}
.right {
flex: 1;
height: 100%;
width: 100%;
// background-color: #fff;
display: flex;
flex-direction: column;
@@ -843,7 +929,7 @@ export default {
width: 100%;
// min-width: 500px;
// height: 130px;
// flex: 1;
background-color: #fff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
display: flex;
@@ -901,24 +987,35 @@ export default {
height: 60px;
width: 1px;
background-color: #e8effa;
margin-right: 28px;
margin-right: 18px;
}
.img2 {
width: 42px;
height: 42px;
margin-right: 22px;
margin-right: 18px;
}
.pub {
color: #57C887;
font-size: 14px;
margin-top: 5px;
margin-right: 30px;
cursor: pointer;
white-space: nowrap;
}
@media screen and (max-width: 1050px) {
.pub {
margin-right: 10px;
}
.line {
margin-right: 10px;
}
}
.return {
color: #4ea6ff;
font-size: 14px;
margin-top: 5px;
margin-top: 13px;
margin-right: 20px;
white-space: nowrap;
}
.role {
@@ -973,16 +1070,17 @@ export default {
.mid {
width: 100%;
height: 130px;
// height: 130px;
margin-top: 20px;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
display: flex;
align-items: center;
flex-wrap: wrap;
.item {
height: 100%;
width: 7.7%;
height: 115px;
// width: 7.7%;
display: flex;
align-items: center;
.itcon {
@@ -992,6 +1090,8 @@ export default {
justify-content: center;
height: 100%;
width: 100%;
margin-left: 38px;
margin-right: 38px;
.img {
cursor: pointer;
}
@@ -999,6 +1099,7 @@ export default {
font-size: 16px;
color: #363636;
margin-top: 5px;
white-space: nowrap;
}
}
.lin {
@@ -1021,7 +1122,7 @@ export default {
justify-content: center;
.boomcen {
width: 95%;
height: 100%;
// height: 100%;
// background-color: #bfa;
.onerow {
width: 100%;
@@ -1108,7 +1209,22 @@ export default {
}
}
.tableBox {
// margin: 20px 38px 30px;
margin-bottom: 80px;
.classify {
margin-left: 10px !important;
padding-left: 9px !important;
}
.ant-checkbox-wrapper {
align-items: center;
margin-top: -2px;
}
.ant-table-selection-column {
padding: 0px !important;
padding-left: 60px !important;
}
.ant-table-thead > tr > th {
background-color: rgba(239, 244, 252, 1);
}
th.h {
background-color: #eff4fc !important;
}
@@ -1143,10 +1259,6 @@ export default {
// background: #f6f9fd;
// }
// }
.draw {
.drawerbox {
}
}
}
.opat {
@@ -1191,14 +1303,16 @@ export default {
// background-color: #bfa;
display: flex;
align-items: center;
justify-content: center;
// justify-content: center;
height: 100%;
.img {
margin-left: -40px;
margin-top: -2px;
// margin-left: -40px;
// margin-top: -2px;
width: 17px;
height: 14px;
background-image: url("../../assets/images/leveladd/z1.png");
position: absolute;
left: -40px;
}
.ch {
margin-left: 10px;

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

@@ -59,10 +59,10 @@
<div class="onerow">
<div class="taskmain">任务大纲</div>
<button class="btn">批量面授报名</button>
<div class="edit">
<router-link to="/taskadd" class="edit">
<img class="editimg" src="../../assets/images/projectadd/edit.png"/>
<span class="editext">编辑</span>
</div>
</router-link>
</div>
<div class="stage">
<span class="stageimg"><img src="../../assets/images/projectadd/open.png"/></span>