manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/workReport/daily.vue

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item>
                    <el-date-picker v-model="date" :editable="false" format="yyyy-MM" value-format="yyyy-MM" 
                    @change="changeMonth()" :clearable="false" type="month" placeholder="选择月份"></el-date-picker>
                </el-form-item>
                <el-form-item style="float:right;">
                    <el-link type="primary" :underline="false" v-if="user.role != 0" @click="exportReport">导出日报</el-link>
                </el-form-item>
                <el-form-item style="float:right;">
                    <el-link type="primary" :underline="false" @click="fillInReport">填写日报</el-link>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <div>
            <el-card class="box-card daily" shadow="never" :style="'height:'+tableHeight +'px'">
                <div slot="header" class="clearfix">
                    <span>日期：</span>
                    <span v-for="(item,index) in allDate" :id="'day'+index" :class="index==choseDay?'chooseDate date_item':'date_item'" 
                    @click="choseDate(index)" :key="index">{{item}}</span>
                </div>
                <div class="allDaily">
                    <div class="one_daily" v-for="(item1,index1) in reportList" :key="index1">
                        <el-link><i class="fa fa-circle"></i>{{item1.name}}</el-link>
                        <div class="one_daily_body">
                            <el-timeline>
                                <el-timeline-item v-for="(item2,index2) in item1.data" :key="index2">
                                    <el-card shadow="never">
                                        <p>项目：<b>{{item2.project}}</b></p>
                                        <p>时长：{{item2.time}}h</p>
                                        <p>事项：<span v-html="item2.content"></span></p>
                                    </el-card>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </div>
                    <!-- 简陋的无报告提示 -->
                    <span v-if="reportList.length==0">本日暂无报告</span>
                </div>
            </el-card>
        </div>

        <!-- 项目管理的dialog -->
        <el-dialog title="填写日报" :visible.sync="dialogVisible" width="60%">
            <el-form ref="workForm" :model="workForm" :rules="workRules" label-width="100px">
                <el-form-item label="工作日期" prop="createDate">
                    <el-date-picker v-model="workForm.createDate" :editable="false" format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                    @change="changeMonth()" :clearable="false" type="date" placeholder="选择工作日期" style="width:100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="待分配时长" prop="name">
                    <span>{{report.time}}h</span>
                    <el-link type="primary" :underline="false" @click="addDomain" style="margin-left:40px">添加项目</el-link>
                </el-form-item>
                <div v-for="(domain, index) in workForm.domains" :key="domain.id">
                    <el-form-item label="投入项目" :prop="'domains.' + index + '.projectId'"
                        :rules="{ required: true, message: '请选择投入项目', trigger: ['change','blur'] }">
                        <el-select v-model="domain.projectId" placeholder="请选择" style="width:200px;">
                            <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id"></el-option>
                        </el-select>
                        <el-link v-if="index >= 1" type="primary" :underline="false" @click="delDomain(index)" style="float:right;margin-right:10px;">
                            <i class="fa fa-trash" style="color: red;;font-size:18px;"></i>
                        </el-link>
                    </el-form-item>

                    <el-form-item label="投入时长" :prop="'domains.' + index + '.workingTime'"
                        :rules="{ required: true, message: '请输入投入时长', trigger: 'blur' }">
                        <el-input v-model.number="domain.workingTime" placeholder="请输入投入时长" type='number' clearable style="width:200px;"></el-input>
                    </el-form-item>

                    <el-form-item label="工作事项" :prop="'domains.' + index + '.content'" :rules="{ required: true, message: '请输入工作事项', trigger: 'blur' }">
                        <el-input v-model="domain.content" type="textarea" :rows="4" placeholder="请输入投入时长" clearable></el-input>
                    </el-form-item>
                    <el-divider v-if="workForm.domains.length>1"></el-divider>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitDepartment">提交</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
    import util from "../../common/js/util";

    export default {
        data() {
            return {
                user: JSON.parse(sessionStorage.getItem("user")),

                allDate: [],
                date: util.formatDate.format(new Date(new Date()), "yyyy-MM"),
                choseDay: 0,

                tableHeight: 0,
                listLoading: false,

                projectList: [], //项目列表
                reportList: [], //日报列表

                dialogVisible: false, //项目弹窗
                report: '',
                workForm: {
                    createDate: util.formatDate.format(new Date(new Date()), "yyyy-MM-dd"),
                    domains: [{
                        id: null,
                        projectId: "",
                        workingTime: "",
                        content: ""
                    }],
                },
                workRules: {
                    createDate: [{ required: true, message: "请选择工作日期", trigger: "change" }],
                }
            };
        },
        methods: {
            // 改变月份
            changeMonth() {
                this.getAllDate();
                this.getReportList();
            },

            // 选择日期
            choseDate(i) {
                this.choseDay = i;
                this.getReportList();
            },

            // 获取日期列表
            getAllDate() {
                var dayArry = [];
                var day = this.getCountDays();
                for (var k = 1; k <= day; k++) {
                    var str = new Date(this.date.replace(/-/g, "/")).getMonth() + 1 + "月" + k + "日";
                    if ( new Date(this.date.replace(/-/g, "/")).getFullYear() == new Date(new Date()).getFullYear() &&
                    new Date(this.date.replace(/-/g, "/")).getMonth() == new Date(new Date()).getMonth()) {
                        if (new Date().getDate() == k) {
                            this.choseDay = k - 1;
                        }
                    } else {
                        this.choseDay = 0;
                    }
                    dayArry.push(str);
                }
                this.allDate = dayArry;
            },

            getCountDays() {
                var newstr = this.date.replace(/-/g, "/");
                var curDate = new Date(newstr);
                var curMonth = curDate.getMonth();
                curDate.setMonth(curMonth + 1);
                curDate.setDate(0);
                return curDate.getDate();
            },

            //获取日报列表
            getReportList() {
                this.listLoading = true;
                let day = this.choseDay > 9 ? "-" + (this.choseDay + 1) : "-0" + (this.choseDay + 1);
                this.http.post( this.port.report.list, { date: this.date + day },
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.reportList = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //导出日报
            exportReport() {
                if (this.reportList.length > 0) {
                    this.listLoading = true;
                    //首先处理日期
                    let day = this.choseDay > 9 ? "-" + (this.choseDay + 1) : "-0" + (this.choseDay + 1);
                    this.http.post( this.port.report.export, { date: this.date + day },
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            location.href = res.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                } else {
                    this.$message({
                        message: "当天没有报告 无法导出",
                        type: "info"
                    });
                }
            },

            //获取项目列表
            getProjectList() {
                this.listLoading = true;
                this.http.post( this.port.project.list, {},
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.projectList = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            // 获取个人某天的日报
            getReport() {
                this.http.post( this.port.report.getPort, {
                    date: this.workForm.createDate
                },
                res => {
                    if (res.code == "ok") {
                        var list = res.data;
                        this.report = list;
                        if(list.report.length != 0) {
                            var arr = [];
                            for(var i in list.report) {
                                arr.push({
                                    id: list.report[i].id,
                                    projectId: list.report[i].projectId,
                                    workingTime: list.report[i].workingTime,
                                    content: list.report[i].content
                                })
                            }
                            this.workForm = {
                                createDate: this.workForm.createDate,
                                domains: arr,
                            }
                        } else {
                            this.workForm = {
                                createDate: this.workForm.createDate,
                                domains: [{
                                    id: null,
                                    projectId: "",
                                    workingTime: "",
                                    content: ""
                                }],
                            }
                        }
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            // 打开日报填写
            fillInReport() {
                this.getReport();
                this.dialogVisible = true;
            },

            // 添加模块
            addDomain() {
                this.workForm.domains.push({
                        projectId: "",
                        workingTime: "",
                        content: ""
                });
            },

            // 移除模块
            delDomain(i) {
                this.workForm.domains.splice(i,1)
            },

            // 改变月份
            changeMonth() {
                this.getReport()
            },

            // 保存日报
            submitDepartment() {
                this.$refs.workForm.validate(valid => {
                    if (valid) {
                        this.listLoading = true;
                        let formData = new FormData();
                        for(var i in this.workForm.domains) {
                            if (this.workForm.domains[i].id != null) {
                                formData.append("id", this.workForm.domains[i].id);
                            } else {
                                formData.append("id", -1);
                            }
                            formData.append("projectId", this.workForm.domains[i].projectId);
                            formData.append("workingTime", this.workForm.domains[i].workingTime);
                            formData.append("content", this.workForm.domains[i].content);
                            formData.append("createDate", this.workForm.createDate);
                        }
                        this.http.uploadFile( this.port.report.editPort, formData,
                        res => {
                            this.listLoading = false;
                            if (res.code == "ok") {
                                this.$message({
                                    message: "填报成功",
                                    type: "success"
                                });
                                this.dialogVisible = false;
                                this.getReportList();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.listLoading = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                    }
                });
            },

        },
        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 170;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 170;
            };
        },
        mounted() {
            this.getAllDate();
            this.getReportList();
            this.getProjectList();
        }
    };
</script>

<style lang="scss" scoped>
    .clearfix {
        overflow-x: auto;
        white-space: nowrap;
        padding: 15px 0;
        .date_item {
            padding: 0 15px;
            cursor: pointer;
        }
        .chooseDate {
            color: #20a0ff;
        }
    }

    .one_daily {
        i {
            color: #9ed0ff;
            margin-right: 5px;
        }
        .one_daily_body {
            padding: 15px 0px;
            p {
            margin: 0;
            line-height: 30px;
            }
        }
        ul {
            padding: 0;
        }
    }
</style>
<style lang="scss">
    .daily {
        .el-card__body {
            height: 82%;
            overflow-y: auto;
        }
    }
</style>
<style scoped>
/* 项目标签的样式 */
    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>