vue实现审批功能审核通过与拒绝 axios jsonserver

最新推荐文章于 2025-05-21 17:30:10 发布
原创最新推荐文章于 2025-05-21 17:30:10 发布 · 4.5k 阅读
28 ·
CC 4.0 BY-SA版权
文章标签：
#vue.js #html5
在这里插入图片描述
<!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>