完成在途项目、已结项项目列表，待与后端对接
parent
fb220ba19e
commit
354a4213b4
|
|
@ -4,6 +4,7 @@ import {createWebHistory} from "vue-router/dist/vue-router.esm-browser"
|
|||
import Login from "@/views/Login.vue"
|
||||
import Project from "@/views/Project.vue";
|
||||
import OngoingProject from "../views/OngoingProject";
|
||||
import ClosedProject from "../views/ClosedProject";
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
|
|
@ -14,6 +15,10 @@ const routes = [
|
|||
path: '',
|
||||
component: OngoingProject,
|
||||
},
|
||||
{
|
||||
path: '/ClosedProject',
|
||||
component: ClosedProject,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<div style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: stretch">
|
||||
|
||||
<p style="margin-left: 40px;font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;">已结项项目</p>
|
||||
|
||||
<div style="flex: 1; margin: 30px 30px 10px 30px; background-color: white; border-radius: 10px;padding: 20px;
|
||||
display: flex;flex-direction: column;justify-content: space-between">
|
||||
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
class="projectTable"
|
||||
:height="tableHeight"
|
||||
:data="tableData">
|
||||
<el-table-column prop="name" label="项目名称" min-width="15%"/>
|
||||
<el-table-column prop="price" label="合同额（万）" min-width="10%"/>
|
||||
<el-table-column prop="important" label="重要程度" min-width="10%"/>
|
||||
<el-table-column prop="classification" label="项目分类" min-width="10%"/>
|
||||
<el-table-column prop="type" label="项目类型" min-width="10%"/>
|
||||
<el-table-column label="项目进度" min-width="35%">
|
||||
<template #default="scope">
|
||||
<el-progress :text-inside="true" :stroke-width="18" :status="scope.row.schedule === 100 ? 'success' : ''"
|
||||
:percentage="scope.row.schedule"></el-progress>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="closeDate" label="结项日期" min-width="10%" align="right"/>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
v-model:currentPage ="currentPage"
|
||||
:page-sizes="[5, 10, 15, 20]"
|
||||
:page-size="perPage"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="count"
|
||||
style="float: right;margin-top: 20px;">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
// table元素
|
||||
import {onMounted, ref} from "vue";
|
||||
|
||||
const tableRef = ref(null);
|
||||
// table高度
|
||||
const tableHeight = ref();
|
||||
|
||||
onMounted(() => {
|
||||
// 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离85
|
||||
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
|
||||
// 监听浏览器高度变化
|
||||
window.onresize = () => {
|
||||
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
|
||||
};
|
||||
});
|
||||
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
name: "OngoingProject",
|
||||
data() {
|
||||
return {
|
||||
|
||||
count: 100,
|
||||
currentPage: 1,
|
||||
perPage: 10,
|
||||
|
||||
tableData: [{
|
||||
name: 'OTC研发项目',
|
||||
price: 100,
|
||||
important: '非A类',
|
||||
classification: '外包项目',
|
||||
type: '工作量结算类',
|
||||
schedule: 0,
|
||||
closeDate: '2022-6-30'
|
||||
},
|
||||
{
|
||||
name: 'OTC研发项目',
|
||||
price: 100,
|
||||
important: '非A类',
|
||||
classification: '研发项目',
|
||||
type: '纯研发类',
|
||||
schedule: 50,
|
||||
closeDate: '2022-6-30'
|
||||
|
||||
},
|
||||
{
|
||||
name: 'OTC研发项目',
|
||||
price: 100,
|
||||
important: '非A类',
|
||||
classification: '研发项目',
|
||||
type: '纯研发类',
|
||||
schedule: 100,
|
||||
closeDate: '2022-6-30'
|
||||
},
|
||||
{
|
||||
name: 'OTC研发项目',
|
||||
price: 100,
|
||||
important: '非A类',
|
||||
classification: '研发项目',
|
||||
type: '纯研发类',
|
||||
schedule: 100,
|
||||
closeDate: '2022-6-30'
|
||||
},
|
||||
|
||||
{
|
||||
name: '教育电商项目',
|
||||
price: 100,
|
||||
important: '非A类',
|
||||
classification: '研发项目',
|
||||
type: '纯研发类',
|
||||
schedule: 100,
|
||||
closeDate: '2022-6-30'
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 选择一页显示多少条数据
|
||||
handleSizeChange(val) {
|
||||
|
||||
},
|
||||
// 选择当前的是第几页
|
||||
handleCurrentChange(val) {
|
||||
|
||||
},
|
||||
onCloseProject(row) {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.projectTable {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<el-aside width="260px"
|
||||
style="display: flex;flex-direction: column;align-items: stretch;overflow: unset">
|
||||
<el-menu
|
||||
router
|
||||
style="height: 100%"
|
||||
default-active="1">
|
||||
<div
|
||||
|
|
@ -10,10 +11,10 @@
|
|||
<svg-icon style="width: 52px;height: 52px;margin: 10px" icon-class="logo"></svg-icon>
|
||||
<p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目<br/>管理系统</p>
|
||||
</div>
|
||||
<el-menu-item index="1">
|
||||
<el-menu-item index="1" route="/">
|
||||
<span>在途项目</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2">
|
||||
<el-menu-item index="2" route="/ClosedProject">
|
||||
<span>已结项项目</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,41 @@
|
|||
<template>
|
||||
<div style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: stretch">
|
||||
<div style="flex: 1; margin: 30px 30px 30px 30px; background-color: white; border-radius: 10px;padding: 20px;
|
||||
display: flex;flex-direction: column">
|
||||
|
||||
<div style="margin: 0 40px 0 40px;
|
||||
display: flex;flex-direction: row;justify-content: space-between">
|
||||
<p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;">在途项目</p>
|
||||
<el-button type="primary" >新增项目</el-button>
|
||||
</div>
|
||||
<div style="flex: 1; margin: 30px 30px 10px 30px; background-color: white; border-radius: 10px;padding: 20px;
|
||||
display: flex;flex-direction: column;justify-content: space-between">
|
||||
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
class="projectTable"
|
||||
:height="tableHeight"
|
||||
:data="tableData">
|
||||
<el-table-column prop="name" label="项目名称" />
|
||||
<el-table-column prop="price" label="合同额（万）" />
|
||||
<el-table-column prop="important" label="重要程度"/>
|
||||
<el-table-column prop="classification" label="项目分类"/>
|
||||
<el-table-column prop="type" label="项目类型" />
|
||||
<el-table-column label="项目进度" >
|
||||
<el-table-column prop="name" label="项目名称" min-width="15%"/>
|
||||
<el-table-column prop="price" label="合同额（万）" min-width="10%"/>
|
||||
<el-table-column prop="important" label="重要程度" min-width="10%"/>
|
||||
<el-table-column prop="classification" label="项目分类" min-width="10%"/>
|
||||
<el-table-column prop="type" label="项目类型" min-width="10%"/>
|
||||
<el-table-column label="项目进度" min-width="35%">
|
||||
<template #default="scope">
|
||||
<el-progress :text-inside="true" :stroke-width="18" :status="scope.row.schedule === 100 ? 'success' : ''"
|
||||
:percentage="scope.row.schedule"></el-progress>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column>
|
||||
<el-table-column min-width="10%" align="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" @click="onCloseProject(scope.row)">结项</el-button>
|
||||
<el-button type="primary" plain @click="onCloseProject(scope.row)">结项</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="currentPage"
|
||||
v-model:currentPage ="currentPage"
|
||||
:page-sizes="[5, 10, 15, 20]"
|
||||
:page-size="perPage"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
|
|
@ -38,13 +45,29 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
// table元素
|
||||
import {onMounted, ref} from "vue";
|
||||
|
||||
const tableRef = ref(null);
|
||||
// table高度
|
||||
const tableHeight = ref();
|
||||
|
||||
onMounted(() => {
|
||||
// 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离85
|
||||
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
|
||||
// 监听浏览器高度变化
|
||||
window.onresize = () => {
|
||||
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
|
||||
};
|
||||
});
|
||||
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
name: "OngoingProject",
|
||||
data() {
|
||||
return {
|
||||
|
||||
count: 100,
|
||||
currentPage: 1,
|
||||
perPage: 10,
|
||||
|
|
@ -90,8 +113,54 @@ export default {
|
|||
type: '纯研发类',
|
||||
schedule: 100
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
name: '教育电商项目',
|
||||
price: 100,
|
||||
important: '非A类',
|
||||
classification: '研发项目',
|
||||
type: '纯研发类',
|
||||
schedule: 100
|
||||
},
|
||||
{
|
||||
name: '教育电商项目',
|
||||
price: 100,
|
||||
important: '非A类',
|
||||
classification: '研发项目',
|
||||
type: '纯研发类',
|
||||
schedule: 100
|
||||
},
|
||||
{
|
||||
name: '教育电商项目',
|
||||
price: 100,
|
||||
important: '非A类',
|
||||
classification: '研发项目',
|
||||
type: '纯研发类',
|
||||
schedule: 100
|
||||
},
|
||||
{
|
||||
name: '教育电商项目',
|
||||
price: 100,
|
||||
important: '非A类',
|
||||
classification: '研发项目',
|
||||
type: '纯研发类',
|
||||
schedule: 100
|
||||
},
|
||||
{
|
||||
name: '教育电商项目',
|
||||
price: 100,
|
||||
important: '非A类',
|
||||
classification: '研发项目',
|
||||
type: '纯研发类',
|
||||
schedule: 100
|
||||
},
|
||||
{
|
||||
name: '教育电商项目',
|
||||
price: 100,
|
||||
important: '非A类',
|
||||
classification: '研发项目',
|
||||
type: '纯研发类',
|
||||
schedule: 100
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue