<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
<link rel="stylesheet" href="./css/style.css">
<body>
<div id="saleApproval">
<div class="title">
<a href="./index.html"><img src="./images/back.png" class="backBtn"></a>
<p>付款审批</p>
</div>
<div class="approval">
<div @click="approval(0)" class="waitApproval">
<img src="./images/waitApproval.png" alt="">
<p>待审批</p>
</div>
<div @click="approval(1)" class="approved">
<img src="./images/approved.png" alt="">
<p>已审批</p>
</div>
</div>
<div class="approvalContainer" v-for="(item,index) of items" v-show="flag && item.state == 0">
<div class="approvalContext">
<div class="approvalHeadContainer">
<div class="headID">NO.{{item.id}}</div>
<div class="headTime">{{item.time}}</div>
</div>
<p class="headName">申请人:{{item.name}}</p>
<div class="headContext">{{item.content}}</div>
<div class="headPrice">{{item.price}}¥</div>
</div>
<div class="approvalBtn">
<div class="agree" @click="runApproval(index,1)">同意</div>
<div class="reject">
<div class="rejectIn" @click="runApproval(index,2)">拒绝</div>
</div>
</div>
</div>
<div class="approvalContainerb" v-for="(item,index) of items" v-show="!flag && (item.state == 1 || item.state == 2 )">
<div class="approvalContext">
<div class="approvalHeadContainer">
<div class="headID">NO.{{item.id}}</div>
<div class="headTime">{{item.time}}</div>
</div>
<p class="headName">申请人:{{item.name}}</p>
<div class="headContext">{{item.content}}</div>
<div class="headPrice"> {{item.index}}{{item.price}}¥</div>
</div>
<div class="approvalBtn">
<div class="agree">{{item.result}}</div>
<div class="reject">
<div class="rejectIn" @click="runApproval(index,0)">重置</div>
</div>
</div>
</div>
<div class="bottom" v-show="flag">
<div class="agreeAll" @click="runAll(1)">全部同意</div>
<div class="rejectAll" @click="runAll(2)">全部拒绝</div>
</div>
<div style="height: 90px;"></div>
</div>
</body>
<script>
new Vue({
el: "#saleApproval",
vuetify: new Vuetify(),
data() {
return {
items: [],
flag: true,
}
},
mounted() {
this.approval(0),
this.getData();
},
methods: {
getData() {
axios.get('http://localhost:3010/approval')
.then(response => {
console.log(response.data)
this.items = response.data;
})
},
approval(params) {
console.log(params)
if (params == 0) {
this.flag = true
} else if (params == 1) {
this.flag = false
}
},
runApproval(index, params) {
if (params == 1) {
this.items[index].state = params
this.items[index].result = '已经同意'
} else if (params == 2) {
this.items[index].state = params
this.items[index].result = '已经拒绝'
} else if (params == 0) {
this.items[index].state = params
this.items[index].result = '待审核'
}
console.log(index, params, 'run')
console.log(this.items[index].state)
},
runAll(params) {
for (let i = 0; i < this.items.length; i++) {
console.log(i)
console.log(this.items[i].state, 'a')
if (this.items[i].state == 0 && params == 1) {
this.items[i].state = 1
this.items[i].result = '已经同意'
} else if (this.items[i].state == 0 && params == 2) {
this.items[i].state = params
this.items[i].result = '已经拒绝'
}
console.log(this.items[i].state, 'b')
}
console.log(this.items)
}
}
})
</script>
<style scoped>
.waitApproval,
.approved {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 60px;
color: #999999;
}
.approval img {
width: 35px;
height: 35px;
}
.approvalBtn {
width: 90%;
height: 60px;
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.agree {
color: white;
width: 100px;
height: 40px;
background: linear-gradient(to right, #58C1FC, #5F57F1);
border-radius: 10px;
line-height: 40px;
text-align: center;
letter-spacing: 1px;
}
.reject {
color: #786DF6;
width: 100px;
height: 40px;
background: linear-gradient(to right, #58C1FC, #5F57F1);
padding: 1px;
border-radius: 10px;
line-height: 40px;
text-align: center;
letter-spacing: 1px;
}
.rejectIn {
width: 100%;
height: 100%;
border-radius: 10px;
background: white;
}
.agreeAll {
color: white;
width: 100px;
height: 50px;
background: linear-gradient(to right, #58C1FC, #5F57F1);
border-radius: 10px;
line-height: 50px;
text-align: center;
letter-spacing: 1px;
}
.rejectAll {
color: white;
width: 100px;
height: 50px;
background: #F9A740;
border-radius: 10px;
line-height: 50px;
text-align: center;
letter-spacing: 1px;
}
.bottom {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: fixed;
bottom: 0;
height: 70px;
background-color: white;
}
.approval {
display: flex;
justify-content: space-around;
height: 70px;
background-color: white;
align-items: center;
}
#saleApproval {
background-color: #F0F0F0;
min-height: 100vh;
max-height: auto;
}
.approvalContainer,
.approvalContainerb {
width: 90%;
margin: auto;
border-radius: 10px;
background-color: white;
height: 200px;
margin-top: 10px;
}
.approvalHeadContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
color: #CCCCCC;
}
.headName,
.headContext {
color: #9B9B9B;
font-weight: 500;
font-size: 18px;
}
.approvalContext {
width: 90%;
margin: auto;
padding-top: 20px;
height: 120px;
border-bottom: 2px solid #E4E4E4;
}
.headPrice {
width: fit-content;
margin-left: auto;
color: #867EF4;
font-weight: 600;
}
</style>
</html>
vue实现审批功能审核通过与拒绝 axios jsonserver
最新推荐文章于 2024-03-27 15:31:45 发布