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

src/App.vue

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

src/router/index.js

@@ -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

src/utils/baseUrl.js

@@ -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;

src/utils/request.js

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

src/views/ClosedProject.vue

@@ -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">

src/views/Home.vue

@@ -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)

src/views/Login.vue

@@ -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) {
+    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('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:')

src/views/OngoingProject.vue

@@ -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>
+      <p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">在途项目</p>
-      <el-button type="primary" >新增项目</el-button>
+      <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="projectName" label="项目名称" min-width="15%"/>
-        <el-table-column prop="price" label="合同额（万）" min-width="10%"/>
+        <el-table-column prop="contractAmount" label="合同额" min-width="10%" :formatter="priceFormatter"/>
-        <el-table-column prop="important" label="重要程度" min-width="10%"/>
+        <el-table-column prop="projectImportance" label="重要程度" min-width="10%"/>
-        <el-table-column prop="classification" label="项目分类" min-width="10%"/>
+        <el-table-column prop="projectClassName" label="项目分类" min-width="10%"/>
-        <el-table-column prop="type" label="项目类型" min-width="10%"/>
+        <el-table-column prop="projectSubclassName" label="项目类型" min-width="10%"/>
-        <el-table-column label="项目进度" min-width="35%">
+        <el-table-column label="项目进度" min-width="35%" >
           <template #default="scope">
-            <el-progress :text-inside="true" :stroke-width="18" :status="scope.row.schedule === 100 ? 'success' : ''"
+            <el-progress :text-inside="true" :stroke-width="18" :status="scope.row.completeNum===scope.row.totalNum ? 'success' : ''"
-                         :percentage="scope.row.schedule"></el-progress>
+                         :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"
+          v-model:currentPage="currentPage"
-          :page-sizes="[5, 10, 15, 20]"
+          :page-sizes="[2, 10, 15, 20]"
-          :page-size="perPage"
+          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: [{
+      projectClass: [],
-        name: 'OTC研发项目',
+      tableData: []
-        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
-        },
-      ]
     }
+  },
+  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>