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="exportReport">导出日报</el-link>
        </el-form-item>
        <el-form-item style="float:right;">
          <el-link type="primary" :underline="false" @click="projectDialogVisible=true">项目管理</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="projectDialogVisible" width="50%">
      <!-- 现在原生的CSS 有按钮跳动和下边距的问题 -->
      <div>
        <el-tag
          :key="index"
          v-for="(item,index) in projectList"
          closable
          :disable-transitions="false"
          @close="handleClose(item)"
        >{{item.projectName}}</el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        ></el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">新增项目</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="projectDialogVisible = false">关闭</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: [], //日报列表
      projectDialogVisible: false, //项目弹窗
      inputVisible: false, //项目新增输入
      inputValue: "" //项目新增值
    };
  },
  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();
    },

    //获取项目列表
    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"
          });
        }
      );
    },

    //删除项目
    handleClose(item) {
      this.$confirm("确定要删除项目" + item.projectName + "吗?", "删除项目", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          this.http.post(
            this.port.project.delete,
            { id: item.id },
            res => {
              this.listLoading = false;
              if (res.code == "ok") {
                this.$message({
                  type: "success",
                  message: "项目删除成功"
                });
                this.getProjectList();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            },
            error => {
              this.listLoading = false;
              this.$message({
                message: error,
                type: "error"
              });
            }
          );
        })
        .catch(() => {});
    },

    //显示输入
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    //处理输入信息
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.$confirm("确定要新增项目" + inputValue + "吗?", "新增项目", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.listLoading = true;
            this.http.post(
              this.port.project.add,
              { name: inputValue },
              res => {
                this.listLoading = false;
                if (res.code == "ok") {
                  this.$message({
                    type: "success",
                    message: "新增项目成功"
                  });
                  this.getProjectList();
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error"
                  });
                }
              },
              error => {
                this.listLoading = false;
                this.$message({
                  message: error,
                  type: "error"
                });
              }
            );
          })
          .catch(() => {});
      }
      this.inputVisible = false;
      this.inputValue = "";
    },

    //获取日报列表
    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"
        });
      }
    },

    // 获取异常列表
    getUnusual() {
      this.listLoading = true;
      this.http.post(
        this.port.project.projectList,
        {},
        res => {
          this.listLoading = false;
          if (res.code == "ok") {
          } 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>