RMS-FrontEnd/RMS-FrontEnd/src/views/components/task/index.vue

<template>
  <div class="system-task">
    <el-container>
      <el-header class="position_relative">
        <div class="header-tabs">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="实时进度" name="0"></el-tab-pane>
            <el-tab-pane label="任务列表" name="1"></el-tab-pane>
          </el-tabs>
        </div>
      </el-header>
      <el-main class="system-task-main">
        <div v-if="activeName === '0'" key="task1">
          <el-table :data="taskData" border header-row-class-name="custom-table-header">
            <el-table-column v-if="form === 1" label="文件名称" prop="oldName" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="任务数量" prop="total" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="当前条数" prop="index" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="实时进度" align="center" min-width="200px" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-progress :text-inside="true" :stroke-width="20" :percentage="scope.row.percentage" :color="customColors"></el-progress>
              </template>
            </el-table-column>
            <el-table-column v-if="form === 2" label="操作" align="center" width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="!scope.row.url">等待中</span>
                <el-link v-else type="primary" @click.native="handleDownload(scope.row)">下载文件</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-else key="task2">
          <el-form inline>
            <el-form-item label="创建人">
              <el-input v-model="queryParams.createUserName" size="small" placeholder="请输入创建人名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="" @click="getList">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="loading" :data="tableData" border header-row-class-name="custom-table-header">
            <el-table-column v-if="form === 1" label="文件名称" prop="taskName" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column v-else label="#" type="index" align="center" width="55"></el-table-column>
            <el-table-column label="开始时间" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.createDate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结束时间" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.finishTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="任务状态" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ statusObj[scope.row.state] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createUserName" label="创建人" align="center" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" align="center" width="120" show-overflow-tooltip>
              <template slot-scope="scope" v-if="scope.row.status !== 0">
                <el-link type="primary" @click.native="handleDownload(scope.row)" v-if="$permission('/workspace/common/taskDownload')">下载</el-link>
                <el-link class="margin-left_10" type="danger" @click.native="handleDelete(scope.row)" >删除</el-link>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { downLoad2, getFileName } from "@/utils";

export default {
  // props: {
  //   form: Number,
  // },
  props:['form','reportId'],
  data() {
    return {
      activeName: '0',
      taskData: [],
      loading: false,
      total: 0,
      tableData: [],
      queryParams: {
        // status: null,
        state:0,
        size: 10,
        current: 1,
        // projectName: '',
        // type: 0,
        // order: 'desc',
        // createName: '',
        reportId: 0
      },
      statusObj: {
        0: '队列中',
        1: '进行中',
        2: '成功',
        3: '失败',
      },
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
      taskType: {
        1: '专利导入',
        2: '专利导出',
        3: '说明书导入',
      }
    }
  },
  computed: {
    ...mapGetters(['webSocket', 'userinfo'])

  },
  watch:{
    activeName(val){
      if(val==1){
        this.getList()
      }else{
        this.getQueueList()
      }
    },
  },
  mounted() {
    // this.queryParams.type = this.form
    // this.queryParams.reportId = this.reportId
   this.getQueueList()
    this.initTask()
    
  },
  methods: {
    initTask() {
      if(this.webSocket){
      this.webSocket.onmessage = (e) => {
        // console.log(e)
        const { code, data, message } = JSON.parse(e.data)
        // console.log(JSON.parse(e.data))
        if (code === 903 || code === 904) {
          const index = this.taskData.map(item => item.taskId).indexOf(data.taskId)
          if (index === -1) {
            // this.taskData.push(data)
          } else {
            this.$set(this.taskData, index, data)
          }
          if (data.complete) {
            if(this.form==1){
              this.$message.success(`导入任务完成`)
               for(var i = 0;i<this.taskData.length;i++){
              if(this.taskData[i].complete==true){
                this.taskData.splice(i,1)
              }
            }
            }else{
              this.$message.success(`导出任务完成`)
            }
            
            // console.log(this.form)
           
            this.getList()
          }
        } else if (code === 803 || code === 804) {
          this.$message.error(message)
          this.getList()
        }
      }
    }
    },
    getQueueList() {
      
      this.taskData = []
      this.queryParams.reportId = this.reportId
      this.queryParams.state=0
      this.$api.reImportTask(this.queryParams).then(response => {
        response.data.records.map(item => {
          this.taskData.push({
            reportId: item.reportId,
            total: item.importCount,
            index: 0,
            taskId: item.id,
            oldName: item.taskName,
            complete: false,
            url: '',
            fileName: '',
            taskType: item.type,
            percentage: 0
          })
        })
      })
    },
    handleDownload(row) {
      downLoad2(row.filePath)
    },
    handleDelete(row) {
      this.$confirm('确认删除本条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$api.deleteImportTask({ id: row.id }).then(response => {
          this.$message.success('删除成功')
          this.loading = false
          this.getList()
        }).catch(error => {
          this.loading = false
        })
      })
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    getList() {
      this.loading = true
      this.queryParams.state = 2
      this.queryParams.reportId = this.reportId
      this.$api.reImportTask(this.queryParams).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
        this.loading = false
      }).catch(error => {
        this.loading = false
      })
    },
  }
}
</script>

<style lang="scss">
.system-task {
  height: 100%;
  .system-task-main {
    background: #fff;
    padding: 5px 20px;
    margin-top: 20px;
  }
  .header-tabs {
    position: absolute;
    bottom: 0;
    height: 100%;
    padding-right: 9px;
    left: 12px;
    .el-tabs {
      margin-top: 19px;
    }
    .el-tabs__header {
      margin-bottom: 0 !important;
    }
  }
  .pagination {
    text-align: center;
    margin: 20px 0;
  }
}
</style>