1.0.0 • Published 2 years ago

flowable-bpmn-modeler v1.0.0

Weekly downloads
4
License
MIT
Repository
github
Last release
2 years ago

Flowable-bpmn-modeler

🔥 本项目基于 vue ant design vuebpmn.io@7.0 ,实现 flowable 的 modeler 流程设计器

基于 workflow-bpmn-modeler 修改而来,原版采用 Vue element UI开发,有需要的可以链接直达,支持大佬!

预览

20201217173237 202012171732371 202012171732372 202012171732373

在线 demo

👉 https://bzw1204.github.io/flowable-bpmn-modeler/demo/

由于本项目么有上传到npm仓库,各位看官请自行下载集成或者使用大佬的版本

安装

# 安装
yarn add workflow-bpmn-modeler

使用说明(最简 demo)

<template>
  <div>
    <bpmn-modeler
      ref="refNode"
      :xml="xml"
      :users="users"
      :groups="groups"
      :is-view="false"
      @save="save"
    />
  </div>
</template>

<script>
import bpmnModeler from "workflow-bpmn-modeler";

export default {
  components: {
    bpmnModeler,
  },
  data() {
    return {
      xml: "", // 后端查询到的xml
      users: [
        { name: "张三", id: "zhangsan" },
        { name: "李四", id: "lisi" },
        { name: "王五", id: "wangwu" },
      ],
      groups: [
        { name: "web组", id: "web" },
        { name: "java组", id: "java" },
        { name: "python组", id: "python" },
      ],
      categorys: [
        { name: "OA", id: "oa" },
        { name: "财务", id: "finance" },
      ],
    };
  },
  methods: {
    getModelDetail() {
      // 发送请求,获取xml
      // this.xml = response.xml
    },
    save(data) {
      console.log(data);  // { process: {...}, xml: '...', svg: '...' }
    },
  },
};
</script>

iframe 部署

如果你的项目是 jquery 或 react 类项目,可以通过 iframe 的方式集成该流程设计器

本仓库通过 github pages 部署了静态页面,使用 jsdelivr 做 cdn ,国内访问也非常快速,所以你可以直接集成本仓库的页面,因为全部白嫖了 github 的资源,没有自己建服务器维护,所以不用担心资源失效问题。

当然你也可以在 docs/lib 文件夹下下载对应的版本,进行本地部署。

集成方式如下(ps:可直接拷贝以下代码到一个html文件中试一下):

<!DOCTYPE html>
<html lang="en">
  <body>
    <iframe
      src="https://goldsubmarine.github.io/workflow-bpmn-modeler/cdn/0.2.5/"
      id="myFrame"
      frameborder="0"
      width="100%"
      height="800px">
    </iframe>

    <script>
      let myFrame = document.getElementById("myFrame");
      // 获取到流程详情
      window.addEventListener("message", (event) => {
        console.log(event.data); // { xml: 'xxx', img: 'xxx', process: {} }
      });
      myFrame.onload = () => {
        let postMsg = {
          xml: "", // 后端查询到的xml,新建则为空串
          users: [
            { name: "张三1", id: "zhangsan" },
            { name: "李四1", id: "lisi" },
            { name: "王五1", id: "wangwu" },
          ],
          groups: [
            { name: "web组1", id: "web" },
            { name: "java组1", id: "java" },
            { name: "python组1", id: "python" },
          ]
          isView: false
        }
        // 设置初始化值
        myFrame.contentWindow.postMessage(postMsg, "*")
      }
    </script>
  </body>
</html>

关于定制

本组件对标的是 flowable 官方设计器,也就是实现 flowable 的 xml 规则标准,里面所用名词也都是官方文档中的专业术语。所以这个组件只是程序员在开发阶段,自己建模导出 xml 的工具,试图定制该建模器的行为都是不对的,不要把业务带到建模器中来!自己的业务应该另行开发增删改查来实现。

该组件未来也不会升级 UI 库和 vue。不管库是否兼容,通过 iframe 的方式集成建模器才是最简单正确的方式。

License

MIT

Copyright (c) 2020-present, charles

acornacorn-jsxacceptsacorn-walkaggregate-erroradd-dom-event-listenerajvaddressajv-errorsajv-keywordsalphanum-sortansi-escapesansi-colorsansi-htmlansi-regexansi-stylesany-promiseanymatchant-design-vuearchargparsearr-diffarr-unionaprobaarray-flattenarray-tree-filterarr-flattenarray-unionarray-uniqasn1array-uniqueasn1.jsassertassign-symbolsastral-regexasyncassert-plusasync-eachasync-limiterasynckitasync-validatoratobautoprefixeraws-sign2aws4babel-eslintbabel-helper-vue-jsx-merge-propsbabel-loaderbabel-plugin-dynamic-import-nodebabel-runtimebalanced-matchbasebase64-jsbatchbfjbcrypt-pbkdfbig.jsbinary-extensionsbn.jsbluebirdbody-parserbonjourboolbasebpmn-jsbrace-expansionbpmn-moddlebracesbrorandbrowserify-aesbrowserify-cipherbrowserify-desbrowserify-zlibbufferbrowserslistbrowserify-rsabuffer-frombuffer-indexofbuffer-jsonbuffer-xorbuiltin-status-codesbytescacachebrowserify-signcache-basecache-loadercall-me-maybecaller-callsitecallsitescamel-casecamelcasecaller-pathcaniuse-apicase-sensitive-paths-webpack-plugincaselesscaniuse-litechardetchalkcheck-typeschokidarchownrchrome-trace-eventci-infocipher-baseclass-utilsclassnamesclean-cssclean-stackcli-cursorcli-highlightcli-spinnerscli-widthclipboardycliuiclonecoacolorcolor-convertcolor-namecollection-visitcolor-stringcommandercombined-streamcomponent-classescolorettecomponent-emittercomponent-indexofcomponent-eventcommondircompressibleconcat-mapcompressionconcat-streamconnect-history-api-fallbackconsole-browserifyconsolidateconstants-browserifycontent-typecookiecontent-dispositionconvert-source-mapcookie-signaturecopy-concurrentlycopy-descriptorcopy-webpack-plugincore-jscore-js-compatcore-util-iscosmiconfigcreate-ecdhcreate-hashcreate-hmaccross-envcross-spawncrypto-browserifycss-color-namescss-declaration-sortercss-loadercss-selectcss-treecss-select-base-adaptercss-whatcss.escapecssesccssnano-preset-defaultcssnanocssnano-util-get-argumentscssnano-util-get-matchcssnano-util-raw-cachecssocssnano-util-same-parentcyclistdashdashde-indentdecamelizedebugdecode-uri-componentdeep-equaldeep-isdeepmergedefault-gatewaydefaultsdefine-propertiesdefine-propertydelayed-streamdeldepddes.jsdestroydetect-nodediagram-jsdiagram-js-direct-editingdiffie-hellmandir-globdididns-equaldns-packetdns-txtdoctrinedom-aligndom-closestdom-matchesdom-converterdom-scroll-into-viewdom-serializerdomain-browserdomelementtypedomifydomhandlerdomutilsdotenvdot-propdotenv-expandduplexerduplexifyeasy-stackecc-jsbnee-firstejselectron-to-chromiumelement-uiellipticemoji-regexemojis-listencodeurlenquire.jsend-of-streamenhanced-resolveenquirerentitieserrnoerror-exerror-stack-parseres-abstractes-to-primitiveescaladeescape-htmlescape-string-regexpeslinteslint-loadereslint-plugin-vueeslint-scopeeslint-utilseslint-visitor-keysespreeesprimaesqueryesrecurseestraverseetagesutilsevent-pubsubeventemitter3eventseventsourceevp_bytestokeyexecaexpand-bracketsextendexpressextend-shallowexternal-editorextglobextsprintffast-deep-equalfast-json-stable-stringifyfast-levenshteinfast-globfiguresfiggy-puddingfaye-websocketfile-entry-cachefile-loaderfilesizefill-rangefinalhandlerfind-cache-dirfind-upflat-cacheflattedflush-write-streamfollow-redirectsfor-inforever-agentform-datafragment-cachefrom2freshfs-extraforwardedfs-minipassfunction-bindfs-write-stream-atomicfs.realpathfunctional-red-black-treegensyncget-streamget-caller-fileget-valuegetpassglobglob-parentglob-to-regexpglobalsglobbygraceful-fsgzip-sizehammerjshandle-thinghar-schemahar-validatorhashas-flaghas-ansihas-symbolshas-valuehas-valueshash-basehash-sumhash.jshehex-color-regexhmac-drbghoopyhosted-git-infohighlight.jshpack.jshsl-regexhtml-comment-regexhsla-regexhtml-entitieshtml-minifierhtml-webpack-pluginhtml-tagshtmlparser2http-errorshttp-deceiverhttp-parser-jshttp-proxyhttp-proxy-middlewarehttps-browserifyhttp-signaturehuman-signalsiconv-liteicss-utilsieee754iferridsignoreimport-cwdimport-freshimport-fromimport-localimurmurhashindent-stringindexes-ofindexofinheritsinfer-ownerinflightinquirerinternal-ipintersperseinvariantipip-regexis-absolute-urlipaddr.jsis-accessor-descriptoris-binary-pathis-argumentsis-arrayishis-bufferis-callableis-ciis-color-stopis-date-objectis-data-descriptoris-descriptoris-directoryis-dockeris-extendableis-fullwidth-code-pointis-extglobis-globis-negative-zerois-mobileis-numberis-objis-path-cwdis-plain-objis-path-in-cwdis-path-insideis-plain-objectis-regexis-streamis-resolvableis-symbolis-svgis-windowsis-typedarrayis-wslismobilejsisexeisobjectisarrayjavascript-stringifyisstreamjs-queuejest-workerjs-messagejs-tokensjs-yamljsbnjsescjson-parse-even-better-errorsjson-schemajson-schema-traversejson-parse-better-errorsjson-stable-stringify-without-jsonifyjson2mqjson-stringify-safejson3jsonfilekillablejson5jsprimlaunch-editor-middlewarekind-oflevenklonalevnlaunch-editorlevenarylines-and-columnsloader-fs-cacheloader-runnerloader-utilslocate-pathlodashlodash.kebabcaselodash.defaultsdeeplodash.mapvalueslodash.clonedeeplodash.memoizelodash.toarraylodash.transformlodash.mergelodash.uniqlog-symbolsloglevelloose-envifylower-caselru-cachemd5.jsmatches-selectormake-dirmdn-datamap-cachemedia-typermerge-descriptorsmemory-fsmerge-source-mapmerge-streammap-visitmerge2micromatchmethodsmiller-rabinmime-dbmimemimic-fnmime-typesmin-dashmin-dommini-css-extract-pluginminimalistic-assertminimalistic-crypto-utilsminimatchminipassminimistminipass-collectminipass-flushmississippimixin-deepminipass-pipelinemoddle-xmlmoddlemkdirpmomentmsmove-concurrentlymulticast-dnsmutationobserver-shimmute-streammulticast-dns-service-typesnanomatchmznatural-comparenanopopnice-trynegotiatorno-caseneo-asyncnode-emojinode-ipcnode-forgenode-libs-browsernode-releasesnormalize-package-datanormalize-pathnormalize-rangenormalize-urlnormalize-wheelnpm-run-pathnth-checkoauth-signnum2fractionobject-assignobject-hashobject-isobject-copyobject-refsobject-inspectobject-keysobject-visitobject.assignobject.getownpropertydescriptorsobject.pickomit.jsobject.valueson-headersobufon-finishedonetimeonceopenopeneropnoptionatororaoriginalos-tmpdiros-browserifyp-finallyp-limitp-locatep-mapp-retryp-trypakoparallel-transformparent-moduleparam-caseparse-asn1parse-jsonparse5-htmlparser2-tree-adapterparse5parseurlpascalcasepath-dirnamepath-browserifypath-existspath-intersectionpath-is-absolutepath-keypath-to-regexppath-is-insidepath-parsepbkdf2path-typeperformance-nowpifypicomatchpinkiepkg-dirpinkie-promiseportfinderpnp-webpack-pluginposix-character-classespostcsspostcss-colorminpostcss-calcpostcss-convert-valuespostcss-discard-commentspostcss-discard-duplicatespostcss-discard-emptypostcss-discard-overriddenpostcss-loaderpostcss-minify-font-valuespostcss-load-configpostcss-merge-longhandpostcss-merge-rulespostcss-minify-gradientspostcss-minify-selectorspostcss-minify-paramspostcss-modules-local-by-defaultpostcss-modules-scopepostcss-modules-extract-importspostcss-modules-valuespostcss-normalize-charsetpostcss-normalize-positionspostcss-normalize-display-valuespostcss-normalize-unicodepostcss-normalize-repeat-stylepostcss-normalize-urlpostcss-normalize-stringpostcss-normalize-timing-functionspostcss-ordered-valuespostcss-reduce-transformspostcss-reduce-initialpostcss-svgopostcss-normalize-whitespacepostcss-selector-parserpostcss-value-parserpostcss-unique-selectorsprelude-lsprepend-httpprettierpretty-errorprocessprogressprocess-nextick-argsproxy-addrprrpromise-inflightpumppseudomappslpublic-encryptpumpifypunycodeqsqquery-stringquerystringquerystring-es3querystringifyrafrandombytesrandomfillrange-parserraw-bodyread-pkgreadable-streamreaddirpregenerateregenerate-unicode-propertiesregenerator-transformregenerator-runtimeregex-notregexp.prototype.flagsregexppregjsgenregexpu-corerelateurlregjsparserremove-trailing-separatorrenderkidrepeat-stringrepeat-elementrequire-directoryrequestrequire-main-filenamerequires-portresize-observer-polyfillresolve-cwdresolveresolve-fromresolve-urlretrestore-cursorretryrgb-regexrimrafrgba-regexripemd160run-asyncrun-queuerxjssafe-buffersafer-buffersafe-regexsass-loadersaxsasssaxenselfsignedselect-hoseschema-utilssemversendserialize-javascriptserve-staticserve-indexset-valueset-blockingsetprototypeofsha.jssetimmediateshallow-equalshallowequalshebang-commandshebang-regexshell-quotesignal-exitslashsimple-swizzlesnapdragonslice-ansisnapdragon-nodesockjssnapdragon-utilsockjs-clientsource-list-mapsort-keyssource-mapsource-map-resolvespdx-correctsource-map-supportspdx-exceptionssource-map-urlspdx-expression-parsespdx-license-idsspdyspdy-transportsplit-stringsprintf-jssshpkssristablestackframestatusesstatic-extendstream-browserifystream-eachstream-shiftstream-httpstrict-uri-encodestring-convertstring.prototype.trimendstring.prototype.trimstartstring-widthstring_decoderstrip-ansistrip-final-newlinestrip-eofstrip-indentsupports-colorstylehacksstrip-json-commentstablesvgosvg-tagstapableterserterser-webpack-plugintext-tablethread-loaderthenifythenify-allthrottle-debouncethrough2throughthunkytimers-browserifytimsorttiny-svgtinycolor2to-arraybufferto-fast-propertiestmpto-object-pathto-regexto-regex-rangetoidentifiertoposorttough-cookietryerts-pnptslibtty-browserifytunnel-agenttweetnacltype-checktype-festtypedarrayuglify-jstype-isunicode-canonical-property-names-ecmascriptunicode-match-property-ecmascriptunicode-match-property-value-ecmascriptunicode-property-aliases-ecmascriptunion-valueuniqsunique-sluguniquniversalifyunique-filenameunpipeunquoteunset-valueupathupper-caseuri-jsurixurl-parseurlurl-loaderuseutilutil-deprecateutil.promisifyutilautils-mergeuuidv8-compile-cachevalidate-npm-package-licensevaryverrorvcolorpickervendorsvm-browserifyvuevue-loadervue-eslint-parservue-hot-reload-apivue-loader-v16vue-refvue-style-loadervue-template-compilervue-template-es2015-compilerwarningwatchpackwatchpack-chokidar2wbufwcwidthwebpackwebpack-bundle-analyzerwebpack-chainwebpack-dev-middlewarewebpack-logwebpack-dev-serverwebpack-mergewebpack-sourceswebsocket-driverwebsocket-extensionswhichword-wrapworker-farmwhich-modulewrap-ansiwswritewrappyxcrudxtendyallisty18nyargsyargs-parseryorkie
1.0.0

2 years ago