Commit c3317e144f36d317243e0ae5327a222301a5c1af
1 parent
3466b318
bpm：流程定义的列表
Showing
3 changed files
with
194 additions
and
0 deletions
yudao-ui-admin-vue3/src/api/bpm/definition/index.ts
0 → 100644
| 1 | +import request from '@/config/axios' | ||
| 2 | + | ||
| 3 | +export const getProcessDefinitionBpmnXMLApi = async (id: number) => { | ||
| 4 | + return await request.get({ | ||
| 5 | + url: '/bpm/process-definition/get-bpmn-xml?id=' + id | ||
| 6 | + }) | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +export const getProcessDefinitionPageApi = async (params) => { | ||
| 10 | + return await request.get({ | ||
| 11 | + url: '/bpm/process-definition/page', | ||
| 12 | + params | ||
| 13 | + }) | ||
| 14 | +} | ||
| 15 | +export const getProcessDefinitionListApi = async (params) => { | ||
| 16 | + return await request.get({ | ||
| 17 | + url: '/bpm/process-definition/list', | ||
| 18 | + params | ||
| 19 | + }) | ||
| 20 | +} |
yudao-ui-admin-vue3/src/views/bpm/definition/definition.data.ts
0 → 100644
| 1 | +import { reactive } from 'vue' | ||
| 2 | +import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas' | ||
| 3 | + | ||
| 4 | +import { DICT_TYPE } from '@/utils/dict' | ||
| 5 | + | ||
| 6 | +// CrudSchema | ||
| 7 | +const crudSchemas = reactive<VxeCrudSchema>({ | ||
| 8 | + primaryKey: 'id', | ||
| 9 | + primaryType: null, | ||
| 10 | + action: true, | ||
| 11 | + columns: [ | ||
| 12 | + { | ||
| 13 | + title: '定义编号', | ||
| 14 | + field: 'id', | ||
| 15 | + table: { | ||
| 16 | + width: 360 | ||
| 17 | + } | ||
| 18 | + }, | ||
| 19 | + { | ||
| 20 | + title: '定义名称', | ||
| 21 | + field: 'name', | ||
| 22 | + table: { | ||
| 23 | + width: 120, | ||
| 24 | + slots: { | ||
| 25 | + default: 'name_default' | ||
| 26 | + } | ||
| 27 | + } | ||
| 28 | + }, | ||
| 29 | + { | ||
| 30 | + title: '流程分类', | ||
| 31 | + field: 'category', | ||
| 32 | + dictType: DICT_TYPE.BPM_MODEL_CATEGORY, | ||
| 33 | + dictClass: 'number' | ||
| 34 | + }, | ||
| 35 | + { | ||
| 36 | + title: '表单信息', | ||
| 37 | + field: 'formId', | ||
| 38 | + table: { | ||
| 39 | + width: 120, | ||
| 40 | + slots: { | ||
| 41 | + default: 'formId_default' | ||
| 42 | + } | ||
| 43 | + } | ||
| 44 | + }, | ||
| 45 | + { | ||
| 46 | + title: '流程版本', | ||
| 47 | + field: 'version', | ||
| 48 | + table: { | ||
| 49 | + width: 80, | ||
| 50 | + slots: { | ||
| 51 | + default: 'version_default' | ||
| 52 | + } | ||
| 53 | + } | ||
| 54 | + }, | ||
| 55 | + { | ||
| 56 | + title: '激活状态', | ||
| 57 | + field: 'suspensionState', | ||
| 58 | + table: { | ||
| 59 | + width: 80, | ||
| 60 | + slots: { | ||
| 61 | + default: 'suspensionState_default' | ||
| 62 | + } | ||
| 63 | + } | ||
| 64 | + }, | ||
| 65 | + { | ||
| 66 | + title: '部署时间', | ||
| 67 | + field: 'deploymentTime', | ||
| 68 | + isForm: false, | ||
| 69 | + formatter: 'formatDate', | ||
| 70 | + table: { | ||
| 71 | + width: 180 | ||
| 72 | + } | ||
| 73 | + } | ||
| 74 | + ] | ||
| 75 | +}) | ||
| 76 | +export const { allSchemas } = useVxeCrudSchemas(crudSchemas) |
yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <ContentWrap> | ||
| 3 | + <!-- 列表 --> | ||
| 4 | + <XTable @register="registerTable"> | ||
| 5 | + <!-- 流程名称 --> | ||
| 6 | + <template #name_default="{ row }"> | ||
| 7 | + <XTextButton :title="row.name" @click="handleBpmnDetail(row.id)" /> | ||
| 8 | + </template> | ||
| 9 | + <!-- 表单信息 --> | ||
| 10 | + <template #formId_default="{ row }"> | ||
| 11 | + <XTextButton :title="row.formName" @click="handleFormDetail(row.formId)" /> | ||
| 12 | + </template> | ||
| 13 | + <!-- 流程版本 --> | ||
| 14 | + <template #version_default="{ row }"> | ||
| 15 | + <el-tag>v{{ row.version }}</el-tag> | ||
| 16 | + </template> | ||
| 17 | + <!-- 激活状态 --> | ||
| 18 | + <template #suspensionState_default="{ row }"> | ||
| 19 | + <el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag> | ||
| 20 | + <el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag> | ||
| 21 | + </template> | ||
| 22 | + <!-- 操作 --> | ||
| 23 | + <template #actionbtns_default="{ row }"> | ||
| 24 | + <XTextButton | ||
| 25 | + preIcon="ep:user" | ||
| 26 | + title="分配规则" | ||
| 27 | + v-hasPermi="['bpm:task-assign-rule:query']" | ||
| 28 | + @click="handleAssignRule(row)" | ||
| 29 | + /> | ||
| 30 | + </template> | ||
| 31 | + </XTable> | ||
| 32 | + | ||
| 33 | + <!-- 表单详情的弹窗 --> | ||
| 34 | + <XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false"> | ||
| 35 | + <ViewForm | ||
| 36 | + :rule="formDetailPreview.rule" | ||
| 37 | + :option="formDetailPreview.option" | ||
| 38 | + v-if="formDetailVisible" | ||
| 39 | + /> | ||
| 40 | + </XModal> | ||
| 41 | + </ContentWrap> | ||
| 42 | +</template> | ||
| 43 | + | ||
| 44 | +<script setup lang="ts"> | ||
| 45 | +// 全局相关的 import | ||
| 46 | +import { ref } from 'vue' | ||
| 47 | +// import { DICT_TYPE, getDictOptions } from '@/utils/dict' | ||
| 48 | + | ||
| 49 | +// 业务相关的 import | ||
| 50 | +import * as DefinitionApi from '@/api/bpm/definition' | ||
| 51 | +// import * as ModelApi from '@/api/bpm/model' | ||
| 52 | +import { allSchemas } from './definition.data' | ||
| 53 | + | ||
| 54 | +// const { t } = useI18n() // 国际化 | ||
| 55 | +const message = useMessage() // 消息弹窗 | ||
| 56 | +const router = useRouter() // 路由 | ||
| 57 | + | ||
| 58 | +import viewForm from '@form-create/element-ui' | ||
| 59 | +const ViewForm = viewForm.$form() | ||
| 60 | +import { setConfAndFields2 } from '@/utils/formCreate' | ||
| 61 | + | ||
| 62 | +// ========== 列表相关 ========== | ||
| 63 | +const [registerTable] = useXTable({ | ||
| 64 | + allSchemas: allSchemas, | ||
| 65 | + getListApi: DefinitionApi.getProcessDefinitionPageApi | ||
| 66 | +}) | ||
| 67 | + | ||
| 68 | +// 流程表单的详情按钮操作 | ||
| 69 | +const formDetailVisible = ref(false) | ||
| 70 | +const formDetailPreview = ref({ | ||
| 71 | + rule: [], | ||
| 72 | + option: {} | ||
| 73 | +}) | ||
| 74 | +const handleFormDetail = async (rowId: number) => { | ||
| 75 | + // 设置表单 | ||
| 76 | + const data = await FormApi.getFormApi(rowId) | ||
| 77 | + setConfAndFields2(formDetailPreview, data.conf, data.fields) | ||
| 78 | + // 弹窗打开 | ||
| 79 | + formDetailVisible.value = true | ||
| 80 | +} | ||
| 81 | + | ||
| 82 | +// 流程图的详情按钮操作 | ||
| 83 | +const handleBpmnDetail = (row) => { | ||
| 84 | + // TODO 芋艿：流程组件开发中 | ||
| 85 | + console.log(row) | ||
| 86 | + message.success('流程组件开发中，预计 2 月底完成') | ||
| 87 | +} | ||
| 88 | + | ||
| 89 | +// 点击任务分配按钮 | ||
| 90 | +const handleAssignRule = (row) => { | ||
| 91 | + router.push({ | ||
| 92 | + name: 'BpmTaskAssignRuleList', | ||
| 93 | + query: { | ||
| 94 | + modelId: row.id | ||
| 95 | + } | ||
| 96 | + }) | ||
| 97 | +} | ||
| 98 | +</script> |