添加工作流设计器

2024-04-16 08:41:41 +08:00
parent 071ee4d2b5
commit ecb649dc47
79 changed files with 11162 additions and 207 deletions
--- a/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form size="small" label-width="90px">
+      <!-- add by 芋艿：由于「异步延续」暂时用不到，所以这里 display 为 none -->
+      <el-form-item label="异步延续" style="display: none">
+        <el-checkbox
+          v-model="taskConfigForm.asyncBefore"
+          label="异步前"
+          @change="changeTaskAsync"
+        />
+        <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />
+        <el-checkbox
+          v-model="taskConfigForm.exclusive"
+          v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore"
+          label="排除"
+          @change="changeTaskAsync"
+        />
+      </el-form-item>
+      <component :is="witchTaskComponent" v-bind="$props" />
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UserTask from './task-components/UserTask.vue'
+import ScriptTask from './task-components/ScriptTask.vue'
+import ReceiveTask from './task-components/ReceiveTask.vue'
+
+import { onMounted, reactive, ref, watch, onBeforeUnmount,toRaw,nextTick } from 'vue'
+defineOptions({ name: 'ElementTaskConfig' })
+
+const props = defineProps({
+  id: String,
+  type: String
+})
+const taskConfigForm = ref({
+  asyncAfter: false,
+  asyncBefore: false,
+  exclusive: false
+})
+const witchTaskComponent = ref()
+const installedComponent = ref({
+  // 手工任务与普通任务一致，不需要其他配置
+  // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
+  // 发送任务、服务任务、业务规则任务共用一个相同配置
+  UserTask: 'UserTask', // 用户任务配置
+  ScriptTask: 'ScriptTask', // 脚本任务配置
+  ReceiveTask: 'ReceiveTask' // 消息接收任务
+})
+const bpmnElement = ref()
+
+const bpmnInstances = () => (window as any).bpmnInstances
+const changeTaskAsync = () => {
+  if (!taskConfigForm.value.asyncBefore && !taskConfigForm.value.asyncAfter) {
+    taskConfigForm.value.exclusive = false
+  }
+  bpmnInstances().modeling.updateProperties(bpmnInstances().bpmnElement, {
+    ...taskConfigForm.value
+  })
+}
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement
+    taskConfigForm.value.asyncBefore = bpmnElement.value?.businessObject?.asyncBefore
+    taskConfigForm.value.asyncAfter = bpmnElement.value?.businessObject?.asyncAfter
+    taskConfigForm.value.exclusive = bpmnElement.value?.businessObject?.exclusive
+  },
+  { immediate: true }
+)
+watch(
+  () => props.type,
+  () => {
+    // witchTaskComponent.value = installedComponent.value[props.type]
+    if (props.type == installedComponent.value.UserTask) {
+      witchTaskComponent.value = UserTask
+    }
+    if (props.type == installedComponent.value.ScriptTask) {
+      witchTaskComponent.value = ScriptTask
+    }
+    if (props.type == installedComponent.value.ReceiveTask) {
+      witchTaskComponent.value = ReceiveTask
+    }
+  },
+  { immediate: true }
+)
+</script>
--- a/src/components/bpmnProcessDesigner/package/penal/task/task-components/ProcessExpressionDialog.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/task/task-components/ProcessExpressionDialog.vue
@@ -0,0 +1,65 @@
+<!-- 表达式选择 -->
+<template>
+    <Dialog title="请选择表达式" v-model="dialogVisible" width="1024px">
+        <ContentWrap>
+            <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+                <el-table-column label="名字" align="center" prop="name" />
+                <el-table-column label="表达式" align="center" prop="expression" />
+                <el-table-column label="操作" align="center">
+                    <template #default="scope">
+                        <el-button link type="primary" @click="select(scope.row)">选择</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <!-- 分页 -->
+            <Pagination
+                :total="total"
+                v-model:page="queryParams.pageNo"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getList"
+            />
+        </ContentWrap>
+    </Dialog>
+</template>
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch, onBeforeUnmount } from 'vue'
+import { ProcessExpressionApi, ProcessExpressionVO } from '@/api/bpm/processExpression'
+
+/** BPM 流程 表单 */
+defineOptions({ name: 'ProcessExpressionDialog' })
+
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const loading = ref(true) // 列表的加载中
+const list = ref<ProcessExpressionVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+    pageNo: 1,
+    pageSize: 10,
+    type: undefined
+})
+
+/** 打开弹窗 */
+const open = async (type: string) => {
+    dialogVisible.value = true
+    loading.value = true
+    try {
+        queryParams.pageNo = 1
+        queryParams.type = type
+        const data = await ProcessExpressionApi.getProcessExpressionPage(queryParams)
+        list.value = data.list
+        total.value = data.total
+    } finally {
+        loading.value = false
+    }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const select = async row => {
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('select', row)
+}
+</script>
--- a/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
@@ -0,0 +1,113 @@
+<template>
+    <div style="margin-top: 16px">
+        <el-form-item label="消息实例">
+            <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap">
+                <el-select v-model="bindMessageId" @change="updateTaskMessage">
+                    <el-option
+                        v-for="key in Object.keys(messageMap)"
+                        :value="key"
+                        :label="messageMap[key]"
+                        :key="key"
+                    />
+                </el-select>
+                <el-button type="primary" icon="el-icon-Plus" style="margin-left: 8px" @click="openMessageModel" />
+            </div>
+        </el-form-item>
+        <el-dialog
+            v-model="messageModelVisible"
+            :close-on-click-modal="false"
+            title="创建新消息"
+            width="400px"
+            append-to-body
+            destroy-on-close
+        >
+            <el-form :model="newMessageForm" size="small" label-width="90px">
+                <el-form-item label="消息ID">
+                    <el-input v-model="newMessageForm.id" clearable />
+                </el-form-item>
+                <el-form-item label="消息名称">
+                    <el-input v-model="newMessageForm.name" clearable />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'ReceiveTask' })
+const props = defineProps({
+    id: String,
+    type: String
+})
+
+const message = useMessage()
+
+const bindMessageId = ref('')
+const newMessageForm = ref<any>({})
+const messageMap = ref<any>({})
+const messageModelVisible = ref(false)
+const bpmnElement = ref<any>()
+const bpmnMessageRefsMap = ref<any>()
+const bpmnRootElements = ref<any>()
+
+const bpmnInstances = () => (window as any).bpmnInstances
+const getBindMessage = () => {
+    bpmnElement.value = bpmnInstances().bpmnElement
+    bindMessageId.value = bpmnElement.value.businessObject?.messageRef?.id || '-1'
+}
+const openMessageModel = () => {
+    messageModelVisible.value = true
+    newMessageForm.value = {}
+}
+const createNewMessage = () => {
+    if (messageMap.value[newMessageForm.value.id]) {
+        message.error('该消息已存在，请修改id后重新保存')
+        return
+    }
+    const newMessage = bpmnInstances().moddle.create('bpmn:Message', newMessageForm.value)
+    bpmnRootElements.value.push(newMessage)
+    messageMap.value[newMessageForm.value.id] = newMessageForm.value.name
+    bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage
+    messageModelVisible.value = false
+}
+const updateTaskMessage = messageId => {
+    if (messageId === '-1') {
+        bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+            messageRef: null
+        })
+    } else {
+        bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+            messageRef: bpmnMessageRefsMap.value[messageId]
+        })
+    }
+}
+
+onMounted(() => {
+    bpmnMessageRefsMap.value = Object.create(null)
+    bpmnRootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
+    bpmnRootElements.value
+        .filter(el => el.$type === 'bpmn:Message')
+        .forEach(m => {
+            bpmnMessageRefsMap.value[m.id] = m
+            messageMap.value[m.id] = m.name
+        })
+    messageMap.value['-1'] = '无'
+})
+
+onBeforeUnmount(() => {
+    bpmnElement.value = null
+})
+watch(
+    () => props.id,
+    () => {
+        // bpmnElement.value = bpmnInstances().bpmnElement
+        nextTick(() => {
+            getBindMessage()
+        })
+    },
+    { immediate: true }
+)
+</script>
--- a/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
@@ -0,0 +1,99 @@
+<template>
+  <div style="margin-top: 16px">
+    <el-form-item label="脚本格式">
+      <el-input
+        v-model="scriptTaskForm.scriptFormat"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
+    </el-form-item>
+    <el-form-item label="脚本类型">
+      <el-select v-model="scriptTaskForm.scriptType">
+        <el-option label="内联脚本" value="inline" />
+        <el-option label="外部资源" value="external" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
+      <el-input
+        v-model="scriptTaskForm.script"
+        type="textarea"
+        resize="vertical"
+        :autosize="{ minRows: 2, maxRows: 4 }"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
+    </el-form-item>
+    <el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
+      <el-input
+        v-model="scriptTaskForm.resource"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
+    </el-form-item>
+    <el-form-item label="结果变量">
+      <el-input
+        v-model="scriptTaskForm.resultVariable"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
+    </el-form-item>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'ScriptTask' })
+const props = defineProps({
+  id: String,
+  type: String
+})
+const defaultTaskForm = ref({
+  scriptFormat: '',
+  script: '',
+  resource: '',
+  resultVariable: ''
+})
+const scriptTaskForm = ref<any>({})
+const bpmnElement = ref()
+
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const resetTaskForm = () => {
+  for (let key in defaultTaskForm.value) {
+    let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
+    scriptTaskForm.value[key] = value
+  }
+  scriptTaskForm.value.scriptType = scriptTaskForm.value.script ? 'inline' : 'external'
+}
+const updateElementTask = () => {
+  let taskAttr = Object.create(null)
+  taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null
+  taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null
+  if (scriptTaskForm.value.scriptType === 'inline') {
+    taskAttr.script = scriptTaskForm.value.script || null
+    taskAttr.resource = null
+  } else {
+    taskAttr.resource = scriptTaskForm.value.resource || null
+    taskAttr.script = null
+  }
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
+}
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement
+    nextTick(() => {
+      resetTaskForm()
+    })
+  },
+  { immediate: true }
+)
+</script>
--- a/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
@@ -0,0 +1,234 @@
+<template>
+  <el-form label-width="100px">
+    <el-form-item label="规则类型" prop="candidateStrategy">
+      <el-select
+        v-model="userTaskForm.candidateStrategy"
+        clearable
+        style="width: 100%"
+        @change="changeCandidateStrategy"
+      >
+        <!-- <el-option
+          v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
+          :key="dict.value"
+          :label="dict.label"
+          :value="dict.value"
+        /> -->
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy == 10"
+      label="指定角色"
+      prop="candidateParam"
+    >
+      <el-select
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy == 20 || userTaskForm.candidateStrategy == 21"
+      label="指定部门"
+      prop="candidateParam"
+      span="24"
+    >
+      <el-tree-select
+        ref="treeRef"
+        v-model="userTaskForm.candidateParam"
+        :data="deptTreeOptions"
+        :props="defaultProps"
+        empty-text="加载中，请稍后"
+        multiple
+        node-key="id"
+        show-checkbox
+        @change="updateElementTask"
+      />
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy == 22"
+      label="指定岗位"
+      prop="candidateParam"
+      span="24"
+    >
+      <el-select
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <el-option v-for="item in postOptions" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy == 30"
+      label="指定用户"
+      prop="candidateParam"
+      span="24"
+    >
+      <el-select
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <el-option
+          v-for="item in userOptions"
+          :key="item.id"
+          :label="item.nickname"
+          :value="item.id"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy === 40"
+      label="指定用户组"
+      prop="candidateParam"
+    >
+      <el-select
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <el-option
+          v-for="item in userGroupOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy === 60"
+      label="流程表达式"
+      prop="candidateParam"
+    >
+      <el-input
+        type="textarea"
+        v-model="userTaskForm.candidateParam[0]"
+        clearable
+        style="width: 72%"
+        @change="updateElementTask"
+      />
+      <el-button class="ml-5px" size="small" type="success" @click="openProcessExpressionDialog"
+        >选择表达式</el-button
+      >
+      <!-- 选择弹窗 -->
+      <ProcessExpressionDialog ref="processExpressionDialogRef" @select="selectProcessExpression" />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+// import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+
+import { onMounted, reactive, ref, watch, onBeforeUnmount,toRaw,nextTick } from 'vue'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as RoleApi from '@/api/system/role'
+import * as DeptApi from '@/api/system/dept'
+import * as PostApi from '@/api/system/post'
+import * as UserApi from '@/api/system/user'
+import * as UserGroupApi from '@/api/bpm/userGroup'
+import ProcessExpressionDialog from './ProcessExpressionDialog.vue'
+
+defineOptions({ name: 'UserTask' })
+const props = defineProps({
+  id: String,
+  type: String
+})
+const userTaskForm = ref({
+  candidateStrategy: undefined, // 分配规则
+  candidateParam: [] // 分配选项
+})
+const bpmnElement = ref()
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
+const deptTreeOptions = ref() // 部门树
+const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
+
+const resetTaskForm = () => {
+  const businessObject = bpmnElement.value.businessObject
+  if (!businessObject) {
+    return
+  }
+  if (businessObject.candidateStrategy != undefined) {
+    userTaskForm.value.candidateStrategy = parseInt(businessObject.candidateStrategy) as any
+  } else {
+    userTaskForm.value.candidateStrategy = undefined
+  }
+  if (businessObject.candidateParam && businessObject.candidateParam.length > 0) {
+    if (userTaskForm.value.candidateStrategy === 60) {
+      // 特殊：流程表达式，只有一个 input 输入框
+      userTaskForm.value.candidateParam = [businessObject.candidateParam]
+    } else {
+      userTaskForm.value.candidateParam = businessObject.candidateParam
+        .split(',')
+        .map((item) => +item)
+    }
+  } else {
+    userTaskForm.value.candidateParam = []
+  }
+}
+
+/** 更新 candidateStrategy 字段时，需要清空 candidateParam，并触发 bpmn 图更新 */
+const changeCandidateStrategy = () => {
+  userTaskForm.value.candidateParam = []
+  updateElementTask()
+}
+
+/** 选中某个 options 时候，更新 bpmn 图  */
+const updateElementTask = () => {
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    candidateStrategy: userTaskForm.value.candidateStrategy,
+    candidateParam: userTaskForm.value.candidateParam.join(',')
+  })
+}
+
+// 打开监听器弹窗
+const processExpressionDialogRef = ref()
+const openProcessExpressionDialog = async () => {
+  processExpressionDialogRef.value.open()
+}
+const selectProcessExpression = (expression) => {
+  userTaskForm.value.candidateParam = [expression.expression]
+}
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement
+    nextTick(() => {
+      resetTaskForm()
+    })
+  },
+  { immediate: true }
+)
+
+onMounted(async () => {
+  // 获得角色列表
+  roleOptions.value = await RoleApi.getSimpleRoleList()
+  // 获得部门列表
+  const deptOptions = await DeptApi.getSimpleDeptList()
+  deptTreeOptions.value = handleTree(deptOptions, 'id')
+  // 获得岗位列表
+  postOptions.value = await PostApi.getSimplePostList()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  // 获得用户组列表
+  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+})
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+</script>