root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

BPM：支持多表单，每个流程任务都可以绑定流程表单

Browse Source
This commit is contained in:
YunaiV 2024-03-20 12:50:59 +08:00
parent 501a1c2f4d
commit 08dd4ed072
5 changed files with 281 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
View File

@ -24,12 +24,7 @@
</el-collapse-item> </el-collapse-item>
<el-collapse-item name="condition" v-if="formVisible" key="form"> <el-collapse-item name="condition" v-if="formVisible" key="form">
<template #title><Icon icon="ep:list" />表单</template> <template #title><Icon icon="ep:list" />表单</template>
<!-- <element-form :id="elementId" :type="elementType" /> --> <element-form :id="elementId" :type="elementType" />
友情提示：使用
<router-link :to="{ path: '/bpm/manager/form' }"
><el-link type="danger">流程表单</el-link>
</router-link>
替代，提供更好的表单设计功能
</el-collapse-item> </el-collapse-item>
<el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task"> <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
<template #title><Icon icon="ep:checked" />任务（审批人）</template> <template #title><Icon icon="ep:checked" />任务（审批人）</template>

425
src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
View File

@ -1,228 +1,233 @@
<template> <template>
<div class="panel-tab__content"> <div class="panel-tab__content">
<el-form label-width="80px"> <el-form label-width="80px">
<el-form-item label="表单标识"> <el-form-item label="流程表单">
<el-input v-model="formKey" clearable @change="updateElementFormKey" /> <!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
</el-form-item> <el-select v-model="formKey" clearable @change="updateElementFormKey">
<el-form-item label="业务标识"> <el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
<el-select v-model="businessKey" @change="updateElementBusinessKey">
<el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />
<el-option label="无" value="" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item label="业务标识">-->
<!-- <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
<!-- <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
<!-- <el-option label="无" value="" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
</el-form> </el-form>
<!--字段列表--> <!--字段列表-->
<div class="element-property list-property"> <!-- <div class="element-property list-property">-->
<el-divider><Icon icon="ep:coin" /> 表单字段</el-divider> <!-- <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
<el-table :data="fieldList" max-height="240" fit border> <!-- <el-table :data="fieldList" max-height="240" fit border>-->
<el-table-column label="序号" type="index" width="50px" /> <!-- <el-table-column label="序号" type="index" width="50px" />-->
<el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip /> <!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
<el-table-column <!-- <el-table-column-->
label="字段类型" <!-- label="字段类型"-->
prop="type" <!-- prop="type"-->
min-width="80px" <!-- min-width="80px"-->
:formatter="(row) => fieldType[row.type] || row.type" <!-- :formatter="(row) => fieldType[row.type] || row.type"-->
show-overflow-tooltip <!-- show-overflow-tooltip-->
/> <!-- />-->
<el-table-column <!-- <el-table-column-->
label="默认值" <!-- label="默认值"-->
prop="defaultValue" <!-- prop="defaultValue"-->
min-width="80px" <!-- min-width="80px"-->
show-overflow-tooltip <!-- show-overflow-tooltip-->
/> <!-- />-->
<el-table-column label="操作" width="90px"> <!-- <el-table-column label="操作" width="90px">-->
<template #default="scope"> <!-- <template #default="scope">-->
<el-button type="primary" link @click="openFieldForm(scope, scope.$index)" <!-- <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"-->
>编辑</el-button <!-- >编辑</el-button-->
> <!-- >-->
<el-divider direction="vertical" /> <!-- <el-divider direction="vertical" />-->
<el-button <!-- <el-button-->
type="primary" <!-- type="primary"-->
link <!-- link-->
style="color: #ff4d4f" <!-- style="color: #ff4d4f"-->
@click="removeField(scope, scope.$index)" <!-- @click="removeField(scope, scope.$index)"-->
>移除</el-button <!-- >移除</el-button-->
> <!-- >-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
</el-table> <!-- </el-table>-->
</div> <!-- </div>-->
<div class="element-drawer__button"> <!-- <div class="element-drawer__button">-->
<XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" /> <!-- <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />-->
</div> <!-- </div>-->
<!--字段配置侧边栏--> <!--字段配置侧边栏-->
<el-drawer <!-- <el-drawer-->
v-model="fieldModelVisible" <!-- v-model="fieldModelVisible"-->
title="字段配置" <!-- title="字段配置"-->
:size="`${width}px`" <!-- :size="`${width}px`"-->
append-to-body <!-- append-to-body-->
destroy-on-close <!-- destroy-on-close-->
> <!-- >-->
<el-form :model="formFieldForm" label-width="90px"> <!-- <el-form :model="formFieldForm" label-width="90px">-->
<el-form-item label="字段ID"> <!-- <el-form-item label="字段ID">-->
<el-input v-model="formFieldForm.id" clearable /> <!-- <el-input v-model="formFieldForm.id" clearable />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="类型"> <!-- <el-form-item label="类型">-->
<el-select <!-- <el-select-->
v-model="formFieldForm.typeType" <!-- v-model="formFieldForm.typeType"-->
placeholder="请选择字段类型" <!-- placeholder="请选择字段类型"-->
clearable <!-- clearable-->
@change="changeFieldTypeType" <!-- @change="changeFieldTypeType"-->
> <!-- >-->
<el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" /> <!-- <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
</el-select> <!-- </el-select>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'"> <!-- <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
<el-input v-model="formFieldForm.type" clearable /> <!-- <el-input v-model="formFieldForm.type" clearable />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="名称"> <!-- <el-form-item label="名称">-->
<el-input v-model="formFieldForm.label" clearable /> <!-- <el-input v-model="formFieldForm.label" clearable />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'"> <!-- <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
<el-input v-model="formFieldForm.datePattern" clearable /> <!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="默认值"> <!-- <el-form-item label="默认值">-->
<el-input v-model="formFieldForm.defaultValue" clearable /> <!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
</el-form-item> <!-- </el-form-item>-->
</el-form> <!-- </el-form>-->
<!-- 枚举值设置 --> <!-- &lt;!&ndash; 枚举值设置 &ndash;&gt;-->
<template v-if="formFieldForm.type === 'enum'"> <!-- <template v-if="formFieldForm.type === 'enum'">-->
<el-divider key="enum-divider" /> <!-- <el-divider key="enum-divider" />-->
<p class="listener-filed__title" key="enum-title"> <!-- <p class="listener-filed__title" key="enum-title">-->
<span><Icon icon="ep:menu" />枚举值列表：</span> <!-- <span><Icon icon="ep:menu" />枚举值列表：</span>-->
<el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')" <!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
>添加枚举值</el-button <!-- >添加枚举值</el-button-->
> <!-- >-->
</p> <!-- </p>-->
<el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border> <!-- <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>-->
<el-table-column label="序号" width="50px" type="index" /> <!-- <el-table-column label="序号" width="50px" type="index" />-->
<el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip /> <!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip /> <!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<el-table-column label="操作" width="90px"> <!-- <el-table-column label="操作" width="90px">-->
<template #default="scope"> <!-- <template #default="scope">-->
<el-button <!-- <el-button-->
type="primary" <!-- type="primary"-->
link <!-- link-->
@click="openFieldOptionForm(scope, scope.$index, 'enum')" <!-- @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
>编辑</el-button <!-- >编辑</el-button-->
> <!-- >-->
<el-divider direction="vertical" /> <!-- <el-divider direction="vertical" />-->
<el-button <!-- <el-button-->
type="primary" <!-- type="primary"-->
link <!-- link-->
style="color: #ff4d4f" <!-- style="color: #ff4d4f"-->
@click="removeFieldOptionItem(scope, scope.$index, 'enum')" <!-- @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
>移除</el-button <!-- >移除</el-button-->
> <!-- >-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
</el-table> <!-- </el-table>-->
</template> <!-- </template>-->
<!-- 校验规则 --> <!-- &lt;!&ndash; 校验规则 &ndash;&gt;-->
<el-divider key="validation-divider" /> <!-- <el-divider key="validation-divider" />-->
<p class="listener-filed__title" key="validation-title"> <!-- <p class="listener-filed__title" key="validation-title">-->
<span><Icon icon="ep:menu" />约束条件列表：</span> <!-- <span><Icon icon="ep:menu" />约束条件列表：</span>-->
<el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')" <!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
>添加约束</el-button <!-- >添加约束</el-button-->
> <!-- >-->
</p> <!-- </p>-->
<el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border> <!-- <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>-->
<el-table-column label="序号" width="50px" type="index" /> <!-- <el-table-column label="序号" width="50px" type="index" />-->
<el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip /> <!-- <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip /> <!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
<el-table-column label="操作" width="90px"> <!-- <el-table-column label="操作" width="90px">-->
<template #default="scope"> <!-- <template #default="scope">-->
<el-button <!-- <el-button-->
type="primary" <!-- type="primary"-->
link <!-- link-->
@click="openFieldOptionForm(scope, scope.$index, 'constraint')" <!-- @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
>编辑</el-button <!-- >编辑</el-button-->
> <!-- >-->
<el-divider direction="vertical" /> <!-- <el-divider direction="vertical" />-->
<el-button <!-- <el-button-->
type="primary" <!-- type="primary"-->
link <!-- link-->
style="color: #ff4d4f" <!-- style="color: #ff4d4f"-->
@click="removeFieldOptionItem(scope, scope.$index, 'constraint')" <!-- @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
>移除</el-button <!-- >移除</el-button-->
> <!-- >-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
</el-table> <!-- </el-table>-->
<!-- 表单属性 --> <!-- &lt;!&ndash; 表单属性 &ndash;&gt;-->
<el-divider key="property-divider" /> <!-- <el-divider key="property-divider" />-->
<p class="listener-filed__title" key="property-title"> <!-- <p class="listener-filed__title" key="property-title">-->
<span><Icon icon="ep:menu" />字段属性列表：</span> <!-- <span><Icon icon="ep:menu" />字段属性列表：</span>-->
<el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')" <!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
>添加属性</el-button <!-- >添加属性</el-button-->
> <!-- >-->
</p> <!-- </p>-->
<el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border> <!-- <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>-->
<el-table-column label="序号" width="50px" type="index" /> <!-- <el-table-column label="序号" width="50px" type="index" />-->
<el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip /> <!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip /> <!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
<el-table-column label="操作" width="90px"> <!-- <el-table-column label="操作" width="90px">-->
<template #default="scope"> <!-- <template #default="scope">-->
<el-button <!-- <el-button-->
type="primary" <!-- type="primary"-->
link <!-- link-->
@click="openFieldOptionForm(scope, scope.$index, 'property')" <!-- @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
>编辑</el-button <!-- >编辑</el-button-->
> <!-- >-->
<el-divider direction="vertical" /> <!-- <el-divider direction="vertical" />-->
<el-button <!-- <el-button-->
type="primary" <!-- type="primary"-->
link <!-- link-->
style="color: #ff4d4f" <!-- style="color: #ff4d4f"-->
@click="removeFieldOptionItem(scope, scope.$index, 'property')" <!-- @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
>移除</el-button <!-- >移除</el-button-->
> <!-- >-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
</el-table> <!-- </el-table>-->
<!-- 底部按钮 --> <!-- &lt;!&ndash; 底部按钮 &ndash;&gt;-->
<div class="element-drawer__button"> <!-- <div class="element-drawer__button">-->
<el-button>取 消</el-button> <!-- <el-button>取 消</el-button>-->
<el-button type="primary" @click="saveField">保 存</el-button> <!-- <el-button type="primary" @click="saveField">保 存</el-button>-->
</div> <!-- </div>-->
</el-drawer> <!-- </el-drawer>-->
<el-dialog <!-- <el-dialog-->
v-model="fieldOptionModelVisible" <!-- v-model="fieldOptionModelVisible"-->
:title="optionModelTitle" <!-- :title="optionModelTitle"-->
width="600px" <!-- width="600px"-->
append-to-body <!-- append-to-body-->
destroy-on-close <!-- destroy-on-close-->
> <!-- >-->
<el-form :model="fieldOptionForm" label-width="96px"> <!-- <el-form :model="fieldOptionForm" label-width="96px">-->
<el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id"> <!-- <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
<el-input v-model="fieldOptionForm.id" clearable /> <!-- <el-input v-model="fieldOptionForm.id" clearable />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name"> <!-- <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
<el-input v-model="fieldOptionForm.name" clearable /> <!-- <el-input v-model="fieldOptionForm.name" clearable />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config"> <!-- <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
<el-input v-model="fieldOptionForm.config" clearable /> <!-- <el-input v-model="fieldOptionForm.config" clearable />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value"> <!-- <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
<el-input v-model="fieldOptionForm.value" clearable /> <!-- <el-input v-model="fieldOptionForm.value" clearable />-->
</el-form-item> <!-- </el-form-item>-->
</el-form> <!-- </el-form>-->
<template #footer> <!-- <template #footer>-->
<el-button @click="fieldOptionModelVisible = false">取 消</el-button> <!-- <el-button @click="fieldOptionModelVisible = false">取 消</el-button>-->
<el-button type="primary" @click="saveFieldOption">确 定</el-button> <!-- <el-button type="primary" @click="saveFieldOption">确 定</el-button>-->
</template> <!-- </template>-->
</el-dialog> <!-- </el-dialog>-->
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as FormApi from '@/api/bpm/form'
defineOptions({ name: 'ElementForm' }) defineOptions({ name: 'ElementForm' })
const props = defineProps({ const props = defineProps({
@ -263,6 +268,9 @@ const bpmnInstances = () => (window as any)?.bpmnInstances
const resetFormList = () => { const resetFormList = () => {
bpmnELement.value = bpmnInstances().bpmnElement bpmnELement.value = bpmnInstances().bpmnElement
formKey.value = bpmnELement.value.businessObject.formKey formKey.value = bpmnELement.value.businessObject.formKey
if (formKey.value?.length > 0) {
formKey.value = parseInt(formKey.value)
}
// 获取元素扩展属性 或者 创建扩展属性 // 获取元素扩展属性 或者 创建扩展属性
elExtensionElements.value = elExtensionElements.value =
bpmnELement.value.businessObject.get('extensionElements') || bpmnELement.value.businessObject.get('extensionElements') ||
@ -451,6 +459,11 @@ const updateElementExtensions = () => {
}) })
} }
const formList = ref([]) // 流程表单的下拉框的数据
onMounted(async () => {
formList.value = await FormApi.getSimpleFormList()
})
watch( watch(
() => props.id, () => props.id,
(val) => { (val) => {

13
src/utils/formCreate.ts
View File

@ -28,7 +28,7 @@ export const decodeFields = (fields: string[]) => {
return rule return rule
} }
// 设置表单的 Conf 和 Fields // 设置表单的 Conf 和 Fields，适用 FcDesigner 场景
export const setConfAndFields = (designerRef: object, conf: string, fields: string) => { export const setConfAndFields = (designerRef: object, conf: string, fields: string) => {
// @ts-ignore // @ts-ignore
designerRef.value.setOption(JSON.parse(conf)) designerRef.value.setOption(JSON.parse(conf))
@ -36,19 +36,22 @@ export const setConfAndFields = (designerRef: object, conf: string, fields: stri
designerRef.value.setRule(decodeFields(fields)) designerRef.value.setRule(decodeFields(fields))
} }
// 设置表单的 Conf 和 Fields // 设置表单的 Conf 和 Fields，适用 form-create 场景
export const setConfAndFields2 = ( export const setConfAndFields2 = (
detailPreview: object, detailPreview: object,
conf: string, conf: string,
fields: string, fields: string,
value?: object value?: object
) => { ) => {
if (isRef(detailPreview)) {
detailPreview = detailPreview.value
}
// @ts-ignore // @ts-ignore
detailPreview.value.option = JSON.parse(conf) detailPreview.option = JSON.parse(conf)
// @ts-ignore // @ts-ignore
detailPreview.value.rule = decodeFields(fields) detailPreview.rule = decodeFields(fields)
if (value) { if (value) {
// @ts-ignore // @ts-ignore
detailPreview.value.value = value detailPreview.value = value
} }
} }

5
src/views/bpm/model/ModelForm.vue
View File

@ -194,11 +194,10 @@ const submitForm = async () => {
await ModelApi.createModel(data) await ModelApi.createModel(data)
// 提示，引导用户做后续的操作 // 提示，引导用户做后续的操作
await ElMessageBox.alert( await ElMessageBox.alert(
'<strong>新建模型成功！</strong>后续需要执行如下 4 个步骤：' + '<strong>新建模型成功！</strong>后续需要执行如下 3 个步骤：' +
'<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' + '<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
'<div>2. 点击【设计流程】按钮，绘制流程图</div>' + '<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
'<div>3. 点击【分配规则】按钮，设置每个用户任务的审批人</div>' + '<div>3. 点击【发布流程】按钮，完成流程的最终发布</div>' +
'<div>4. 点击【发布流程】按钮，完成流程的最终发布</div>' +
'另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！', '另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
'重要提示', '重要提示',
{ {

55
src/views/bpm/processInstance/detail/index.vue
View File

@ -21,9 +21,22 @@
{{ processInstance.name }} {{ processInstance.name }}
</el-form-item> </el-form-item>
<el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人"> <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
{{ processInstance.startUser.nickname }} {{ processInstance?.startUser.nickname }}
<el-tag size="small" type="info">{{ processInstance.startUser.deptName }}</el-tag> <el-tag size="small" type="info">{{ processInstance?.startUser.deptName }}</el-tag>
</el-form-item> </el-form-item>
<el-card class="mb-15px !-mt-10px" v-if="runningTasks[index].formId > 0">
<template #header>
<span class="el-icon-picture-outline">
填写表单【{{ runningTasks[index]?.formName }}】
</span>
</template>
<form-create
v-model:api="approveFormFApis[index]"
v-model="approveForms[index].value"
:option="approveForms[index].option"
:rule="approveForms[index].rule"
/>
</el-card>
<el-form-item label="审批建议" prop="reason"> <el-form-item label="审批建议" prop="reason">
<el-input <el-input
v-model="auditForms[index].reason" v-model="auditForms[index].reason"
@ -149,6 +162,9 @@ const auditForms = ref<any[]>([]) // 审批任务的表单
const auditRule = reactive({ const auditRule = reactive({
reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }] reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
}) })
const approveForms = ref<any[]>([]) // 审批通过时，额外的补充信息
const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
// ========== 申请信息 ========== // ========== 申请信息 ==========
const fApi = ref<ApiAttrs>() // const fApi = ref<ApiAttrs>() //
const detailForm = ref({ const detailForm = ref({
@ -158,6 +174,20 @@ const detailForm = ref({
value: {} value: {}
}) })
/** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
watch(
() => approveFormFApis.value,
(value) => {
value?.forEach((api) => {
api.btn.show(false)
api.resetBtn.show(false)
})
},
{
deep: true
}
)
/** 处理审批通过和不通过的操作 */ /** 处理审批通过和不通过的操作 */
const handleAudit = async (task, pass) => { const handleAudit = async (task, pass) => {
// 1.1 获得对应表单 // 1.1 获得对应表单
@ -176,6 +206,12 @@ const handleAudit = async (task, pass) => {
copyUserIds: auditForms.value[index].copyUserIds copyUserIds: auditForms.value[index].copyUserIds
} }
if (pass) { if (pass) {
// 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
const formCreateApi = approveFormFApis.value[index]
if (formCreateApi) {
await formCreateApi.validate()
data.variables = approveForms.value[index].value
}
await TaskApi.approveTask(data) await TaskApi.approveTask(data)
message.success('审批通过成功') message.success('审批通过成功')
} else { } else {
@ -258,6 +294,10 @@ const getProcessInstance = async () => {
/** 加载任务列表 */ /** 加载任务列表 */
const getTaskList = async () => { const getTaskList = async () => {
runningTasks.value = []
auditForms.value = []
approveForms.value = []
approveFormFApis.value = []
try { try {
// 获得未取消的任务 // 获得未取消的任务
tasksLoad.value = true tasksLoad.value = true
@ -285,8 +325,6 @@ const getTaskList = async () => {
}) })
// 获得需要自己审批的任务 // 获得需要自己审批的任务
runningTasks.value = []
auditForms.value = []
loadRunningTask(tasks.value) loadRunningTask(tasks.value)
} finally { } finally {
tasksLoad.value = false tasksLoad.value = false
@ -315,6 +353,15 @@ const loadRunningTask = (tasks) => {
reason: '', reason: '',
copyUserIds: [] copyUserIds: []
}) })
// 2.4 处理 approve 表单
if (task.formId && task.formConf) {
const approveForm = {}
setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariable)
approveForms.value.push(approveForm)
} else {
approveForms.value.push({}) // 占位，避免为空
}
}) })
} }