rmdjz
/
ProjectManagement_frontend
10
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改HOME

main
A 2022-06-29 14:00:09 +08:00
parent 372774171c
commit 549502105f
1 changed files with 167 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
src/views/Home.vue
View File

@ -2,10 +2,45 @@
<div class="home">
<div>项目管理</div>
<router-view></router-view>
<div id="" class="tableBar">
<table cellspacing="" cellpadding="">
<tr>
<th>项目名称</th>
<th>合同额（万）</th>
<th>重要程度</th>
<th>项目分类</th>
<th>项目类型</th>
<th>项目进度</th>
<th>操作</th>
</tr>
<tr v-for="item in tableData.list">
<td style="color: #409EFF;">{{item.name}}</td>
<td>{{item.price + '万'}}</td>
<td>{{item.important}}</td>
<td>{{item.classification}}</td>
<td>{{item.type}}</td>
<td>
<el-progress :text-inside="true" :stroke-width="18" :status="item.schedule === 100 ? 'success' : ''"
:percentage="item.schedule"></el-progress>
</td>
<td><button type="button">结项</button></td>
</tr>
</table>
<!-- 分页 -->
<el-pagination
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="tableData.perPage"
layout="total, sizes, prev, pager, next, jumper"
:total="12"
style="float: right;margin-top: 20px;">
</el-pagination>
</div>
</div>
</template>
<script setup>
</script>
<script>
@ -16,26 +51,150 @@ import request from "@/utils/request";
export default {
name: 'Home',
props: ['tableData'],
components: {
},
data() {
return {
tableData: {
count: 100,
currentPage: 1,
perPage: 10,
list: [{
name: 'OTC研发项目',
price: 100,
important: '非A类',
classification: '外包项目',
type: '工作量结算类',
schedule: 0
},
{
name: 'OTC研发项目',
price: 100,
important: '非A类',
classification: '研发项目',
type: '纯研发类',
schedule: 50
},
{
name: 'OTC研发项目',
price: 100,
important: '非A类',
classification: '研发项目',
type: '纯研发类',
schedule: 100
},
{
name: 'OTC研发项目',
price: 100,
important: '非A类',
classification: '研发项目',
type: '纯研发类',
schedule: 100
},
{
name: 'OTC研发项目',
price: 100,
important: '非A类',
classification: '研发项目',
type: '纯研发类',
schedule: 100
},
{
name: '教育电商项目',
price: 100,
important: '非A类',
classification: '研发项目',
type: '纯研发类',
schedule: 100
},
{
name: 'OTC研发项目',
price: 100,
important: '非A类',
classification: '研发项目',
type: '纯研发类',
schedule: 100
},
{
name: 'OTC研发项目',
price: 100,
important: '非A类',
classification: '研发项目',
type: '纯研发类',
schedule: 100
},
{
name: 'OTC研发项目',
price: 100,
important: '非A类',
classification: '研发项目',
type: '纯研发类',
schedule: 100
},
{
name: 'OTC研发项目',
price: 100,
important: '非A类',
classification: '研发项目',
type: '纯研发类',
schedule: 100
}
]
}
}
},
mounted() {
},
methods: {
// 选择一页显示多少条数据
handleSizeChange(val){
},
// 选择当前的是第几页
handleCurrentChange(val){
},
}
}
</script>
<style>
.home {
height: 100%;
max-height: 100%;
}
.home {
height: 100%;
max-height: 100%;
}
.tableBar {
width: 1000px;
}
.tableBar table {
width: 100%;
border-bottom: 1px solid red;
border-collapse: collapse;
}
.tableBar table tr th {
font-weight: bolder;
}
.tableBar table tr {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ddd;
text-align: center;
}
.tableBar table button {
color: #FFF;
background-color: #409EFF;
border-color: #409EFF;
padding: 5px 20px;
border: none;
border-radius: 5px;
font-size: 14px;
}
</style>