adtec-core-package 2.4.8 → 2.5.0

package/src/components/bpmntree/views/flowDesign/nodes/Node.vue

@@ -1,346 +1,346 @@
-<script setup lang="ts">
-import type { ErrorInfo, FlowNode, NodeType } from './type'
-import { ClickOutside as vClickOutside, type InputInstance } from 'element-plus'
-import Add from './Add.vue'
-import { computed, inject, nextTick, ref, type Ref, watchEffect } from 'vue'
-import FlowIcon from '../../../components/FlowIcon/index'
-import PopoverView from './PopoverView.vue'
-import type { IWfProcessInstVo, IWfTaskVo } from '../../../../../interface/workflow/IWfTaskVo'
-const _inject = inject<{
-  readOnly?: Ref<boolean>
-  nodesError: Ref<Recordable<ErrorInfo[]>>
-  processInst: Ref<IWfProcessInstVo>
-}>('flowDesign', {
-  readOnly: ref(false),
-  nodesError: ref({}),
-  processInst: ref<IWfProcessInstVo>({}),
-})
-const $emits = defineEmits<{
-  (e: 'addNode', type: NodeType, node: FlowNode): void
-  (e: 'delNode', node: FlowNode): void
-  (e: 'activeNode', node: FlowNode): void
-}>()
-const $props = withDefaults(
-  defineProps<{
-    icon?: string
-    node: FlowNode
-    color?: string
-    readOnly?: boolean
-    close?: boolean
-    hiddenPanel?: boolean
-  }>(),
-  {
-    readOnly: false,
-    close: true,
-    hiddenPanel: false,
-  },
-)
-const cardRef = ref()
-const errorInfo = computed<ErrorInfo[] | undefined>(() => _inject.nodesError.value[$props.node.id])
-const _readOnly = computed(() => _inject.readOnly?.value || $props.readOnly)
-const showInput = ref(false)
-const inputRef = ref<InputInstance>()
-const onShowInput = () => {
-  if (_readOnly.value) return
-  showInput.value = true
-  nextTick(() => {
-    inputRef.value?.focus()
-  })
-}
-const onClickOutside = () => {
-  if (showInput.value) {
-    showInput.value = false
-  }
-}
-const activeNode = () => {
-  // console.log('$props.hiddenPanel', $props.hiddenPanel)
-  if (_readOnly.value) return
-  if ($props.hiddenPanel) return
-  $emits('activeNode', $props.node)
-}
-const addNode = (type: NodeType) => {
-  $emits('addNode', type, $props.node)
-}
-const delNode = () => {
-  $emits('delNode', $props.node)
-}
-const tasks = ref<IWfTaskVo[]>([])
-const nodeClass = ref('')
-const headColor = ref($props.node.color || $props.color)
-watchEffect(() => {
-  tasks.value = []
-  if (_inject.processInst.value && $props.node) {
-    if ($props.node.type === 'approval') {
-      //默认样式（未开始）
-      nodeClass.value = 'node-unstart'
-      headColor.value = '#9B9EA1'
-
-      if (_inject.processInst.value.hisTasks?.length) {
-        tasks.value = tasks.value.concat(
-          _inject.processInst.value.hisTasks.filter((x) => {
-            if (x.taskDefKey == $props.node.id) {
-              nodeClass.value = 'node-complete'
-              headColor.value = '#18AD43'
-              return true
-            }
-            return false
-          }),
-        )
-      }
-      if (_inject.processInst.value.activeTasks?.length) {
-        const actives = _inject.processInst.value.activeTasks.filter((x) => {
-          if (x.taskDefKey == $props.node.id) {
-            nodeClass.value = 'node-active'
-            headColor.value = '#0B83DE'
-            return true
-          }
-          return false
-        })
-        if (actives.length > 0) {
-          actives[0].assigneeName = actives.map((x) => x.assigneeName).join('/')
-          tasks.value = tasks.value.concat(actives[0])
-        }
-      }
-    }
-    //其他node
-    else {
-      if (
-        _inject.processInst.value.flows &&
-        (_inject.processInst.value?.flows ?? []).filter((x) => {
-          return x.taskDefKey == $props.node.id
-        }).length > 0
-      ) {
-        nodeClass.value = 'node-complete'
-        headColor.value = '#18AD43'
-        // if ($props.node.type === 'start') {
-        //   headColor.value = '#18AD43'
-        // }
-      } else {
-        nodeClass.value = 'node-unstart'
-        headColor.value = '#9B9EA1'
-      }
-      if ($props.node.type === 'jump') {
-        //jump节点若pid完成，则其也完成
-        if (
-          $props.node.pid &&
-          ((_inject.processInst.value.hisTasks?.some((x) => x.taskDefKey == $props.node.pid) &&
-            !_inject.processInst.value.activeTasks?.some((x) => x.taskDefKey == $props.node.pid)) ||
-            _inject.processInst.value.flows?.some((x) => x.taskDefKey == $props.node.pid))
-        ) {
-          nodeClass.value = 'node-complete'
-          headColor.value = '#18AD43'
-        }
-      }
-    }
-  }
-})
-</script>
-
-<template>
-  <div class="node-box">
-    <el-popover
-      v-if="tasks.length > 0 && node.type === 'approval'"
-      :virtual-ref="cardRef"
-      title="任务详情"
-      :width="230"
-      placement="left"
-      virtual-triggering
-    >
-      <popover-view :node="node" :tasks="tasks"></popover-view>
-    </el-popover>
-    <el-card
-      ref="cardRef"
-      @click="activeNode"
-      :class="[
-        'node',
-        nodeClass,
-        node.type === 'start' &&
-        (_inject.processInst?.value?.hisTasks?.length ||
-          _inject.processInst?.value?.activeTasks?.length)
-          ? 'node-complete'
-          : '',
-        { 'error-node': errorInfo?.length && !_readOnly },
-      ]"
-    >
-      <!--头部-->
-      <template #header>
-        <div class="head">
-          <slot name="icon">
-            <flow-icon
-              :size="16"
-              color="white"
-              v-if="icon"
-              :name="icon"
-              style="margin-right: 10px"
-            />
-          </slot>
-          <div @click.stop v-if="showInput">
-            <el-input
-              ref="inputRef"
-              v-click-outside="onClickOutside"
-              @blur="onClickOutside"
-              maxlength="30"
-              v-model="node.name"
-            />
-          </div>
-          <el-text tag="b" truncated v-else @click.stop="onShowInput" :style="{ color: 'white' }">
-            {{ node.name }}
-            <el-icon v-if="!_inject.readOnly?.value">
-              <EditPen />
-            </el-icon>
-          </el-text>
-        </div>
-        <!--删除按钮-->
-        <span @click.stop>
-          <el-popconfirm
-            title="您确定要删除该节点吗？"
-            width="200"
-            :hide-after="0"
-            placement="right-start"
-            @confirm="delNode"
-          >
-            <template #reference>
-              <el-button class="node-close" v-show="close && !_readOnly" circle size="small">
-                <template #icon>
-                  <flow-icon name="el:CloseBold" color="red"></flow-icon>
-                </template>
-              </el-button>
-            </template>
-          </el-popconfirm>
-        </span>
-        <!--错误提示-->
-        <el-tooltip placement="top-start">
-          <template #content>
-            <div v-for="err in errorInfo" :key="err.id">
-              {{ err.message }}
-            </div>
-          </template>
-          <el-icon class="warn-icon" :size="20" v-show="errorInfo?.length && !_readOnly">
-            <WarnTriangleFilled @click.stop />
-          </el-icon>
-        </el-tooltip>
-      </template>
-      <!--插槽内容-->
-      <slot></slot>
-    </el-card>
-    <Add @add-node="addNode" />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.node-box {
-  position: relative;
-
-  /* &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    width: 1px;
-    height: 100%;
-    background-color: var(--el-border-color);
-  }*/
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: -12px;
-    left: 50%;
-    transform: translate(-50%);
-    border-style: solid;
-    width: 0;
-    border-width: 8px 6px 4px;
-    border-color: var(--el-border-color) transparent transparent;
-    background-color: var(--flow-bg-color);
-  }
-
-  .warn-icon {
-    cursor: pointer;
-    position: absolute;
-    right: -30px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--el-color-error);
-  }
-
-  .error-node {
-    box-shadow: 0 0 5px 0 var(--el-color-error-light-3);
-  }
-
-  .node {
-    border-radius: 7px;
-    cursor: pointer;
-    position: relative;
-    overflow: visible;
-    height: 80px;
-    width: 200px;
-    z-index: 10;
-
-    .node-close {
-      position: absolute;
-      top: -10px;
-      right: -10px;
-      display: none;
-    }
-
-    &:hover {
-      &:not(.error-node) {
-        box-shadow: 0 0 5px 0 var(--el-color-primary);
-      }
-
-      .node-close {
-        display: block;
-      }
-    }
-
-    :deep(.el-card__header) {
-      padding: calc(var(--el-card-padding) - 18px) calc(var(--el-card-padding) - 13px);
-      border-radius: 7px 7px 0 0;
-      background: v-bind(headColor);
-
-      .el-input__wrapper {
-        background-color: var(--el-card-bg-color);
-      }
-    }
-
-    :deep(.el-card__body) {
-      position: relative;
-      padding: 5px 10px 10px 10px;
-    }
-
-    .head {
-      height: 30px;
-      display: flex;
-      align-items: center;
-      justify-content: left;
-    }
-  }
-  .node-complete {
-    border-radius: 9px;
-    border: 1px solid #18ad43 !important;
-  }
-  .node-unstart {
-    border-radius: 9px;
-    border: 1px solid #9b9ea1 !important;
-  }
-  .node-active {
-    border-radius: 9px;
-    border: 1px solid #0b83de;
-    animation: border-change 2s infinite linear;
-  }
-}
-@keyframes border-change {
-  0% {
-    border-color: transparent;
-  }
-  50% {
-    border-color: #0b83de;
-  }
-  100% {
-    border-color: transparent;
-  }
-}
-</style>
+<script setup lang="ts">
+import type { ErrorInfo, FlowNode, NodeType } from './type'
+import { ClickOutside as vClickOutside, type InputInstance } from 'element-plus'
+import Add from './Add.vue'
+import { computed, inject, nextTick, ref, type Ref, watchEffect } from 'vue'
+import FlowIcon from '../../../components/FlowIcon/index'
+import PopoverView from './PopoverView.vue'
+import type { IWfProcessInstVo, IWfTaskVo } from '../../../../../interface/workflow/IWfTaskVo'
+const _inject = inject<{
+  readOnly?: Ref<boolean>
+  nodesError: Ref<Recordable<ErrorInfo[]>>
+  processInst: Ref<IWfProcessInstVo>
+}>('flowDesign', {
+  readOnly: ref(false),
+  nodesError: ref({}),
+  processInst: ref<IWfProcessInstVo>({}),
+})
+const $emits = defineEmits<{
+  (e: 'addNode', type: NodeType, node: FlowNode): void
+  (e: 'delNode', node: FlowNode): void
+  (e: 'activeNode', node: FlowNode): void
+}>()
+const $props = withDefaults(
+  defineProps<{
+    icon?: string
+    node: FlowNode
+    color?: string
+    readOnly?: boolean
+    close?: boolean
+    hiddenPanel?: boolean
+  }>(),
+  {
+    readOnly: false,
+    close: true,
+    hiddenPanel: false,
+  },
+)
+const cardRef = ref()
+const errorInfo = computed<ErrorInfo[] | undefined>(() => _inject.nodesError.value[$props.node.id])
+const _readOnly = computed(() => _inject.readOnly?.value || $props.readOnly)
+const showInput = ref(false)
+const inputRef = ref<InputInstance>()
+const onShowInput = () => {
+  if (_readOnly.value) return
+  showInput.value = true
+  nextTick(() => {
+    inputRef.value?.focus()
+  })
+}
+const onClickOutside = () => {
+  if (showInput.value) {
+    showInput.value = false
+  }
+}
+const activeNode = () => {
+  // console.log('$props.hiddenPanel', $props.hiddenPanel)
+  if (_readOnly.value) return
+  if ($props.hiddenPanel) return
+  $emits('activeNode', $props.node)
+}
+const addNode = (type: NodeType) => {
+  $emits('addNode', type, $props.node)
+}
+const delNode = () => {
+  $emits('delNode', $props.node)
+}
+const tasks = ref<IWfTaskVo[]>([])
+const nodeClass = ref('')
+const headColor = ref($props.node.color || $props.color)
+watchEffect(() => {
+  tasks.value = []
+  if (_inject.processInst.value && $props.node) {
+    if ($props.node.type === 'approval') {
+      //默认样式（未开始）
+      nodeClass.value = 'node-unstart'
+      headColor.value = '#9B9EA1'
+
+      if (_inject.processInst.value.hisTasks?.length) {
+        tasks.value = tasks.value.concat(
+          _inject.processInst.value.hisTasks.filter((x) => {
+            if (x.taskDefKey == $props.node.id) {
+              nodeClass.value = 'node-complete'
+              headColor.value = '#18AD43'
+              return true
+            }
+            return false
+          }),
+        )
+      }
+      if (_inject.processInst.value.activeTasks?.length) {
+        const actives = _inject.processInst.value.activeTasks.filter((x) => {
+          if (x.taskDefKey == $props.node.id) {
+            nodeClass.value = 'node-active'
+            headColor.value = '#0B83DE'
+            return true
+          }
+          return false
+        })
+        if (actives.length > 0) {
+          actives[0].assigneeName = actives.map((x) => x.assigneeName).join('/')
+          tasks.value = tasks.value.concat(actives[0])
+        }
+      }
+    }
+    //其他node
+    else {
+      if (
+        _inject.processInst.value.flows &&
+        (_inject.processInst.value?.flows ?? []).filter((x) => {
+          return x.taskDefKey == $props.node.id
+        }).length > 0
+      ) {
+        nodeClass.value = 'node-complete'
+        headColor.value = '#18AD43'
+        // if ($props.node.type === 'start') {
+        //   headColor.value = '#18AD43'
+        // }
+      } else {
+        nodeClass.value = 'node-unstart'
+        headColor.value = '#9B9EA1'
+      }
+      if ($props.node.type === 'jump') {
+        //jump节点若pid完成，则其也完成
+        if (
+          $props.node.pid &&
+          ((_inject.processInst.value.hisTasks?.some((x) => x.taskDefKey == $props.node.pid) &&
+            !_inject.processInst.value.activeTasks?.some((x) => x.taskDefKey == $props.node.pid)) ||
+            _inject.processInst.value.flows?.some((x) => x.taskDefKey == $props.node.pid))
+        ) {
+          nodeClass.value = 'node-complete'
+          headColor.value = '#18AD43'
+        }
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="node-box">
+    <el-popover
+      v-if="tasks.length > 0 && node.type === 'approval'"
+      :virtual-ref="cardRef"
+      title="任务详情"
+      :width="230"
+      placement="left"
+      virtual-triggering
+    >
+      <popover-view :node="node" :tasks="tasks"></popover-view>
+    </el-popover>
+    <el-card
+      ref="cardRef"
+      @click="activeNode"
+      :class="[
+        'node',
+        nodeClass,
+        node.type === 'start' &&
+        (_inject.processInst?.value?.hisTasks?.length ||
+          _inject.processInst?.value?.activeTasks?.length)
+          ? 'node-complete'
+          : '',
+        { 'error-node': errorInfo?.length && !_readOnly },
+      ]"
+    >
+      <!--头部-->
+      <template #header>
+        <div class="head">
+          <slot name="icon">
+            <flow-icon
+              :size="16"
+              color="white"
+              v-if="icon"
+              :name="icon"
+              style="margin-right: 10px"
+            />
+          </slot>
+          <div @click.stop v-if="showInput">
+            <el-input
+              ref="inputRef"
+              v-click-outside="onClickOutside"
+              @blur="onClickOutside"
+              maxlength="30"
+              v-model="node.name"
+            />
+          </div>
+          <el-text tag="b" truncated v-else @click.stop="onShowInput" :style="{ color: 'white' }">
+            {{ node.name }}
+            <el-icon v-if="!_inject.readOnly?.value">
+              <EditPen />
+            </el-icon>
+          </el-text>
+        </div>
+        <!--删除按钮-->
+        <span @click.stop>
+          <el-popconfirm
+            title="您确定要删除该节点吗？"
+            width="200"
+            :hide-after="0"
+            placement="right-start"
+            @confirm="delNode"
+          >
+            <template #reference>
+              <el-button class="node-close" v-show="close && !_readOnly" circle size="small">
+                <template #icon>
+                  <flow-icon name="el:CloseBold" color="red"></flow-icon>
+                </template>
+              </el-button>
+            </template>
+          </el-popconfirm>
+        </span>
+        <!--错误提示-->
+        <el-tooltip placement="top-start">
+          <template #content>
+            <div v-for="err in errorInfo" :key="err.id">
+              {{ err.message }}
+            </div>
+          </template>
+          <el-icon class="warn-icon" :size="20" v-show="errorInfo?.length && !_readOnly">
+            <WarnTriangleFilled @click.stop />
+          </el-icon>
+        </el-tooltip>
+      </template>
+      <!--插槽内容-->
+      <slot></slot>
+    </el-card>
+    <Add @add-node="addNode" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.node-box {
+  position: relative;
+
+  /* &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 1px;
+    height: 100%;
+    background-color: var(--el-border-color);
+  }*/
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    transform: translate(-50%);
+    border-style: solid;
+    width: 0;
+    border-width: 8px 6px 4px;
+    border-color: var(--el-border-color) transparent transparent;
+    background-color: var(--flow-bg-color);
+  }
+
+  .warn-icon {
+    cursor: pointer;
+    position: absolute;
+    right: -30px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--el-color-error);
+  }
+
+  .error-node {
+    box-shadow: 0 0 5px 0 var(--el-color-error-light-3);
+  }
+
+  .node {
+    border-radius: 7px;
+    cursor: pointer;
+    position: relative;
+    overflow: visible;
+    height: 80px;
+    width: 200px;
+    z-index: 10;
+
+    .node-close {
+      position: absolute;
+      top: -10px;
+      right: -10px;
+      display: none;
+    }
+
+    &:hover {
+      &:not(.error-node) {
+        box-shadow: 0 0 5px 0 var(--el-color-primary);
+      }
+
+      .node-close {
+        display: block;
+      }
+    }
+
+    :deep(.el-card__header) {
+      padding: calc(var(--el-card-padding) - 18px) calc(var(--el-card-padding) - 13px);
+      border-radius: 7px 7px 0 0;
+      background: v-bind(headColor);
+
+      .el-input__wrapper {
+        background-color: var(--el-card-bg-color);
+      }
+    }
+
+    :deep(.el-card__body) {
+      position: relative;
+      padding: 5px 10px 10px 10px;
+    }
+
+    .head {
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: left;
+    }
+  }
+  .node-complete {
+    border-radius: 9px;
+    border: 1px solid #18ad43 !important;
+  }
+  .node-unstart {
+    border-radius: 9px;
+    border: 1px solid #9b9ea1 !important;
+  }
+  .node-active {
+    border-radius: 9px;
+    border: 1px solid #0b83de;
+    animation: border-change 2s infinite linear;
+  }
+}
+@keyframes border-change {
+  0% {
+    border-color: transparent;
+  }
+  50% {
+    border-color: #0b83de;
+  }
+  100% {
+    border-color: transparent;
+  }
+}
+</style>