Commit c3317e144f36d317243e0ae5327a222301a5c1af

Authored by YunaiV
1 parent 3466b318

bpm:流程定义的列表

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