wt_project_web_bak/src/views/task/component/task-table.vue

<template>
  <div>
    <div class="full-width flex flex-center flex-justify-between">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addTask"
        v-if="option.addBtn || option.addBtn === undefined"
        >新增任务
      </el-button>
      <div v-else></div>
      <el-button circle icon="Refresh" @click="refresh" />
    </div>
    <div class="header flex flex-justify-between full-width mt-10">
      <div
        v-for="(item, index) in option.column"
        :key="item.label"
        class="full-width"
      >
        <div
          v-if="index === 0"
          class="flex-child-shrink flex flex-justify-start first"
          :style="`width:` + item.width + 'px'"
        >
          共 {{ total }}个任务
        </div>
        <div v-else class="flex-child-average">
          {{ item.label }}
        </div>
      </div>
    </div>
    <div class="content full-width">
      <div
        v-for="row in data"
        :key="row.id"
        class="flex flex-center full-width row"
        @click="rowClick(row)"
      >
        <div
          v-for="(column, index) in option.column"
          :key="column.label"
          class="full-width full-height"
        >
          <div
            v-if="index === 0"
            class="full-height flex flex-center flex-justify-start"
            :style="`width:` + column.width + 'px'"
          >
            <div
              class="full-width full-height flex flex-justify-start flex-align-center"
            >
              <div
                class="level"
                :style="
                  `background-color:` +
                  (row && row.currentLevel ? row.currentLevel.color : 'white')
                "
              ></div>
              <wt-tag
                :data="status"
                :status="row.taskStatus"
                :disabled="true"
              />
              {{ row[column.prop] }}
            </div>
          </div>
          <div v-else-if="index === 1" class="flex flex-center full-height">
            {{ row[column.prop] }}
          </div>
          <div
            v-else-if="index === 2"
            class="flex-child-average full-height full-width flex flex-center"
          >
            <div>
              <el-tag v-for="tag in row.tagsArray" :key="tag" class="mr-10"
                >{{ tag }}
              </el-tag>
            </div>
          </div>
          <div
            v-else-if="index === 3"
            class="flex-child-average full-height full-width flex flex-center"
          >
            <div>
              <div v-if="row.startTime.length > 0 && row.endTime.length === 0">
                {{ row.startTime.substring(5) }} 开始
              </div>
              <div
                v-else-if="row.startTime.length === 0 && row.endTime.length > 0"
              >
                {{ row.endTime.substring(5) }} 截止
              </div>
              <div v-else>
                {{ row.startTime.substring(5) }} 至
                {{ row.endTime.substring(5) }}
              </div>
            </div>
          </div>
          <div
            v-else
            class="flex-child-average full-height full-width flex flex-center"
          >
            <div v-if="row.users !== undefined" class="flex flex-center">
              <div v-for="i in row.users" :key="i.id" class="flex flex-center">
                <el-tooltip :content="i.name">
                  <el-avatar
                    class="ml-10 mr-10"
                    :size="25"
                    :src="
                      i.avatar.length === 0
                        ? 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                        : i.avatar
                    "
                  ></el-avatar>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <task
      ref="task"
      :task="task"
      :project-id="projectId"
      @success="refresh"
    ></task>
  </div>
</template>

<script>
import WtTag from '@/views/task/component/wt-tag.vue'
import Task from '@/views/task/component/task.vue'

export default {
  components: { Task, WtTag },
  props: {
    projectId: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: []
    },
    option: {
      type: Object,
      default: null
    },
    total: {
      type: Number,
      default: 0
    }
  },
  watch: {
    data: {
      handler(val) {
        val.forEach(item => {
          const tmp = this.level.find(ele => ele.value === item.level)
          item.currentLevel = tmp
        })
      },
      immediate: true
    }
  },
  data() {
    return {
      task: null,
      info: {
        taskStatus: ''
      },
      status: [
        {
          title: '待确认',
          value: 0,
          color: '#D7D7D7',
          checked: true
        },
        {
          title: '进行中',
          value: 1,
          color: '#47A6EA',
          checked: false
        },
        {
          title: '已提交',
          value: 2,
          color: '#ECAB56',
          checked: false
        },
        {
          title: '已完成',
          value: 3,
          color: '#80B336',
          checked: false
        },
        {
          title: '已取消',
          value: 4,
          color: '#C72A29',
          checked: false
        }
      ],
      level: [
        {
          title: 'P1',
          value: 0,
          color: '#C72A29',
          checked: true
        },
        {
          title: 'P2',
          value: 1,
          color: '#E89D42',
          checked: false
        },
        {
          title: 'P3',
          value: 2,
          color: '#47A6EA',
          checked: false
        },
        {
          title: 'P4',
          value: 3,
          color: '#A0A0A0',
          checked: false
        }
      ]
    }
  },
  methods: {
    fetchIndex(list, key) {
      const index = list.findIndex(ele => ele.value === key)
      if (index > -1) {
        list.map(ele => {
          ele.checked = false
          return ele
        })
        list[index].checked = true
      }
      return list
    },
    addTask() {
      this.task = null
      this.$refs.task.show(1)
    },
    rowClick(item) {
      this.getTaskInfo(item.id)
      this.$emit('rowClick', item)
    },
    getTaskInfo(id) {
      this.$api.task.taskInfo({ id }).then(res => {
        if (res.code === 200) {
          this.task = res.data
          this.$nextTick(() => {
            this.$refs.task.show(2)
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    refresh() {
      this.$emit('refresh')
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  border-bottom: #f7f8fa solid 1px;
  padding: 10px 0;
}

.first {
  width: 600px;
}

.row {
  height: 60px;
  border-bottom: #f7f8fa solid 1px;
}

.row:hover {
  height: 60px;
  background-color: #f7f9fc;
}

.level {
  width: 5px;
  height: 100%;
  margin-right: 10px;
}
</style>