初步搭建主页
parent
8db1162613
commit
71d670b862
|
|
@ -3,7 +3,7 @@ import Home from '@/views/Home.vue'
|
|||
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";
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
|
|
@ -12,7 +12,7 @@ const routes = [
|
|||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: Project,
|
||||
component: OngoingProject,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
//const baseUrl = "http://localhost:8090/"
|
||||
const baseUrl = "http://36.5.61.1:8081/"
|
||||
const baseUrl = "http://192.168.31.194:8081/"
|
||||
//const baseUrl = "http://36.5.61.1:8081/"
|
||||
export default baseUrl;
|
||||
|
|
@ -20,27 +20,15 @@ request.interceptors.request.use(
|
|||
request.interceptors.response.use(
|
||||
function (response) {
|
||||
// 2xx 范围内的状态码都会触发该函数。
|
||||
console.log("success")
|
||||
if(localStorage.getItem('expire'))
|
||||
{
|
||||
let time = new Date().getTime() - Number(localStorage.getItem('expire'))
|
||||
if(time > 30*60*1000)
|
||||
{
|
||||
request({
|
||||
url: '/api/refreshToken',
|
||||
method: 'get',
|
||||
}).then(response => {
|
||||
console.log(response.data)
|
||||
localStorage.setItem('token', response.data)
|
||||
localStorage.setItem('expire', new Date().getTime().toString())
|
||||
})
|
||||
}
|
||||
}
|
||||
console.log("SUCCESS")
|
||||
|
||||
return response
|
||||
}, function (error) {
|
||||
console.log( error.response.status)
|
||||
console.log("ERROR")
|
||||
console.log(error.response)
|
||||
//if(error.response.status===403)
|
||||
//router.push({path: '/login'})
|
||||
|
||||
return Promise.reject(error)
|
||||
});
|
||||
export default request
|
||||
|
|
|
|||
|
|
@ -1,85 +1,55 @@
|
|||
<template>
|
||||
<div class="home" style="display: flex; flex-direction: row; background-color: #F2F3F5 ">
|
||||
<el-menu style="width: 260px;"
|
||||
default-active="1">
|
||||
<div
|
||||
style="width: 100%;height: 60px;margin: 30px 0 20px 20px; display: flex; flex-direction: row; align-items: center">
|
||||
<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">
|
||||
<span>在途项目</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2">
|
||||
<span>已结项项目</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
<div style="flex: 1; display: flex; flex-direction: column;">
|
||||
<div style="height: 60px; margin: 30px 30px 30px 30px; background-color: white; border-radius: 10px;
|
||||
display: flex; flex-direction: row; align-items: center;justify-content: space-between">
|
||||
<div @click="logout" class="div-quitButton">
|
||||
<svg-icon style="width: 17px;height: 19px;" icon-class="quit" class-name="icon-quit"></svg-icon>
|
||||
<el-container style="width: 100%;height: 100%">
|
||||
<el-aside width="260px"
|
||||
style="display: flex;flex-direction: column;align-items: stretch;overflow: unset">
|
||||
<el-menu
|
||||
style="height: 100%"
|
||||
default-active="1">
|
||||
<div
|
||||
style="width: 100%;height: 60px;margin: 30px 0 20px 20px; display: flex; flex-direction: row; align-items: center">
|
||||
<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>
|
||||
<div style="margin: 0 30px 0 30px; ;
|
||||
display: flex; flex-direction: row-reverse; align-items: center">
|
||||
<div style="width: 42px;height: 42px; background-color: #409EFF; border-radius: 21px;
|
||||
display: flex; justify-content: center;align-items: center;">
|
||||
<span style="color: white">{{ staffName[0] }}</span>
|
||||
<el-menu-item index="1">
|
||||
<span>在途项目</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2">
|
||||
<span>已结项项目</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-container style="background-color: #F2F3F5">
|
||||
<el-header height="100px">
|
||||
<div style="height: 60px; margin: 30px 30px 30px 30px; background-color: white; border-radius: 10px;
|
||||
display: flex; flex-direction: row; align-items: center;justify-content: space-between">
|
||||
<div @click="logout" class="div-quitButton">
|
||||
<svg-icon style="width: 17px;height: 19px;" icon-class="quit" class-name="icon-quit"></svg-icon>
|
||||
</div>
|
||||
<div style="height: 100%; margin-right: 10px;
|
||||
<div style="margin: 0 30px 0 30px; ;
|
||||
display: flex; flex-direction: row-reverse; align-items: center">
|
||||
<div style="width: 42px;height: 42px; background-color: #409EFF; border-radius: 21px;
|
||||
display: flex; justify-content: center;align-items: center;">
|
||||
<span style="color: white">{{ staffFullname[0] }}</span>
|
||||
</div>
|
||||
<div style="height: 100%; margin-right: 10px;
|
||||
display: flex; flex-direction: column;justify-content: center;align-items: flex-end;">
|
||||
<span
|
||||
style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 14px;font-weight: bold; ">
|
||||
{{staffName }}</span>
|
||||
<span style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 12px;">{{ staffUsername }}</span>
|
||||
{{ staffFullname }}</span>
|
||||
<span style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 12px;">{{
|
||||
staffUsername
|
||||
}}</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main style="overflow: unset">
|
||||
<router-view></router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<div style="width: 100%;flex: 1;">
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -96,99 +66,13 @@ export default {
|
|||
components: {},
|
||||
data() {
|
||||
return {
|
||||
staffName: '刘金龙',
|
||||
staffUsername: 'liujinlong',
|
||||
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
staffFullname: '',
|
||||
staffUsername: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.staffFullname = localStorage.getItem('staffFullname');
|
||||
this.staffUsername = localStorage.getItem('staffUsername');
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
|
@ -203,19 +87,12 @@ export default {
|
|||
})
|
||||
|
||||
},
|
||||
// 选择一页显示多少条数据
|
||||
handleSizeChange(val) {
|
||||
|
||||
},
|
||||
// 选择当前的是第几页
|
||||
handleCurrentChange(val) {
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
<style scoped>
|
||||
|
||||
.home {
|
||||
height: 100%;
|
||||
|
|
@ -224,39 +101,6 @@ export default {
|
|||
max-width: 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;
|
||||
}
|
||||
|
||||
|
||||
.icon-quit {
|
||||
color: #606266;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,20 +51,21 @@ const onSubmit = () => {
|
|||
staffUsername: loginForm.username.trim(),
|
||||
staffPassword: md5(loginForm.password.trim())
|
||||
}
|
||||
|
||||
axios.post(baseUrl + 'staff/login', param).then(function (response) {
|
||||
if (response.data === 'error') {
|
||||
if (response.data.code !== 200) {
|
||||
console.log(response.data)
|
||||
showAlert.value = true
|
||||
} else {
|
||||
console.log(response.data)
|
||||
localStorage.setItem('token', response.data.data.Token)
|
||||
localStorage.setItem('expire', new Date().getTime().toString())
|
||||
localStorage.setItem('staffFullname', response.data.data.staffFullname)
|
||||
localStorage.setItem('staffUsername', response.data.data.staffUsername)
|
||||
router.push({path: '/'})
|
||||
}
|
||||
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
console.log('error:')
|
||||
console.log(error.response);
|
||||
showAlert.value = true
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -74,7 +75,7 @@ export default {
|
|||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
<style scoped>
|
||||
div.background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,121 @@
|
|||
<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">
|
||||
|
||||
<el-table
|
||||
class="projectTable"
|
||||
: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="项目进度" >
|
||||
<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>
|
||||
<template #default="scope">
|
||||
<el-button type="primary" @click="onCloseProject(scope.row)">结项</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="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>
|
||||
import { ref } from 'vue'
|
||||
const input = ref('')
|
||||
|
||||
</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
|
||||
},
|
||||
{
|
||||
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: '教育电商项目',
|
||||
price: 100,
|
||||
important: '非A类',
|
||||
classification: '研发项目',
|
||||
type: '纯研发类',
|
||||
schedule: 100
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 选择一页显示多少条数据
|
||||
handleSizeChange(val) {
|
||||
|
||||
},
|
||||
// 选择当前的是第几页
|
||||
handleCurrentChange(val) {
|
||||
|
||||
},
|
||||
onCloseProject(row) {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.projectTable {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue