初步搭建主页

src/router/index.js

@@ -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,
       },
     ],
   },

src/utils/baseUrl.js

@@ -1,3 +1,3 @@
-//const baseUrl = "http://localhost:8090/"
+const baseUrl = "http://192.168.31.194:8081/"
-const baseUrl = "http://36.5.61.1:8081/"
+//const baseUrl = "http://36.5.61.1:8081/"
 export default baseUrl;

src/utils/request.js

@@ -20,27 +20,15 @@ request.interceptors.request.use(
 request.interceptors.response.use(
     function (response) {
         // 2xx 范围内的状态码都会触发该函数。
-        console.log("success")
+        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())
-                })
-            }
-        }
         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

src/views/Home.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="home" style="display: flex; flex-direction: row; background-color: #F2F3F5 ">
+  <el-container style="width: 100%;height: 100%">
-    <el-menu style="width: 260px;"
+    <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">
@@ -14,7 +17,9 @@
           <span>已结项项目</span>
         </el-menu-item>
       </el-menu>
-    <div style="flex: 1; display: flex; flex-direction: column;">
+    </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">
@@ -24,62 +29,27 @@
                   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>
+              <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>
+              {{ staffFullname }}</span>
-            <span style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 12px;">{{ staffUsername }}</span>
+              <span style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 12px;">{{
+                  staffUsername
+                }}</span>
 
             </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: '刘金龙',
+      staffFullname: '',
-      staffUsername: 'liujinlong',
+      staffUsername: '',
-
-      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
-          }
-        ]
-      }
     }
   },
   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;
 }

src/views/Login.vue

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

src/views/OngoingProject.vue

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