README

使用vuejs管理工作流程

ℹ️ 目前工作流程模块只运行在注册模块（测试版本）中

通过 composer 安装

$ composer require bantenprov/vue-workflow:dev-master

此模块需要 vue-guard 和 vue-trust

安装 vue guard 和 vue trust

$ composer require bantenprov/vue-guard:dev-master
$ composer require bantenprov/vue-trust:dev-master

vue guard 配置

Vue Guard 文档

vue trust 配置

Vue Trust 文档

安装并配置 vue-guard 和 vue-trust 后，继续配置 vue-workflow

编辑 config/app.php

'providers' => [        

        //....
        Emadadly\LaravelUuid\LaravelUuidServiceProvider::class,
        Bantenprov\VueWorkflow\VueWorkflowServiceProvider::class,

Artisan 命令

$ php artisan vendor:publish --tag=vue-workflow-config
$ php artisan vendor:publish --tag=vue-workflow-assets
$ php artisan migrate
$ php artisan vue-workflow:publish-trait

编辑 resources/assets/js/router/routes.js

{
      path: '/admin',
      name: 'admin',
      redirect: '/admin/dashboard',
      component: layout('Default'),
      children: [
        /* workflow route */      
        {
        path: '/admin/workflow',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/workflow/workflow.index.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Workflow"
        }
        },
        {
        path: '/admin/workflow/create',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/workflow/workflow.create.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Workflow | add"
        }
        },
        {
        path: '/admin/workflow/:id/show',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/workflow/workflow.show.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Workflow | show worfklow"
        }
        },
        {
        path: '/admin/workflow/:id/edit',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/workflow/workflow.edit.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Workflow | show worfklow"
        }
        },
        {
        path: '/admin/workflow/state',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/state/state.index.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "State"
        }
        },
        {
        path: '/admin/workflow/transition',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/transition/transition.index.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Transition"
        }
        },
        {
        path: '/admin/workflow/state/create',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/state/state.create.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "State | add new state"
        }
        },
        {
        path: '/admin/workflow/state/:id/edit',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/state/state.edit.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "State | edit state"
        }
        },
        {
        path: '/admin/workflow/transition',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/transition/transition.index.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Transition"
        }
        },
        {
        path: '/admin/workflow/transition/create',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/transition/transition.create.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Tranisiton | add transition"
        }
        },
        {
        path: '/admin/workflow/transition/:id/edit',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/transition/transition.edit.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Tranisiton | edit tranisiton"
        }
        },
        /* end workflow route */

编辑 resources/assets/js/app.js

//==== workflow menu
import workflow_menu from './components/bantenprov/vue-workflow/workflow_menu';

编辑 resources/assets/js/components.js

//== vue workflow process component

import WorkflowProcess from '~/components/views/bantenprov/vue-workflow/WorkflowProcess.vue';
Vue.component('workflow-process', WorkflowProcess);

使用方法

将下面的代码复制到 vue 组件中。以下示例使用在 Pendaftaran.show.vue 模块 Pendaftaran 中

工作流程组件

<workflow-process content-type="ContentType"></workflow-process>

props

• content-type : 模块使用的模型名称

<template>
  <div class="card">
    <div class="card-header">
      <i class="fa fa-table" aria-hidden="true"></i> Show pendaftaran {{ model.label }}

      <ul class="nav nav-pills card-header-pills pull-right">
        <li class="nav-item">
          <button class="btn btn-primary btn-sm" role="button" @click="back">
            <i class="fa fa-arrow-left" aria-hidden="true"></i>
          </button>
        </li>
      </ul>
    </div>

    <div class="card-body">
      <vue-form class="form-horizontal form-validation" :state="state" @submit.prevent="onSubmit">
        <div class="form-row">
          <div class="col-md">
            <b>Label :</b> {{ model.label }}
          </div>
        </div>

        <div class="form-row mt-4">
          <div class="col-md">
            <b>Description :</b> {{ model.description }}
          </div>
        </div>

        <div class="form-row mt-4">
            <div class="col-md">
                <b>Username :</b> {{ model.user.name }}
            </div>
        </div>

        <div class="form-row mt-4">
            <div class="col-md">
                <b>Kegiatan :</b> {{ model.kegiatan.label }}
            </div>
        </div>

        <!-- component vue-workfow  -->
        <workflow-process content-type="Pendaftaran"></workflow-process>
        <!-- end component vue-workfow-->
      </vue-form>
    </div>
  </div>
</template>

编辑 config/vue-workflow.php

'content_type' => [        
        ['id' => 1,'label' => 'Pendaftaran'],
    ]

ℹ️ 如果 content_type 有多个键（id），请使用顺序数字

使用多个 content type 的示例

'content_type' => [        
        ['id' => 1,'label' => 'Pendaftaran'],
        ['id' => 2,'label' => 'Siswa'],
    ]

编辑控制器

在此示例中，使用的是注册模块，因此编辑的是 vendor/bantenprov/pendaftaran/Http/Controllers/Http/PendaftaranController.php

添加以下 trait :

/* Use Workflow Trait */
use Bantenprov\VueWorkflow\Http\Traits\WorkflowTrait;

/**
 * The PendaftaranController class.
 *
 * @package Bantenprov\Pendaftaran
 * @author  bantenprov <developer.bantenprov@gmail.com>
 */
class PendaftaranController extends Controller
{  
    /* Use Workflow Trait */
    use WorkflowTrait;

store 方法 :

/**
  * Display the specified resource.
  *
  * @param  \App\Pendaftaran  $pendaftaran
  * @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
    $pendaftaran = $this->pendaftaran;

    $validator = Validator::make($request->all(), [
        'kegiatan_id' => 'required',
        'user_id' => 'required|max:16|unique:pendaftarans,user_id',
        'label' => 'required|max:16|unique:pendaftarans,label',
        'description' => 'max:255',
    ]);

    if($validator->fails()){

        $check = $pendaftaran->where('label',$request->label)->orWhere('user_id', $request->user_id)->whereNull('deleted_at')->count();

        if ($check > 0) {
            $response['message'] = 'Failed, label or user already exists';
        } else {
            /*
              $pendaftaran->kegiatan_id = $request->input('kegiatan_id');
              $pendaftaran->user_id = $request->input('user_id');
              $pendaftaran->label = $request->input('label');
              $pendaftaran->description = $request->input('description');                
              $pendaftaran->save();
            */

            /* Ganti dengan code di bawah ini */
            $this->insertWithWorkflow($pendaftaran, $request->all());

            $response['message'] = 'success';
        }
    } else {

        /*
          $pendaftaran->kegiatan_id = $request->input('kegiatan_id');
          $pendaftaran->user_id = $request->input('user_id');
          $pendaftaran->label = $request->input('label');
          $pendaftaran->description = $request->input('description');        
          $pendaftaran->save();
        */

        /* Ganti dengan code di bawah ini */

        $this->insertWithWorkflow($pendaftaran, $request->all());

        $response['message'] = 'success';
    }

    $response['status'] = true;

    return response()->json($response);
}

update 方法 :

public function update(Request $request, $id)
{
    $response = array();
    $message = array();

    $validator = Validator::make($request->all(), [
        'label' => 'required|unique:pendaftarans,label,'.$id,
        'user_id' => 'required|unique:pendaftarans,user_id,'.$id,            
        'kegiatan_id' => 'required',
        'description' => 'required'
    ]);

    if($validator->fails()){            
        foreach($validator->messages()->getMessages() as $key => $error){
            foreach($error AS $error_get) {
                array_push($message, $error_get);
            }                
        }   

        $get_request = $this->pendaftaran->find($id);

        $check_label = $this->pendaftaran->where('id','!=', $id)->where('label', $request->label);

        $check_user = $this->pendaftaran->where('id','!=', $id)->where('user_id', $request->user_id);

        if($check_label->count() > 0 || $check_user->count() > 0){
            $response['message'] = implode("\n",$message);
        }else{
            /*
              $pendaftaran->label = $request->input('label');
              $pendaftaran->description = $request->input('description');
              $pendaftaran->kegiatan_id = $request->input('kegiatan_id');
              $pendaftaran->user_id = $request->input('user_id');
              $pendaftaran->save();

              $response['message'] = 'success';
            */

            /* Ganti dengan code dibawah ini */

            $update = $this->updateWithWorkflow($this->pendaftaran->find($id), $id, $request->all());

            $response['message'] = $update['message'];
        }


    }else{

        /*
          $pendaftaran->label = $request->input('label');
          $pendaftaran->description = $request->input('description');
          $pendaftaran->kegiatan_id = $request->input('kegiatan_id');
          $pendaftaran->user_id = $request->input('user_id');
          $pendaftaran->save();

          $response['message'] = 'success';
        */

        /* Ganti dengan code dibawah ini */

        $update = $this->updateWithWorkflow($this->pendaftaran->find($id), $id, $request->all());

        $response['message'] = $update['message'];
    }

    $response['status'] = true;

    return response()->json($response);
}

进行测试

$ php artisan make:model Department -m

编辑文件 databases/miggrations/timestap_create_departments_table.php

Schema::create('departments', function (Blueprint $table) {
    $table->increments('id');
    $table->integer('user_id');
    $table->integer('kegiatan_id');
    $table->string('name');
    $table->timestamps();
});

编辑文件 app/Department.php

class Department extends Model
{
    protected $fillable = ['user_id', 'kegiatan_id', 'name'];

}

手动在 departments 表中测试内容

+----+---------+-------------+--------------+
| id | user_id | kegiatan_id |     name     |
+----+---------+-------------+--------------+
|  1 |    1    |      1      | Department 1 |
+----+---------+-------------+--------------+
|  2 |    2    |      2      | Department 2 |
+----+---------+-------------+--------------+

然后编辑文件 app/Http/Controllers/Traits/WorkflowConditionTrait.php

<?php

namespace App\Http\Controllers\Traits;
use App\Department;

/**
 * Trait WorkflowConditionTrait
 * @package App\Http\Controllers\Traits
 */
trait WorkflowConditionTrait
{    

    /**
     * @return bool
     */

    public function guard__propose_to_review($content_id){

        $check = \Bantenprov\Pendaftaran\Models\Bantenprov\Pendaftaran\Pendaftaran::find($content_id);
        $department = Department::where('kegiatan_id',$check->kegiatan_id)->first();
        if($department->user_id == \Auth::user()->id){
              return [
                  'error' => true,
                  'message' => 'Success update state.'
              ];
        }else{
              return [
                  'error' => true,
                  'message' => 'tidak mempunyai akses untuk ini.'
              ];
        }        

    }

}