manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet_h5/src/views/exaLeave/exaLeave.vue

<template>
  <div>
    <van-nav-bar
      title="请假审批"
      left-text="返回"
      @click-left="back"
      fixed
      left-arrow
    />
    <div class="content">
        <div class="item" v-for="item in list" :key="item.id">
            <div class="item_text">
                <div class="text_list">
                    <div class="text_left">申请人</div>
                    <div class="text_right">{{item.name}}</div>
                </div>
                <div class="text_list">
                    <div class="text_left">所在部门</div>
                    <div class="text_right">{{item.dept}}</div>
                </div>
                <div class="text_list">
                    <div class="text_left">请假类型</div>
                    <div class="text_right">{{item.type}}</div>
                </div>
                <div class="text_list">
                    <div class="text_left">请假时间</div>
                    <div class="text_right">{{item.date}}</div>
                </div>
                <div class="text_list">
                    <div class="text_left">请假时长</div>
                    <div class="text_right">{{item.time}}天</div>
                </div>
            </div>
            <div class="item_ope" v-if="item.result == null">
                <van-button type="info" size="small" @click="opeExa(item,1)">同意</van-button>
                <van-button type="danger" size="small" @click="opeExa(item,0)">驳回</van-button>
            </div>
            <div class="item_ope" v-if="item.result != null">
                <span :class="item.result ? 'ope_agree' : 'ope_reject'">{{item.result ? "已同意" : "已驳回"}}</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            list:[
                { name:"张辉",dept:'质量部', date:"2022-3-25", time:"1", id:0, result:null, type:'事假' },
            ]
        }
    },
    methods: {
        back() {
            history.back();
        },
        opeExa(item,r){
            item.result = r
        }
    },
}
</script>

<style lang="less" scoped>
    .content{
        margin-top: 46px;
        .item{
            margin-bottom: 0.35rem;
            background-color: #fff;
            padding: 0.26667rem 0.58667rem 0.21333rem;
            .item_text{
                font-size: 0.37333rem;
                border-bottom: 1px solid #ebedf0;
                padding-bottom: 0.21333rem;
                .text_list{
                    line-height: 0.8rem;
                }
            }
            .item_ope{
                padding-top: 0.21333rem;
                text-align: right;
                font-size: 0.37333rem;
                width: 100%;
                height: 1.2rem;
                display: flex;
                justify-content: right;
                align-items: center;
                .van-button{
                    margin-left: 0.26667rem;
                }
                .ope_agree{
                    
                    color: #1989fa;
                    margin-right: 0.4rem;
                }
                .ope_reject{
                    
                    color: #c03131;
                    margin-right: 0.4rem;
                }
            }
            .text_left{
                float: left;
                width: 33%;
            }
        }
    }
</style>