修改HOME
parent
372774171c
commit
549502105f
|
@ -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>
|
Loading…
Reference in New Issue