在途项目列表与后端对接完成

main
wuyize 2022-06-30 20:07:03 +08:00
parent 354a4213b4
commit de38d39d5a
8 changed files with 106 additions and 122 deletions

View File

@ -2,10 +2,14 @@
<router-view></router-view>
</template>
<script>
import router from "@/router";
export default {
name: 'App',
components: {
}
},
mounted() {
},
}
</script>
<style>

View File

@ -33,5 +33,15 @@ const router = createRouter({
history: createWebHistory(),
routes
})
router.beforeEach(async (to, from) => {
if (
// 检查用户是否已登录
!localStorage.getItem('token') &&
// ❗️ 避免无限重定向
to.name !== 'Login'
) {
// 将用户重定向到登录页面
return { name: 'Login' }
}
})
export default router

View File

@ -1,3 +1,4 @@
const baseUrl = "http://192.168.31.194:8081/"
//const baseUrl = "http://192.168.31.194:8081/"
//const baseUrl = "http://36.5.61.1:8081/"
const baseUrl = "http://101.34.228.45:8080/api/"
export default baseUrl;

View File

@ -26,8 +26,14 @@ request.interceptors.response.use(
}, function (error) {
console.log("ERROR")
console.log(error.response)
//if(error.response.status===403)
//router.push({path: '/login'})
if(error.response.status===401)
{
localStorage.removeItem('token')
localStorage.removeItem('staffFullname')
localStorage.removeItem('staffUsername')
router.push({path: '/login'})
}
return Promise.reject(error)
});

View File

@ -1,7 +1,7 @@
<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>
<p style="margin-left: 40px;font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">已结项项目</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">

View File

@ -82,6 +82,9 @@ export default {
url: 'staff/logout',
method: 'post',
}).then(response => {
localStorage.removeItem('token')
localStorage.removeItem('staffFullname')
localStorage.removeItem('staffUsername')
router.push({path: '/login'})
}).catch(function (error) {
console.log(error)

View File

@ -10,7 +10,7 @@
display: flex; flex-direction: column;justify-content: center">
<p style="margin-bottom: 10px;font-family: 'Segoe UI',sans-serif;font-size: 40px;font-weight: bold;">登录</p>
<p style="margin-bottom: 20px;font-family: 'Segoe UI',sans-serif;font-size: 14px;">欢迎回来请登录以使用项目管理系统</p>
<el-form style="" ref="formRef" :model="loginForm" label-width="auto">
<el-form style="" ref="formRef" :model="loginForm" label-width="auto" @submit.native.prevent>
<el-form-item>
<el-input v-model="loginForm.username" placeholder="用户名" :prefix-icon="User"></el-input>
</el-form-item>
@ -20,8 +20,9 @@
</el-form-item>
<el-alert v-if="showAlert" title="用户名或密码错误" type="error" show-icon @close="showAlert=false"
style="margin-bottom: 16px"></el-alert>
<el-button style="width: 100%;" type="primary" native-type="submit" @click="onSubmit"></el-button>
</el-form>
<el-button type="primary" @click="onSubmit"></el-button>
</div>
</div>
</div>
@ -52,15 +53,15 @@ const onSubmit = () => {
staffPassword: md5(loginForm.password.trim())
}
axios.post(baseUrl + 'staff/login', param).then(function (response) {
if (response.data.code !== 200) {
console.log(response.data)
showAlert.value = true
} else {
if (response.data.code === 200) {
console.log(response.data)
localStorage.setItem('token', response.data.data.Token)
localStorage.setItem('staffFullname', response.data.data.staffFullname)
localStorage.setItem('staffUsername', response.data.data.staffUsername)
router.push({path: '/'})
} else {
console.log(response.data)
showAlert.value = true
}
}).catch(function (error) {
console.log('error:')

View File

@ -3,7 +3,7 @@
<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>
<p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">在途项目</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;
@ -14,15 +14,15 @@
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 prop="projectName" label="项目名称" min-width="15%"/>
<el-table-column prop="contractAmount" label="合同额" min-width="10%" :formatter="priceFormatter"/>
<el-table-column prop="projectImportance" label="重要程度" min-width="10%"/>
<el-table-column prop="projectClassName" label="项目分类" min-width="10%"/>
<el-table-column prop="projectSubclassName" 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>
<el-progress :text-inside="true" :stroke-width="18" :status="scope.row.completeNum===scope.row.totalNum ? 'success' : ''"
:percentage="scope.row.completeNum*100/scope.row.totalNum"></el-progress>
</template>
</el-table-column>
<el-table-column min-width="10%" align="right">
@ -36,10 +36,10 @@
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
v-model:currentPage="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="perPage"
:page-sizes="[2, 10, 15, 20]"
v-model:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="count"
:total="total"
style="float: right;margin-top: 20px;">
</el-pagination>
</div>
@ -54,9 +54,8 @@ const tableRef = ref(null);
const tableHeight = ref();
onMounted(() => {
// innerHeight-offsetTop-85
// innerHeight-offsetTop-110
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
//
window.onresize = () => {
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
};
@ -64,116 +63,76 @@ onMounted(() => {
</script>
<script>
import router from "../router";
import request from "../utils/request";
export default {
name: "OngoingProject",
data() {
return {
count: 100,
total: 0,
currentPage: 1,
perPage: 10,
pageSize: 2,
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
},
{
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
},
]
projectClass: [],
tableData: []
}
},
mounted() {
this.getProjects();
},
methods: {
//
handleSizeChange(val) {
console.log('handleSizeChange:'+val)
this.getProjects();
},
//
handleCurrentChange(val) {
this.getProjects();
},
onCloseProject(row) {
},
onCloseProject(row) {}
getProjects() {
const that = this;
request({
url: 'project',
method: 'get',
params: {
pageCurrent: this.currentPage,
pageSize: this.pageSize
}
}).then(response => {
if(response.data.code===200) {
//console.log(response.data.data.records)
that.total = response.data.data.total
that.tableData = response.data.data.records
}
}).catch(function (error) {
console.log(error)
})
},
getProjectClass() {
request({
url: 'projectType',
method: 'get',
}).then(response => {
if(response.code===200) {
}
}).catch(function (error) {
console.log(error)
})
},
priceFormatter(row, column) {
return row[column.property]/10000 + '万';
},
}
}
</script>