aivfo-oa-web/src/views/task/projectView.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true">
      <el-form-item label="所属项目" prop="projectId">
        <el-cascader
          :options="projectTree"
          @change="selectProjectChange"
          :props="{ expandTrigger: 'hover',value:'id',label:'name', checkStrictly: true }"
          collapse-tags
          :show-all-levels="false" clearable></el-cascader>
      </el-form-item>
      <el-form-item label="负责人" prop="executors">
        <dept-user-tree ref="dut" :userList="userList" :multiple="true"
                        @selected="selectExecutors"></dept-user-tree>
      </el-form-item>
      <el-form-item label="日期" prop="startDate">
        <el-date-picker
          v-model="queryParams.startDate"
          type="date"
          value-format="yyyy-MM-dd"
          @change="getList"
          placeholder="开始日期"
          :clearable="false"
          style="width: 130px">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="至" prop="endDate">
        <el-date-picker
          v-model="queryParams.endDate"
          type="date"
          value-format="yyyy-MM-dd"
          @change="getList"
          placeholder="结束日期"
          :clearable="false"
          style="width: 130px">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="status">
        <el-radio-group v-model="queryParams.status" size="mini" @change="getList">
          <el-radio-button
            v-for="dict in dict.type.task_status"
            :key="dict.value"
            :label="dict.value"
          >{{ dict.label }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="priority">
        <el-select
          v-model="queryParams.priority"
          @change="getList"
          clearable
          placeholder="优先级"
          style="width: 85px">
          <el-option
            v-for="dict in dict.type.task_priority"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value">
            <el-tag :color="priorityColorMap[dict.value]" effect="dark" :hit="false">
              {{ dict.label }}
            </el-tag>
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-table
      class="view-table"
      v-loading="loading"
      :data="tableData"
      v-el-table-infinite-scroll="loadData"
      :infinite-scroll-disabled="disabled"
      size="mini"
      @cell-mouse-enter="cellMouseEnter"
      @cell-mouse-leave="cellMouseLeave"
      :cell-style="cellStyle"
      @cell-click="cellClick"
      @cell-dblclick="cellDbClick"
      @row-click="rowClick"
      height="calc(100vh - 110px)"
      row-key="id"
      lazy
      :indent="10"
      :load="loadChildren"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      border>
      <el-table-column fixed prop="id" header-align="center" label="编号"/>
      <el-table-column fixed prop="taskName" label="任务名称" align="center" class="task-name-cell" width="180"/>
      <el-table-column fixed prop="executorName" label="主负责人" align="center" width="90">
        <template slot-scope="scope">
          <div style="line-height: 15px">{{ scope.row.executorName }}</div>
          <el-tag size="mini" :type="statusMap[scope.row.status].type">
            {{ statusMap[scope.row.status].name + ' ' + scope.row.progressValue + '%' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed prop="" label="优先级" align="center" width="60">
        <template slot-scope="scope">
          <el-tag :color="priorityColorMap[scope.row.priority]" effect="dark" :hit="false">
            {{ getTaskPriority(scope.row.priority) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" v-for="header in tableHeaders" :key="header.day" :prop="header.day" width="42">
        <template slot="header">
          <div style="width:32px;font-size: 10px;text-align: center">{{ header.day }}</div>
          <div v-if="header.week=='周六'" class="view-cell" style="color: #1c84c6">{{ header.week }}</div>
          <div v-else-if="header.week=='周日'" class="view-cell" style="color: #1c84c6">{{ header.week }}</div>
          <div v-else-if="header.week=='今日'" class="view-cell" style="color: #008000">{{ header.week }}</div>
          <div v-else class="view-cell">{{ header.week }}</div>
        </template>
        <template slot-scope="scope">
          <span v-if="scope.row[header.day].comment" class="comment-badge"></span>
          <div v-popover:popover style="font-size: 10px;cursor: pointer">{{ scope.row[header.day].value }}</div>
        </template>
      </el-table-column>
    </el-table>

    <el-popover
      ref="popover"
      placement="top"
      width="700"
      v-model="popoverVisible"
      trigger="manual">
      <el-table :data="feedbacks" border size="mini">
        <el-table-column width="75" label="反馈状态">
          <template slot-scope="temp">
            <div>{{ getFeedbackTypeName(temp.row.feedbackType) }}</div>
          </template>
        </el-table-column>
        <el-table-column width="60" property="userName" label="反馈人"></el-table-column>
        <el-table-column width="55" label="完成度">
          <template slot-scope="temp">
            <div>{{ temp.row.feedbackType === '4' ? '' : temp.row.value + '%' }}</div>
          </template>
        </el-table-column>
        <el-table-column width="60" prop="hours" label="工时(h)"></el-table-column>
        <el-table-column width="110" property="createTime" label="反馈时间">
          <template slot-scope="temp">
            <div>{{ parseTime(temp.row.createTime) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="反馈备注">
          <template slot-scope="temp">
            <div>
              <span style="margin-right: 5px">{{ temp.row.description }}</span>
              <span v-for="(file,index) in temp.row.fileList">
                      <a :href="file.url" style="color: darkgreen">
                                  <span style="margin-left: 5px">{{ file.name }}</span>
                      </a>
                    </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="当前达成进度" width="100px">
          <template slot-scope="temp">
            <el-popover
              v-if="temp.row.descriptionDetail&&temp.row.descriptionDetail.length>0"
              placement="top"
              width="600"
              trigger="hover">
              <div v-html="temp.row.descriptionDetail"></div>
              <el-button slot="reference"
                         type="text">详情
              </el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-popover>


    <el-dialog title="添加评论" :visible.sync="open" width="680px" class="feed-dialog" append-to-body @close="cancel">
      <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="100px">
        <el-form-item label="任务名称">
          <div>{{ form.taskName }}</div>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属项目">
              <div>{{ form.projectName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="反馈时间">
              <div>{{ form.feedbackDate }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="附件" prop="fileUrl">
          <file-upload ref="fu" @getFileUrl="getFileUrl" @removeFile="removeFile"></file-upload>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="form.description" type="textarea" autosize/>
        </el-form-item>
        <el-form-item label="描述详情" prop="descriptionDetail">
          <rich-text-editor v-model="form.descriptionDetail"></rich-text-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" size="mini">确 定</el-button>
        <el-button @click="cancel" size="mini">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="openDetail" width="900px" class="feed-dialog" :close-on-click-modal="true"
               append-to-body>
      <task-detail :detailForm="detailForm"></task-detail>
    </el-dialog>

  </div>
</template>

<script>
import {
  getTask,
  listView,
  addTaskFeedback,
  getFeedbackList,
  confirmComment,
  listProjectView,
  childrenTask
} from "@/api/task/task";
import {getProjectList, getProjectTree} from "@/api/task/project";
import DateUtil from "@/utils/date"
import TaskDetail from "./components/taskDetail"
import FileUpload from "@/components/FileUpload"
import DeptUserTree from "@/components/DeptUserTree"
import RichTextEditor from "@/components/RichTextEditor"
import {getDeptUserTree} from "@/api/system/user";
import task from "@/views/mixins/task";
import elTableInfiniteScroll from 'el-table-infinite-scroll'

export default {
  components: {TaskDetail, FileUpload, DeptUserTree, RichTextEditor},
  dicts: ['task_status', 'task_priority'],
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  mixins: [task],
  data() {
    return {
      queryParams: {
        projectId: undefined,
        startDate: undefined,
        endDate: undefined,
        status: '0',
        priority: undefined
      },
      loading: true,
      projectTree: [],
      userList: [],
      tableHeaders: [],
      totalData: [],
      disabled: false,
      tableData: [],
      page: 0,
      total: 0,
      popoverVisible: false,
      open: false,
      form: {},
      feedbacks: [],
      rules: {
        description: [
          {required: true, message: "描述不能为空", trigger: "blur"},
          {min: 3, max: 500, message: '长度在 3 到 500 个字符', trigger: 'blur'}
        ]
      },
      openDetail: false,
      detailForm: {},
    }
  },
  watch: {
    totalData: {
      handler(newVal, oldVal) {
        this.loadData()
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.$set(this.queryParams, 'startDate', DateUtil.beforeDay(null, 15))
      this.$set(this.queryParams, 'endDate', DateUtil.afterDay(null, 15))
      this.getList()
      getProjectTree().then(res => {
        this.projectTree = res.data
      })
      getDeptUserTree('1').then(res => {
        this.userList = res.data
      })
    },
    //项目选择事件
    selectProjectChange(val) {
      this.queryParams.projectId = val[val.length - 1]
      this.getList()
    },
    selectExecutors(val) {
      this.queryParams.executors = val
      this.getList()
    },
    getList() {
      if (DateUtil.unix(this.queryParams.startDate) > DateUtil.unix(this.queryParams.endDate)) {
        this.$message.warning("开始时间不能超过结束时间")
        return
      }
      let dayDiff = DateUtil.dayDiff(this.queryParams.startDate, this.queryParams.endDate);
      if (dayDiff > 366) {
        this.$message.warning("时间跨度不可超过一年")
        return
      }
      this.loading = true
      listProjectView(this.queryParams).then(res => {
        this.tableData = []
        this.page = 0
        this.disabled = false
        this.tableHeaders = res.data.headers
        this.totalData = res.data.data || []
        this.total = this.totalData.length > 0 ? Number.parseInt(this.totalData.length / 15) + 1 : 0
        this.loading = false
      })
    },
    loadData() {
      if (this.disabled) return;
      if (this.totalData.length === 0) return;
      if (this.page < this.total) {
        let temp = this.totalData.slice(this.page * 15, (this.page + 1) * 15)
        this.tableData = this.tableData.concat(temp);
      }
      this.page++;
      if (this.page === this.total) {
        this.disabled = true;
      }
    },

    cellStyle({row, column, rowIndex, columnIndex}) {
      let style = {
        fontSize: '12px',
        padding: '2px 0'
      }
      if (row[column.property]) {
        style.background = this.cellColorMap[row[column.property].color]
      }
      return style
    },

    cellClick(row, column, cell, event) {
      this.popoverVisible = false;
      clearTimeout(this.clickTimer);
      this.clickTimer = setTimeout(() => {
        if (!row[column.property].value || row[column.property].value === '') {
          return;
        }
        let date = row[column.property].date
        if (DateUtil.unix(date) > DateUtil.unix()) {
          return;
        }
        getFeedbackList(row.id, date).then(res => {
          this.feedbacks = res.data.map(item => {
            item['executor'] = row.executor
            return item
          })
        })
        this.$refs.popover.doDestroy(true);
        this.$nextTick(() => {
          this.$refs.popover.referenceElm = event.target;
          this.popoverVisible = true;
        });
      }, 300)

    },
    cellDbClick(row, column, cell, event) {
      clearTimeout(this.clickTimer);
      this.popoverVisible = false;
      if (row.status === '4' || row.status === '5') {
        return;
      }
      let feedbackDate = DateUtil.getFeedBackDate(this.queryParams.startDate, this.queryParams.endDate, column.property)
      if (DateUtil.unix(feedbackDate) > DateUtil.unix()) {
        this.$message.warning("评论时间不能超过:" + DateUtil.day())
        return;
      }
      this.form = {
        id: undefined,
        taskName: row.taskName,
        taskId: row.id,
        projectName: row.projectName,
        feedbackDate: feedbackDate,
        feedbackType: '4',
        fileUrl: undefined,
        description: undefined
      };
      this.open = true
    },
    rowClick(row, column, event) {
      if (column.property != "taskName") {
        return
      }
      getTask(row.id).then(res => {
        this.detailForm = res.data
        this.openDetail = true
      })
    },
    feedbackTypeChange(val) {
      if (val === '2') {
        this.form.value = 100
      } else {
        this.form.value = undefined
      }
    },
    // 取消按钮
    cancel() {
      this.$refs.fu.clear()
      this.reset();
      this.open = false;
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        taskName: undefined,
        taskId: undefined,
        projectName: undefined,
        feedbackDate: undefined,
        feedbackType: undefined,
        value: undefined,
        hours: undefined,
        fileUrl: undefined,
        description: undefined
      };
      this.resetForm("form");
    },
    getFileUrl(val) {
      this.form['files'] = val
    },
    removeFile(val) {
      this.form.files = val
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.files) {
            let files = this.form.files.map(item => item.name);
            this.form.fileUrl = JSON.stringify(files)
          }
          let descriptionDetail = _.cloneDeep(this.form.descriptionDetail)
          if (!this.checkRichText(descriptionDetail)) {
            this.form.descriptionDetail = null
          }
          addTaskFeedback(this.form).then(res => {
            this.$message.success("评论成功");
            this.open = false;
            this.getList();
          });
        }
      })
    },

    getFeedbackTypeName(type) {
      if (type === '1') {
        return '进度反馈'
      } else if (type === '2') {
        return '完成'
      } else if (type === '3') {
        return '终止'
      } else if (type === '4') {
        return '评论'
      }
      return '审批'
    },
    /** 确认收到评论 */
    confirmComment(row) {
      confirmComment({feedbackId: row.id}).then(res => {
        if (res.code === '2000') {
          this.getList()
        }
      })
    },

    loadChildren(tree, treeNode, resolve) {
      let params = {
        projectId: this.queryParams.projectId,
        startDate: this.queryParams.startDate,
        endDate: this.queryParams.endDate,
        status: this.queryParams.status,
        priority: undefined,
        parentTaskId: tree.id
      }
      childrenTask(params).then(res => {
        resolve(res.data)
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep.el-table .cell {
  padding-left: 5px;
  padding-right: 5px;
}

::v-deep.el-table th.el-table__cell > .cell {
  padding-left: 5px;
  padding-right: 5px;
}

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

.view-cell {
  width: 32px;
  font-size: 10px;
  text-align: center
}

.comment-badge {
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: #409eff;
  position: absolute;
  top: 1px;
  right: 1px;
  font-size: 8px;
  color: white;
  vertical-align: text-top;
}

.feed-dialog ::v-deep .el-dialog__body {
  padding: 0 20px 10px 20px;
}

.el-tag--dark {
  border-color: white;
}

</style>