TaskFormDetail.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <template>
  2. <view>
  3. <u-subsection
  4. :list="procInsId?['表单信息', '流转记录']:['表单信息']"
  5. mode="button"
  6. :fontSize="16"
  7. :current="tabIndex"
  8. @change="tabSelect"
  9. ></u-subsection>
  10. <view v-show="0 === tabIndex">
  11. <scroll-view scroll-y>
  12. <component :formReadOnly="formReadOnly" :class="formReadOnly?'readonly':''" ref="form" :businessId="businessId" :is="form"></component>
  13. <PreviewForm :formData="formData" v-if="formType !== '2'" :processDefinitionId="procDefId" :edit="false" ref="form"></PreviewForm>
  14. <u-gap height="40" bgColor="#fff"></u-gap>
  15. </scroll-view>
  16. </view>
  17. <view v-show="1 === tabIndex">
  18. <view class="padding">
  19. <view class="cu-timeline" :key="index" v-for="(act, index) in historicTaskList">
  20. <view class="cu-time">{{act.histIns.startTime |formatDate('MM-DD')}}</view>
  21. <view class="cu-item text-blue">
  22. <view class="content">
  23. <view class="cu-capsule radius">
  24. <view class="cu-tag bg-cyan">{{act.histIns.activityName}}</view>
  25. <!-- <view class="cu-tag line-cyan">{{act.histIns.activityName}}</view> -->
  26. </view>
  27. <view class="margin-top">
  28. 审批人 : {{act.assigneeName}}
  29. </view>
  30. <view class="margin-top">
  31. 办理状态 :<view class="cu-tag bg-blue">{{act.comment.status}}</view>
  32. </view>
  33. <view class="margin-top">
  34. 审批意见 : {{act.comment.message}}
  35. </view>
  36. <view class="margin-top">
  37. 开始时间 : {{act.histIns.startTime |formatDate}}
  38. </view>
  39. <view class="margin-top">
  40. 结束时间 : {{act.histIns.endTime |formatDate}}
  41. </view>
  42. <view class="margin-top">
  43. 用时 : {{act.durationTime || '0秒'}}
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. import userSelect from '@/components/user-select/user-select.vue'
  54. import PreviewForm from '../form/GenerateFlowableForm'
  55. import TestActivitiLeaveForm from '@/pages/test/activiti/TestActivitiLeaveForm.vue'
  56. import taskService from "@/api/flowable/taskService"
  57. import formService from "@/api/flowable/formService"
  58. export default {
  59. onLoad: function (option) {
  60. this.flow = JSON.parse(decodeURIComponent(option.flow));
  61. this.procDefId = this.flow.procDefId
  62. this.procDefKey = this.flow.procDefKey
  63. this.formType = this.flow.formType
  64. this.formUrl = this.flow.formUrl
  65. this.taskId = this.flow.taskId
  66. this.taskDefKey = this.flow.taskDefKey
  67. this.status = this.flow.status
  68. this.title = this.flow.formTitle
  69. this.businessId = this.flow.businessId
  70. this.procInsId = this.flow.procInsId
  71. this.formReadOnly = true
  72. uni.setNavigationBarTitle({
  73. title: this.title
  74. });
  75. },
  76. async mounted () {
  77. if (this.formType === '2') { //外置表单
  78. if (this.formUrl === '/404') {
  79. this.form = null
  80. uni.showToast({ title: '没有关联流程表单!', icon: "none" });
  81. } else {
  82. // uniapp 不支持动态组件,所以通过名称匹配决定调用的表单组件
  83. if(this.formUrl.endsWith('TestActivitiLeaveForm')){
  84. this.form = TestActivitiLeaveForm
  85. }else{
  86. uni.showToast({ title: '没有关联流程表单!', icon: "none" });
  87. }
  88. }
  89. } else { // 动态表单
  90. // 读取流程表单
  91. if (this.formUrl === '/404') {
  92. uni.showToast({ title: '没有关联流程表单!', icon: "none" });
  93. } else {
  94. let data = await formService.getMobileForm(this.formUrl);
  95. // 初始化动态表单
  96. data.forEach((item)=>{
  97. item.writable = true //挂载 writable,readable,value 属性,是为了触发对这三个属性的监听
  98. item.readable = true
  99. if(this.isObjectValue(item)){
  100. item.value = null
  101. }else{
  102. item.value = ''
  103. }
  104. let input = JSON.parse(JSON.stringify(item))
  105. this.formData.push(input)
  106. })
  107. // 读取任务表单配置
  108. let res = await formService.getHistoryTaskFormData({ processInstanceId: this.procInsId, procDefId: this.procDefId, taskDefKey: this.taskDefKey })
  109. this.setData(res, 'audit')
  110. }
  111. }
  112. // 读取历史任务列表
  113. taskService.historicTaskList(this.procInsId).then((data) => {
  114. this.historicTaskList = data.reverse()
  115. })
  116. },
  117. components:{
  118. userSelect,
  119. TestActivitiLeaveForm,
  120. PreviewForm
  121. },
  122. data() {
  123. return {
  124. flow: null,
  125. tabIndex: 0,
  126. form: null,
  127. formType: '',
  128. formUrl: '',
  129. taskSelectedTab: 'frist',
  130. historicTaskList: [],
  131. procDefId: '',
  132. procInsId: '',
  133. formReadOnly: false,
  134. procDefKey: '',
  135. taskId: '',
  136. formData: [],
  137. taskDefKey: '',
  138. status: '',
  139. title: '',
  140. businessId: ''
  141. }
  142. },
  143. methods:{
  144. tabSelect (index) {
  145. this.tabIndex = index;
  146. },
  147. // 为任务表单赋值
  148. setData (taskFormData, status) {
  149. this.formData.forEach((input)=>{
  150. let item = taskFormData.filter((item)=>{
  151. if(input.model === item.id){
  152. return true
  153. }else{
  154. return false
  155. }
  156. })[0]
  157. if(item){
  158. if(this.isObjectValue(input)){
  159. if(item.value && typeof item.value=== 'string'){
  160. input.value = JSON.parse(item.value)
  161. }else {
  162. input.value = item.value
  163. }
  164. }else{
  165. input.value = item.value
  166. }
  167. input.readable = item.readable
  168. input.writable = false
  169. }else{
  170. input.readable = false
  171. }
  172. })
  173. },
  174. // 判断数据类型是否是非String类型
  175. isObjectValue (input) {
  176. if(input.type === 'checkbox' ||
  177. input.type === 'slider' ||
  178. input.type === 'switch' ||
  179. input.type === 'rate' ||
  180. input.type === 'imgupload' ||
  181. input.type === 'select' && input.options.multiple ||
  182. input.type === 'fileupload'){
  183. return true
  184. }
  185. return false
  186. }
  187. }
  188. }
  189. </script>