nbb-component-ui 1.2.2 → 1.2.4

package/dist/index.es.js

@@ -1,56 +1,238 @@
-import { defineComponent as l, ref as i, watch as u, resolveComponent as m, openBlock as g, createBlock as d, withCtx as f, createTextVNode as v } from "vue";
-import { ElMessage as _ } from "element-plus";
-const C = (t) => ({
-  getApprovalDetail: async (e) => await t.get({
+import { defineComponent as N, ref as f, resolveComponent as m, openBlock as r, createElementBlock as i, createElementVNode as l, toDisplayString as s, unref as c, createCommentVNode as u, createVNode as y, withCtx as v, Fragment as H, renderList as z, createBlock as A, createTextVNode as I, watch as E } from "vue";
+import { ElMessage as V } from "element-plus";
+import { formatDate as T, formatPast2 as B } from "@/utils/formatTime";
+const j = (t) => ({
+  getApprovalDetail: async (n) => await t.get({
     url: "/system/bpm/process-instance/get-approval-detail",
     params: {
-      processInstanceId: e
+      processInstanceId: n
     }
   })
-}), I = /* @__PURE__ */ l({
+}), R = (t) => ({
+  getTaskListByProcessInstanceId: async (n) => await t.get({
+    url: "/system/bpm/task/list-by-process-instance-id",
+    params: {
+      processInstanceId: n
+    }
+  })
+}), S = { class: "scroll-area" }, O = { class: "flow-header flex justify-between" }, $ = { class: "text-18px font-bold" }, G = {
+  class: "text-14px font-bold",
+  style: { color: "#005aae" }
+}, J = { class: "flex items-center" }, K = { class: "flow-start" }, Q = { key: 0 }, W = { class: "mt-30px block" }, X = ["src"], Y = { style: { "font-weight": "700" } }, Z = {
+  key: 0,
+  style: { "margin-right": "30px", "font-weight": "normal" }
+}, ee = {
+  key: 1,
+  style: { "margin-right": "30px", "font-weight": "normal" }
+}, se = {
+  key: 0,
+  style: { "font-weight": "normal" }
+}, te = {
+  key: 1,
+  style: { "font-weight": "normal", color: "#8a909c" }
+}, ne = {
+  key: 2,
+  style: { "font-weight": "normal" }
+}, oe = {
+  key: 3,
+  style: { "font-weight": "normal", color: "#8a909c" }
+}, ae = {
+  key: 4,
+  style: { "margin-left": "30px", "font-weight": "normal" }
+}, ce = {
+  key: 5,
+  style: { "font-weight": "normal", color: "#8a909c" }
+}, re = { key: 2 }, le = /* @__PURE__ */ N({
+  name: "BpmProcessInstanceTaskList",
+  __name: "CmcFlowList",
+  props: {
+    processInstance: {},
+    tasks: {}
+  },
+  setup(t) {
+    const { t: n } = useI18n(), d = {
+      1: "svg-icon:approvalPending",
+      // 审批中
+      2: "svg-icon:approvalPass",
+      // 通过
+      3: "svg-icon:approvalRejected",
+      // 拒绝
+      4: "svg-icon:approvalCanceled"
+      // 取消
+    }, k = (p) => [0, 1, 6, 7].includes(p.status) ? "primary" : p.status === 2 ? "success" : p.status === 3 ? "danger" : p.status === 4 ? "info" : p.status === 5 ? "warning" : "";
+    return f(!1), (p, M) => {
+      var b;
+      const x = m("Icon"), h = m("dict-tag"), g = m("el-tag"), F = m("el-card"), P = m("el-timeline-item"), C = m("el-timeline");
+      return r(), i("div", S, [
+        l("div", O, [
+          l("div", $, [
+            l("span", null, s(c(n)("processFlow.flow")), 1),
+            l("span", null, s(t.processInstance.id), 1)
+          ]),
+          l("div", G, [
+            l("span", null, s(t.processInstance.name), 1)
+          ])
+        ]),
+        l("div", J, [
+          l("div", K, [
+            l("p", null, s(c(n)("processFlow.startTime")) + s(c(T)(t.processInstance.startTime)), 1),
+            l("p", null, s(c(n)("processFlow.endTime")) + s(c(T)(t.processInstance.endTime)), 1),
+            t.processInstance.durationInMillis ? (r(), i("p", Q, s(c(n)("processFlow.duration")) + s(c(B)((b = t.processInstance) == null ? void 0 : b.durationInMillis)), 1)) : u("", !0)
+          ]),
+          y(x, {
+            size: 100,
+            icon: d[t.processInstance.status] || "svg-icon:approvalPending"
+          }, null, 8, ["icon"])
+        ]),
+        l("div", W, [
+          y(C, null, {
+            default: v(() => [
+              (r(!0), i(H, null, z(t.tasks, (e, w) => (r(), A(P, {
+                key: w,
+                type: k(e) || "info"
+              }, {
+                dot: v(() => {
+                  var a;
+                  return [
+                    l("img", {
+                      src: ((a = e == null ? void 0 : e.assigneeUser) == null ? void 0 : a.avatar) || "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+                      class: "avatar-wrap"
+                    }, null, 8, X)
+                  ];
+                }),
+                default: v(() => [
+                  l("p", Y, [
+                    I(s(e.name) + " ", 1),
+                    e.status ? (r(), A(h, {
+                      key: 0,
+                      type: "bpm_task_status",
+                      value: e.status || ""
+                    }, null, 8, ["value"])) : u("", !0)
+                  ]),
+                  y(F, { "body-style": { padding: "10px" } }, {
+                    default: v(() => {
+                      var a, _, o, D;
+                      return [
+                        w === 0 ? (r(), i("label", Z, [
+                          I(s(((a = e.assigneeUser) == null ? void 0 : a.nickname) || ((_ = e.ownerUser) == null ? void 0 : _.nickname)) + " ", 1),
+                          y(g, {
+                            size: "small",
+                            type: "info",
+                            style: { "vertical-align": "1px" }
+                          }, {
+                            default: v(() => {
+                              var L, U;
+                              return [
+                                I(s((U = (L = t.processInstance) == null ? void 0 : L.startUser) == null ? void 0 : U.deptName), 1)
+                              ];
+                            }),
+                            _: 1
+                          })
+                        ])) : u("", !0),
+                        e.assigneeUser ? (r(), i("label", ee, [
+                          I(s(c(n)("processFlow.approver")) + s(((o = e.assigneeUser) == null ? void 0 : o.nickname) || ((D = e.ownerUser) == null ? void 0 : D.nickname)) + " ", 1),
+                          y(g, {
+                            size: "small",
+                            type: "info",
+                            style: { "vertical-align": "1px" }
+                          }, {
+                            default: v(() => [
+                              I(s(e.assigneeUser.deptName), 1)
+                            ]),
+                            _: 2
+                          }, 1024)
+                        ])) : u("", !0),
+                        l("div", null, [
+                          e.createTime && !e.endTime ? (r(), i("label", se, s(c(n)("processFlow.createTime")), 1)) : u("", !0),
+                          e.createTime && !e.endTime ? (r(), i("label", te, s(c(T)(e == null ? void 0 : e.createTime, "MM-DD HH:mm")), 1)) : u("", !0),
+                          e.endTime ? (r(), i("label", ne, s(c(n)("processFlow.approvalTime")), 1)) : u("", !0),
+                          e.endTime ? (r(), i("label", oe, s(c(T)(e == null ? void 0 : e.endTime, "MM-DD HH:mm")), 1)) : u("", !0),
+                          e.durationInMillis ? (r(), i("label", ae, s(c(n)("processFlow.duration")), 1)) : u("", !0),
+                          e.durationInMillis ? (r(), i("label", ce, s(c(B)(e == null ? void 0 : e.durationInMillis)), 1)) : u("", !0)
+                        ]),
+                        e.reason ? (r(), i("div", re, s(c(n)("processFlow.approvalSuggestion")) + s(e.reason), 1)) : u("", !0)
+                      ];
+                    }),
+                    _: 2
+                  }, 1024)
+                ]),
+                _: 2
+              }, 1032, ["type"]))), 128))
+            ]),
+            _: 1
+          })
+        ])
+      ]);
+    };
+  }
+});
+const q = (t, n) => {
+  const d = t.__vccOpts || t;
+  for (const [k, p] of n)
+    d[k] = p;
+  return d;
+}, ie = /* @__PURE__ */ q(le, [["__scopeId", "data-v-6f63ddea"]]), pe = /* @__PURE__ */ N({
   __name: "CmcProcessFlow",
   props: {
     processInstanceId: {},
     request: {}
   },
   setup(t) {
-    const e = t, n = i(""), r = C(e.request);
-    console.log("props.request", e.request), console.log("processInstanceApi", r);
-    const c = () => {
-      _.success("aaa!"), console.log(e.request), e.request.get({
-        url: "/system/bpm/process-instance/get-approval-detail",
-        params: {
-          processInstanceId: n.value
+    const n = useMessage(), d = t, k = f(!1), p = f({}), M = f({}), x = f(""), h = f([]), g = f(""), F = j(d.request), P = R(d.request), C = () => {
+      V.success("aaa!");
+    }, b = (a) => {
+      g.value = a, e(), w();
+    }, e = async () => {
+      var a, _;
+      try {
+        k.value = !0;
+        const o = await F.getApprovalDetail(g.value);
+        if (!o) {
+          n.error("查询不到审批详情信息！");
+          return;
+        }
+        if (!o.processDefinition || !o.processInstance) {
+          n.error("查询不到流程信息！");
+          return;
         }
-      });
-    }, a = (s) => {
-      n.value = s, r.getApprovalDetail(s).then((o) => {
-        console.log(o);
-      });
+        p.value = o == null ? void 0 : o.processInstance, x.value = (_ = (a = o == null ? void 0 : o.processInstance) == null ? void 0 : a.formVariables) == null ? void 0 : _.applicationPrefix, M.value = o == null ? void 0 : o.todoTask;
+      } finally {
+        k.value = !1;
+      }
+    }, w = async () => {
+      h.value = await P.getTaskListByProcessInstanceId(g.value);
     };
-    return u(
-      () => e.processInstanceId,
-      (s) => {
+    return E(
+      () => d.processInstanceId,
+      (a) => {
         debugger;
-        s && s !== n.value && a(s);
+        a && a !== g.value && b(a);
       },
       { immediate: !0, deep: !0 }
-    ), (s, o) => {
-      const p = m("el-button");
-      return g(), d(p, { onClick: c }, {
-        default: f(() => [...o[0] || (o[0] = [
-          v("aaaa", -1)
-        ])]),
-        _: 1
-      });
+    ), (a, _) => {
+      const o = m("el-button");
+      return r(), i(H, null, [
+        y(o, { onClick: C }, {
+          default: v(() => [..._[0] || (_[0] = [
+            I("测试按钮", -1)
+          ])]),
+          _: 1
+        }),
+        y(ie, {
+          "process-instance": p.value,
+          tasks: h.value,
+          onRefresh: w
+        }, null, 8, ["process-instance", "tasks"])
+      ], 64);
     };
   }
-}), A = {
+});
+const ue = /* @__PURE__ */ q(pe, [["__scopeId", "data-v-618a45b7"]]), fe = {
   install(t) {
-    t.component("CmcProcessFlow", I);
+    t.component("CmcProcessFlow", ue);
   }
 };
 export {
-  I as CmcProcessFlow,
-  A as default
+  ue as CmcProcessFlow,
+  fe as default
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("element-plus")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.NbbComponentUi={},t.Vue,t.ElementPlus))})(this,function(t,e,a){"use strict";const i=n=>({getApprovalDetail:async s=>await n.get({url:"/system/bpm/process-instance/get-approval-detail",params:{processInstanceId:s}})}),p=e.defineComponent({__name:"CmcProcessFlow",props:{processInstanceId:{},request:{}},setup(n){const s=n,r=e.ref(""),l=i(s.request);console.log("props.request",s.request),console.log("processInstanceApi",l);const d=()=>{a.ElMessage.success("aaa!"),console.log(s.request),s.request.get({url:"/system/bpm/process-instance/get-approval-detail",params:{processInstanceId:r.value}})},m=o=>{r.value=o,l.getApprovalDetail(o).then(c=>{console.log(c)})};return e.watch(()=>s.processInstanceId,o=>{debugger;o&&o!==r.value&&m(o)},{immediate:!0,deep:!0}),(o,c)=>{const f=e.resolveComponent("el-button");return e.openBlock(),e.createBlock(f,{onClick:d},{default:e.withCtx(()=>[...c[0]||(c[0]=[e.createTextVNode("aaaa",-1)])]),_:1})}}}),u={install(n){n.component("CmcProcessFlow",p)}};t.CmcProcessFlow=p,t.default=u,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("element-plus"),require("@/utils/formatTime")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus","@/utils/formatTime"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.NbbComponentUi={},c.Vue,c.ElementPlus,c.formatTime))})(this,function(c,e,B,d){"use strict";const T=n=>({getApprovalDetail:async s=>await n.get({url:"/system/bpm/process-instance/get-approval-detail",params:{processInstanceId:s}})}),E=n=>({getTaskListByProcessInstanceId:async s=>await n.get({url:"/system/bpm/task/list-by-process-instance-id",params:{processInstanceId:s}})}),b={class:"scroll-area"},S={class:"flow-header flex justify-between"},P={class:"text-18px font-bold"},F={class:"text-14px font-bold",style:{color:"#005aae"}},M={class:"flex items-center"},u={class:"flow-start"},L={key:0},U={class:"mt-30px block"},A=["src"],q={style:{"font-weight":"700"}},j={key:0,style:{"margin-right":"30px","font-weight":"normal"}},H={key:1,style:{"margin-right":"30px","font-weight":"normal"}},z={key:0,style:{"font-weight":"normal"}},O={key:1,style:{"font-weight":"normal",color:"#8a909c"}},R={key:2,style:{"font-weight":"normal"}},$={key:3,style:{"font-weight":"normal",color:"#8a909c"}},G={key:4,style:{"margin-left":"30px","font-weight":"normal"}},J={key:5,style:{"font-weight":"normal",color:"#8a909c"}},K={key:2},Q=e.defineComponent({name:"BpmProcessInstanceTaskList",__name:"CmcFlowList",props:{processInstance:{},tasks:{}},setup(n){const{t:s}=useI18n(),l={1:"svg-icon:approvalPending",2:"svg-icon:approvalPass",3:"svg-icon:approvalRejected",4:"svg-icon:approvalCanceled"},m=r=>[0,1,6,7].includes(r.status)?"primary":r.status===2?"success":r.status===3?"danger":r.status===4?"info":r.status===5?"warning":"";return e.ref(!1),(r,V)=>{var g;const y=e.resolveComponent("Icon"),_=e.resolveComponent("dict-tag"),p=e.resolveComponent("el-tag"),k=e.resolveComponent("el-card"),h=e.resolveComponent("el-timeline-item"),w=e.resolveComponent("el-timeline");return e.openBlock(),e.createElementBlock("div",b,[e.createElementVNode("div",S,[e.createElementVNode("div",P,[e.createElementVNode("span",null,e.toDisplayString(e.unref(s)("processFlow.flow")),1),e.createElementVNode("span",null,e.toDisplayString(n.processInstance.id),1)]),e.createElementVNode("div",F,[e.createElementVNode("span",null,e.toDisplayString(n.processInstance.name),1)])]),e.createElementVNode("div",M,[e.createElementVNode("div",u,[e.createElementVNode("p",null,e.toDisplayString(e.unref(s)("processFlow.startTime"))+e.toDisplayString(e.unref(d.formatDate)(n.processInstance.startTime)),1),e.createElementVNode("p",null,e.toDisplayString(e.unref(s)("processFlow.endTime"))+e.toDisplayString(e.unref(d.formatDate)(n.processInstance.endTime)),1),n.processInstance.durationInMillis?(e.openBlock(),e.createElementBlock("p",L,e.toDisplayString(e.unref(s)("processFlow.duration"))+e.toDisplayString(e.unref(d.formatPast2)((g=n.processInstance)==null?void 0:g.durationInMillis)),1)):e.createCommentVNode("",!0)]),e.createVNode(y,{size:100,icon:l[n.processInstance.status]||"svg-icon:approvalPending"},null,8,["icon"])]),e.createElementVNode("div",U,[e.createVNode(w,null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.tasks,(t,f)=>(e.openBlock(),e.createBlock(h,{key:f,type:m(t)||"info"},{dot:e.withCtx(()=>{var a;return[e.createElementVNode("img",{src:((a=t==null?void 0:t.assigneeUser)==null?void 0:a.avatar)||"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",class:"avatar-wrap"},null,8,A)]}),default:e.withCtx(()=>[e.createElementVNode("p",q,[e.createTextVNode(e.toDisplayString(t.name)+" ",1),t.status?(e.openBlock(),e.createBlock(_,{key:0,type:"bpm_task_status",value:t.status||""},null,8,["value"])):e.createCommentVNode("",!0)]),e.createVNode(k,{"body-style":{padding:"10px"}},{default:e.withCtx(()=>{var a,i,o,C;return[f===0?(e.openBlock(),e.createElementBlock("label",j,[e.createTextVNode(e.toDisplayString(((a=t.assigneeUser)==null?void 0:a.nickname)||((i=t.ownerUser)==null?void 0:i.nickname))+" ",1),e.createVNode(p,{size:"small",type:"info",style:{"vertical-align":"1px"}},{default:e.withCtx(()=>{var D,x;return[e.createTextVNode(e.toDisplayString((x=(D=n.processInstance)==null?void 0:D.startUser)==null?void 0:x.deptName),1)]}),_:1})])):e.createCommentVNode("",!0),t.assigneeUser?(e.openBlock(),e.createElementBlock("label",H,[e.createTextVNode(e.toDisplayString(e.unref(s)("processFlow.approver"))+e.toDisplayString(((o=t.assigneeUser)==null?void 0:o.nickname)||((C=t.ownerUser)==null?void 0:C.nickname))+" ",1),e.createVNode(p,{size:"small",type:"info",style:{"vertical-align":"1px"}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.assigneeUser.deptName),1)]),_:2},1024)])):e.createCommentVNode("",!0),e.createElementVNode("div",null,[t.createTime&&!t.endTime?(e.openBlock(),e.createElementBlock("label",z,e.toDisplayString(e.unref(s)("processFlow.createTime")),1)):e.createCommentVNode("",!0),t.createTime&&!t.endTime?(e.openBlock(),e.createElementBlock("label",O,e.toDisplayString(e.unref(d.formatDate)(t==null?void 0:t.createTime,"MM-DD HH:mm")),1)):e.createCommentVNode("",!0),t.endTime?(e.openBlock(),e.createElementBlock("label",R,e.toDisplayString(e.unref(s)("processFlow.approvalTime")),1)):e.createCommentVNode("",!0),t.endTime?(e.openBlock(),e.createElementBlock("label",$,e.toDisplayString(e.unref(d.formatDate)(t==null?void 0:t.endTime,"MM-DD HH:mm")),1)):e.createCommentVNode("",!0),t.durationInMillis?(e.openBlock(),e.createElementBlock("label",G,e.toDisplayString(e.unref(s)("processFlow.duration")),1)):e.createCommentVNode("",!0),t.durationInMillis?(e.openBlock(),e.createElementBlock("label",J,e.toDisplayString(e.unref(d.formatPast2)(t==null?void 0:t.durationInMillis)),1)):e.createCommentVNode("",!0)]),t.reason?(e.openBlock(),e.createElementBlock("div",K,e.toDisplayString(e.unref(s)("processFlow.approvalSuggestion"))+e.toDisplayString(t.reason),1)):e.createCommentVNode("",!0)]}),_:2},1024)]),_:2},1032,["type"]))),128))]),_:1})])])}}}),Z="",N=(n,s)=>{const l=n.__vccOpts||n;for(const[m,r]of s)l[m]=r;return l},W=N(Q,[["__scopeId","data-v-6f63ddea"]]),X=e.defineComponent({__name:"CmcProcessFlow",props:{processInstanceId:{},request:{}},setup(n){const s=useMessage(),l=n,m=e.ref(!1),r=e.ref({}),V=e.ref({}),y=e.ref(""),_=e.ref([]),p=e.ref(""),k=T(l.request),h=E(l.request),w=()=>{B.ElMessage.success("aaa!")},g=a=>{p.value=a,t(),f()},t=async()=>{var a,i;try{m.value=!0;const o=await k.getApprovalDetail(p.value);if(!o){s.error("查询不到审批详情信息！");return}if(!o.processDefinition||!o.processInstance){s.error("查询不到流程信息！");return}r.value=o==null?void 0:o.processInstance,y.value=(i=(a=o==null?void 0:o.processInstance)==null?void 0:a.formVariables)==null?void 0:i.applicationPrefix,V.value=o==null?void 0:o.todoTask}finally{m.value=!1}},f=async()=>{_.value=await h.getTaskListByProcessInstanceId(p.value)};return e.watch(()=>l.processInstanceId,a=>{debugger;a&&a!==p.value&&g(a)},{immediate:!0,deep:!0}),(a,i)=>{const o=e.resolveComponent("el-button");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(o,{onClick:w},{default:e.withCtx(()=>[...i[0]||(i[0]=[e.createTextVNode("测试按钮",-1)])]),_:1}),e.createVNode(W,{"process-instance":r.value,tasks:_.value,onRefresh:f},null,8,["process-instance","tasks"])],64)}}}),v="",I=N(X,[["__scopeId","data-v-618a45b7"]]),Y={install(n){n.component("CmcProcessFlow",I)}};c.CmcProcessFlow=I,c.default=Y,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/src/ProcessFlow/src/CmcFlowList.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    processInstance: any;
+    tasks: any[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/src/api/task.d.ts

@@ -0,0 +1,3 @@
+export declare const createTaskApi: (request: any) => {
+    getTaskListByProcessInstanceId: (processInstanceId: string) => Promise<any>;
+};

package/dist/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";.avatar-wrap[data-v-6f63ddea]{width:40px;height:40px}.flow-start[data-v-6f63ddea]{width:70%;margin:10px auto;padding:0 10px 10px;background:rgb(245,247,253)}.flow-start p[data-v-6f63ddea]{margin:0;padding-top:10px;font-size:14px}[data-v-6f63ddea] .el-timeline-item__dot{left:-15px;top:-15px}.scroll-area[data-v-6f63ddea]{flex:1;min-height:0;overflow-y:auto}.process-container[data-v-618a45b7]{height:100%;box-sizing:border-box}.process-container[data-v-618a45b7]>.el-card__body{height:100%;padding-bottom:0}.process-container[data-v-618a45b7]>.el-card__body>div{height:100%;display:flex;flex-direction:column}.approval-actions[data-v-618a45b7]{margin:20px 0}.approval-actions .action-buttons[data-v-618a45b7]{display:flex;flex-direction:column;gap:12px}.approval-actions .action-buttons .basic-actions[data-v-618a45b7]{display:flex;gap:12px}.approval-actions .action-buttons .extended-actions[data-v-618a45b7]{display:flex;gap:12px;flex-wrap:wrap}.approval-dialogs[data-v-618a45b7]{display:contents}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nbb-component-ui",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -13,6 +13,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
     "element-plus": "^2.0.0",
+    "sass": "^1.99.0",
     "typescript": "^5.0.0",
     "vite": "^4.0.0",
     "vite-plugin-dts": "^4.5.4",

package/src/ProcessFlow/src/CmcFlowList.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="scroll-area">
+    <div class="flow-header flex justify-between">
+      <div class="text-18px font-bold">
+        <span>{{ t('processFlow.flow') }}</span>
+        <span>{{ processInstance.id }}</span>
+      </div>
+      <div class="text-14px font-bold" style="color: #005aae">
+        <span>{{ processInstance.name }}</span>
+      </div>
+    </div>
+    <div class="flex items-center">
+      <div class="flow-start">
+        <p>{{ t('processFlow.startTime') }}{{ formatDate(processInstance.startTime) }}</p>
+        <p>{{ t('processFlow.endTime') }}{{ formatDate(processInstance.endTime) }}</p>
+        <p v-if="processInstance.durationInMillis">
+          {{ t('processFlow.duration') }}{{ formatPast2(processInstance?.durationInMillis) }}
+        </p>
+      </div>
+      <Icon
+          :size="100"
+          :icon="statusIconMapping[processInstance.status] || 'svg-icon:approvalPending'"
+      />
+    </div>
+
+    <div class="mt-30px block">
+      <el-timeline>
+        <el-timeline-item
+            v-for="(item, index) in tasks"
+            :key="index"
+            :type="getTaskTimelineItemType(item) || 'info'"
+        >
+          <template #dot>
+            <img
+                :src="
+                item?.assigneeUser?.avatar ||
+                'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
+              "
+                class="avatar-wrap"
+            />
+          </template>
+          <p style="font-weight: 700">
+            {{ item.name }}
+            <dict-tag
+                v-if="item.status"
+                :type="'bpm_task_status'"
+                :value="item.status || ''"
+            />
+          </p>
+
+          <el-card :body-style="{ padding: '10px' }">
+            <label v-if="index === 0" style="margin-right: 30px; font-weight: normal">
+              {{ item.assigneeUser?.nickname || item.ownerUser?.nickname }}
+              <el-tag size="small" type="info" style="vertical-align: 1px">{{
+                  processInstance?.startUser?.deptName
+                }}</el-tag>
+            </label>
+            <label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal">
+              {{ t('processFlow.approver') }}{{ item.assigneeUser?.nickname || item.ownerUser?.nickname }}
+              <el-tag size="small" type="info" style="vertical-align: 1px">{{
+                  item.assigneeUser.deptName
+                }}</el-tag>
+            </label>
+            <div>
+              <label v-if="item.createTime && !item.endTime" style="font-weight: normal"
+              >{{ t('processFlow.createTime') }}</label
+              >
+              <label
+                  v-if="item.createTime && !item.endTime"
+                  style="font-weight: normal; color: #8a909c"
+              >
+                {{ formatDate(item?.createTime, 'MM-DD HH:mm') }}
+              </label>
+              <label v-if="item.endTime" style="font-weight: normal"> {{ t('processFlow.approvalTime') }} </label>
+              <label v-if="item.endTime" style="font-weight: normal; color: #8a909c">
+                {{ formatDate(item?.endTime, 'MM-DD HH:mm') }}
+              </label>
+              <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
+                {{ t('processFlow.duration') }}
+              </label>
+              <label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
+                {{ formatPast2(item?.durationInMillis) }}
+              </label>
+            </div>
+            <div v-if="item.reason"> {{ t('processFlow.approvalSuggestion') }}{{ item.reason }} </div>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+  </div>
+</template>
+
+
+<script lang="ts" setup>
+// @ts-expect-error 运行时由宿主应用提供
+import { formatDate, formatPast2 } from '@/utils/formatTime'
+import {ref} from "vue";
+
+defineOptions({ name: 'BpmProcessInstanceTaskList' })
+// @ts-expect-error 运行时由宿主应用提供
+const { t } = useI18n()
+const statusIconMapping = {
+  1: 'svg-icon:approvalPending', // 审批中
+  2: 'svg-icon:approvalPass', // 通过
+  3: 'svg-icon:approvalRejected', // 拒绝
+  4: 'svg-icon:approvalCanceled' // 取消
+}
+
+const props = defineProps<{
+  processInstance: any
+  tasks: any[]
+}>()
+
+
+
+/** 获得任务对应的颜色 */
+const getTaskTimelineItemType = (item: any) => {
+  if ([0, 1, 6, 7].includes(item.status)) {
+    return 'primary'
+  }
+  if (item.status === 2) {
+    return 'success'
+  }
+  if (item.status === 3) {
+    return 'danger'
+  }
+  if (item.status === 4) {
+    return 'info'
+  }
+  if (item.status === 5) {
+    return 'warning'
+  }
+  return ''
+}
+
+const taskFormVisible = ref(false)
+</script>
+
+
+
+<style scoped lang="scss">
+.avatar-wrap {
+  width: 40px;
+  height: 40px;
+}
+.flow-start {
+  width: 70%;
+  margin: 10px auto;
+  padding: 10px;
+  padding-top: 0;
+  background: rgba(245, 247, 253, 1);
+
+  p {
+    margin: 0px;
+    padding-top: 10px;
+    font-size: 14px;
+  }
+}
+:deep(.el-timeline-item__dot) {
+  left: -15px;
+  top: -15px;
+}
+.scroll-area {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+</style>

package/src/ProcessFlow/src/CmcProcessFlow.vue

@@ -1,41 +1,75 @@
 <template>
-  <el-button @click="open">aaaa</el-button>
+  <el-button @click="open">测试按钮</el-button>
+  <!-- 审批记录列表 -->
+  <ProcessInstanceTaskList
+      :process-instance="processInstance"
+      :tasks="tasks"
+      @refresh="getTaskList"
+  />
 </template>
 
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
 import {ref, watch} from "vue";
 import {createProcessInstanceApi}  from "@/api/processInstance";
+import {createTaskApi} from "@/api/task";
+
+import ProcessInstanceTaskList from './CmcFlowList.vue'
+
+// @ts-expect-error 运行时由宿主应用提供
+const message = useMessage() // 消息弹窗
 
 const props = defineProps<{
   processInstanceId: string
   request: any
 }>()
 
+
+const processInstanceLoading = ref(false)
+const processInstance = ref<any>({})
+const todoTask = ref<any>({})
+const applicationPrefix = ref('')
+const tasks = ref<any[]>([])
+
 const id = ref<string>('')
 const processInstanceApi = createProcessInstanceApi(props.request)
-console.log('props.request', props.request)
-console.log('processInstanceApi', processInstanceApi)
+const taskApi = createTaskApi(props.request)
 
 
 const open = () => {
   ElMessage.success('aaa!')
-  console.log(props.request)
-  props.request.get({
-    url: `/system/bpm/process-instance/get-approval-detail`,
-    params: {
-      processInstanceId: id.value
-    }
-  })
 }
 
 const init = (processInstanceId: string) => {
   id.value = processInstanceId
-  processInstanceApi.getApprovalDetail(processInstanceId)
-      .then((res: any) => {
-        console.log(res)
-      })
+  getApprovalDetail()
+  getTaskList()
+}
 
+// 获取审批详情数据
+const getApprovalDetail =  async () => {
+  try {
+    processInstanceLoading.value = true
+    const data = await processInstanceApi.getApprovalDetail(id.value)
+    if (!data) {
+      message.error('查询不到审批详情信息！')
+      return
+    }
+    if (!data.processDefinition || !data.processInstance) {
+      message.error('查询不到流程信息！')
+      return
+    }
+    processInstance.value = data?.processInstance
+    applicationPrefix.value = data?.processInstance?.formVariables?.applicationPrefix
+    todoTask.value = data?.todoTask
+  } finally {
+    processInstanceLoading.value = false
+  }
+}
+
+// 获取任务列表
+const getTaskList = async () => {
+  tasks.value = await taskApi.getTaskListByProcessInstanceId(id.value)
 }
 
 watch(
@@ -50,6 +84,48 @@ watch(
 )
 </script>
 
-<style>
+<style scoped lang="scss">
+.process-container {
+  height: 100%;
+  box-sizing: border-box;
+
+  & > :deep(.el-card__body) {
+    height: 100%;
+    padding-bottom: 0;
 
+    & > div {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+
+// 审批操作区域样式
+.approval-actions {
+  margin: 20px 0;
+
+  .action-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .basic-actions {
+      display: flex;
+      gap: 12px;
+    }
+
+    .extended-actions {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+  }
+}
+
+// 审批弹窗区域样式
+.approval-dialogs {
+  /* 弹窗组件样式由各自组件管理 */
+  display: contents;
+}
 </style>

package/src/api/task.ts

@@ -0,0 +1,12 @@
+export const createTaskApi = (request: any) => ({
+    getTaskListByProcessInstanceId: async (processInstanceId: string) => {
+        return await request.get({
+            url: `/system/bpm/task/list-by-process-instance-id`,
+            params: {
+                processInstanceId
+            }
+        })
+    }
+})
+
+

package/vite.config.js

@@ -29,7 +29,10 @@ export default defineConfig({
     },
     rollupOptions: {
       // 【关键】外部化vue和element-plus，不打包进组件库
-      external: ['vue', 'element-plus'],
+      external: [
+        '@/utils/formatTime',
+        'vue',
+        'element-plus'],
       output: {
         // UMD模式下的全局变量名
         globals: {