| 提交 | 用户 | 时间 | ||
| 3e359e | 1 | <template> |
| H | 2 | <div class="node-wrapper"> |
| 3 | <div class="node-container"> | |
| 4 | <div | |
| 5 | class="node-box" | |
| 6 | :class="[ | |
| 7 | { 'node-config-error': !currentNode.showText }, | |
| 8 | `${useTaskStatusClass(currentNode?.activityStatus)}` | |
| 9 | ]" | |
| 10 | > | |
| 11 | <div class="node-title-container"> | |
| 12 | <div class="node-title-icon start-user" | |
| 13 | ><span class="iconfont icon-start-user"></span | |
| 14 | ></div> | |
| 15 | <input | |
| 16 | v-if="showInput" | |
| 17 | type="text" | |
| 18 | class="editable-title-input" | |
| 19 | @blur="blurEvent()" | |
| 20 | v-mountedFocus | |
| 21 | v-model="currentNode.name" | |
| 22 | :placeholder="currentNode.name" | |
| 23 | /> | |
| 24 | <div v-else class="node-title" @click="clickTitle"> | |
| 25 | {{ currentNode.name }} | |
| 26 | </div> | |
| 27 | </div> | |
| 28 | <div class="node-content" @click="nodeClick"> | |
| 29 | <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText"> | |
| 30 | {{ currentNode.showText }} | |
| 31 | </div> | |
| 32 | <div class="node-text" v-else> | |
| 33 | {{ NODE_DEFAULT_TEXT.get(NodeType.START_USER_NODE) }} | |
| 34 | </div> | |
| 35 | <Icon icon="ep:arrow-right-bold" v-if="!readonly" /> | |
| 36 | </div> | |
| 37 | </div> | |
| 38 | <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 --> | |
| 39 | <NodeHandler | |
| 40 | v-if="currentNode" | |
| 41 | v-model:child-node="currentNode.childNode" | |
| 42 | :current-node="currentNode" | |
| 43 | /> | |
| 44 | </div> | |
| 45 | </div> | |
| 46 | <StartUserNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" /> | |
| 47 | <!-- 审批记录 --> | |
| 48 | <el-dialog | |
| 49 | :title="dialogTitle || '审批记录'" | |
| 50 | v-model="dialogVisible" | |
| 51 | width="1000px" | |
| 52 | append-to-body | |
| 53 | > | |
| 54 | <el-row> | |
| 55 | <el-table :data="selectTasks" size="small" border header-cell-class-name="table-header-gray"> | |
| 56 | <el-table-column | |
| 57 | label="序号" | |
| 58 | header-align="center" | |
| 59 | align="center" | |
| 60 | type="index" | |
| 61 | width="50" | |
| 62 | /> | |
| 63 | <el-table-column label="审批人" min-width="100" align="center"> | |
| 64 | <template #default="scope"> | |
| 65 | {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }} | |
| 66 | </template> | |
| 67 | </el-table-column> | |
| 68 | ||
| 69 | <el-table-column label="部门" min-width="100" align="center"> | |
| 70 | <template #default="scope"> | |
| 71 | {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }} | |
| 72 | </template> | |
| 73 | </el-table-column> | |
| 74 | <el-table-column | |
| 75 | :formatter="dateFormatter" | |
| 76 | align="center" | |
| 77 | label="开始时间" | |
| 78 | prop="createTime" | |
| 79 | min-width="140" | |
| 80 | /> | |
| 81 | <el-table-column | |
| 82 | :formatter="dateFormatter" | |
| 83 | align="center" | |
| 84 | label="结束时间" | |
| 85 | prop="endTime" | |
| 86 | min-width="140" | |
| 87 | /> | |
| 88 | <el-table-column align="center" label="审批状态" prop="status" min-width="90"> | |
| 89 | <template #default="scope"> | |
| 90 | <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" /> | |
| 91 | </template> | |
| 92 | </el-table-column> | |
| 93 | <el-table-column align="center" label="审批建议" prop="reason" min-width="120" /> | |
| 94 | <el-table-column align="center" label="耗时" prop="durationInMillis" width="100"> | |
| 95 | <template #default="scope"> | |
| 96 | {{ formatPast2(scope.row.durationInMillis) }} | |
| 97 | </template> | |
| 98 | </el-table-column> | |
| 99 | </el-table> | |
| 100 | </el-row> | |
| 101 | </el-dialog> | |
| 102 | </template> | |
| 103 | <script setup lang="ts"> | |
| 104 | import NodeHandler from '../NodeHandler.vue' | |
| 105 | import { useWatchNode, useNodeName2, useTaskStatusClass } from '../node' | |
| 106 | import { SimpleFlowNode, NODE_DEFAULT_TEXT, NodeType } from '../consts' | |
| 107 | import StartUserNodeConfig from '../nodes-config/StartUserNodeConfig.vue' | |
| 108 | import { dateFormatter, formatPast2 } from '@/utils/formatTime' | |
| 109 | import { DICT_TYPE } from '@/utils/dict' | |
| 110 | defineOptions({ | |
| 111 | name: 'StartEventNode' | |
| 112 | }) | |
| 113 | const props = defineProps({ | |
| 114 | flowNode: { | |
| 115 | type: Object as () => SimpleFlowNode, | |
| 116 | default: () => null | |
| 117 | } | |
| 118 | }) | |
| 119 | const readonly = inject<Boolean>('readonly') // 是否只读 | |
| 120 | const tasks = inject<Ref<any[]>>('tasks') | |
| 121 | // 定义事件，更新父组件。 | |
| 122 | const emits = defineEmits<{ | |
| 123 | 'update:modelValue': [node: SimpleFlowNode | undefined] | |
| 124 | }>() | |
| 125 | // 监控节点变化 | |
| 126 | const currentNode = useWatchNode(props) | |
| 127 | // 节点名称编辑 | |
| 128 | const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE) | |
| 129 | ||
| 130 | const nodeSetting = ref() | |
| 131 | // | |
| 132 | const nodeClick = () => { | |
| 133 | if (readonly) { | |
| 134 | // 只读模式，弹窗显示任务信息 | |
| 135 | if (tasks && tasks.value) { | |
| 136 | dialogTitle.value = currentNode.value.name | |
| 137 | selectTasks.value = tasks.value.filter( | |
| 138 | (item: any) => item?.taskDefinitionKey === currentNode.value.id | |
| 139 | ) | |
| 140 | dialogVisible.value = true | |
| 141 | } | |
| 142 | } else { | |
| 143 | // 编辑模式，打开节点配置、把当前节点传递给配置组件 | |
| 144 | nodeSetting.value.showStartUserNodeConfig(currentNode.value) | |
| 145 | nodeSetting.value.openDrawer() | |
| 146 | } | |
| 147 | } | |
| 148 | ||
| 149 | // 任务的弹窗显示，用于只读模式 | |
| 150 | const dialogVisible = ref(false) // 弹窗可见性 | |
| 151 | const dialogTitle = ref<string | undefined>(undefined) // 弹窗标题 | |
| 152 | const selectTasks = ref<any[] | undefined>([]) // 选中的任务数组 | |
| 153 | </script> | |
| 154 | <style lang="scss" scoped></style> | |
