wt_project_web_bak/src/views/task/detail.vue

<template>
  <basic-container class='mt-10'>
    <div class='flex flex-align-start flex flex-col'>
      <span class='bold'>任务基本信息:</span>
      <el-divider/>
      <div v-if='taskInfo' class='flex flex-align-start flex-col '>
        <div>
          <span class='bold'>任务名称：</span>
          <span>{{ taskInfo.title }}</span>
        </div>
        <div class='mt-10'>
          <span class='bold'>任务说明：</span>
          <span>{{ taskInfo.remark }}</span>
        </div>
        <div class='mt-10'>
          <span class='bold'>任务时间：</span>
          <span>{{ taskInfo.startTime }} - {{ taskInfo.endTime }}</span>
        </div>
        <div class='mt-10'>
          <span class='bold'>任务状态：</span>
          <el-tag>{{ taskInfo.isCompleted === 0 ? '未完成':'已完成' }}</el-tag>
          <el-tag class='ml-10'>{{ taskInfo.isConfirmed === 0 ? '待确认':'已确认' }}</el-tag>
        </div>
      </div>
    </div>
  </basic-container>
  <basic-container>
    <div class='flex flex-align-start flex flex-col full-width '>
      <span class='bold'>任务相关文件夹:</span>
      <el-divider/>
      <div class='full-width flex flex-justify-between'>
        <el-button icon='back' type='primary'  @click='back'>
          返回上一级
        </el-button>
        <el-button icon='Check' type='primary' v-if='this.folderList.length === 0 && taskInfo && taskInfo.isCompleted === 0 ' @click='completeTask'>
          完成任务
        </el-button>
        <el-button icon='Check' type='primary' v-if='taskInfo && taskInfo.isConfirmed === 0 && view' @click='confirmTask'>
          确认任务
        </el-button>
      </div>
      <basic-curd class='full-width' :data='data' :option='taskOption' @row-view='rowDetail' @row-del='rowDel'>
        <template #menu='{row}'>
          <main-button title='提交文件' v-if='row.type === 2 && view !== true' icon='Position' @click='postFile(row)'/>
        </template>
      </basic-curd>
    </div>
<!--    upload-->
    <el-dialog v-model='show' title='上传文件'>
      <div>
        <el-upload
            drag
            :action="action"
            multiple
            accept='.doc,.docx,.pdf,.xls,.xlsx,.png,.jpg,.jpeg,.ppt,pptx'
            show-file-list
            :headers="{'Authorization':`Basic ${clientId}`}"
            :on-success='uploadSuccess'
        >
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            拖拽或者 <em>点击上传文件</em>
          </div>
        </el-upload>
        <el-divider/>
        <div class='flex flex-justify-end'>
          <el-button @click='show = false'>取 消</el-button>
          <el-button type='primary' @click='saveFile'>确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-image-viewer
        v-if='showImage'
        :url-list="imgList"
        @close='showImage = false'
    />
  </basic-container>
</template>
<route>
{
name: '任务详情'
}
</route>

<script>
import BasicContainer from '@/components/basic-container/main.vue'
import basicCurd from '@/components/basic-curd/index.vue'
import MainButton from '@/components/main-button.vue'
import api from '@/api/index.js'
import { Base64 } from 'js-base64'
import website from '@/config/website.js'

export default {
  name: 'detail',
  components: { MainButton, BasicContainer, basicCurd },
  data () {
    return {
      clientId: '',
      view: false,
      showImage: false,
      imgList: [],
      show: false,
      action: api.uploadPath,
      fileList: [],
      id: '',
      taskId: '',
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 10
      },
      isAccess: 3,
      current: null,
      currentFolder: null,
      taskInfo: null,
      folderList: [],
      resultFile: [],
      data: [],
      taskOption: {
        viewBtn: true,
        editBtn: false,
        delBtn: false,
        column: [
          {
            label: '文件夹',
            prop: 'folderName'
          },
          {
            label: '更新时间',
            prop: 'updateTime'
          },
          {
            label: '创建人',
            prop: 'createUserName'
          }
        ]
      }
    }
  },
  created () {
    this.id = this.$route.query.id
    this.taskId = this.$route.query.taskId
    this.clientId = Base64.encode(`${website.clientId}:${website.clientSecret}`)
    const viewtemp = this.$route.query.view
    if (viewtemp) {
      this.view = true
    }
    if (this.view) {
      this.confirmDetail()
    } else {
      this.detail()
    }
  },
  methods: {
    confirmDetail () {
      const data = { taskId: this.taskId }
      this.$api.task.confirmDetail(Object.assign(data, this.page)).then(res => {
        if (res.code === 200) {
          this.data = res.data.records.map(sub => {
            sub.parentId = 0
            sub.type = 2
            return sub
          })
          this.current = this.data[0]
          this.isAccess = this.data[0].isAccess
          this.taskInfo = this.data[0]
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    detail () {
      const data = { taskId: this.taskId }
      this.$api.task.detail(Object.assign(data, this.page)).then(res => {
        if (res.code === 200) {
          this.data = res.data.records.map(sub => {
            sub.parentId = 0
            sub.type = 2
            return sub
          })
          this.current = this.data[0]
          this.isAccess = this.data[0].isAccess
          this.taskInfo = this.data[0]
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    rowDel (row) {
      this.$api.task.taskRemove({ taskId: this.taskId, ids: row.id }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.data = this.data.filter(sub => sub.id !== row.id)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    rowDetail (row, index) {
      if (row.type === 2) {
        const data = { folderId: row.folderId, taskId: this.taskId }
        this.folderList.push(row)
        this.current = row
        this.current.parentId = row.folderId
        this.$api.task.fileList(data).then(res => {
          if (res.code === 200) {
            this.data = res.data.records.map(sub => {
              sub.folderName = sub.title
              // 继承上级的权限
              sub.isAccess = row.isAccess
              // rowDetail 需要folderId
              sub.folderId = sub.id
              return sub
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        if (api.offices.includes(row.suffix)) {
          const routeData = this.$router.resolve({ path: '/home/file_detail', query: { id: row.fileId } })
          window.open(routeData.href, '_blank')
        } else {
          this.imgList = [row.url]
          this.showImage = true
        }
      }
    },
    back () {
      if (this.folderList.length === 0) {
        this.$router.back()
        return
      }
      this.folderList.pop()
      this.current = this.folderList[this.folderList.length - 1]
      if (this.folderList.length === 0) {
        this.detail()
      } else {
        const data = { folderId: this.current.folderId }
        this.$api.task.fileList(data).then(res => {
          if (res.code === 200) {
            this.data = res.data.records.map(sub => {
              sub.folderName = sub.title
              // 继承上级的权限
              sub.isAccess = this.isAccess
              // rowDetail 需要folderId
              sub.folderId = sub.id
              return sub
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    postFile (row) {
      console.log(row)
      this.currentFolder = row
      this.show = true
    },
    completeTask (row) {
      this.$api.task.completeTask({ taskId: this.taskId }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.taskInfo.isCompleted = 1
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    uploadSuccess (res, file, files) {
      this.fileList = files.map(sub => sub.response.data)
    },
    saveFile () {
      if (this.fileList.length === 0) {
        return
      }
      this.fileList.forEach(sub => {
        if (['pdf', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'].includes(sub.suffix)) {
          // save Library
          const data = {
            title: sub.originalFileName,
            fileId: sub.id,
            suffix: sub.suffix,
            volume: sub.volume,
            url: sub.filePath,
            category: 4,
            content: '',
            parentId: this.currentFolder.folderId
          }
          this.$api.common.submit(data).then(res => {
            if (res.code === 200) {
              console.log(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
      this.addFile()
    },
    /**
     * 上传文件
     */
    addFile () {
      this.fileList = this.fileList.map(sub => {
        sub.parentId = this.currentFolder.folderId
        sub.projectId = this.currentFolder.projectId
        sub.title = sub.originalFileName
        sub.fileId = sub.id
        sub.url = sub.filePath
        return sub
      })
      const data = { taskId: this.taskId, dispatcherUser: this.currentFolder.dispatcherUser, folderId: this.currentFolder.folderId, files: this.fileList }
      this.$api.task.uploadFile(data).then(res => {
        if (res.code === 200) {
          this.show = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    confirmTask () {
      this.$confirm('确认任务，并且向业主发送提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        this.$api.task.taskConfirm({ taskId: this.taskId }).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.taskInfo.isConfirmed = 1
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    }
  }
}
</script>

<style scoped>

</style>