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

<template>
  <el-dialog v-model="showDialog" width="800">
    <template #header>
      <div class="full-width flex flex-center flex-justify-between">
        <h4>任务详情</h4>
      </div>
    </template>
    <div>
      <el-input v-model="form.title" placeholder="请输入任务名称"></el-input>
      <div class="mt-10">
        <div class="flex flex-center flex-justify-start">
          <span class="mr-10 title flex flex-justify-start">状态:</span>
          <wt-tag :data="status" @change="changeStatus($event, 1)" />
        </div>

        <div class="mt-10 flex flex-center flex-justify-start">
          <span class="mr-10 title flex flex-justify-start">优先级:</span>
          <wt-tag :data="level" @change="changeStatus($event, 2)" />
        </div>

        <div class="mt-10 flex flex-center flex-justify-start">
          <span class="mr-10 title flex flex-justify-start">时间:</span>
          <div class="flex flex-center">
            <el-date-picker
              v-model="form.startTime"
              type="date"
              placeholder="设置开始日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
            <div class="ml-5 mr-5">至</div>
            <el-date-picker
              v-model="form.endTime"
              type="date"
              placeholder="设置截止日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </div>
        </div>

        <div class="mt-10 flex lex-align-start flex-justify-start">
          <span class="mr-10 title flex flex-justify-start">标签:</span>
          <div>
            <wt-label @submit="handleTags" />
          </div>
        </div>
        <div class="mt-10 flex lex-align-start flex-justify-start">
          <span class="mr-10 title flex flex-justify-start">执行者:</span>
          <div>
            <tasker :data="task.users" @success="selected" />
          </div>
        </div>
        <div class="mt-10 flex flex-align-start flex-justify-start">
          <span class="mr-10 title flex flex-justify-start">备注:</span>
          <el-input type="textarea" :rows="5" v-model="form.remark"></el-input>
        </div>

        <div class="mt-10 flex flex-align-start flex-justify-start flex-col">
          <div class="flex flex-center flex-justify-start">
            <span class="mr-10 title flex flex-justify-start">关联附件:</span>
            <filepicker :project-id="projectId" @submit="selection" />
          </div>
          <div class="flex flex-center flex-justify-start full-width mt-10">
            <div class="title mr-10"></div>
            <div>
              <div v-for="item in fileList" :key="item.id">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>

        <div class="flex flex-justify-start full-width flex-col">
          <div class="mt-10 flex flex-align-start flex-justify-start">
            <span class="mr-10 title flex flex-justify-start">任务进展:</span>
            <el-input
              type="textarea"
              :rows="5"
              v-model="form.taskProcess"
            ></el-input>
          </div>
          <div class="flex flex-justify-start flex-center mt-10 full-width">
            <div class="title mr-10" />
            <el-icon>
              <Paperclip />
            </el-icon>
            <div>附件</div>
          </div>
        </div>
      </div>
      <div class="flex flex-justify-end full-width">
        <el-button type="primary" plain @click="showDialog = false"
          >取 消
        </el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import WtTag from '@/views/task/component/wt-tag.vue'
import Tasker from '@/views/task/component/tasker.vue'
import filepicker from '@/components/filepicker/index.vue'
import WtLabel from '@/views/task/component/wt-label.vue'

export default {
  components: { WtLabel, Tasker, WtTag, filepicker },
  props: {
    projectId: {
      type: String,
      default: ''
    },
    task: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  watch: {
    task: {
      handler(val) {
        if (val) {
          this.form = val
          this.status = this.fetchIndex(this.status, this.form.taskStatus)
          this.level = this.fetchIndex(this.level, this.form.level)
          if (val.files !== undefined && val.files.length > 0) {
            this.fileList = val.files.map(ele => {
              return {
                fileId: ele.id,
                title: ele.title
              }
            })
          }
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      showDialog: false,
      fileList: [],
      form: {
        title: '',
        taskStatus: '',
        level: '',
        remark: '',
        startTime: '',
        endTime: '',
        executeUser: '',
        tags: '',
        taskProcess: ''
      },
      status: [
        {
          title: '待确认',
          value: 0,
          color: '#D7D7D7',
          checked: true
        },
        {
          title: '进行中',
          value: 1,
          color: '#47A6EA',
          checked: false
        },
        {
          title: '已完成',
          value: 2,
          color: '#80B336',
          checked: false
        },
        {
          title: '已关闭',
          value: 3,
          color: '#ECAB56',
          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
    },
    show() {
      this.showDialog = true
    },
    changeStatus(res, type) {
      if (type === 1) {
        this.form.taskStatus = res.value
      } else {
        this.form.level = res.value
      }
    },
    submit() {
      this.form.projectId = this.projectId
      this.form.relatedIds = this.fileList.map(ele => ele.fileId).join(',')
      this.$api.task.addTask(this.form).then(res => {
        this.showDialog = false
        if (res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    selection(list) {
      this.fileList = list.map(ele => {
        return {
          fileId: ele.id,
          title: ele.title
        }
      })
    },
    selected(list) {
      this.form.executeUser = list.map(ele => ele.id).join(',')
    },
    handleTags(tags) {
      this.form.tags = tags
    },
    close() {
      this.form = {}
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  min-width: 60px;
}

:deep(.el-input__wrapper) {
  box-shadow: none;
  font-weight: bold;
  font-size: 16px;
  background-color: #eeeeee;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: none;
  background-color: #eeeeee;
}
</style>