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> | ... | ... |