aivfo-oa-web/src/views/task/components/taskDetail.vue

<template>
  <div class="task-detail">
    <el-descriptions class="margin-top" :column="7" direction="vertical">
      <el-descriptions-item label="负责人">
        <div class="desc-item-content">{{ form.executorName }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="当前状态">
        <el-tag size="mini" :type="statusMap[form.status].type">
          <!--          {{ statusMap[form.status].name }}-->
          {{ getStatusName(form.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="进度" :span="2">
        <div style="padding: 0 60px 0 0">
          <el-progress :percentage="form.progressValue" :text-inside="true" :stroke-width="15"
                       :color="cellColorMap[form.status]"></el-progress>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="优先级">
        <el-tag :color="priorityColorMap[form.priority]" effect="dark" :hit="false">
          {{ getTaskPriority(form.priority) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="开始时间">
        <div class="desc-item-content">{{ form.beginDate }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="结束时间">
        <div class="desc-item-content">{{ form.endDate }}</div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions>
      <el-descriptions-item label="父任务">
        <div v-if="form.ancestorsTask&&form.ancestorsTask.length>0">
          <template v-for="item in form.ancestorsTask">
            <span class="p-task" @click="toTask(item.id)">{{ item.id + '、' + item.taskName }}</span><i
            class="el-icon-arrow-right"></i>
          </template>
          <span>当前任务</span>
        </div>
        <div v-else>无</div>
      </el-descriptions-item>
    </el-descriptions>

    <el-tabs v-model="activeName">
      <el-tab-pane name="first">
        <span slot="label"><i class="el-icon-info"></i><span style="margin-left: 5px">任务信息</span></span>

        <el-form :model="form" size="mini" label-width="100px">
          <el-form-item label="所属项目：">
            <div>{{ form.projectName }}</div>
          </el-form-item>
          <!--          <el-form-item label="父任务：" v-if="form.parentTaskId">-->
          <!--            <div class="p-task" @click="getParentTask(form.parentTaskId)">{{ form.parentTaskName }}</div>-->
          <!--          </el-form-item>-->
          <el-form-item label="附件：">
            <div v-if="form.fileList.length>0">
              <div v-for="(file,index) in form.fileList">
                <a :href="file.url">
                  <span class="file">{{ file.name }}</span>
                </a>
              </div>
            </div>
            <div v-else>无</div>
          </el-form-item>
          <el-form-item label="任务描述：">
            <div v-if="form.description" v-html="form.description" class="description"></div>
            <div v-else>无</div>
          </el-form-item>
        </el-form>

        <div class="footer">
          <div>
            <span>{{ form.createUserName }}</span>
            <span style="margin-left: 5px;margin-right: 5px">创建于</span>
            <span>{{ form.createTime }}</span>
          </div>
          <el-divider direction="vertical" v-if="form.updateUserName"></el-divider>
          <div v-if="form.updateUserName">
            <span>{{ form.updateUserName }}</span>
            <span style="margin-left: 5px;margin-right: 5px">更新于</span>
            <span>{{ form.updateTime }}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label"><i class="el-icon-document"></i>
          <span style="margin-left: 5px">反馈信息({{ form.feedbacks.length }})</span>
        </span>
        <el-table :data="form.feedbacks" size="mini" max-height="400" border>
          <el-table-column width="75" label="反馈状态">
            <template slot-scope="scope">
              <div>{{ getFeedbackTypeName(scope.row.feedbackType) }}</div>
            </template>
          </el-table-column>
          <el-table-column width="60" property="userName" label="反馈人"></el-table-column>
          <el-table-column width="60" label="完成度">
            <template slot-scope="scope">
              <div v-if="scope.row.value!==undefined">{{ scope.row.value + '%' }}</div>
            </template>
          </el-table-column>
          <el-table-column width="120" property="createTime" label="反馈时间">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column width="70" property="hours" label="工时(h)"></el-table-column>
          <el-table-column label="反馈备注">
            <template slot-scope="scope">
              <span>{{ scope.row.description }}</span>
              <span v-for="(file,index) in scope.row.fileList">
              <a :href="file.url" style="color: darkgreen">
                <span style="margin-left: 5px">{{ file.name }}</span>
              </a>
          </span>
            </template>
          </el-table-column>
          <el-table-column label="当前达成进度" width="100px">
            <template slot-scope="scope">
              <el-popover
                v-if="scope.row.descriptionDetail&&scope.row.descriptionDetail.length>0"
                placement="top"
                width="600"
                trigger="hover">
                <div v-html="scope.row.descriptionDetail"></div>
                <el-button slot="reference" type="text">详情</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="子任务" name="third">
          <span slot="label"><i class="el-icon-more"></i>
            <span style="margin-left: 5px">子任务({{ form.children.length }})</span>
          </span>
        <el-table :data="form.children"
                  max-height="400"
                  size="mini"
                  @cell-mouse-enter="cellMouseEnter"
                  @cell-mouse-leave="cellMouseLeave"
                  @cell-click="cellClick">
          <el-table-column width="70" prop="id" label="编号"></el-table-column>
          <el-table-column label="任务名称" prop="taskName" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column label="执行(负责)人" prop="executorName" width="100"/>
          <el-table-column label="进度" prop="progressValue" width="70">
            <template slot-scope="scope">
              <span>{{ (scope.row.progressValue ? scope.row.progressValue : 0) + '%' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="80">
            <template slot-scope="scope">
              <el-tag size="mini" :type="statusMap[scope.row.status].type">{{
                  statusMap[scope.row.status].name
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="优先级" prop="priority" align="center" width="80">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.priority==='1'" color="#fa8888" effect="dark" :hit="false">
                {{ getTaskPriority(scope.row.priority) }}
              </el-tag>
              <el-tag v-else-if="scope.row.priority==='2'" color="#fb7fb7" effect="dark" :hit="false">
                {{ getTaskPriority(scope.row.priority) }}
              </el-tag>
              <el-tag v-else-if="scope.row.priority==='3'" color="#40e0c3" effect="dark" :hit="false">
                {{ getTaskPriority(scope.row.priority) }}
              </el-tag>
              <el-tag v-else color="#5dcfff" effect="dark" :hit="false">{{
                  getTaskPriority(scope.row.priority)
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="开始时间" prop="beginDate" width="100"/>
          <el-table-column label="结束时间" prop="endDate" width="100"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="修改日志" name="four">
        <span slot="label"><i class="el-icon-edit"></i>
          <span style="margin-left: 5px">修改日志({{ form.updateLogs.length }})</span>
        </span>
        <el-table :data="form.updateLogs"
                  max-height="400"
                  size="mini">
          <el-table-column label="修改项" prop="fieldName" width="90">
            <template slot-scope="scope">
              <span>{{ getFieldName(scope.row.field) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="旧值" prop="oldValue" min-width="150" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-html="scope.row.oldValue"></div>
            </template>
          </el-table-column>
          <el-table-column label="新值" prop="newValue" min-width="150" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-html="scope.row.newValue"></div>
            </template>
          </el-table-column>
          <el-table-column label="修改人" prop="operatorName" width="90"/>
          <el-table-column label="修改时间" prop="createTime" width="120">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {getTask} from "@/api/task/task";
import task from "@/views/mixins/task";
import DateUtil from "@/utils/date"

export default {
  name: "taskDetail",
  mixins: [task],
  dicts: ['task_status', 'task_priority'],
  props: {
    detailForm: {
      type: Object,
      default: {}
    }
  },
  watch: {
    detailForm(val) {
      this.activeName = 'first'
      if (val && JSON.stringify(val) != '{}') {
        this.form = val
      }
    }
  },
  data() {
    return {
      form: {},
      activeName: 'first'
    }
  },
  created() {
    this.form = this.detailForm
  },
  methods: {
    getFeedbackTypeName(type) {
      if (type === '1') {
        return '进度反馈'
      } else if (type === '2') {
        return '完成'
      } else if (type === '3') {
        return '终止'
      } else if (type === '4') {
        return '评论'
      }
      return '审批'
    },
    toTask(id) {
      getTask(id).then(res => {
        this.form = res.data;
        this.activeName = 'first'
      })
    },
    cellClick(row, column, cell, event) {
      if (column.property != 'taskName') {
        return
      }
      getTask(row.id).then(res => {
        this.form = res.data;
        this.activeName = 'first'
      })
    },
    getStatusName(status) {
      let name = this.statusMap[status].name
      if (status === '6') {
        let result = DateUtil.compare(this.detailForm.endDate, this.detailForm.finishDate);
        let temp = result < 0 ? '延期' : '正常'
        name = name + '(' + temp + ')'
      }
      return name
    }
  }
}
</script>

<style scoped lang="scss">
.task-detail {
  height: 500px;
}

.desc-item-content {
  font-size: 14px;
  font-weight: bold;
}

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

.task-detail ::v-deep.el-tabs__header {
  margin: 0 0 5px;
}

.p-task {
  color: #1c84c6;
  cursor: pointer;
}

.p-task:hover {
  text-decoration-line: underline;
  text-decoration-color: #1c84c6;
}

.file {
  margin-right: 10px;
  color: darkgreen;
}

.file:hover {
  text-decoration-line: underline;
  text-decoration-color: darkgreen;
}

.description {
  margin-top: -13px;
  max-height: 270px;
  overflow: auto;
}

.footer {
  margin-top: 10px;
  margin-left: 10px;
  display: flex;
  justify-content: start;
  color: #aaaaaa;
}

.el-tag--dark {
  border-color: white;
}
</style>