BusinessBenchmark/src/components/taskCenter/taskCenterPage.vue

<template>
    <div class="taskCenter">
        <div class="taskCenterTableData">
            <el-table :data="taskCenterData" style="width: 100%" @select="rowClick" @select-all="rowClick" :class="taskCenterTableSty()">
                <!-- <el-table-column type="selection" label="操作" align="center"></el-table-column> -->

                <el-table-column label="序号" type="index" align="center" width="80" />
                <el-table-column label="执行人名称" prop="assigneeNames" />
                <el-table-column label="任务名称" prop="name" />
                <el-table-column label="任务状态">
                    <template #default="scope">
                        <div v-if="scope.row.status === 'NORMAL'">普通</div>
                        <div v-else-if="scope.row.status === 'SUSPEND'">挂起</div>
                        <div v-else-if="scope.row.status === 'LOCK'">锁定</div>
                        <div v-else-if="scope.row.status == 'BACK'">驳回</div>
                        <div v-else-if="scope.row.status === 'DESIGNATE'">指派</div>
                        <div v-else-if="scope.row.status === 'TURN'">转办</div>
                        <div v-else-if="scope.row.status === 'ADDDOED'">加办结束</div>
                        <div v-else-if="scope.row.status === 'AGENCY'">代理</div>
                    </template>
                </el-table-column>
                <el-table-column label="任务标题" prop="subject" width="400" />
                <el-table-column label="任务类型">
                    <template #default="scope">
                        <div v-if="scope.row.taskType === 'NORMAL'">普通</div>
                        <div v-else-if="scope.row.taskType === 'SIGN'">会签</div>
                        <div v-else-if="scope.row.taskType === 'SIGN_SOURCE'">会签_父</div>
                        <div v-else-if="scope.row.taskType === 'TRANSFORMING'">事项</div>
                        <div v-else-if="scope.row.taskType === 'TURN'">转办</div>
                        <div v-else-if="scope.row.taskType === 'DELIVERTO'">转办</div>
                        <div v-else-if="scope.row.taskType === 'AGENCY'">代理</div>
                        <div v-else-if="scope.row.taskType === 'ADD_DO'">加办</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <div style="display: flex">
                            <p class="indicitem" @click="getflowPath(scope.row)">流程详情</p>
                            <p class="indicitem" @click="taskProcess(scope.row)">任务处理</p>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-size="page.pagesize"
                layout="total, prev, pager, next, jumper"
                :total="page.total">
            </el-pagination>
            <el-dialog title="流程详情" v-model="workflowVisible" width="70vw" :close-on-click-modal="false">
                <div class="flowSty">
                    <iframe id="iframeContain" width="100%" height="100%" frameborder="0" class="iframe" name="iframeContain" seamless scrolling="no" :src="iframeURL">            
                    </iframe>
                </div>
            </el-dialog>
        </div>
        <task-evaluation-start ref="taskEvaluationStart"></task-evaluation-start>
        <task-center-evl ref="taskCenterEvl" @approveMsg="approveMsg"></task-center-evl>
        <task-center-dept-evl ref="taskCenterdeptEvl" @approveMsg="approveMsg"></task-center-dept-evl>
        <task-center-dept-business-evl ref="taskCenterdeptbusinessEvl" @approveMsg="approveMsg"></task-center-dept-business-evl>
        <task-application-from ref="taskApplicationFrom" @approveMsg="approveMsg"></task-application-from>
    </div>
</template>

<script>
import {apiPostTodoTaskList, apiPostgetInstanceAndChildren} from '../../api/api'
import taskEvaluationStart from './taskEvaluationStart.vue'
import taskCenterEvl from './taskCenterEvlNewFrom.vue'
import taskCenterDeptEvl from './taskCenterDeptStartFrom.vue'
import taskCenterDeptBusinessEvl from './taskCenterDeptBusinessFrom.vue'
import taskApplicationFrom from './taskApplicationFrom.vue'
export default {
    components: {
        taskEvaluationStart,
        taskCenterEvl,
        taskCenterDeptEvl,
        taskCenterDeptBusinessEvl,
        taskApplicationFrom
    },
    data() {
        return {
            taskCenterData: [],
            workflowVisible: false,
            iframeURL: '',
            page:{
                pagesize: 12,
                currentPage: 1,
                total: 0
            },
            winPix: window.devicePixelRatio,
        }
    },
    created() {
        this.getEvaluationData()
    },
    methods:{
        // 查询指标数据
        getEvaluationData() {
            let that = this
            let params = {
                order: "ASC", //排序
                sort: "",
                offset: "",
                limit: that.page.pagesize, //每页显示
                iamCode: window.localStorage.getItem('code') //IAM平台code值（登录后获取凭证）
            }
            apiPostTodoTaskList(params).then(datas =>{
                if (datas && datas.data) {
                    that.taskCenterData = datas.data.rows
                    that.page.total = datas.data.total
                }
            })
        },        
        getflowPath(row) {
            this.workflowVisible = true
            this.iframeURL = 'http://10.65.78.23:8080/agilebpm-ui/bpm/instance/instanceImageDialog.html?instanceId='+row.instId+'&defId='+row.defId+'&taskId='+row.taskId+'&iamCode='+window.localStorage.getItem('code')
        },
        taskProcess(row) {
            let that = this
            let params = {
                id: row.instId,
                iamCode: window.localStorage.getItem('code')
            }
            apiPostgetInstanceAndChildren(params).then(datas =>{
                if (datas && datas.data) {
                    let allData = datas.data.data.bpmInstance
                    let keyId = datas.data.data.bpmInstance.bizKey
                    let taskDefKey = datas.data.data.bpmInstance.defKey
                    if (taskDefKey === 'bbbmyjzbjh') {
                        that.$refs.taskCenterdeptEvl.init(row, keyId, allData)
                    } else if(taskDefKey === 'bbbmyjzbkh'){
                        that.$refs.taskCenterdeptbusinessEvl.init(row, keyId, allData)
                    } else if(taskDefKey === 'jxjgkhsb'){
                        that.$refs.taskApplicationFrom.init(row, keyId, allData)
                    } else if(taskDefKey === 'yddwkplc' || taskDefKey === 'jddwkplc' || taskDefKey === 'nddwkplc') {
                        that.$refs.taskCenterEvl.init(row, allData)
                    } else if (taskDefKey === 'dwkpmbqd' || taskDefKey === 'dwkpmbxd') {
                        that.$refs.taskEvaluationStart.init(row, allData)
                    }
                }
            })
        },
        rowClick(selection, row) {
            this.changeDateSelect = selection
        },
        handleSizeChange(val){
            this.page.pagesize = val
            this.getEvaluationData()
        },
        handleCurrentChange(val){
            this.page.currentPage =val
            this.getEvaluationData()
        },
        approveMsg(val) {
            if (val) {
                this.getEvaluationData()
            }
        },
        taskCenterTableSty() {
            if (this.winPix === 1.25) {
                return 'taskCenter125Table'
            } else {
                return 'taskCenter100Table'
            }
        }
    }
}
</script>

<style lang="less">
.taskCenter{
    .taskCenterTableData{
        margin-top: 20px;
        .taskCenter125Table{
            .el-table__body-wrapper{
                height: 70vh !important;
            }
        }
        .taskCenter100Table{
            .el-table__body-wrapper{
                height: 78vh !important;
            }
        }
        .el-table{
            
            .el-input__inner{
                height: 30px !important;
            }
            .el-radio__label{
                display: none;
            }
            
            .indicitem{
                color: #409EFF;
                font-size: 12px;
                margin-right: 20px;
                cursor:pointer;
                &:hover{
                    text-decoration: underline;
                }
            }
        }
        .el-pagination{
            margin-top: 20px;
            text-align: end;
            position: relative;
        }
        .el-overlay{
            .el-dialog{
                margin-top: 8vh !important;
                .el-dialog__body{
                    .flowSty{
                        width: 100%;
                        height: 70vh;
                    }
                }
            }
        }
    }
}
</style>