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

<template>
  <div>
    <el-form :model="form" size="mini" label-width="100px">
      <el-form-item label="任务名称：">
        <div>{{ form.taskName }}</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>{{ form.projectName }}</div>
      </el-form-item>
      <el-form-item label="任务描述：">
        <div>{{ form.description }}</div>
      </el-form-item>
      <el-form-item label="起止时间：">
        <div>{{ form.beginDate + ' 至 ' + form.endDate }}</div>
      </el-form-item>
      <el-form-item label="主要负责人：">
        <div>{{ form.executorName }}</div>
      </el-form-item>
      <el-form-item label="共同执行人：">
        <template v-for="item in form.coExecutorNames">
          <el-tag size="mini" style="margin-right: 5px">{{ item }}</el-tag>
        </template>
      </el-form-item>
      <el-form-item label="附件：">
        <div v-for="(file,index) in form.fileList">
          <a :href="file.url" style="color: darkgreen">
            <span v-html="file.fileName"></span>
          </a>
        </div>
      </el-form-item>
    </el-form>
    <el-table :data="form.feedbacks" size="mini" 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="140" property="createTime" label="反馈时间"></el-table-column>
      <el-table-column width="70" property="hours" label="工时(h)"></el-table-column>
      <el-table-column label="反馈备注">
        <template slot-scope="scope">
          <div>
            <div v-html="scope.row.description"></div>
            <span v-for="(file,index) in scope.row.fileList">
              <a :href="file.url" style="color: darkgreen">
                <span v-html="file.fileName"></span>
              </a>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {getTask} from "@/api/task/task";

export default {
  name: "taskDetail",
  props: {
    detailForm: {
      type: Object,
      default: {}
    }
  },
  watch: {
    detailForm(val) {
      this.form = val
    }
  },
  data() {
    return {
      form: {}
    }
  },
  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 '审批'
    },
    getParentTask(id) {
      getTask(id).then(res => {
        this.form = res.data;
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 10px;
}

.p-task {
  color: #1c84c6;
  text-decoration: underLine
}
</style>