admin-sjzx/src/views/system/bpm/task/todo/index.vue

<!--待办事项列表-->
<template>
    <div>
        <TableHeader>
            <template v-slot:select>
                <el-form-item label="任务名称">
                    <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入任务名称"></el-input>
                </el-form-item>
            </template>
        </TableHeader>
        <!--表格-->
        <Table ref="tableRef"></Table>
    </div>
</template>

<script setup lang="ts">
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref, watch } from 'vue'
import { useRouter } from 'vue-router'

defineOptions({
    name: 'businessUser'
})

const { push, options, currentRoute } = useRouter()
const flag = ref(false)

const tableStore = new TableStore({
    url: '/bpm-boot/bpm/task/todoList',
    method: 'POST',
    publicHeight: 65,
    column: [
        {
            field: 'index',
            title: '序号',
            width: '60',
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { title: '任务名称', field: 'processInstance.name', minWidth: 130 },
        { title: '发起人', field: 'processInstance.startUser.name', minWidth: 130 },
        { title: '发起部门', field: 'processInstance.startUser.deptName', minWidth: 130 },
        { title: '发起时间', field: 'createTime', minWidth: 170 },
        { title: '当前任务', field: 'name', minWidth: 130 },
        {
            title: '操作',
            align: 'center',
            width: '230',
            render: 'buttons',
            buttons: [
                {
                    name: 'productSetting',
                    title: '办理',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    click: row => {
                        flag.value = true
                        handleAudit(row.processInstance.id)
                    }
                }
            ]
        }
    ],
    beforeSearchFun: () => {
        for (let key in tableStore.table.params) {
            if (tableStore.table.params[key] === '') {
                delete tableStore.table.params[key]
            }
        }
    }
})

onMounted(() => {
    // 加载数据
    tableStore.index()
})
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)

/** 处理审批按钮 */
const handleAudit = (instanceId: any) => {
    push({
        name: 'BpmProcessInstanceDetail',
        query: {
            id: instanceId,
            todo: 'todo'
        }
    })
}
watch(
    () => currentRoute.value.path,
    () => {
        if (flag.value && options.history.state.forward?.split('/')[1] == 'bpm') {
            tableStore.index()
            flag.value = false
        }
    },
    {
        deep: true
    }
)
</script>