detail.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
  1. <template>
  2. <ContentWrap>
  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="small">{{ 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. <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. />
  54. <XButton
  55. pre-icon="ep:position"
  56. type="primary"
  57. title="委派"
  58. @click="handleDelegate(item)"
  59. />
  60. <XButton pre-icon="ep:back" type="warning" title="委派" @click="handleBack(item)" />
  61. </div>
  62. </el-col>
  63. </el-card>
  64. <!-- 申请信息 -->
  65. <el-card class="box-card" v-loading="processInstanceLoading">
  66. <template #header>
  67. <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
  68. </template>
  69. <!-- 情况一:流程表单 -->
  70. <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="16" :offset="6">
  71. <form-create
  72. ref="fApi"
  73. :rule="detailForm.rule"
  74. :option="detailForm.option"
  75. v-model="detailForm.value"
  76. />
  77. </el-col>
  78. <!-- 情况二:流程表单 -->
  79. <div v-if="processInstance?.processDefinition?.formType === 20">
  80. <router-link
  81. :to="
  82. processInstance.processDefinition.formCustomViewPath +
  83. '?id=' +
  84. processInstance.businessKey
  85. "
  86. >
  87. <XButton type="primary" preIcon="ep:view" title="点击查看" />
  88. </router-link>
  89. </div>
  90. </el-card>
  91. <!-- 审批记录 -->
  92. <el-card class="box-card" v-loading="tasksLoad">
  93. <template #header>
  94. <span class="el-icon-picture-outline">审批记录</span>
  95. </template>
  96. <el-col :span="16" :offset="4">
  97. <div class="block">
  98. <el-timeline>
  99. <el-timeline-item
  100. v-for="(item, index) in tasks"
  101. :key="index"
  102. :icon="getTimelineItemIcon(item)"
  103. :type="getTimelineItemType(item)"
  104. >
  105. <p style="font-weight: 700">任务:{{ item.name }}</p>
  106. <el-card :body-style="{ padding: '10px' }">
  107. <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
  108. 审批人:{{ item.assigneeUser.nickname }}
  109. <el-tag type="info" size="small">{{ item.assigneeUser.deptName }}</el-tag>
  110. </label>
  111. <label style="font-weight: normal" v-if="item.createTime">创建时间:</label>
  112. <label style="color: #8a909c; font-weight: normal">
  113. {{ dayjs(item?.createTime).format('YYYY-MM-DD HH:mm:ss') }}
  114. </label>
  115. <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
  116. 审批时间:
  117. </label>
  118. <label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
  119. {{ dayjs(item?.endTime).format('YYYY-MM-DD HH:mm:ss') }}
  120. </label>
  121. <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
  122. 耗时:
  123. </label>
  124. <label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
  125. {{ formatPast2(item?.durationInMillis) }}
  126. </label>
  127. <p v-if="item.reason">
  128. <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
  129. </p>
  130. </el-card>
  131. </el-timeline-item>
  132. </el-timeline>
  133. </div>
  134. </el-col>
  135. </el-card>
  136. <!-- 高亮流程图 -->
  137. <el-card class="box-card" v-loading="processInstanceLoading">
  138. <template #header>
  139. <span class="el-icon-picture-outline">流程图</span>
  140. </template>
  141. <my-process-viewer
  142. key="designer"
  143. v-model="bpmnXML"
  144. :value="bpmnXML"
  145. v-bind="bpmnControlForm"
  146. :prefix="bpmnControlForm.prefix"
  147. :activityData="activityList"
  148. :processInstanceData="processInstance"
  149. :taskData="tasks"
  150. />
  151. </el-card>
  152. <!-- 对话框(转派审批人) -->
  153. <XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
  154. <el-form
  155. ref="updateAssigneeFormRef"
  156. :model="updateAssigneeForm"
  157. :rules="updateAssigneeRules"
  158. label-width="110px"
  159. >
  160. <el-form-item label="新审批人" prop="assigneeUserId">
  161. <el-select v-model="updateAssigneeForm.assigneeUserId" clearable style="width: 100%">
  162. <el-option
  163. v-for="item in userOptions"
  164. :key="parseInt(item.id)"
  165. :label="item.nickname"
  166. :value="parseInt(item.id)"
  167. />
  168. </el-select>
  169. </el-form-item>
  170. </el-form>
  171. <!-- 操作按钮 -->
  172. <template #footer>
  173. <!-- 按钮:保存 -->
  174. <XButton
  175. type="primary"
  176. :title="t('action.save')"
  177. :loading="updateAssigneeLoading"
  178. @click="submitUpdateAssigneeForm"
  179. />
  180. <!-- 按钮:关闭 -->
  181. <XButton
  182. :loading="updateAssigneeLoading"
  183. :title="t('dialog.close')"
  184. @click="updateAssigneeLoading = false"
  185. />
  186. </template>
  187. </XModal>
  188. </ContentWrap>
  189. </template>
  190. <script setup lang="ts">
  191. import dayjs from 'dayjs'
  192. import * as UserApi from '@/api/system/user'
  193. import * as ProcessInstanceApi from '@/api/bpm/processInstance'
  194. import * as DefinitionApi from '@/api/bpm/definition'
  195. import * as TaskApi from '@/api/bpm/task'
  196. import * as ActivityApi from '@/api/bpm/activity'
  197. import { formatPast2 } from '@/utils/formatTime'
  198. import { setConfAndFields2 } from '@/utils/formCreate'
  199. // import { OptionAttrs } from '@form-create/element-ui/types/config'
  200. import type { ApiAttrs } from '@form-create/element-ui/types/config'
  201. import { useUserStore } from '@/store/modules/user'
  202. const { query } = useRoute() // 查询参数
  203. const message = useMessage() // 消息弹窗
  204. const { t } = useI18n() // 国际化
  205. const { proxy } = getCurrentInstance() as any
  206. // ========== 审批信息 ==========
  207. const id = query.id as unknown as number
  208. const processInstanceLoading = ref(false) // 流程实例的加载中
  209. const processInstance = ref<any>({}) // 流程实例
  210. const runningTasks = ref<any[]>([]) // 运行中的任务
  211. const auditForms = ref<any[]>([]) // 审批任务的表单
  212. const auditRule = reactive({
  213. reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
  214. })
  215. // 处理审批通过和不通过的操作
  216. const handleAudit = async (task, pass) => {
  217. // 1.1 获得对应表单
  218. const index = runningTasks.value.indexOf(task)
  219. const auditFormRef = proxy.$refs['form' + index][0]
  220. // alert(auditFormRef)
  221. // 1.2 校验表单
  222. const elForm = unref(auditFormRef)
  223. if (!elForm) return
  224. const valid = await elForm.validate()
  225. if (!valid) return
  226. // 2.1 提交审批
  227. const data = {
  228. id: task.id,
  229. reason: auditForms.value[index].reason
  230. }
  231. if (pass) {
  232. await TaskApi.approveTask(data)
  233. message.success('审批通过成功')
  234. } else {
  235. await TaskApi.rejectTask(data)
  236. message.success('审批不通过成功')
  237. }
  238. // 2.2 加载最新数据
  239. getDetail()
  240. }
  241. // ========== 申请信息 ==========
  242. const fApi = ref<ApiAttrs>()
  243. const userId = useUserStore().getUser.id // 当前登录的编号
  244. // 流程表单详情
  245. const detailForm = ref({
  246. rule: [],
  247. option: {},
  248. value: {}
  249. })
  250. // ========== 审批记录 ==========
  251. const tasksLoad = ref(true)
  252. const tasks = ref<any[]>([])
  253. const getTimelineItemIcon = (item) => {
  254. if (item.result === 1) {
  255. return 'el-icon-time'
  256. }
  257. if (item.result === 2) {
  258. return 'el-icon-check'
  259. }
  260. if (item.result === 3) {
  261. return 'el-icon-close'
  262. }
  263. if (item.result === 4) {
  264. return 'el-icon-remove-outline'
  265. }
  266. return ''
  267. }
  268. const getTimelineItemType = (item) => {
  269. if (item.result === 1) {
  270. return 'primary'
  271. }
  272. if (item.result === 2) {
  273. return 'success'
  274. }
  275. if (item.result === 3) {
  276. return 'danger'
  277. }
  278. if (item.result === 4) {
  279. return 'info'
  280. }
  281. return ''
  282. }
  283. // ========== 审批记录 ==========
  284. const updateAssigneeVisible = ref(false)
  285. const updateAssigneeLoading = ref(false)
  286. const updateAssigneeForm = ref({
  287. id: undefined,
  288. assigneeUserId: undefined
  289. })
  290. const updateAssigneeRules = ref({
  291. assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
  292. })
  293. const updateAssigneeFormRef = ref()
  294. const userOptions = ref<any[]>([])
  295. // 处理转派审批人
  296. const handleUpdateAssignee = (task) => {
  297. // 设置表单
  298. resetUpdateAssigneeForm()
  299. updateAssigneeForm.value.id = task.id
  300. // 设置为打开
  301. updateAssigneeVisible.value = true
  302. }
  303. // 提交转派审批人
  304. const submitUpdateAssigneeForm = async () => {
  305. // 1. 校验表单
  306. const elForm = unref(updateAssigneeFormRef)
  307. if (!elForm) return
  308. const valid = await elForm.validate()
  309. if (!valid) return
  310. // 2.1 提交审批
  311. updateAssigneeLoading.value = true
  312. try {
  313. await TaskApi.updateTaskAssignee(updateAssigneeForm.value)
  314. // 2.2 设置为隐藏
  315. updateAssigneeVisible.value = false
  316. // 加载最新数据
  317. getDetail()
  318. } finally {
  319. updateAssigneeLoading.value = false
  320. }
  321. }
  322. // 重置转派审批人表单
  323. const resetUpdateAssigneeForm = () => {
  324. updateAssigneeForm.value = {
  325. id: undefined,
  326. assigneeUserId: undefined
  327. }
  328. updateAssigneeFormRef.value?.resetFields()
  329. }
  330. /** 处理审批退回的操作 */
  331. const handleDelegate = async (task) => {
  332. message.error('暂不支持【委派】功能,可以使用【转派】替代!')
  333. console.log(task)
  334. }
  335. /** 处理审批退回的操作 */
  336. const handleBack = async (task) => {
  337. message.error('暂不支持【退回】功能!')
  338. // 可参考 http://blog.wya1.com/article/636697030/details/7296
  339. // const data = {
  340. // id: task.id,
  341. // assigneeUserId: 1
  342. // }
  343. // backTask(data).then(response => {
  344. // this.$modal.msgSuccess("回退成功!");
  345. // this.getDetail(); // 获得最新详情
  346. // });
  347. console.log(task)
  348. }
  349. // ========== 高亮流程图 ==========
  350. const bpmnXML = ref(null)
  351. const bpmnControlForm = ref({
  352. prefix: 'flowable'
  353. })
  354. const activityList = ref([])
  355. // ========== 初始化 ==========
  356. onMounted(() => {
  357. // 加载详情
  358. getDetail()
  359. // 加载用户的列表
  360. UserApi.getListSimpleUsersApi().then((data) => {
  361. userOptions.value.push(...data)
  362. })
  363. })
  364. const getDetail = () => {
  365. // 1. 获得流程实例相关
  366. processInstanceLoading.value = true
  367. ProcessInstanceApi.getProcessInstanceApi(id)
  368. .then((data) => {
  369. if (!data) {
  370. message.error('查询不到流程信息!')
  371. return
  372. }
  373. processInstance.value = data
  374. // 设置表单信息
  375. const processDefinition = data.processDefinition
  376. if (processDefinition.formType === 10) {
  377. setConfAndFields2(
  378. detailForm,
  379. processDefinition.formConf,
  380. processDefinition.formFields,
  381. data.formVariables
  382. )
  383. nextTick().then(() => {
  384. fApi.value?.btn.show(false)
  385. fApi.value?.resetBtn.show(false)
  386. fApi.value?.btn.disabled(true)
  387. })
  388. }
  389. // 加载流程图
  390. DefinitionApi.getProcessDefinitionBpmnXMLApi(processDefinition.id).then((data) => {
  391. bpmnXML.value = data
  392. })
  393. // 加载活动列表
  394. ActivityApi.getActivityList({
  395. processInstanceId: data.id
  396. }).then((data) => {
  397. activityList.value = data
  398. })
  399. })
  400. .finally(() => {
  401. processInstanceLoading.value = false
  402. })
  403. // 2. 获得流程任务列表(审批记录)
  404. tasksLoad.value = true
  405. runningTasks.value = []
  406. auditForms.value = []
  407. TaskApi.getTaskListByProcessInstanceId(id)
  408. .then((data) => {
  409. // 审批记录
  410. tasks.value = []
  411. // 移除已取消的审批
  412. data.forEach((task) => {
  413. if (task.result !== 4) {
  414. tasks.value.push(task)
  415. }
  416. })
  417. // 排序,将未完成的排在前面,已完成的排在后面;
  418. tasks.value.sort((a, b) => {
  419. // 有已完成的情况,按照完成时间倒序
  420. if (a.endTime && b.endTime) {
  421. return b.endTime - a.endTime
  422. } else if (a.endTime) {
  423. return 1
  424. } else if (b.endTime) {
  425. return -1
  426. // 都是未完成,按照创建时间倒序
  427. } else {
  428. return b.createTime - a.createTime
  429. }
  430. })
  431. // 需要审核的记录
  432. tasks.value.forEach((task) => {
  433. // 1.1 只有待处理才需要
  434. if (task.result !== 1) {
  435. return
  436. }
  437. // 1.2 自己不是处理人
  438. if (!task.assigneeUser || task.assigneeUser.id !== userId) {
  439. return
  440. }
  441. // 2. 添加到处理任务
  442. runningTasks.value.push({ ...task })
  443. auditForms.value.push({
  444. reason: ''
  445. })
  446. })
  447. })
  448. .finally(() => {
  449. tasksLoad.value = false
  450. })
  451. }
  452. </script>
  453. <style lang="scss">
  454. .my-process-designer {
  455. height: calc(100vh - 200px);
  456. }
  457. .box-card {
  458. width: 100%;
  459. margin-bottom: 20px;
  460. }
  461. </style>