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">
                <!-- <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-center-evl ref="taskCenterEvl" @approveMsg="approveMsg"></task-center-evl>
    </div>
</template>

<script>
import {apiPostTodoTaskList} from '../../api/api'
import taskCenterEvl from './taskCenterEvlFrom.vue'
import { getToken } from '../../api/auth'
export default {
    components: {
        taskCenterEvl
    },
    data() {
        return {
            taskCenterData: [],
            workflowVisible: false,
            iframeURL: '',
            page:{
                pagesize: 12,
                currentPage: 1,
                total: 0
            }
        }
    },
    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) {
            this.$refs.taskCenterEvl.init(row)
        },
        rowClick(selection, row) {
            this.changeDateSelect = selection
        },
        handleSizeChange(val){
            this.page.pagesize = val
            this.getEvaluationData('seach')
        },
        handleCurrentChange(val){
            this.page.currentPage =val
            this.getEvaluationData('seach')
        },
        approveMsg(val) {
            if (val) {
                this.getEvaluationData()
            }
        }
    }
}
</script>

<style lang="less">
.taskCenter{
    .taskCenterTableData{
        margin-top: 20px;
        .el-table{
            .el-table__body-wrapper{
                height: 78vh !important;
            }
            .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>