HC_YFZX
/
vue-vben-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

流程模板设计：简单的流程新增数据处理，接口对接，编辑逻辑梳理。

ly
刘妍 2024-03-12 16:41:21 +08:00
parent b015db153d
commit 72c07fbd80
13 changed files with 275 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/sys/WFSchemeInfo.ts
View File

@ -1,7 +1,7 @@
// WFSchemeInfo 流程模版基本信息
import { defHttp } from '@/utils/http/axios';
import {SchemeListParams,GetSchemeModel,AddParams,
DeleteParams,UpdateParams,StateParams,HistoryParams,GetHistoryModel,SchemeParams} from './model/wfSchemeInfoModel'
DeleteParams,UpdateParams,StateParams,HistoryParams,GetHistoryModel,SchemeParams,DetailParams} from './model/wfSchemeInfoModel'
enum Api {
// 流程模板基本信息
LoadPage = '/api/WFSchemeInfo/LoadPage',
@ -9,6 +9,7 @@ enum Api {
Update = '/api/WFSchemeInfo/Update',
Delete = '/api/WFSchemeInfo/Delete',
UpDateState = '/api/WFSchemeInfo/UpDateState',
GetDetail='/api/WFSchemeInfo/Get',
// 流程模板详细信息
LoadHistoryPage= '/api/WFScheme/LoadPage',
UpdateScheme='/api/WFSchemeInfo/UpdateScheme',
@ -20,6 +21,9 @@ enum Api {
export function getLoadPage(params?: SchemeListParams) {
return defHttp.get<GetSchemeModel>({ url: Api.LoadPage, params });
}
export function getDetail(params?: DetailParams){
return defHttp.get({ url: Api.GetDetail, params });
}
/**
* @description: postAdd
*/
@ -34,7 +38,7 @@ export function postAdd( params?:AddParams) {
export function update(params:UpdateParams) {
return defHttp.post({
url: Api.Update,
url: Api.Update+"?id="+params.schemeinfo.id,
params
});
}

22
src/api/sys/model/wfSchemeInfoModel.ts
View File

@ -8,6 +8,12 @@ export interface SchemeListParams {
category: string;
ids?: string;
}
/**
* @description: 获取流程模板详情参数
*/
export interface DetailParams {
code: string;
}
/**
* @description: 流程模板添加参数
@ -101,9 +107,9 @@ export interface DeleteParams {
id: string;
}
export interface StateParams{
id:string;
state:number;
export interface StateParams {
id: string;
state: number;
}
/**
@ -133,7 +139,7 @@ export interface GetSchemeModel {
/**
* @description: 历史记录查询参数
*/
export interface HistoryParams{
export interface HistoryParams {
key: string;
page: number;
limit: number;
@ -142,7 +148,7 @@ export interface HistoryParams{
/**
* @description: 历史记录返回值
*/
export interface GetHistoryModel{
export interface GetHistoryModel {
id: string,
schemeInfoId: string,
type: number,
@ -154,7 +160,7 @@ export interface GetHistoryModel{
/**
* @description: 切换版本
*/
export interface SchemeParams{
id:string,
schemeId:string
export interface SchemeParams {
id: string,
schemeId: string
}

17
src/components/ProcessDesigner/index.vue
View File

@ -10,7 +10,7 @@
@event="handlerEvent" @save="onSaveProcess" />
<!-- 属性面板 -->
<bmpn-process-penal :element="data.element" :bpmn-modeler="data.modeler" :prefix="data.controlForm.prefix"
class="process-panel" ref=processPanel />
class="process-panel" ref=processPanel :schemeCode="props.schemeCode"/>
</div>
</template>
@ -30,6 +30,9 @@
designerForm: {
type: Object,
required: true
},
schemeCode:{
type:String,
}
})
const data = reactive({
@ -49,11 +52,17 @@
element: null,
})
const processPanel = ref < any > ()
function getFlow() {
let panel = processPanel.value.getPanel()
async function getFlow() {
let panel = await processPanel.value.getPanel()
return panel
}
async function validateFlow(){
let res = await processPanel.value.validatePanel()
return res
}
defineExpose({
getFlow
getFlow,
validateFlow
})
function connectionAdded(node) {
console.log(node)

170
src/components/ProcessDesigner/package/penal/PropertiesPanel.vue
View File

@ -1,10 +1,11 @@
<template>
<div :class="prefixCls" :style="{ width: `${props.width}px` }">
<a-tabs v-model:activeKey="configActiveName">
<a-tab-pane :tab="data.wfNodeName" key="1" >
<a-tab-pane :tab="data.wfNodeName" key="1">
<start-event-option ref="startRef" :element="data.currentWfNode"
:class="data.currentWfNode.type=='bpmn:StartEvent' ? '' : 'hidden'"></start-event-option>
<user-task-option ref="taskRef" :element="data.currentWfNode" :class="data.currentWfNode.type=='bpmn:Task' ? '' : 'hidden'">
<user-task-option ref="taskRef" :element="data.currentWfNode"
:class="data.currentWfNode.type=='bpmn:Task' ? '' : 'hidden'">
</user-task-option>
<end-event-option ref="endRef" :element="data.currentWfNode"
:class="data.currentWfNode.type=='bpmn:EndEvent' ? '' : 'hidden'"></end-event-option>
@ -12,7 +13,7 @@
:class="data.currentWfNode.type=='bpmn:SubProcess' ? '' : 'hidden'"></subprocess-option>
</a-tab-pane>
<a-tab-pane tab="流程属性" key="2">
<shcemeinfo-config ref="shcemeinfoRef" :disabled="true"></shcemeinfo-config>
<shcemeinfo-config ref="shcemeinfoRef" :disabled="true" :schemeInfo="detailInfo.schemeInfo"></shcemeinfo-config>
</a-tab-pane>
<a-tab-pane key="3" tab="发起权限" force-render>
<auth-config ref="authRef"></auth-config>
@ -27,8 +28,12 @@
import { Tabs } from 'ant-design-vue';
import { PageWrapper } from '@/components/Page';
import { useDesign } from '@/hooks/web/useDesign';
import {lr_AESEncrypt} from '../utils.ts'
import { lr_AESEncrypt } from '../utils.ts'
const { prefixCls } = useDesign('process-property');
import { useMessage } from '@/hooks/web/useMessage';
const { createConfirm, createMessage } = useMessage();
import { getDetail } from '@/api/sys/WFSchemeInfo'
// 流程属性
import shcemeinfoConfig from './shcemeInfo/index.vue'
// 发起权限
@ -67,8 +72,17 @@
type: Number,
default: 520
},
element: Object
element: Object,
schemeCode: String,
})
const startRef = ref < any > ()
const shcemeinfoRef = ref < any > ()
const authRef = ref < any > ()
const taskRef = ref < any > ()
const endRef = ref < any > ()
const subprocessRef = ref < any > ()
const configActiveName = ref('2')
const data = reactive({
currentWfNode: undefined,
@ -78,7 +92,6 @@
() => props.element,
(newVal, oldVal) => {
var typeName = newVal.type.replace('bpmn:', '')
console.log(newVal)
if (newVal.type == "bpmn:Process") {
data.currentWfNode = {
type: newVal.type
@ -123,7 +136,66 @@
}
}
)
const detailInfo = reactive({
schemeInfo: {},
startInfor: {},
endInfo: {},
authInfo: {},
subprocessInfo: {},
taskInfo: {},
})
async function getDetailInfo() {
let data = await getDetail({ code: props.schemeCode })
let scheme = JSON.parse(data.scheme.content);
let baseinfo = {
id: data.schemeinfo.id,
code: data.schemeinfo.code,
name: data.schemeinfo.name,
category: data.schemeinfo.category,
enabledMark: data.schemeinfo.enabledMark,
mark: data.schemeinfo.mark,
isInApp: data.schemeinfo.isInApp,
description: data.schemeinfo.description,
icon: data.schemeinfo.icon,
color: data.schemeinfo.color,
schemeId: data.schemeinfo.schemeId,
undoType: scheme.undoType,
undoDbCode: scheme.undoDbCode,
undoDbSQL: scheme.undoDbSQL,
undoIOCName: scheme.undoIOCName,
undoUrl: scheme.undoUrl,
deleteType: scheme.deleteType,
deleteDbCode: scheme.deleteDbCode,
deleteDbSQL: scheme.deleteDbSQL,
deleteIOCName: scheme.deleteIOCName,
deleteUrl: scheme.deleteUrl,
deleteDraftType: scheme.deleteDraftType,
deleteDraftDbCode: scheme.deleteDraftDbCode,
deleteDraftDbSQL: scheme.deleteDraftDbSQL,
deleteDraftIOCName: scheme.deleteDraftIOCName,
deleteDraftUrl: scheme.deleteDraftUrl
};
let wfData = scheme.wfData
let auth = {
authType: data.schemeinfo.authType,
authData: data.schemeAuthList.map(t => {
return {
id: t.objId,
name: t.objName,
type: t.objType
}
})
}
shcemeinfoRef.value.setForm(baseinfo)
authRef.value.setForm(auth)
console.log(wfData)
}
function scriptTaskNodeInit(node) {
node.executeType = '1'
@ -146,28 +218,38 @@
}
}
}
const startRef = ref < any > ()
const shcemeinfoRef = ref < any > ()
const authRef = ref < any > ()
const taskRef = ref < any > ()
const endRef = ref < any > ()
const subprocessRef = ref < any > ()
function getPanel() {
async function validatePanel() {
let res = await shcemeinfoRef.value.validateForm();
return res
}
async function getPanel() {
// 1.获取流程配置基础属性
let baseinfo = shcemeinfoRef.value.getForm();
let baseinfo = await shcemeinfoRef.value.getForm();
// 2.获取流程权限信息
let auth = authRef.value.getForm();
let startFrom = startRef.value.getForm();
let taskFrom = taskRef.value.getForm();
let endFrom = endRef.value.getForm();
let subprocessFrom = subprocessRef.value.getForm();
let auth = await authRef.value.getForm();
if (startRef.value == undefined) {
return createMessage.warn('请设置开始节点');
}
if (endRef.value == undefined) {
return createMessage.warn('请设置结束节点');
}
let startFrom = await startRef.value.getForm();
let endFrom = await endRef.value.getForm();
if (endFrom.id == '') {
return createMessage.warn('请设置结束节点');
}
let wfData = []
wfData.push(startFrom)
wfData.push(taskFrom)
wfData.push(endFrom)
wfData.push(subprocessFrom)
let taskFrom = await !(taskRef.value) ? {} : taskRef.value.getForm();
let subprocessFrom = await !(subprocessRef.value) ? {} : subprocessRef.value.getForm();
if(subprocessFrom != undefined){
wfData.push(subprocessFrom)
}
if(subprocessFrom != undefined){
wfData.push(taskFrom)
}
// 3.流程节点信息
wfData.forEach(node => {
if (node.type == 'myline' && !node.isInit) {
@ -207,34 +289,41 @@
};
let dto = {
schemeinfo: {
f_Code: baseinfo.f_Code,
f_Name: baseinfo.f_Name,
f_Category: baseinfo.f_Category,
f_EnabledMark: baseinfo.f_EnabledMark,
f_Mark: baseinfo.f_Mark,
f_IsInApp: baseinfo.f_IsInApp,
f_AuthType: auth.f_AuthType,
f_Description: baseinfo.f_Description,
f_Icon: baseinfo.f_Icon,
f_Color: baseinfo.f_Color,
f_SchemeId: baseinfo.f_SchemeId,
id:baseinfo.id,
code: baseinfo.code,
name: baseinfo.name,
category: baseinfo.category,
enabledMark: baseinfo.enabledMark,
mark: baseinfo.mark,
isInApp: baseinfo.isInApp,
authType: auth.authType,
description: baseinfo.description,
icon: baseinfo.icon,
color: baseinfo.color,
schemeId: baseinfo.schemeId,
},
schemeAuthList: auth.f_AuthType == 1 ? [] : auth.authData.map(t => {
schemeAuthList: auth.authType == 1 ? [] : auth.authData.map(t => {
return {
f_ObjId: t.id,
f_ObjName: t.name,
f_ObjType: t.type
objId: t.id,
objName: t.name,
objType: t.type
};
}),
scheme: {
f_Content: lr_AESEncrypt(JSON.stringify(scheme), "learun")
content: lr_AESEncrypt(JSON.stringify(scheme), "learun")
}
}
console.log(dto)
return dto
}
defineExpose({
getPanel
getPanel,
validatePanel
})
onMounted(() => {
if (props.schemeCode) {
getDetailInfo()
}
})
</script>
@ -255,7 +344,8 @@
::v-deep .ant-tabs-content-holder {
overflow-y: auto;
}
.hidden{
.hidden {
display: none;
}
</style>

17
src/components/ProcessDesigner/package/penal/auth/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="auth-config">
<a-tabs v-model:activeKey="f_AuthType" type="card" size="small">
<a-tabs v-model:activeKey="authType" type="card" size="small">
<a-tab-pane key="1" tab="所有成员">
<a-alert message="权限说明" description="所有人员指不限制流程模版的发起人员，表示每个人都能发起该流程模版。" type="info" show-icon />
</a-tab-pane>
@ -44,7 +44,7 @@
<script lang="ts" setup>
import { reactive, ref, onMounted, nextTick, unref } from 'vue';
const f_AuthType = ref("1")
let authType = ref("1")
import { cloneDeep } from 'lodash-es';
import type { UnwrapRef } from 'vue';
import SelectPos from '@/components/SelectPos/index.vue';
@ -65,7 +65,7 @@
},
];
const dataSource = [
let dataSource = ref([
{
id: 0,
name: "王五",
@ -76,7 +76,7 @@
name: "王五",
type: "管理员",
},
]
])
const data = reactive({
postOpen: false,
roleOpen: false,
@ -109,14 +109,19 @@
function accountHandleOk() {
console.log(accountRef.value.getRow())
}
function setForm(data){
authType.value = data.authType
dataSource.value =data.authData
}
function getForm() {
return {
f_AuthType: f_AuthType.value,
authType: authType.value,
authData: dataSource.value
}
}
defineExpose({
getForm
getForm,
setForm
})
</script>

6
src/components/ProcessDesigner/package/penal/endEvent/index.vue
View File

@ -21,8 +21,10 @@
watch(
() => props.element,
(newVal, oldVal) => {
node.id = newVal.id
node.type = newVal.type
if(newVal.type == "bpmn:EndEvent"){
node.id = newVal.id
node.type = newVal.type
}
}
)
const labelCol = { span: 7 };

91
src/components/ProcessDesigner/package/penal/shcemeInfo/index.vue
View File

@ -2,35 +2,34 @@
<div class="shceme-info">
<a-form ref="formRef" :rules="rules" :model="formState" labelAlign="left" :label-col="labelCol"
:wrapper-col="wrapperCol">
<a-form-item label="模板编号" name="f_Code">
<a-input v-model:value="formState.f_Code" placeholder="请输入" />
<a-form-item label="模板编号" name="code">
<a-input v-model:value="formState.code" placeholder="请输入" />
</a-form-item>
<a-form-item label="模板名称" name="f_Name">
<a-input v-model:value="formState.f_Name" placeholder="请输入" />
<a-form-item label="模板名称" name="name">
<a-input v-model:value="formState.name" placeholder="请输入" />
</a-form-item>
<a-form-item label="模板图标" name="f_Icon">
<IconPicker :value="formState.f_Icon" />
<a-form-item label="模板图标" name="icon">
<IconPicker v-model:value="formState.icon" />
</a-form-item>
<a-form-item label="图标颜色" name="f_Color">
<a-input type="color" v-model="formState.f_Color" placeholder="请输入"></a-input>
<a-form-item label="图标颜色" name="color">
<a-input type="color" v-model="formState.color" placeholder="请输入"></a-input>
</a-form-item>
<a-form-item label="模板分类" name="f_Category">
<a-select v-model:value="formState.f_Category" placeholder="please select your zone">
<a-select-option value="shanghai">Zone one</a-select-option>
<a-select-option value="beijing">Zone two</a-select-option>
<a-form-item label="模板分类" name="category">
<a-select v-model:value="formState.category" placeholder="请选择" :options="data.optionsType"
:field-names="{ label: 'itemName', value: 'itemDetailId' }">
</a-select>
</a-form-item>
<a-form-item label="我的任务创建">
<a-radio-group v-model:value="formState.f_Mark" name="radioGroup">
<a-radio-group v-model:value="formState.mark" name="radioGroup">
<a-radio v-for="item in data.optionsNotOrOk" :value="item.value">{{item.label}}</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="移动端创建">
<a-radio-group v-model:value="formState.f_IsInApp" name="radioGroup">
<a-radio-group v-model:value="formState.isInApp" name="radioGroup">
<a-radio v-for="item in data.optionsNotOrOk" :value="item.value">{{item.label}}</a-radio>
</a-radio-group>
</a-form-item>
<a-textarea v-model:value="formState.f_Description" placeholder="请填写备注"
<a-textarea v-model:value="formState.description" placeholder="请填写备注"
:auto-size="{ minRows: 5, maxRows: 8 }" />
@ -146,25 +145,27 @@
</template>
<script lang="ts" setup>
import { Dayjs } from 'dayjs';
import { reactive, ref, toRaw } from 'vue';
import { reactive, ref, toRaw, onMounted, defineProps } from 'vue';
import type { UnwrapRef } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import { IconPicker } from '/@/components/Icon';
import { getLoad } from '@/api/sys/sysDataItemDetail';
const formRef = ref();
const labelCol = { span: 7 };
const wrapperCol = { span: 17 };
const activeKey = ref('1')
const data = reactive({
optionsNotOrOk: [{ label: '允许', value: 1 }, { label: '不允许', value: 2 }],
optionsType: [],
})
const formState = reactive({
f_Code: '',
f_Name: '',
f_Category: '',
f_Mark: 1,
f_IsInApp: 2,
f_Description: '',
let formState = ref({
code: '',
name: '',
category: '',
enabledMark: 1,
mark: 1,
isInApp: 2,
description: '',
titleRules: '',
@ -185,33 +186,57 @@
deleteDraftDbSQL: '',
deleteDraftIOCName: '',
deleteDraftUrl: '',
f_Icon: '',
f_Color: '#409EFF',
icon: 'ant-design:appstore-outlined',
color: '#409EFF',
});
const rules: Record<string, Rule[]> = {
f_Code: [
code: [
{ required: true, message: '请输入模板编号' },
// { validator: lr_existDbFiled, keyValue: () => { return data.formData.f_Id }, tableName: 'lr_wf_schemeinfo', keyName: 'f_Id', trigger: 'blur' }
],
f_Name: [
name: [
{ required: true, message: '请输入模板名称' }
],
f_Category: [
category: [
{ required: true, message: '请选择模板分类' }
],
f_Icon: [
icon: [
{ required: true, message: '请选择图标' }
],
f_Color: [
color: [
{ required: true, message: '请选择颜色' }
],
};
async function fetch() {
let list = await getLoad({ code: 'FlowSort' });
data.optionsType = list
}
async function validateForm() {
let res = await formRef.value
.validate()
.then((values) => {
return true
})
.catch((error: ValidateErrorEntity<FormState>) => {
return false
});
return res
}
function setForm(data) {
formState.value = data
}
function getForm() {
return formState
return formState.value
}
defineExpose({
getForm
setForm,
getForm,
validateForm
})
onMounted(() => {
fetch();
});
</script>
<style lang="less" scoped>
.site-space-compact-wrapper {

14
src/components/ProcessDesigner/package/penal/startEvent/index.vue
View File

@ -157,8 +157,10 @@
watch(
() => props.element,
(newVal, oldVal) => {
node.id = newVal.id
node.type = newVal.type
if(newVal.type == "bpmn:StartEvent"){
node.id = newVal.id
node.type = newVal.type
}
}
)
watch(
@ -174,12 +176,6 @@
}
}
)
watch(
() => node, (newVal, oldVal) => {
console.log(oldVal)
console.log(newVal)
}
)
function handleAddAuthField() {
node.authFields.push({
field: '',
@ -193,7 +189,7 @@
node.authFields = node.authFields.filter(item => item.field !== key);
}
function getForm(){
function getForm() {
return node
}
defineExpose({

10
src/components/ProcessDesigner/package/penal/subprocess/index.vue
View File

@ -36,8 +36,10 @@
watch(
() => props.element,
(newVal, oldVal) => {
node.id = newVal.id
node.type = newVal.type
if (newVal.type == "bpmn:SubProcess") {
node.id = newVal.id
node.type = newVal.type
}
}
)
const data = reactive({
@ -45,7 +47,9 @@
verisons: []
})
function getForm() {
return node
if (node.id != '') {
return node
}
}
defineExpose({
getForm

14
src/components/ProcessDesigner/package/penal/userTask/index.vue
View File

@ -242,8 +242,8 @@
conditionOptions: [{ value: '1', label: '同一个部门' }, { value: '2', label: '同一个公司' }, { value: '3', label: '发起人上级' }, { value: '4', label: '发起人下级' }],
})
const node = reactive({
id: "edb713be-7a25-44a2-8048-1f9abc638680",
type: "userTask",
id: "",
type: "",
isAddSign: false,
isTransfer: false,
isBatchAudit: false,
@ -300,8 +300,10 @@
watch(
() => props.element,
(newVal, oldVal) => {
node.id = newVal.id
node.type = newVal.type
if (newVal.type == "bpmn:Task") {
node.id = newVal.id
node.type = newVal.type
}
}
)
// 岗位
@ -375,7 +377,9 @@
node.btnlist = node.btnlist.filter(item => item.code !== key);
}
function getForm() {
return node
if(node.id!=''){
return node
}
}
defineExpose({
getForm

2
src/views/demo/workflow/scheme/SchemeDrawer.vue
View File

@ -45,8 +45,6 @@
const values = await validate();
setDrawerProps({ confirmLoading: true });
if (isUpdate.value) {
console.log(values)
console.log(detail.value)
var querys = detail.value
querys.description = values.description
querys.enabledMark = values.enabledMark

8
src/views/demo/workflow/scheme/index.vue
View File

@ -99,14 +99,10 @@
function handleEdit() {
let rows = getSelectRows();
if (rows.length == 0) {
return createMessage.warn('请选择一个按钮进行编辑');
return createMessage.warn('请选择一个模板进行编辑');
}
const record = rows[0]
record.type = '2'
openDrawer(true, {
record,
isUpdate: true,
});
go('/dashboard/scheme_preview/add?code='+record.code);
}
async function classifyEdit(record) {
openDrawer(true, {

19
src/views/demo/workflow/scheme/preview.vue
View File

@ -4,7 +4,7 @@
<a-button type="primary" :icon="h(SaveOutlined)" @click="onSave" class="ml-2">保存流程 </a-button>
</div>
<process-designer :key="designerOpen" style="border:1px solid rgba(0, 0, 0, 0.1);" ref="modelDesigner"
v-loading="designerData.loading" :bpmnXml="designerData.bpmnXml" :designerForm="designerData.form"
v-loading="designerData.loading" :bpmnXml="designerData.bpmnXml" :designerForm="designerData.form" :schemeCode="schemeCode"
@save="onSaveDesigner" />
</div>
@ -14,6 +14,10 @@
import { h, ref, provide, reactive, onMounted, defineProps, computed, defineEmits } from 'vue';
import ProcessDesigner from '@/components/ProcessDesigner/index.vue';
import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
import { postAdd ,update} from '@/api/sys/WFSchemeInfo'
import { useRoute } from 'vue-router'
const route = useRoute()
const schemeCode = route.query.code
const designerOpen = ref(false)
const designerData = reactive({
loading: false,
@ -25,8 +29,17 @@
}
})
const modelDesigner = ref < any > ()
function onSave() {
let formData = modelDesigner.value.getFlow()
async function onSave() {
let validateData = await modelDesigner.value.validateFlow()
if (validateData) {
let formData = await modelDesigner.value.getFlow()
formData.scheme.type = 1
if(!schemeCode){
let data = await postAdd(formData)
}else{
let data = await update(formData)
}
}
}
</script>
<style scoped>