修改HOME
parent
372774171c
commit
549502105f
|
@ -2,10 +2,45 @@
|
||||||
<div class="home">
|
<div class="home">
|
||||||
<div>项目管理</div>
|
<div>项目管理</div>
|
||||||
<router-view></router-view>
|
<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>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
|
@ -16,26 +51,150 @@ import request from "@/utils/request";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
|
props: ['tableData'],
|
||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
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() {
|
mounted() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 选择一页显示多少条数据
|
||||||
|
handleSizeChange(val){
|
||||||
|
|
||||||
|
},
|
||||||
|
// 选择当前的是第几页
|
||||||
|
handleCurrentChange(val){
|
||||||
|
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.home {
|
.home {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-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>
|
</style>
|
Loading…
Reference in New Issue