manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet_h5/src/views/review/index.vue

<template>
    <div>
        <van-nav-bar title="审核日报" left-text="返回" @click-left="back" fixed left-arrow/>
        
        <div class="login_form">
            <van-sticky :offset-top="46">
            <van-field readonly clickable name="datetimePicker" :value="nowTime" label="时间选择" placeholder="点击选择时间" @click="showPicker = true"/>
            </van-sticky>
            <van-popup v-model="showPicker" position="bottom">
                <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" @confirm="changeTime" @cancel="showPicker = false"/>
            </van-popup>
            <van-skeleton  v-for="(item,index) in report" :key="index" title avatar :row="3" :loading="false">
                <van-panel class="one_report" :title="item.name" :status="item.state==0?'待审核':item.state==1?'已通过':'已驳回'">
                    <div class="form_text">
                        <span style="margin-right:20px;">
                            <i v-if="parseFloat(item.reportTime)>parseFloat(item.calculateTime)+0.5" style="color:red;margin-right:8px;" class="fa fa-exclamation-triangle"></i>
                            总填报：
                            <span :style="parseFloat(item.reportTime)>parseFloat(item.calculateTime)+0.5?'color:red':''">{{item.reportTime}}h</span>
                        </span>
                        <!-- <span>系统智能统计：{{item.calculateTime}}h</span> -->
                    </div>
                    <div v-for="(item1,index1) in item.data" :key="index1" class="one_report_data">
                        <div class="project_title">项目：{{item1.project}}</div>
                        <div class="project_title" v-if="item1.taskId != null" >任务：{{item1.taskName}}</div>
                        <div class="project_time">时长：{{item1.time}}h <span class="one_span" v-if="item1.isOvertime === 1">加班</span></div>
                        <div class="project_content">事项：<span v-html="item1.content"></span></div>
                        <van-divider />
                    </div>
                    <div class="form_btn" slot="footer">
                        <van-button v-if="(user.role != 0 || user.id == item.data[0].inchargerId) && item.state == 0" size="small" type="info" @click="approve(item.id, item)">通过</van-button>
                        <van-button v-if="(user.role != 0 || user.id == item.data[0].inchargerId) && item.state == 0" size="small" type="danger" @click="deny(item.id,1, item)">驳回</van-button>
                        <van-button v-if="(user.role != 0 || user.id == item.data[0].inchargerId) && item.state == 1" size="small" type="danger" @click="deny(item.id,2, item)">撤销</van-button>
                    </div>
                </van-panel>
            </van-skeleton>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                user: JSON.parse(localStorage.userInfo),
                minDate: new Date(2010, 0, 1),
                maxDate: new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()),
                currentDate: new Date(),
                nowTime: this.format(new Date(new Date()),"yyyy-MM-dd"),
                showPicker: false,
                report: [],
            };
        },
        created() {
        },
        methods: {
            // 返回
            back() {
                history.back();
            },

             // 时间转换
            format(date, pattern) {
                pattern = pattern || "yyyy-MM-dd";
                var _this = this;
                return pattern.replace(/([yMdhsm])(\1*)/g, function ($0) {
                    switch ($0.charAt(0)) {
                        case 'y': return _this.padding(date.getFullYear(), $0.length);
                        case 'M': return _this.padding(date.getMonth() + 1, $0.length);
                        case 'd': return _this.padding(date.getDate(), $0.length);
                        case 'w': return date.getDay() + 1;
                        case 'h': return _this.padding(date.getHours(), $0.length);
                        case 'm': return _this.padding(date.getMinutes(), $0.length);
                        case 's': return _this.padding(date.getSeconds(), $0.length);
                    }
                });
            },

            padding(s, len) {
                var len = len - (s + '').length;
                for (var i = 0; i < len; i++) { s = '0' + s; }
                return s;
            },

            // 改变时间
            changeTime(time) {
                this.nowTime = this.format(new Date(time),"yyyy-MM-dd");
                this.currentDate = time;
                this.showPicker = false;
                this.getReport();
            },

            // 获取日报
            getReport() {
                const toast = this.$toast.loading({
                    forbidClick: true,
                    duration: 0
                });
                this.$axios.post("/report/getReportList", {date: this.nowTime})
                .then(res => {
                    if(res.code == "ok") {
                        toast.clear();
                        this.report = res.data;
                    } else {
                        toast.clear();
                        this.$toast.fail('获取失败');
                    }
                }).catch(err=> {toast.clear();});
            },

            approve(id, item) {
                const toast = this.$toast.loading({
                    forbidClick: true,
                    duration: 0
                });
                var ids = '';
                var data = item.data;
                data.forEach(element => {
                    if (element.id != null && element.id != '') {
                        ids +=(element.id+',');
                    }
                });
                this.$axios.post("/report/approve", {id: id , date: this.nowTime, reportIds: ids})
                .then(res => {
                    if(res.code == "ok") {
                        toast.clear();
                        this.$toast.success('审核成功');
                        this.getReport();
                    } else {
                        toast.clear();
                        this.$toast.fail('审核失败');
                    }
                }).catch(err=> {toast.clear();});
            },

            deny(id,i, item) {
                const toast = this.$toast.loading({
                    forbidClick: true,
                    duration: 0
                });
                var ids = '';
                var data = item.data;
                data.forEach(element => {
                    if (element.id != null && element.id != '') {
                        ids +=(element.id+',');
                    }
                });
                this.$axios.post("/report/deny", {id: id , date: this.nowTime, reportIds: ids})
                .then(res => {
                    if(res.code == "ok") {
                        toast.clear();
                        this.$toast.success(i==0?'驳回成功':'撤销成功');
                        this.getReport();
                    } else {
                        toast.clear();
                        this.$toast.fail(i==0?'驳回失败':'撤销失败');
                    }
                }).catch(err=> {toast.clear();});
            }
        },

        mounted() {
            this.getReport();
        }
    };
</script>

<style lang="less" scoped>
    .login_form {
        margin-top: 46px;
    }

    .one_report {
        margin-bottom: 15px;
        font-size:14px;
    }

    .form_text {
        margin: 15px 0 30px;
        padding: 0 12px;
    }
    
    .form_btn {
        text-align: right;
    }

    .form_btn button {
        margin-left: 10px;
    }

    .one_report_data {
        margin-bottom: 10px;
        padding: 0 22px;
        div {
            line-height: 30px;
        }
    }
</style>
<style lang="less">
    .van-nav-bar .van-icon , .van-nav-bar__text {
        color: #20a0ff;
    }
    // 显示加班样式
    .one_span {
        width: 40px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid #fde2e2;
        background: #fef0f0;
        color: #f56c6c;
        font-size: 12px;
        border-radius: 5px;
        // margin-left: 40px;
        float: right;
    }
</style>