npm install snakerflow-designer-vue@latest --save

npm install @logicflow/core@^1.1.3 --save
npm install @logicflow/extension@^1.1.3 --save
npm install clipboard@^2.0.10 --save
npm install vue-json-pretty@^1.8.2 --save

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false

// Импортируем компонентную библиотеку
import SnakerFlowDesigner from 'snakerflow-designer-vue'
// Регистрируем компонентную библиотеку
Vue.use(SnakerFlowDesigner)
Vue.use(ElementUI)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

npm install snakerflow-designer-vue@next --save

npm install @logicflow/core@^1.1.21 --save
npm install @logicflow/extension@^1.1.21 --save
npm install clipboard@^2.0.11 --save
npm install vue-json-pretty@^2.1.1 --save

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import SnakerFlowDesigner from 'snakerflow-designer-vue'
createApp(App).use(router).use(ElementPlus).use(SnakerFlowDesigner).mount('#app')

<!-- https://gitee.com/mldong/snakerflow-designer-vue/blob/master/examples/views/Home.vue -->
<SnakerFlowDesigner ref='designer' v-model="flowData" @on-save="handleSave"/>

<!-- https://gitee.com/mldong/snakerflow-designer-vue/blob/master/examples/views/Preview.vue -->
<SnakerFlowDesigner :viewer="true" ref='designer' v-model="flowData"/>

<!-- https://gitee.com/mldong/snakerflow-designer-vue/blob/master/examples/views/HighLight.vue -->
<SnakerFlowDesigner :viewer="true" ref='designer' v-model="flowData" :high-light="highLight"/>

<!-- https://gitee.com/mldong/snakerflow-designer-vue/blob/master/examples/views/Xml.vue -->
<SnakerFlowDesigner :viewer="true" ref='designer' v-model="flowData"/>

<SnakerFlowDesigner ref='designer' v-model="flowData" @on-save="handleSave">
  <template v-slot:form-item-task-assignee="{model,field}">
    <el-form-item label="Пользователь-участник">
      <el-input v-model="model[field]"></el-input>
    </el-form-item>
  </template>
</SnakerFlowDesigner>

npm install

npm run serve

npm run build

npm run lint

{
  "name": "leave",
  "displayName": "Отпуск",
  "expireTime": "",
  "instanceUrl": "leaveForm",
  "nodes": [
    {
      "id": "start",
      "type": "snaker:start",
      "x": 340,
      "y": 160,
      "properties": {},
      "text": {
        "x": 340,
        "y": 200,
        "value": "Начало"
      }
    },
    {
      "id": "apply",
      "type": "snaker:task",
      "x": 520,
      "y": 160,
      "properties": {
        "taskType": "Major",
        "performType": "ANY",
        "autoExecute": "N",
        "assignee": "approve.operator"
      },
      "text": {
        "x": 520,
        "y": 160,
        "value": "Подача заявления на отпуск"
      }
    },
    {
      "id": "approveDept",
      "type": "snaker:task",
      "x": 740,
      "y": 160,
      "properties": {
        "assignee": "",
        "taskType": "Major",
        "performType": "ANY",
        "autoExecute": "N",
        "assignmentHandler": "com.mldong.config.FlowAssignmentHandler"
      },
      "text": {
        "x": 740,
        "y": 160,
        "value": "Одобрение отдела"
      }
    },
    {
      "id": "end",
      "type": "snaker:end",
      "x": 1080,
      "y": 160,
      "properties": {},
      "text": {
        "x": 1080,
        "y": 200,
        "value": "Конец"
      }
    }
  ],
  "edges": [
    {
      "id": "3037be41-5682-4344-b94a-9faf5c3e62ba",
      "type": "snaker:transition",
      "sourceNodeId": "start",
      "targetNodeId": "apply",
      "startPoint": {
        "x": 358,
        "y": 160
      },
      "endPoint": {
        "x": 460,
        "y": 160
      },
      "properties": {},
      "pointsList": [
        {
          "x": 358,
          "y": 160
        },
        {
          "x": 460,
          "y": 160
        }
      ]
    }
  ]
}
``` ```
2c75eebf-5baf-4cd0-a7b3-05466be13634:
  targetNodeId: end
  startPoint: { x: 764, y: 339 }
  endPoint: { x: 1080, y: 178 }
  properties: { expr: "#f_day<3" }
  text: { x: 912, y: 339, value: "请假天数小于3" }
  pointsList: [
    { x: 764, y: 339 },
    { x: 1080, y: 339 },
    { x: 1080, y: 178 },
  ]
d7ec4166-f3fc-4fd6-a2ac-a6c4d509c4dd:
  id: d7ec4166-f3fc-4fd6-a2ac-a6c4d509c4dd
  type: snaker:transition
  sourceNodeId: 2c75eebf-5baf-4cd0-a7b3-05466be13634
  targetNodeId: approveBoss
  startPoint: { x: 740, y: 365 }
  endPoint: { x: 840, y: 480 }
  properties: { expr: "#f_day>=3" }
  text: { x: 740, y: 422.5, value: "请假天数大于等于3" }
  pointsList: [
    { x: 740, y: 365 },
    { x: 740, y: 480 },
    { x: 840, y: 480 },
  ]
a64348ec-4168-4f36-8a61-15cf12c710b9:
  id: a64348ec-4168-4f36-8a61-15cf12c710b9
  type: snaker:transition
  sourceNodeId: approveBoss
  targetNodeId: end
  startPoint: { x: 960, y: 480 }
  endPoint: { x: 1080, y: 142 }
  properties: {}
  pointsList: [
    { x: 960, y: 480 },
    { x: 1140, y: 480 },
    { x: 1140, y: 112 },
    { x: 1080, y: 112 },
    { x: 1080, y: 142 },
  ],