feat: bpm views

src/api/bpm/processInstance/index.ts

@@ -1,29 +1,10 @@
 import { defHttp } from '@/utils/http/axios'
 
-export interface task {
-  id: string
-  name: string
-}
-export interface ProcessInstanceVO {
-  id: number
-  name: string
-  processDefinitionId: string
-  category: string
-  result: number
-  tasks: task[]
-  fields: string[]
-  status: number
-  remark: string
-  businessKey: string
-  createTime: string
-  endTime: string
-}
-
 export function getMyProcessInstancePage(params) {
   return defHttp.get({ url: '/bpm/process-instance/my-page', params })
 }
 
-export function createProcessInstance(data: ProcessInstanceVO) {
+export function createProcessInstance(data) {
   return defHttp.post({ url: '/bpm/process-instance/create', data })
 }
 

src/views/bpm/model/editor/index.vue

@@ -1,3 +1,3 @@
 <template>
-  123
+  <div>123</div>
 </template>

src/views/bpm/processInstance/create/create.data.ts

@@ -0,0 +1,32 @@
+import type { BasicColumn } from '@/components/Table'
+import { DICT_TYPE } from '@/utils/dict'
+import { useRender } from '@/components/Table'
+
+export const columns: BasicColumn[] = [
+  {
+    title: '流程名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '流程分类',
+    dataIndex: 'category',
+    width: 120,
+    customRender: ({ text }) => {
+      return useRender.renderDict(text, DICT_TYPE.BPM_MODEL_CATEGORY)
+    },
+  },
+  {
+    title: '流程版本',
+    dataIndex: 'name',
+    width: 120,
+    customRender: ({ text }) => {
+      return useRender.renderTag(text)
+    },
+  },
+  {
+    title: '流程描述',
+    dataIndex: 'description',
+    width: 200,
+  },
+]

src/views/bpm/processInstance/create/index.vue

@@ -1,3 +1,123 @@
+<script lang="ts" setup>
+import { Card, Steps } from 'ant-design-vue'
+import { ref } from 'vue'
+import { columns } from './create.data'
+import { useGo } from '@/hooks/web/usePage'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+import { PageWrapper } from '@/components/Page'
+import { IconEnum } from '@/enums/appEnum'
+import Icon from '@/components/Icon'
+import { BasicTable, TableAction, useTable } from '@/components/Table'
+import { getProcessDefinitionBpmnXML, getProcessDefinitionList } from '@/api/bpm/definition'
+import { createProcessInstance } from '@/api/bpm/processInstance'
+
+defineOptions({ name: 'BpmProcessInstanceCreate' })
+
+const go = useGo()
+const { t } = useI18n()
+const { createMessage } = useMessage()
+const current = ref(0)
+
+const bpmnXML = ref(null) // BPMN 数据
+const selectProcessInstance = ref() // 选择的流程实例
+
+const [registerTable] = useTable({
+  api: getProcessDefinitionList,
+  columns,
+  actionColumn: {
+    width: 140,
+    title: t('common.action'),
+    dataIndex: 'action',
+    fixed: 'right',
+  },
+})
+
+/** 处理选择流程的按钮操作 **/
+async function handleSelect(row) {
+  // 设置选择的流程
+  selectProcessInstance.value = row
+
+  // 情况一：流程表单
+  if (row.formType === 10) {
+    // 设置表单
+    // setConfAndFields2(detailForm, row.formConf, row.formFields)
+    // 加载流程图
+    bpmnXML.value = await getProcessDefinitionBpmnXML(row.id)
+    // 情况二：业务表单
+  }
+  else if (row.formCustomCreatePath) {
+    await go({
+      path: row.formCustomCreatePath,
+    })
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+  }
+}
+
+/** 提交按钮 */
+async function submitForm(formData) {
+  // if (!fApi.value || !selectProcessInstance.value)
+  //   return
+
+  // // 提交请求
+  // fApi.value.btn.loading(true)
+  try {
+    await createProcessInstance({
+      processDefinitionId: selectProcessInstance.value.id,
+      variables: formData,
+    })
+    // 提示
+    createMessage.success('发起流程成功')
+    go()
+  }
+  finally {
+    // fApi.value.btn.loading(false)
+  }
+}
+</script>
+
 <template>
-  <div>123</div>
+  <PageWrapper>
+    <div class="step-form-form">
+      <Steps :current="current">
+        <Steps.Step title="选择流程" />
+        <Steps.Step title="流程提交" />
+      </Steps>
+    </div>
+    <div class="m-5">
+      <BasicTable v-if="!selectProcessInstance" @register="registerTable">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <TableAction
+              :actions="[
+                { icon: IconEnum.SEND, label: '选择', onClick: handleSelect.bind(null, record) },
+              ]"
+            />
+          </template>
+        </template>
+      </BasicTable>
+      <div v-if="selectProcessInstance">
+        <Card :title="`申请信息——【${selectProcessInstance.name}】`">
+          <template #extra>
+            <a-button type="primary" @click="selectProcessInstance = undefined">
+              <Icon icon="ep:delete" /> 选择其它流程
+            </a-button>
+          </template>
+          <p>表单</p>
+          <a-button type="primary" @click="submitForm">
+            提交
+          </a-button>
+          <p>流程图</p>
+        </Card>
+      </div>
+    </div>
+  </PageWrapper>
 </template>
+
+<style lang="less" scoped>
+.step-form-form {
+  width: 750px;
+  margin: 0 auto;
+  margin-top: 10px;
+}
+</style>

src/views/bpm/processInstance/processInstance.data.ts

@@ -43,6 +43,14 @@ export const columns: BasicColumn[] = [
       return useRender.renderDict(text, DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)
     },
   },
+  {
+    title: '结果',
+    dataIndex: 'result',
+    width: 180,
+    customRender: ({ text }) => {
+      return useRender.renderDict(text, DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)
+    },
+  },
   {
     title: '提交时间',
     dataIndex: 'createTime',