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

package/src/FlowApproval.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <van-tabs ref="tabs" style="padding-bottom: 60px" v-model="active" @click="onTabClick" animated>
+    <van-tabs ref="tabs" style="padding-bottom: 60px" v-model="active"
+              @click="onTabClick"
+              sticky :offset-top="offsetTop"
+              animated>
       <slot name="business-content"/>
       <van-tab title="流程信息">
         <div style="padding: 0 10px">
@@ -15,6 +18,8 @@
                     v-model="approvalForm.auditOpinion"
                     rows="3"
                     autosize
+                    @focus="handleInputFocus"
+                    :error="approvalError"
                     required
                     label="审批意见"
                     type="textarea"
@@ -24,16 +29,14 @@
                 />
                 <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 v-if="handleButtons.includes('appointHandler')">
+                    <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>
                   <div class="van-hairline--bottom"></div>
                 </div>
                 <div v-if="handleButtons.includes('attachmentFile')">
@@ -59,43 +62,10 @@
                 <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>
+                    <approval-node-cell :node-detail="item" :folding-approval-comments="foldingApprovalComments" />
                     <div v-if="index !== items.length - 1" class="van-hairline--bottom"></div>
                   </div>
                 </van-collapse-item>
-
               </van-collapse>
             </div>
           </div>
@@ -195,57 +165,59 @@
                   :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>
+          <van-field @click="handleSelectUserPopupShow(index)" label="候选用户" readonly placeholder="点击选择"
+                     :value="(item.candidateGroups?.users ?? []).map(user => user.name).join(',')">
+          </van-field>
+          <van-field @click="handleSelectPositionPopupShow(index)" label="候选岗位" readonly placeholder="点击选择"
+                     :value="(item.candidateGroups?.positions ?? []).map(position => position.name).join(',')">
+          </van-field>
+          <van-field @click="handleSelectRolePopupShow(index)" label="候选角色" readonly placeholder="点击选择"
+                     :value="(item.candidateGroups?.roles ?? []).map(role => role.name).join(',')">
+          </van-field>
+          <van-field @click="handleSelectOrganizePopupShow(index)" label="候选组织" readonly placeholder="点击选择"
+                     :value="(item.candidateGroups?.organs ?? []).map(organ => organ.name).join(',')">
+          </van-field>
         </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 v-if="handleButtons.includes('appointTimeoutTime')">
+          <van-cell center title="停留时间">
+            <template #default>
               <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 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;">
-                <van-stepper disable-input button-size="22" min="0" v-model="item.inAdvanceTime"/>
-                <span style="margin-left: 4px;">小时</span>
+                <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>
-            </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)"
-        />
+            </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)"
+          />
+        </div>
         <van-popup v-model="showPicker[index]" position="bottom">
           <van-picker
               show-toolbar
@@ -260,9 +232,25 @@
         <div class="bar-item approve" @click="handleSelect('select')">确认</div>
       </div>
     </van-popup>
-    <van-popup v-model="selectHandlePopupShow" closeable round position="bottom"
+    <van-popup v-if="selectHandlePopupShow" v-model="selectHandlePopupShow" closeable round position="bottom"
                :style="{ height: '80%' }" style="background: #f7f8fa">
-      <select-handle @selectHandle="handleSelectResult"></select-handle>
+      <select-handle title="指定办理人" :multi-select="false" :procType="procType" @selectHandle="handleSelectResult"></select-handle>
+    </van-popup>
+    <van-popup v-if="selectOrganizePopupShow" v-model="selectOrganizePopupShow" closeable round position="bottom"
+               :style="{ height: '80%' }">
+      <select-organize ref="selectOrganize" :all-organize="false" :organize-id-list="permissionsScope.O"  @selectOrganizeHandle="selectOrganizeHandle" ></select-organize>
+    </van-popup>
+    <van-popup v-if="selectUserPopupShow" v-model="selectUserPopupShow" closeable round position="bottom"
+               :style="{ height: '80%' }">
+      <select-handle title="选择用户" :multi-select="true" :procType="procType" @selectHandle="selectUserHandle" ></select-handle>
+    </van-popup>
+    <van-popup v-if="selectPositionPopupShow" v-model="selectPositionPopupShow" closeable round position="bottom"
+               :style="{ height: '80%' }">
+      <select-normal-list title="选择岗位" :id-list="permissionsScope.P" @selectNormalListHandle="selectPositionHandle" :parse-function="parsePositionFunction"></select-normal-list>
+    </van-popup>
+    <van-popup v-if="selectRolePopupShow" v-model="selectRolePopupShow" closeable round position="bottom"
+               :style="{ height: '80%' }">
+      <select-normal-list title="选择角色" :id-list="permissionsScope.R" @selectNormalListHandle="selectRoleHandle" :parse-function="parseRoleFunction"></select-normal-list>
     </van-popup>
     <van-dialog v-model="nodeListDialogShow" @confirm="processJumpSpecifiedNode()" @close="nodeListDialogShowClose()"
                 :title="getAuditButtonStatus(auditResult)" show-cancel-button>
@@ -297,18 +285,26 @@
 
 <script>
 import {
-  audit, config,
+  audit,
+  config,
   getAllPreNodes,
   getAttachmentList,
   getNextNodes,
   getNodesBehind,
+  getPosition,
   getPreNode,
-  getProcessHis
+  getProcessHis,
+  getProcessType, getRole
 } 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";
+import Tree from "./tree/Tree.vue";
+import SelectOrganize from "./SelectOrganize.vue";
+import SelectNormalList from "./SelectNormalList.vue";
+import ApprovalNodeCell from "./ApprovalNodeCell.vue";
+import {getAuditStatus} from "./js/global";
 
 
 export default {
@@ -317,7 +313,7 @@ export default {
       return config
     }
   },
-  components: {SelectHandle, UploadFile},
+  components: {ApprovalNodeCell, SelectNormalList, SelectOrganize, Tree, SelectHandle, UploadFile},
   props: {
     //业务表单保存方法
     businessFormSave: {
@@ -340,6 +336,18 @@ export default {
     processTraceRouterName: {
       type: String,
       required: true,
+    },
+    activeFirstTab: {
+      type: Boolean,
+      default: false,
+    },
+    offsetTop: {
+      type: Number,
+      default: 0
+    },
+    foldingApprovalComments: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -348,6 +356,7 @@ export default {
       //初始化路由数据
       taskNode: this.$route.query.taskNode,
       procId: this.$route.query.procId,
+      procType: this.$route.query.procType,
       instanceId: this.$route.query.instanceId,
       applyId: this.$route.query.applyId,
       formUrl: this.$route.query.formUrl,
@@ -360,6 +369,7 @@ export default {
         handlingPersonnel: '',
         nodeConfigMaps: '',
       },
+      approvalError: false,
 
       processHistory: [],
       tableData: [],
@@ -404,14 +414,22 @@ export default {
       //给附件列表展示
       files: [],
       //文件上传列表
-      fileList: []
+      fileList: [],
+
+      permissionsScope: {},
+      selectOrganizePopupShow: false,
+      selectUserPopupShow: false,
+      selectRolePopupShow: false,
+      selectPositionPopupShow: false,
     };
   },
   methods: {
+    getAuditStatus,
     initData() {
       this.getProcessHistory();
       this.getNextNodes();
       this.getAttachmentList();
+      this.getProcessTypeList();
       //设置提示持续时间默认为500ms
       Toast.setDefaultOptions({duration: 500});
     },
@@ -429,11 +447,82 @@ export default {
           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 || '未指定')
+              .map(node => node.assignee?.name || '候选人')
               .join(',');
         }
       })
     },
+    getProcessTypeList() {
+      getProcessType(this.procType).then(res => {
+        let permScope = res.data.data.rows[0].permScope;
+        this.permissionsScope = this.extractPermissions(permScope);
+      });
+    },
+    extractPermissions(permScope) {
+      const permissions = {};
+
+      // 使用正则分别匹配 O、U、P 和 R
+      const oMatch = permScope.match(/O:([^,]*)/);
+      const uMatch = permScope.match(/U:([^,]*)/);
+      const pMatch = permScope.match(/P:([^,]*)/);
+      const rMatch = permScope.match(/R:([^,]*)/);
+
+      // 分别解析 O、U、P 和 R 权限
+      permissions.O = oMatch && oMatch[1] ? oMatch[1].split(';') : [];
+      permissions.U = uMatch && uMatch[1] ? uMatch[1].split(';') : [];
+      permissions.P = pMatch && pMatch[1] ? pMatch[1].split(';') : [];
+      permissions.R = rMatch && rMatch[1] ? rMatch[1].split(';') : [];
+
+      return permissions;
+    },
+    async parsePositionFunction(idList) {
+      try {
+        // 并行调用 getPosition 方法
+        return await Promise.all(
+            idList.map(async (id) => {
+              const response = await getPosition(id);
+              const result = response.data; // 假设响应的主体包含在 data 中
+
+              // 返回 { id, name } 对象
+              return {
+                id: id,
+                name: result.data.positionName || `Unknown Name for ${id}`, // 使用返回数据中的 name，若无则提供默认值
+              };
+            })
+        ); // 返回解析结果数组
+      } catch (error) {
+        console.error('Error fetching positions:', error);
+        // 在错误情况下返回默认结构
+        return idList.map((id) => ({
+          id: id,
+          name: `Unknown Name for ${id}`,
+        }));
+      }
+    },
+    async parseRoleFunction(idList) {
+      try {
+        // 并行调用 getPosition 方法
+        return await Promise.all(
+            idList.map(async (id) => {
+              const response = await getRole(id);
+              const result = response.data; // 假设响应的主体包含在 data 中
+
+              // 返回 { id, name } 对象
+              return {
+                id: id,
+                name: result.data.name || `Unknown Name for ${id}`, // 使用返回数据中的 name，若无则提供默认值
+              };
+            })
+        ); // 返回解析结果数组
+      } catch (error) {
+        console.error('Error fetching positions:', error);
+        // 在错误情况下返回默认结构
+        return idList.map((id) => ({
+          id: id,
+          name: `Unknown Name for ${id}`,
+        }));
+      }
+    },
     processData(data) {
       return data.map(node => {
         node.personType = node.assignee ? "assignee" : "candidate";
@@ -518,7 +607,7 @@ export default {
         }, {});
         this.approvalForm.nodeConfigMaps = JSON.stringify(params)
         this.approvalForm.handlingPersonnel = this.nextNodeProcessedData
-            .map(node => node.assignee?.name || '未指定')
+            .map(node => node.personType === "assignee" ?  node.assignee?.name : '候选人')
             .join(',');
         this.nextNodePopupShow = false;
       } else {
@@ -527,6 +616,22 @@ export default {
         this.nextNodePopupShow = false;
       }
     },
+    handleSelectOrganizePopupShow(index) {
+      this.nextNodeHandleIndex = index;
+      this.selectOrganizePopupShow=true;
+    },
+    handleSelectUserPopupShow(index) {
+      this.nextNodeHandleIndex = index;
+      this.selectUserPopupShow=true;
+    },
+    handleSelectRolePopupShow(index) {
+      this.nextNodeHandleIndex = index;
+      this.selectRolePopupShow = true;
+    },
+    handleSelectPositionPopupShow(index) {
+      this.nextNodeHandleIndex = index;
+      this.selectPositionPopupShow = true;
+    },
     getAttachmentList() {
       getAttachmentList(this.procId, this.applyId).then(resp => {
         if (resp.data.code === '200') {
@@ -563,23 +668,7 @@ export default {
       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': '通过',
@@ -604,6 +693,8 @@ export default {
         query: {
           applyId: this.applyId,
           procId: this.procId,
+          instanceId: this.instanceId,
+          taskNode: this.taskNode,
         }
       })
     },
@@ -612,6 +703,8 @@ export default {
 
       if (this.approvalForm.auditOpinion === '' || this.approvalForm.auditOpinion == null) {
         if (!this.handleButtons || this.handleButtons.includes('auditOpinion')) {
+          this.updateActiveTab()
+          this.approvalError = true
           Toast({message: '请输入审批意见', duration: '500'});
           return
         } else {
@@ -627,6 +720,9 @@ export default {
       this.popupShow = false;
 
     },
+    handleInputFocus() {
+      this.approvalError = false;
+    },
     submit() {
       let self = this;
       self.auditParams = {
@@ -724,7 +820,7 @@ export default {
               this.executionCompleted(true, result.data.processInstanceId, taskIds, auditResult, self.taskId);
             }
           } else {
-            this.executionCompleted(true, null, null);
+            this.executionCompleted(true, null, null, auditResult, self.taskId);
           }
           Toast.success(result.message);
         } else if (result.code === '20002') {
@@ -821,14 +917,56 @@ export default {
       }
       self.selectHandlePopupShow = false;
     },
+    selectOrganizeHandle(handle, checkedNodes) {
+      if (handle === 'select') {
+        this.nextNodeProcessedData[this.nextNodeHandleIndex].candidateGroups.organs =
+            checkedNodes.map(item => ({
+              name: item.node.title,
+              id: item.node.id,
+            }));
+      }
+      this.selectOrganizePopupShow = false
+    },
+    selectUserHandle(checkResult) {
+      this.nextNodeProcessedData[this.nextNodeHandleIndex].candidateGroups.users =
+          checkResult.map(item => ({
+            name: item.userName,
+            id: item.userId,
+          }));
+      this.selectUserPopupShow = false;
+    },
+    selectPositionHandle(handle, result) {
+      if (handle === 'select') {
+        this.nextNodeProcessedData[this.nextNodeHandleIndex].candidateGroups.positions =
+            result.map(item => ({
+              name: item.name,
+              id: item.id,
+            }));
+      }
+      this.selectPositionPopupShow = false
+    },
+    selectRoleHandle(handle, result) {
+      if (handle === 'select') {
+        this.nextNodeProcessedData[this.nextNodeHandleIndex].candidateGroups.roles =
+            result.map(item => ({
+              name: item.name,
+              id: item.id,
+            }));
+      }
+      this.selectRolePopupShow = false
+    },
   },
   activated() {
-    this.updateActiveTab();
+    if (!this.activeFirstTab) {
+      this.updateActiveTab();
+    }
   },
   mounted() {
     this.initData()
     // 默认选中最后一个tab页
-    this.updateActiveTab();
+    if (!this.activeFirstTab) {
+      this.updateActiveTab();
+    }
   }
 
 };
@@ -837,6 +975,10 @@ export default {
 <style scoped>
 @import 'styles/global.css';
 
+::v-deep .van-tabs__content {
+  background: #f7f8fa;
+}
+
 ::v-deep .van-collapse-item__content {
   padding: 0 0;
 }
@@ -853,6 +995,7 @@ export default {
 ::v-deep .van-tab--active .van-tab__text {
   color: #3478f6; /* 设置激活状态下的文字颜色为蓝色 */
   font-size: 16px; /* 增大激活状态下的字体大小 */
+  font-weight: bold;
 }
 
 ::v-deep .van-tabs__line {
@@ -901,38 +1044,6 @@ export default {
   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; /* 自定义文字颜色 */