实现登录

main
wuyize 2022-06-29 15:12:44 +08:00
commit 8db1162613
5 changed files with 219 additions and 30 deletions

11
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@element-plus/icons": "^0.0.11", "@element-plus/icons": "^0.0.11",
"axios": "^0.24.0", "axios": "^0.24.0",
"blueimp-md5": "^2.19.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"element-plus": "^1.2.0-beta.5", "element-plus": "^1.2.0-beta.5",
"moment": "^2.29.1", "moment": "^2.29.1",
@ -3609,6 +3610,11 @@
"integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28=", "integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28=",
"dev": true "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": { "node_modules/bn.js": {
"version": "5.2.0", "version": "5.2.0",
"resolved": "https://registry.npmmirror.com/bn.js/download/bn.js-5.2.0.tgz", "resolved": "https://registry.npmmirror.com/bn.js/download/bn.js-5.2.0.tgz",
@ -18342,6 +18348,11 @@
"integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28=", "integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28=",
"dev": true "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": { "bn.js": {
"version": "5.2.0", "version": "5.2.0",
"resolved": "https://registry.npmmirror.com/bn.js/download/bn.js-5.2.0.tgz", "resolved": "https://registry.npmmirror.com/bn.js/download/bn.js-5.2.0.tgz",

View File

@ -9,6 +9,7 @@
"dependencies": { "dependencies": {
"@element-plus/icons": "^0.0.11", "@element-plus/icons": "^0.0.11",
"axios": "^0.24.0", "axios": "^0.24.0",
"blueimp-md5": "^2.19.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"element-plus": "^1.2.0-beta.5", "element-plus": "^1.2.0-beta.5",
"moment": "^2.29.1", "moment": "^2.29.1",

View File

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

View File

@ -29,20 +29,59 @@
<div style="height: 100%; margin-right: 10px; <div style="height: 100%; margin-right: 10px;
display: flex; flex-direction: column;justify-content: center;align-items: flex-end;"> display: flex; flex-direction: column;justify-content: center;align-items: flex-end;">
<span <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> <span style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 12px;">{{ staffUsername }}</span>
</div> </div>
</div> </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>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
</script> </script>
<script> <script>
@ -58,20 +97,126 @@ export default {
data() { data() {
return { return {
staffName: '刘金龙', 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() { mounted() {
}, },
methods: { methods: {
logout() { logout() {
request({
url: 'staff/logout',
method: 'post',
}).then(response => {
router.push({path: '/login'}) router.push({path: '/login'})
}).catch(function (error) {
console.log(error)
})
}, },
//
handleSizeChange(val) {
},
//
handleCurrentChange(val) {
},
} }
} }
</script> </script>
<style> <style>
.home { .home {
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
@ -79,6 +224,39 @@ export default {
max-width: 100%; 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 { .icon-quit {
color: #606266; color: #606266;
} }
@ -95,6 +273,7 @@ div.div-quitButton {
div.div-quitButton:hover { div.div-quitButton:hover {
cursor: pointer; cursor: pointer;
} }
div.div-quitButton:hover > .icon-quit { div.div-quitButton:hover > .icon-quit {
color: #409EFF; color: #409EFF;
} }

View File

@ -27,7 +27,6 @@
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import {User, Key} from '@element-plus/icons' import {User, Key} from '@element-plus/icons'
@ -35,6 +34,7 @@ import {reactive, ref} from 'vue'
import request from '@/utils/request' import request from '@/utils/request'
import router from '@/router' import router from '@/router'
import baseUrl from "@/utils/baseUrl"; import baseUrl from "@/utils/baseUrl";
import md5 from 'blueimp-md5'
const axios = require("axios"); const axios = require("axios");
@ -47,27 +47,25 @@ const loginForm = reactive({
console.log(localStorage.getItem('token')) console.log(localStorage.getItem('token'))
const onSubmit = () => { 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: '/'}) router.push({path: '/'})
// let param = new FormData() }
// param.append('id', loginForm.username.trim())
// param.append('password', loginForm.password.trim()) }).catch(function (error) {
// axios.post(baseUrl + 'api/login', param).then(function (response) { console.log(error);
// 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);
// });
} }
</script> </script>
<script> <script>