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

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true">
      <!--      <el-form-item label="所属项目" prop="projectId">-->
      <!--        <el-cascader-->
      <!--          v-model="queryParams.projectId"-->
      <!--          :options="projectTree"-->
      <!--          @change="selectProjectChange"-->
      <!--          :props="{ expandTrigger: 'hover',value:'id',label:'name', checkStrictly: true }"-->
      <!--          collapse-tags-->
      <!--          :show-all-levels="false"></el-cascader>-->
      <!--      </el-form-item>-->
      <el-form-item label="日期" prop="month">
        <el-date-picker
          v-model="queryParams.month"
          type="daterange"
          value-format="yyyy-MM-dd"
          @change="getList"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
          style="width: 220px">
        </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>

    <el-table
      class="view-table"
      :data="tableData"
      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 - 140px)"
      border>
      <el-table-column fixed prop="id" label="编号" align="center" width="50"/>
      <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="上月延期" width="40">
        <template slot-scope="scope">
          <span v-if="scope.row.formLastMonth" style="color: red">是</span>
        </template>
      </el-table-column>
      <el-table-column align="center" v-for="item in tableHeaders" :key="item.day" :prop="item.day" width="37">
        <template slot="header">
          <div style="width:28px;font-size: 10px">{{ item.day }}</div>
          <div v-if="item.week=='周六'" style="width: 24px;font-size: 12px;color: #1c84c6">{{ item.week }}</div>
          <div v-else-if="item.week=='周日'" style="width: 24px;font-size: 12px;color: #1c84c6">{{ item.week }}</div>
          <div v-else-if="item.week=='今日'" style="width: 24px;font-size: 12px;color: #008000">{{ item.week }}</div>
          <div v-else style="width: 24px;font-size: 12px">{{ item.week }}</div>
        </template>
        <template slot-scope="scope">
          <span v-if="scope.row[item.day].comment" class="comment-badge"></span>
          <el-popover
            v-if="scope.row[item.day].value!=''"
            placement="top"
            width="680"
            trigger="click">
            <el-table :data="feedbacks" border size="mini">
              <el-table-column width="75" label="反馈状态">
                <template slot-scope="item">
                  <div>{{ getFeedbackTypeName(item.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="item">
                  <div>{{ item.row.feedbackType === '4' ? '' : item.row.value + '%' }}</div>
                </template>
              </el-table-column>
              <el-table-column width="110" property="createTime" label="反馈时间">
                <template slot-scope="item">
                  <div>{{ parseTime(item.row.createTime) }}</div>
                </template>
              </el-table-column>
              <el-table-column label="反馈备注">
                <template slot-scope="item">
                  <div>
                    <span style="margin: 0" v-html="item.row.description"></span>
                    <span v-for="(file,index) in item.row.fileList">
                                <a :href="file.url" style="color: darkgreen">
                                  <span v-html="file.fileName"></span>
                                </a>
                    </span>
                    <span
                      v-if="item.row.feedbackType === '4'&& scope.row.executor===userId && item.row.commentConfirm!='1'"
                      style="position: absolute;right: 2px;top:5px">
                    <el-button type="text" icon="el-icon-thumb" size="mini"
                               @click="confirmComment(item.row)">确认</el-button>
                    </span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div slot="reference" style="font-size: 10px">{{ scope.row[item.day].value }}</div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <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-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="反馈类型" prop="feedbackType">
              <el-radio-group v-model="form.feedbackType" @input="feedbackTypeChange">
                <el-radio
                  v-for="dict in dict.type.feedback_type"
                  :key="dict.value"
                  :label="dict.value"
                  v-if="dict.value<3"
                >{{ dict.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工时" prop="hours">
              <el-input v-model="form.hours" style="width: 130px"></el-input>
              <span style="margin-left: 5px">小时</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="进度" prop="value">
              <el-input-number v-model="form.value" controls-position="left" :min="1" :max="100"></el-input-number>
              <span>%</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="附件" prop="fileUrl">
              <file-upload @getFileUrl="getFileUrl" @removeFile="removeFile"></file-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="反馈描述" prop="description">
          <!--          <el-input v-model="form.description" type="textarea" autosize/>-->
          <rich-text-editor ref="rtEditor" @getHtml="(val)=>form.description=val"></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 title="任务详情" :visible.sync="openDetail" width="680px" class="feed-dialog" append-to-body>
      <task-detail :detailForm="detailForm"></task-detail>
    </el-dialog>

  </div>
</template>

<script>
import {getTask, listView, addTaskFeedback, getFeedbackList, confirmComment} from "@/api/task/task";
import DateUtil from "@/utils/date"
import TaskDetail from "./components/taskDetail"
import FileUpload from "@/components/FileUpload"
import RichTextEditor from '@/components/RichTextEditor'

import {mapGetters} from 'vuex'

const statusMap = {
  '0': {name: '待查看', type: 'info'},
  '1': {name: '未开始', type: 'info'},
  '2': {name: '进行中', type: ''},
  '3': {name: '延期', type: 'danger'},
  '4': {name: '完成', type: 'success'},
  '5': {name: '终止', type: 'warning'}
}

export default {
  components: {TaskDetail, FileUpload, RichTextEditor},
  dicts: ['task_status', 'feedback_type'],
  computed: {
    ...mapGetters(['userId'])
  },
  data() {
    let validateValue = (rule, value, callback) => {
      if (!Number.isInteger(value) || value < 0 || value > 100) {
        return callback(new Error('进度值必须为0到100的整数'));
      }
      if (!value) {
        return callback(new Error('进度不能为空'));
      }
      return callback();
    };
    let validateHours = (rule, value, callback) => {
      const regex = /^(?:[0-1]?\d|2[0-4])(\.5)?$/;
      if (!regex.test(value) || value < 0 || value > 24) {
        return callback(new Error('工时必须为0到24的数,最小维度为0.5小时'));
      }
      if (!value) {
        return callback(new Error('工时不能为空'));
      }
      return callback();
    };
    let validateDescription = (rule, value, callback) => {
      let text = value.replace('<p>', '').replace('</p>', '').replace('<br>', '').replace('&nbsp;', '')
      if (text === '') {
        return callback(new Error('反馈描述不能为空'));
      }
      if (text.length < 5) {
        return callback(new Error('反馈描述字符数不足'));
      }
      return callback();
    };

    return {
      queryParams: {
        projectId: undefined,
        month: [],
        status: '0',
        userId: undefined
      },
      projectTree: [],
      tableHeaders: [],
      tableData: [],
      statusMap: statusMap,
      open: false,
      form: {},
      feedbacks: [],
      rules: {
        feedbackType: [
          {required: true, message: "反馈类型不能为空", trigger: "change"}
        ],
        value: [
          {required: true, validator: validateValue, trigger: 'blur'}
        ],
        hours: [
          {required: true, validator: validateHours, trigger: 'blur'}
        ],
        description: [
          {required: true, validator: validateDescription, trigger: "blur"},
        ]
      },
      openDetail: false,
      detailForm: {},
      cellColorMap: {
        '1': '#fefeff',
        '2': '#a6a9ad',
        '3': '#f56c6c',
        '4': '#67c23a',
        '5': '#e6a23c',
      }
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      let today = new Date();
      let month = [DateUtil.beforeDay(today, 13), DateUtil.afterDay(today, 15)];
      this.$set(this.queryParams, 'month', month)
      this.getList()
      // getProjectTree().then(res => {
      //   this.projectTree = res.data
      // })
    },
    selectProjectChange(val) {
      this.queryParams.projectId = val[val.length - 1]
      this.getList()
    },
    getList() {
      if (this.queryParams.month && this.queryParams.month.length === 2) {
        this.queryParams.startDate = this.queryParams.month[0]
        this.queryParams.endDate = this.queryParams.month[1]
      }
      let dayDiff = DateUtil.dayDiff(this.queryParams.startDate, this.queryParams.endDate);
      if (dayDiff > 366) {
        this.$message.warning("时间跨度不可超过一年")
        return
      }
      this.queryParams.userId = this.userId
      listView(this.queryParams).then(res => {
        this.tableHeaders = res.data.headers
        this.tableData = res.data.data
      })
    },
    cellMouseEnter(row, column, cell, event) {
      if (column.property != 'taskName') {
        return
      }
      cell.style.color = '#306FB1';
      cell.style.textDecoration = 'underline';
    },
    cellMouseLeave(row, column, cell, event) {
      if (column.property != 'taskName') {
        return
      }
      cell.style.color = '#606266';
      cell.style.textDecoration = 'none';
    },
    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) {
      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
        })
      })
    },
    cellDbClick(row, column, cell, event) {
      let feedbackDate = DateUtil.getFeedBackDate(this.queryParams.month, 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: '1',
        value: undefined,
        hours: undefined,
        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.rtEditor.clear();
      this.open = false;
      this.reset();
    },
    // 表单重置
    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'] = this.form.files || []
      this.form.files.push(val)
    },
    removeFile(val) {
      this.form.files.splice(val)
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.fileUrl = JSON.stringify(this.form.files)
          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.$message.success("操作成功")
          this.getList()
        }
      })
    }
  }
}
</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;
}

.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;
}


</style>