| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <el-form label-width="100px"> |
| 3 | <el-form-item label="规则类型" prop="candidateStrategy"> | |
| 4 | <el-select | |
| 5 | v-model="userTaskForm.candidateStrategy" | |
| 6 | clearable | |
| 7 | style="width: 100%" | |
| 8 | @change="changeCandidateStrategy" | |
| 9 | > | |
| 10 | <el-option | |
| 11 | v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)" | |
| 12 | :key="dict.value" | |
| 13 | :label="dict.label" | |
| 14 | :value="dict.value" | |
| 15 | /> | |
| 16 | </el-select> | |
| 17 | </el-form-item> | |
| 18 | <el-form-item | |
| 19 | v-if="userTaskForm.candidateStrategy == 10" | |
| 20 | label="指定角色" | |
| 21 | prop="candidateParam" | |
| 22 | > | |
| 23 | <el-select | |
| 24 | v-model="userTaskForm.candidateParam" | |
| 25 | clearable | |
| 26 | multiple | |
| 27 | style="width: 100%" | |
| 28 | @change="updateElementTask" | |
| 29 | > | |
| 30 | <el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" /> | |
| 31 | </el-select> | |
| 32 | </el-form-item> | |
| 33 | <el-form-item | |
| 34 | v-if="userTaskForm.candidateStrategy == 20 || userTaskForm.candidateStrategy == 21" | |
| 35 | label="指定部门" | |
| 36 | prop="candidateParam" | |
| 37 | span="24" | |
| 38 | > | |
| 39 | <el-tree-select | |
| 40 | ref="treeRef" | |
| 41 | v-model="userTaskForm.candidateParam" | |
| 42 | :data="deptTreeOptions" | |
| 43 | :props="defaultProps" | |
| 44 | empty-text="加载中，请稍后" | |
| 45 | multiple | |
| 46 | node-key="id" | |
| 47 | show-checkbox | |
| 48 | @change="updateElementTask" | |
| 49 | /> | |
| 50 | </el-form-item> | |
| 51 | <el-form-item | |
| 52 | v-if="userTaskForm.candidateStrategy == 22" | |
| 53 | label="指定岗位" | |
| 54 | prop="candidateParam" | |
| 55 | span="24" | |
| 56 | > | |
| 57 | <el-select | |
| 58 | v-model="userTaskForm.candidateParam" | |
| 59 | clearable | |
| 60 | multiple | |
| 61 | style="width: 100%" | |
| 62 | @change="updateElementTask" | |
| 63 | > | |
| 64 | <el-option v-for="item in postOptions" :key="item.id" :label="item.name" :value="item.id" /> | |
| 65 | </el-select> | |
| 66 | </el-form-item> | |
| 67 | <el-form-item | |
| 68 | v-if="userTaskForm.candidateStrategy == 30" | |
| 69 | label="指定用户" | |
| 70 | prop="candidateParam" | |
| 71 | span="24" | |
| 72 | > | |
| 73 | <el-select | |
| 74 | v-model="userTaskForm.candidateParam" | |
| 75 | clearable | |
| 76 | multiple | |
| 77 | style="width: 100%" | |
| 78 | @change="updateElementTask" | |
| 79 | > | |
| 80 | <el-option | |
| 81 | v-for="item in userOptions" | |
| 82 | :key="item.id" | |
| 83 | :label="item.nickname" | |
| 84 | :value="item.id" | |
| 85 | /> | |
| 86 | </el-select> | |
| 87 | </el-form-item> | |
| 88 | <el-form-item | |
| 89 | v-if="userTaskForm.candidateStrategy === 40" | |
| 90 | label="指定用户组" | |
| 91 | prop="candidateParam" | |
| 92 | > | |
| 93 | <el-select | |
| 94 | v-model="userTaskForm.candidateParam" | |
| 95 | clearable | |
| 96 | multiple | |
| 97 | style="width: 100%" | |
| 98 | @change="updateElementTask" | |
| 99 | > | |
| 100 | <el-option | |
| 101 | v-for="item in userGroupOptions" | |
| 102 | :key="item.id" | |
| 103 | :label="item.name" | |
| 104 | :value="item.id" | |
| 105 | /> | |
| 106 | </el-select> | |
| 107 | </el-form-item> | |
| 108 | <el-form-item | |
| 109 | v-if="userTaskForm.candidateStrategy === 60" | |
| 110 | label="流程表达式" | |
| 111 | prop="candidateParam" | |
| 112 | > | |
| 113 | <el-input | |
| 114 | type="textarea" | |
| 115 | v-model="userTaskForm.candidateParam[0]" | |
| 116 | clearable | |
| 117 | style="width: 72%" | |
| 118 | @change="updateElementTask" | |
| 119 | /> | |
| 120 | <el-button class="ml-5px" size="small" type="success" @click="openProcessExpressionDialog" | |
| 121 | >选择表达式</el-button | |
| 122 | > | |
| 123 | <!-- 选择弹窗 --> | |
| 124 | <ProcessExpressionDialog ref="processExpressionDialogRef" @select="selectProcessExpression" /> | |
| 125 | </el-form-item> | |
| 126 | </el-form> | |
| 127 | </template> | |
| 128 | ||
| 129 | <script lang="ts" setup> | |
| 130 | import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' | |
| 131 | import { defaultProps, handleTree } from '@/utils/tree' | |
| 132 | import * as RoleApi from '@/api/system/role' | |
| 133 | import * as DeptApi from '@/api/system/dept' | |
| 134 | import * as PostApi from '@/api/system/post' | |
| 135 | import * as UserApi from '@/api/system/user' | |
| 136 | import * as UserGroupApi from '@/api/bpm/userGroup' | |
| 137 | import ProcessExpressionDialog from './ProcessExpressionDialog.vue' | |
| 138 | import { ProcessExpressionVO } from '@/api/bpm/processExpression' | |
| 139 | ||
| 140 | defineOptions({ name: 'UserTask' }) | |
| 141 | const props = defineProps({ | |
| 142 | id: String, | |
| 143 | type: String | |
| 144 | }) | |
| 145 | const userTaskForm = ref({ | |
| 146 | candidateStrategy: undefined, // 分配规则 | |
| 147 | candidateParam: [] // 分配选项 | |
| 148 | }) | |
| 149 | const bpmnElement = ref() | |
| 150 | const bpmnInstances = () => (window as any)?.bpmnInstances | |
| 151 | ||
| 152 | const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表 | |
| 153 | const deptTreeOptions = ref() // 部门树 | |
| 154 | const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表 | |
| 155 | const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表 | |
| 156 | const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表 | |
| 157 | ||
| 158 | const resetTaskForm = () => { | |
| 159 | const businessObject = bpmnElement.value.businessObject | |
| 160 | if (!businessObject) { | |
| 161 | return | |
| 162 | } | |
| 163 | if (businessObject.candidateStrategy != undefined) { | |
| 164 | userTaskForm.value.candidateStrategy = parseInt(businessObject.candidateStrategy) as any | |
| 165 | } else { | |
| 166 | userTaskForm.value.candidateStrategy = undefined | |
| 167 | } | |
| 168 | if (businessObject.candidateParam && businessObject.candidateParam.length > 0) { | |
| 169 | if (userTaskForm.value.candidateStrategy === 60) { | |
| 170 | // 特殊：流程表达式，只有一个 input 输入框 | |
| 171 | userTaskForm.value.candidateParam = [businessObject.candidateParam] | |
| 172 | } else { | |
| 173 | userTaskForm.value.candidateParam = businessObject.candidateParam | |
| 174 | .split(',') | |
| 175 | .map((item) => +item) | |
| 176 | } | |
| 177 | } else { | |
| 178 | userTaskForm.value.candidateParam = [] | |
| 179 | } | |
| 180 | } | |
| 181 | ||
| 182 | /** 更新 candidateStrategy 字段时，需要清空 candidateParam，并触发 bpmn 图更新 */ | |
| 183 | const changeCandidateStrategy = () => { | |
| 184 | userTaskForm.value.candidateParam = [] | |
| 185 | updateElementTask() | |
| 186 | } | |
| 187 | ||
| 188 | /** 选中某个 options 时候，更新 bpmn 图 */ | |
| 189 | const updateElementTask = () => { | |
| 190 | bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), { | |
| 191 | candidateStrategy: userTaskForm.value.candidateStrategy, | |
| 192 | candidateParam: userTaskForm.value.candidateParam.join(',') | |
| 193 | }) | |
| 194 | } | |
| 195 | ||
| 196 | // 打开监听器弹窗 | |
| 197 | const processExpressionDialogRef = ref() | |
| 198 | const openProcessExpressionDialog = async () => { | |
| 199 | processExpressionDialogRef.value.open() | |
| 200 | } | |
| 201 | const selectProcessExpression = (expression: ProcessExpressionVO) => { | |
| 202 | userTaskForm.value.candidateParam = [expression.expression] | |
| 203 | updateElementTask() | |
| 204 | } | |
| 205 | ||
| 206 | watch( | |
| 207 | () => props.id, | |
| 208 | () => { | |
| 209 | bpmnElement.value = bpmnInstances().bpmnElement | |
| 210 | nextTick(() => { | |
| 211 | resetTaskForm() | |
| 212 | }) | |
| 213 | }, | |
| 214 | { immediate: true } | |
| 215 | ) | |
| 216 | ||
| 217 | onMounted(async () => { | |
| 218 | // 获得角色列表 | |
| 219 | roleOptions.value = await RoleApi.getSimpleRoleList() | |
| 220 | // 获得部门列表 | |
| 221 | const deptOptions = await DeptApi.getSimpleDeptList() | |
| 222 | deptTreeOptions.value = handleTree(deptOptions, 'id') | |
| 223 | // 获得岗位列表 | |
| 224 | postOptions.value = await PostApi.getSimplePostList() | |
| 225 | // 获得用户列表 | |
| 226 | userOptions.value = await UserApi.getSimpleUserList() | |
| 227 | // 获得用户组列表 | |
| 228 | userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList() | |
| 229 | }) | |
| 230 | ||
| 231 | onBeforeUnmount(() => { | |
| 232 | bpmnElement.value = null | |
| 233 | }) | |
| 234 | </script> | |
