{"_id":"@cw-flowable/vue-bpmn-modeler","name":"@cw-flowable/vue-bpmn-modeler","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"@cw-flowable/vue-bpmn-modeler","version":"0.0.0","description":"基于 `vue` `ant design vue`和 `bpmn.io@7.0` ，实现 flowable 的 modeler 模型设计器","main":"dist/flowable-bpmn-modeler.umd.min.js","scripts":{"dev":"vue-cli-service serve","demo":"cross-env NODE_ENV=demo vue-cli-service build","lib":"cross-env NODE_ENV=lib vue-cli-service build","cdn":"cross-env NODE_ENV=cdn vue-cli-service build","lint":"vue-cli-service lint","build":"cross-env NODE_ENV=build vue-cli-service build --target lib --inline-vue --entry package/index.js","prepublish":"yarn build","postpublish":"yarn lib && yarn cdn && yarn demo"},"keywords":["vue","Ant design","bpmn","flowable","模型设计器"],"license":"MIT","dependencies":{"ant-design-vue":"^1.7.2","bpmn-js":"^7.2.1","dom-parser":"^1.1.5","min-dash":"^4.2.2","vcolorpicker":"^1.0.3","vue":"^2.6.10"},"devDependencies":{"@vue/cli-plugin-babel":"^4.4.6","@vue/cli-plugin-eslint":"^4.4.6","@vue/cli-service":"^4.4.6","babel-eslint":"^10.1.0","cross-env":"^7.0.2","eslint":"^7.5.0","eslint-plugin-vue":"^6.2.2","sass":"^1.26.10","sass-loader":"^9.0.2","vue-template-compiler":"^2.6.11"},"gitHead":"2052082cd1b4f16a37b77f164087614672a5136d","_id":"@cw-flowable/vue-bpmn-modeler@0.0.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-apicOD3Fluvamsq/6RG1I1HAJBN3ynruZ5yIUXLnyki8wJWaeJW3UZA3OjWH6Dkphj3bA6yHzvIC/ZicFeQIpA==","shasum":"45220977d10b6ee91516c28217fb419404cf574b","tarball":"https://registry.npmjs.org/@cw-flowable/vue-bpmn-modeler/-/vue-bpmn-modeler-0.0.0.tgz","fileCount":49,"unpackedSize":10018361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCseUAPGSUnABod1S0GPpUghjmHR7/kwVLS3kmnA71EJAIhAPz5358bWB+alRKE1VhpKg5C8iuYn0ESmwBONs9xKqhs"}]},"_npmUser":{"name":"gungunj","email":"xue.wang118a@gmail.com"},"directories":{},"maintainers":[{"name":"gungunj","email":"xue.wang118a@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-bpmn-modeler_0.0.0_1730359551070_0.031405277044559865"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-31T07:25:50.968Z","0.0.0":"2024-10-31T07:25:51.328Z","modified":"2024-10-31T07:25:51.722Z"},"maintainers":[{"name":"gungunj","email":"xue.wang118a@gmail.com"}],"description":"基于 `vue` `ant design vue`和 `bpmn.io@7.0` ，实现 flowable 的 modeler 模型设计器","keywords":["vue","Ant design","bpmn","flowable","模型设计器"],"license":"MIT","readme":"# Flowable-bpmn-modeler\n\n🔥 本项目基于 `vue` `ant design vue` 和 `bpmn.io@7.0` ，实现 flowable 的 modeler 流程设计器\n\n基于 [workflow-bpmn-modeler](https://github.com/GoldSubmarine/workflow-bpmn-modeler) 修改而来，原版采用 Vue element UI开发，有需要的可以链接直达，支持大佬！\n## 预览\n\n![20201217173237](docs/picture/20201217173237.png)\n![202012171732371](docs/picture/202012171732371.png)\n![202012171732372](docs/picture/202012171732372.png)\n![202012171732373](docs/picture/202012171732373.png)\n\n## 在线 demo\n\n👉 https://bzw1204.github.io/flowable-bpmn-modeler/demo/\n\n\n## 安装\n\n```bash\n# 安装\nyarn add flowable-bpmn-modeler\n```\n\n## 使用说明（最简 demo）\n\n```vue\n<template>\n  <div>\n    <bpmn-modeler\n      ref=\"refNode\"\n      :xml=\"xml\"\n      :users=\"users\"\n      :groups=\"groups\"\n      :is-view=\"false\"\n      @save=\"save\"\n    />\n  </div>\n</template>\n\n<script>\nimport bpmnModeler from \"workflow-bpmn-modeler\";\n\nexport default {\n  components: {\n    bpmnModeler,\n  },\n  data() {\n    return {\n      xml: \"\", // 后端查询到的xml\n      users: [\n        { name: \"张三\", id: \"zhangsan\" },\n        { name: \"李四\", id: \"lisi\" },\n        { name: \"王五\", id: \"wangwu\" },\n      ],\n      groups: [\n        { name: \"web组\", id: \"web\" },\n        { name: \"java组\", id: \"java\" },\n        { name: \"python组\", id: \"python\" },\n      ],\n      categorys: [\n        { name: \"OA\", id: \"oa\" },\n        { name: \"财务\", id: \"finance\" },\n      ],\n    };\n  },\n  methods: {\n    getModelDetail() {\n      // 发送请求，获取xml\n      // this.xml = response.xml\n    },\n    save(data) {\n      console.log(data);  // { process: {...}, xml: '...', svg: '...' }\n    },\n  },\n};\n</script>\n```\n## 关于定制\n\n本组件对标的是 flowable 官方设计器，也就是实现 flowable 的 xml 规则标准，里面所用名词也都是官方文档中的专业术语。所以这个组件只是程序员在开发阶段，自己建模导出 xml 的工具，试图定制该建模器的行为都是不对的，不要把业务带到建模器中来！自己的业务应该另行开发增删改查来实现。\n\n该组件未来也不会升级 UI 库和 vue。不管库是否兼容，通过 iframe 的方式集成建模器才是最简单正确的方式。\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2020-present, charles\n","readmeFilename":"README.md"}