Commit 3702fb0c16bb2ef586fa10bde67b6865bad21aa2
1 parent
0aa72b32
bpm：流程详情的审批表单
Showing
2 changed files
with
90 additions
and
93 deletions
yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
| 1 | <template> | 1 | <template> |
| 2 | <ContentWrap> | 2 | <ContentWrap> |
| 3 | - <!-- TODO 审批信息 --> | 3 | + <!-- 审批信息 --> |
| 4 | + <el-card | ||
| 5 | + class="box-card" | ||
| 6 | + v-loading="processInstanceLoading" | ||
| 7 | + v-for="(item, index) in runningTasks" | ||
| 8 | + :key="index" | ||
| 9 | + > | ||
| 10 | + <template #header> | ||
| 11 | + <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span> | ||
| 12 | + </template> | ||
| 13 | + <el-col :span="16" :offset="6"> | ||
| 14 | + <el-form | ||
| 15 | + :ref="'form' + index" | ||
| 16 | + :model="auditForms[index]" | ||
| 17 | + :rules="auditRule" | ||
| 18 | + label-width="100px" | ||
| 19 | + > | ||
| 20 | + <el-form-item label="流程名" v-if="processInstance && processInstance.name"> | ||
| 21 | + {{ processInstance.name }} | ||
| 22 | + </el-form-item> | ||
| 23 | + <el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser"> | ||
| 24 | + {{ processInstance.startUser.nickname }} | ||
| 25 | + <el-tag type="info" size="mini">{{ processInstance.startUser.deptName }}</el-tag> | ||
| 26 | + </el-form-item> | ||
| 27 | + <el-form-item label="审批建议" prop="reason"> | ||
| 28 | + <el-input | ||
| 29 | + type="textarea" | ||
| 30 | + v-model="auditForms[index].reason" | ||
| 31 | + placeholder="请输入审批建议" | ||
| 32 | + /> | ||
| 33 | + </el-form-item> | ||
| 34 | + </el-form> | ||
| 35 | + <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px"> | ||
| 36 | + <XButton | ||
| 37 | + pre-icon="ep:select" | ||
| 38 | + type="success" | ||
| 39 | + title="通过" | ||
| 40 | + @click="handleAudit(item, true)" | ||
| 41 | + /> | ||
| 42 | + </div> | ||
| 43 | + </el-col> | ||
| 44 | + </el-card> | ||
| 4 | 45 | ||
| 5 | <!-- 申请信息 --> | 46 | <!-- 申请信息 --> |
| 6 | <el-card class="box-card" v-loading="processInstanceLoading"> | 47 | <el-card class="box-card" v-loading="processInstanceLoading"> |
| @@ -92,14 +133,16 @@ const processInstanceLoading = ref(false) // 流程实例的加载中 | @@ -92,14 +133,16 @@ const processInstanceLoading = ref(false) // 流程实例的加载中 | ||
| 92 | const processInstance = ref({}) // 流程实例 | 133 | const processInstance = ref({}) // 流程实例 |
| 93 | const runningTasks = ref([]) // 运行中的任务 | 134 | const runningTasks = ref([]) // 运行中的任务 |
| 94 | const auditForms = ref([]) // 审批任务的表单 | 135 | const auditForms = ref([]) // 审批任务的表单 |
| 95 | -// const auditRule = reactive({ | ||
| 96 | -// reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }] | ||
| 97 | -// }) | 136 | +const auditRule = reactive({ |
| 137 | + reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }] | ||
| 138 | +}) | ||
| 98 | 139 | ||
| 99 | // ========== 申请信息 ========== | 140 | // ========== 申请信息 ========== |
| 100 | import { setConfAndFields2 } from '@/utils/formCreate' | 141 | import { setConfAndFields2 } from '@/utils/formCreate' |
| 101 | import { ApiAttrs } from '@form-create/element-ui/types/config' | 142 | import { ApiAttrs } from '@form-create/element-ui/types/config' |
| 143 | +import { useUserStore } from '@/store/modules/user' | ||
| 102 | const fApi = ref<ApiAttrs>() | 144 | const fApi = ref<ApiAttrs>() |
| 145 | +const userId = useUserStore().getUser.id // 当前登录的编号 | ||
| 103 | // 流程表单详情 | 146 | // 流程表单详情 |
| 104 | const detailForm = ref({ | 147 | const detailForm = ref({ |
| 105 | rule: [], | 148 | rule: [], |
| @@ -207,19 +250,21 @@ onMounted(() => { | @@ -207,19 +250,21 @@ onMounted(() => { | ||
| 207 | }) | 250 | }) |
| 208 | 251 | ||
| 209 | // 需要审核的记录 | 252 | // 需要审核的记录 |
| 210 | - // const userId = store.getters.userId | ||
| 211 | - // this.tasks.forEach(task => { | ||
| 212 | - // if (task.result !== 1) { // 只有待处理才需要 | ||
| 213 | - // return | ||
| 214 | - // } | ||
| 215 | - // if (!task.assigneeUser || task.assigneeUser.id !== userId) { // 自己不是处理人 | ||
| 216 | - // return | ||
| 217 | - // } | ||
| 218 | - // this.runningTasks.push({ ...task }) | ||
| 219 | - // this.auditForms.push({ | ||
| 220 | - // reason: '' | ||
| 221 | - // }) | ||
| 222 | - // }) | 253 | + tasks.value.forEach((task) => { |
| 254 | + // 1.1 只有待处理才需要 | ||
| 255 | + if (task.result !== 1) { | ||
| 256 | + return | ||
| 257 | + } | ||
| 258 | + // 1.2 自己不是处理人 | ||
| 259 | + if (!task.assigneeUser || task.assigneeUser.id !== userId) { | ||
| 260 | + return | ||
| 261 | + } | ||
| 262 | + // 2. 添加到处理任务 | ||
| 263 | + runningTasks.value.push({ ...task }) | ||
| 264 | + auditForms.value.push({ | ||
| 265 | + reason: '' | ||
| 266 | + }) | ||
| 267 | + }) | ||
| 223 | }) | 268 | }) |
| 224 | .finally(() => { | 269 | .finally(() => { |
| 225 | tasksLoad.value = false | 270 | tasksLoad.value = false |
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 | - <!-- 审批信息 --> | ||
| 4 | - <el-card | ||
| 5 | - class="box-card" | ||
| 6 | - v-loading="processInstanceLoading" | ||
| 7 | - v-for="(item, index) in runningTasks" | ||
| 8 | - :key="index" | ||
| 9 | - > | ||
| 10 | - <div slot="header" class="clearfix"> | ||
| 11 | - <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span> | ||
| 12 | - </div> | ||
| 13 | - <el-col :span="16" :offset="6"> | ||
| 14 | - <el-form | ||
| 15 | - :ref="'form' + index" | ||
| 16 | - :model="auditForms[index]" | ||
| 17 | - :rules="auditRule" | ||
| 18 | - label-width="100px" | ||
| 19 | - > | ||
| 20 | - <el-form-item label="流程名" v-if="processInstance && processInstance.name"> | ||
| 21 | - {{ processInstance.name }} | ||
| 22 | - </el-form-item> | ||
| 23 | - <el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser"> | ||
| 24 | - {{ processInstance.startUser.nickname }} | ||
| 25 | - <el-tag type="info" size="mini">{{ processInstance.startUser.deptName }}</el-tag> | ||
| 26 | - </el-form-item> | ||
| 27 | - <el-form-item label="审批建议" prop="reason"> | ||
| 28 | - <el-input | ||
| 29 | - type="textarea" | ||
| 30 | - v-model="auditForms[index].reason" | ||
| 31 | - placeholder="请输入审批建议" | ||
| 32 | - /> | ||
| 33 | - </el-form-item> | ||
| 34 | - </el-form> | ||
| 35 | - <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px"> | ||
| 36 | - <el-button | ||
| 37 | - icon="el-icon-edit-outline" | ||
| 38 | - type="success" | ||
| 39 | - size="mini" | ||
| 40 | - @click="handleAudit(item, true)" | ||
| 41 | - >通过</el-button | ||
| 42 | - > | ||
| 43 | - <el-button | ||
| 44 | - icon="el-icon-circle-close" | ||
| 45 | - type="danger" | ||
| 46 | - size="mini" | ||
| 47 | - @click="handleAudit(item, false)" | ||
| 48 | - >不通过</el-button | ||
| 49 | - > | ||
| 50 | - <el-button | ||
| 51 | - icon="el-icon-edit-outline" | ||
| 52 | - type="primary" | ||
| 53 | - size="mini" | ||
| 54 | - @click="handleUpdateAssignee(item)" | ||
| 55 | - >转办</el-button | ||
| 56 | - > | ||
| 57 | - <el-button | ||
| 58 | - icon="el-icon-edit-outline" | ||
| 59 | - type="primary" | ||
| 60 | - size="mini" | ||
| 61 | - @click="handleDelegate(item)" | ||
| 62 | - >委派</el-button | ||
| 63 | - > | ||
| 64 | - <el-button | ||
| 65 | - icon="el-icon-refresh-left" | ||
| 66 | - type="warning" | ||
| 67 | - size="mini" | ||
| 68 | - @click="handleBack(item)" | ||
| 69 | - >退回</el-button | ||
| 70 | - > | ||
| 71 | - </div> | ||
| 72 | - </el-col> | ||
| 73 | - </el-card> | ||
| 74 | - | ||
| 75 | 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 | + > | ||
| 18 | + <el-button | ||
| 19 | + icon="el-icon-edit-outline" | ||
| 20 | + type="primary" | ||
| 21 | + size="mini" | ||
| 22 | + @click="handleDelegate(item)" | ||
| 23 | + >委派</el-button | ||
| 24 | + > | ||
| 25 | + <el-button | ||
| 26 | + icon="el-icon-refresh-left" | ||
| 27 | + type="warning" | ||
| 28 | + size="mini" | ||
| 29 | + @click="handleBack(item)" | ||
| 30 | + >退回</el-button | ||
| 31 | + > | ||
| 76 | 32 | ||
| 77 | <!-- 高亮流程图 --> | 33 | <!-- 高亮流程图 --> |
| 78 | <el-card class="box-card" v-loading="processInstanceLoading"> | 34 | <el-card class="box-card" v-loading="processInstanceLoading"> |
| @@ -124,7 +80,6 @@ import { decodeFields } from "@/utils/formGenerator" | @@ -124,7 +80,6 @@ import { decodeFields } from "@/utils/formGenerator" | ||
| 124 | import Parser from '@/components/parser/Parser' | 80 | import Parser from '@/components/parser/Parser' |
| 125 | import { getProcessInstanceApi } from "@/api/bpm/processInstance" | 81 | import { getProcessInstanceApi } from "@/api/bpm/processInstance" |
| 126 | import { approveTask, getTaskListByProcessInstanceId, rejectTask, updateTaskAssignee } from "@/api/bpm/task" | 82 | import { approveTask, getTaskListByProcessInstanceId, rejectTask, updateTaskAssignee } from "@/api/bpm/task" |
| 127 | -import { getDate } from "@/utils/dateUtils" | ||
| 128 | import { getListSimpleUsersApi } from "@/api/system/user" | 83 | import { getListSimpleUsersApi } from "@/api/system/user" |
| 129 | import { getActivityList } from "@/api/bpm/activity" | 84 | import { getActivityList } from "@/api/bpm/activity" |
| 130 | 85 | ||
| @@ -190,9 +145,6 @@ export default { | @@ -190,9 +145,6 @@ export default { | ||
| 190 | }) | 145 | }) |
| 191 | }) | 146 | }) |
| 192 | }, | 147 | }, |
| 193 | - getDateStar (ms) { | ||
| 194 | - return getDate(ms) | ||
| 195 | - }, | ||
| 196 | 148 | ||
| 197 | /** 处理审批通过和不通过的操作 */ | 149 | /** 处理审批通过和不通过的操作 */ |
| 198 | handleAudit (task, pass) { | 150 | handleAudit (task, pass) { |