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

feat:调研页面表格,创建调研和管理页面

Browse Source
This commit is contained in:
岳佳鑫
2022-10-10 18:18:11 +08:00
parent 27b783c10e
commit e843bef08f
8 changed files with 310 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
src/views/research/ManagePage.vue Normal file
View File

@@ -0,0 +1,256 @@
<!-- 调研管理-管理页面 -->
<template>
<div class="managepage">
<div class="up">
<div class="header">
<div style="width: 100%">
<div class="export">
<img src="../../assets/images/research/export.png"/>
<span style="color: #4EA6FF;font-size: 14px;margin-left:3px">导出信息</span>
</div>
<div class="goback"><span class="return"></span><router-link class="returntext" to="/researchmanage">返回</router-link></div>
</div>
<div class="text">路径管理</div>
</div>
<div class="message">
<div class="title">基本信息</div>
<div class="messagebox">
<div style="width: 186px;margin-right: 126px;float: left">
<span class="name">调研名称:</span>
<span class="descript">产品经理问卷调查</span>
</div>
<div style="width: 103px;margin-right: 126px;float:left">
<span class="name">创建人:</span>
<span class="descript">管理员</span>
</div>
<div style="width: 88px;margin-right: 126px;float:left">
<span class="name">状态:</span>
<span class="descript">已发布</span>
</div>
<div style="width: 192px;margin-right: 126px;float:left">
<span class="name">创建时间:</span>
<span class="descript">2022-07-22 9:30</span>
</div>
<div style="width: 192px;margin-right: 126px;float:left">
<span class="name">创建时间:</span>
<span class="descript">2022-07-22 9:30</span>
</div>
</div>
</div>
</div>
<div class="split"></div>
<div class="up down">
<div class="header">
<div class="text">学员情况</div>
</div>
<!-- 表格 -->
<div class="tableBox">
<a-table
style="border: 1px solid #f2f6fe"
:columns="columns"
:data-source="dataSource"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ x: 1500, y: 800 }"
@expand="expandTable"
:pagination="false"
/>
</div>
<!-- 表格 -->
</div>
</div>
</template>
<script>
export default {
name: "ManagePage",
setup() {
return {
dataSource: [
{
key: '1',
name: '张三',
department: '产品部',
post:'产品经理',
project:'产品经理进阶-腾飞班1',
learning:'产品经理学习路径',
submit:'2022-07-22 9:30',
},
{
key: '2',
name: '李四',
department: '产品部',
post:'产品经理',
project:'产品经理进阶-腾飞班1',
learning:'高级产品经理学习路径',
submit:'2022-07-22 9:30',
},
{
key: '3',
name: '王五',
department: '产品部',
post:'产品经理',
project:'产品经理进阶-腾飞班1',
learning:'-',
submit:'2022-07-22 9:30',
},
{
key: '4',
name: '赵六',
department: '产品部',
post:'产品经理',
project:'产品经理进阶-腾飞班1',
learning:'HR学习路径',
submit:'2022-07-22 9:30',
},
],
columns: [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '部门',
dataIndex: 'department',
key: 'department',
},
{
title: '岗位',
dataIndex: 'post',
key: 'post',
},
{
title: '项目',
dataIndex: 'project',
key: 'project',
},
{
title: '学习路径',
dataIndex: 'learning',
key: 'learning',
},
{
title: '提交时间',
dataIndex: 'submit',
key: 'submit',
},
],
};
},
};
</script>
<style lang="scss" >
.managepage {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.up {
width: 100%;
display: flex;
flex-direction: column;
.header {
width: 100%;
display: flex;
flex-direction: column;
border-bottom: 1px solid #F2F6FC;
.text {
font-size: 16px;
color: #363636;
margin-top: 23px;
margin-left: 38px;
margin-bottom: 10px;
}
.export {
float: left;
width: 130px;
height: 40px;
border: 1px solid #4EA6FF;
border-radius: 8px;
margin-top: 29px;
margin-left: 38px;
text-align: center;
padding-top: 7px;
}
.goback {
float: right;
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;
}
}
}
.message {
width: 100%;
display: flex;
flex-direction: column;
.title {
color: #4F5156;
font-size: 14px;
margin-left: 38px;
margin-top: 20px;
font-weight: 500;
}
.messagebox {
width: 100%;
//display: flex;
margin-top: 20px;
margin-left: 38px;
margin-bottom: 20px;
.name {
color: #999BA3;
font-size: 14px;
}
.descript {
color: #4F5156;
font-size:14px;
}
}
}
}
.split {
width: 100%;
height: 20px;
background-color: #edf0f5;
}
.down {
width: 100%;
display: flex;
flex-direction: column;
.tableBox {
margin: 20px 38px 30px ;
th.ant-table-cell {
background-color:#EFF4FC !important;
text-align: center;
color: #999BA3;
}
td.ant-table-cell {
text-align: center;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
}
}
}
</style>