|
|
@@ -1,5 +1,5 @@
|
|
|
<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">
|
YunaiV