abu/wzj-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add 新增流程定义与表单关联

Browse Source
This commit is contained in:
gssong 2023-09-10 13:29:33 +08:00
parent e874069865
commit 3a9c651c28
5 changed files with 319 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/workflow/form/types.ts
View File

@ -3,6 +3,7 @@ export interface FormVO extends BaseEntity {
formName: string;
formConfig: string;
content: string;
status?: string;
remark: string;
}
@ -11,6 +12,7 @@ export interface FormForm {
formName: string;
formConfig?: string;
content?: string;
status?: string;
remark: string;
}

63
src/api/workflow/formDefinition/index.ts Normal file
View File

@ -0,0 +1,63 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { FormDefinitionVO, FormDefinitionForm, FormDefinitionQuery } from '@/api/workflow/formDefinition/types';
/**
* 查询动态单与流程定义关联信息列表
* @param query
* @returns {*}
*/
export const listFormDefinition = (query?: FormDefinitionQuery): AxiosPromise<FormDefinitionVO[]> => {
return request({
url: '/workflow/formDefinition/list',
method: 'get',
params: query
});
};
/**
* 查询动态单与流程定义关联信息详细
* @param id
*/
export const getFormDefinition = (id: string | number): AxiosPromise<FormDefinitionVO> => {
return request({
url: '/workflow/formDefinition/' + id,
method: 'get'
});
};
/**
* 新增动态单与流程定义关联信息
* @param data
*/
export const addFormDefinition = (data: FormDefinitionForm) => {
return request({
url: '/workflow/formDefinition',
method: 'post',
data: data
});
};
/**
* 修改动态单与流程定义关联信息
* @param data
*/
export const updateFormDefinition = (data: FormDefinitionForm) => {
return request({
url: '/workflow/formDefinition',
method: 'put',
data: data
});
};
/**
* 删除动态单与流程定义关联信息
* @param id
*/
export const delFormDefinition = (id: string | number | Array<string | number>) => {
return request({
url: '/workflow/formDefinition/' + id,
method: 'delete'
});
};

101
src/api/workflow/formDefinition/types.ts Normal file
View File

@ -0,0 +1,101 @@
export interface FormDefinitionVO {
/**
* 主键
*/
id: string | number;
/**
* 动态表单id
*/
formId: string | number;
/**
* 流程定义id
*/
processDefinitionKey: string;
/**
* 流程定义名称
*/
processDefinitionName: string;
/**
* 流程定义id
*/
processDefinitionId: string | number;
/**
* 流程定义版本
*/
processDefinitionVersion: number;
}
export interface FormDefinitionForm extends BaseEntity {
/**
* 主键
*/
id?: string | number;
/**
* 动态表单id
*/
formId?: string | number;
/**
* 流程定义id
*/
processDefinitionKey?: string;
/**
* 流程定义名称
*/
processDefinitionName?: string;
/**
* 流程定义id
*/
processDefinitionId?: string | number;
/**
* 流程定义版本
*/
processDefinitionVersion?: number;
}
export interface FormDefinitionQuery extends PageQuery {
/**
* 动态表单id
*/
formId?: string | number;
/**
* 流程定义id
*/
processDefinitionKey?: string;
/**
* 流程定义名称
*/
processDefinitionName?: string;
/**
* 流程定义id
*/
processDefinitionId?: string | number;
/**
* 流程定义版本
*/
processDefinitionVersion?: number;
/**
* 日期范围参数
*/
params?: any;
}

11
src/api/workflow/processDefinition/index.ts
View File

@ -109,3 +109,14 @@ export const migrationProcessDefinition = (currentProcessDefinitionId: string, f
method: 'put'
});
};
/**
* 查询流程定义列表
* @returns
*/
export const getProcessDefinitionList = () => {
return request({
url: `/workflow/processDefinition/getProcessDefinitionList`,
method: 'get'
});
};

155
src/views/workflow/form/index.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div class="search" v-show="showSearch">
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="70">
<el-form-item label="表单名称" prop="formName">
@ -17,16 +18,20 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['workflow:form:add']">新增</el-button>
<el-button type="primary" plain icon="Plus" @click="handleAdd"
v-hasPermi="['workflow:form:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['workflow:form:edit']">修改</el-button>
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
v-hasPermi="['workflow:form:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['workflow:form:remove']">删除</el-button>
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
v-hasPermi="['workflow:form:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['workflow:form:export']">导出</el-button>
<el-button type="warning" plain icon="Download" @click="handleExport"
v-hasPermi="['workflow:form:export']">导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
@ -36,22 +41,44 @@
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="表单主键" align="center" prop="formId" v-if="false" />
<el-table-column label="表单名称" align="center" prop="formName" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="状态" align="center" key="status">
<template #default="scope">
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
@change="handleStatusChange(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="流程定义KEY" align="center" prop="wfFormDefinitionVo">
<template #default="scope">
<span v-if="scope.row.wfFormDefinitionVo">{{ scope.row.wfFormDefinitionVo.processDefinitionKey }}</span>
</template>
</el-table-column>
<el-table-column label="流程定义名称" align="center" prop="wfFormDefinitionVo">
<template #default="scope">
<span v-if="scope.row.wfFormDefinitionVo">{{ scope.row.wfFormDefinitionVo.processDefinitionName }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="详情" placement="top">
<el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['workflow:form:query']"></el-button>
<el-button link type="primary" icon="View" @click="handleDetail(scope.row)"
v-hasPermi="['workflow:form:query']"></el-button>
</el-tooltip>
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['workflow:form:edit']"></el-button>
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
v-hasPermi="['workflow:form:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['workflow:form:remove']"></el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['workflow:form:remove']"></el-button>
</el-tooltip>
<el-tooltip content="绑定流程" placement="top">
<el-button link type="primary" icon="Tickets" @click="handleProcess(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 流程表单设计器对话框 -->
@ -88,11 +115,44 @@
</div>
</template>
</el-dialog>
<el-dialog v-if="processDefinitionDialog.visible" v-model="processDefinitionDialog.visible"
:title="processDefinitionDialog.title" width="70%">
<el-table v-loading="loading" :data="processDefinition.list">
<el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
<el-table-column fixed align="center" prop="name" label="流程定义名称"></el-table-column>
<el-table-column align="center" prop="key" label="标识Key"></el-table-column>
<el-table-column align="center" prop="version" label="版本号" width="90">
<template #default="scope"> v{{ scope.row.version }}.0</template>
</el-table-column>
<el-table-column align="center" prop="suspensionState" label="状态" min-width="70">
<template #default="scope">
<el-tag type="success" v-if="scope.row.suspensionState == 1">激活</el-tag>
<el-tag type="danger" v-else>挂起</el-tag>
</template>
</el-table-column>
<el-table-column align="center" prop="deploymentTime" label="部署时间"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="200" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" size="small" @click="handleConfirm(scope.row)">确认绑定</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="processDefinition.total > 0" :total="processDefinition.total"
v-model:page="processQueryParams.pageNum" v-model:limit="processQueryParams.pageSize"
@pagination="getDefinitionList" />
</el-dialog>
</div>
</template>
<script setup name="Form" lang="ts">
import { listForm, addForm, updateForm, getForm, delForm } from "@/api/workflow/form";
import {
listProcessDefinition
} from '@/api/workflow/processDefinition';
import {
addFormDefinition
} from '@/api/workflow/formDefinition';
import { FormForm, FormQuery, FormVO } from "@/api/workflow/form/types";
import { ComponentInternalInstance } from "vue";
@ -105,6 +165,14 @@ const ids = ref<Array<number | string>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const formId = ref<number | string>();
const processDefinition = reactive<any>({
list: [],
total: 0
});
const vfDesignerRef = ref(null);
const vfRenderRef = ref(null);
@ -116,6 +184,11 @@ const designer = reactive<DialogOption>({
title: ''
})
const processDefinitionDialog = reactive<DialogOption>({
visible: false,
title: '流程定义'
});
const designerConfig = reactive({
externalLink: true,
toolbarMaxWidth: 510,
@ -142,11 +215,12 @@ const initFormData: FormForm = {
formName: '',
formConfig: '',
content: '',
status: '1',
remark: ''
}
const data = reactive<PageData<FormForm, FormQuery>>({
form: {...initFormData},
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
@ -159,6 +233,15 @@ const data = reactive<PageData<FormForm, FormQuery>>({
const { queryParams, form, rules } = toRefs<PageData<FormForm, FormQuery>>(data);
// 查询参数
const processQueryParams = ref<Record<string, any>>({
pageNum: 1,
pageSize: 10,
name: undefined,
key: undefined,
categoryCode: undefined
});
/** 查询岗位列表 */
const getList = async () => {
loading.value = true;
@ -174,7 +257,7 @@ const cancel = () => {
}
/** 表单重置 */
const reset = () => {
form.value = {...initFormData};
form.value = { ...initFormData };
}
/** 搜索按钮操作 */
const handleQuery = () => {
@ -195,6 +278,7 @@ const handleSelectionChange = (selection: FormVO[]) => {
/** 新增表单操作 */
const handleAdd = () => {
designer.visible = true;
getDefinitionList()
nextTick(() => {
reset();
vfDesignerRef.value.clearDesigner();
@ -203,6 +287,7 @@ const handleAdd = () => {
/** 修改表单操作 */
const handleUpdate = (row?: FormVO) => {
designer.visible = true;
getDefinitionList()
nextTick(async () => {
const formId = row?.formId || ids.value[0];
const res = await getForm(formId);
@ -210,12 +295,26 @@ const handleUpdate = (row?: FormVO) => {
vfDesignerRef.value.setFormJson(form.value.content);
})
}
//修改状态
const handleStatusChange = async (row: FormVO) => {
let text = row.status === "0" ? "启用" : "停用"
try {
form.value = row
form.value.status === "0" ? "1" : "0";
await proxy?.$modal.confirm('确认要' + text + '【' + row.formName + '】表单?');
await updateForm(row);
proxy?.$modal.msgSuccess(text + "成功");
getList()
} catch (err) {
row.status = row.status === "0" ? "1" : "0";
}
}
/** 查看表单操作 */
const handleDetail = (row: FormVO) => {
render.visible = true;
render.title = '查看表单详情';
nextTick(async () => {
vfRenderRef.value.setFormJson(row.content || {formConfig: {}, widgetList: []});
vfRenderRef.value.setFormJson(row.content || { formConfig: {}, widgetList: [] });
});
}
@ -246,7 +345,35 @@ const submitForm = () => {
getList();
})
}
//获取流程定义
const getDefinitionList = () => {
listProcessDefinition(processQueryParams.value).then(res => {
processDefinition.list = res.rows
processDefinition.total = res.total;
loading.value = false;
})
}
const handleProcess = async (row?: FormVO) => {
formId.value = row?.formId
processDefinitionDialog.visible = true
getDefinitionList()
}
//绑定流程
const handleConfirm = async (row?: any) => {
await proxy?.$modal.confirm('是否确认绑定【' + row.key + '】？');
let data = {
formId: formId.value,
processDefinitionKey: row.key,
processDefinitionName: row.name,
processDefinitionId: row.id,
processDefinitionVersion: row.version
}
await addFormDefinition(data);
processDefinitionDialog.visible = false
getList();
proxy?.$modal.msgSuccess("绑定成功");
}
onMounted(() => {
getList();
});
@ -257,9 +384,11 @@ onMounted(() => {
.main-container {
margin: 0;
}
label {
font-weight: normal;
}
:deep(.external-link) {
display: flex;
align-items: center;