搜索szana8 / laraflow-go
Laraflow状态机的默认编辑器包。
Requires
- szana8/laraflow: 1.*
This package is auto-updated.
Last update: 2022-07-09 16:00:34 UTC
README
Laraflow Go 是基于 VueJS 框架和 GoJS JavaScript 库的 Laraflow 状态机的前端包。您可以轻松且优雅地编辑您的状态机。
[]
要求
此包依赖于 Laraflow 包。因此，在您使用此包之前，请执行 Laraflow 读取文件中的必要步骤。
您还需要安装 Vue js 和 go.js，然后再使用此包。
配置
GoJs 配置数组需要看起来像这样
[
'property_path' => 'last_state',
'steps' => [
[
'text' => 'Open',
'extra' => [
'color' => 'primary',
'category' => 'primary',
'loc' => '-72.8125 139'
]
],
[
'text' => 'In Progress',
'extra' => [
'color' => 'success',
'category' => 'warning',
'loc' => '-74.8125 452'
]
],
[
'text' => 'Resolved',
'extra' => [
'color' => 'success',
'category' => 'success',
'loc' => '280.1875 140'
]
],
[
'text' => 'Reopen',
'extra' => [
'color' => 'primary',
'category' => 'primary',
'loc' => '433.1875 535'
]
],
[
'text' => 'Closed',
'extra' => [
'color' => 'success',
'category' => 'success',
'loc' => '54.1875 299',
]
]
],
'transitions' => [
[
'from' => 0,
'to' => 1,
'text' => 'Start Progress',
'extra' => [
'fromPort' => 'B',
'toPort' => 'T',
'points' => [],
],
'callbacks' => [
'pre' => [],
'post' => []
],
'validators' => []
],
[
'from' => 1,
'to' => 0,
'text' => 'Stop Progress',
'extra' => [
'fromPort' => 'L',
'toPort' => 'L',
'points' => []
],
'callbacks' => [
'pre' => [],
'post' => []
],
'validators' => []
],
[
'from' => 1,
'to' => 2,
'text' => 'Resolve Issue',
'extra' => [
'fromPort' => 'R',
'toPort' => 'L',
'points' => []
],
'callbacks' => [
'pre' => [],
'post' => []
],
'validators' => []
],
[
'from' => 2,
'to' => 3,
'text' => 'Reopen Issue',
'extra' => [
'fromPort' => 'B',
'toPort' => 'T',
'points' => []
],
'callbacks' => [
'pre' => [],
'post' => []
],
'validators' => []
],
[
'from' => 3,
'to' => 2,
'text' => 'Resolve Issue',
'extra' => [
'fromPort' => 'R',
'toPort' => 'R',
'points' => []
],
'callbacks' => [
'pre' => [],
'post' => []
],
'validators' => []
],
[
'from' => 1,
'to' => 4,
'text' => 'Close Issue',
'extra' => [
'fromPort' => 'R',
'toPort' => 'L',
'points' => []
],
'callbacks' => [
'pre' => [],
'post' => []
],
'validators' => []
],
[
'from' => 3,
'to' => 4,
'text' => 'Close Issue',
'extra' => [
'fromPort' => 'R',
'toPort' => 'L',
'points' => []
],
'callbacks' => [
'pre' => [],
'post' => []
],
'validators' => []
],
],
];
安装
步骤 1
首先，您需要通过 composer 安装此包
composer require szana8/laraflow-go
步骤 2
您必须将 GojsAble 特性添加到存储配置数组的 Eloquent 模型中，并必须将这些两个属性添加到 append 数组中。
protected $appends = ['goJsObject', 'nodeDataArray', 'validators', 'callbacks'];
步骤 3
您必须将 LaraflowGoServiceProvider 添加到您的 config/app.php 文件中。
步骤 4
下一步是将 Vue 组件发布到您的项目中。
php artisan vendor:publish --tag=laraflow-go-components
在此步骤之后，您可以在配置目录中看到一个 laraflow-go.php 配置文件。此文件包含默认的状态机配置数组和一些验证规则。
步骤 5
您需要在 app.js 文件中导入 go.js
import * as go from "gojs"; window.GO = go.GraphObject.make;
步骤 6
如果您想使用设计器组件，您有两个选择。从组件目录导入 LaraflowDesigner 或在 resources/assets/js 中的 app.js 文件中注册组件。
Vue.component('laraflow-designer', require('./components/laraflow-go/LaraflowGoDesigner'));
这与 laraflow-transitions 组件类似，它提供了一个下拉按钮，其中包含从当前状态可用的所有步骤。
Vue.component('laraflow-transitions', require('./components/laraflow/laraflow-go/components/LaraflowTransitions'));
步骤 7
现在您可以在 blade 文件中使用此组件
<laraflow-designer :configuration="{{ json_encode($laraflow) }}" @updated="changed"></laraflow-designer>
$laraflow 是 Laraflow Eloquent 对象。终点是控制器更新函数的路由。保存函数只传递配置属性到控制器。
步骤 8
如果您使用过渡组件，您必须注意从父组件调用更新。当您更改状态时，过渡组件返回一个包含状态对象的更改事件。例如
changed(transition) {
axios.post('/issue/status/' + this.issue.id + '/' + transition.key).then((response) => {
// Success
}).catch((error) => {
// Catch the error messages
});
}
如果您一切顺利，您将看到这个编辑器： 
示例项目
您可以在以下链接看到“引擎”的实际运行情况：https://github.com/szana8/larascrum 将仓库克隆到您的本地机器后，安装所有composer和npm包，然后运行迁移和种子命令以生成一些用于测试的虚拟数据。