aivfo-oa-web/src/views/dashboard/index.vue

<template>
  <div class="app-container">
    <div class="head-tips">
      <el-card class="card">
        <div class="card-text" @click="todoMeetingClick">
          <div class="card-left"><i class="el-icon-s-order"></i></div>
          <div class="card-right">
            <div class="card-text-title">待进行会议</div>
            <div class="card-text-val">{{ todoMeetingCount }}</div>
          </div>
        </div>
      </el-card>
      <el-card class="card">
        <div class="card-text" @click="todoMeetingClick">
          <div class="card-left"><i class="el-icon-s-order"></i></div>
          <div class="card-right">
            <div class="card-text-title">待确认会议</div>
            <div class="card-text-val">{{ todoMeetingConfirmCount }}</div>
          </div>
        </div>
      </el-card>
      <el-card class="card">
        <div class="card-text" @click="toTaskView">
          <div class="card-left"><i class="el-icon-s-order"></i></div>
          <div class="card-right">
            <div class="card-text-title">新任务</div>
            <div class="card-text-val">{{ newTaskNum }}</div>
          </div>
        </div>
      </el-card>
      <el-card class="card" v-hasPermi="['task:task:audit']">
        <div class="card-text" @click="handleAudit">
          <div class="card-left"><i class="el-icon-s-order"></i></div>
          <div class="card-right">
            <div class="card-text-title">待审核任务</div>
            <div class="card-text-val">{{ auditTaskNum }}</div>
          </div>
        </div>
      </el-card>
      <el-card class="card">
        <div class="card-text" @click="enforceTasksClick">
          <div class="card-left"><i class="el-icon-s-order"></i></div>
          <div class="card-right">
            <div class="card-text-title">实施待办</div>
            <div class="card-text-val">{{ enforceTasks }}</div>
          </div>
        </div>
      </el-card>

      <el-card class="card">
        <div class="card-text" @click="enforceRemindClick">
          <div class="card-left"><i class="el-icon-s-order"></i></div>
          <div class="card-right">
            <div class="card-text-title">运维提醒</div>
            <div class="card-text-val">{{ enforceRemindCount }}</div>
          </div>
        </div>
      </el-card>
      <el-card class="card">
        <div class="card-text" @click="toMyReceive">
          <div class="card-left"><i class="el-icon-s-order"></i></div>
          <div class="card-right">
            <div class="card-text-title">待确认领用</div>
            <div class="card-text-val">{{ toBeConfirmReceiveNum }}</div>
          </div>
        </div>
      </el-card>
    </div>

    <el-dialog title="新任务" :visible.sync="newTaskOpen" append-to-body :close-on-click-modal="false">
      <el-table :data="newTasks" size="mini">
        <el-table-column label="任务名称" prop="taskName" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="执行(负责)人" prop="executorName"/>
        <el-table-column label="任务起止时间" width="170">
          <template slot-scope="scope">
            <span>{{ scope.row.beginDate + ' 至 ' + scope.row.endDate }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 审核任务对话框--->
    <el-dialog :title="detailForm.taskName" :visible.sync="auditOpen" width="900px" class="i-audit-dialog"
               append-to-body
               :close-on-click-modal="false">
      <el-carousel trigger="click" height="630px"  :autoplay="false"
                   @change="auditTaskChange">
        <el-carousel-item v-for="item in carouselNum" :key="item">
          <task-detail :detail-form="detailForm"></task-detail>
          <el-form ref="auditForm" :model="auditForm" :rules="auditRules" size="mini" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="审核意见" prop="auditResult">
                  <el-radio-group v-model="auditForm.auditResult">
                    <el-radio label="1">确认完成</el-radio>
                    <el-radio label="0">驳回</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item v-if="auditForm.auditResult==='0'" label="进度（%）" prop="value">
                  <el-input-number v-model="auditForm.value" :min="1" :max="99"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="审核备注" prop="auditOpinion">
              <el-input v-model="auditForm.auditOpinion" type="textarea"/>
            </el-form-item>
          </el-form>
          <div class="footer-btn">
            <el-button type="primary" size="mini" @click="submitAudit(item)">确 定</el-button>
            <el-button size="mini" @click="auditCancel">取 消</el-button>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>


  </div>
</template>

<script>

import {mapGetters} from 'vuex'
import {auditTask, getTask, toDoTaskList} from "@/api/task/task";
import {personReceive} from "@/api/material/transfer";
import {getPersonalTaskList} from '@/api/meeting/enforce'
import {getTodoMeetinStatistics} from '@/api/meeting/meeting'
import {getEnforceRemindCount} from '@/api/meeting/enforceRemind'
import TaskDetail from "@/views/task/components/taskDetail";

export default {
  name: 'Dashboard',
  components: {TaskDetail},
  computed: {
    ...mapGetters([
      'name'
    ]),
    newTaskNum() {
      return this.newTasks.length
    },
    auditTaskNum() {
      return this.auditTasks.length
    }
  },
  data() {
    return {
      newTasks: [],
      auditTasks: [],
      newTaskOpen: false,
      toBeConfirmReceiveNum: 0,
      enforceTasks: 0,
      todoMeetingCount: 0,
      todoMeetingConfirmCount: 0,
      enforceRemindCount: 0,

      carouselNum: 0,
      detailForm: {},
      auditForm: {},
      auditOpen: false,
      auditRules: {
        auditResult: [
          {required: true, message: "审核意见不能为空", trigger: "change"}
        ],
        value: [
          {required: true, message: "进度不能为空", trigger: "blur"}
        ]
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  mounted() {
    this.timer = setInterval(this.queryData, 5000)
    this.getTodoTask();
    this.getAssetReceive();
    this.getTaskList();
    this.getTodoMeetinStatisticss()
    this.getEnforceRemindCounts()
  },
  methods: {
    queryData() {
      this.getTodoTask();
      this.getAssetReceive();
      this.getTaskList();
      this.getTodoMeetinStatisticss()
      this.getEnforceRemindCounts()
    },
    getTodoTask() {
      if (this.auditOpen) {
        return
      }
      toDoTaskList().then(res => {
        this.newTasks = res.data.newTasks
        this.auditTasks = res.data.auditTasks
      })
    },

    getTodoMeetingList() {
      getTodoMeetings().then(res => {
        this.todoMeetings = res.data
      })
    },
    getTaskList() {
      getPersonalTaskList().then(res => {
        this.enforceTasks = res.data.length
      })
    },
    confirmMeeting(row) {
      if (row.meetingType === 1) {
        let params = {
          meetingId: row.id,
          weeks: row.weeks
        }
        this.$router.push({path: '/meeting/weeklyRecords', query: params});
        return
      }
      this.meetingForm = row

    },
    /** 获取待确认领取物品 */
    getAssetReceive() {
      personReceive().then(res => {
        let filter = res.data.filter(item => item.receiveConfirm != '1');
        this.toBeConfirmReceiveNum = filter.length
      })
    },
    getTodoMeetinStatisticss() {
      getTodoMeetinStatistics().then(res => {
        let data = res.data
        this.todoMeetingCount = data.todoMeetingCount
        this.todoMeetingConfirmCount = data.todoMeetingConfirmCount
      })
    },
    getEnforceRemindCounts() {
      getEnforceRemindCount().then(res => {
        let data = res.data;
        this.enforceRemindCount = data.enforceRemindCount
      })
    },
    toTaskView() {
      this.$router.push(`/task/view`)
    },
    toMyReceive() {
      this.$router.push(`/material/myReceive`)
    },
    enforceTasksClick() {
      this.$router.push('/enforceflow/enforceflow')
    },
    todoMeetingClick() {
      this.$router.push('/meeting/meeting')
    },
    enforceRemindClick() {
      this.$router.push('/enforceflow/enforceflow')
    },

    handleAudit() {
      if (this.auditTasks.length === 0) {
        this.auditCancel();
        return
      }
      this.carouselNum = this.auditTasks.length
      let auditTask = this.auditTasks[0];
      getTask(auditTask.id).then(res => {
        this.detailForm = res.data;
        this.auditForm = {
          taskId: auditTask.id,
          auditResult: undefined,
          value: undefined,
          auditOpinion: undefined
        }
        if (this.auditOpen) {
          let refs = this.$refs.auditForm
          for (let key in refs) {
            refs[key].resetFields()
            refs[key].clearValidate()
          }
        }
        this.auditOpen = true;
      })
    },

    auditTaskChange(currIndex, oldIndex) {
      let refs = this.$refs.auditForm
      for (let key in refs) {
        refs[key].resetFields()
        refs[key].clearValidate()
      }
      let auditTask = this.auditTasks[currIndex];
      getTask(auditTask.id).then(res => {
        this.detailForm = res.data;
        this.auditForm = {
          taskId: auditTask.id,
          auditResult: undefined,
          value: undefined,
          auditOpinion: undefined
        }
      })
    },

    /** 审核提交按钮 */
    submitAudit(index) {
      let currAuditForm = this.$refs.auditForm[index - 1]
      currAuditForm.validate(valid => {
        if (valid) {
          auditTask(this.auditForm).then(res => {
            this.$message.success("操作成功");
            this.auditTasks.splice(index - 1, 1)
            this.handleAudit();
          })
        }
      });
    },

    // 取消按钮（详情/审核）
    auditCancel() {
      // this.detailForm = {};
      this.auditForm = {
        taskId: undefined,
        auditResult: undefined,
        value: undefined,
        auditOpinion: undefined
      }
      let refs = this.$refs.auditForm
      for (let key in refs) {
        refs[key].resetFields()
        refs[key].clearValidate()
      }
      this.auditOpen = false;
    },

  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.head-tips {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 200px;
  height: 100px;
  //background-color: #3F71A4;
  margin: 10px;
  display: flex;

  .card-text {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-left {
      font-size: 60px;
      text-align: left;
      color: #f7b51c;
    }

    .card-right {
      margin-left: 20px;
      text-align: center;
    }

    .card-text-title {
      font-size: 13px;
      margin-bottom: 10px;
    }

    .card-text-val {
      font-size: 28px;
      color: #9da0a3;
    }
  }
}

.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 10px;
}

.i-audit-dialog ::v-deep .el-dialog__body {
  padding: 0 20px 0px 20px;
}

.footer-btn {
  margin-left: 720px;
}
</style>