|
|
@@ -0,0 +1,281 @@
|
|
|
+<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>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ <basic-curd class='full-width' :data='data' :option='taskOption' @row-view='rowDetail'>
|
|
|
+ <template #menu='{row}'>
|
|
|
+ <main-button title='提交文件' v-if='row.type === 2' 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
|
|
|
+ :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'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'detail',
|
|
|
+ components: { MainButton, BasicContainer, basicCurd },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.id = this.$route.query.id
|
|
|
+ this.taskId = this.$route.query.taskId
|
|
|
+ this.detail()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ rowDetail (row, index) {
|
|
|
+ if (row.type === 2) {
|
|
|
+ const data = { folderId: row.folderId }
|
|
|
+ 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.$message.error('已经是最后一级了')
|
|
|
+ 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)
|
|
|
+ } 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 = { dispatcherUser: this.currentFolder.dispatcherUser, folderId: this.currentFolder.folderId, files: this.fileList }
|
|
|
+ this.$api.task.uploadFile(data).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ console.log(res)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|