fj-dc-ui/.svn/pristine/e6/e6d4439473fefa21f8f0949302e8f72aca067c10.svn-base

<template>
  <el-container>
    <el-main class="to_do_task_main">
      <el-form :inline="true" :model="searchObj" class="demo-form-inline">
        <el-form-item label="流程名称">
          <el-input v-model="searchObj.procInstName" placeholder="" clearable></el-input>
        </el-form-item>
        <el-form-item label="流程状态">
          <el-select v-model="searchObj.procInstStatus" placeholder="" clearable>
            <el-option :label="item.label" :value="item.value" v-for="item in procInstStatusList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTableData">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%" :height="tableHeight" stripe v-loading="tableLoading">
        <el-table-column prop="procInstName" label="流程名称" min-width="150" align="center">
          <template slot-scope="scope">
            <a href="javascript:;" style="text-decoration: none;" @click="showFlowDetail(scope.row.procInstId)">{{scope.row.procInstName}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="procTypeName" label="流程类型" min-width="120" align="center">
        </el-table-column>
        <el-table-column prop="starterName" label="流程发起人" min-width="120" align="center">
        </el-table-column>
        <el-table-column prop="startTime" label="流程发起时间" min-width="120" align="center" :formatter="formatDate">
        </el-table-column>
        <el-table-column prop="endTime" label="流程完成时间" min-width="120" align="center" :formatter="formatDate">
        </el-table-column>
        <el-table-column prop="currNodeName" label="当前节点名称" min-width="120" align="center">
        </el-table-column>
        <el-table-column prop="currNodeExecutor" label="当前节点处理人" min-width="120" align="center">
        </el-table-column>
        <el-table-column prop="startNodeTime" label="当前节点开始时间" min-width="130" align="center" :formatter="formatDate">
        </el-table-column>
        <el-table-column prop="procInstStatus" label="流程状态" min-width="150" align="center" :formatter="statusFormat">
        </el-table-column>
      </el-table>
      <el-pagination
        background
        style="text-align: left; margin-top: 5px;"
        layout="sizes, total, prev, pager, next, jumper"
        :total="total"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </el-main>
    <el-dialog title="流程详情" :visible.sync="dialogVisible" :close-on-click-modal="false" width="60%">
      <processHistory :procInstId="procInstId"></processHistory>
    </el-dialog>
  </el-container>
</template>
<script>
    import request from '@util/gw_ajax_request.js'
    import {dateFormat} from '@util/gw_date.js'
    export default {
        props: [],
        data() {
            return {
                tableHeight: window.innerHeight - 300,
                tableData: [],
                searchObj: {},
                pageSize: 20,
                pageIndex: 1,
                total: 0,
                procInstStatusList: [
                    {label: '运行中', value: '921700000010'},
                    {label: '挂起', value: '921700000020'},
                    {label: '正常完成', value: '921700000030'},
                    {label: '超时完成', value: '921700000040'},
                    {label: '正常撤销', value: '921700000050'},
                    {label: '超时撤销', value: '921700000060'}
                ],
                tableLoading: false,
                procInstId: '',
                dialogVisible: false
            }
        },
        components:{
            processHistory: resolve => {require(['./processHistory.vue'], resolve)}
        },
        mounted() {
            this.getTableData()
        },
        methods: {
            // 获取任务列表
            getTableData() {
                this.tableLoading = true
                this.searchObj['pageNum'] = this.pageIndex;
                this.searchObj['pageSize'] = this.pageSize;
                this.searchObj['queryType'] = this.$route.params.type;
                request.get('/bis/insp/pblm/plist/v1/workflow/qryHandleProcess', {params: this.searchObj}).then(res => {
                    if(res.success){
                        this.tableData = res.data.list
                        this.total = res.data.total
                    }
                    this.tableLoading = false
                }).catch(err=>{
                    console.log(err)
                })
            },
            showFlowDetail(procInstId){
                this.dialogVisible = true
                this.procInstId = procInstId
            },
            formatDate(row){
                if(row.startTime && typeof(row.startTime) == 'number'){
                    return dateFormat(row.startTime, 'yyyy-MM-dd HH:mm:ss')
                }else{
                    return row.startTime
                }
                if(row.endTime && typeof(row.endTime) == 'number'){
                    return dateFormat(row.endTime, 'yyyy-MM-dd HH:mm:ss')
                }else{
                    return row.endTime
                }
                if(row.startNodeTime && typeof(row.startNodeTime) == 'number'){
                    return dateFormat(row.startNodeTime, 'yyyy-MM-dd HH:mm:ss')
                }else{
                    return row.startNodeTime
                }
            },
            statusFormat(row){
                let status = row.procInstStatus
                if(status == "921700000010"){
                    return '运行中'
                }else if(status == "921700000020"){
                    return '挂起'
                }else if(status == "921700000030"){
                    return '正常完成'
                }else if(status == "921700000040"){
                    return '超时完成'
                }else if(status == "921700000050"){
                    return '正常撤销'
                }else if(status == "921700000060"){
                    return '超时撤销'
                }else{
                    return status
                }
            },
            handleSizeChange(val){
                this.pageSize = val
                this.getTableData()
            },
            handleCurrentChange(val){
                this.pageIndex = val
                this.getTableData()
            },
        },
    }
</script>
<style lang="scss" scoped>
  .to_do_task_main{
    padding-top: 0;
  }
</style>