实现登录

2022-06-29 15:12:44 +08:00 · 2022-06-29 15:12:44 +08:00 · 8db1162613
parent 0ff9554a38 549502105f
commit 8db1162613
5 changed files with 219 additions and 30 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,7 @@
      "dependencies": {
        "@element-plus/icons": "^0.0.11",
        "axios": "^0.24.0",
+        "blueimp-md5": "^2.19.0",
        "core-js": "^3.6.5",
        "element-plus": "^1.2.0-beta.5",
        "moment": "^2.29.1",
@ -3609,6 +3610,11 @@
      "integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28=",
      "dev": true
    },
+    "node_modules/blueimp-md5": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmmirror.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
+      "integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
+    },
    "node_modules/bn.js": {
      "version": "5.2.0",
      "resolved": "https://registry.npmmirror.com/bn.js/download/bn.js-5.2.0.tgz",
@ -18342,6 +18348,11 @@
      "integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28=",
      "dev": true
    },
+    "blueimp-md5": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmmirror.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
+      "integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
+    },
    "bn.js": {
      "version": "5.2.0",
      "resolved": "https://registry.npmmirror.com/bn.js/download/bn.js-5.2.0.tgz",
--- a/package.json
+++ b/package.json
@ -9,6 +9,7 @@
  "dependencies": {
    "@element-plus/icons": "^0.0.11",
    "axios": "^0.24.0",
+    "blueimp-md5": "^2.19.0",
    "core-js": "^3.6.5",
    "element-plus": "^1.2.0-beta.5",
    "moment": "^2.29.1",
--- a/src/utils/baseUrl.js
+++ b/src/utils/baseUrl.js
@ -1,3 +1,3 @@
-const baseUrl = "http://localhost:8090/"
-//const baseUrl = "http://192.168.31.113:8090/"
+//const baseUrl = "http://localhost:8090/"
+const baseUrl = "http://36.5.61.1:8081/"
 export default baseUrl;
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -29,20 +29,59 @@
          <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>
+                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>

          </div>
        </div>
      </div>

-      <div style="width: 100%;flex: 1;background-color: #409EFF">
-
+      <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>
 </script>
 <script>
@ -58,20 +97,126 @@ export default {
  data() {
    return {
      staffName: '刘金龙',
-      staffUsername: 'liujinlong'
+      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
+          }
+        ]
+      }
    }
  },
  mounted() {

  },
  methods: {
+
    logout() {
+      request({
+        url: 'staff/logout',
+        method: 'post',
+      }).then(response => {
        router.push({path: '/login'})
+      }).catch(function (error) {
+        console.log(error)
+      })
+
    },
+    // 选择一页显示多少条数据
+    handleSizeChange(val) {
+
+    },
+    // 选择当前的是第几页
+    handleCurrentChange(val) {
+
+    },
+
  }
 }
 </script>
 <style>
+
 .home {
  height: 100%;
  max-height: 100%;
@ -79,6 +224,39 @@ 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;
 }
@ -95,6 +273,7 @@ div.div-quitButton {
 div.div-quitButton:hover {
  cursor: pointer;
 }
+
 div.div-quitButton:hover > .icon-quit {
  color: #409EFF;
 }
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@ -27,7 +27,6 @@
    </div>
  </div>

-
 </template>
 <script setup>
 import {User, Key} from '@element-plus/icons'
@ -35,6 +34,7 @@ import {reactive, ref} from 'vue'
 import request from '@/utils/request'
 import router from '@/router'
 import baseUrl from "@/utils/baseUrl";
+import md5 from 'blueimp-md5'

 const axios = require("axios");

@ -47,27 +47,25 @@ const loginForm = reactive({
 console.log(localStorage.getItem('token'))

 const onSubmit = () => {
+  let param = {
+    staffUsername: loginForm.username.trim(),
+    staffPassword: md5(loginForm.password.trim())
+  }
+
+  axios.post(baseUrl + 'staff/login', param).then(function (response) {
+    if (response.data === 'error') {
+      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())
      router.push({path: '/'})
-  // let param = new FormData()
-  // param.append('id', loginForm.username.trim())
-  // param.append('password', loginForm.password.trim())
-  // axios.post(baseUrl + 'api/login', param).then(function (response) {
-  //   if (response.data === 'error') {
-  //     console.log(response.data)
-  //     showAlert.value = true
-  //   } else {
-  //     localStorage.setItem('seller_id', param.get('id'))
-  //     localStorage.setItem('token', response.data)
-  //     localStorage.setItem('expire', new Date().getTime().toString())
-  //     if (param.get('id') === 'admin')
-  //       router.push({path: '/TrainManage'})
-  //     else
-  //       router.push({path: '/'})
-  //   }
-  //
-  // }).catch(function (error) {
-  //   console.log(error);
-  // });
+    }
+
+  }).catch(function (error) {
+    console.log(error);
+  });
 }
 </script>
 <script>