You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

294 lines
10 KiB

  1. <template>
  2. <view class="page">
  3. <!-- 顶部页签 -->
  4. <l-nav v-model="tab" :items="['表单信息', '流程信息']" type="flex" class="solid-bottom" />
  5. <!-- Tab #1:表单页 -->
  6. <view v-if="ready && tab === 0" class="form">
  7. <!-- 表单 -->
  8. <l-customform :initFormValue="formValue" :editMode="editMode" :scheme="scheme" rel="rel" ref="form" />
  9. <!-- 操作区按钮 -->
  10. <l-workflow-action
  11. @audit="audit"
  12. @action="action"
  13. :type="type"
  14. :currentNode="currentNode"
  15. :currentTask="currentTask"
  16. />
  17. </view>
  18. <!-- Tab #2:流程图页 -->
  19. <view v-if="ready && tab === 1" class="progress"><l-workflow-timeline :processList="processList" /></view>
  20. </view>
  21. </template>
  22. <script>
  23. import get from 'lodash/get'
  24. import pick from 'lodash/pick'
  25. import workflowFormMixins from '../workflow.js'
  26. export default {
  27. data() {
  28. return {
  29. tab: 0,
  30. editMode: false,
  31. type: 'view',
  32. ready: false,
  33. code: null,
  34. currentTask: null,
  35. taskId: null,
  36. processList: [],
  37. processId: null,
  38. processInfo: null,
  39. currentNode: null,
  40. scheme: [],
  41. formValue: {},
  42. rel: {}
  43. }
  44. },
  45. mixins: [workflowFormMixins],
  46. async onLoad({ type }) {
  47. await this.init(type)
  48. },
  49. // 小程序专有,分享任务到聊天
  50. // #ifdef MP
  51. onShareAppMessage() {
  52. const props = ['F_Id', 'F_Title', 'F_TaskId', 'F_ProcessId', 'F_IsStart', 'F_IsFinished', 'F_EnabledMark']
  53. const taskInfo = { ...pick(this.currentTask, props), mark: 'pre' }
  54. // 获取页面参数
  55. const queryString = this.MP_SHARE_ENCODE(taskInfo, { type: this.type })
  56. return {
  57. title: `${this.GET_GLOBAL('loginUser').realName}发起的${this.currentTask.F_Title}工作流程`,
  58. desc: '我发起了一个工作流程,快来看看吧',
  59. path: `pages/home?${queryString}`
  60. }
  61. },
  62. // #endif
  63. methods: {
  64. // 页面初始化
  65. async init(type = 'view') {
  66. // type 表示打开方式:view=查看普通流程,child=子流程,refer=审阅
  67. // 当前任务相关信息用 GET_PARAM 获取
  68. // 需要字段: F_Title、F_Id、F_TaskId、F_ProcessId、F_IsFinished、F_IsStart、F_EnabledMark
  69. // 需要字段: mark (是 my 或者不是,表示是否自「我的」列打开)
  70. this.type = type
  71. this.currentTask = this.GET_PARAM()
  72. this.LOADING('加载表单中…')
  73. this.SET_TITLE(this.currentTask.F_Title)
  74. // 未完成的子流程,可以编辑
  75. if (get(this.currentTask, 'mark') !== 'maked' && this.type === 'child') {
  76. this.editMode = true
  77. }
  78. // 如果是代办任务是可编辑的
  79. if (get(this.currentTask, 'mark') === 'pre' ) {
  80. this.editMode = true
  81. }
  82. // 获得流程信息
  83. this.processId = this.currentTask.F_Id
  84. this.taskId = this.currentTask.F_TaskId
  85. this.processInfo = await this.fetchProcessInfo({
  86. processId: this.processId,
  87. taskId: this.taskId
  88. })
  89. this.currentNode = this.getCurrentNode(this.processInfo)
  90. this.processList = get(this.processInfo, 'info.TaskLogList', [])
  91. // wfForms 的数组成员 t,表示表单数据项(TAB页)
  92. // t.formId 使用表单,根据这个 formId 来获取 scheme 等信息
  93. // t.appurl 使用移动页面,直接跳转到本地的页面;表单结构等均写死在页面里
  94. const { wfForms } = this.currentNode
  95. console.log(wfForms);
  96. // 处理没有有效表单的情况,停止加载
  97. if (!wfForms || wfForms.every(t => !t.formId && !t.appurl)) {
  98. this.HIDE_LOADING()
  99. this.TOAST('移动表单数据(wfForms)中无有效表单')
  100. return
  101. }
  102. // 处理移动端本地表单(也就是系统表单)的情况,直接跳转过去
  103. const appSysPage = wfForms.find(t => t.appurl)
  104. if (this.type !== 'child' && appSysPage) {
  105. this.sysFormJump(appSysPage.appurl, {
  106. currentNode: this.currentNode,
  107. currentTask: this.currentTask,
  108. logList: this.processList
  109. })
  110. return
  111. }
  112. if (this.type === 'child') {
  113. // 发起子流程的场合
  114. // 获取子流程的流程信息,提取出时间线和表单模板 code
  115. const childProcessInfo = await this.fetchProcessInfo({ processId: this.processId })
  116. this.processList = get(childProcessInfo, 'info.TaskLogList', [])
  117. this.code = this.currentNode.childFlow
  118. // 提取出子流程 Id;因为是发起新的流程,所以 processInfo 只传入表单模板 code
  119. const childProcessId = this.processInfo.info.childProcessId
  120. const childCurrentNode = this.getCurrentNode(await this.fetchProcessInfo({ code: this.code }))
  121. // 处理系统表单跳转,使用子流程相关信息
  122. if (appSysPage) {
  123. this.sysFormJump(appSysPage.appurl, {
  124. currentNode: this.currentNode,
  125. currentTask: this.currentTask,
  126. parentProcessId: this.processId,
  127. logList: this.processList
  128. })
  129. return
  130. }
  131. const schemeData = await this.fetchSchemeData(childCurrentNode)
  132. const formData = await this.fetchFormData(childCurrentNode, childProcessId)
  133. const { formValue, scheme, rel, options } = await this.getCustomForm({
  134. formData,
  135. schemeData,
  136. currentNode: childCurrentNode,
  137. processId: childProcessId,
  138. code: this.code,
  139. useDefault: true
  140. })
  141. this.scheme = scheme
  142. this.formValue = formValue
  143. this.rel = rel
  144. } else {
  145. // 不是子流程,可以直接渲染
  146. const schemeData = await this.fetchSchemeData(this.currentNode)
  147. const formData = await this.fetchFormData(this.currentNode, this.processId)
  148. console.log(schemeData)
  149. console.log(formData)
  150. const { formValue, scheme, rel } = await this.getCustomForm({
  151. formData,
  152. schemeData,
  153. currentNode: this.currentNode,
  154. processId: this.processId,
  155. code: null
  156. })
  157. this.scheme = scheme
  158. console.log(scheme)
  159. this.formValue = formValue
  160. this.rel = rel
  161. }
  162. this.ready = true
  163. this.HIDE_LOADING()
  164. },
  165. // 跳转到系统表单页面
  166. sysFormJump(url, param) {
  167. this.HIDE_LOADING()
  168. this.TOAST('跳转至移动端本地表单(即系统表单)')
  169. let pagePath = url || ''
  170. if (!pagePath.startsWith('/pages')) {
  171. pagePath = '/pages' + pagePath
  172. }
  173. this.JUMP_TO(`${pagePath}?type=${this.type}`, param, true)
  174. },
  175. // 点击操作按钮(非审批类按钮)
  176. async action(taskType) {
  177. switch (taskType) {
  178. // 点击「催办」/「撤销流程」/「标记已阅」按钮
  179. case 'urge':
  180. case 'revoke':
  181. case 'refer':
  182. const actionText = { urge: '催办', revoke: '撤销', refer: '已阅' }[taskType]
  183. const actionUrl = { urge: '/urge', revoke: '/revoke', refer: '/refer' }[taskType]
  184. let actionData = this.processId
  185. if (taskType === 'refer') {
  186. actionData = { processId: this.processId, taskId: this.taskId }
  187. }
  188. if (!(await this.CONFIRM(`${actionText}确认`, `确定要提交${actionText}吗?`, true))) {
  189. return
  190. }
  191. this.LOADING(`提交${actionText}中…`)
  192. this.HTTP_POST(`/newwf${actionUrl}`, actionData, `提交${actionText}失败`).then(success => {
  193. this.HIDE_LOADING()
  194. if (success) {
  195. this.EMIT('task-list-change')
  196. this.TOAST(`成功提交${actionText}`, 'success')
  197. if (taskType === 'revoke') {
  198. this.NAV_BACK()
  199. }
  200. }
  201. })
  202. break
  203. // 点击「提交草稿」按钮
  204. case 'draft':
  205. if (!(await this.CONFIRM('提交确认', '确定要提交草稿吗?', true))) {
  206. return
  207. }
  208. this.LOADING('正在提交…')
  209. const draftFormValue = this.$refs.form.getFormValue()
  210. const draftPostData = await this.getPostData(draftFormValue, this.scheme)
  211. this.HTTP_POST('/newwf​/draft', draftPostData, '提交草稿失败').then(success => {
  212. this.HIDE_LOADING()
  213. if (success) {
  214. this.EMIT('task-list-change')
  215. this.NAV_BACK()
  216. this.TOAST('草稿已保存', 'success')
  217. }
  218. })
  219. break
  220. // 点击「发起流程」按钮
  221. case 'submit':
  222. const verifyResult = this.$refs.form.verifyValue()
  223. if (verifyResult.length > 0) {
  224. this.CONFIRM('表单验证失败', verifyResult.join('\n'))
  225. return
  226. }
  227. if (!(await this.CONFIRM('提交确认', '确定要发起流程吗?', true))) {
  228. return
  229. }
  230. this.LOADING('正在提交…')
  231. const formValue = this.$refs.form.getFormValue()
  232. const postData = await this.getPostData(formValue, this.scheme)
  233. postData.auditors = JSON.stringify({})
  234. if (this.type === 'child') {
  235. postData.parentProcessId = this.processId
  236. postData.parentTaskId = this.taskId
  237. }
  238. const errorTips = '流程发起失败'
  239. this.HTTP_POST('/newwf/createchildflow', postData, errorTips).then(success => {
  240. this.HIDE_LOADING()
  241. if (success) {
  242. this.EMIT('task-list-change')
  243. this.NAV_BACK()
  244. this.TOAST('流程发起成功', 'success')
  245. }
  246. })
  247. break
  248. default:
  249. break
  250. }
  251. },
  252. // 点击审批相关按钮
  253. async audit(action) {
  254. this.LOADING('加载中…')
  255. const currentTask = this.processInfo.task.find(t => t.F_NodeId === this.currentNode.id)
  256. const postData = await this.getPostData(this.formValue, this.scheme)
  257. const pageParam = {
  258. type: 'sign',
  259. processId: currentTask.F_ProcessId,
  260. taskId: currentTask.F_Id,
  261. formreq: postData.formreq,
  262. taskName: this.currentTask.F_Title
  263. }
  264. // 不是加签
  265. if (action.code !== '__sign__') {
  266. Object.assign(pageParam, action)
  267. pageParam.type = 'verify'
  268. pageParam.auditors = JSON.stringify({})
  269. pageParam.isFromSignAudit = Number(this.currentTask.F_TaskType) === 3
  270. }
  271. this.HIDE_LOADING()
  272. this.NAV_TO('./sign', pageParam, true)
  273. }
  274. }
  275. }
  276. </script>