@lambo-design-mobile/workflow-approve 1.0.0-beta.1

package/src/FlowApproval.vue

@@ -0,0 +1,1027 @@
+<template>
+  <div>
+    <van-tabs ref="tabs" style="padding-bottom: 60px" v-model="active" @click="onTabClick" animated>
+      <slot name="business-content"/>
+      <van-tab title="流程信息">
+        <div style="padding: 0 10px">
+          <div v-if="!isDetail">
+            <div class="title-info">
+              <van-icon class="info-icon" style="background-color: #0d88ff" name="cluster-o"/>
+              审批信息
+            </div>
+            <div class="approvalForm-section">
+              <van-cell-group>
+                <van-field
+                    v-model="approvalForm.auditOpinion"
+                    rows="3"
+                    autosize
+                    required
+                    label="审批意见"
+                    type="textarea"
+                    maxlength="50"
+                    placeholder="请输入"
+                    show-word-limit
+                />
+                <div v-if="approvalForm.nextNode!==''">
+                  <van-cell title="下一环节" :value="approvalForm.nextNode"/>
+                  <van-cell @click="nextNodePopupShow = true" title="办理人员" value-class="approvalForm-value"
+                            :value="approvalForm.handlingPersonnel">
+                    <template #right-icon>
+                      <van-icon name="friends-o" size="16" style="line-height: inherit;padding-left: 5px"/>
+                    </template>
+                  </van-cell>
+                  <div class="van-hairline--bottom"></div>
+                </div>
+                <div v-else>
+                  <van-cell title="下一环节" value="无下一环节"/>
+                  <div class="van-hairline--bottom"></div>
+                </div>
+                <div v-if="handleButtons.includes('attachmentFile')">
+                  <upload-file :multiple="true"
+                               :oss-server-context="config.smartFlowServerContext"
+                               :oss-file-put-url="config.ossFilePutUrl"
+                               :oss-file-get-url="config.ossFileGetUrl"
+                               :fileList="fileList"
+                               @upload-result="uploadFile">
+                  </upload-file>
+                </div>
+
+              </van-cell-group>
+            </div>
+          </div>
+          <div>
+            <div class="title-info">
+              <van-icon class="info-icon" style="background-color: #ff7f02" name="orders-o"/>
+              审批记录
+            </div>
+            <div class="approvalForm-records">
+              <van-collapse v-model="activeNames">
+                <van-collapse-item v-for="(items,index) in processHistory" :key="index" :title="items[0].taskName"
+                                   :name="index">
+                  <div v-for="(item,index) in items" :key="index" class="record-item">
+                    <van-cell center>
+                      <template #icon>
+                        <div
+                            v-if="['通过', '跳转指定节点'].includes(getAuditStatus(item.auditResult).text)"
+                            class="completed-icon">
+                          <van-icon class="iconfont" class-prefix='icon' :name=getAuditStatus(item.auditResult).icon
+                                    size="30px" color="#fff"/>
+                        </div>
+                        <div v-else class="pending-icon">
+                          <van-icon class="iconfont" class-prefix='icon' :name=getAuditStatus(item.auditResult).icon
+                                    size="30px" color="#fff"/>
+                        </div>
+                      </template>
+                      <template #title>
+                        <div :style="{ color: getAuditStatus(item.auditResult).color }"
+                             style="font-size: 16px;font-weight: bold;padding:5px 0;">
+                          {{ item.auditName[0] }}
+                        </div>
+                        <div>{{ item.auditOrganName[0] }}
+                          <span v-if="item.auditComment" @click="showAuditDetail(item.auditComment)">
+                          | 审批意见 <van-icon name="comment-circle-o"/>
+                          </span>
+                        </div>
+                      </template>
+                      <template #label>
+                        <div>{{ item.startDate }}{{ item.auditDate }}</div>
+                      </template>
+                      <template #default>
+                        <span :style="{ color: getAuditStatus(item.auditResult).color }">{{
+                            getAuditStatus(item.auditResult).text
+                          }}</span>
+                      </template>
+                    </van-cell>
+                    <div v-if="index !== items.length - 1" class="van-hairline--bottom"></div>
+                  </div>
+                </van-collapse-item>
+
+              </van-collapse>
+            </div>
+          </div>
+          <div v-if="handleButtons.includes('attachmentFile')">
+            <div class="title-info">
+              <van-icon class="info-icon" style="background-color: #029ea0" name="link-o"/>
+              查看附件
+            </div>
+            <div v-if="files.length > 0">
+              <div class="attachments">
+                <div v-for="item in files" :key="item.name">
+                  <van-cell style="margin-bottom: 20px;"
+                            center>
+                    <template v-slot:icon>
+                      <div class="file-icon" :style="{ backgroundColor: getBackgroundColor(item.fileName) }">
+                        {{ getFileIconText(item.fileName) }}
+                      </div>
+                    </template>
+                    <template v-slot:title>
+                      <div style="font-size: 15px;font-weight: bold;padding:5px 0;
+                            word-wrap: break-word;word-break: break-all; white-space: normal;">
+                        {{ item.fileName }}
+                      </div>
+                      <div style="color: #969799;font-size: 14px;">
+                        {{ item.uploadUserName + ' ' + '|' + ' ' + item.taskName }}
+                      </div>
+                    </template>
+                    <template v-slot:label>
+                      <div>上传时间</div>
+                    </template>
+                    <template v-slot:default>
+                      <span @click="getAttach(item)" class="iconfont icon-cloud-download"
+                            style="font-size: 20px;color: #027efe"></span>
+                    </template>
+                  </van-cell>
+                </div>
+              </div>
+            </div>
+            <div v-else>
+              <van-empty description="暂无附件"/>
+            </div>
+          </div>
+        </div>
+      </van-tab>
+    </van-tabs>
+    <!-- 底部按钮 等其他内容 -->
+    <div>
+      <van-popup v-model="popupShow" style="padding-top: 40px" closeable round position="bottom">
+        <div v-if="handleButtons.includes('auditTo70')" class="popup-option" @click="audit('70')">
+          {{ getAuditButtonStatus(70) }}
+        </div>
+        <div v-if="handleButtons.includes('auditTo40')" class="popup-option highlighted"
+             @click="audit('40')">
+          {{ getAuditButtonStatus(40) }}
+        </div>
+        <div v-if="handleButtons.includes('auditTo90')" class="popup-option" @click="audit('90')">
+          {{ getAuditButtonStatus(90) }}
+        </div>
+        <div v-if="handleButtons.includes('auditTo80')" class="popup-option" @click="audit('80')">
+          {{ getAuditButtonStatus(80) }}
+        </div>
+        <div v-if="handleButtons.includes('auditTo82')" class="popup-option" @click="audit('82')">
+          {{ getAuditButtonStatus(82) }}
+        </div>
+        <div v-if="handleButtons.includes('auditTo50')" class="popup-option" @click="audit('50')">
+          {{ getAuditButtonStatus(50) }}
+        </div>
+      </van-popup>
+      <div class="custom-bottom-bar">
+        <div v-if="!isDetail" class="bar-item" @click="onMore">更多</div>
+        <div class="bar-item" @click="onTrack">流程跟踪</div>
+        <div v-if="!isDetail" class="bar-item approve" @click="audit('30')">{{ getAuditButtonStatus(30) }}</div>
+      </div>
+    </div>
+    <van-popup @click-close-icon="handleSelect('cancel')" v-model="nextNodePopupShow"
+               style="height:70%; background:#f7f8fa;padding-bottom:60px" closeable round
+               position="bottom">
+      <div class="van-nav-bar__content" style="height: 55px">
+        <div class="van-nav-bar__title"> 指定下一环节 办理人员</div>
+      </div>
+      <van-cell-group v-for="(item,index) in nextNodeProcessedData" :key="index"
+                      style="margin-bottom: 10px;" inset>
+        <van-cell title="节点名称" :value="item.name"></van-cell>
+        <van-field name="radio" label="人员类型" input-align="right">
+          <template #input>
+            <van-radio-group v-model="item.personType" direction="horizontal">
+              <van-radio name="assignee">办理人</van-radio>
+              <van-radio name="candidate">候选人</van-radio>
+            </van-radio-group>
+          </template>
+        </van-field>
+        <van-cell v-if="item.personType === 'assignee'" title="办理人"
+                  :value="(item.assignee.name ? item.assignee.name : '未指定') + ':' + (item.assignee.id ? item.assignee.id : '未指定')"
+                  @click="nextNodeHandleIndex=index;selectHandlePopupShow=true;">
+        </van-cell>
+        <van-cell v-if="item.personType === 'candidate'" title="候选人" @click="toggleDetails(index)"
+                  :is-link="true" :arrow-direction="detailsVisible[index] ? 'down' : ''">
+        </van-cell>
+        <div v-if="detailsVisible[index] && item.personType === 'candidate'">
+          <van-cell @click="clickCandidateGroup()" title-style="padding-left:10px" title="候选用户"
+                    :value="(item.candidateGroups?.users ?? []).map(user => user.name).join(',')">
+          </van-cell>
+          <van-cell @click="clickCandidateGroup()" title-style="padding-left:10px" title="候选岗位"
+                    :value="(item.candidateGroups?.positions ?? []).map(position => position.name).join(',')">
+          </van-cell>
+          <van-cell @click="clickCandidateGroup()" title-style="padding-left:10px" title="候选角色"
+                    :value="(item.candidateGroups?.roles ?? []).map(role => role.name).join(',')">
+          </van-cell>
+          <van-cell @click="clickCandidateGroup()" title-style="padding-left:10px" title="候选组织"
+                    :value="(item.candidateGroups?.organs ?? []).map(organ => organ.name).join(',')">
+          </van-cell>
+        </div>
+        <van-cell center title="停留时间">
+          <template #default>
+            <div style="display: flex; align-items: center;">
+              <div style="display: flex; align-items: center; margin-right: 16px;">
+                <van-stepper disable-input button-size="22" min="0" v-model="item.remainDay"/>
+                <span style="margin-left: 4px;">天</span>
+              </div>
+              <div style="display: flex; align-items: center;">
+                <van-stepper disable-input button-size="22" min="0" v-model="item.remainTime"/>
+                <span style="margin-left: 4px;">小时</span>
+              </div>
+            </div>
+          </template>
+        </van-cell>
+        <van-cell title="任务提前">
+          <template #default>
+            <div style="display: flex; align-items: center;">
+              <div style="display: flex; align-items: center; margin-right: 16px;">
+                <van-stepper disable-input button-size="22" min="0" v-model="item.inAdvanceDay"/>
+                <span style="margin-left: 4px;">天</span>
+              </div>
+              <div style="display: flex; align-items: center;">
+                <van-stepper disable-input button-size="22" min="0" v-model="item.inAdvanceTime"/>
+                <span style="margin-left: 4px;">小时</span>
+              </div>
+            </div>
+          </template>
+        </van-cell>
+        <van-field
+            readonly
+            clickable
+            input-align="right"
+            name="picker"
+            :value="(handleTypeList.find(handleType => handleType.value === item.processing) || {}).label"
+            label="处理方式"
+            placeholder="点击选择处理方式"
+            @click="$set(showPicker, index, true)"
+        />
+        <van-popup v-model="showPicker[index]" position="bottom">
+          <van-picker
+              show-toolbar
+              :columns="handleTypeList.map(handleType => handleType.label)"
+              @confirm="(value, selectedIndex) => onHandleTypeConfirm(value, selectedIndex, index)"
+              @cancel="$set(showPicker, index, false)"
+          />
+        </van-popup>
+      </van-cell-group>
+      <div class="custom-bottom-bar">
+        <div class="bar-item" @click="handleSelect('cancel')">重置</div>
+        <div class="bar-item approve" @click="handleSelect('select')">确认</div>
+      </div>
+    </van-popup>
+    <van-popup v-model="selectHandlePopupShow" closeable round position="bottom"
+               :style="{ height: '80%' }" style="background: #f7f8fa">
+      <select-handle @selectHandle="handleSelectResult"></select-handle>
+    </van-popup>
+    <van-dialog v-model="nodeListDialogShow" @confirm="processJumpSpecifiedNode()" @close="nodeListDialogShowClose()"
+                :title="getAuditButtonStatus(auditResult)" show-cancel-button>
+      <van-radio-group v-model="radio">
+        <van-cell-group>
+          <div class="table-header">
+            <div>节点名称</div>
+            <div>节点状态</div>
+            <div>选择</div>
+          </div>
+          <div class="table-row"
+               v-for="(item, index) in nodeList" :key="index"
+               @click="radio = index">
+            <div>{{ item.taskName }}</div>
+            <div>
+              <van-tag v-if="item.auditResult" :type="getAuditStatus(item.auditResult).type">
+                {{ getAuditStatus(item.auditResult).text }}
+              </van-tag>
+              <van-tag type="warning" v-else>
+                待审批
+              </van-tag>
+            </div>
+            <div>
+              <van-radio :name='index'/>
+            </div>
+          </div>
+        </van-cell-group>
+      </van-radio-group>
+    </van-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  audit, config,
+  getAllPreNodes,
+  getAttachmentList,
+  getNextNodes,
+  getNodesBehind,
+  getPreNode,
+  getProcessHis
+} from "../api";
+import {Dialog, Toast} from "vant";
+import UploadFile from '@lambo-design-mobile/upload-file';
+import {flutterUtil} from "./utils/flutterUtil";
+import SelectHandle from "./SelectHandle.vue";
+
+
+export default {
+  computed: {
+    config() {
+      return config
+    }
+  },
+  components: {SelectHandle, UploadFile},
+  props: {
+    //业务表单保存方法
+    businessFormSave: {
+      type: Function,
+      required: false
+    },
+    //按钮执行完毕回调方法
+    executionCompleted: {
+      type: Function,
+      required: false,
+      default: () => {
+      }  // 默认是一个空函数
+    },
+    // 是否是流程详情页面
+    isDetail: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    processTraceRouterName: {
+      type: String,
+      required: true,
+    }
+  },
+  data() {
+    return {
+      auditResult: '',
+      //初始化路由数据
+      taskNode: this.$route.query.taskNode,
+      procId: this.$route.query.procId,
+      instanceId: this.$route.query.instanceId,
+      applyId: this.$route.query.applyId,
+      formUrl: this.$route.query.formUrl,
+      taskId: this.$route.query.taskId,
+      handleButtons: this.$route.query.handleButtons,
+
+      approvalForm: {
+        auditOpinion: '',
+        nextNode: '',
+        handlingPersonnel: '',
+        nodeConfigMaps: '',
+      },
+
+      processHistory: [],
+      tableData: [],
+
+      bpmnViewer: null,
+
+      activeNames: [0],
+      popupShow: false,
+
+      nextNodePopupShow: false,
+      nextNodeHandleIndex: 0,
+      nextNodeProcessedData: [], // 用于存储处理下一节点的数据
+      detailsVisible: {}, // 用于跟踪每个项目的详细内容是否可见
+      handleTypeList: [
+        {
+          value: '00',
+          label: '只预警不处理'
+        },
+        {
+          value: '10',
+          label: '自动同意'
+        },
+        {
+          value: '20',
+          label: '直接终止流程'
+        },
+        {
+          value: '90',
+          label: '自动驳回'
+        }
+      ],
+      handleTypeValue: '',
+      showPicker: {},
+
+      nodeListDialogShow: false,
+      nodeList: [],
+      radio: '',
+
+      selectHandlePopupShow: false,
+
+      active: 0,
+      //给附件列表展示
+      files: [],
+      //文件上传列表
+      fileList: []
+    };
+  },
+  methods: {
+    initData() {
+      this.getProcessHistory();
+      this.getNextNodes();
+      this.getAttachmentList();
+      //设置提示持续时间默认为500ms
+      Toast.setDefaultOptions({duration: 500});
+    },
+    getProcessHistory() {
+      getProcessHis(this.applyId, this.instanceId, this.procId, this.taskId).then(resp => {
+        if (resp.data.code === '200') {
+          this.processHistory = resp.data.data
+        }
+      })
+    },
+    getNextNodes() {
+      getNextNodes(this.procId, this.taskNode).then(resp => {
+        const result = resp.data;
+        if (result.code === '200') {
+          this.nextNodeProcessedData = this.processData(result.data);
+          this.approvalForm.nextNode = result.data.map(node => node.name).join(',');
+          this.approvalForm.handlingPersonnel = result.data
+              .map(node => node.assignee?.name || '未指定')
+              .join(',');
+        }
+      })
+    },
+    processData(data) {
+      return data.map(node => {
+        node.personType = node.assignee ? "assignee" : "candidate";
+        if (node.assignee) {
+          node.candidateGroups = {
+            organs: [],
+            roles: [],
+            positions: [],
+            users: [],
+          }
+        } else {
+          node.assignee = {
+            name: "",
+            id: ""
+          }
+        }
+        if (node.timeLimit) {
+          let expireTime = node.timeLimit.split(";")[0].split(":")[1];
+          let warningTime = node.timeLimit.split(";")[1].split(":")[1];
+          let handleType = node.timeLimit.split(";")[2].split(":")[1];
+          let days = expireTime.slice(0, expireTime.indexOf("D")); //过期天
+          let hourOfDay = expireTime.slice(expireTime.indexOf("D") + 1, expireTime.indexOf("H")); //过期小时
+          let daysWarn = warningTime.slice(0, warningTime.indexOf("D")); //警告天
+          let hourOfDayWarn = warningTime.slice(warningTime.indexOf("D") + 1, warningTime.indexOf("H")); //警告小时
+          node.remainDay = parseInt(days);
+          node.remainTime = parseInt(hourOfDay);
+          node.inAdvanceDay = parseInt(daysWarn);
+          node.inAdvanceTime = parseInt(hourOfDayWarn);
+          node.processing = handleType;
+        } else {
+          node.remainDay = 0;
+          node.remainTime = 0;
+          node.inAdvanceDay = 0;
+          node.inAdvanceTime = 0;
+          node.processing = "00";
+        }
+        return node;
+      });
+    },
+    toggleDetails(index) {
+      this.$set(this.detailsVisible, index, !this.detailsVisible[index]);
+    },
+    onHandleTypeConfirm(selectedLabel, selectedIndex, index) {
+      // 更新 nextNodeProcessedData 为对应的 value
+      this.nextNodeProcessedData[index].processing = this.handleTypeList[selectedIndex].value;
+      // 关闭选择器
+      this.showPicker[index] = false;
+    },
+    clickCandidateGroup() {
+      Toast("请在电脑端指定节点候选人")
+    },
+    formattedCandidateGroupData(candidateGroups) {
+      // 获取ID 并通过分号连接
+      const organIds = candidateGroups.organs.map(organ => organ.id).join(';');
+      const userIds = candidateGroups.users.map(user => user.id).join(';');
+      const positionIds = candidateGroups.positions.map(position => position.id).join(';');
+      const roleIds = candidateGroups.roles.map(role => role.id).join(';');
+      // 拼接成目标格式
+      return `O:${organIds},U:${userIds},P:${positionIds},R:${roleIds},RP:,T:`;
+    },
+    handleSelect(handle) {
+      if (handle === 'select') {
+        //处理审批参数
+        let params = this.nextNodeProcessedData.reduce((acc, item) => {
+          acc[item.id] = {
+            needUpdate: 'true',
+          }
+          if (item.personType === "assignee") {
+            acc[item.id].assignee = item.assignee.id
+          }
+          if (item.personType === "candidate") {
+            acc[item.id].candidateGroup = this.formattedCandidateGroupData(item.candidateGroups)
+          }
+          let timeLimit = 'expireTime:0D0H;warningTime:0D0H;handleType:00'
+          if (!(item.remainDay === 0 && item.remainTime === 0 && item.inAdvanceDay === 0 && item.inAdvanceTime === 0)) {
+            timeLimit = 'expireTime:' + parseInt(item.remainDay) + "D" + parseInt(item.remainTime) + "H" + ";warningTime:" + parseInt(item.inAdvanceDay) + "D" + parseInt(item.inAdvanceTime) + "H;" + "handleType:" + item.processing;
+            acc[item.id].timeLimit = timeLimit
+          } else {
+            acc[item.id].timeLimit = ''
+          }
+          return acc;
+        }, {});
+        this.approvalForm.nodeConfigMaps = JSON.stringify(params)
+        this.approvalForm.handlingPersonnel = this.nextNodeProcessedData
+            .map(node => node.assignee?.name || '未指定')
+            .join(',');
+        this.nextNodePopupShow = false;
+      } else {
+        this.getNextNodes();
+        this.approvalForm.nodeConfigMaps = '';
+        this.nextNodePopupShow = false;
+      }
+    },
+    getAttachmentList() {
+      getAttachmentList(this.procId, this.applyId).then(resp => {
+        if (resp.data.code === '200') {
+          // 将 API 返回的数据赋值给 files
+          this.files = resp.data.data.rows;
+        }
+      });
+    },
+    onTabClick() {
+
+
+    },
+    getBackgroundColor(name) {
+      const ext = name.split('.').pop().toLowerCase();
+      switch (ext) {
+        case 'doc':
+          return '#027efe';
+        case 'docx':
+          return '#027efe';
+        case 'xls':
+          return '#02d1a6';
+        case 'xlsx':
+          return '#02d1a6';
+        case 'pdf':
+          return '#e55d56';
+        default:
+          return 'rgb(180,169,169)';
+      }
+    },
+    getFileIconText(name) {
+      const ext = name.split('.').pop().toLowerCase();
+      if (ext.startsWith('doc')) return 'W';
+      if (ext.startsWith('xls')) return 'X';
+      if (ext === 'pdf') return 'P';
+      return ext.charAt(0).toUpperCase();
+    },
+    getAuditStatus(auditResult) {
+      const statusMap = {
+        '30': {text: '通过', icon: "tongguo", color: '#0d88ff', type: 'success'},
+        '40': {text: '驳回上一节点', icon: "bohui", color: '#ed4014', type: 'danger'},
+        '50': {text: '驳回到原点', icon: "bohui", color: '#ed4014', type: 'danger'},
+        '51': {text: '流程作废', icon: "liuchengzuofei", color: '#ed4014', type: 'danger'},
+        '60': {text: '撤回', icon: "chehui", color: '#ed4014', type: 'warning'},
+        '80': {text: '跳转指定节点', icon: "tiaozhuan", color: '#0d88ff', type: 'primary'},
+        '90': {text: '驳回指定节点', icon: "bohui", color: '#ed4014', type: 'primary'},
+      };
+      return {
+        text: (statusMap[auditResult] && statusMap[auditResult].text) || '待审批',
+        icon: (statusMap[auditResult] && statusMap[auditResult].icon) || 'daishenpi',
+        color: (statusMap[auditResult] && statusMap[auditResult].color) || '#ff9900',
+        type: (statusMap[auditResult] && statusMap[auditResult].type) || 'warning',
+      };
+    },
+    getAuditButtonStatus(auditResult) {
+      let statusMap = {
+        '30': '通过',
+        '40': '驳回上一节点',
+        '50': '直接结束流程',
+        '70': '驳回到原点',
+        '80': '跳转指定节点',
+        '82': '指定他人处理',
+        '90': '驳回指定节点',
+      };
+      return statusMap[auditResult];
+    },
+
+    onMore() {
+      console.log("点击了更多");
+      this.popupShow = true
+    },
+    onTrack() {
+      const routeName = this.processTraceRouterName;
+      this.$router.push({
+        name: routeName,
+        query: {
+          applyId: this.applyId,
+          procId: this.procId,
+        }
+      })
+    },
+    audit(auditResult) {
+      console.log('点击了审批:', auditResult);
+
+      if (this.approvalForm.auditOpinion === '' || this.approvalForm.auditOpinion == null) {
+        if (!this.handleButtons || this.handleButtons.includes('auditOpinion')) {
+          Toast({message: '请输入审批意见', duration: '500'});
+          return
+        } else {
+          this.auditParams.auditOpinion = this.getAuditButtonStatus(self.auditResult);
+        }
+      }
+
+      // on confirm
+      this.auditResult = auditResult
+      this.submit()
+
+      // 关闭弹窗等
+      this.popupShow = false;
+
+    },
+    submit() {
+      let self = this;
+      self.auditParams = {
+        procId: self.procId,
+        applyId: self.applyId,
+        taskId: self.taskId,
+        auditOpinion: self.approvalForm.auditOpinion,
+        auditResult: self.auditResult,
+        nodeConfigMaps: self.approvalForm.nodeConfigMaps,
+
+        fileListStr: JSON.stringify(self.fileList),
+        //字段不清楚 暂不传递
+        params: null,
+      }
+      self.businessFormSave ? self.businessFormSave(self.handleSaveResult) : self.handleSaveResult(true)
+    },
+    handleSaveResult(saveResult) {
+      if (saveResult) {
+        this.executeButtonAction();
+      } else {
+        console.error('保存失败');
+      }
+    },
+
+    executeButtonAction() {
+      const self = this;
+      if (self.auditResult === '82') {
+        // 处理转办逻辑
+        this.selectHandlePopupShow = true;
+      } else if (self.auditResult === '80') {
+        // 处理调转到指定节点逻辑
+        self.getNodesBehind()
+      } else if (self.auditResult === '90') {
+        // 处理驳回到指定节点逻辑
+        self.getAllPreNodes()
+      } else if (self.auditResult === '40') {
+        Dialog.confirm({
+          message: '确定执行：' + self.getAuditButtonStatus(self.auditResult) + ' ?',
+        }).then(() => {
+          // 处理驳回上一节点逻辑
+          getPreNode(self.auditParams).then(function (resp) {
+            let result = resp.data
+            if (result.code === '30010') {
+              Dialog.confirm({
+                title: "提示",
+                message: result.message,
+              }).then(() => {
+                // on confirm
+                self.auditParams.auditResult = '70'
+                self.auditRequest(self.auditParams)
+              }).catch(() => {
+              })
+            } else {
+              self.auditRequest(self.auditParams)
+            }
+          })
+        }).catch(() => {
+          // on cancel
+        });
+      } else {
+        Dialog.confirm({
+          message: '确定执行：' + self.getAuditButtonStatus(self.auditResult) + ' ?',
+        }).then(() => {
+          self.auditRequest(self.auditParams)
+        }).catch(() => {
+          // on cancel
+        });
+      }
+    },
+    showToastLoading(message) {
+      //展示审批加载提示
+      return Toast.loading({
+        duration: 0, // 持续展示 toast
+        forbidClick: true,
+        message: message,
+      })
+    },
+    auditRequest(auditParams) {
+      let self = this
+      let auditResult = {
+        code: self.auditResult,
+        name: self.getAuditStatus(self.auditResult).text
+      }
+      self.showToastLoading('处理审批中');
+      //确认执行审批逻辑
+      audit(auditParams).then((resp) => {  // 使用箭头函数
+        let result = resp.data
+        if (result.code === '200') {
+          if (result.data) {
+            if (Array.isArray(result.data)) {
+              let taskIds = result.data.map(item => item.id).join(',');
+              this.executionCompleted(true, result.data[0].processInstanceId, taskIds, auditResult, self.taskId);
+            } else if (result.data && typeof result.data === 'object') {
+              let taskIds = result.data.id;  // 处理单个对象的情况
+              this.executionCompleted(true, result.data.processInstanceId, taskIds, auditResult, self.taskId);
+            }
+          } else {
+            this.executionCompleted(true, null, null);
+          }
+          Toast.success(result.message);
+        } else if (result.code === '20002') {
+          // 流程结束
+          this.executionCompleted(true, '流程已结束', '流程已结束', auditResult, self.taskId)
+          Toast.success(result.message);
+        } else {
+          this.executionCompleted(false, null, null, auditResult, self.taskId)
+          Toast.fail(result.message);
+        }
+      })
+    },
+    getNodesBehind() {
+      getNodesBehind(this.procId, this.taskId).then(resp => {
+        if (resp.data.code === '200') {
+          if (resp.data.data.length > 0) {
+            this.nodeList = resp.data.data
+            this.nodeListDialogShow = true
+          } else {
+            Toast.fail('当前流程无后续节点')
+          }
+        } else {
+          Toast.fail(resp.data.message)
+        }
+      })
+    },
+    getAllPreNodes() {
+      getAllPreNodes(this.procId, this.taskId).then(resp => {
+        if (resp.data.code === '200') {
+          if (resp.data.data.length > 0) {
+            this.nodeList = resp.data.data
+            this.nodeListDialogShow = true
+          } else {
+            Toast.fail('当前流程无前序节点')
+          }
+        } else {
+          Toast.fail(resp.data.message)
+        }
+      })
+    },
+    nodeListDialogShowClose() {
+      //重置
+      this.nodeListDialogShow = false
+      this.auditResult = '';
+      this.radio = '';
+    },
+    processJumpSpecifiedNode() {
+      const self = this;
+      self.auditParams.targetTaskNode = self.nodeList[self.radio].taskNode;
+      self.auditRequest(self.auditParams)
+    },
+
+    showAuditDetail(auditComment) {
+      Dialog.alert({
+        title: '审批意见',
+        message: auditComment,
+      }).then(() => {
+        // on close
+      });
+    },
+    uploadFile(fileList) {
+      fileList.forEach(item => {
+        console.log(item)
+      })
+    },
+    getAttach(item) {
+      let fjUrl = window.location.origin +
+          // api/smart-flow-server +  /manage/oss/file/get/ + xxx
+          config.smartFlowServerContext + "/manage/oss/file/get/" + item.fileId
+      let fjName = item.fileName
+      flutterUtil.openFile(fjUrl, fjName);
+      //window.open(config.smartFlowServerContext + "/manage/oss/file/get/" + item.fileId, "_blank");
+    },
+    updateActiveTab() {
+      this.$nextTick(() => {
+        const tabsElement = this.$refs.tabs;
+        if (tabsElement) {
+          const numberOfTabs = tabsElement.$el.querySelectorAll('.van-tab').length;
+          this.active = numberOfTabs - 1;
+        }
+      });
+    },
+    handleSelectResult(checkResult) {
+      console.log('Selected result:', checkResult);
+      const self = this;
+      if (this.nextNodePopupShow === true) {
+        console.log("这里是选择办理人")
+        this.nextNodeProcessedData[this.nextNodeHandleIndex].assignee.id = checkResult[0].userId;
+        this.nextNodeProcessedData[this.nextNodeHandleIndex].assignee.name = checkResult[0].userName;
+      } else {
+        console.log("这里是选择转办人")
+        self.auditParams.selectedUserId = checkResult[0].userId;
+        self.auditRequest(self.auditParams);
+      }
+      self.selectHandlePopupShow = false;
+    },
+  },
+  activated() {
+    this.updateActiveTab();
+  },
+  mounted() {
+    this.initData()
+    // 默认选中最后一个tab页
+    this.updateActiveTab();
+  }
+
+};
+</script>
+
+<style scoped>
+@import 'styles/global.css';
+
+::v-deep .van-collapse-item__content {
+  padding: 0 0;
+}
+
+::v-deep .van-uploader__file-name {
+  margin-top: 0;
+}
+
+::v-deep .van-uploader__upload {
+  margin: 0;
+}
+
+/* 自定义标签页文字的样式 */
+::v-deep .van-tab--active .van-tab__text {
+  color: #3478f6; /* 设置激活状态下的文字颜色为蓝色 */
+  font-size: 16px; /* 增大激活状态下的字体大小 */
+}
+
+::v-deep .van-tabs__line {
+  display: none;
+}
+
+.custom-bottom-bar {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  background-color: #fff;
+  padding: 10px 0;
+  border-top: 1px solid #eaeaea;
+  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
+  z-index: 1000;
+}
+
+.bar-item {
+  flex: 1;
+  text-align: center;
+  padding: 10px 0;
+  font-size: 16px;
+  border-radius: 4px;
+}
+
+.bar-item:active {
+  background-color: #e6e6e6; /* 点击时的背景颜色 */
+}
+
+.approve {
+  color: #fff;
+  background: linear-gradient(90deg, #0096FF, #1677FF);
+  border-radius: 9px;
+  margin: 0 20px;
+}
+
+.approve:active {
+  background-color: #1989fa;
+}
+
+.title-info {
+  font-weight: bold;
+  font-size: 14px;
+  padding: 20px 10px;
+}
+
+.completed-icon {
+  width: 45px; /* 自定义宽度 */
+  height: 45px; /* 自定义高度 */
+  background-clip: padding-box; /* 使背景不填充边框 */
+
+  border-radius: 50%;
+  margin-right: 15px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: linear-gradient(90deg, #0096FF, #1677FF);
+  border: 5px solid rgb(229, 244, 255); /* 半透明边框，颜色和背景色相同 */
+}
+
+.pending-icon {
+  width: 45px; /* 自定义宽度 */
+  height: 45px; /* 自定义高度 */
+  background-clip: padding-box; /* 使背景不填充边框 */
+
+  border-radius: 50%;
+  margin-right: 15px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: linear-gradient(90deg, #FF7E00, #FFA200);
+  border: 5px solid rgb(255, 245, 229); /* 半透明边框，颜色和背景色相同 */
+}
+
+.info-icon {
+  display: inline-block;
+  color: white; /* 自定义文字颜色 */
+  padding: 3px 3px; /* 标签内边距 */
+  border-radius: 4px; /* 标签圆角 */
+  font-size: 13px; /* 字体大小 */
+  margin-right: 5px;
+}
+
+.file-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+
+  font-weight: bold;
+  color: white; /* 自定义文字颜色 */
+  padding: 3px 3px; /* 标签内边距 */
+  border-radius: 8px; /* 标签圆角 */
+  font-size: 25px; /* 字体大小 */
+  margin-right: 15px;
+}
+
+.van-cell__value {
+  flex: 0 auto;
+}
+
+.popup-option {
+  padding: 16px;
+  text-align: center;
+  border-bottom: 1px solid #ebebeb;
+  color: #333;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.popup-option:last-child {
+  border-bottom: none;
+}
+
+.popup-option.highlighted {
+  color: #0d88ff;
+  font-weight: bold;
+}
+
+.approvalForm-value {
+  flex: 1;
+  white-space: nowrap; /* 防止文本换行 */
+  overflow: hidden; /* 超出部分隐藏 */
+  text-overflow: ellipsis; /* 用省略号表示被隐藏的文本 */
+}
+
+.popup-content {
+  padding: 16px;
+  font-size: 14px;
+  color: #333;
+  white-space: pre-wrap; /* 保留换行和空格 */
+}
+
+.table-header {
+  display: flex;
+  background-color: #f8f8f8;
+  font-size: 15px;
+}
+
+.table-row {
+  display: flex;
+  border-bottom: 1px solid #ebedf0;
+  font-size: 14px;
+}
+
+.table-header > div,
+.table-row > div {
+  flex: 1;
+  text-align: center;
+  padding: 10px;
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.van-radio {
+  justify-content: center;
+}
+
+::v-deep .van-dialog__header {
+  padding: 10px 0
+}
+
+</style>