@javaguns/flow-ui
Version:
``` <template> <a-spin :spinning="loading"> <FlowDesigner ref="flowDesigner" top="50px"> </FlowDesigner> </a-spin> </template> <script lang="ts" setup> import { ref, provide, onMounted } from 'vue'; import { FlowDesigner, LoadingKey } from '@j
151 lines (150 loc) • 6.54 kB
JavaScript
import { defineComponent as b, inject as u, onMounted as I, computed as c, openBlock as s, createElementBlock as m, normalizeStyle as f, unref as n, createBlock as d, withCtx as a, createElementVNode as t, resolveDynamicComponent as y, toDisplayString as l, renderSlot as S, normalizeClass as k, Fragment as B, renderList as E, createVNode as p, createTextVNode as G, createStaticVNode as T } from "vue";
import "./style/fresh.css";
import { pluginManager as N } from "@javaguns/utils";
import { NODE_SUB_TYPES_MAP as g } from "../../utils/constant.mjs";
import V from "../../hooks/useIcon.mjs";
import { TasksKey as D, ReadonlyKey as K, MinMapKey as P } from "../../utils/injection-key.mjs";
import { GunsPopover as R } from "@javaguns/ui";
import "../../flow-widget/flow-node-addbutton/index.mjs";
import "../../flow-widget/flow-node-delbutton/index.mjs";
import "../../flow-widget/flow-node-delconfirm/index.mjs";
import "../../flow-widget/flow-node-errorwarn/index.mjs";
import "../../flow-widget/flow-node-dragtool/index.mjs";
import "../../flow-widget/flow-node-zoom/index.mjs";
import { GunsFlowTaskStatus as F } from "../../flow-widget/flow-task-status/index.mjs";
import "../../flow-widget/flow-task-image/index.mjs";
import "../../flow-widget/flow-task-timeline/index.mjs";
import "../../flow-widget/flow-task-user/index.mjs";
const q = { class: "guns-flow-item-card-header" }, A = { class: "guns-flow-item-card-header-title" }, L = { class: "guns-flow-item-card-content" }, O = /* @__PURE__ */ t("div", { class: "guns-flow-item-card-footer" }, [
/* @__PURE__ */ t("div", { class: "guns-flow-item-card-footer-icon" }, [
/* @__PURE__ */ t("span", { class: "flowfont icon-shuju-fill" }),
/* @__PURE__ */ t("span", { class: "flowfont icon-gongzuoliuchengtu" })
]),
/* @__PURE__ */ t("div", { class: "guns-flow-item-card-footer-handle" }, [
/* @__PURE__ */ t("span", { class: "flowfont icon-fuzhiwenjian" })
])
], -1), U = { key: 1 }, W = { class: "guns-flow-item-card-header" }, Y = { class: "guns-flow-item-card-header-title" }, H = { class: "guns-flow-item-card-content" }, J = /* @__PURE__ */ T('<div class="guns-flow-item-card-footer"><div class="guns-flow-item-card-footer-icon"><span class="flowfont icon-shuju-fill"></span><span class="flowfont icon-gongzuoliuchengtu"></span></div><div class="guns-flow-item-card-footer-handle"><span class="flowfont icon-fuzhiwenjian"></span></div></div>', 1), Q = b({ name: "guns-square-node" }), ge = /* @__PURE__ */ b({
...Q,
props: {
type: {},
name: { default: "" },
node: { default: {
nodeName: "",
nodeStatus: -1,
color1: "rgb(0, 184, 120)",
color2: "rgb(0, 184, 120)",
color3: "rgb(0, 215, 138)"
} }
},
setup(z) {
const C = N.getComponent("Row"), w = N.getComponent("Col"), e = z, $ = u(D, []), j = u(K, !1), x = u(P, !1);
I(() => {
e.node || (e.node.nodeName = "", e.type == "begin" && !e.name ? e.node.nodeName = "发起节点" : e.type == g.approver && !e.name ? e.node.nodeName = "审批节点" : e.type == g.branch && !e.name ? e.node.nodeName = "条件" : e.type == g.cc && !e.name && (e.node.nodeName = "抄送节点"));
});
const { loadIcon: _ } = V(), v = c(() => $.value.filter((o) => o.ruNodeId == e.node.ruNodeId));
c(() => (o) => o.nodeStatus == -1 ? null : {
"node-status-not": o.nodeStatus == 0,
"node-status-current": o.nodeStatus == 1,
"node-status-complete": o.nodeStatus == 2,
"node-status-skip": o.nodeStatus == 3,
"node-status-reject": o.nodeStatus == 4,
"node-status-back": o.nodeStatus == 5,
"node-status-revoke": o.nodeStatus == 6
});
const M = c(() => (o, r) => {
if (o)
return {
background: `linear-gradient(271deg, ${r.color1} 9%, ${r.color2} 35%, ${r.color3} 90%)`
};
}), h = c(() => (o) => o.nodeStatus == -1 ? {
background: `linear-gradient(271deg, ${o.color1} 9%, ${o.color2} 35%, ${o.color3} 90%)`
} : null);
return (o, r) => (s(), m("div", {
class: "guns-flow-node-fresh",
style: f(M.value(n(x), e.node))
}, [
n(j) && v.value.length > 0 ? (s(), d(n(R), {
key: 0,
placement: "top",
width: 200,
trigger: "hover"
}, {
default: a(() => [
t("div", null, [
t("div", {
class: "guns-flow-item-card-top-bar",
style: f(h.value(e.node))
}, null, 4),
(s(), d(y(n(_)(e.node)), {
color: e.node.color1,
class: "guns-flow-item-card-img",
size: "20"
}, null, 8, ["color"])),
t("div", q, [
t("span", A, l(e.node.nodeName), 1)
]),
t("div", L, [
S(o.$slots, "context", {
currNode: e.node
}, () => [
t("pre", {
class: k({ "guns-flow-node-main-context": !e.node.content })
}, l(e.node.content ? e.node.content : "设置此节点"), 3)
])
]),
O
])
]),
content: a(() => [
(s(!0), m(B, null, E(v.value, (i) => (s(), d(n(C), {
key: i.taskId,
"column-num": 2
}, {
default: a(() => [
p(n(w), { span: 14 }, {
default: a(() => [
G(l(i.approverWrapper), 1)
]),
_: 2
}, 1024),
p(n(w), { span: 10 }, {
default: a(() => [
p(n(F), { task: i }, null, 8, ["task"])
]),
_: 2
}, 1024)
]),
_: 2
}, 1024))), 128))
]),
_: 3
})) : (s(), m("div", U, [
t("div", {
class: "guns-flow-item-card-top-bar",
style: f(h.value(e.node))
}, null, 4),
(s(), d(y(n(_)(e.node)), {
color: e.node.color1,
class: "guns-flow-item-card-img",
size: "20"
}, null, 8, ["color"])),
t("div", W, [
t("span", Y, l(e.node.nodeName), 1)
]),
t("div", H, [
S(o.$slots, "context", {
currNode: e.node
}, () => [
t("pre", {
class: k({ "guns-flow-node-main-context": !e.node.content })
}, l(e.node.content ? e.node.content : "设置此节点"), 3)
])
]),
J
]))
], 4));
}
});
export {
ge as default
};