aivfo-oa-web/src/views/meeting/weekly.vue

<template>
  <div class="app-container">
    <el-form size="mini" :inline="true">
      <el-form-item label="关联会议">
        <el-select size="small" style="width: 350px" placeholder="关联会议" clearable filterable v-model="meetingWeek" @change="changeWeekData()">
          <el-option v-for="(item,index) in meetingData" :label="item.meetingName" :key="item.id" :value="item.weeks"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-download" @click="generateWeekly()" v-show="false">周报生成</el-button>
      </el-form-item>
    </el-form>
    <div ref="exportPdf" id="exportPdf">
      <div>
        <h3>本周工作内容</h3>
        <el-table
          border
          stripe
          size="mini"
          style="width: 100%" v-model="workContents" :data="workContents"
          @row-click="rowClick" :span-method="objectSpanMethod" :highlight-current-row="true">
          <el-table-column label="分类" prop="classifyName" width="120">
          </el-table-column>
          <el-table-column label="项目" prop="projectName" width="160">
          </el-table-column>
          <el-table-column label="模块" prop="moduleName" width="120">
          </el-table-column>
          <el-table-column label="任务名称" prop="taskName" width="250">
          </el-table-column>
          <el-table-column label="工作反馈" prop="description" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="scope.row.description!==''" v-for="(item,index) in scope.row.description.split('$') ">
                {{index+1}}.{{item}}<br/>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="最新进度" prop="scheduleValue" width="100">
            <template slot-scope="scope">
              {{scope.row.scheduleValue}}%
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <h3>下周工作计划</h3>
        <el-table
          border
          stripe
          size="mini"
          style="width: 100%;margin-top: 10px;" :data="workPlans">
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column label="工作计划" prop="workPlan" min-width="250">
            <template slot-scope="scope">
              <el-input size="mini" v-if="scope.row.taskId!==undefined && scope.row.taskId!==''" :disabled="true"   v-model="scope.row.planContent" placeholder="请填写工作计划信息" ></el-input>
              <el-input size="mini" v-else v-model="scope.row.planContent" @input="updateWorkPlans(scope.row)" placeholder="请填写工作计划信息" ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="预计开始时间" prop="beginDate" width="180">
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.beginDate" v-if="scope.row.taskId!==undefined && scope.row.taskId!==''"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                :disabled="true"
                placeholder="选择日期" style="width: 150px">
              </el-date-picker>
              <el-date-picker v-else
                v-model="scope.row.beginDate"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="选择日期" style="width: 150px" @change="updateWorkPlans(scope.row)">
              </el-date-picker>

            </template>
          </el-table-column>
          <el-table-column label="预计完成时间" prop="completionTimes" width="180">
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.completionTimes" style="width: 150px" v-if="scope.row.taskId!==undefined && scope.row.taskId!==''"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                :disabled="true"
                placeholder="选择日期">
              </el-date-picker>
              <el-date-picker
                v-model="scope.row.completionTimes" style="width: 150px" v-else
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="选择日期" @change="updateWorkPlans(scope.row)">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="所属项目" prop="projectId" width="220">
            <template slot-scope="scope">
              <el-select :disabled="true" v-model="scope.row.projectId" placeholder="请选择" size="mini" v-if="scope.row.taskId!==undefined && scope.row.taskId!==''">
                <el-option
                  v-for="item in projects"
                  :key="item.id"
                  :label="item.projectName"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-select  v-model="scope.row.projectId" placeholder="请选择" size="mini" v-else  @change="updateWorkPlans(scope.row)">
                <el-option
                  v-for="item in projects"
                  :key="item.id"
                  :label="item.projectName"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="op" width="100" v-if="currentWeek===weeks" center>
            <template slot-scope="scope">
              <el-button size="mini" type="danger" v-if="scope.row.taskId===undefined || scope.row.taskId===null" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 15px;width: 100%;text-align: right" >
          <el-button size="mini" type="success"  @click="addRow()"  v-if="currentWeek===weeks">添加</el-button>
        </div>
      </div>
    </div>
    <div style="margin-top: 50px;margin-right: 250px;  width: 100%;text-align: center">
      <el-button size="mini" type="primary" @click="saveWorkPlan()" v-if="currentWeek===weeks">保存工作计划</el-button>
    </div>

    <!-- 任务详情对话框 -->
    <el-dialog title="任务详情" :visible.sync="taskOpen" width="760px" append-to-body
               :close-on-click-modal="false">
      <task-detail :detail-form="taskForm"></task-detail>
    </el-dialog>

  </div>
</template>

<script>

import {list} from '@/api/meeting/meeting'
import {
  deleteWorkPlanById,
  getMeetingsAndWorkPlansByWeeks,
  getProjects,
  getWorkPlanConfirmFlags,
  saveWorkPlans, updateWorkPlan
} from '@/api/meeting/work'
import {getTask} from "@/api/task/task";
import TaskDetail from "../task/components/taskDetail"


export default {
  name: 'weekly',
  components: {TaskDetail},
  data() {
    return {
      meetingWeek: null,
      meetingData: [],
      workContents: [],
      projects:[],
      workPlans: [{
        planContent: '请填写工作计划信息',
        id: null,
        meetingId: null,
        completionTimes: null,
        completionTime: null,
        projectId: null
      }],
      meetingStatus: null,
      weeks: null,
      currentWeek: null,
      meetingId: null,
      taskOpen: false,
      taskForm:{},
      mergeObj: {}, // 用来记录需要合并行的下标
      mergeArr: ['classifyName','projectName','moduleName'], // 表格中的列名
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    stripTags(html) {
      return html.replace(/<\/?[^>]+(>|$)/g, '');
    },
    getData() {
      list().then(response => {
        this.meetingData = response.data
        this.meetingId = this.meetingData.id
        //js 获取当前周
        const date = new Date();
        // 获取当前第几周
        let week = this.getYearWeek(date.getFullYear(), Number(date.getMonth()) + 1, date.getDate());
        let currentWeek = week ;
        this.meetingWeek = currentWeek
        this.getMeetingsAndWorkPlansByWeeksData(currentWeek)
      })
      getProjects().then(res=>{
        this.projects=res.data
      });
    },
    getMeetingsAndWorkPlansByWeeksData(currentWeek) {
      let weekss = currentWeek
      getMeetingsAndWorkPlansByWeeks(currentWeek).then(response => {
        this.workContents = response.data.workContent
        this.getSpanArr(this.workContents);
        if (response.data.workPlan != null && response.data.workPlan.length > 0) {
          this.workPlans = response.data.workPlan
        }else{
          this.workPlans=[{
            planContent: '',
            id: null,
            meetingId: null,
            completionTimes: null,
            completionTime: null,
            projectId: null,
            beginDate:null
          }]
        }
        this.weeks = response.data.weeks
        const date = new Date();
        // 获取当前第几周
        let week = this.getYearWeek(date.getFullYear(), Number(date.getMonth()) + 1, date.getDate());
        let currentWeek = week ;
        this.currentWeek = currentWeek;
        if (weekss !== currentWeek) {
          this.workPlans = response.data.workPlan
        }
        let obj = {};
        obj = this.meetingData.find(item => {
          return item.weeks === currentWeek;
        });
        this.meetingId =obj.id
      })
    },
    getYearWeek(a, b, c) {
      let date1 = new Date(a, parseInt(b) - 1, c),
        date2 = new Date(a, 0, 1),
        d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
      return Math.ceil((d + (date2.getDay() + 1 - 1)) / 7);
    },
    getWorkData() {

    },
    generateWeekly() {
      if (this.meetingWeek == null || this.meetingWeek == undefined || this.meetingWeek === '') {
        this.$message({
          message: '请选择会议信息!',
          type: 'warning'
        });
        return
      }
      this.$PDFSave(this.$refs.exportPdf, "我的工作周报");
    },
    //添加下周周计划权限认证
    validateWorkPlanFlag(){
      //已经确认的工作不能继续编辑工作计划，临时增加就去任务系统手动添加
      let meetingId=this.meetingId
      let userId=this.$store.getters.userId
      let data={
        weeks:this.weeks,
        userId:userId,
        meetingId:meetingId
      }
      getWorkPlanConfirmFlags(data).then(res=> {
        if (res.success !== true) {
          this.$message.warning(res.data)
          return false
        }else{
          return true
        }
      })
    },
    saveWorkPlan() {
      let meetingId=this.meetingId
      let userId=this.$store.getters.userId
      let datas={
        weeks:this.weeks,
        userId:userId,
        meetingId:meetingId
      }
      getWorkPlanConfirmFlags(datas).then(res=> {
        if (res.success !== true) {
          this.$message.warning(res.data)
        }else{
          if (this.meetingWeek === null || this.meetingWeek === undefined || this.meetingWeek === '') {
            this.$message({
              message: '请选择会议信息!',
              type: 'warning'
            });
            return
          }
          //判断是否存在周会信息，无周会信息，就不保存工作计划
          if(meetingId===undefined || meetingId===null){
            this.$message.warning("请选择周会会议，再填写工作计划!")
            return
          }
          let workPlanss = this.workPlans;
          let newWorkPlans = []
          for(let i = 0; i < workPlanss.length; i++){
            if(workPlanss[i].taskId===undefined || workPlanss[i].taskId==null){
              newWorkPlans.push(workPlanss[i])
            }
          }
          if(newWorkPlans.length===0){
            this.$message.warning("请填写新的工作计划在做保存!")
            return
          }
          for (let i = 0; i < newWorkPlans.length; i++) {
            if(newWorkPlans[i].planContent==='' || newWorkPlans[i].beginDate===undefined ||
              newWorkPlans[i].completionTimes===undefined || newWorkPlans[i].projectId===undefined){
              this.$message({
                message: '请将工作计划填写完整!',
                type: 'warning'
              });
              return
            }

            newWorkPlans[i].completionTime = null;
            newWorkPlans[i].beginDate =  new Date(newWorkPlans[i].beginDate).getTime()

          }
          let data = {
            weeks: this.meetingWeek,
            workPlans: newWorkPlans,
            id: this.workPlans.id,
            meetingId: this.meetingId
          }
          saveWorkPlans(data).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.getData()
          });
        }
      })

    },
    addRow() {
      let meetingId=this.meetingId
      let userId=this.$store.getters.userId
      let data={
        weeks:this.weeks,
        userId:userId,
        meetingId:meetingId
      }
      getWorkPlanConfirmFlags(data).then(res=> {
        if (res.success !== true) {
          this.$message.warning(res.data)
        }else{
          let row = {planContent: '', 'op': '', id: null, completionTimes: null,beginDate:null}
          this.workPlans.push(row)
        }
      })

    },
    deleteRow(index, row) {
      let meetingId=this.meetingId
      let userId=this.$store.getters.userId
      let data={
        weeks:this.weeks,
        userId:userId,
        meetingId:meetingId
      }
      getWorkPlanConfirmFlags(data).then(res=> {
        if (res.success !== true) {
          this.$message.warning(res.data)
        }else{
          if (index == 0) {
           /*  this.$message({
              message: '不能删除此条数据',
              type: 'warning'
            });
            return; */
          }
          this.workPlans.splice(index, 1)
          let id = row.id;
          if (id != null) {
            deleteWorkPlanById(id).then(res => {
              this.getMeetingsAndWorkPlansByWeeksData(this.meetingWeek)
            });
          }
        }
      })
    },
    changeWeekData() {
      this.getMeetingsAndWorkPlansByWeeksData(this.meetingWeek)

    },
    /** 查看任务详情*/
    rowClick(row, column, event) {
      getTask(row.taskId).then(res => {
        this.taskForm = res.data;
        this.taskOpen = true;
      })
    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (this.mergeArr.indexOf(column.property) !== -1) {
        // 判断其值是不是为0
        if (this.mergeObj[column.property][rowIndex]) {
          return [this.mergeObj[column.property][rowIndex], 1]
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },

    getSpanArr(data) {
      this.mergeArr.forEach((key, index1) => {
        let count = 0; // 用来记录需要合并行的起始位置
        this.mergeObj[key] = []; // 记录每一列的合并信息

        data.forEach((item, index) => {
          // index == 0表示数据为第一行，直接 push 一个 1
          if (index === 0) {
            this.mergeObj[key].push(1);
            //item.group=index;
          } else {
            // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
            if (item[key] === data[index - 1][key]) {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
              //item.group = this.tableData[index - 1].group;
            } else {
              // 如果当前行和上一行其值不相等
              count = index; // 记录当前位置
              this.mergeObj[key].push(1); // 重新push 一个 1
              // item.group = this.tableData[index - 1].group + 1; //如果不一样 将组号设置为上一个数据的组号加1
            }
          }
        })

      })
    },

    updateWorkPlans(row){
      let data=row;
      if(row.id!==undefined && row.id!==null){
        let datas={
          id:row.id,
          planContent:data.planContent,
          beginDate:new Date(data.beginDate).getTime(),
          projectId:row.projectId,
          completionTime:new Date(row.completionTimes).getTime()
        }
        updateWorkPlan(datas).then(res=>{
        })
      }

    }
  }
}
</script>

<style scoped lang="scss">
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
</style>