Commit b6d90b2244fcf5e7f0b667d1880db415f5191117
1 parent
06d8ceb1
bpm：流程详情的转派审批人
Showing
4 changed files
with
111 additions
and
181 deletions
yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
| @@ -39,6 +39,18 @@ | @@ -39,6 +39,18 @@ | ||
| 39 | title="通过" | 39 | title="通过" |
| 40 | @click="handleAudit(item, true)" | 40 | @click="handleAudit(item, true)" |
| 41 | /> | 41 | /> |
| 42 | + <XButton | ||
| 43 | + pre-icon="ep:close" | ||
| 44 | + type="danger" | ||
| 45 | + title="不通过" | ||
| 46 | + @click="handleAudit(item, false)" | ||
| 47 | + /> | ||
| 48 | + <XButton | ||
| 49 | + pre-icon="ep:edit" | ||
| 50 | + type="primary" | ||
| 51 | + title="转办" | ||
| 52 | + @click="handleUpdateAssignee(item)" | ||
| 53 | + /> | ||
| 42 | </div> | 54 | </div> |
| 43 | </el-col> | 55 | </el-col> |
| 44 | </el-card> | 56 | </el-card> |
| @@ -116,17 +128,56 @@ | @@ -116,17 +128,56 @@ | ||
| 116 | </div> | 128 | </div> |
| 117 | </el-col> | 129 | </el-col> |
| 118 | </el-card> | 130 | </el-card> |
| 131 | + | ||
| 132 | + <!-- 对话框(转派审批人) --> | ||
| 133 | + <XModal v-model="updateAssigneeVisible" title="转派审批人" width="500"> | ||
| 134 | + <el-form | ||
| 135 | + ref="updateAssigneeFormRef" | ||
| 136 | + :model="updateAssigneeForm" | ||
| 137 | + :rules="updateAssigneeRules" | ||
| 138 | + label-width="110px" | ||
| 139 | + > | ||
| 140 | + <el-form-item label="新审批人" prop="assigneeUserId"> | ||
| 141 | + <el-select v-model="updateAssigneeForm.assigneeUserId" clearable style="width: 100%"> | ||
| 142 | + <el-option | ||
| 143 | + v-for="item in userOptions" | ||
| 144 | + :key="parseInt(item.id)" | ||
| 145 | + :label="item.nickname" | ||
| 146 | + :value="parseInt(item.id)" | ||
| 147 | + /> | ||
| 148 | + </el-select> | ||
| 149 | + </el-form-item> | ||
| 150 | + </el-form> | ||
| 151 | + <!-- 操作按钮 --> | ||
| 152 | + <template #footer> | ||
| 153 | + <!-- 按钮：保存 --> | ||
| 154 | + <XButton | ||
| 155 | + type="primary" | ||
| 156 | + :title="t('action.save')" | ||
| 157 | + :loading="updateAssigneeLoading" | ||
| 158 | + @click="submitUpdateAssigneeForm" | ||
| 159 | + /> | ||
| 160 | + <!-- 按钮：关闭 --> | ||
| 161 | + <XButton | ||
| 162 | + :loading="updateAssigneeLoading" | ||
| 163 | + :title="t('dialog.close')" | ||
| 164 | + @click="updateAssigneeLoading = false" | ||
| 165 | + /> | ||
| 166 | + </template> | ||
| 167 | + </XModal> | ||
| 119 | </ContentWrap> | 168 | </ContentWrap> |
| 120 | </template> | 169 | </template> |
| 121 | <script setup lang="ts"> | 170 | <script setup lang="ts"> |
| 122 | import { getCurrentInstance } from 'vue' | 171 | import { getCurrentInstance } from 'vue' |
| 123 | import dayjs from 'dayjs' | 172 | import dayjs from 'dayjs' |
| 173 | +import * as UserApi from '@/api/system/user' | ||
| 124 | import * as ProcessInstanceApi from '@/api/bpm/processInstance' | 174 | import * as ProcessInstanceApi from '@/api/bpm/processInstance' |
| 125 | import * as TaskApi from '@/api/bpm/task' | 175 | import * as TaskApi from '@/api/bpm/task' |
| 126 | import { formatPast2 } from '@/utils/formatTime' | 176 | import { formatPast2 } from '@/utils/formatTime' |
| 127 | 177 | ||
| 128 | const { query } = useRoute() // 查询参数 | 178 | const { query } = useRoute() // 查询参数 |
| 129 | const message = useMessage() // 消息弹窗 | 179 | const message = useMessage() // 消息弹窗 |
| 180 | +const { t } = useI18n() // 国际化 | ||
| 130 | const { proxy } = getCurrentInstance() | 181 | const { proxy } = getCurrentInstance() |
| 131 | 182 | ||
| 132 | // ========== 审批信息 ========== | 183 | // ========== 审批信息 ========== |
| @@ -216,9 +267,66 @@ const getTimelineItemType = (item) => { | @@ -216,9 +267,66 @@ const getTimelineItemType = (item) => { | ||
| 216 | return '' | 267 | return '' |
| 217 | } | 268 | } |
| 218 | 269 | ||
| 270 | +// ========== 审批记录 ========== | ||
| 271 | +const updateAssigneeVisible = ref(false) | ||
| 272 | +const updateAssigneeLoading = ref(false) | ||
| 273 | +const updateAssigneeForm = ref({ | ||
| 274 | + id: undefined, | ||
| 275 | + assigneeUserId: undefined | ||
| 276 | +}) | ||
| 277 | +const updateAssigneeRules = ref({ | ||
| 278 | + assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }] | ||
| 279 | +}) | ||
| 280 | +const updateAssigneeFormRef = ref() | ||
| 281 | +const userOptions = ref([]) | ||
| 282 | + | ||
| 283 | +// 处理转派审批人 | ||
| 284 | +const handleUpdateAssignee = (task) => { | ||
| 285 | + // 设置表单 | ||
| 286 | + resetUpdateAssigneeForm() | ||
| 287 | + updateAssigneeForm.value.id = task.id | ||
| 288 | + // 设置为打开 | ||
| 289 | + updateAssigneeVisible.value = true | ||
| 290 | +} | ||
| 291 | + | ||
| 292 | +// 提交转派审批人 | ||
| 293 | +const submitUpdateAssigneeForm = async () => { | ||
| 294 | + // 1. 校验表单 | ||
| 295 | + const elForm = unref(updateAssigneeFormRef) | ||
| 296 | + if (!elForm) return | ||
| 297 | + const valid = await elForm.validate() | ||
| 298 | + if (!valid) return | ||
| 299 | + | ||
| 300 | + // 2.1 提交审批 | ||
| 301 | + updateAssigneeLoading.value = true | ||
| 302 | + try { | ||
| 303 | + await TaskApi.updateTaskAssignee(updateAssigneeForm.value) | ||
| 304 | + // 2.2 设置为隐藏 | ||
| 305 | + updateAssigneeVisible.value = false | ||
| 306 | + // 加载最新数据 | ||
| 307 | + getDetail() | ||
| 308 | + } finally { | ||
| 309 | + updateAssigneeLoading.value = false | ||
| 310 | + } | ||
| 311 | +} | ||
| 312 | + | ||
| 313 | +// 重置转派审批人表单 | ||
| 314 | +const resetUpdateAssigneeForm = () => { | ||
| 315 | + updateAssigneeForm.value = { | ||
| 316 | + id: undefined, | ||
| 317 | + assigneeUserId: undefined | ||
| 318 | + } | ||
| 319 | + updateAssigneeFormRef.value?.resetFields() | ||
| 320 | +} | ||
| 321 | + | ||
| 219 | // ========== 初始化 ========== | 322 | // ========== 初始化 ========== |
| 220 | onMounted(() => { | 323 | onMounted(() => { |
| 324 | + // 加载详情 | ||
| 221 | getDetail() | 325 | getDetail() |
| 326 | + // 加载用户的列表 | ||
| 327 | + UserApi.getListSimpleUsersApi().then((data) => { | ||
| 328 | + userOptions.value.push(...data) | ||
| 329 | + }) | ||
| 222 | }) | 330 | }) |
| 223 | 331 | ||
| 224 | const getDetail = () => { | 332 | const getDetail = () => { |
yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="app-container"> | 2 | <div class="app-container"> |
| 3 | 3 | ||
| 4 | - <el-button | ||
| 5 | - icon="el-icon-circle-close" | ||
| 6 | - type="danger" | ||
| 7 | - size="mini" | ||
| 8 | - @click="handleAudit(item, false)" | ||
| 9 | - >不通过</el-button | ||
| 10 | - > | ||
| 11 | - <el-button | ||
| 12 | - icon="el-icon-edit-outline" | ||
| 13 | - type="primary" | ||
| 14 | - size="mini" | ||
| 15 | - @click="handleUpdateAssignee(item)" | ||
| 16 | - >转办</el-button | ||
| 17 | - > | 4 | + |
| 5 | + | ||
| 18 | <el-button | 6 | <el-button |
| 19 | icon="el-icon-edit-outline" | 7 | icon="el-icon-edit-outline" |
| 20 | type="primary" | 8 | type="primary" |
| @@ -44,44 +32,10 @@ | @@ -44,44 +32,10 @@ | ||
| 44 | :taskData="tasks" | 32 | :taskData="tasks" |
| 45 | /> | 33 | /> |
| 46 | </el-card> | 34 | </el-card> |
| 47 | - | ||
| 48 | - <!-- 对话框(转派审批人) --> | ||
| 49 | - <el-dialog title="转派审批人" :visible.sync="updateAssignee.open" width="500px" append-to-body> | ||
| 50 | - <el-form | ||
| 51 | - ref="updateAssigneeForm" | ||
| 52 | - :model="updateAssignee.form" | ||
| 53 | - :rules="updateAssignee.rules" | ||
| 54 | - label-width="110px" | ||
| 55 | - > | ||
| 56 | - <el-form-item label="新审批人" prop="assigneeUserId"> | ||
| 57 | - <el-select v-model="updateAssignee.form.assigneeUserId" clearable style="width: 100%"> | ||
| 58 | - <el-option | ||
| 59 | - v-for="item in userOptions" | ||
| 60 | - :key="parseInt(item.id)" | ||
| 61 | - :label="item.nickname" | ||
| 62 | - :value="parseInt(item.id)" | ||
| 63 | - /> | ||
| 64 | - </el-select> | ||
| 65 | - </el-form-item> | ||
| 66 | - </el-form> | ||
| 67 | - <div slot="footer" class="dialog-footer"> | ||
| 68 | - <el-button type="primary" @click="submitUpdateAssigneeForm">确 定</el-button> | ||
| 69 | - <el-button @click="cancelUpdateAssigneeForm">取 消</el-button> | ||
| 70 | - </div> | ||
| 71 | - </el-dialog> | ||
| 72 | </div> | 35 | </div> |
| 73 | </template> | 36 | </template> |
| 74 | 37 | ||
| 75 | <script> | 38 | <script> |
| 76 | -import { getProcessDefinitionBpmnXML } from "@/api/bpm/definition" | ||
| 77 | -import { DICT_TYPE, getDictOptions } from "@/utils/dict" | ||
| 78 | -import store from "@/store" | ||
| 79 | -import { decodeFields } from "@/utils/formGenerator" | ||
| 80 | -import Parser from '@/components/parser/Parser' | ||
| 81 | -import { getProcessInstanceApi } from "@/api/bpm/processInstance" | ||
| 82 | -import { approveTask, getTaskListByProcessInstanceId, rejectTask, updateTaskAssignee } from "@/api/bpm/task" | ||
| 83 | -import { getListSimpleUsersApi } from "@/api/system/user" | ||
| 84 | -import { getActivityList } from "@/api/bpm/activity" | ||
| 85 | 39 | ||
| 86 | // 流程实例的详情页，可用于审批 | 40 | // 流程实例的详情页，可用于审批 |
| 87 | export default { | 41 | export default { |
| @@ -95,92 +49,10 @@ export default { | @@ -95,92 +49,10 @@ export default { | ||
| 95 | prefix: "flowable" | 49 | prefix: "flowable" |
| 96 | }, | 50 | }, |
| 97 | activityList: [], | 51 | activityList: [], |
| 98 | - | ||
| 99 | - // 转派审批人 | ||
| 100 | - userOptions: [], | ||
| 101 | - updateAssignee: { | ||
| 102 | - open: false, | ||
| 103 | - form: { | ||
| 104 | - assigneeUserId: undefined, | ||
| 105 | - }, | ||
| 106 | - rules: { | ||
| 107 | - assigneeUserId: [{ required: true, message: "新审批人不能为空", trigger: "change" }], | ||
| 108 | - } | ||
| 109 | - }, | ||
| 110 | - | ||
| 111 | - // 数据字典 | ||
| 112 | - categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY), | ||
| 113 | } | 52 | } |
| 114 | }, | 53 | }, |
| 115 | - created () { | ||
| 116 | - this.id = this.$route.query.id | ||
| 117 | - if (!this.id) { | ||
| 118 | - this.$message.error('未传递 id 参数，无法查看流程信息') | ||
| 119 | - return | ||
| 120 | - } | ||
| 121 | - this.getDetail() | ||
| 122 | - | ||
| 123 | - // 获得用户列表 | ||
| 124 | - this.userOptions = [] | ||
| 125 | - getListSimpleUsersApi().then(response => { | ||
| 126 | - this.userOptions.push(...response.data) | ||
| 127 | - }) | ||
| 128 | - }, | ||
| 129 | - methods: { | ||
| 130 | - /** 获得流程实例 */ | ||
| 131 | - getDetail () { | ||
| 132 | - // 获得流程实例相关 | ||
| 133 | - this.processInstanceLoading = true | ||
| 134 | - getProcessInstanceApi(this.id).then(response => { | ||
| 135 | - // 加载流程图 | ||
| 136 | - getProcessDefinitionBpmnXML(this.processInstance.processDefinition.id).then(response => { | ||
| 137 | - this.bpmnXML = response.data | ||
| 138 | - }) | ||
| 139 | - | ||
| 140 | - // 加载活动列表 | ||
| 141 | - getActivityList({ | ||
| 142 | - processInstanceId: this.processInstance.id | ||
| 143 | - }).then(response => { | ||
| 144 | - this.activityList = response.data | ||
| 145 | - }) | ||
| 146 | - }) | ||
| 147 | - }, | ||
| 148 | 54 | ||
| 149 | 55 | ||
| 150 | - /** 处理转派审批人 */ | ||
| 151 | - handleUpdateAssignee (task) { | ||
| 152 | - // 设置表单 | ||
| 153 | - this.resetUpdateAssigneeForm() | ||
| 154 | - this.updateAssignee.form.id = task.id | ||
| 155 | - // 设置为打开 | ||
| 156 | - this.updateAssignee.open = true | ||
| 157 | - }, | ||
| 158 | - /** 提交转派审批人 */ | ||
| 159 | - submitUpdateAssigneeForm () { | ||
| 160 | - this.$refs['updateAssigneeForm'].validate(valid => { | ||
| 161 | - if (!valid) { | ||
| 162 | - return | ||
| 163 | - } | ||
| 164 | - updateTaskAssignee(this.updateAssignee.form).then(response => { | ||
| 165 | - this.$modal.msgSuccess("转派任务成功！") | ||
| 166 | - this.updateAssignee.open = false | ||
| 167 | - this.getDetail() // 获得最新详情 | ||
| 168 | - }) | ||
| 169 | - }) | ||
| 170 | - }, | ||
| 171 | - /** 取消转派审批人 */ | ||
| 172 | - cancelUpdateAssigneeForm () { | ||
| 173 | - this.updateAssignee.open = false | ||
| 174 | - this.resetUpdateAssigneeForm() | ||
| 175 | - }, | ||
| 176 | - /** 重置转派审批人 */ | ||
| 177 | - resetUpdateAssigneeForm () { | ||
| 178 | - this.updateAssignee.form = { | ||
| 179 | - id: undefined, | ||
| 180 | - assigneeUserId: undefined, | ||
| 181 | - } | ||
| 182 | - this.resetForm("updateAssigneeForm") | ||
| 183 | - }, | ||
| 184 | /** 处理审批退回的操作 */ | 56 | /** 处理审批退回的操作 */ |
| 185 | handleDelegate (task) { | 57 | handleDelegate (task) { |
| 186 | this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！") | 58 | this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！") |
| @@ -201,14 +73,3 @@ export default { | @@ -201,14 +73,3 @@ export default { | ||
| 201 | } | 73 | } |
| 202 | }; | 74 | }; |
| 203 | </script> | 75 | </script> |
| 204 | - | ||
| 205 | -<style lang="scss"> | ||
| 206 | -.my-process-designer { | ||
| 207 | - height: calc(100vh - 200px); | ||
| 208 | -} | ||
| 209 | - | ||
| 210 | -.box-card { | ||
| 211 | - width: 100%; | ||
| 212 | - margin-bottom: 20px; | ||
| 213 | -} | ||
| 214 | -</style> |
yudao-ui-admin-vue3/src/views/bpm/processInstance/process.detail.ts deleted
| 1 | -import { reactive } from 'vue' | ||
| 2 | -// import { useI18n } from '@/hooks/web/useI18n' | ||
| 3 | -import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas' | ||
| 4 | -import { DICT_TYPE } from '@/utils/dict' | ||
| 5 | -// const { t } = useI18n() // 国际化 | ||
| 6 | - | ||
| 7 | -// CrudSchema | ||
| 8 | -const crudSchemas = reactive<VxeCrudSchema>({ | ||
| 9 | - primaryKey: 'id', | ||
| 10 | - primaryType: 'id', | ||
| 11 | - primaryTitle: '流程名称', | ||
| 12 | - action: true, | ||
| 13 | - actionWidth: '200px', | ||
| 14 | - columns: [ | ||
| 15 | - { | ||
| 16 | - title: '流程分类', | ||
| 17 | - field: 'category', | ||
| 18 | - dictType: DICT_TYPE.BPM_MODEL_CATEGORY, | ||
| 19 | - dictClass: 'number' | ||
| 20 | - }, | ||
| 21 | - { | ||
| 22 | - title: '流程版本', | ||
| 23 | - field: 'processDefinition.version', | ||
| 24 | - table: { | ||
| 25 | - slots: { | ||
| 26 | - default: 'version_default' | ||
| 27 | - } | ||
| 28 | - } | ||
| 29 | - }, | ||
| 30 | - { | ||
| 31 | - title: '流程描述', | ||
| 32 | - field: 'description' | ||
| 33 | - } | ||
| 34 | - ] | ||
| 35 | -}) | ||
| 36 | -export const { allSchemas } = useVxeCrudSchemas(crudSchemas) |
yudao-ui-admin/src/views/bpm/processInstance/detail.vue
| @@ -163,10 +163,7 @@ export default { | @@ -163,10 +163,7 @@ export default { | ||
| 163 | rules: { | 163 | rules: { |
| 164 | assigneeUserId: [{ required: true, message: "新审批人不能为空", trigger: "change" }], | 164 | assigneeUserId: [{ required: true, message: "新审批人不能为空", trigger: "change" }], |
| 165 | } | 165 | } |
| 166 | - }, | ||
| 167 | - | ||
| 168 | - // 数据字典 | ||
| 169 | - categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY), | 166 | + } |
| 170 | }; | 167 | }; |
| 171 | }, | 168 | }, |
| 172 | created() { | 169 | created() { |