添加cid前端请求数据时加载动画
This commit is contained in:
junleea
parent
2dfd5ac7ae
commit
be0a4a0a74
|
|
@ -9,7 +9,7 @@ import { updateCIDService } from "@/api/cid.js";
|
|||
import router from "@/router/index.js";
|
||||
import Menu from "@/views/Menu.vue";
|
||||
|
||||
import {ElMessage} from "element-plus";
|
||||
import {ElMessage, ElLoading} from "element-plus";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -53,16 +53,21 @@ export default {
|
|||
// 它们可以在模板中作为事件处理器绑定
|
||||
methods: {
|
||||
async getDeviceList() {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
});
|
||||
let result = {};
|
||||
try {
|
||||
result = await getCIDListService(this.tokenData);
|
||||
let data = result.data;
|
||||
this.tableData = data;
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
} finally {
|
||||
loading.close();
|
||||
}
|
||||
let data = result.data;
|
||||
|
||||
|
||||
this.tableData = data;
|
||||
},
|
||||
onSubmit() {
|
||||
getDeviceList({ token: token });
|
||||
|
|
@ -76,24 +81,29 @@ export default {
|
|||
|
||||
//设置项目执行构建部署
|
||||
async runCID(index) {
|
||||
var id = this.tableData[index].ID;
|
||||
var run_data = {
|
||||
id: id,
|
||||
ip: this.ip,
|
||||
userId: this.tokenData.userId,
|
||||
token: this.tokenData.token,
|
||||
};
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '执行中',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
});
|
||||
try {
|
||||
var id = this.tableData[index].ID;
|
||||
var run_data = {
|
||||
id: id,
|
||||
ip: this.ip,
|
||||
userId: this.tokenData.userId,
|
||||
token: this.tokenData.token,
|
||||
};
|
||||
var d_re = await runCIDService(run_data);
|
||||
if (d_re.code == 0) {
|
||||
//alert("操作成功");
|
||||
ElMessage.success("操作成功");
|
||||
} else {
|
||||
//alert("操作失败");
|
||||
ElMessage.error("操作失败");
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
} finally {
|
||||
loading.close();
|
||||
}
|
||||
},
|
||||
toRunCIDLog(index) {
|
||||
|
|
@ -106,26 +116,31 @@ export default {
|
|||
if (!confirm("是否删除")) {
|
||||
return;
|
||||
}
|
||||
|
||||
var id = this.tableData[index].ID;
|
||||
var delete_data = {
|
||||
id: id,
|
||||
userId: this.tokenData.userId,
|
||||
token: this.tokenData.token,
|
||||
};
|
||||
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '删除中',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
});
|
||||
try {
|
||||
var id = this.tableData[index].ID;
|
||||
var delete_data = {
|
||||
id: id,
|
||||
userId: this.tokenData.userId,
|
||||
token: this.tokenData.token,
|
||||
};
|
||||
var d_re = await deleteCIDService(delete_data);
|
||||
if (d_re.code == 0) {
|
||||
//alert("删除成功");
|
||||
ElMessage.success("删除成功");
|
||||
//刷新页面
|
||||
this.getDeviceList();
|
||||
} else {
|
||||
//alert("操作失败");
|
||||
ElMessage.error("操作失败");
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
} finally {
|
||||
loading.close();
|
||||
}
|
||||
},
|
||||
async updateButtonCID(index) {
|
||||
|
|
@ -140,36 +155,46 @@ export default {
|
|||
},
|
||||
async addCID() {
|
||||
this.addDialogVisible = false;
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '添加中',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
});
|
||||
let result = {};
|
||||
try {
|
||||
result = await addCIDService(this.addForm);
|
||||
if (result.code == 0) {
|
||||
//alert("添加成功");
|
||||
ElMessage.success("添加成功");
|
||||
this.getDeviceList()
|
||||
} else {
|
||||
//alert("添加失败");
|
||||
ElMessage.error("添加失败");
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
} finally {
|
||||
loading.close();
|
||||
}
|
||||
},
|
||||
async updateCID() {
|
||||
this.updateDialogVisible = false;
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '更新中',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
});
|
||||
let result = {};
|
||||
try {
|
||||
result = await updateCIDService(this.updateForm);
|
||||
if (result.code == 0) {
|
||||
//alert("修改成功");
|
||||
ElMessage.success("修改成功");
|
||||
this.getDeviceList()
|
||||
} else {
|
||||
//alert("修改失败");
|
||||
ElMessage.error("修改失败");
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
} finally {
|
||||
loading.close();
|
||||
}
|
||||
},
|
||||
async getIpClient() {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export default {
|
|||
return {
|
||||
ip: "",
|
||||
tableData: [],
|
||||
loading: false,
|
||||
tokenData: {
|
||||
token: localStorage.getItem("token"),
|
||||
ip: localStorage.getItem("ip"),
|
||||
|
|
@ -42,10 +43,13 @@ export default {
|
|||
},
|
||||
async getCIDLogList() {
|
||||
let result = {};
|
||||
this.loading = true;
|
||||
try {
|
||||
result = await getCIDLogListService(this.tokenData);
|
||||
this.loading = false;
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
this.loading = false;
|
||||
}
|
||||
let data = result.data;
|
||||
for(var i=0;i<data.length;i++){
|
||||
|
|
@ -234,7 +238,13 @@ export default {
|
|||
</el-form>
|
||||
|
||||
<!-- 表格 :row-style="this.tableRowClassName"-->
|
||||
<el-table :data="tableData" width="100%" border>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
width="100%"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="数据加载中..."
|
||||
>
|
||||
:row-style="this.tableRowClassName"
|
||||
<el-table-column prop="ID" label="id" width="80"></el-table-column>
|
||||
<el-table-column
|
||||
|
|
|
|||
|
|
@ -0,0 +1,138 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人记录 - 登录</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script src="https://unpkg.com/element-plus"></script>
|
||||
<style>
|
||||
body {
|
||||
background-image: url('https://picsum.photos/1920/1080');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.third-party-login {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.third-party-login .el-button {
|
||||
margin: 5px;
|
||||
}
|
||||
.qq-btn {
|
||||
background-image: url(https://wiki.connect.qq.com/wp-content/uploads/2016/12/Connect_logo_4.png);
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="login-container">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<h3 class="text-2xl font-bold text-center">个人记录登录页面</h3>
|
||||
</template>
|
||||
<el-form ref="loginFormRef" :model="loginForm" label-width="80px">
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="loginForm.username"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码">
|
||||
<el-input v-model="loginForm.password" type="password"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="medium" @click="handleLogin">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<a href="https://ljsea.top" style="font-size: 12px;color: blue;width: 120px;">跳转主页</a>
|
||||
<el-divider content-position="center">第三方登录</el-divider>
|
||||
<img src="https://wiki.connect.qq.com/wp-content/uploads/2016/12/Connect_logo_4.png" @click="thirdLogin('qq')">
|
||||
<div class="third-party-login">
|
||||
<!-- <el-button
|
||||
class="qq-btn"
|
||||
@click="thirdLogin('qq')"
|
||||
></el-button> -->
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a href="https://beian.miit.gov.cn/">备案号：蜀ICP备2022027005号-2</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const { createApp } = Vue;
|
||||
const app = createApp({
|
||||
data() {
|
||||
return {
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
currentLoginRequest: 0,
|
||||
maxLoginRepeatRequest: 60,
|
||||
loginFormRef: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleLogin() {
|
||||
console.log('登录信息：', this.loginForm);
|
||||
if (this.loginForm.username === '' || this.loginForm.password === '') {
|
||||
ElementPlus.ElMessage({
|
||||
message: '用户名和密码不能为空',
|
||||
type: 'error',
|
||||
});
|
||||
return;
|
||||
}
|
||||
ElementPlus.ElMessage({
|
||||
message: '用户名或密码错误',
|
||||
type: 'error',
|
||||
});
|
||||
},
|
||||
handleQQLogin() {
|
||||
console.log('点击了 QQ 登录');
|
||||
// 这里应添加实际的 QQ 登录逻辑，比如跳转到 QQ 登录授权页面
|
||||
},
|
||||
async thirdLogin(type) {
|
||||
let loginUrl = 'https://graph.qq.com/oauth2.0/show?which=error&display=pc&error=100010&which=Login&display=pc&client_id=101827468&response_type=code&state=eyJ1dWlkIjoiZTIyMDM5OGEtOTczMy00NjVlLWFkMTMtNWE5ZTE2YWI5ZmFkIiwidHlwZSI6ImxvZ2luIiwicHJvamVjdCI6IlNBVyIsInBsYXRmb3JtIjoicXEiLCJ1c2VyX2lkIjowfQ%3D%3D';
|
||||
window.open(loginUrl, "_blank");
|
||||
},
|
||||
|
||||
}
|
||||
});
|
||||
app.use(ElementPlus);
|
||||
app.mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue