bpm：完成流程实例的发起功能

YunaiV
1 parent 2d6fe27b
Showing 5 changed files with 94 additions and 81 deletions
yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts
yudao-ui-admin-vue3/src/views/bpm/model/index.vue
yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
yudao-ui-admin-vue3/src/views/bpm/processInstance/process.create.ts
 import request from '@/config/axios'
-import { ProcessInstanceVO } from './types'
  
 export const getMyProcessInstancePageApi = async (params) => {
   return await request.get({ url: '/bpm/process-instance/my-page', params })
 }
  
-export const createProcessInstanceApi = async (data: ProcessInstanceVO) => {
+export const createProcessInstanceApi = async (data) => {
   return await request.post({ url: '/bpm/process-instance/create', data: data })
 }
  
@@ -363,7 +363,7 @@ const handleFormDetail = async (row) =&gt; {
     // 弹窗打开
     formDetailVisible.value = true
   } else {
-    router.push({
+    await router.push({
       path: row.formCustomCreatePath
     })
   }
 <template>
-  <div class="app-container">
+  <ContentWrap>
     <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
     <div v-if="!selectProcessInstance">
       <XTable @register="registerTable">
@@ -7,9 +7,7 @@
           <el-tag v-if="row">v{{ row.version }}</el-tag>
         </template>
         <template #actionbtns_default="{ row }">
-          <el-button type="text" size="small" icon="el-icon-plus" @click="handleSelect(row)"
-            >选择</el-button
-          >
+          <XTextButton preIcon="ep:plus" title="选择" @click="handleSelect(row)" />
         </template>
       </XTable>
     </div>
@@ -18,107 +16,119 @@
       <el-card class="box-card">
         <div class="clearfix">
           <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
-          <el-button style="float: right" type="primary" @click="selectProcessInstance = undefined"
-            >选择其它流程</el-button
-          >
+          <XButton
+            style="float: right"
+            type="primary"
+            preIcon="ep:delete"
+            title="选择其它流程"
+            @click="selectProcessInstance = undefined"
+          />
         </div>
-        <el-col :span="16" :offset="6">
-          <div>
-            <!-- <parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" /> -->
-          </div>
+        <el-col :span="16" :offset="6" style="margin-top: 20px">
+          <form-create
+            :rule="detailForm.rule"
+            v-model:api="fApi"
+            :option="detailForm.option"
+            @submit="submitForm"
+          />
         </el-col>
       </el-card>
       <el-card class="box-card">
         <div class="clearfix">
           <span class="el-icon-picture-outline">流程图</span>
         </div>
+        <!-- TODO 芋艿：待完成？？？ -->
         <!-- <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" /> -->
       </el-card>
     </div>
-  </div>
+  </ContentWrap>
 </template>
-
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { useXTable } from '@/hooks/web/useXTable'
-import * as definitionApi from '@/api/bpm/definition'
-// import {DICT_TYPE, getDictDatas} from "@/utils/dict";
-import { decodeFields } from '@/utils/formGenerator'
-// import Parser from '@/components/parser/Parser'
-// import * as processInstanceApi from "@/api/bpm/processInstance";
+// 业务相关的 import
 import { allSchemas } from './process.create'
-import { useRouter } from 'vue-router'
-const router = useRouter()
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+
+const router = useRouter() // 路由
+const message = useMessage() // 消息
+
+// ========== 列表相关 ==========
  
-const queryParams = reactive({
-  suspensionState: 1
-})
 const [registerTable] = useXTable({
   allSchemas: allSchemas,
-  params: queryParams,
-  getListApi: definitionApi.getProcessDefinitionListApi
+  params: {
+    suspensionState: 1
+  },
+  getListApi: DefinitionApi.getProcessDefinitionListApi,
+  isList: true
 })
  
+// ========== 表单相关 ==========
+
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { ApiAttrs } from '@form-create/element-ui/types/config'
+const fApi = ref<ApiAttrs>()
+
 // 流程表单详情
 const detailForm = ref({
-  fields: []
+  rule: [],
+  option: {}
 })
  
-// // BPMN 数据
-const bpmnXML = ref(null)
-// const bpmnControlForm=ref( {
-//   prefix: "flowable"
-// })
-
 // 流程表单
 const selectProcessInstance = ref(undefined) // 选择的流程实例
 /** 处理选择流程的按钮操作 **/
-const handleSelect = (row) => {
+const handleSelect = async (row) => {
   // 设置选择的流程
   selectProcessInstance.value = row
  
-  // 流程表单
-  if (row.formId) {
-    // 设置对应的表单
-    detailForm.value = {
-      ...JSON.parse(row.formConf),
-      fields: decodeFields([], row.formFields)
-    }
+  // 情况一：流程表单
+  if (row.formType == 10) {
+    // 设置表单
+    setConfAndFields2(detailForm, row.formConf, row.formFields)
  
     // 加载流程图
-    definitionApi.getProcessDefinitionBpmnXMLApi(row.id).then((response) => {
+    DefinitionApi.getProcessDefinitionBpmnXMLApi(row.id).then((response) => {
       bpmnXML.value = response.data
     })
+    // 情况二：业务表单
   } else if (row.formCustomCreatePath) {
-    router.push({ path: row.formCustomCreatePath })
+    await router.push({
+      path: row.formCustomCreatePath
+    })
     // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
   }
 }
+
 /** 提交按钮 */
-//  const submitForm=(params)=> {
-//     if (!params) {
-//       return;
-//     }
-//     // 设置表单禁用
-//     const conf = params.conf;
-//     conf.disabled = true; // 表单禁用
-//     conf.formBtns = false; // 按钮隐藏
+const submitForm = async (formData) => {
+  if (!fApi.value || !selectProcessInstance.value) {
+    return
+  }
+
+  // 提交请求
+  fApi.value.btn.loading(true)
+  try {
+    await ProcessInstanceApi.createProcessInstanceApi({
+      processDefinitionId: selectProcessInstance.value.id,
+      variables: formData
+    })
+    // 提示
+    message.success('发起流程成功')
+    // this.$tab.closeOpenPage();
+    router.go(-1)
+  } finally {
+    fApi.value.btn.loading(false)
+  }
+}
  
-//     // 提交表单，创建流程
-//     const variables = params.values;
-//   await  processInstanceApi.createProcessInstanceApi({
-//       processDefinitionId: this.selectProcessInstance.id,
-//       variables: variables
-//     }).then(response => {
-//       this.$modal.msgSuccess("发起流程成功");
-//       // 关闭当前窗口
-//       this.$tab.closeOpenPage();
-//       this.$router.go(-1);
-//     }).catch(() => {
-//       conf.disabled = false; // 表单开启
-//       conf.formBtns = true; // 按钮展示
-//     })
-//   }
+// ========== 流程图相关 ==========
+
+// // BPMN 数据
+const bpmnXML = ref(null)
+// const bpmnControlForm=ref( {
+//   prefix: "flowable"
+// })
 </script>
  
 <style lang="scss">
@@ -20,11 +20,17 @@
       </template>
       <!-- 操作 -->
       <template #actionbtns_default="{ row }">
-        <XButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
-        <XButton
+        <XTextButton
+          preIcon="ep:view"
+          :title="t('action.detail')"
+          v-hasPermi="['bpm:process-instance:cancel']"
+          @click="handleDetail(row)"
+        />
+        <XTextButton
           preIcon="ep:delete"
           title="取消"
           v-if="row.result === 1"
+          v-hasPermi="['bpm:process-instance:query']"
           @click="handleCancel(row)"
         />
       </template>
-import { reactive } from 'vue'
-// import { useI18n } from '@/hooks/web/useI18n'
 import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
-import { DICT_TYPE } from '@/utils/dict'
-// const { t } = useI18n() // 国际化
  
-// CrudSchema
+// crudSchemas
 const crudSchemas = reactive<VxeCrudSchema>({
   primaryKey: 'id',
-  primaryType: 'id',
-  primaryTitle: '流程名称',
+  primaryType: null,
   action: true,
-  actionWidth: '200px',
   columns: [
     {
+      title: '流程名称',
+      field: 'name'
+    },
+    {
       title: '流程分类',
       field: 'category',
       dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
@@ -20,7 +18,7 @@ const crudSchemas = reactive&lt;VxeCrudSchema&gt;({
     },
     {
       title: '流程版本',
-      field: 'processDefinition.version',
+      field: 'version',
       table: {
         slots: {
           default: 'version_default'