@lambo-design-mobile/workflow-approve 1.0.0-beta.14 → 1.0.0-beta.16

package/CHANGELOG.md

@@ -1,4 +1,13 @@
 # Changelog
+## [1.0.0-beta.16](http://git.inspur.com/ecbh/lambo-design/lambo-design/-/compare/@lambo-design-mobile/workflow-approve@1.0.0-beta.15...@lambo-design-mobile/workflow-approve@1.0.0-beta.16) (2025-04-11)
+
+
+### ✨ Features | 新功能
+
+* **workflow-approve:** 优化批量审批功能 ([95989fc](http://git.inspur.com/ecbh/lambo-design/lambo-design/-/commit/95989fc8652a210321251f7191786e59fbbba966))
+
+## [1.0.0-beta.15](http://git.inspur.com/ecbh/lambo-design/lambo-design/-/compare/@lambo-design-mobile/workflow-approve@1.0.0-beta.14...@lambo-design-mobile/workflow-approve@1.0.0-beta.15) (2025-03-19)
+
 ## [1.0.0-beta.14](http://git.inspur.com/ecbh/lambo-design/lambo-design/-/compare/@lambo-design-mobile/workflow-approve@1.0.0-beta.13...@lambo-design-mobile/workflow-approve@1.0.0-beta.14) (2025-03-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design-mobile/workflow-approve",
-  "version": "1.0.0-beta.14",
+  "version": "1.0.0-beta.16",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -14,8 +14,8 @@
   },
   "devDependencies": {
     "@lambo-design-mobile/lambo-scan-code": "^1.0.0-beta.1",
-    "@lambo-design-mobile/upload-file": "^1.0.0-beta.10",
-    "@lambo-design-mobile/shared": "^1.0.0-beta.18"
+    "@lambo-design-mobile/shared": "^1.0.0-beta.18",
+    "@lambo-design-mobile/upload-file": "^1.0.0-beta.13"
   },
   "scripts": {
     "release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",

package/src/ApprovalNodeCell.vue

@@ -17,7 +17,6 @@
            style="font-size: 16px;font-weight: bold;padding:5px 0;">
         {{ Array.isArray(item.auditName) ? item.auditName[0] : item.auditName }}
       </div>
-      <div>{{ item.taskName }}</div>
       <div>
         <div v-if="foldingApprovalComments">
           <span v-if="item.auditComment" @click="showAuditDetail(item.auditComment)">

package/src/FlowBaseList.vue

@@ -58,10 +58,10 @@
                       icon-size="18px">全选
         </van-checkbox>
       </div>
-      <div class="bar-item" @click="batchApproval(1)">批量驳回</div>
-      <div class="bar-item approve" @click="batchApproval(0)">批量通过</div>
+      <div v-if="showBatchReject" class="bar-item" @click="batchApproval(1)">批量驳回</div>
+      <div class="bar-item approve" :style="approveButtonStyle" @click="batchApproval(0)">批量通过</div>
     </div>
-    <van-dialog v-model="batchApprovalDialog" :before-close="handleBeforeClose" @confirm="batchApprovalSubmit"
+    <van-dialog v-model="batchApprovalDialog" :before-close="handleBeforeClose"
                 :title="this.batchApprovalForm.approvalStatus===0 ?'批量通过':'批量驳回'"
                 show-cancel-button>
       <van-field ref="auditOpinionField" v-model="batchApprovalForm.auditOpinion"
@@ -70,8 +70,9 @@
                  label="审批意见"
                  type="textarea"
                  maxlength="50"
-                 placeholder="请输入审批意见"
+                 :placeholder="this.batchApprovalForm.approvalStatus===0 ? '请输入审批意见（选填）' : '请输入审批意见（必填）'"
                  show-word-limit
+                 :class="{'required-field': this.batchApprovalForm.approvalStatus===1}"
       />
     </van-dialog>
     <van-popup v-model="searchFilterShow" ref="searchPopup" position="top"
@@ -145,6 +146,11 @@ export default {
       type: String,
       default: ''
     },
+    // 控制批量驳回按钮是否显示
+    showBatchReject: {
+      type: Boolean,
+      default: false
+    },
     // 新增 4 个路由 name 参数
     businessDetailsRouterName: {
       type: String,
@@ -202,6 +208,16 @@ export default {
       return {
         backgroundImage: this.headerBackground ? `url(${this.headerBackground})` : `url(${this.todoBackImage})`
       }
+    },
+    // 根据是否显示批量驳回按钮动态调整批量通过按钮样式
+    approveButtonStyle() {
+      if (!this.showBatchReject) {
+        return {
+          'flex': '2',
+          'margin': '0 20px 0 60px'
+        }
+      }
+      return {}
     }
   },
   methods: {
@@ -282,6 +298,11 @@ export default {
       Toast.fail(msg);
     },
     batchApproval(status) {
+      // 如果是驳回操作，但驳回按钮被禁用，则不执行操作
+      if (status === 1 && !this.showBatchReject) {
+        return;
+      }
+
       if (this.checkResult.length > 10) {
         Toast.fail("最多同时审批十条记录");
         return;
@@ -300,6 +321,22 @@ export default {
       this.batchApprovalForm.approvalStatus = status;
       this.batchApprovalDialog = true;
     },
+    handleBeforeClose(action, done) {
+      if (action === 'confirm') {
+        // 驳回(status=1)时审批意见必填，通过(status=0)时审批意见可选
+        if (this.batchApprovalForm.approvalStatus === 1 && !this.batchApprovalForm.auditOpinion) {
+          Toast("驳回操作必须填写审批意见");
+          return done(false);
+        }
+        // 校验通过，关闭对话框，然后提交审批
+        done();
+        this.batchApprovalSubmit();
+      } else {
+        // 取消操作，直接关闭对话框
+        done();
+        this.batchApprovalForm.auditOpinion = '';
+      }
+    },
     async batchApprovalSubmit() {
       const flowIds = this.checkResult.join(",");
       const status = this.batchApprovalForm.approvalStatus;
@@ -311,23 +348,16 @@ export default {
           this.checkResult = [];
           this.onSearch();
           Toast.success("审批成功");
+          // 成功后清空审批意见
+          this.batchApprovalForm.auditOpinion = '';
+        } else {
+          Toast.fail(res.data.message || "审批失败");
         }
       } catch (error) {
         console.error('Error submitting batch approval:', error);
         Toast.fail("审批失败");
       }
     },
-    handleBeforeClose(action, done) {
-      if (action === 'confirm' && !this.batchApprovalForm.auditOpinion) {
-        Toast("审批信息不能为空");
-        return done(false);
-      }
-      if (action === 'confirm') {
-        this.batchApprovalSubmit();
-      }
-      done();
-      this.batchApprovalForm.auditOpinion = '';
-    },
     batchSelect(checked) {
       if (checked) {
         this.$refs.todoListCard.checkAll();
@@ -518,4 +548,17 @@ export default {
   background: linear-gradient(90deg, rgba(0, 150, 255, 0.8), rgba(22, 119, 255, 0.79));
 }
 
-</style>
+.required-field {
+  border-color: red;
+}
+
+.required-field ::v-deep .van-field__label {
+  color: #f44;
+}
+
+.required-field ::v-deep .van-field__label::before {
+  content: '* ';
+  color: #f44;
+}
+
+</style>

package/src/FlowNodeCell.vue

@@ -0,0 +1,116 @@
+<template>
+  <van-cell center>
+    <template v-slot: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="28px" color="#fff"/>
+      </div>
+      <div v-else class="pending-icon">
+        <van-icon class="iconfont" class-prefix='icon' :name=getAuditStatus(item.auditResult).icon
+                  size="28px" color="#fff"/>
+      </div>
+    </template>
+    <template v-slot:title>
+      <div :style="{ color: getAuditStatus(item.auditResult).color }"
+           style="font-size: 16px;font-weight: bold;padding:5px 0;">
+        {{ Array.isArray(item.auditName) ? item.auditName[0] : item.auditName }}
+      </div>
+      <div>{{ item.taskName }}</div>
+      <div>
+        <div v-if="foldingApprovalComments">
+          <span v-if="item.auditComment" @click="showAuditDetail(item.auditComment)">
+            审批意见 <van-icon name="comment-circle-o"/>
+          </span>
+        </div>
+        <div v-else >
+          <div v-if="item.auditComment">
+            意见: {{ item.auditComment }}
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-slot:label>
+      <div>{{ item.auditDate || item.createTime }}</div>
+    </template>
+    <template v-slot:default>
+                        <span :style="{ color: getAuditStatus(item.auditResult).color }">{{
+                            getAuditStatus(item.auditResult).text
+                          }}</span>
+    </template>
+  </van-cell>
+</template>
+
+<script>
+import {Dialog} from "vant";
+import {getAuditStatus} from "./js/global";
+
+export default {
+  name: "FlowNodeCell",
+  props: {
+    nodeDetail: {
+      type: Object,
+      required: true
+    },
+    foldingApprovalComments: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      item: this.nodeDetail
+    }
+  },
+  methods: {
+    getAuditStatus,
+    showAuditDetail(auditComment) {
+      Dialog.alert({
+        title: '审批意见',
+        message: auditComment,
+      }).then(() => {
+        // on close
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.completed-icon {
+  width: 50px;
+  height: 50px;
+  background-clip: padding-box; /* 使背景不填充边框 */
+
+  border-radius: 50%;
+  margin-right: 1rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: linear-gradient(90deg, #0096FF, #1677FF);
+  border: 0.3rem solid rgb(229, 244, 255); /* 半透明边框，颜色和背景色相同 */
+}
+
+.pending-icon {
+  width: 50px;
+  height: 50px;
+  background-clip: padding-box; /* 使背景不填充边框 */
+
+  border-radius: 50%;
+  margin-right: 1rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: linear-gradient(90deg, #FF7E00, #FFA200);
+  border: 0.4rem solid rgb(255, 245, 229); /* 半透明边框，颜色和背景色相同 */
+}
+
+::v-deep .van-cell__value {
+  flex: 0 auto;
+}
+</style>

package/src/WorkflowDiagram.vue

@@ -18,7 +18,7 @@
       </div>
       <div v-if="auditData.length > 0">
         <div v-for="(item,index) in auditData" :key="index" class="record-item">
-          <approval-node-cell :node-detail="item"/>
+          <flow-node-cell :node-detail="item"/>
         </div>
       </div>
       <div v-else>
@@ -51,10 +51,11 @@
 import Viewer from "bpmn-js/lib/Viewer";
 import {getHisAudit, getPrintData, printData} from "../api";
 import ApprovalNodeCell from "./ApprovalNodeCell.vue";
-import { getAuditStatus } from './js/global';  // 根据路径修改
+import { getAuditStatus } from './js/global';
+import FlowNodeCell from "./FlowNodeCell.vue";  // 根据路径修改
 
 export default {
-  components: {ApprovalNodeCell},
+  components: {FlowNodeCell, ApprovalNodeCell},
   props: {
     procId: {
       type: String,
@@ -319,4 +320,4 @@ export default {
   flex: 0 auto;
 }
 
-</style>
+</style>