bpm：初始化流程实例的代码
This commit is contained in:
YunaiV
@@ -1,113 +1,110 @@
|
||||
<script setup lang="ts" name="ProcessInstance">
|
||||
import dayjs from 'dayjs'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { useTable } from '@/hooks/web/useTable'
|
||||
import type { ProcessInstanceVO } from '@/api/bpm/processInstance/types'
|
||||
import { allSchemas } from './process.data'
|
||||
<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"
|
||||
@click="handleFormDetail(task.id)"
|
||||
>
|
||||
<span>{{ task.name }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #actionbtns_default="{ row }">
|
||||
<XButton
|
||||
type="primary"
|
||||
title="取消"
|
||||
v-if="row.result === 1"
|
||||
preIcon="ep:delete"
|
||||
@click="handleCancel(row)"
|
||||
/>
|
||||
<XButton type="primary" title="详情" preIcon="ep:edit-pen" @click="handleDetail(row)" />
|
||||
</template>
|
||||
</XTable>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
// 全局相关的 import
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useXTable } from '@/hooks/web/useXTable'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
// 业务相关的 import
|
||||
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage()
|
||||
// import { decodeFields } from '@/utils/formGenerator' // TODO 芋艿：后续根据情况清理
|
||||
import { allSchemas } from './process.data'
|
||||
|
||||
const router = useRouter() // 路由
|
||||
|
||||
// ========== 列表相关 ==========
|
||||
const { register, tableObject, methods } = useTable<ProcessInstanceVO>({
|
||||
const [registerTable] = useXTable({
|
||||
allSchemas: allSchemas,
|
||||
getListApi: ProcessInstanceApi.getMyProcessInstancePageApi
|
||||
})
|
||||
const { getList, setSearchParams } = methods
|
||||
|
||||
// ========== CRUD 相关 ==========
|
||||
const dialogVisible = ref(false) // 是否显示弹出层
|
||||
// 发起流程
|
||||
const handleAdd = () => {
|
||||
console.info('add')
|
||||
}
|
||||
// 取消操作
|
||||
const handleCancel = (row: ProcessInstanceVO) => {
|
||||
ElMessageBox.prompt('请输入取消原因？', '取消流程', {
|
||||
confirmButtonText: t('common.ok'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
type: 'warning',
|
||||
inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/, // 判断非空，且非空格
|
||||
inputErrorMessage: '取消原因不能为空'
|
||||
}).then(async ({ value }) => {
|
||||
await ProcessInstanceApi.cancelProcessInstanceApi(row.id, value)
|
||||
message.success('取消成功')
|
||||
getList()
|
||||
// 流程表单的弹出框
|
||||
const detailOpen = ref(false)
|
||||
const detailForm = ref()
|
||||
/** 发起流程操作 **/
|
||||
const handleCreate = () => {
|
||||
router.push({
|
||||
name: 'BpmProcessInstanceCreate'
|
||||
})
|
||||
}
|
||||
|
||||
// ========== 详情相关 ==========
|
||||
const detailData = ref() // 详情 Ref
|
||||
|
||||
// 详情操作
|
||||
const handleDetail = async (row: ProcessInstanceVO) => {
|
||||
// 设置数据
|
||||
detailData.value = row
|
||||
dialogVisible.value = true
|
||||
/** 流程表单的详情按钮操作 */
|
||||
const handleFormDetail = (row) => {
|
||||
// 情况一：使用流程表单
|
||||
if (row.formId) {
|
||||
// 设置值 TODO 芋艿：动态表单做完后，需要测试下
|
||||
detailForm.value = {
|
||||
...JSON.parse(row.formConf),
|
||||
fields: decodeFields([], row.formFields)
|
||||
}
|
||||
// 弹窗打开
|
||||
detailOpen.value = true
|
||||
// 情况二：使用业务表单
|
||||
} else if (row.formCustomCreatePath) {
|
||||
router.push({ path: row.formCustomCreatePath })
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 初始化 ==========
|
||||
getList()
|
||||
// 列表操作
|
||||
const handleDetail = (row) => {
|
||||
console.log(row, 'row')
|
||||
router.push({ path: '/process-instance/detail', query: { id: row.id } })
|
||||
}
|
||||
/** 取消按钮操作 */
|
||||
const handleCancel = (row) => {
|
||||
const id = row.id
|
||||
ElMessageBox.prompt('请输入取消原因？', '取消流程', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
|
||||
inputErrorMessage: '取消原因不能为空'
|
||||
})
|
||||
.then(({ value }) => {
|
||||
return ProcessInstanceApi.cancelProcessInstanceApi(id, value)
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
message: '取消成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 搜索工作区 -->
|
||||
<ContentWrap>
|
||||
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
|
||||
</ContentWrap>
|
||||
<ContentWrap>
|
||||
<!-- 操作工具栏 -->
|
||||
<div class="mb-10px">
|
||||
<el-button type="primary" v-hasPermi="['bpm:process-instance:query']" @click="handleAdd">
|
||||
<Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<Table
|
||||
:columns="allSchemas.tableColumns"
|
||||
:selection="false"
|
||||
:data="tableObject.tableList"
|
||||
:loading="tableObject.loading"
|
||||
:pagination="{
|
||||
total: tableObject.total
|
||||
}"
|
||||
v-model:pageSize="tableObject.pageSize"
|
||||
v-model:currentPage="tableObject.currentPage"
|
||||
@register="register"
|
||||
>
|
||||
<template #status="{ row }">
|
||||
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
|
||||
</template>
|
||||
<template #createTime="{ row }">
|
||||
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['bpm:process-instance:query']"
|
||||
@click="handleDetail(row)"
|
||||
>
|
||||
<Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['bpm:process-instance:cancel']"
|
||||
@click="handleCancel(row)"
|
||||
>
|
||||
<Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</Table>
|
||||
</ContentWrap>
|
||||
|
||||
<XModal v-model="dialogVisible" :title="t('action.detail')">
|
||||
<!-- 对话框(详情) -->
|
||||
<Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
|
||||
<!-- 操作按钮 -->
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
|
||||
</template>
|
||||
</XModal>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user