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

流程模板：列表、改变模板状态、历史记录、切换模板版本接口对接。梳理新增流程模板的页面数据

ly
刘妍 2024-03-11 16:55:44 +08:00
parent 1f81dbe44b
commit b015db153d
15 changed files with 448 additions and 388 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
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} from './model/wfSchemeInfoModel'
DeleteParams,UpdateParams,StateParams,HistoryParams,GetHistoryModel,SchemeParams} from './model/wfSchemeInfoModel'
enum Api {
// 流程模板基本信息
LoadPage = '/api/WFSchemeInfo/LoadPage',
@ -10,7 +10,8 @@ enum Api {
Delete = '/api/WFSchemeInfo/Delete',
UpDateState = '/api/WFSchemeInfo/UpDateState',
// 流程模板详细信息
loadHistoryPage= '/api/WFScheme/LoadPage'
LoadHistoryPage= '/api/WFScheme/LoadPage',
UpdateScheme='/api/WFSchemeInfo/UpdateScheme',
}
/**
@ -47,5 +48,9 @@ export function updateState(params:StateParams){
}
export function getLoadHistoryPage(params?:HistoryParams){
return defHttp.get<GetHistoryModel>({url:Api.loadHistoryPage,params})
return defHttp.get<GetHistoryModel>({url:Api.LoadHistoryPage,params})
}
export function updateScheme(params:SchemeParams){
return defHttp.post({ url: Api.UpdateScheme + "?id=" + params.id +"&schemeId="+params.schemeId});
}

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

@ -151,3 +151,10 @@ export interface GetHistoryModel{
createUserName: string,
content: string
}
/**
* @description: 切换版本
*/
export interface SchemeParams{
id:string,
schemeId:string
}

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

@ -5,20 +5,22 @@
'connection.added',
'connection.removed',
'connection.changed'
]" @element-click="elementClick" @init-finished="initModeler" @event="handlerEvent" @save="onSaveProcess" />
]" @connection-added="connectionAdded" @connection-removed="connectionRemoved"
@connection-changed="connectionChanged" @element-click="elementClick" @init-finished="initModeler"
@event="handlerEvent" @save="onSaveProcess" />
<!-- 属性面板 -->
<bmpn-process-penal :element="data.element" :bpmn-modeler="data.modeler" :prefix="data.controlForm.prefix" class="process-panel" />
<bmpn-process-penal :element="data.element" :bpmn-modeler="data.modeler" :prefix="data.controlForm.prefix"
class="process-panel" ref=processPanel />
</div>
</template>
<script lang="ts" setup>
import { h, reactive, onMounted, defineProps, computed, defineEmits } from 'vue';
import { h, reactive, onMounted, defineProps, computed, defineEmits, inject,ref } from 'vue';
import './package/theme/index.scss';
// 流程面板和属性面板
import { BpmnProcessDesigner, BmpnProcessPenal } from './package/index';
import 'highlight.js/styles/atom-one-dark-reasonable.css';
const emit = defineEmits(['save']);
// Vue.use(vuePlugin);
const props = defineProps({
bpmnXml: {
@ -31,7 +33,7 @@
}
})
const data = reactive({
height: document.documentElement.clientHeight - 94.5 + "px;",
height: document.documentElement.clientHeight - 144.5 + "px;",
xmlString: props.bpmnXml,
modeler: null,
controlForm: {
@ -44,8 +46,27 @@
headerButtonSize: 'small',
// additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
},
element:null,
element: null,
})
const processPanel = ref < any > ()
function getFlow() {
let panel = processPanel.value.getPanel()
}
defineExpose({
getFlow
})
function connectionAdded(node) {
console.log(node)
console.log('connectionAdded')
}
function connectionRemoved(node) {
console.log(node)
console.log('connectionRemoved')
}
function connectionChanged(node) {
console.log(node)
console.log('connectionChanged')
}
function elementClick(element) {
data.element = element;
}
@ -108,7 +129,8 @@
-webkit-border-radius: 4px;
}
}
.process-panel{
.process-panel {
height: 100%;
}
</style>

19
src/components/ProcessDesigner/package/designer/ProcessDesigner.vue
View File

@ -3,12 +3,10 @@
<div class="my-process-designer__header">
<slot name="control-header"></slot>
<template v-if="!$slots['control-header']">
<div slot="content">
<a-button :type="headerButtonType" :icon="h(SaveOutlined)" @click="onSave" class="ml-2">保存流程
</a-button>
<a-button :type="headerButtonType" @click="previewProcessXML" class="ml-2">预览XML</a-button>
<a-button :type="headerButtonType" @click="previewProcessJson" class="ml-2">预览JSON</a-button>
<!-- <a-button :type="headerButtonType" :icon="h(SaveOutlined)" @click="onSave" class="ml-2">保存流程 </a-button> -->
<!-- <a-button :type="headerButtonType" @click="previewProcessXML" class="ml-2">预览XML</a-button> -->
<!-- <a-button :type="headerButtonType" @click="previewProcessJson" class="ml-2">预览JSON</a-button> -->
<a-space>
<a-tooltip placement="bottom" class="ml-2" title="缩小视图">
<a-button :disabled="defaultZoom <= 0.3" :icon="h(ZoomOutOutlined)" @click="processZoomOut()"></a-button>
@ -114,12 +112,10 @@
onMounted(() => {
initBpmnModeler();
console.log(props.value)
createNewDiagram(props.value);
})
function onSave() {
return new Promise((resolve, reject) => {
console.log(process.bpmnModeler)
if (process.bpmnModeler == null) {
reject();
}
@ -140,7 +136,6 @@
},
],
});
console.log(process.bpmnModeler)
emit("init-finished", process.bpmnModeler);
initModelListeners();
}
@ -150,7 +145,6 @@
// 注册需要的监听事件, 将. 替换为 - , 避免解析异常
props.events.forEach(event => {
EventBus.on(event, function (eventObj) {
console.log(eventObj)
provide('wfdesign',eventObj)
let eventName = event.replace(/\./g, "-");
let element = eventObj ? eventObj.element : null;
@ -337,4 +331,9 @@
process.previewModelVisible = true;
});
}
</script>
</script>
<style scoped>
::v-deep .bjs-container a{
visibility: hidden;
}
</style>

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

@ -1,58 +1,40 @@
<template>
<div :class="prefixCls" :style="{ width: `${props.width}px` }">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="流程属性">
<shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
<a-tabs v-model:activeKey="configActiveName">
<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>
<end-event-option ref="endRef" :element="data.currentWfNode"
:class="data.currentWfNode.type=='bpmn:EndEvent' ? '' : 'hidden'"></end-event-option>
<subprocess-option ref="subprocessRef" :element="data.currentWfNode"
:class="data.currentWfNode.type=='bpmn:SubProcess' ? '' : 'hidden'"></subprocess-option>
</a-tab-pane>
<a-tab-pane key="2" tab="发起权限" force-render>
<auth-config ref="auth"></auth-config>
<a-tab-pane tab="流程属性" key="2">
<shcemeinfo-config ref="shcemeinfoRef" :disabled="true"></shcemeinfo-config>
</a-tab-pane>
<a-tab-pane key="3" tab="开始节点">
<start-event-option ref="start" :element="data.elementData"></start-event-option>
</a-tab-pane>
<a-tab-pane key="4" tab="审核节点">
<user-task-option ref="task"></user-task-option>
</a-tab-pane>
<a-tab-pane key="5" tab="结束节点">
<end-event-option ref="end" :element="data.elementData"></end-event-option>
</a-tab-pane>
<a-tab-pane key="6" tab="子流程">
<subprocess-option ref="subprocess" :element="data.elementData"></subprocess-option>
<a-tab-pane key="3" tab="发起权限" force-render>
<auth-config ref="authRef"></auth-config>
</a-tab-pane>
</a-tabs>
<!-- <el-tabs v-model="configActiveName" :stretch="true">
<el-tab-pane :label="$t(wfNodeName[currentWfNode.type])" name="tab01" v-if="currentWfNode != undefined">
<component :disabled="true" ref="wfcongfig" :is="`${currentWfNode.type}Option`"></component>
</el-tab-pane>
<el-tab-pane label="流程属性" name="tab02">
<shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
</el-tab-pane>
</el-tabs> -->
<!-- <Tabs v-model:activeKey="configActiveName">
<Tabs.TabPane :label="$t(wfNodeName[currentWfNode.type])" name="tab01" v-if="currentWfNode != undefined">
<component :disabled="true" ref="wfcongfig" :is="`${currentWfNode.type}Option`"></component>
</Tabs.TabPane>
<Tabs.TabPane label="流程属性" name="tab02">
<shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
</Tabs.TabPane>
</Tabs> -->
</div>
</template>
<script lang="ts" setup>
import { h, reactive, onMounted, defineProps, computed, defineEmits, provide, watch, ref } from 'vue';
import { h, reactive, onMounted, defineProps, computed, defineEmits, provide, watch, ref, inject } from 'vue';
import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
import { Tabs } from 'ant-design-vue';
import { PageWrapper } from '@/components/Page';
import { useDesign } from '@/hooks/web/useDesign';
import {lr_AESEncrypt} from '../utils.ts'
const { prefixCls } = useDesign('process-property');
// 流程属性
import shcemeinfoConfig from './shcemeInfo/index.vue'
// 发起权限
import authConfig from './auth/index.vue'
// 开始节点
import startEventOption from './startEvent/index.vue'
import StartEventOption from './startEvent/index.vue'
// 审核节点
import userTaskOption from './userTask/index.vue'
// 结束节点
@ -85,54 +67,175 @@
type: Number,
default: 520
},
idEditDisabled: {
type: Boolean,
default: false
},
element: Object
})
provide('prefix', props.prefix)
provide('width', props.width)
const activeKey = ref("6")
const configActiveName = ref('2')
const data = reactive({
configActiveName: 'tab02',
currentWfNode: undefined,
wfNodeName: {
startEvent: '开始节点',
endEvent: '结束节点',
gatewayAnd: '并行网关',
gatewayInclusive: '包含网关',
gatewayXor: '排他网关',
scriptTask: '脚本节点',
userTask: '审核节点',
subprocess: '子流程',
myline: '线条'
},
elementData:{}
wfNodeName: ""
})
watch(
() => props.element,
(newVal, oldVal) => {
data.elementData = newVal
var typeName = newVal.type.replace('bpmn:', '')
console.log(newVal)
if (newVal.type == "bpmn:Process") {
data.currentWfNode = {
type: newVal.type
}
configActiveName.value = '2'
} else {
data.currentWfNode = newVal
configActiveName.value = '1'
switch (typeName) {
case 'StartEvent':
data.wfNodeName = "开始节点"
data.currentWfNode = {
id: newVal.id,
type: newVal.type
}
break;
case 'EndEvent':
data.wfNodeName = "结束节点"
data.currentWfNode = {
id: newVal.id,
type: newVal.type
}
break;
case 'Task':
data.wfNodeName = "审核节点"
data.currentWfNode = {
id: newVal.id,
type: newVal.type
}
break;
case 'SubProcess':
data.wfNodeName = "子流程"
data.currentWfNode = {
id: newVal.id,
type: newVal.type
}
break;
default:
break;
}
}
}
)
const achieveList = ref([
{
key: '1',
name: '文章',
component: 'startEventOption',
},
{
key: '2',
name: '应用',
component: 'startEventOption',
},
])
const tabs = {
startEventOption,
startEventOption,
};
function scriptTaskNodeInit(node) {
node.executeType = '1'
node.sqlDb = ''
node.sqlStr = ''
node.sqlStrRevoke = ''
node.apiUrl = ''
node.apiUrlRevoke = ''
node.ioc = ''
node.iocRevoke = ''
}
function mylineNodeInit(node) {
const wfdata = this.handleGetWFData();
const fromNode = wfdata.find(t => t.id == node.from)
node.lineConditions = ''
if (fromNode.type == 'userTask') {
if (fromNode.btnlist.findIndex(t => t.code == 'agree' && !t.hidden) != -1) {
node.lineConditions = 'agree' // 流转条件
}
}
}
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() {
// 1.获取流程配置基础属性
let baseinfo = 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 wfData = []
wfData.push(startFrom)
wfData.push(taskFrom)
wfData.push(endFrom)
wfData.push(subprocessFrom)
// 3.流程节点信息
wfData.forEach(node => {
if (node.type == 'myline' && !node.isInit) {
node.isInit = true
node.lineConditions = ''
const fromNode = this.wfData.find(t => t.id == node.from)
if (fromNode.type == 'userTask') {
if (fromNode.btnlist.findIndex(t => t.code == 'agree' && !t.hidden) != -1) {
node.lineConditions = 'agree' // 流转条件
}
}
}
});
let scheme = {
wfData: wfData,
undoType: baseinfo.undoType,
undoDbCode: baseinfo.undoDbCode,
undoDbSQL: baseinfo.undoDbSQL,
undoIOCName: baseinfo.undoIOCName,
undoUrl: baseinfo.undoUrl,
deleteType: baseinfo.deleteType,
deleteDbCode: baseinfo.deleteDbCode,
deleteDbSQL: baseinfo.deleteDbSQL,
deleteIOCName: baseinfo.deleteIOCName,
deleteUrl: baseinfo.deleteUrl,
deleteDraftType: baseinfo.deleteDraftType,
deleteDraftDbCode: baseinfo.deleteDraftDbCode,
deleteDraftDbSQL: baseinfo.deleteDraftDbSQL,
deleteDraftIOCName: baseinfo.deleteDraftIOCName,
deleteDraftUrl: baseinfo.deleteDraftUrl,
};
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,
},
schemeAuthList: auth.f_AuthType == 1 ? [] : auth.authData.map(t => {
return {
f_ObjId: t.id,
f_ObjName: t.name,
f_ObjType: t.type
};
}),
scheme: {
f_Content: lr_AESEncrypt(JSON.stringify(scheme), "learun")
}
}
console.log(dto)
return dto
}
defineExpose({
getPanel
})
</script>
<style lang="less" scoped>
@ -152,4 +255,7 @@
::v-deep .ant-tabs-content-holder {
overflow-y: auto;
}
.hidden{
display: none;
}
</style>

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

@ -109,6 +109,15 @@
function accountHandleOk() {
console.log(accountRef.value.getRow())
}
function getForm() {
return {
f_AuthType: f_AuthType.value,
authData: dataSource.value
}
}
defineExpose({
getForm
})
</script>
<style lang="less" scoped>

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

@ -10,12 +10,29 @@
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
const node = reactive({
id: ""
})
const props = defineProps({
element: Object
})
watch(
() => props.element,
(newVal, oldVal) => {
node.id = newVal.id
node.type = newVal.type
}
)
const labelCol = { span: 7 };
const wrapperCol = { span: 17 };
function getForm() {
return node
}
defineExpose({
getForm
})
</script>
<style>

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

@ -1,6 +1,7 @@
<template>
<div class="shceme-info">
<a-form ref="formRef" :rules="rules" :model="formState" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
<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>
@ -36,7 +37,7 @@
<a-divider plain="true">撤销操作</a-divider>
<a-tabs v-model:activeKey="formState.undoType" type="card" size="small" centered="true">
<a-tab-pane key="1" tab="执行SQL">
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
<a-space-compact block>
<a-select v-model:value="formState.undoDbCode" placeholder="请选择执行SQL数据库">
<a-select-option value="shanghai">Zone one</a-select-option>
@ -205,16 +206,23 @@
{ required: true, message: '请选择颜色' }
],
};
function getForm() {
return formState
}
defineExpose({
getForm
})
</script>
<style lang="less" scoped>
.site-space-compact-wrapper {
width: 100%;
.ant-select {
width: 100%;
}
}
::v-deep .ant-tabs {
padding: 0!important;
padding: 0 !important;
}
</style>

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

@ -94,7 +94,7 @@
import { reactive, defineProps, computed, inject, ref, watch, h } from 'vue'
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
const labelCol = { span: 7 };
const wrapperCol = { span: 17 };
const wrapperCol = { span: 17 };
const props = defineProps({
disabled: {
type: Boolean,
@ -157,9 +157,8 @@
watch(
() => props.element,
(newVal, oldVal) => {
data.elementData = newVal
node.id = data.elementData.id
node.type = data.elementData.type
node.id = newVal.id
node.type = newVal.type
}
)
watch(
@ -175,124 +174,12 @@
}
}
)
async function custmerformChange(val) {
this.$set(this.node, 'formRelationId', '')
if (val == null) {
this.node.authFields = [];
this.node.formVerison = ''
return;
watch(
() => node, (newVal, oldVal) => {
console.log(oldVal)
console.log(newVal)
}
if (this.$validatenull(this.wfdesign.custmerformSchemes[val.f_SchemeId])) {
// const {f_SchemeInfoId,f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.f_SchemeId))) || {}
this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme }
if (this.node.formCode == f_SchemeInfoId) {
this.loadFormScheme(f_Scheme)
}
}
else {
this.loadFormScheme(this.wfdesign.custmerformSchemes[val.f_SchemeId].f_Scheme);
}
this.node.formVerison = val.f_SchemeId
}
async function custmerformVerisonChange(val) {
this.$set(this.node, 'formRelationId', '')
if (this.$validatenull(val)) {
this.node.authFields = []
return
}
if (this.$validatenull(this.wfdesign.custmerformSchemes[val.value])) {
// const {f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.value))) || {}
this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme }
if (this.node.formVerison == f_Id) {
this.loadFormScheme(f_Scheme)
}
}
else {
this.loadFormScheme(this.wfdesign.custmerformSchemes[val.value].f_Scheme);
}
}
function loadFormScheme(strScheme) {
const scheme = JSON.parse(strScheme)
const fields = []
const rfields = []
scheme.formInfo.tabList.forEach(tab => {
tab.components.forEach(component => {
if (['guid'].includes(component.type)) {
rfields.push({ label: component.label, value: component.prop })
}
if (!['gridtable', 'divider'].includes(component.type) && component.display) {
fields.push({
prop: component.prop,
field: component.field,
label: component.label,
table: component.table,
required: component.required,
isEdit: true,
isLook: true
})
}
else if (['gridtable'].includes(component.type)) {
fields.push({
prop: `${component.prop}_add`,
label: `${component.label || '表格'}-添加按钮`,
required: false,
isEdit: true,
isLook: false,
type: 'grid'
})
fields.push({
prop: `${component.prop}_remove`,
label: `${component.label || '表格'}-删除按钮`,
required: false,
isEdit: true,
isLook: false,
type: 'grid'
})
fields.push({
prop: `${component.prop}_required`,
label: `${component.label || '表格'}-数据`,
required: component.required,
isEdit: false,
isLook: false,
type: 'gridrequired'
})
fields.push(...component.children.filter(t => t.display).map(t => {
return {
gridprop: component.prop,
prop: t.prop,
field: t.field,
label: `${component.label || '表格'}-${t.label}`,
table: component.table,
required: t.required,
isEdit: true,
isLook: true
}
}))
}
})
})
this.node.formRelations = rfields
this.node.authFields = fields
}
function handleFormTypeChange() {
this.node.formCode = ''
this.node.formUrl = ''
this.node.formAppUrl = ''
this.node.authFields = []
this.node.formRelations = []
this.$set(this.node, 'formRelationId', '')
}
)
function handleAddAuthField() {
node.authFields.push({
field: '',
@ -306,6 +193,12 @@
node.authFields = node.authFields.filter(item => item.field !== key);
}
function getForm(){
return node
}
defineExpose({
getForm
})
</script>
<style lang="less" scoped>
.site-space-compact-wrapper {

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

@ -25,19 +25,31 @@
const labelCol = { span: 7 };
const wrapperCol = { span: 17 };
const props = defineProps({
disabled: {
type: Boolean,
default: false
},
element: Object
})
const node = reactive({
id:''
id: '',
isAsync: false,
wfschemeId: '',
wfVersionId: '',
})
watch(
() => props.element,
(newVal, oldVal) => {
node.id = newVal.id
node.type = newVal.type
}
)
const data = reactive({
list: [],
verisons: []
})
function getForm() {
return node
}
defineExpose({
getForm
})
</script>
<style>

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

@ -188,7 +188,7 @@
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, nextTick, unref, h } from 'vue';
import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
import { BasicTree, TreeItem } from '@/components/Tree';
import SelectPos from '@/components/SelectPos/index.vue';
import SelectRole from '@/components/SelectRole/index.vue';
@ -294,6 +294,16 @@
isInit: true,
})
const props = defineProps({
element: Object
})
watch(
() => props.element,
(newVal, oldVal) => {
node.id = newVal.id
node.type = newVal.type
}
)
// 岗位
const posRef = ref < any > ()
function handlePostClick(isLooker) {
@ -364,6 +374,12 @@
function handleDeleteBtns(key) {
node.btnlist = node.btnlist.filter(item => item.code !== key);
}
function getForm() {
return node
}
defineExpose({
getForm
})
</script>

26
src/components/ProcessDesigner/package/utils.ts
View File

@ -1,3 +1,4 @@
import CryptoJS from 'crypto-js/crypto-js';
// 创建监听器实例
export function createListenerObject(options, isTask, prefix) {
const listenerObj = Object.create(null);
@ -67,3 +68,28 @@ export function uuid(length = 8, chars) {
}
return result;
}
export function lr_AESKey(key){
const length = key.length
if(length <32){
for(let i=0,len =32 - length;i<len;i++){
key += "0"
}
return key
}
else{
return key.substring(0, 32)
}
}
// AES加解密算法
export function lr_AESEncrypt(source, key) {
key = CryptoJS.enc.Utf8.parse(lr_AESKey(key))//32位
let iv = CryptoJS.enc.Utf8.parse("1234567890000000")//16位
//let srcs = CryptoJS.enc.Utf8.parse(source)
let encrypted = CryptoJS.AES.encrypt(source, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
})
return encrypted.toString()
}

76
src/views/demo/workflow/scheme/HistoryDrawer.vue
View File

@ -17,31 +17,89 @@
</BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed, unref, reactive, onMounted } from 'vue';
import { ref, computed, unref, reactive, onMounted, h } from 'vue';
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import {columnsHistory} from './scheme.data'
import { getLoadHistoryPage } from '@/api/sys/WFSchemeInfo';
import { getLoadHistoryPage,updateScheme } from '@/api/sys/WFSchemeInfo';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { Tag, Switch } from 'ant-design-vue';
import { useMessage } from '@/hooks/web/useMessage';
const { createConfirm, createMessage } = useMessage();
defineOptions({ name: 'HistoryDrawer' });
const emit = defineEmits(['success', 'register']);
const rowId = ref('');
const searchInfo = reactive < Recordable > ({});
const schemeId = ref('')
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
setDrawerProps({ confirmLoading: false });
searchInfo.id = data.record.id
schemeId.value = data.record.schemeId
reload()
});
const [registerTable, { reload, getPaginationRef, }] = useTable({
api: getLoadHistoryPage,
columns: columnsHistory,
columns: [
{
title: '创建人',
dataIndex: 'createUserName',
},
{
title: '创建时间',
dataIndex: 'createDate',
},
{
title: '状态',
dataIndex: 'type',
customRender: ({ record }) => {
if (record.type == 1) {
const color = 'green';
const text = '正式';
return h(Tag, { color: color }, () => text);
} else {
const color = 'blue';
const text = '草稿';
return h(Tag, { color: color }, () => text);
}
}
},
{
title: '当前版本',
dataIndex: 'enabledMark',
width: 80,
customRender: ({ record }) => {
if (!record.type) {
const color = 'blue';
const text = '草稿';
return h(Tag, { color: color }, () => text);
} else {
return h(Switch, {
checked: record.id === schemeId.value,
onChange(checked) {
const { createMessage } = useMessage();
updateScheme({ schemeId: record.id, id: searchInfo.id })
.then((data) => {
createMessage.success(data.message);
schemeId.value = record.id
reload()
})
.catch((err) => {
createMessage.error(err.message);
})
.finally(() => {
record.pendingStatus = false;
});
},
});
}
},
},
],
useSearchForm: false,
showTableSetting: false,
tableSetting: { fullScreen: true },
showIndexColumn: false,
isCanResizeParent: true,
maxHeight: 680,
rowKey: 'id',
handleSearchInfoFn(info) {
return info;
@ -53,7 +111,7 @@
// slots: { customRender: 'action' },
},
});
function handleHistory(record){
function handleHistory(record) {
}
onMounted(() => {
@ -78,4 +136,4 @@
setModalProps({ confirmLoading: false });
}
}
</script>
</script>

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

@ -1,97 +1,41 @@
<template>
<!-- <process-viewer :key="`designer-${processView.index}`" :xml="processView.xmlData" :style="{height: '400px'}" /> -->
<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"
@save="onSaveDesigner" />
<div class="preview-box">
<div class="btn-box">
<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"
@save="onSaveDesigner" />
</div>
</template>
<script>
<script lang="ts" setup>
import { h, ref, provide, reactive, onMounted, defineProps, computed, defineEmits } from 'vue';
import ProcessDesigner from '@/components/ProcessDesigner/index.vue';
// import ProcessViewer from '@/components/ProcessViewer/index.vue'
export default {
name: "Model",
components: {
ProcessDesigner,
// ProcessViewer,
},
data() {
return {
designerOpen: false,
designerData: {
loading: false,
bpmnXml: '',
modelId: null,
form: {
processName: null,
processKey: null
}
},
designerModelId: null,
processView: {
title: '',
open: false,
index: undefined,
xmlData: "",
},
};
},
created() {
},
methods: {
/** 查看流程图 */
handleProcessView(row) {
let modelId = row.modelId;
this.processView.title = "流程图";
this.processView.index = modelId;
// 发送请求，获取xml
getBpmnXml(modelId).then(response => {
this.processView.xmlData = response.data;
})
this.processView.open = true;
},
/** 设计按钮操作 */
handleDesigner(row) {
this.designerData.bpmnXml = '';
this.designerData.title = "流程设计 - " + row.modelName;
// this.designerData.modelId = row.modelId;
// this.designerData.form = {
// processName: row.modelName,
// processKey: row.modelKey
// }
// if (row.modelId) {
// this.designerData.loading = true;
// getBpmnXml(row.modelId).then(response => {
// this.designerData.bpmnXml = response.data || '';
// this.designerData.loading = false;
// this.designerOpen = true;
// })
// }
},
onSaveDesigner(bpmnXml) {
console.log(bpmnXml)
// this.bpmnXml = bpmnXml;
// let dataBody = {
// modelId: this.designerData.modelId,
// bpmnXml: this.bpmnXml
// }
// this.$confirm("是否将此模型保存为新版本？", "提示", {
// distinguishCancelAndClose: true,
// confirmButtonText: '是',
// cancelButtonText: '否'
// }).then(() => {
// this.confirmSave(dataBody, true)
// }).catch(action => {
// if (action === 'cancel') {
// this.confirmSave(dataBody, false)
// }
// })
},
import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
const designerOpen = ref(false)
const designerData = reactive({
loading: false,
bpmnXml: '',
modelId: null,
form: {
processName: null,
processKey: null
}
};
</script>
})
const modelDesigner = ref < any > ()
function onSave() {
let formData = modelDesigner.value.getFlow()
}
</script>
<style scoped>
.preview-box {
.btn-box {
padding: 10px;
justify-content: flex-end;
display: flex;
}
}
</style>

62
src/views/demo/workflow/scheme/scheme.data.ts
View File

@ -119,66 +119,4 @@ export const formSchema: FormSchema[] = [
component: 'InputTextArea',
},
];
// 历史记录表头
export const columnsHistory: BasicColumn[] = [
{
title: '创建人',
dataIndex: 'createUserName',
},
{
title: '创建时间',
dataIndex: 'createDate',
},
{
title: '状态',
dataIndex: 'type',
customRender: ({ record }) => {
if (record.type == 1) {
const color = 'green';
const text = '正式';
return h(Tag, { color: color }, () => text);
} else {
const color = 'blue';
const text = '草稿';
return h(Tag, { color: color }, () => text);
}
}
},
// {
// title: '当前版本',
// dataIndex: 'enabledMark',
// width: 80,
// customRender: ({ record }) => {
// if (!record.type) {
// const color = 'blue';
// const text = '草稿';
// return h(Tag, { color: color }, () => text);
// } else {
// return h(Switch, {
// checked: record.enabledMark === 1,
// checkedChildren: '启用',
// unCheckedChildren: '停用',
// loading: record.pendingStatus,
// onChange(checked) {
// record.pendingStatus = true;
// const newStatus = checked ? 1 : 0;
// const { createMessage } = useMessage();
// updateState({ id: record.id, state: newStatus })
// .then((data) => {
// record.enabledMark = newStatus;
// createMessage.success(data.message);
// })
// .catch((err) => {
// createMessage.error(err.message);
// })
// .finally(() => {
// record.pendingStatus = false;
// });
// },
// });
// }
// },
// },
];