app-todo-list.vue

<template>
    <div class='app-todo-list'>
        <i-input v-model="query" search enter-button @on-search="handleSearch" class='app-todo-list__search' placeHolder="标题"/>
        <el-table :data="myTasks" :border="true" @sort-change="handleSortChange">
            <el-table-column prop="" sortable label="标题">
                <template slot-scope="scope">
                    <span class="title" @click="handleClick(scope.row)">{{ scope.row.description }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="processDefinitionName" sortable label="流程" width="200">
            </el-table-column>
            <el-table-column prop="name" sortable label="状态" width="200">
            </el-table-column>
            <el-table-column prop="createTime" sortable label="创建时间" width="200">
            </el-table-column>
        </el-table>
        <el-pagination
            class="app-todo-list__pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="curPage"
            :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script lang = 'ts'>
import AppCenterService from '@/service/app/app-center-service';
import { Http } from '@/utils';
import { Subscription } from 'rxjs';
import { Component, Vue } from 'vue-property-decorator';

@Component({
})
export default class AppTodoList extends Vue {

    /**
     * 待办数据
     */
    public myTasks: any[] = [];

    /**
     * 查询数据
     */
    public query: string = '';

    /**
     * 分页条数
     */
    public limit: number = 20;

    /**
     * 当前分页
     */
    public curPage: number = 1;

    /**
     * 总条数
     */
    public total: number = 0;

    /**
     * 排序字段
     */
    public sort: string = '';
    
    /**
     * 应用状态事件
     *
     * @public
     * @type {(Subscription | undefined)}
     */
    public appStateEvent: Subscription | undefined;

    /**
     * vue创建
     */
    created(): void {
        this.getMyTasks();
        if(AppCenterService && AppCenterService.getMessageCenter()){
            this.appStateEvent = AppCenterService.getMessageCenter().subscribe(({ name, action, data }) =>{
                if(!Object.is(name,"srfwftodo")){
                    return;
                }
                if(Object.is(action,'appRefresh')){
                    this.getMyTasks();
                }
            })
        }
    }

    /**
     * 获取待办列表
     */
    public getMyTasks() {
        const params = {
            size: this.limit,
            page: this.curPage - 1
        };
        let url: any = '/wfcore/mytasks';
        if (this.query) {
            Object.assign(params, {query: this.query});
        }
        if (this.sort) {
            Object.assign(params, {sort: this.sort});
        }
        Http.getInstance().get(url, params).then((response: any) => {
            if (response && response.status == 200) {
                if(response.headers['x-total']){
                    this.total = Number(response.headers['x-total']);
                }
                const data: any = response.data || [];
                if (data && data.length > 0) {
                    this.myTasks = data;
                } else {
                    this.myTasks = [];
                }
            }
        }).catch((error: any) => {
            const message = error.message ? error.message : '加载数据错误';
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: message });
        })
    }


    /**
     * 处理点击
     */
    public handleClick(data: any) {
        if(!data || !data.processDefinitionKey || !data.processInstanceBusinessKey || !data.taskDefinitionKey){
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: '参数不足，跳转失败' });
            return;
        }
        const srfappde = (data.processDefinitionKey as string).split('-')[1];
        const url = `/appwfdataredirectview?srfappde=${srfappde};srfappkey=${data.processInstanceBusinessKey};userTaskId=${data.taskDefinitionKey}`;
        const indexPath = this.$viewTool.getIndexRoutePath(this.$route);
        this.$router.push({ path: `${indexPath}${url}` });
    }

    /**
     * 处理搜索
     */
    public handleSearch() {
        this.getMyTasks();
    }

    /**
     * 处理分页数改变
     */
    public handleSizeChange(size: number) {
        this.limit = size;
        this.getMyTasks();
    }

    /**
     * 处理分页改变
     */
    public handleCurrentChange(page: number) {
        this.curPage = page;
        this.getMyTasks();
    }

    /**
     * 处理排序改变
     */
    public handleSortChange($event: any) {
        const { prop, order } = $event;
        const dir = Object.is(order, 'ascending') ? 'asc' : Object.is(order, 'descending') ? 'desc' : '';
        this.sort = `${prop},${dir}`;
        this.getMyTasks();
    }

    /**
     * 组件销毁
     *
     * @memberof MainBase
     */
     public destroyed() {
        if(this.appStateEvent){
            this.appStateEvent.unsubscribe();
        }
    }

}
</script>

<style lang="less">
@import './app-todo-list.less';
</style>