hrp-ui-base 1.0.0 → 1.0.2

package/packages/approval-process/packages/flow/examine-approve.vue

@@ -0,0 +1,1065 @@
+<!-- 审批页面 适配移动端并且要有插槽，同时对插槽的数据可以进行读取 -->
+<template>
+  <div class="examine-big-box">
+    <div class="page-box" v-if="!haveSubmit">
+      <!-- 顶部标题状态id部门等信息 -->
+      <div class="page-inner-box"
+        :style="(((buttonList && Array.isArray(buttonList) && buttonList.length > 0) || formBaseInfo.ifUrging) ? { height: 'calc(100% - 80px)' } : { height: '100%' })">
+        <div class="inner-page-top-box" v-if="props.taskId && props.taskId !== 'importData'">
+          <div class="inner-page-top-dept-top flex-row-start-center">
+            <el-icon style="font-size: 16px;cursor: pointer;" @click="backList">
+              <ArrowLeft />
+            </el-icon>
+            <div class="submit-back" @click="backList">返回</div>
+            <div class="inner-page-divide"></div>
+            <div class="inner-page-top-dept-title">{{ props.formTitle ? props.formTitle : '审批单' }}
+            </div>
+          </div>
+          <div class="inner-page-top-header-box flex-column-start">
+            <!-- 头像以及标题部分 -->
+            <div class="top-header-name-left flex-row-start-center">
+              <img :src="formBaseInfo.formUserAvatar" alt="头像" v-if="formBaseInfo.formUserAvatar">
+              <img src="hrp-ui-base/assets/process/defaultAvatar.png" alt="" v-else>
+              <div class="top-header-name-left-name">{{ formBaseInfo.formUser }}提交的{{ props.formTitle ? props.formTitle
+                : '' }}</div>
+            </div>
+            <div class="header-status-box flex-row-start">
+
+              <div class="flex-column-start header-statu-item">
+                <div class="header-item-name">当前状态</div>
+                <div class="header-item-button-value" :style="formBaseInfo.nodeStatus == '审批中' || formBaseInfo.nodeStatus == '已被拒'
+                  ?
+                  {
+                    'background-color': 'rgba(255, 146, 0, .12)',
+                    'color': '#ff9200'
+                  } : {
+                    'background-color': 'rgba(0,176,66,.12)',
+                    'color': '#00b042'
+                  }">{{ formBaseInfo.nodeStatus }}</div>
+              </div>
+
+              <div class="flex-column-start header-statu-item">
+                <div class="header-item-name">发起人</div>
+                <el-tooltip effect="dark" :content="formBaseInfo.formUser" placement="left">
+                  <div class="header-item-value "> {{ formBaseInfo.formUser + (formBaseInfo.agentUserName ? '（由' +
+                    formBaseInfo.agentUserName + '代提交）' : '') }}</div>
+                </el-tooltip>
+              </div>
+
+              <div class="flex-column-start header-statu-item">
+                <div class="header-item-name">表单id</div>
+
+                <el-tooltip effect="dark" :content="props.formId" placement="left">
+                  <div class="header-item-value ">{{ props.formId }}</div>
+                </el-tooltip>
+
+              </div>
+              <!-- 单据打印 -->
+              <div style="position: absolute;right: 0;top: 0;"
+                v-if="props.showPrint && formBaseInfo.nodeStatus === '已通过'">
+                <el-button type="primary" @click="openOrderPrint" icon="Printer">单据打印</el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="inner-page-box">
+          <!-- 中部表单盒子 -->
+          <div class="inner-page-item">
+            <div class="formBox">
+              <slot></slot>
+            </div>
+          </div>
+          <!-- 审批流盒子 -->
+          <div class="process-box" v-if="props.taskId && props.taskId !== 'importData'">
+            <div class="inner-page-item-header" @click="ceshiactive">审批进度</div>
+            <div class="processBox">
+              <el-timeline>
+                <el-timeline-item v-for="(item, index) in activities" :key="index"
+                  :type="item.nodeStatus ? 'primary' : 'info'" size="large">
+                  <div class="timeLineTtem flexRowStart" style="flex-wrap: nowrap;">
+                    <div style="min-width:40px;width:40px;min-height:40px;height:40px;margin-right: 12px;">
+                      <img :src="item.userList[0].avatar" alt="头像"
+                        v-if="item.userList && Array.isArray(item.userList) && item.userList.length == 1 && item.userList[0].avatar">
+                      <img src="hrp-ui-base/assets/process/defaultAvatar.png" alt="头像"
+                        v-else-if="item.userList && Array.isArray(item.userList) && item.userList.length == 1 && !item.userList[0].avatar">
+                      <div class="flexRowAroundWrap imgbox" v-else>
+                        <img src="hrp-ui-base/assets/process/manyPeople2.png" alt="头像"
+                          style="margin-right: 0;width: 35px;height: 25px;" />
+                      </div>
+                    </div>
+
+                    <div class="flexColumnStart porcessTime">
+                      <div class="flexRowStart">
+                        <div class="porcessTimeNodeNameBig">{{ item.nodeName }}</div>
+                        <!-- 节点状态 节点长度为1时 -->
+                        <div class="porcessTimeNodeName"
+                          v-if="item.userList && Array.isArray(item.userList) && item.userList.length == 1"
+                          :style="item.userList[0].result == '同意' ? { color: '#66bc5c', 'font-weight': 600 } : { color: '#9b9b9b' }">
+                          {{ item.userList[0].result ? item.userList[0].result : '待处理' }}
+                        </div>
+                        <!-- 节点状态 节点长度>1时 -->
+                        <div class="porcessTimeNodeName"
+                          v-if="item.userList && Array.isArray(item.userList) && item.userList.length > 1"
+                          :style="item.nodeStatus == '已完成' ? { color: '#66bc5c', 'font-weight': 600 } : { color: '#9b9b9b' }">
+                          {{ item.nodeStatus ? item.nodeStatus : '待处理' }}
+                        </div>
+                      </div>
+                      <div class="flexRowStart " style="width:100%">
+                        <!-- 审批人的名字 或 N位审批人 -->
+                        <div class="porcessTimeName flexRowStart" style="width: max-content;">
+                          {{
+                            item.userList && Array.isArray(item.userList) &&
+                              item.userList.length > 1 ? item.userList.length + '位' + (item.nodeType ==
+                                'Approver' ? '审批人' : item.nodeType == 'Ccto' ? '抄送人' : item.nodeType ==
+                                  'Executor' ? '执行人' : '') : item.userList && Array.isArray(item.userList) &&
+                                    item.userList.length > 0 ?
+                              item.userList[0].userName :
+                              ''
+                          }}
+                        </div>
+                        <div class="porcessTimeNodeStatus" :style="{ color: '#ff9200' }"
+                          v-if="item.userList && item.userList.length > 1 && item.multipleAuditType && (item.nodeType == 'Approver' || item.nodeType == 'Executor')">
+                          {{
+                            '（' + item.multipleAuditType + '）' }}</div>
+                      </div>
+                      <!-- 当节点长度>1 时的 审批处理时间 -->
+                      <div class="porcessTimeTime" v-if="!(item.userList && item.userList.length > 1) && item.nodeTime">
+                        {{ item.nodeTime }}</div>
+
+
+                      <!-- 节点状态 节点长度为0时 无审批处理人 -->
+                      <div class="porcessTimeNodeName"
+                        v-if="(!item.userList) || (item.userList && Array.isArray(item.userList) && item.userList.length == 0)">
+                        {{ "当前节点暂无处理人" }}
+                      </div>
+
+                      <div class="porcessTimeNodeName"
+                        v-if="item.userList && Array.isArray(item.userList) && item.userList.length == 1 && item.userList[0].comments">
+                        {{
+                          item.userList[0].comments ? '审批意见：' + item.userList[0].comments : '审批意见：-' }}</div>
+                      <div class="porcessTimeNodeName"
+                        v-if="item.userList && Array.isArray(item.userList) && item.userList.length == 1 && item.userList[0].operation"
+                        style="color:red">
+                        {{
+                          item.userList[0].operation ? item.userList[0].operation : '-' }}</div>
+                      <ShowSign :src="item.userList[0].signatureUrl" :preview-src-list="[item.userList[0].signatureUrl]"
+                        fit="contain"
+                        v-if="item.userList && Array.isArray(item.userList) && item.userList.length == 1 && item.userList[0].signatureUrl">
+                      </ShowSign>
+
+                      <!-- 子节点 -->
+                      <div class="sonItemBox flexColumnStart"
+                        v-if="item.userList && Array.isArray(item.userList) && item.userList.length > 1">
+                        <div class="sonItem flexRowStart" v-for="(sonItem, sonIndex) in item.userList" :key="sonIndex"
+                          style="flex-wrap: nowarp;width: 100%;">
+                          <div>
+                            <img :src="sonItem.avatar" alt="头像" v-if="sonItem.avatar">
+                            <img src="hrp-ui-base/assets/process/defaultAvatar.png" alt="头像" v-else>
+                          </div>
+                          <div class="flexColumnStart porcessTime">
+                            <div class="flexRowStartCenter">
+                              <div class="porcessTimeName flexRowStart" style="width:max-content;margin-right: 8px;">{{
+                                sonItem.userName }}</div>
+                              <div class="porcessTimeNodeName"
+                                :style="sonItem.result == '同意' ? { color: '#66bc5c' } : sonItem.result == '拒绝' ? { color: '#f89898' } : { color: '#9b9b9b' }">
+                                {{ sonItem.result ? sonItem.result : '待处理' }}</div>
+                            </div>
+                            <div class="porcessTimeTime" v-if="sonItem.submitTime && sonItem.result">{{
+                              sonItem.submitTime }}
+                            </div>
+
+                            <div class="porcessTimeNodeName" v-if="sonItem.comments">
+                              {{ '审批意见：' + sonItem.comments }}</div>
+                            <div class="porcessTimeNodeName" v-if="sonItem.operation" style="color:red">
+                              {{ sonItem.operation }}</div>
+                            <ShowSign :src="sonItem.signatureUrl" :preview-src-list="[sonItem.signatureUrl]"
+                              fit="contain" v-if="sonItem && sonItem.signatureUrl" style="margin-left: 0;">
+                            </ShowSign>
+                          </div>
+
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </el-timeline-item>
+              </el-timeline>
+
+            </div>
+          </div>
+          <!-- 评论功能 -->
+          <CommentAreaComponent ref="CommentAreaComponentRef" :formId="props.formId" v-show="formBaseInfo.ifComment">
+          </CommentAreaComponent>
+          <!-- <div style="height:80px" v-if="((formBaseInfo.auditorStatus ||formBaseInfo.ifUrging ) && props.taskId && props.taskId !== 'importData' && !haveSubmit)"></div> -->
+        </div>
+      </div>
+
+      <div class="submit-button-box"
+        v-if="((formBaseInfo.auditorStatus || formBaseInfo.ifUrging) && props.taskId && props.taskId !== 'importData' && !haveSubmit)">
+        <div class="audit-button-agree-refuse-box" style="width:150px">
+          <!-- 审批人 -->
+          <el-button type="primary" size="default" @click="openDialog('1')"
+            v-if="((formBaseInfo.nodeType == 'Approver' || formBaseInfo.nodeType == 'Executor' || formBaseInfo.nodeType == 'Create') && buttonList.some(item => item.buttonType == '同意' || item.buttonType == 'agree'))">{{
+              buttonList.find((item: any) => item.buttonType === '同意' || item.buttonType === 'agree')?.buttonShowName
+            }}</el-button>
+          <el-button size="default" @click="openDialog('2')"
+            v-if="formBaseInfo.nodeType == 'Approver' && buttonList.some(item => item.buttonType === '拒绝')">{{
+              buttonList.find((item: any) => { return item.buttonType === '拒绝' })?.buttonShowName
+            }}</el-button>
+        </div>
+        <div class="audit-button-left-box">
+          <!-- 催办 -->
+          <div class="column-button-item" v-if="formBaseInfo.ifUrging" @click="openUrgeDialog">
+            <el-icon size="30">
+              <Bell />
+            </el-icon>
+            <span>催办</span>
+          </div>
+          <!-- 撤销 -->
+          <div class="column-button-item" @click="buttonRevoke"
+            v-if="buttonList.some(item => item.buttonType === 'revoke')">
+            <el-icon size="30">
+              <RefreshLeft />
+            </el-icon>
+            <span>{{buttonList.find((item: any) => {
+              return item.buttonType === 'revoke'
+            })?.buttonShowName }}</span>
+          </div>
+          <!-- 转交 -->
+          <div class="column-button-item" @click="openDialog('3')"
+            v-if="((formBaseInfo.nodeType == 'Approver' || formBaseInfo.nodeType == 'Executor') && buttonList.some(item => item.buttonType === '转交'))">
+            <el-icon size="30">
+              <Avatar />
+            </el-icon>
+            <span>{{buttonList.find((item: any) => {
+              return item.buttonType === '转交'
+            })?.buttonShowName
+              }}</span>
+          </div>
+          <!-- 退回 -->
+          <div class="column-button-item" @click="openDialog('4')"
+            v-if="((formBaseInfo.nodeType == 'Approver' || formBaseInfo.nodeType == 'Executor') && buttonList.some(item => item.buttonType === '退回'))">
+            <el-icon size="30">
+              <Back />
+            </el-icon>
+            <span>{{buttonList.find((item: any) => {
+              return item.buttonType === '退回'
+            })?.buttonShowName
+              }}</span>
+          </div>
+
+
+
+
+        </div>
+      </div>
+
+    </div>
+
+    <ApproveSuccess v-if="haveSubmit" @next="nextAudit" @backList="backList"></ApproveSuccess>
+    <!-- centerDialogVisible -->
+    <el-dialog v-model="centerDialogVisible" :width="isPc ? '40%' : '800'" center
+      :style="isPc ? { width: '800px' } : { width: '200px' }" :title="'审批'"
+      v-if="isPc && currentPageWidth && currentPageWidth >= 800">
+      <div class="flexColumnStart processPcAuditCurrentPageBox">
+        <div v-if="dialogType == '3'">{{ '转交对象' }}</div>
+        <ChooseMember v-model="transmittedObj" :multiple="false" v-if="dialogType == '3'"></ChooseMember>
+        <div v-if="dialogType == '4'">{{ '退回节点' }}</div>
+        <div v-if="dialogType == '4'">
+          <div class="my-2 flex items-center text-sm">
+            <el-radio-group v-model="backTaskId" class=" ml-4 flexColumnStart">
+              <el-radio :value="item.nodeId" size="default" v-for="(item, index) in finishTaskList" :key="item.nodeId"
+                :label="item.nodeId" style="margin-top:8px">
+                <div class="flexRowStartCenter">
+                  <div>{{ item.nodeName ? item.nodeName : "-" }}</div>
+                  <div v-if="item.userList && Array.isArray(item.userList) && item.userList.length == 1"
+                    style="width:30px;height: 30px;margin: 0 18px;"><img :src="item.userList[0].avatar"
+                      style="width:30px;height: 30px;border-radius: 8px;" alt=""></div>
+
+                  <div v-if="item.userList && Array.isArray(item.userList) && item.userList.length > 1"
+                    style="width:30px;height: 30px;margin:0 18px;"><img src="hrp-ui-base/assets/process/manyPeople2.png"
+                      style="width: 35px;height: 25px;border-radius: 8px;" alt=""></div>
+                  <div>{{ getNames(item.userList) }}</div>
+                  <div v-if="item.userList && Array.isArray(item.userList) && item.userList.length > 1"
+                    style="margin-left:18px">{{ '多人审批方式：' + item.multipleAuditType }}</div>
+                </div>
+              </el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+        <div>{{ dialogType == '3' ? '转交理由' : dialogType == '4' ? '退回意见' : '审批意见' }}</div>
+        <el-input v-model="textarea" type="textarea" placeholder="请输入..." style="width:100%" autosize maxlength="200"
+          show-word-limit />
+        <div v-if="props.formBaseInfo && props.formBaseInfo.ifSignature">签名：</div>
+        <SignConmpent ref="signConmpentRef" v-model="uploadImg" v-if="props.formBaseInfo && props.formBaseInfo.ifSignature"
+          @uploadUploadImgId="uploadUploadImgId" :uploadImgId="uploadImgId">
+        </SignConmpent>
+        <!-- 同意推荐回复区域 -->
+        <div class="recommend-reply-section" v-if="dialogType == '1' && agreeRecommendReplyList.length > 0">
+          <div class="recommend-reply-title">推荐回复</div>
+          <div class="recommend-reply-list">
+            <span
+              class="recommend-reply-item"
+              v-for="(reply, index) in agreeRecommendReplyList"
+              :key="index"
+              @click="handleRecommendReplyClick(reply)"
+            >{{ reply }}</span>
+          </div>
+        </div>
+        <!-- 拒绝推荐回复区域 -->
+        <div class="recommend-reply-section" v-if="dialogType == '2' && refuseRecommendReplyList.length > 0">
+          <div class="recommend-reply-title">推荐回复</div>
+          <div class="recommend-reply-list">
+            <span
+              class="recommend-reply-item"
+              v-for="(reply, index) in refuseRecommendReplyList"
+              :key="index"
+              @click="handleRecommendReplyClick(reply)"
+            >{{ reply }}</span>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="centerDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitResult">
+            确认
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <van-popup v-model:show="centerDialogVisible" position="bottom"
+      :style="{ height: '80%', padding: '20px', width: '100%' }"
+      v-if="!isPc || !currentPageWidth || currentPageWidth < 800">
+      <div class="popupBody">
+
+        <div class="flexColumnStart popupContent">
+          <div v-if="dialogType == '3'">{{ '转交对象' }}</div>
+          <ChooseMemberPhone v-model="transmittedObj" :multiple="false" v-if="dialogType == '3'" :posBottom="0">
+          </ChooseMemberPhone>
+          <div v-if="dialogType == '4'">{{ '退回节点' }}</div>
+          <div v-if="dialogType == '4'">
+            <div class="my-2 flex items-center text-sm">
+              <el-radio-group v-model="backTaskId" class=" ml-4 flexColumnStart">
+                <el-radio :value="item.nodeId" size="default" v-for="(item, index) in finishTaskList" :key="item.nodeId"
+                  :label="item.nodeId" style="margin-top:8px">
+                  <div class="flexRowStartCenter">
+                    <div>{{ item.nodeType ? item.nodeType == 'Approver' ? '审批人节点' : item.nodeType ==
+                      'Executor'
+                      ?
+                      '执行人节点' : item.nodeType == 'Ccto' ? '抄送人节点' : item.nodeType == 'Create' ? '再次提交' :
+                        item.nodeType : '' }}</div>
+                    <div v-if="item.userList && Array.isArray(item.userList) && item.userList.length == 1"
+                      style="width:30px;height: 30px;margin: 0 18px;"><img :src="item.userList[0].avatar"
+                        style="width:30px;height: 30px;border-radius: 8px;" alt=""></div>
+
+                    <div v-if="item.userList && Array.isArray(item.userList) && item.userList.length > 1"
+                      style="width:30px;height: 30px;margin:0 18px;"><img src="hrp-ui-base/assets/process/manyPeople2.png"
+                        style="width: 35px;height: 25px;border-radius: 8px;" alt=""></div>
+                    <div>{{ getNames(item.userList) }}</div>
+                    <div v-if="item.userList && Array.isArray(item.userList) && item.userList.length > 1"
+                      style="margin-left:18px">{{ '多人审批方式：' + item.multipleAuditType }}</div>
+                  </div>
+                </el-radio>
+              </el-radio-group>
+            </div>
+          </div>
+          <div style="position:sticky;top:0;z-index:10;background:#fff;padding-bottom:8px;width:100%;">
+            <div>{{ dialogType == '3' ? '转交理由' : dialogType == '4' ? '退回意见' : '审批意见' }}</div>
+            <el-input v-model="textarea" type="textarea" placeholder="请输入..." style="width:100%" autosize maxlength="200"
+              show-word-limit />
+          </div>
+          <div v-if="props.formBaseInfo && props.formBaseInfo.ifSignature">签名：</div>
+          <SignConmpent v-model="uploadImg" v-if="props.formBaseInfo && props.formBaseInfo.ifSignature"
+            @uploadUploadImgId="uploadUploadImgId" :uploadImgId="uploadImgId">
+          </SignConmpent>
+          <!-- 同意推荐回复区域 -->
+          <div class="recommend-reply-section" v-if="dialogType == '1' && agreeRecommendReplyList.length > 0">
+            <div class="recommend-reply-title">推荐回复</div>
+            <div style="display:flex;flex-wrap:wrap;gap:8px;max-height:150px;overflow-y:auto;">
+              <span 
+                class="recommend-reply-item" 
+                v-for="(reply, index) in agreeRecommendReplyList" 
+                :key="index"
+                @click="handleRecommendReplyClick(reply)"
+              >{{ reply }}</span>
+            </div>
+          </div>
+          <!-- 拒绝推荐回复区域 -->
+          <div class="recommend-reply-section" v-if="dialogType == '2' && refuseRecommendReplyList.length > 0">
+            <div class="recommend-reply-title">推荐回复</div>
+            <div style="display:flex;flex-wrap:wrap;gap:8px;max-height:150px;overflow-y:auto;">
+              <span 
+                class="recommend-reply-item" 
+                v-for="(reply, index) in refuseRecommendReplyList" 
+                :key="index"
+                @click="handleRecommendReplyClick(reply)"
+              >{{ reply }}</span>
+            </div>
+          </div>
+          <div class="blankBox"></div>
+        </div>
+        <div class="popupbuttonBox flexRowCenter">
+          <el-button @click="centerDialogVisible = false" size="large" style="width:48%">取消</el-button>
+          <el-button type="primary" @click="submitResult" size="large" style="width:48%">
+            确认
+          </el-button>
+        </div>
+      </div>
+    </van-popup>
+    <UrgeDialog ref="UrgeDialogRef" @success="urgeDialogSuccess" :title="formBaseInfo.formUser + '提交的' + (props.formTitle ? props.formTitle
+      : '')"></UrgeDialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, ref, watch, onActivated, PropType } from "vue";
+import { MoreFilled } from '@element-plus/icons-vue'
+import { ElLoading, ElMessage } from "element-plus";
+import { IsPhone } from '../utils/getEnv'
+import ApproveSuccess from "./approve-component/approve-success.vue"
+import _ from "lodash"
+// import RouteParamsError from "./approve-component/route-params-error.vue"
+import SignConmpent from "../components/sign/index.vue"
+import ShowSign from './form-component/show-sign.vue'
+import ChooseMember from './systemCom/choose-member.vue'
+import ChooseMemberPhone from './systemCom/choose-member-phone.vue'
+import UrgeDialog from "../components/urge-dialog/index.vue"
+// import { StorageEnum } from "../enum/system/StorageEnum";
+import throttle from "../utils/throttle";
+// import { getUploadFileMsg } from '../utils/base'
+import CommentAreaComponent from "../components/comment/index.vue"
+/** controller 以及 bo */
+import FlowInstanceController from "hrp-ui-base/api/bms/flow/FlowInstanceController";
+// bo
+import NodeShowVo from "hrp-ui-base/api/bms/flow/bo/NodeShowVo";
+import ReviewBO from "hrp-ui-base/api/bms/flow/bo/ReviewBO";
+import TransmitBO from "hrp-ui-base/api/bms/flow/bo/TransmitBO";
+import InstanceBackBO from "hrp-ui-base/api/bms/flow/bo/InstanceBackBO";
+import AuditBaseInfo from "hrp-ui-base/api/bms/flow/bo/AuditBaseInfo";
+import UserBaseInfoVo from "hrp-ui-base/api/bms/flow/bo/UserBaseInfoVo";
+import FlowSignController from "hrp-ui-base/api/bms/flow/FlowSignController";
+
+const props = defineProps({
+  // 流程节点信息
+  'activities': {
+    type: Array as PropType<any>,
+    required: false,
+    default: () => { return {} }
+  },
+  // 节点任务id
+  'taskId': {
+    type: String,
+    required: false,
+    default: ''
+  },
+  // 表单id
+  'formId': {
+    type: String,
+    required: true,
+    default: ''
+  },
+  // 表单内展示的基础信息
+  'formBaseInfo': {
+    type: Object as PropType<AuditBaseInfo>,
+    required: false,
+    default: () => { return {} }
+  },
+  // 表单提交的原始数据
+  'oldRuleForm': {
+    type: Object as PropType<any>,
+    required: false,
+    default: () => { return {} }
+  },
+  // 表单提交的最新数据
+  'ruleForm': {
+    type: Object as PropType<any>,
+    required: false,
+    default: () => { return {} }
+  },
+  // 当前页面是否经过了表单校验可以提交
+  'canSubmit': {
+    type: Boolean,
+    required: true,
+    default: false
+  },
+  // 当前的表单的标题
+  'formTitle': {
+    type: String,
+    required: false,
+    default: ''
+  },
+  // 当前是否可以编辑
+  'canEdit': {
+    type: Boolean,
+    required: true,
+    default: false
+  },
+  // 提交的审批节点列表信息
+  'submitProcess': {
+    type: Function as PropType<() => Promise<any>>,
+    required: true,
+    default: () => { }
+  },
+  // 返回跳转的列表地址
+  "listPath": {
+    type: String,
+    required: false,
+    default: ''
+  },
+  //是否展示单据打印按钮
+  "showPrint": {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  // 自定义撤销方法，传入后撤销按钮将调用该方法而非默认的流程撤销
+  "customRevoke": {
+    type: Function as PropType<() => void>,
+    required: false,
+    default: null
+  }
+
+})
+
+// validateForm 校验表单的回调  backList 返回列表的方法  nextAudit 跳转下一条的回调
+const emits = defineEmits(['validateForm', 'backList', 'nextAudit', 'openOrderPrint'])
+const nextAudit = (data: any) => {
+  emits('nextAudit', data)
+}
+
+
+const buttonList = ref<{ buttonShowName: string; buttonType: string }[]>([])
+const haveSubmit = ref(false)
+const formBaseInfo = ref<AuditBaseInfo>(new AuditBaseInfo())
+let isPc = !IsPhone()
+// const token111 = localStorage.getItem(StorageEnum.登录鉴权)
+const currentPageWidth = ref<number>()
+const activeName = ref('评论')
+// 1  同意弹窗 2 拒绝弹窗 3 转交弹窗 4 退回弹窗 5加签弹窗
+const dialogType = ref('1')
+const centerDialogVisible = ref(false)
+const textarea = ref('')
+const uploadImg = ref<string>('')
+const uploadImgId = ref<string>('')
+const uploadUploadImgId = (str: string) => {
+  uploadImgId.value = str
+}
+// 获取的已完成任务的节点
+const finishTaskList = ref<NodeShowVo[]>([])
+// 退回节点选择
+const backTaskId = ref<string>('')
+// 同意推荐回复列表
+const agreeRecommendReplyList = ref<string[]>([])
+// 拒绝推荐回复列表
+const refuseRecommendReplyList = ref<string[]>([])
+// 点击推荐回复
+const handleRecommendReplyClick = (reply: string) => {
+  textarea.value = reply
+}
+// 选择转交人
+const transmittedObj = ref<any>([])
+// 用数组换名字
+const getNames = (list: any[]) => {
+  if (list && Array.isArray(list) && list.length > 0) {
+    let str = ''
+    list.forEach((item, index) => {
+      if (index == (list.length - 1)) {
+        str += item.userName
+      } else {
+        str += item.userName + ','
+      }
+    })
+
+    if (list.length == 1) {
+      return str
+    } else {
+      return str
+    }
+  }
+}
+const openDialog = async (type: string) => {
+  //获取最新签名
+  await FlowSignController.gerPersonalSign().then(data => {
+    if (data.code === 200 && data.res) {
+      uploadImg.value = data.res.url
+      uploadImgId.value = data.res.fileId
+    } else {
+      console.log("获取最新签名失败")
+    }
+  })
+  // 1  同意弹窗 2 拒绝弹窗 3 转交弹窗 4 退回弹窗 5加签弹窗
+  emits('validateForm', type)
+  dialogType.value = type
+  textarea.value = type == '1' ? props.formBaseInfo.nodeType === 'Executor' ? '已执行' : '同意' : type == '2' ? '拒绝' : type == '3' ? '转交' : type == '4' ? '退回' : type == '5' ? '加签' : ''
+  // centerDialogVisible.value = true
+  // 同意时获取同意推荐回复列表
+  if (type == '1') {
+    agreeRecommendReplyList.value = []
+    FlowInstanceController.getRecommendReplyList(props.formId, 'agree')
+      .then((data) => {
+        if (data.code == 200 && data.res) {
+          agreeRecommendReplyList.value = data.res
+        }
+      })
+      .catch(() => {
+        agreeRecommendReplyList.value = []
+      })
+  }
+  // 拒绝时获取拒绝推荐回复列表
+  if (type == '2') {
+    refuseRecommendReplyList.value = []
+    FlowInstanceController.getRecommendReplyList(props.formId, 'refuse')
+      .then((data) => {
+        if (data.code == 200 && data.res) {
+          refuseRecommendReplyList.value = data.res
+        }
+      })
+      .catch(() => {
+        refuseRecommendReplyList.value = []
+      })
+  }
+  if (type == '4') {
+    const loadingInstance = ElLoading.service({
+      lock: true,
+      text: '加载中...',
+    });
+    await FlowInstanceController.getFinishNodeList(props.formId).then(data => {
+      if (data.res && data.code == 200) {
+        finishTaskList.value = data.res
+      }
+    }).finally(() => {
+      loadingInstance.close();
+    })
+  }
+  if (props.canSubmit) {
+    centerDialogVisible.value = true
+  }
+}
+// 审批弹窗确定按钮触发的功能
+const handleSubmit = async (obj: any, successMessage: string, apiFunc: Function) => {
+  const loadingInstance = ElLoading.service({
+    lock: true,
+    text: '加载中...',
+  });
+
+  try {
+    const data = await apiFunc(obj);
+    if (data.code === 200) {
+      ElMessage({ message: successMessage, type: 'success' });
+      centerDialogVisible.value = false;
+      textarea.value = '';
+      haveSubmit.value = true;
+    }
+  } finally {
+    loadingInstance.close();
+  }
+};
+
+const checkFormChanges = () => {
+  for (let j in props.oldRuleForm) {
+    for (let i in props.ruleForm) {
+      if (i === j) {
+        if (typeof props.ruleForm[i] === 'string' || typeof props.ruleForm[i] === 'number' || props.ruleForm[i] === null || props.ruleForm[i] === undefined) {
+          if (props.ruleForm[i] !== props.oldRuleForm[j]) return true;
+        } else if (Array.isArray(props.ruleForm[i])) {
+          const arr1 = JSON.parse(JSON.stringify(props.ruleForm[i])).sort();
+          const arr2 = JSON.parse(JSON.stringify(props.oldRuleForm[i])).sort();
+          if (JSON.stringify(arr1) !== JSON.stringify(arr2)) return true;
+        } else if (_.isObject(props.ruleForm[i]) && _.isObject(props.oldRuleForm[i])) {
+          if (!_.isEqual(props.ruleForm[i], props.oldRuleForm[i])) return true;
+        } else {
+          console.log('比较ruleForm 跟 oldRuleForm 发现其他情况', props.ruleForm[i], props.oldRuleForm[j]);
+          return true;
+        }
+      }
+    }
+  }
+  return false;
+};
+
+const submitResult = new throttle().use(async () => {
+  // 表单验证
+  if (!textarea.value) {
+    ElMessage({ message: '请输入审批意见', type: 'error' });
+    return;
+  }
+  if (!uploadImg.value && props.formBaseInfo?.ifSignature && !uploadImgId.value) {
+    ElMessage({ message: '请进行签字或对签字进行确认保存', type: 'warning' });
+    return;
+  }
+  if (dialogType.value === '3' && (!transmittedObj.value || transmittedObj.value.length < 1)) {
+    ElMessage({ message: '请选择转交对象后在进行转交操作', type: 'warning' });
+    return;
+  }
+  if (dialogType.value === '4' && !backTaskId.value) {
+    ElMessage({ message: '请选择退回节点后在进行转交操作', type: 'warning' });
+    return;
+  }
+  const havaRuleFormChange = checkFormChanges();
+  console.log('props.ruleForm', havaRuleFormChange)
+
+  let saveSuccess = false;
+
+  if (havaRuleFormChange) {
+    if (dialogType.value === '1' || dialogType.value === '2') {
+      const result = await props.submitProcess();
+      if (result === 'success') saveSuccess = true;
+    } else {
+      saveSuccess = true;
+    }
+  }
+
+  if (!havaRuleFormChange || saveSuccess) {
+    switch (dialogType.value) {
+      case '1':
+      case '2':
+        await handleSubmit(
+          {
+            nodeId: props.taskId,
+            comment: textarea.value,
+            result: dialogType.value === '1' ? 'agree' : 'refuse',
+            signatureUrl: props.formBaseInfo?.ifSignature && uploadImgId.value !== undefined ? uploadImgId.value : ""
+          },
+          '审批成功',
+          FlowInstanceController.submitReview
+        );
+        break;
+
+      case '3':
+        await handleSubmit(
+          {
+            nodeId: props.taskId,
+            comment: textarea.value,
+            takeOverUserId: transmittedObj.value[0].userId
+          },
+          '转交成功',
+          FlowInstanceController.transmittedHandleNode
+        );
+        break;
+
+      case '4':
+        await handleSubmit(
+          {
+            nodeId: props.taskId,
+            comment: textarea.value,
+            backNodeId: backTaskId.value
+          },
+          '退回成功',
+          FlowInstanceController.instanceBack
+        );
+        break;
+    }
+  }
+}, 1000, true);
+// 当发起人重新提交
+const buttonSubmit = async () => {
+  let havaRuleFormChange = false
+  console.log('props.ruleForm', props.oldRuleForm)
+  console.log('props.ruleForm', props.ruleForm)
+  for (let j in props.oldRuleForm) {
+    for (let i in props.ruleForm) {
+      if (i == j) {
+        if (typeof props.ruleForm[i] == 'string' || typeof props.ruleForm[i] == 'number' || props.ruleForm[i] === null || props.ruleForm[i] === undefined) {
+          if (props.ruleForm[i] !== props.oldRuleForm[j]) {
+            havaRuleFormChange = true
+          }
+        } else if (Array.isArray(props.ruleForm[i])) {
+          let arr1 = JSON.parse(JSON.stringify(props.ruleForm[i]))
+          let arr2 = JSON.parse(JSON.stringify(props.oldRuleForm[i]))
+          let str1 = JSON.stringify(arr1.sort())
+          let str2 = JSON.stringify(arr2.sort())
+          if (str1 != str2) {
+            havaRuleFormChange = true
+          }
+        } else if (Object.prototype.toString.call(props.ruleForm[i]) === '[object Object]' && Object.prototype.toString.call(props.oldRuleForm[i]) === '[object Object]') {
+          for (let m in props.ruleForm[i]) {
+            let currenKeyHave = false
+            let havaFindObjectDiffInner = false
+            for (let n in props.oldRuleForm[i]) {
+              if (m == n) {
+                currenKeyHave = true
+                if (props.ruleForm[i][m] !== props.oldRuleForm[j][n]) {
+                  havaFindObjectDiffInner = true
+                  break;
+                }
+              }
+            }
+            if (!currenKeyHave || havaFindObjectDiffInner) {
+              havaRuleFormChange = true
+              break;
+            }
+          }
+        } else {
+          console.log('比较ruleForm 跟 oldRuleForm 发现其他情况', props.ruleForm[i], props.oldRuleForm[j])
+          havaRuleFormChange = true
+        }
+      }
+      if (havaRuleFormChange) break
+    }
+    if (havaRuleFormChange) break
+  }
+  let saveSuccess = false
+  if (havaRuleFormChange) {
+    await props.submitProcess().then((data: any) => {
+      console.error(data)
+      if (data == 'success') {
+        saveSuccess = true
+      }
+    })
+  }
+  if (!havaRuleFormChange || saveSuccess) {
+    const loadingInstance = ElLoading.service({
+      lock: true,
+      text: '加载中...',
+    });
+    let obj: ReviewBO = {
+      "nodeId": props.taskId,
+      "comment": '提交',
+      "result": 'agree',
+      "signatureUrl": ''
+    }
+
+    FlowInstanceController.submitReview(obj).then((data) => {
+      console.log(data)
+      if (data.code == 200) {
+        ElMessage({ message: '提交成功', type: 'success' })
+        centerDialogVisible.value = false
+        textarea.value = ''
+        haveSubmit.value = true
+      }
+    }).finally(() => {
+      loadingInstance.close()
+    })
+
+  }
+
+}
+watch(() => { return props.canSubmit }, (newVal) => {
+  if (newVal) {
+    centerDialogVisible.value = true
+  } else {
+    centerDialogVisible.value = false
+  }
+}, { deep: true })
+const handleTabClick = () => {
+  console.log(1)
+}
+
+
+const activities = ref<any[]>([])
+const ceshiactive = () => {
+  console.log(activities.value)
+}
+
+// 若有处理中，则取第一个处理中的节点类型，若没有处理中，则取第一个待处理的节点
+const currentNodeType = ref<string>('Ccto')
+const getCurrentNodeType = () => {
+  let haveFindProcessing = false
+  let findNodeTypeProcessing = ''
+  let haveFindPending = false
+  let findNodeTypePending = ''
+
+  for (let i = 0; i < activities.value.length; i++) {
+    if (activities.value[i].nodeStatus == '处理中') {
+      haveFindProcessing = true
+      findNodeTypeProcessing = activities.value[i].nodeType
+      break
+    }
+  }
+  for (let i = 0; i < activities.value.length; i++) {
+    if (activities.value[i].nodeStatus == '待处理') {
+      haveFindPending = true
+      findNodeTypePending = activities.value[i].nodeType
+      break
+    }
+  }
+  if (haveFindProcessing && findNodeTypeProcessing) {
+    currentNodeType.value = findNodeTypeProcessing
+  } else if (haveFindPending && findNodeTypePending) {
+    currentNodeType.value = findNodeTypePending
+  } else {
+    console.error('467行，当前未寻找到待处理或者处理中数据')
+    currentNodeType.value = 'Ccto'
+  }
+}
+// button 处理事件
+
+const buttonNotUse = () => {
+  ElMessage({ message: '功能正在开发中', type: 'error' })
+}
+// 撤销
+const buttonRevoke = () => {
+  // 如果传入了自定义撤销方法，使用自定义方法
+  if (props.customRevoke) {
+    props.customRevoke()
+    return
+  }
+  const loadingInstance = ElLoading.service({
+    lock: true,
+    text: '加载中...',
+  });
+  FlowInstanceController.revokeInstance(props.taskId).then(data => {
+    if (data.code == 200) {
+      ElMessage({
+        message: '撤销成功',
+        type: 'success'
+      })
+      haveSubmit.value = true
+    }
+  }).finally(() => {
+    loadingInstance.close()
+  })
+}
+watch(() => { return props.activities }, () => {
+  activities.value = props.activities
+}, { deep: true, immediate: true })
+watch(() => { return props.formBaseInfo }, () => {
+  formBaseInfo.value = props.formBaseInfo
+  buttonList.value = props.formBaseInfo.buttonList && Array.isArray(props.formBaseInfo.buttonList) ? props.formBaseInfo.buttonList : []
+  uploadImg.value = props.formBaseInfo.signatureHistoryUrl ? props.formBaseInfo.signatureHistoryUrl : ''
+  uploadImgId.value = props.formBaseInfo.fileId ? props.formBaseInfo.fileId : ''
+  if (props.formId) {
+
+    setCommentProps()
+  }
+}, { deep: true, immediate: true })
+const signConmpentRef = ref()
+
+watch(centerDialogVisible, (newVal, oldVal) => {
+  setTimeout(async () => {
+    if (newVal === false) {
+      signConmpentRef.value.dialogClose()
+    }
+  })
+})
+
+onMounted(() => {
+  currentPageWidth.value = window.innerWidth
+  window.addEventListener("resize", () => {
+    console.log(window.innerWidth)
+    currentPageWidth.value = window.innerWidth
+  })
+
+  console.log(isPc, props.taskId, props.formId)
+})
+
+// 评论区域ref
+const CommentAreaComponentRef = ref()
+// 设置评论的必要参数
+const setCommentProps = () => {
+  CommentAreaComponentRef.value?.setCommentProps({
+    formId: props.formId
+  })
+}
+/** 催办 */
+const UrgeDialogRef = ref()
+const openUrgeDialog = () => {
+  UrgeDialogRef.value?.open(props.formId, props.taskId)
+}
+const urgeDialogSuccess = () => {
+  console.log("催办成功的回调")
+}
+//进入页面后关闭弹框
+onActivated(() => {
+  haveSubmit.value = false
+})
+// 返回列表
+const backList = () => {
+  emits('backList')
+}
+//单据打印按钮
+const openOrderPrint = () => {
+  emits('openOrderPrint')
+}
+</script>
+<style lang="scss" scoped>
+@use './styles/common.scss';
+@use './styles/examine-approve-pc.scss';
+@use './styles/examine-approve-phone.scss';
+
+.popupBody {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow-y: hidden;
+}
+
+.popupContent {
+  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+
+  .blankBox {
+    height: 60px;
+    width: 100%;
+    min-height: 60px;
+    max-height: 60px;
+  }
+}
+
+.popupbuttonBox {
+  padding-top: 8px;
+  margin-top: 18px;
+  position: absolute;
+  bottom: 0;
+  border-top: 1px solid #e4e7ed;
+  width: 100%;
+  height: 50px;
+  box-shadow: 0px 0px 12px #90939930;
+  background: #fff;
+}
+
+.processPcAuditCurrentPageBox {
+  .el-textarea__inner {
+    height: 37px;
+    min-height: 37px !important;
+  }
+}
+
+// 推荐回复样式
+.recommend-reply-section {
+  width: 100%;
+  margin-bottom: 12px;
+
+  .recommend-reply-title {
+    font-size: 14px;
+    color: #ff6b00;
+    margin-bottom: 10px;
+  }
+
+  .recommend-reply-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .recommend-reply-item {
+    display: inline-block;
+    padding: 6px 14px;
+    background: #f5f5f5;
+    border-radius: 16px;
+    font-size: 13px;
+    color: #333;
+    cursor: pointer;
+    max-width: 100%;
+    word-break: break-all;
+    overflow-wrap: break-word;
+
+    &:hover {
+      background: #e8e8e8;
+    }
+
+    &:active {
+      background: #e0e0e0;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.processPcAuditCurrentPageBox {
+  .el-textarea__inner {
+    height: 37px;
+    min-height: 37px !important;
+  }
+}
+
+</style>