ShiShiYiBan/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue

83 lines
2.2 KiB
Vue
Raw Normal View History

2023-01-22 13:42:26 +08:00
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作新增 -->
<XButton
type="primary"
preIcon="ep:zoom-in"
title="新建流程"
v-hasPermi="['bpm:process-instance:query']"
@click="handleCreate"
/>
</template>
<!-- 当前审批任务 -->
<template #tasks_default="{ row }">
<el-button v-for="task in row.tasks" :key="task.id" type="text">
2023-01-22 13:42:26 +08:00
<span>{{ task.name }}</span>
</el-button>
</template>
<!-- 操作 -->
<template #actionbtns_default="{ row }">
<XButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
2023-01-22 13:42:26 +08:00
<XButton
preIcon="ep:delete"
2023-01-22 13:42:26 +08:00
title="取消"
v-if="row.result === 1"
@click="handleCancel(row)"
/>
</template>
</XTable>
</ContentWrap>
</template>
<script setup lang="ts">
// 全局相关的 import
import { ElMessageBox } from 'element-plus'
2023-01-22 13:42:26 +08:00
// 业务相关的 import
2022-07-28 19:10:45 +08:00
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
2023-01-22 13:42:26 +08:00
import { allSchemas } from './process.data'
const router = useRouter() // 路由
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
2022-07-28 19:10:45 +08:00
// ========== 列表相关 ==========
const [registerTable, { reload }] = useXTable({
2023-01-22 13:42:26 +08:00
allSchemas: allSchemas,
2022-07-28 19:10:45 +08:00
getListApi: ProcessInstanceApi.getMyProcessInstancePageApi
})
2023-01-22 13:42:26 +08:00
/** 发起流程操作 **/
const handleCreate = () => {
router.push({
name: 'BpmProcessInstanceCreate'
})
}
2022-07-28 19:10:45 +08:00
2023-01-22 13:42:26 +08:00
// 列表操作
const handleDetail = (row) => {
router.push({
name: 'BpmProcessInstanceDetail',
query: {
id: row.processInstanceId
}
})
2022-07-28 19:10:45 +08:00
}
2023-01-22 13:42:26 +08:00
/** 取消按钮操作 */
const handleCancel = (row) => {
ElMessageBox.prompt('请输入取消原因', '取消流程', {
confirmButtonText: t('common.ok'),
cancelButtonText: t('common.cancel'),
2023-01-22 13:42:26 +08:00
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空,且非空格
2022-07-28 19:10:45 +08:00
inputErrorMessage: '取消原因不能为空'
}).then(async ({ value }) => {
await ProcessInstanceApi.cancelProcessInstanceApi(row.id, value)
message.success('取消成功')
reload()
2022-07-28 19:10:45 +08:00
})
}
</script>