App.vue
<template>
<div >
</el-pagination>
</div>
</div><br>
</div>
</template>
<script>
import axios from 'axios';
import moment from "moment";
export default {
name: "App2",
data () {
return {
message: "index.html",
tableData: [],
bugsData: [],
title: "详情",
ideasData: [],
loading: true,
showBugs: true,
showIdeas: false,
_id: "",
url: "",
flag: 1,
defaultOpen: ["1"],
currentPage: 1, //默认显示页面为1
pagesize: 10, //每页的数据条数
}
},
methods: {
dateFormat:function(row, column) { //时间戳，没有可以不用
const date = row[column.property];
if (date === undefined) {
return "";
}
return moment(date).format("YYYY-MM-DD HH:mm:ss");
},
handleSizeChange: function(size) {
this.pagesize = size;
},
//点击第几页
handleCurrentChange: function(currentPage) {
this.currentPage = currentPage;
},
changeCellStyle({rowIndex}) {
//第八列添加 red 类
if(rowIndex%2 === 1){
return 'backgroundColor: #FFFFEE';
}
},
ideas: function () {
this.flag=2;
this.title = "IDEAS详情";
axios.get('http://localhost:3000/api/ideas/find').then((res)=>{
this.tableData = (res.data);
console.log(this.tableData)
}).catch((err)=>{
console.log(err);
});
this.showBugs = false;
this.showIdeas = true;
this.loading =false;
},
bugs: function () {
this.flag=1;
this.title = "BUG详情";
axios.get('http://localhost:3000/api/bugs/find').then((res)=>{
this.tableData = (res.data);
console.log(this.tableData);
console.log()
}).catch((err)=>{
console.log(err);
});
this.showBugs = true;
this.showIdeas = false;
this.loading =false;
},
bugNum: function () {
axios.get('http://localhost:3000/api/bugs/find_group').then((res)=>{
this.bugsData = (res.data);
console.log(this.bugsData)
}).catch((err)=>{
console.log(err);
});
},
ideasNum: function () {
axios.get('http://localhost:3000/api/ideas/find_group').then((res)=>{
this.ideasData = (res.data);
console.log(this.ideasData)
}).catch((err)=>{
console.log(err);
});
},
//展开当前一级菜单，关闭其他的菜单
handleOpen: function (key) {
//当前打开的sub-menu的 key 数组
this.defaultOpen = [key];
console.log(this.defaultOpen)
},
selfBugsInfor: function (name) {
let params = {
name: name,
};
this.flag = 2;
this.title = name+"的BUG详情";
axios.post('http://localhost:3000/api/bugs/findSelf', params).then((res)=>{
this.tableData = (res.data);
console.log(res.data)
}).catch((err)=>{
console.log(err);
});
},
selfIdeasInfor: function (name) {
let params = {
name: name,
};
this.flag = 2;
this.title = name+"的IDEAS详情";
axios.post('http://localhost:3000/api/ideas/findSelf', params).then((res)=>{
this.tableData = (res.data);
console.log(res.data)
}).catch((err)=>{
console.log(err);
});
},
timeOutBugs: function (name) {
const that = this;
setTimeout(() =>{that.selfBugsInfor(name)},30);
},
timeOutIseas: function (name) {
const that = this;
setTimeout(() =>{that.selfIdeasInfor(name)},30);
},
deleteBugInfor: function (desc) {
let params = {
desc: desc,
};
this.showBugs = true;
this.showIdeas = false;
this.loading = false;
this.currentPage = 1;
axios.post('http://localhost:3000/api/bugs/delete' , params).then((res)=>{
alert("删除成功！");
this.bugs();
this.bugNum();
}).catch((err)=>{
console.log(err);
alert("删除失败！");
});
},
deleteIdeasInfor: function (desc) {
let params = {
desc: desc,
};
this.showBugs = false;
this.showIdeas = true;
this.loading = false;
this.currentPage = 1;
axios.post('http://localhost:3000/api/ideas/delete' , params).then((res)=>{
alert("删除成功！");
this.ideas();
this.ideasNum();
}).catch((err)=>{
console.log(err);
alert("删除失败！");
});
},
},
mounted (http://www.amjmh.com) {
axios.get('http://localhost:3000/api/bugs/find').then((res)=>{
this.tableData = (res.data);
this.loading = false;
this.title = "BUG详情";
console.log(this.tableData)
}).catch((err)=>{
console.log(err);
});
axios.get('http://localhost:3000/api/bugs/find_group').then((res)=>{
this.bugsData = (res.data);
console.log(this.bugsData)
}).catch((err)=>{
console.log(err);
});
axios.get('http://localhost:3000/api/ideas/find_group').then((res)=>{
this.ideasData = (res.data);
console.log(this.ideasData)
}).catch((err)=>{
console.log(err);
});
},
}
</script>
<style>
#table{
float:right;
width: 61%;
height: 250px;
margin-left:50px;
margin-right:50px;
margin-top:50px;
margin-bottom:50px;
}
#Statistics{
float:left;
width:25%;
height: 250px;
margin-left:50px;
margin-right:50px;
margin-top:50px;
margin-bottom:50px;
}
#heard{
margin-left:50px;
height: 15px;
}
.pagination{
float:right;
}
p{
font-size:15px;
color: whitesmoke;
}
span{
font-size:19px;
color: #ffce34;
}
</style>
---------------------