@it-enterprise/formio-widget

Инициализация пакета в проекте

Для успешной работы пакета, его нужно инициализировать и передать все необходимые зависимости.

import formioWidget from '@it-enterprise/formio-widget'

const formioOptions = {
  auth,
  WsUrl: window.appConfig.WsUrl,
  GraphQlUrl: window.appConfig.GrapgQlUrl,
}

let dependencies = {
  i18n,
  axios,
  store,
  router
}

Vue.use(formioWidget, { formioOptions, dependencies })

Работа вместе с PagePlayer

import vuetifyWidgets from '@it-enterprise/page-player-vuetify-widgets/src/vuetify-widgets/index'
import { drFormio } from '@it-enterprise/formio-widget'
import pagePlayerPlugin from '@it-enterprise/page-player'

Vue.use(pagePlayerPlugin, {
  datasources: {
  },
  widgets: vuetifyWidgets.concat(drFormio),
  layouts: customLayouts
})

Пример полноценного рабочего main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import router from './router'
import store from './store'
import './registerServiceWorker'
import vuetify from './plugins/vuetify'
import './plugins/fontAwesome'
import customLayouts from './layouts/index'

import '@/plugins/graphql'
import { i18n } from './plugins/i18n'
import auth from '@it-enterprise/jwtauthentication'
import Localization from '@it-enterprise/localization'

import vuetifyWidgets from '@it-enterprise/page-player-vuetify-widgets/src/vuetify-widgets/index'
import { drFormio } from '@it-enterprise/formio-widget'
import pagePlayerPlugin from '@it-enterprise/page-player'

import MainLayout from './views/layouts/MainLayout.vue'
import FullPageLayout from './views/layouts/FullPage.vue'
import ExtendedLayout from './views/layouts/ExtendedLayout.vue'
Vue.component('MainLayout', MainLayout)
Vue.component('FullPageLayout', FullPageLayout)
Vue.component('ExtendedLayout', ExtendedLayout)

let dependencies = {
  i18n,
  axios,
  store,
  router
}

Vue.use(Localization, { dependencies })

Vue.use(pagePlayerPlugin, {
  datasources: {
  },
  widgets: vuetifyWidgets.concat(drFormio),
  layouts: customLayouts
})

Vue.config.productionTip = false

auth.config(
  {
    baseUrl: window.appConfig.GrapgQlUrl,
    onError: e => {
      switch (true) {
        case e.response && e.response.status === 400:
          auth.clearTokens()
          store.commit('SET_ERROR', i18n.t('login.credentialWrong'))
          break
        case e.response && e.response.status <= 500:
          store.commit('SET_ERROR', i18n.t('login.loginError'))
          throw new Error(e)
        default:
          break
      }
    }
  }
)

const formioOptions = {
  auth,
  WsUrl: window.appConfig.WsUrl,
  GraphQlUrl: window.appConfig.GrapgQlUrl,
}

import formioWidget from '@it-enterprise/formio-widget'
Vue.use(formioWidget, { formioOptions, dependencies })

new Vue({
  router,
  i18n,
  store,
  vuetify,
  render: h => h(App),
}).$mount('#app')

Обработка запуска процессов

Для возможности обработки процессов, нужно поместить виджет процессов в DataWidget. Кнопка запуска процессов генерирует событие ProccesStarted, которое можно обработать в CallAction(Обработчик событий) методе источника данных. В источнике данных в методе Refresh(Получение данных) добавляем пустой обект:

this.$store.commit(`${this.getStoreModuleName()}/setData`, {})

Пример обработки события ProccesStarted в методе CallAction:

if (actionName == 'ProccesStarted') {
    console.log('this is procces: ', parameters)
    if (parameters.result.Success) {
        this.$store.commit('SET_NOTIFY', { text: 'Збережено'})
        this.$router.push({name: 'HomePage'})
        return
    }
}

actionName - название события. parameters - возвращаемый результат з back-end'а. Поскольку, источник данных хранит в себе свойства: $router, $route, $store, через this мы можем обращатся к ним из метода CallAction и писать нужную нам логику для обработки запуска процессов.