123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194 |
- <template>
- <view>
- <u-subsection
- :list="procInsId?['表单信息', '流转记录']:['表单信息']"
- mode="button"
- :fontSize="16"
- :current="tabIndex"
- @change="tabSelect"
- ></u-subsection>
- <view v-show="0 === tabIndex">
- <scroll-view scroll-y>
- <component :formReadOnly="formReadOnly" :class="formReadOnly?'readonly':''" ref="form" :businessId="businessId" :is="form"></component>
- <PreviewForm :formData="formData" v-if="formType !== '2'" :processDefinitionId="procDefId" :edit="false" ref="form"></PreviewForm>
- <u-gap height="40" bgColor="#fff"></u-gap>
- </scroll-view>
- </view>
- <view v-show="1 === tabIndex">
- <view class="padding">
-
- <view class="cu-timeline" :key="index" v-for="(act, index) in historicTaskList">
- <view class="cu-time">{{act.histIns.startTime |formatDate('MM-DD')}}</view>
- <view class="cu-item text-blue">
- <view class="content">
- <view class="cu-capsule radius">
- <view class="cu-tag bg-cyan">{{act.histIns.activityName}}</view>
- <!-- <view class="cu-tag line-cyan">{{act.histIns.activityName}}</view> -->
- </view>
-
- <view class="margin-top">
- 审批人 : {{act.assigneeName}}
- </view>
- <view class="margin-top">
- 办理状态 :<view class="cu-tag bg-blue">{{act.comment.status}}</view>
- </view>
- <view class="margin-top">
- 审批意见 : {{act.comment.message}}
- </view>
- <view class="margin-top">
- 开始时间 : {{act.histIns.startTime |formatDate}}
- </view>
- <view class="margin-top">
- 结束时间 : {{act.histIns.endTime |formatDate}}
- </view>
- <view class="margin-top">
- 用时 : {{act.durationTime || '0秒'}}
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import userSelect from '@/components/user-select/user-select.vue'
- import PreviewForm from '../form/GenerateFlowableForm'
- import TestActivitiLeaveForm from '@/pages/test/activiti/TestActivitiLeaveForm.vue'
- import taskService from "@/api/flowable/taskService"
- import formService from "@/api/flowable/formService"
- export default {
- onLoad: function (option) {
- this.flow = JSON.parse(decodeURIComponent(option.flow));
- this.procDefId = this.flow.procDefId
- this.procDefKey = this.flow.procDefKey
- this.formType = this.flow.formType
- this.formUrl = this.flow.formUrl
- this.taskId = this.flow.taskId
- this.taskDefKey = this.flow.taskDefKey
- this.status = this.flow.status
- this.title = this.flow.formTitle
- this.businessId = this.flow.businessId
- this.procInsId = this.flow.procInsId
- this.formReadOnly = true
- uni.setNavigationBarTitle({
- title: this.title
- });
- },
- async mounted () {
- if (this.formType === '2') { //外置表单
- if (this.formUrl === '/404') {
- this.form = null
- uni.showToast({ title: '没有关联流程表单!', icon: "none" });
- } else {
- // uniapp 不支持动态组件,所以通过名称匹配决定调用的表单组件
- if(this.formUrl.endsWith('TestActivitiLeaveForm')){
- this.form = TestActivitiLeaveForm
- }else{
- uni.showToast({ title: '没有关联流程表单!', icon: "none" });
- }
- }
- } else { // 动态表单
- // 读取流程表单
- if (this.formUrl === '/404') {
- uni.showToast({ title: '没有关联流程表单!', icon: "none" });
- } else {
- let data = await formService.getMobileForm(this.formUrl);
- // 初始化动态表单
- data.forEach((item)=>{
- item.writable = true //挂载 writable,readable,value 属性,是为了触发对这三个属性的监听
- item.readable = true
- if(this.isObjectValue(item)){
- item.value = null
- }else{
- item.value = ''
- }
- let input = JSON.parse(JSON.stringify(item))
- this.formData.push(input)
- })
-
- // 读取任务表单配置
- let res = await formService.getHistoryTaskFormData({ processInstanceId: this.procInsId, procDefId: this.procDefId, taskDefKey: this.taskDefKey })
- this.setData(res, 'audit')
-
- }
- }
- // 读取历史任务列表
- taskService.historicTaskList(this.procInsId).then((data) => {
- this.historicTaskList = data.reverse()
- })
- },
- components:{
- userSelect,
- TestActivitiLeaveForm,
- PreviewForm
- },
- data() {
- return {
- flow: null,
- tabIndex: 0,
- form: null,
- formType: '',
- formUrl: '',
- taskSelectedTab: 'frist',
- historicTaskList: [],
- procDefId: '',
- procInsId: '',
- formReadOnly: false,
- procDefKey: '',
- taskId: '',
- formData: [],
- taskDefKey: '',
- status: '',
- title: '',
- businessId: ''
- }
- },
- methods:{
- tabSelect (index) {
- this.tabIndex = index;
- },
- // 为任务表单赋值
- setData (taskFormData, status) {
- this.formData.forEach((input)=>{
- let item = taskFormData.filter((item)=>{
- if(input.model === item.id){
- return true
- }else{
- return false
- }
- })[0]
- if(item){
- if(this.isObjectValue(input)){
- if(item.value && typeof item.value=== 'string'){
- input.value = JSON.parse(item.value)
- }else {
- input.value = item.value
- }
- }else{
- input.value = item.value
- }
- input.readable = item.readable
- input.writable = false
- }else{
- input.readable = false
- }
- })
- },
- // 判断数据类型是否是非String类型
- isObjectValue (input) {
- if(input.type === 'checkbox' ||
- input.type === 'slider' ||
- input.type === 'switch' ||
- input.type === 'rate' ||
- input.type === 'imgupload' ||
- input.type === 'select' && input.options.multiple ||
- input.type === 'fileupload'){
- return true
- }
- return false
- }
- }
- }
- </script>
|