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

package/CHANGELOG.md

@@ -1,4 +1,6 @@
 # Changelog
+## [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.15",
   "description": "",
   "main": "index.js",
   "author": "lambo",

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/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>