manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet_h5/src/views/view/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-if="report.length!=0" v-for="(item,index) in report" title avatar :row="3" :loading="false" :key="index">
                <van-panel class="one_report" :title="item.name" :status="statusTxt[item.state]">
                    <div class="form_text">
                        <span style="margin-right:20px;margin-left:5px;font-size:14px;">
                            总填报：
                            <span>{{parseFloat(item.reportTime).toFixed(1)}}h</span>
                        </span>
                    </div>
                    <div v-for="(item1,index1) in item.data" class="one_report_data" :key="index1">
                        <div class="project_title" style="font-weight:bold;">项目：{{item1.project}} <span :style="'color:'+statusColor[item1.state]">[
                            <span v-if="item1.state==0">
                            <span v-if="item1.isDeptAudit==0">
                                <span v-if="item1.projectAuditState==0">
                                    待项目审核人<span v-if="item1.projectAuditorName != null">({{item1.projectAuditorName}})</span>审核
                                </span>
                                <span style="color:#32CD32;" v-else-if="item1.projectAuditState==1">
                                    项目审核人<span v-if="item1.projectAuditorName != null">({{item1.projectAuditorName}})</span>审核通过
                                </span>
                            </span>
                            <span v-else-if="item1.isDeptAudit==1">
                                {{('待'+item1.auditDeptName+'审核')}}
                            </span>
                            </span>
                            <span v-else>
                                {{statusTxt[item1.state]}}
                            </span>
                            <!-- {{statusTxt[item1.state]}} -->

                            ] </span></div>
                        <div style="color:red;" v-if="item1.state ==2&&item1.rejectReason!=null">原因:{{item1.rejectReason}}</div>
                        <div class="project_title" v-if="item1.subProjectName != null" >子项目：{{item1.subProjectName}}</div>
                        <div class="project_title" v-if="user.company.packageProject==1&&item1.groupName != null" >任务分组：{{item1.groupName}}</div>
                        <div class="project_title" v-if="user.company.packageProject==1&&item1.stage != '-'" >投入阶段：{{item1.stage}}</div>
                        <!--自定义维度 -->
                        <div class="project_title" v-if="user.timeType.customDegreeActive == 1" >{{user.timeType.customDegreeName}}：{{item1.degreeName}}</div>
                        <div class="project_title" v-if="user.timeType.customDataActive == 1" >{{user.timeType.customDataName}}：{{item1.customData}}</div>
                        <div class="project_title" v-if="user.company.packageEngineering == 1">
                            专业进度：
                            <span style="margin-right:10px;" v-for="progressItem in item1.professionProgress" :key="progressItem.id">{{progressItem.professionName}}({{progressItem.progress}}%) 
                            </span>
                        </div>
                        
                        <div class="project_title" v-if="item1.taskId" >任务：{{item1.taskName}}</div>
                        <!--根据类型选择使用的模板 -->
                        <div v-if="item1.multiWorktime == 0">
                            <div class="project_time">时长：
                                <span v-if="item1.reportTimeType == 0" style="margin-right:10px;">{{fullDayTxt[item1.timeType]}}</span>
                                <span v-if="item1.reportTimeType == 2" style="margin-right:10px;">{{item1.startTime+'-'+item1.endTime}}</span>{{item1.time.toFixed(1)}}h
                                <div class="button" v-if="item1.isOvertime == 1">加班</div>
                            </div>
                            <div class="project_content">事项：<span v-html="item1.content"></span></div>
                            
                        </div>
                        <div v-if="item1.multiWorktime == 1">
                            <div style="position:relative;border:#ccc 0.5px solid;padding:3px;margin:5px 0px;" v-for="(timeItem, index) in item1.worktimeList" :key="index" >
                                <div class="project_time">时长：
                                    <!-- <span v-if="timeItem.reportTimeType == 0" style="margin-right:10px;">{{fullDayTxt[item1.timeType]}}</span> -->
                                    <span style="margin-right:10px;">{{timeItem.startTime+'-'+timeItem.endTime}}</span>{{timeItem.time.toFixed(1)}}h
                                </div>
                                <div class="project_content">事项：<span v-html="timeItem.content"></span></div>
                            </div>
                        </div>
                        <div style="padding:5px;text-align:center;" v-if="item1.pics != null && item1.pics.length > 0">
                            <span v-for="(p, index) in item1.pics"  :key="p" style="margin-right:10px;">
                            <img  :src="p" style="width:80px; height:80px;" @click="showLargeImg(item1.pics, index)"/>
                            </span>
                        </div>
                        <van-divider />
                    </div>
                    <van-popup v-model="imgShow" position="bottom" closeable >
                        <van-swipe class="my-swipe"  indicator-color="white">
                        <van-swipe-item v-for="(picItem, index) in tmpPics" :key="index">
                            <img :src="picItem" style="width:100%;" />
                        </van-swipe-item>
                        </van-swipe>
                    </van-popup>

                    <!-- 编辑 -->
                    <div slot="footer" class="foot">
                        <van-button size="small" type="primary" @click="editor(item)" v-if="item.id == user.id && (item.state == 2 || item.state == 3)">编辑日报</van-button>
                    </div>
                </van-panel>
            </van-skeleton>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tmpPics:[],
                imgShow: false,
                hasWaiting: false,
                state: 0,
                statusColor:['orange','green','red'],
                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: [],
                fullDayTxt:['全天','上午','下午'],
                statusTxt:["待审核", "已通过", "已驳回", "待提交"],
            };
        },
        created() {
        },
        methods: {
            showLargeImg(item, index) {
                this.imgShow = true;
                this.tmpPics = item;
            },

            // 返回
            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() {
                this.hasWaiting = false;
                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;
                        //计算状态
                        for (var i=0;i<this.report.length; i++) {
                            var item = this.report[i];
                            if (item.state == 0) {
                                this.hasWaiting = true;
                            }
                        }
                    } else {
                        toast.clear();
                        this.$toast.fail('获取失败:'+res.msg);
                    }
                }).catch(err=> {toast.clear();});
            },
            // 点击编辑
            editor(item) {
                console.log(item, '编辑')
                this.$router.push({
                    path:'/edit',
                    query: {
                        date: this.nowTime
                    }
                });
            }
        },
        mounted() {
            if (sessionStorage.targetDate != null) {
                this.nowTime = sessionStorage.targetDate;
                sessionStorage.removeItem('targetDate');
            }
            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 15px;
        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;
    }
    .button {
        float: right;
        width: 50px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border: 1px solid red;
        color: red;
        box-sizing: border-box;
        border-radius: 10px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .foot {
        width: 100%;
        display: flex;
        justify-content: end;
    }
</style>