@it-enterprise/formio-widget

    1.0.28 • Public • Published

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

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

    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 и писать нужную нам логику для обработки запуска процессов.

    Keywords

    none

    Install

    npm i @it-enterprise/formio-widget

    DownloadsWeekly Downloads

    2

    Version

    1.0.28

    License

    none

    Unpacked Size

    31.3 kB

    Total Files

    18

    Last publish

    Collaborators

    • melentiev
    • bakharev
    • tokarchuk_it_enterprise
    • aleksandr.shevchenko
    • greatchief