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" @click="handleAdd">导出日报</el-link>
				</el-form-item>
                <el-form-item style="float:right;">
                    <el-link type="primary" :underline="false" @click="handleAdd">项目管理</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)">{{item}}</span>
                </div>
                <div class="allDaily">
                    <div class="one_daily">
                        <el-link><i class="fa fa-circle"></i> 吴涛涛</el-link>
                        <div class="one_daily_body">
                            <el-timeline>
                                <el-timeline-item>
                                    <el-card shadow="never">
                                        <p>项目：<b>工时管家开发项目</b></p>
                                        <p>时长：1.5h</p>
                                        <p>事项：1.重新设计工作日报模块<br>

                                            2.绘制原型图<br>

                                            3.敲代码<br>
                                        </p>
                                    </el-card>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </div>
                    <div class="one_daily">
                        <el-link><i class="fa fa-circle"></i> 吴涛涛</el-link>
                        <div class="one_daily_body">
                            <el-timeline>
                                <el-timeline-item>
                                    <el-card shadow="never">
                                        <p>项目：<b>工时管家开发项目</b></p>
                                        <p>时长：1.5h</p>
                                        <p>事项：1.重新设计工作日报模块<br>

                                            2.绘制原型图<br>

                                            3.敲代码<br>
                                        </p>
                                    </el-card>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </div>
                    <div class="one_daily">
                        <el-link><i class="fa fa-circle"></i> 吴涛涛</el-link>
                        <div class="one_daily_body">
                            <el-timeline>
                                <el-timeline-item>
                                    <el-card shadow="never">
                                        <p>项目：<b>工时管家开发项目</b></p>
                                        <p>时长：1.5h</p>
                                        <p>事项：1.重新设计工作日报模块<br>

                                            2.绘制原型图<br>

                                            3.敲代码<br>
                                        </p>
                                    </el-card>
                                </el-timeline-item>
                                <el-timeline-item>
                                    <el-card shadow="never">
                                        <p>项目：<b>工时管家开发项目</b></p>
                                        <p>时长：1.5h</p>
                                        <p>事项：1.重新设计工作日报模块<br>

                                            2.绘制原型图<br>

                                            3.敲代码<br>
                                        </p>
                                    </el-card>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
	</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,
				total: 0,
                page: 1,
                size: 20,
                list: [],
                
                addFormVisible: false,
				addLoading: false,
			}
		},
		methods: {
            changeMonth() {
                this.getAllDate();
                this.getList();
            },

            choseDate(i) {
                this.choseDay = i;
            },

            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();
            },

			//分页
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
            },

            handleSizeChange(val) {
                this.size = val;
				this.getList();
            },
            
			//获取项目列表
			getList() {
				this.listLoading = true;
				this.http.post(this.port.project.projectList, {
                    keyName: '',
                    pageNum: this.page,
                    pageSize: this.size,
                }, res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        var list = res.data.list;
                        for(var i in list){
                            var customCompaniesStr = "";
                            for(var j in list[i].customCompanies){
                                if(j == list[i].customCompanies.length -1){
                                    customCompaniesStr += list[i].customCompanies[j].companyName;
                                } else {
                                    customCompaniesStr += list[i].customCompanies[j].companyName + "、";
                                }
                            }
                            list[i].customCompaniesStr = customCompaniesStr;
                        }
                        this.list = list;
                        this.total = res.data.total;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },

            //显示新增界面
			handleAdd() {
                this.getUnusual();
				this.addFormVisible = true;
            },

            // 获取异常列表
            getUnusual() {
                this.listLoading = true;
				this.http.post(this.port.project.projectList, {
                    keyName: '',
                    pageNum: this.page,
                    pageSize: this.size,
                }, res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        var list = res.data.list;
                        for(var i in list){
                            var customCompaniesStr = "";
                            for(var j in list[i].customCompanies){
                                if(j == list[i].customCompanies.length -1){
                                    customCompaniesStr += list[i].customCompanies[j].companyName;
                                } else {
                                    customCompaniesStr += list[i].customCompanies[j].companyName + "、";
                                }
                            }
                            list[i].customCompaniesStr = customCompaniesStr;
                        }
                        this.list = list;
                        this.total = res.data.total;
                    } 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.getList();
		}
	}

</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>