Merge branch 'ly' into dev

src/api/sys/WFSchemeInfo.ts

@@ -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});
+}
+

src/api/sys/model/wfSchemeInfoModel.ts

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

src/components/ProcessDesigner/index.vue

@@ -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>

src/components/ProcessDesigner/package/designer/ProcessDesigner.vue

@@ -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 :type="headerButtonType" :icon="h(SaveOutlined)" @click="onSave" class="ml-2">保存流程 </a-button> -->
-          </a-button>
+          <!-- <a-button :type="headerButtonType" @click="previewProcessXML" class="ml-2">预览XML</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" @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;
@@ -338,3 +332,8 @@
     });
   }
 </script>
+<style scoped>
+::v-deep .bjs-container a{
+  visibility: hidden;
+}
+</style>

src/components/ProcessDesigner/package/penal/PropertiesPanel.vue

@@ -1,58 +1,40 @@
 <template>
   <div :class="prefixCls" :style="{ width: `${props.width}px` }">
-    <a-tabs v-model:activeKey="activeKey">
+    <a-tabs v-model:activeKey="configActiveName">
-      <a-tab-pane key="1" tab="流程属性">
+      <a-tab-pane :tab="data.wfNodeName" key="1" >
-        <shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
+        <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>
+      <a-tab-pane tab="流程属性" key="2">
-        <auth-config ref="auth"></auth-config>
+        <shcemeinfo-config ref="shcemeinfoRef" :disabled="true"></shcemeinfo-config>
       </a-tab-pane>
-      <a-tab-pane key="3" tab="开始节点">
+      <a-tab-pane key="3" tab="发起权限" force-render>
-        <start-event-option ref="start" :element="data.elementData"></start-event-option>
+        <auth-config ref="authRef"></auth-config>
-      </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>
+
     </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
   })
- 
+  const configActiveName = ref('2')
-  provide('prefix', props.prefix)
-  provide('width', props.width)
-  const activeKey = ref("6")
   const data = reactive({
-    configActiveName: 'tab02',
     currentWfNode: undefined,
-    wfNodeName: {
+    wfNodeName: ""
-      startEvent: '开始节点',
-      endEvent: '结束节点',
-      gatewayAnd: '并行网关',
-      gatewayInclusive: '包含网关',
-      gatewayXor: '排他网关',
-      scriptTask: '脚本节点',
-      userTask: '审核节点',
-      subprocess: '子流程',
-      myline: '线条'
-    },
-    elementData:{}
   })
   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',
+  function scriptTaskNodeInit(node) {
-      name: '文章',
+    node.executeType = '1'
-      component: 'startEventOption',
+    node.sqlDb = ''
-    },
+    node.sqlStr = ''
-    {
+    node.sqlStrRevoke = ''
-      key: '2',
+    node.apiUrl = ''
-      name: '应用',
+    node.apiUrlRevoke = ''
-      component: 'startEventOption',
+    node.ioc = ''
-    },
+    node.iocRevoke = ''
-  ])
+
-  const tabs = {
+  }
-    startEventOption,
+  function mylineNodeInit(node) {
-    startEventOption,
+    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>

src/components/ProcessDesigner/package/penal/auth/index.vue

@@ -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>

src/components/ProcessDesigner/package/penal/endEvent/index.vue

@@ -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>

src/components/ProcessDesigner/package/penal/shcemeInfo/index.vue

@@ -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>

src/components/ProcessDesigner/package/penal/startEvent/index.vue

@@ -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 = newVal.id
-      node.id = data.elementData.id
+            node.type = newVal.type
-      node.type = data.elementData.type
     }
   )
   watch(
@@ -175,124 +174,12 @@
       }
     }
   )
-
+  watch(
-  
+    () => node, (newVal, oldVal) => {
-  async function custmerformChange(val) {
+      console.log(oldVal)
-    this.$set(this.node, 'formRelationId', '')
+      console.log(newVal)
-    if (val == null) {
-      this.node.authFields = [];
-      this.node.formVerison = ''
-      return;
     }
-    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 {

src/components/ProcessDesigner/package/penal/subprocess/index.vue

@@ -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>

src/components/ProcessDesigner/package/penal/userTask/index.vue

@@ -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>
 

src/components/ProcessDesigner/package/utils.ts

@@ -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()
+}

src/views/demo/workflow/scheme/HistoryDrawer.vue

@@ -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,updateScheme } from '@/api/sys/WFSchemeInfo';
-  import { getLoadHistoryPage } 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(() => {

src/views/demo/workflow/scheme/preview.vue

@@ -1,97 +1,41 @@
 <template>
-  <!-- <process-viewer :key="`designer-${processView.index}`" :xml="processView.xmlData" :style="{height: '400px'}" /> -->
+  <div class="preview-box">
-  <process-designer :key="designerOpen" style="border:1px solid rgba(0, 0, 0, 0.1);" ref="modelDesigner"
+    <div class="btn-box">
-    v-loading="designerData.loading" :bpmnXml="designerData.bpmnXml" :designerForm="designerData.form"
+      <a-button type="primary" :icon="h(SaveOutlined)" @click="onSave" class="ml-2">保存流程 </a-button>
-    @save="onSaveDesigner" />
+    </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'
+  import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
-
+  const designerOpen = ref(false)
-  export default {
+  const designerData = reactive({
-    name: "Model",
+    loading: false,
-    components: {
+    bpmnXml: '',
-      ProcessDesigner,
+    modelId: null,
-      // ProcessViewer,
+    form: {
-    },
+      processName: null,
-    data() {
+      processKey: null
-      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)
-        //   }
-        // })
-      },
     }
-  };
+  })
+  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>

src/views/demo/workflow/scheme/scheme.data.ts

@@ -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;
-  //             });
-  //         },
-  //       });
-  //     }
-  //   },
-  // },
 
-
-];