在途项目列表与后端对接完成
parent
354a4213b4
commit
de38d39d5a
|
|
@ -2,10 +2,14 @@
|
|||
<router-view></router-view>
|
||||
</template>
|
||||
<script>
|
||||
import router from "@/router";
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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)
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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:')
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
|
||||
<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>
|
||||
<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;
|
||||
display: flex;flex-direction: column;justify-content: space-between">
|
||||
|
|
@ -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 label="项目进度" min-width="35%">
|
||||
<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">
|
||||
|
|
@ -35,11 +35,11 @@
|
|||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
v-model:currentPage ="currentPage"
|
||||
:page-sizes="[5, 10, 15, 20]"
|
||||
:page-size="perPage"
|
||||
v-model:currentPage="currentPage"
|
||||
: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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue