manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/project/project_gantt.vue

{{ src/App.vue }}
<template>
  <div class="container">
    <div class="gantt_head">
      <div class="head_RorX">
        
      <el-radio-group v-model="radio1" @change="selChange()" size="small" style="margin-right:9px">
        <el-radio-button label="按人员查看" value="renyuan"></el-radio-button>
        <el-radio-button label="按项目查看" value="xiangmu"></el-radio-button>
        <el-radio-button label="资源需求" value="demand"></el-radio-button>
      </el-radio-group>
      
      </div>
      <!-- 时间段筛选  -->
      <div class="head_date" v-if="isDataLoaded">
      <span>时间段</span>
      <el-date-picker
        style="margin-left:9px;width:18vw"
        size="small"
        v-model="valueDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="dateupdata()">
      </el-date-picker>
      </div>

      <!-- 任务分组筛选 -->
      <div v-if="reqpar1" class="head_taskgroup">
        <span>任务分组</span>
        <el-select clearable filterable v-model="valuex2" placeholder="请选择" size="small" style="margin-left:9px;width:10vw" @change="taskgroupSel()">
        <el-option
          v-for="item in taskgroupList"
          :key="item.name"
          :label="item.name"
          :value="item.name"
          >
        </el-option>
      </el-select>
      </div>
      <!-- 人员/项目筛选 -->
      <div class="head_select">
        <span>{{(this.radio1 == "按人员查看" ? "人员" : "项目")}}</span>
      <el-select clearable filterable v-model="valuex" placeholder="请选择" size="small" style="margin-left:9px;width:10vw" @change="optupdata()">
        <el-option
          v-for="item in screenList"
          :key="item.id"
          :label="reqpar1 ? item.projectName : item.name"
          :value="item.id"
          >
          <span style="float: left;color: #8492a6;">{{ item.projectCode }}</span>
          <span style="float: right;font-size: 13px;margin-left: 20px">{{ item.projectName }}</span>
        </el-option>
      </el-select>
      </div>
      <!-- 资源需求导入/导出 -->
      <div class="head_files" v-if="!isDataLoaded">
        <el-link type="primary" style="margin-left:10px;float:left;" :underline="false" href="./upload/资源需求导入模板.xlsx" download="资源需求导入模板.xlsx">模板下载</el-link>
        <el-upload ref="upload" style="margin-left:10px;float:left;" action="#" :limit="1" :http-request="importProject" :show-file-list="false">
          <el-link type="primary" :underline="false" >导入需求</el-link>
        </el-upload>
        <el-link type="primary" style="margin-left:10px;float:left;" :underline="false" @click="exportProjectData" download="资源需求导出.xlsx">导出需求</el-link>
      </div>
    </div>

    <gantt v-if="isDataLoaded" ref="ganttTable1" class="left-container" :tasks="tasks" 
    :stafforpro="radio1" 
    :valueDate="valueDate"
    :key="updatakey1"></gantt>

  <div class="demand-container" v-if="!isDataLoaded">
    <el-table height="90%" :loading="demandListLoading" :data="demandList">
      <el-table-column label="项目编号" prop="projectCode" width="160"></el-table-column>
      <el-table-column label="项目名称" prop="projectName" min-width="240"></el-table-column>
      <el-table-column label="近七日活跃人员" prop="activeUsers" min-width="240"></el-table-column>
      <el-table-column label="人员需求" prop="membReq" min-width="280"></el-table-column>
      <el-table-column label="任务需求" prop="taskReq" min-width="280"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button @click="demandEdit(scope.row)" size="small">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="poss">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="20"
        layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <!-- 资源需求修改 -->
  <el-dialog v-if="demandEditDialog" width="500px" append-to-body :visible.sync="demandEditDialog" :title="'修改 - ' + editParameter.projectName">
    <el-form label-width="150">
      <el-form-item label="人员需求">
        <el-input style="width:350px" v-model="editParameter.membReq" clearable></el-input>
      </el-form-item>
      <el-form-item label="任务需求">
        <el-input style="width:350px" v-model="editParameter.taskReq" clearable></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
              <el-button type="default" @click="demandEditDialog = false">取消</el-button>
              <el-button type="primary" @click="demandEditSure" >确定</el-button>
            </div>
  </el-dialog>
  </div>
  
  </div>
</template>
 
<script>
import { error } from 'dingtalk-jsapi';
import Gantt from './gantt.vue';
 
export default {
  name: 'project_gantt',
  components: {Gantt},
  data () {
    return {
      isDataLoaded:false,
      tasks: {
        data : [],
        links: []
      },
      tasks1: {links:[]},
      updatakey1: 1,
      updatakey2: -1,
      radio1:"按人员查看",
      valueDate:[],
      options:[{value:"选项1",label:"全部"},{value:"选项2",label:"人员1"}],
      valuex:'',
      screenList:[],

      // 请求参数
      reqpar1:0,
      reqpar2:[],
      demandListLoading: false,
      demandList: [],
      pageIndex: 1,
      pageSize: 20,

      demandEditDialog: false,
      editParameter: {},
      taskgroupList: [],
      valuex2: ''

    }
  },

  
  methods: {
      setGroup() {
          this.$refs.ganttTable1.setGroup();
          // this.$refs.ganttTable2.setGroup();
      },
      // 资源需求导出
      exportProjectData() {
                this.http.post('/project-requirement/exportData',{},
                res => {
                    if (res.code == "ok") {
                        let filePath = res.data;
                        const a = document.createElement('a'); // 创建a标签
                        a.setAttribute('download', '资源需求导出.xls');// download属性
                        a.setAttribute('href', filePath);// href链接
                        a.click(); //自执行点击事件
                        a.remove();
                    } 
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                    }
                );
            },
      // 资源需求导入
      importProject(item) {
                //首先判断文件类型
                let str = item.file.name.split(".");
                let format = str[str.length - 1];
                if (format != "xls" && format != "xlsx") {
                    this.$message({
                        message: "请选择.xls或.xlsx文件",
                        type: "error"
                    });
                } else {
                    let formData = new FormData();
                    formData.append("multipartFile", item.file);
                    this.http.uploadFile('/project-requirement/importData', formData,
                    res => {
                        this.$refs.upload.clearFiles();
                        if (res.code == "ok") {
                            this.$message({
                                message: "导入成功",
                                type: "success"
                            });
                            this.getDemandList();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.$refs.upload.clearFiles();
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                }
            },
      // 人员/项目切换
      selChange(){
        this.valuex = null
        // console.log("切换按钮",this.radio1);
        if (this.radio1 == "按人员查看") {
          this.isDataLoaded = true
          this.reqpar1 = 0
          this.getList()
          this.getScreen()
        }else if(this.radio1 == "按项目查看"){
          this.isDataLoaded = true
          this.reqpar1 = 1
          this.getList()
          this.getXmScreen()
          this.getTaskgroupList()
        }else {
          this.reqpar1 = 1
          this.isDataLoaded = false
          this.pageIndex = 1
          this.pageSize = 20
          this.valuex = ''
          this.valuex2 = ''
          this.getDemandList()
          this.getXmScreen()
          this.getTaskgroupList()
          
        }
      },
      // 时间段改变
      dateupdata(){
        this.reqpar2 = this.valueDate
        this.getList()
      },
      // 人员/项目筛选改变
      optupdata(){
        // console.log(this.valuex);
        if(this.isDataLoaded){
          this.getList()
        }else{
          this.getDemandList()
        }
      },
      // 任务分组筛选改变
      taskgroupSel(){
        // console.log(this.valuex2);
        if(this.isDataLoaded){
          this.getList()
        }else{
          this.getDemandList()
        }
        
      },

      handleSizeChange(val){
        this.pageSize = val
        this.getDemandList()
      },
      handleCurrentChange(val){
        this.pageIndex = val
        this.getDemandList()
      },
      // 资源需求修改
      demandEdit(row){
        this.demandEditDialog = true
        this.editParameter = JSON.parse(JSON.stringify(row))
        // console.log('edit',this.demandEditDialog);
      },
      demandEditSure(){
        this.http.post('/project-requirement/addOrMod',this.editParameter,
        res => {
          if(res.code == 'ok'){
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.demandEditDialog = false
            this.getDemandList()
          }else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        },err => {
          this.$message({
            message: err,
            type: 'error'
          })
        })
      },

      // 获取人员项目筛选列表
      getScreen(){
        this.http.get('/project/getMyUsers',
            res => {
              if (res.code == "ok") {
                this.screenList = res.data
              }else{
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            },
            error => {
              this.$message({
                message : error,
                type : "error"
              })
            }
        )
      },
      getXmScreen(){
        this.http.get('/project/getProjectList',
            res => {
              if (res.code == "ok") {
                this.screenList = res.data
                // console.log("screen",this.screenList);
              }else{
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            },
            error => {
              this.$message({
                message : error,
                type : "error"
              })
            }
        )
      },
      // 获取任务分组筛选列表
      getTaskgroupList(){
        this.http.post('/task-group/getGroupNames',{},
        res => {
          if(res.code == 'ok'){
            this.taskgroupList = res.data
          }else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        },err => {
          this.$message({
            message: err,
            type: 'error'
          })
        })
      },
      // 获取甘特图数据
      getList() {
        let getlistcs = {type : this.reqpar1 , startDate : this.reqpar2[0] , endDate : this.reqpar2[1]}
        if(this.reqpar1) {
          if(this.valuex != ''){
            getlistcs.projectId = this.valuex
          }
          if(this.valuex2 != ''){
            getlistcs.groupName = this.valuex2
          }
        }else {
          if(this.valuex != ''){
            getlistcs.userId = this.valuex
          }
        }
        
        this.http.post('/project/getGanttData', getlistcs ,
                        res => {
                            if (res.code == "ok") {
                                for(var i in res.data) {
                                  if(res.data[i].id.indexOf('出差') != '-1') {
                                    res.data[i].color = '#E6A23C'
                                  }
                                  if(res.data[i].id.indexOf('请假') != '-1') {
                                    res.data[i].color = '#F56C6C'
                                  }
                                }
                                this.tasks = {data:res.data};
                                for(let i in this.tasks.data){
                                  if(this.tasks.data[i].time == 0){
                                    delete this.tasks.data[i].start_date
                                    delete this.tasks.data[i].end_date
                                    this.tasks.data[i].type = 'milestone'
                                  }
                                }
                                this.$nextTick(()=>{
                                  this.updatakey1 += 1
                          })
                        
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.$message({
                                message: error,
                                type: "error"
                            });
                            }
                        );
          
      },
      // 获取资源需求列表
      getDemandList(){
        let parameter = {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        }
        if(this.valuex != ''){
          parameter.projectId = this.valuex
        }
        if(this.valuex2 != ''){
          parameter.groupName = this.valuex2
        }
        this.demandListLoading = true
        this.http.post('/project-requirement/listByPage',parameter,
        res => {
          if(res.code == 'ok'){
            this.demandListLoading = false
            this.total = res.data.total
            this.demandList = res.data.records
          }else {
            this.demandListLoading = false
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        },err => {
          this.demandListLoading = false
          this.$message({
              message: err,
              type: 'error'
            })
        })
      },



      // tasksEdit(){
      //   let etasks = JSON.parse(JSON.stringify(this.tasks.data))
      //   for(let i=0;i<etasks.length;i++){
      //     if(etasks[i].parent != null){
      //       let edate = new Date(etasks[i].end_date)
      //       edate = new Date(edate.setDate(edate.getDate() + 1))
      //       let edatemonth = edate.getMonth() + 1
      //       let edateday = edate.getDate()
      //       edate = edate.getFullYear() + '-' + (edatemonth < 10 ? '0' + edatemonth : edatemonth) + '-' + (edateday < 10 ? '0' + edateday : edateday)
      //       etasks[i].end_date = edate
      //     }
      //   }
      //   this.tasks = {data:etasks}
      // }
  },
  mounted: function () {
    let nowdate = new Date()
    let nowmonth = nowdate.getMonth() + 1
    let startdate = nowdate.getFullYear() + "-" + (nowmonth < 10 ? "0" + nowmonth : nowmonth) + "-" + (nowdate.getDate() < 10 ? "0" + nowdate.getDate() : nowdate.getDate())
    let udate = new Date(nowdate.getFullYear(),nowdate.getMonth(),nowdate.getDate() + 31)
    let endmonth = udate.getMonth() + 1
    let enddate = udate.getFullYear() + "-" + (endmonth < 10 ? "0" + endmonth : endmonth) + "-" + (udate.getDate() < 10 ? "0" + udate.getDate() : udate.getDate())
    this.valueDate = [startdate,enddate]
    this.reqpar2 = this.valueDate
    // console.log("date",this.valueDate);
    this.getList();
    this.getScreen()
    // this.tasks1 = this.tasks
    this.isDataLoaded = true
  }
}
</script>

<style>
  /* html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  } */
  .container {
    height: 100%;
    width: 100%;
  }
  .left-container {
    overflow: hidden;
    position: relative;
    height: 90%;
  }
  .demand-container{
    overflow: hidden;
    position: relative;
    height: 92%;
  }
  .gantt_head{
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .gantt_head .head_RorX{
    width: 22vw;
  }
  .gantt_head .head_date{
    width: 24vw;
  }
  .gantt_head .head_taskgroup{
    width: 16vw;
  }
  .gantt_head .head_select{
    width: 15vw;
  }
  .gantt_head .head_files{
    width: 17vw;
  }
  .poss {
    height: 8%;
    float: right;
    padding-top: 15px;
}
</style>