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]">
                    <template #header>
                        <div class="van-cell van-panel__header">
                            <div class="van-cell__title">
                                <span v-if="user.userNameNeedTranslate == '1'"><ww-open-data type='userName'
                                        :openid='item.name'></ww-open-data></span>
                                <span v-else>{{ item.name }}</span>
                            </div>
                            <div class="van-cell__value van-panel__header-value">
                                <span>{{ statusTxt[item.state] }}</span>
                            </div>
                        </div>
                    </template>
                    <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">(
                                                <span v-if="user.userNameNeedTranslate == '1'"><ww-open-data type='userName'
                                                        :openid='item1.projectAuditorName'></ww-open-data></span>
                                                <span v-else>{{ item1.projectAuditorName }}</span>
                                                )</span>审核
                                        </span>
                                        <span style="color:#32CD32;" v-else-if="item1.projectAuditState == 1">
                                            项目审核人<span v-if="item1.projectAuditorName != null">(
                                                <span v-if="user.userNameNeedTranslate == '1'"><ww-open-data type='userName'
                                                        :openid='item1.projectAuditorName'></ww-open-data></span>
                                                <span v-else>{{ item1.projectAuditorName }}</span>
                                                )</span>审核通过
                                        </span>
                                    </span>
                                    <span v-else-if="item1.isDeptAudit == 1">
                                        待
                                        <span v-if="user.userNameNeedTranslate == '1'"><ww-open-data type='departmentName'
                                                :openid='item1.auditDeptName'></ww-open-data></span>
                                        <span v-else>{{ item1.auditDeptName }}</span>
                                        审核
                                    </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 && user.companyId != yuzhongCompId">子项目：{{ item1.subProjectName }}</div>
                        <div class="project_title" v-if="user.companyId == yuzhongCompId" >角色：{{item1.extraField1?roleList.find(r=>r.value==item1.extraField1).label:''}}</div>
                        <div class="project_title" v-if="user.company.packageProject == 1 && item1.groupName != null">
                            任务分组：{{ item1.groupName }}</div>
                        <div class="project_title" v-if="user.companyId == yuzhongCompId" >工作职责：{{item1.extraField2?item1.extraField2Name:''}}</div>
                        <div class="project_title" v-if="user.companyId == yuzhongCompId" >工作内容：{{item1.extraField3?item1.extraField3Name:''}}</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.timeType.customTextActive == 1">
                            {{ user.timeType.customTextName }}：{{ item1.customText }}</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">加班<span v-if="item1.overtimeHours">{{
                                    item1.overtimeHours.toFixed(1) }}h</span></div>
                            </div>
                            <div class="project_content">事项：<span v-html="item1.content"></span></div>

                        </div>
                        <div v-if="item1.multiWorktime == 1">
                            <div>项目时长：<span style="margin-right:10px;">{{ item1.time.toFixed(1) }}h</span>
                                <div class="button" v-if="item1.isOvertime == 1">加班<span v-if="item1.overtimeHours">{{
                                    item1.overtimeHours.toFixed(1) }}h</span></div>
                            </div>
                            <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>
            <van-empty v-if="report.length == 0" description="暂无日报">
                <van-button round type="primary" class="bottom-button" @click="toWriteReport()">去填写</van-button>
            </van-empty>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            yuzhongCompId: 3385,
            roleList:[{value: 1,label: 'CRC&LM'},{value: 2,label: 'PM'}],
            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") {
                        this.$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 {
                        this.$toast.clear();
                        this.$toast.fail('获取失败:' + res.msg);
                    }
                }).catch(err => { this.$toast.clear(); });
        },
        // 点击编辑
        editor(item) {
            console.log(item, '编辑')
            this.$router.push({
                path: '/edit',
                query: {
                    date: this.nowTime
                }
            });
        },
        // 去填写日报
        toWriteReport() {
            if(this.user.companyId == '1071') {
                //物奇要填到按周填报
                this.$router.push({
                    path: '/weekEdit',
                    query: {
                        date: this.nowTime
                    }
                });
            } else {
                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: 80px;
    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;
}

.bottom-button {
    width: 160px;
    height: 40px;
    background-color: rgb(53, 130, 245);
    border-color: rgb(53, 130, 245);
}
</style>