Обучаю битриксу программистов, интеграторов. Подробнee ⇒

BX.Vue.component, BX.ajax.runComponentAction примеры



Про реализацию BX.ajax.runComponentAction норм (на мой взгляд) написано тут

;(function (window) {
  'use strict'

  /**
   * Module name
   * Some Component Vue component
   *
   * @package bitrix
   * @subpackage moduleName
   * @copyright 2001-2019 Bitrix
   */

  const BX = window.BX

  BX.Vue.component('nano-lic-managment', {
    /**
     * @emits 'sendEvent`' {text: string}
     */

    /**
     * @listens 'onModuleNameSomeComponentEvent' {} (global)
     */

    props: {},

    data() {
      return {
        message: 'message',
      }
    },

    created() {},

    beforeDestroy() {},

    methods: {
      newOrder: function () {
        store.commit('setNewOrderFlag', true)
        store.commit('setLicManagmentFlag', false)
        store.commit('setStatisticFlag', false)
      },
      licManagment: function () {
        store.commit('setNewOrderFlag', false)
        store.commit('setLicManagmentFlag', true)
        store.commit('setStatisticFlag', false)
      },
      statistic: function () {
        store.commit('setNewOrderFlag', false)
        store.commit('setLicManagmentFlag', false)
        store.commit('setStatisticFlag', true)
      },

      isNewOrder: function () {
        return this.$store.state.newOrderFlag
      },
      isOrderInfo: function () {
        return this.$store.state.orderInfo
      },
    },
    computed: {},

    template: `
    <div class="container-fluid">
    <div class="row">
        <div class="col-auto"><button class="ui-btn ui-btn-primary-dark" v-on:click="newOrder" v-bind:class="{uibtnactive:isNewOrder}">Отгрузка</button></div>
        <div class="col-auto"><button class="ui-btn ui-btn-primary-dark" v-on:click="licManagment">Управление лицензиями</button></div>
        <div class="col-auto"><button class="ui-btn ui-btn-primary-dark" v-on:click="statistic">Статистика</button></div>
    </div>
    <nano-lic-managment-search-order v-if="isNewOrder()"/>
    <nano-lic-managment-positions v-if="isOrderInfo()"/>
    </div>

    `,
  })

  BX.Vue.component('nano-lic-managment-search-order', {
    props: {},

    data() {
      return {
        numberOrder: '',
      }
    },

    created() {},

    beforeDestroy() {},

    methods: {
      isError: function () {
        return this.$store.state.isErrorSearchFlag
      },
      isAnswer: function () {
        return this.$store.state.orderInfo
      },
      searchOrder: function () {
        let x = this.$root
        x.$emit('searhOrderLoadFlag', {flag: true})
        store.commit('setOrderInfo', {})
        var request = BX.ajax.runComponentAction('admin:license.managment.dev', 'searchOrder', {
          mode: 'class',
          data: {
            number: this.numberOrder,
            sessid: BX.message('bitrix_sessid'),
          },
        })

        request.catch(function (response) {
          store.commit('setLicenseNew', [])
          store.commit('setLicenseProlong', [])
          store.commit('setLicenseAdd', [])
          store.commit('setLicenseSubscribe', [])

          //store.commit('setSearhOrderLoadFlag', false)
          store.commit('setIsErrorSearchFlag', true)
          x.$emit('searhOrderLoadFlag', {flag: false})
          store.commit('setErrorSearchMess', response.errors[response.errors.length - 1].message)
        })

        request.then(function (response) {
          if (response.status == 'success') {
            store.commit('setLicenseNew', [])
            store.commit('setLicenseProlong', [])
            store.commit('setLicenseAdd', [])
            store.commit('setLicenseSubscribe', [])

            // store.commit('setSearhOrderLoadFlag', false)
            x.$emit('searhOrderLoadFlag', {flag: true})
            store.commit('setIsErrorSearchFlag', false)
            store.commit('setErrorSearchMess', '')
            store.commit('setOrderInfo', response.data.orderInfo)
            const positions = []
            for (let index = 0; index < response.data.orderPositions.length; index++) {
              const element = response.data.orderPositions[index]
              element.licQuantity = parseInt(element.quantity)
              positions.push(element)
            }

            store.commit('setOrderPositions', positions)
          }
        })
      },
      toogle: function (e) {
        let element = e.target.parentNode.parentNode.parentNode.parentNode.lastElementChild
        if (element) {
          if (element.classList.contains('d-none')) {
            element.classList.remove('d-none')
          } else {
            element.classList.add('d-none')
          }
        }
      },
      toogleResponse: function (e) {
        let element = e.target.parentNode.parentNode.parentNode.lastElementChild
        if (element) {
          if (element.classList.contains('d-none')) {
            element.classList.remove('d-none')
          } else {
            element.classList.add('d-none')
          }
        }
      },
      removeLicense: function (instanse, id) {
        let curPositions = []
        let newCurposition = []
        let orderPositions = this.$store.state.orderPositions
        let newOrderPositions = []
        let method = ''
        switch (instanse) {
          case 'new':
            curPositions = this.$store.state.licenses.new
            method = 'setLicenseNew'
            break

          case 'prolong':
            curPositions = this.$store.state.licenses.prolong
            method = 'setLicenseProlong'
            break

          case 'add':
            curPositions = this.$store.state.licenses.add
            method = 'setLicenseAdd'
            break

          case 'subscribe':
            curPositions = this.$store.state.licenses.subscribe
            method = 'setLicenseSubscribe'
            break
        }
        for (let ind = 0; ind < orderPositions.length; ind++) {
          const position = orderPositions[ind]
          newOrderPositions.push(position)
        }

        for (let index = 0; index < curPositions[id].positions.length; index++) {
          let element = curPositions[id].positions[index]
          let flag = true
          for (let ind = 0; ind < newOrderPositions.length; ind++) {
            if (newOrderPositions[ind].id == element.id) {
              flag = false
              newOrderPositions[ind].licQuantity = parseInt(newOrderPositions[ind].licQuantity) + parseInt(element.licQuantity)
            }
          }
          if (flag) {
            newOrderPositions.push(element)
          }
        }

        for (let ind = 0; ind < curPositions.length; ind++) {
          if (ind != id) {
            newCurposition.push(curPositions[ind])
          }
        }
        store.commit(method, newCurposition)
        store.commit('setOrderPositions', newOrderPositions)
      },
      sendRequest: function (type, license) {
        return BX.ajax.runComponentAction('admin:license.managment.dev', 'send', {
          mode: 'class',
          data: {
            type: type,
            orderID: this.$store.state.orderInfo.id,
            license: license,
            sessid: BX.message('bitrix_sessid'),
          },
        })
      },

      isSended: function () {
        console.log(this.$store.state.orderSend);
        return this.$store.state.orderSend
      },

      send: function () {
        this.isSended = true
        for (let index = 0; index < this.$store.state.licenses.new.length; index++) {
          let license = this.$store.state.licenses.new[index]
          license.index = index
          if (!license.export) {
            store.commit('setParam', {type: 'new', index: index, param: {load: true}})
            store.commit('setOrderSend', true)
            let req = this.sendRequest('new', license)

            req.catch(function (response) {
              store.commit('setOrderSend', false)
              console.log(response.errors[response.errors.length - 1].message)
              //store.commit('setParam', {type: 'new', index: response.data.index, param: {load: false, export: response.data.export, text: response.data.text}})
            })

            req.then(function (response) {
              if (response.status == 'success') {
                store.commit('setParam', {type: 'new', index: response.data.index, param: {load: false, export: response.data.export, text: response.data.text, error: response.data.error}})
                store.commit('setOrderSend', false)
              }
            })
          }
        }

        for (let index = 0; index < this.$store.state.licenses.prolong.length; index++) {
          let license = this.$store.state.licenses.prolong[index]
          license.index = index
          if (!license.export) {
            store.commit('setOrderSend', true)

            store.commit('setParam', {type: 'prolong', index: index, param: {load: true}})
            let req = this.sendRequest('prolong', license)

            req.catch(function (response) {
              store.commit('setOrderSend', false)
              console.log(response.errors[response.errors.length - 1].message)
              //store.commit('setParam', {type: 'new', index: response.data.index, param: {load: false, export: response.data.export, text: response.data.text}})
            })

            req.then(function (response) {
              if (response.status == 'success') {
                store.commit('setParam', {type: 'prolong', index: response.data.index, param: {load: false, export: response.data.export, text: response.data.text, error: response.data.error}})
                store.commit('setOrderSend', false)
              }
            })
          }
        }

        for (let index = 0; index < this.$store.state.licenses.add.length; index++) {
          let license = this.$store.state.licenses.add[index]
          license.index = index
          if (!license.export) {
            store.commit('setOrderSend', true)
            store.commit('setParam', {type: 'add', index: index, param: {load: true}})
            let req = this.sendRequest('add', license)

            req.catch(function (response) {
              store.commit('setOrderSend', false)
              console.log(response.errors[response.errors.length - 1].message)
              //store.commit('setParam', {type: 'new', index: response.data.index, param: {load: false, export: response.data.export, text: response.data.text}})
            })

            req.then(function (response) {
              if (response.status == 'success') {
                store.commit('setParam', {type: 'add', index: response.data.index, param: {load: false, export: response.data.export, text: response.data.text, error: response.data.error}})
                store.commit('setOrderSend', false)
              }
            })
          }
        }

        for (let index = 0; index < this.$store.state.licenses.subscribe.length; index++) {
          let license = this.$store.state.licenses.subscribe[index]
          license.index = index
          if (!license.export) {
            store.commit('setOrderSend', true)
            store.commit('setParam', {type: 'subscribe', index: index, param: {load: true}})
            let req = this.sendRequest('subscribe', license)

            req.catch(function (response) {
              store.commit('setOrderSend', false)
              console.log(response.errors[response.errors.length - 1].message)
              //store.commit('setParam', {type: 'new', index: response.data.index, param: {load: false, export: response.data.export, text: response.data.text}})
            })

            req.then(function (response) {
              if (response.status == 'success') {
                store.commit('setParam', {type: 'subscribe', index: response.data.index, param: {load: false, export: response.data.export, text: response.data.text, error: response.data.error}})
                store.commit('setOrderSend', false)
              }
            })
          }
        }
      },
    },
    computed: {},

    template: `
    <div class="row mt-4 orderInfo py-4 align-items-center">
        <h5 class="col-auto">Новая отгрузка</h5>
        <label class="col-auto" for="numberOrder">№ счета</label>
        <div class="col-auto">
            <div class="ui-ctl ui-ctl-textbox">
                <input type="text" class="ui-ctl-element" id="numberOrder" v-model="numberOrder"/>
            </div>
        </div>
        <div class="col-auto"><button class="ui-btn ui-btn-primary-dark ui-btn-active" v-on:click="searchOrder"  v-if="this.numberOrder">Отгрузка</button>
        <button class="ui-btn ui-btn-primary-dark ui-btn-active ui-btn-disabled" v-on:click="searchOrder"  v-if="!this.numberOrder">Отгрузка</button>
        </div>
        <div class="col-12 mt-3" v-if="isError()">
            <div class="ui-alert ui-alert-danger mb-0">
                <span class="ui-alert-message">{{this.$store.state.ErrorSearchMess}}</span>
            </div>
        </div>
        <div class="col-12 mt-3" v-if="isAnswer()">
            <div class="ui-alert ui-alert-warning mb-0">
                <span class="ui-alert-message">
                  Счет #{{this.$store.state.orderInfo.id}} от {{this.$store.state.orderInfo.date}}<br />
                  Клиент: {{this.$store.state.orderInfo.companyName}} <b style="font-size: 0.9rem">({{this.$store.state.orderInfo.email}})</b><br />
                  Дилер: {{this.$store.state.orderInfo.dealer}} ({{this.$store.state.orderInfo.dealerEmail}})
                </span>
            </div>
            <div>
                <div class="mt-3" v-if="this.$store.state.licenses.new.length>0">
                    <div class="row mb-1 align-items-center" v-for="(item, index) in this.$store.state.licenses.new" :key="item.id" :id="item.id">
                        <div class="col-auto pr-1"  v-if="!item.export && !item.load">
                            <button class="ui-btn ui-btn-sm ui-btn-danger ui-btn-icon-remove" v-on:click="removeLicense('new',index)"></button>
                        </div>
                        <div class="col py-1">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <a href="javascript:void(0)" class="title__license" v-on:click="toogle($event)">{{ item.title }}</a>
                                </div>
                                <div class="col" v-if="item.error">
                                    <div class="ui-alert ui-alert-danger mb-0">
                                        <span class="ui-alert-message" v-html="item.text"></span>
                                    </div>
                                </div>
                                <div class="col" v-if="item.load">
                                   <img src="/bitrix/js/ui/forms/images/loader.svg"/>
                                </div>
                                <div class="col"  v-if="item.export && !item.error">
                                    <button class="ui-icon ui-icon-service-rest-contact-center" v-on:click="toogleResponse($event)"><i></i></button>
                                </div>
                                <div class="col-12 mt-2 d-none" v-if="item.export && !item.error">
                                    <div class="ui-alert ui-alert-info mb-0">
                                        <span class="ui-alert-message" v-html="item.text"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 py-3 positions-list d-none">
                            <div class="row positions mb-1" v-for="it in item.positions" :key="it.id" >
                                <div class="col px-1">
                                    {{it.title}} - {{it.licQuantity}} раб. мест
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-3" v-if="this.$store.state.licenses.prolong.length>0">
                    <div class="row mb-1" v-for="(item, index) in this.$store.state.licenses.prolong" :key="item.id" :id="item.id">
                        <div class="col-auto pr-1"  v-if="!item.export && !item.load">
                            <button class="ui-btn ui-btn-sm ui-btn-danger ui-btn-icon-remove" v-on:click="removeLicense('prolong',index)"></button>
                        </div>
                        <div class="col py-1">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <a href="javascript:void(0)" class="title__license" v-on:click="toogle($event)">{{ item.title }}</a>
                                </div>
                                <div class="col" v-if="item.error">
                                    <div class="ui-alert ui-alert-danger mb-0">
                                        <span class="ui-alert-message" v-html="item.text"></span>
                                    </div>
                                </div>
                                <div class="col" v-if="item.load">
                                <img src="/bitrix/js/ui/forms/images/loader.svg"/>
                                </div>
                                <div class="col"  v-if="item.export && !item.error">
                                    <button class="ui-icon ui-icon-service-rest-contact-center" v-on:click="toogleResponse($event)"><i></i></button>
                                </div>
                                <div class="col-12 mt-2 d-none" v-if="item.export && !item.error">
                                    <div class="ui-alert ui-alert-info mb-0">
                                        <span class="ui-alert-message" v-html="item.text"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 py-1 px-5 positions-list d-none">
                            <div class="row positions mb-1" v-for="it in item.positions" :key="it.id" >
                                <div class="col">
                                    {{it.title}} - {{it.licQuantity}} раб. мест
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-3" v-if="this.$store.state.licenses.add.length>0">
                    <div class="row mb-1" v-for="(item, index) in this.$store.state.licenses.add" :key="item.id" :id="item.id">
                        <div class="col-auto pr-1"  v-if="!item.export && !item.load">
                            <button class="ui-btn ui-btn-sm ui-btn-danger ui-btn-icon-remove" v-on:click="removeLicense('add',index)"></button>
                        </div>
                        <div class="col py-1">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <a href="javascript:void(0)" class="title__license" v-on:click="toogle($event)">{{ item.title }}</a>
                                </div>
                                <div class="col" v-if="item.error">
                                    <div class="ui-alert ui-alert-danger mb-0">
                                        <span class="ui-alert-message" v-html="item.text"></span>
                                    </div>
                                </div>
                                <div class="col" v-if="item.load">
                                <img src="/bitrix/js/ui/forms/images/loader.svg"/>
                                </div>
                                <div class="col"  v-if="item.export && !item.error">
                                    <button class="ui-icon ui-icon-service-rest-contact-center" v-on:click="toogleResponse($event)"><i></i></button>
                                </div>
                                <div class="col-12 mt-2 d-none" v-if="item.export && !item.error">
                                    <div class="ui-alert ui-alert-info mb-0">
                                        <span class="ui-alert-message" v-html="item.text"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 py-1 px-5 positions-list d-none">
                            <div class="row positions mb-1" v-for="it in item.positions" :key="it.id" >
                                <div class="col">
                                    {{it.title}} - {{it.licQuantity}} раб. мест
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-3" v-if="this.$store.state.licenses.subscribe.length>0">
                    <div class="row mb-1" v-for="(item, index) in this.$store.state.licenses.subscribe" :key="item.id" :id="item.id">
                        <div class="col-auto pr-1"  v-if="!item.export && !item.load">
                        <button class="ui-btn ui-btn-sm ui-btn-danger ui-btn-icon-remove" v-on:click="removeLicense('subscribe',index)"></button>
                        </div>
                <div class="col py-1">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <a href="javascript:void(0)" class="title__license" v-on:click="toogle($event)">{{ item.title }}</a>
                        </div>
                        <div class="col" v-if="item.error">
                            <div class="ui-alert ui-alert-danger mb-0">
                                <span class="ui-alert-message" v-html="item.text"></span>
                            </div>
                        </div>
                        <div class="col" v-if="item.load">
                        <img src="/bitrix/js/ui/forms/images/loader.svg"/>
                        </div>
                        <div class="col"  v-if="item.export && !item.error">
                            <button class="ui-icon ui-icon-service-rest-contact-center" v-on:click="toogleResponse($event)"><i></i></button>
                        </div>
                        <div class="col-12 mt-2 d-none" v-if="item.export && !item.error">
                            <div class="ui-alert ui-alert-info mb-0">
                                <span class="ui-alert-message" v-html="item.text"></span>
                            </div>
                        </div>
                    </div>
                </div>
                        <div class="col-12 py-1 px-5 positions-list d-none">
                            <div class="row positions mb-1" v-for="it in item.positions" :key="it.id" >
                                <div class="col">
                                    {{it.title}} - {{it.licQuantity}} раб. мест
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-3" v-if="!this.$store.state.orderSend && (this.$store.state.licenses.new.length>0 || this.$store.state.licenses.prolong.length>0 || this.$store.state.licenses.add.length>0 || this.$store.state.licenses.subscribe.length>0)"><button class="ui-btn ui-btn-primary-dark ui-btn-active" v-on:click="send">Отгрузить</button></div>

                <div class="mt-3" v-if="this.$store.state.orderSend"><button class="ui-btn ui-btn-primary-dark ui-btn-disabled ui-btn-wait">Отгружаем</button></div>
            </div>



        </div>
    </div>`,
  })

  BX.Vue.component('nano-lic-managment-positions', {
    props: {},

    data() {
      return {
        transfer: '',
        new: false,
        prolong: false,
        add: false,
        subscribe: false,

        newLicenseLogin: '',
        newLicenseDate: '',

        checkSerial: false,

        prolongLicenseSn: '',
        prolongLicenseSnChecked: false,
        prolongLicenseSnText: '',
        prolongLicenseDate: '',

        addLicenseSn: '',
        addLicenseSnText: '',
        addLicenseSnChecked: false,

        subscribeLicenseSn: '',
        subscribeLicenseSnText: '',
        subscribeLicenseSnChecked: false,
        subscribeLicenseDate: '',

        selected: '',
        newLicense: [],
        prolongLicense: [],
        addLicense: [],
        subscribeLicense: [],
      }
    },
    updated: function () {
      this.newLicenseLogin = this.$store.state.orderInfo.email
    },
    created() {
      this.$root.$on('searhOrderLoadFlag', this.onSearch)
    },

    beforeDestroy() {},

    methods: {
      onSearch: function (param) {
        this.newLicense = []
        this.prolongLicense = []
        this.addLicense = []
        this.subscribeLicense = []
      },
      setNewFlag: function () {
        this.new = true
        this.prolong = false
        this.add = false
        this.subscribe = false
      },
      setProlongFlag: function () {
        this.new = false
        this.prolong = true
        this.add = false
        this.subscribe = false
      },
      setAddFlag: function () {
        this.new = false
        this.prolong = false
        this.add = true
        this.subscribe = false
      },
      setSubscribeflag: function () {
        this.new = false
        this.prolong = false
        this.add = false
        this.subscribe = true
      },

      isNew: function () {
        return this.new
      },
      isProlong: function () {
        return this.prolong
      },
      isAdd: function () {
        return this.add
      },
      isSubscribe: function () {
        return this.subscribe
      },

      dragstart: function (e) {
        this.transfer = e.target.id
        e.target.classList.add('dragstart')
        e.target.parentNode.classList.add('dragstartBox')
        e.dataTransfer.setData('text', e.target.id)
      },

      doubleclick: function (e) {
        if (this.isNew() || this.isProlong() || this.isAdd() || this.isSubscribe()) {
          let elClick = e.target.parentNode
          let targetList = []

          if (this.isNew()) targetList = this.newLicense
          if (this.isProlong()) targetList = this.prolongLicense
          if (this.isAdd()) targetList = this.addLicense
          if (this.isSubscribe()) targetList = this.subscribeLicense

          const positions = []
          for (let index = 0; index < this.$store.state.orderPositions.length; index++) {
            let element = this.$store.state.orderPositions[index]

            if (element.id == elClick.dataset.id && parseInt(element.licQuantity) > 0) {
              element.licQuantity--
              let el = Object.assign({}, element)
              let isAdd = true
              if (targetList.length > 0) {
                for (let i = 0; i < targetList.length; i++) {
                  let cur = targetList[i]
                  if (cur.id == elClick.dataset.id) {
                    targetList[i].licQuantity = parseInt(targetList[i].licQuantity) + 1
                    isAdd = false
                  }
                }

                if (isAdd) {
                  el.licQuantity = 1
                  targetList.push(el)
                }
              } else {
                el.licQuantity = 1
                targetList.push(el)
              }
            }
            positions.push(element)
          }
          store.commit('setOrderPositions', positions)
        }
      },

      drop: function (e) {
        e.preventDefault()

        var draggedId = this.transfer
        var draggedEl = document.getElementById(draggedId)

        let boxLicense = document.getElementById('boxLicense')
        let dragableEl = boxLicense.querySelector('#box' + draggedEl.dataset.id)

        if (e.type != 'drop') {
          return false
        }
        if (draggedEl.parentNode == e.target || draggedEl.parentNode == e.target.parentNode.parentNode) {
          e.target.classList.remove('dragEnterBox')
          dragableEl.classList.remove('dragstart')
          boxLicense.classList.remove('dragstartBox')
          return false
        }

        let targetList = []
        switch (e.target.id) {
          case 'newLicenseList':
            targetList = this.newLicense
            break
          case 'prolongLicenseList':
            targetList = this.prolongLicense
            break
          case 'addLicenseList':
            targetList = this.addLicense
            break
          case 'subscribeLicenseList':
            targetList = this.subscribeLicense
            break

          default:
            break
        }

        const positions = []
        for (let index = 0; index < this.$store.state.orderPositions.length; index++) {
          let element = this.$store.state.orderPositions[index]

          if (element.id == draggedEl.dataset.id) {
            element.licQuantity--
            let el = Object.assign({}, element)
            let isAdd = true
            if (targetList.length > 0) {
              for (let i = 0; i < targetList.length; i++) {
                let cur = targetList[i]
                if (cur.id == draggedEl.dataset.id) {
                  targetList[i].licQuantity = parseInt(targetList[i].licQuantity) + 1
                  isAdd = false
                }
              }

              if (isAdd) {
                el.licQuantity = 1
                targetList.push(el)
              }
            } else {
              el.licQuantity = 1
              targetList.push(el)
            }
          }
          positions.push(element)
        }
        e.target.classList.remove('dragEnterBox')
        dragableEl.classList.remove('dragstart')
        boxLicense.classList.remove('dragstartBox')
        store.commit('setOrderPositions', positions)
      },

      dragenter: function (e) {
        e.target.classList.add('dragEnterBox')
        e.target.classList.remove('dragstartBox')
      },

      dragend: function (e) {
        var draggedId = this.transfer
        var draggedEl = document.getElementById(draggedId)

        let boxLicense = document.getElementById('boxLicense')
        let dragableEl = boxLicense.querySelector('#box' + draggedEl.dataset.id)

        e.target.classList.remove('dragEnterBox')
        dragableEl.classList.remove('dragstart')
        boxLicense.classList.remove('dragstartBox')
      },

      dragleave: function (e) {
        e.target.classList.remove('dragEnterBox')
      },

      getQuantityPosition: function (type, positionID) {
        let quantity = 0

        for (let index = 0; index < this.newLicense.length; index++) {
          if (this.newLicense[index].id == positionID && type != 'newLicense') {
            quantity = parseInt(quantity) + parseInt(this.newLicense[index].licQuantity)
          }
        }
        for (let index = 0; index < this.prolongLicense.length; index++) {
          if (this.prolongLicense[index].id == positionID && type != 'prolongLicense') {
            quantity = parseInt(quantity) + parseInt(this.prolongLicense[index].licQuantity)
          }
        }
        for (let index = 0; index < this.addLicense.length; index++) {
          if (this.addLicense[index].id == positionID && type != 'addLicense') {
            quantity = parseInt(quantity) + parseInt(this.addLicense[index].licQuantity)
          }
        }
        for (let index = 0; index < this.subscribeLicense.length; index++) {
          if (this.subscribeLicense[index].id == positionID && type != 'subscribeLicense') {
            quantity = parseInt(quantity) + parseInt(this.subscribeLicense[index].licQuantity)
          }
        }
        return quantity
      },

      changeLicQuantity: function (type, e) {
        const positions = []
        const pos = []
        var isChange = false
        let arrayLicense = []
        switch (type) {
          case 'newLicense':
            arrayLicense = this.newLicense
            break

          case 'prolongLicense':
            arrayLicense = this.prolongLicense
            break

          case 'addLicense':
            arrayLicense = this.addLicense

            break

          case 'subscribeLicense':
            arrayLicense = this.subscribeLicense
            break
        }

        for (let index = 0; index < this.$store.state.orderPositions.length; index++) {
          const element = this.$store.state.orderPositions[index]
          let flag = true
          if (element.quantity - e.target.value >= 0) {
            isChange = true
          }
          if (element.id == e.target.dataset.id && isChange) {
            //flag=false
            element.licQuantity = parseInt(element.quantity) - parseInt(this.getQuantityPosition(type, element.id)) - parseInt(e.target.value)
          }
          if (flag) {
            positions.push(element)
          }
        }

        for (let i = 0; i < arrayLicense.length; i++) {
          let el = arrayLicense[i]

          if (el.id == e.target.dataset.id && isChange) {
            el.licQuantity = parseInt(e.target.value)
          }
          pos.push(el)
        }

        this.savePosition(type, pos, positions)
        //store.commit('setOrderPositions', positions)
      },
      removePosition: function (type, id) {
        var pos = []
        var positions = []
        var q = 0
        var cur = {}
        switch (type) {
          case 'newLicense':
            var arrayLicense = this.newLicense
            break

          case 'prolongLicense':
            var arrayLicense = this.prolongLicense
            break

          case 'addLicense':
            var arrayLicense = this.addLicense

            break

          case 'subscribeLicense':
            var arrayLicense = this.subscribeLicense
            break
        }
        for (let index = 0; index < arrayLicense.length; index++) {
          let el = arrayLicense[index]
          if (parseInt(el.id) != parseInt(id)) {
            pos.push(el)
          } else {
            q = parseInt(el.licQuantity)
            positions.push(el)
          }
        }

        if (this.$store.state.orderPositions.length > 0) {
          for (let i = 0; i < this.$store.state.orderPositions.length; i++) {
            const element = this.$store.state.orderPositions[i]

            if (element.id == id) {
              element.licQuantity = parseInt(element.licQuantity) + parseInt(q)

              for (let index = 0; index < positions.length; index++) {
                const el = positions[index]
                if (el.id == element.id) {
                  positions.splice(index, 1)
                }
              }
            }
            positions.push(element)
          }
        }
        //console.log(positions)

        this.savePosition(type, pos, positions)
      },
      save: function (type) {
        let curPositions = []
        let element = {}
        switch (type) {
          case 'newLicense':
            curPositions = this.$store.state.licenses.new
            element = {}
            element.title = 'Новая лицензия ' + parseInt(this.$store.state.licenses.new.length + 1)
            element.login = this.newLicenseLogin
            element.date = this.newLicenseDate
            element.positions = this.newLicense
            curPositions.push(element)

            store.commit('setLicenseNew', curPositions)
            this.newLicense = []
            this.newLicenseDate = ''
            break

          case 'prolongLicense':
            curPositions = this.$store.state.licenses.prolong
            element = {}
            element.title = 'Продление лицензии ' + this.prolongLicenseSn
            element.positions = this.prolongLicense
            element.serialNumber = this.prolongLicenseSn
            curPositions.push(element)
            store.commit('setLicenseProlong', curPositions)
            this.prolongLicense = []
            this.prolongLicenseSn = ''
            break

          case 'addLicense':
            curPositions = this.$store.state.licenses.add
            element = {}
            element.title = 'Докупка лицензии ' + this.addLicenseSn
            element.positions = this.addLicense
            element.serialNumber = this.addLicenseSn
            curPositions.push(element)

            store.commit('setLicenseAdd', curPositions)
            this.addLicense = []
            this.addLicenseSn = ''
            break

          case 'subscribeLicense':
            curPositions = this.$store.state.licenses.subscribe
            element = {}
            element.title = 'Подписка ' + this.subscribeLicenseSn
            element.positions = this.subscribeLicense
            element.subscribeLicenseSn = this.subscribeLicenseSn
            curPositions.push(element)
            store.commit('setLicenseSubscribe', curPositions)
            this.subscribeLicense = []
            this.subscribeLicenseSn = ''
            break
        }
      },
      savePosition: function (type, positionsType, positionsBox) {
        switch (type) {
          case 'newLicense':
            this.newLicense = positionsType
            break

          case 'prolongLicense':
            this.prolongLicense = positionsType
            break

          case 'addLicense':
            this.addLicense = positionsType
            break

          case 'subscribeLicense':
            this.subscribeLicense = positionsType
            break
        }
        store.commit('setOrderPositions', positionsBox)
      },
      getMaxQuantity: function (type, positionID) {
        let quantity = 1
        for (let index = 0; index < this.$store.state.orderPositions.length; index++) {
          if (this.$store.state.orderPositions[index].id == positionID) {
            quantity = parseInt(this.$store.state.orderPositions[index].licQuantity)
          }
        }
        for (let index = 0; index < this.newLicense.length; index++) {
          if (this.newLicense[index].id == positionID && type == 'newLicense') {
            quantity = parseInt(quantity) + parseInt(this.newLicense[index].licQuantity)
          }
        }
        for (let index = 0; index < this.prolongLicense.length; index++) {
          if (this.prolongLicense[index].id == positionID && type == 'prolongLicense') {
            quantity = parseInt(quantity) + parseInt(this.prolongLicense[index].licQuantity)
          }
        }
        for (let index = 0; index < this.addLicense.length; index++) {
          if (this.addLicense[index].id == positionID && type == 'addLicense') {
            quantity = parseInt(quantity) + parseInt(this.addLicense[index].licQuantity)
          }
        }
        for (let index = 0; index < this.subscribeLicense.length; index++) {
          if (this.subscribeLicense[index].id == positionID && type == 'subscribeLicense') {
            quantity = parseInt(quantity) + parseInt(this.subscribeLicense[index].licQuantity)
          }
        }

        return quantity
      },
      isDrag: function (q) {
        if (q > 0) return true
        return false
      },
      isDragable: function (q) {
        if (q > 0 && (this.isNew() || this.isProlong() || this.isAdd() || this.isSubscribe())) return true
        return false
      },
      setTextSn: function (type, text) {
        switch (type) {
          case 'prolongLicense':
            this.prolongLicenseSnText = '123123'
            break

          case 'addLicense':
            this.addLicenseSnText = text
            break

          case 'subscribeLicense':
            this.subscribeLicenseSnText = text
            break
        }
      },

      checkSN: function (type) {
        let sn = ''
        switch (type) {
          case 'prolongLicense':
            sn = this.prolongLicenseSn
            this.checkSerial = true

            break

          case 'addLicense':
            sn = this.addLicenseSn
            this.checkSerial = true
            break

          case 'subscribeLicense':
            sn = this.subscribeLicenseSn
            this.checkSerial = true
            break
        }
        if (sn.length > 0) {
          var request = BX.ajax.runComponentAction('admin:license.managment.dev', 'checkSn', {
            mode: 'class',
            data: {
              sn: sn,
              type: type,
              sessid: BX.message('bitrix_sessid'),
            },
          })

          request.catch(function (response) {
            store.commit('setIsErrorSearchFlag', true)
            store.commit('setErrorSearchMess', response.errors[response.errors.length - 1].message)
          })

          request.then(function (response) {
            if (response.status == 'success') {
              switch (type) {
                case 'prolongLicense':
                  let checkResultText = 'дата окончания: ' + response.data.date + ', мест: ' + response.data.quantity + ', ' + response.data.networkType

                  if (response.data.hasModules == 'Y') checkResultText += ', модули: ' + response.data.modules

                  store.commit('setSerialProlongText', {sn: sn, text: checkResultText, checked: true})
                  break

                case 'addLicense':

                  let checkAddResultText = 'дата окончания: ' + response.data.date + ', мест: ' + response.data.quantity + ', ' + response.data.networkType

                  if (response.data.hasModules == 'Y') checkAddResultText += ', модули: ' + response.data.modules

                  store.commit('setSerialAddText', {sn: sn, text: checkAddResultText, checked: true})
                  break

                case 'subscribeLicense':
                  store.commit('setSerialSubscribeText', {
                    sn: sn,
                    checked: true,
                    subscription: response.data.subscription
                  })
                  break
              }
            }
          })
        }
      },
      isprolongLicenseSnChecked: function () {
        if (this.isprolongLicenseSnChecked.length > 0) return true

        return false
      },

      isClean: function () {
        let q = 0
        for (let index = 0; index < this.$store.state.orderPositions.length; index++) {
          const element = this.$store.state.orderPositions[index]
          q = parseInt(q) + parseInt(element.licQuantity)
        }

        if (q == 0) return true

        return false
      },
      dragAll: function () {
        if (this.isNew()) {
          if (this.newLicense.length > 0) {
            for (let index = 0; index < this.$store.state.orderPositions.length; index++) {
              const element = this.$store.state.orderPositions[index]
              let flag = true
              for (let i = 0; i < this.newLicense.length; i++) {
                const el = this.newLicense[i]
                if (el.id == element.id) {
                  this.newLicense[i].licQuantity = this.$store.state.orderPositions[index].licQuantity + el.licQuantity
                  flag = false
                }
              }
              if (flag) {
                this.newLicense.push(element)
              }
            }
          } else {
            this.newLicense = this.$store.state.orderPositions
          }
        }
        if (this.isProlong()) {
          if (this.prolongLicense.length > 0) {
            for (let index = 0; index < this.$store.state.orderPositions.length; index++) {
              const element = this.$store.state.orderPositions[index]
              let flag = true
              for (let i = 0; i < this.prolongLicense.length; i++) {
                const el = this.prolongLicense[i]
                if (el.id == element.id) {
                  this.prolongLicense[i].licQuantity = this.$store.state.orderPositions[index].licQuantity + el.licQuantity
                  flag = false
                }
              }
              if (flag) {
                this.prolongLicense.push(element)
              }
            }
          } else {
            this.prolongLicense = this.$store.state.orderPositions
          }
        }

        if (this.isAdd()) {
          if (this.prolongLicense.length > 0) {
            for (let index = 0; index < this.$store.state.orderPositions.length; index++) {
              const element = this.$store.state.orderPositions[index]
              let flag = true
              for (let i = 0; i < this.addLicense.length; i++) {
                const el = this.addLicense[i]
                if (el.id == element.id) {
                  this.addLicense[i].licQuantity = this.$store.state.orderPositions[index].licQuantity + el.licQuantity
                  flag = false
                }
              }
              if (flag) {
                this.addLicense.push(element)
              }
            }
          } else {
            this.addLicense = this.$store.state.orderPositions
          }
        }
        if (this.isSubscribe()) {
          if (this.prolongLicense.length > 0) {
            for (let index = 0; index < this.$store.state.orderPositions.length; index++) {
              const element = this.$store.state.orderPositions[index]
              let flag = true
              for (let i = 0; i < this.subscribeLicense.length; i++) {
                const el = this.subscribeLicense[i]
                if (el.id == element.id) {
                  this.subscribeLicense[i].licQuantity = this.$store.state.orderPositions[index].licQuantity + el.licQuantity
                  flag = false
                }
              }
              if (flag) {
                this.subscribeLicense.push(element)
              }
            }
          } else {
            this.subscribeLicense = this.$store.state.orderPositions
          }
        }

        store.commit('setOrderPositions', [])
      },
    },
    computed: {},

    template: `
    <div>
    <div class="row mt-4">
        <div class="col-4 mb-3">
            <h4 class="mb-0">Спецификация</h4>
        </div>
        <div class="col-auto px-0">
        <div class="ui-icon ui-icon-service-cart1"><i></i></div>
        </div>
        <div class="col-2">
        </div>
        <div class="col mb-3">
            <div class="row">
                <div class="col-auto">
                    <button class="ui-btn ui-btn-success" v-on:click="setNewFlag">Новая лицензия</button>
                </div>
                <div class="col-auto">
                    <button class="ui-btn ui-btn-success" v-on:click="setProlongFlag">Продление</button>
                </div>
                <div class="col-auto">
                    <button class="ui-btn ui-btn-success" v-on:click="setAddFlag">Докупка</button>
                </div>
                <div class="col-auto">
                    <button class="ui-btn ui-btn-success" v-on:click="setSubscribeflag">Подписка</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-4" id="boxLicense" data-drop-target="true" v-on:dragover="drop($event)" v-on:drop="drop($event)" v-on:dragenter="dragleave($event)" v-on:dragleave="dragleave($event)">

        <div class="ui-alert ui-alert-warning" v-if="isClean()">
            <span class="ui-alert-message">Все позиции выбраны</span>
        </div>

            <div v-if="isDrag(item.licQuantity) && !isClean()" :draggable="isDragable(item.licQuantity)" v-on:dblclick="doubleclick($event)" class="row no-gutters spec align-items-stretch mb-1" v-for="item in this.$store.state.orderPositions" :data-id="item.id" :key="item.id" :id="'box'+item.id" v-on:dragstart="dragstart($event)"  v-on:dragend="dragend($event)">
                <div class="col spec__title py-1 px-3">{{ item.title }}</div>
                <div class="col-auto spec__quantity py-1 px-3 d-flex align-items-center" style="width: 50px; text-align: center">
                    {{ item.licQuantity }}
                </div>
            </div>
        </div>
        <div class="col-auto align-self-start px-0 py-3">
            <button v-on:click="dragAll" class="ui-icon ui-icon-service-cart" v-if="this.$store.state.orderPositions.length>0 && (isNew() || isProlong() || isAdd() || isSubscribe())"><i></i></button>
            <div class="ui-icon ui-icon-service-cart" v-if="this.$store.state.orderPositions.length==0 || (!isNew() && !isProlong() && !isAdd() && !isSubscribe())"><i></i></div>
        </div>
        <div class="col-2">


        <div  v-if="!isNew() && !isProlong() && !isAdd() && !isSubscribe()" class="ui-alert ui-alert-info mb-0 py-0 px-0 align-items-center d-flex justify-content-center boxdrag"  style="height: 100%; background: #f6eef9; padding: 0" data-drop-target="false" ></div>

        <div  v-if="isNew()" class="ui-alert ui-alert-info mb-0 py-0 px-0 align-items-center d-flex justify-content-center boxdrag"  style="height: 100%; background: #f6eef9; padding: 0" data-drop-target="true" v-on:dragover="drop($event)" v-on:drop="drop($event)" v-on:dragenter="dragenter($event)" v-on:dragleave="dragleave($event)" id="newLicenseList"></div>

        <div v-if="isProlong()" class="ui-alert ui-alert-info mb-0 py-0 px-0 align-items-center d-flex justify-content-center boxdrag" data-drop-target="true" v-on:dragover="drop($event)" v-on:drop="drop($event)" v-on:dragenter="dragleave($event)" v-on:dragleave="dragleave($event)" id="prolongLicenseList" style="height: 100%; background: #f6eef9; padding: 0"></div>

        <div v-if="isAdd()" class="ui-alert ui-alert-info mb-0 py-0 px-0 align-items-center d-flex justify-content-center boxdrag" data-drop-target="true" v-on:dragover="drop($event)" v-on:drop="drop($event)" v-on:dragenter="dragleave($event)" v-on:dragleave="dragleave($event)" id="addLicenseList" style="height: 100%; background: #f6eef9; padding: 0"></div>

        <div v-if="isSubscribe()" class="ui-alert ui-alert-info mb-0 py-0 px-0 align-items-center d-flex justify-content-center boxdrag" data-drop-target="true" v-on:dragover="drop($event)" v-on:drop="drop($event)" v-on:dragenter="dragleave($event)" v-on:dragleave="dragleave($event)" id="subscribeLicenseList" style="height: 100%; background: #f6eef9; padding: 0"></div>

        </div>
        <div class="col">
            <div class="row mb-3" v-if="!isNew() && !isProlong() && !isAdd() && !isSubscribe()">
                <div class="col-12">
                    <div class="ui-alert ui-alert-warning mb-0 py-4">
                        <span class="ui-alert-message">Выберите тип новой лицензии </span>
                    </div>
                </div>
            </div>

            <div class="row" v-if="isNew()">
                <div class="col-12 ">
                    <div class="badge badge-info mb-3">Новая лицензия {{this.$store.state.licenses.new.length+1}}</div>

                    <table class="table table-borderless mb-0" style="width: auto">
                        <tr>
                            <td class="p-0" style="vertical-align: middle">
                                <label for="login" class="mb-3 label">Логин</label>
                            </td>
                            <td class="p-0 px-3" style="vertical-align: middle">
                                <div class="mb-3">
                                    <div class="ui-ctl ui-ctl-textbox ui-ctl-block ui-ctl-sm">
                                        <input value="" type="text" class="ui-ctl-element" id="newLicenseLogin" name="newLicenseLogin" v-model="newLicenseLogin" />
                                    </div>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="p-0" style="vertical-align: middle">
                                <label for="date" class="mb-3 label">Дата окончания</label>
                            </td>
                            <td class="p-0 px-3" style="vertical-align: middle">
                                <div class="mb-3">
                                    <div class="ui-ctl ui-ctl-textbox ui-ctl-block ui-ctl-sm">
                                        <input type="date" class="ui-ctl-element" id="date" name="date" v-model="newLicenseDate" />
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div class="row mb-3">
                        <div class="col-12" >
                            <div>
                                <div draggable="false" class="row no-gutters spec align-items-stretch mb-1" v-for="item in this.newLicense" :data-id="item.id" :key="item.id" :id="'box'+item.id" v-on:dragstart="dragstart($event)">
                                    <div class="col-auto spec__title py-1 px-1 d-flex">
                                        <button class="ui-btn ui-btn-sm ui-btn-danger ui-btn-icon-remove" v-on:click="removePosition('newLicense',item.id)"></button>
                                    </div>
                                    <div class="col spec__title py-1 px-3 d-flex align-items-center">
                                        {{ item.title }}
                                    </div>
                                    <div class="col-auto spec__quantity py-1 px-1 d-flex">
                                        <div class="ui-ctl ui-ctl-textbox ui-ctl-sm" style="width: 75px">
                                            <input type="number" :data-id="item.id" :value="item.licQuantity" :min="1" :max="getMaxQuantity('newLicense',item.id)" v-on:change="changeLicQuantity('newLicense',$event)" class="ui-ctl-element" />
                                        </div>
                                    </div>
                                </div>
                                <button class="ui-btn ui-btn-primary-dark ui-btn-lg w-100 mt-4" v-if="this.newLicense.length>0" v-on:click="save('newLicense')">
                                    Сохранить
                                </button>
                            </div>
                        </div>
                    </div>
                    </div>
            </div>
            <div class="row" v-if="isProlong()">
                <div class="col-12">
                    <div class="row mb-3">
                        <div class="col-12">
                        <div class="badge badge-info mb-3">Продление лицензии {{this.$store.state.licenses.prolong.length+1}}</div>

                    <table class="table table-borderless mb-0" style="width: auto">
                        <tr>
                            <td class="p-0" style="vertical-align: top">
                                <label for="login" class="mb-3 label">Серийный номер</label>
                            </td>
                            <td class="p-0 px-3" style="vertical-align: top">
                                <div class="mb-3">
                                    <div class="ui-ctl ui-ctl-textbox ui-ctl-block ui-ctl-sm" v-if="!this.$store.state.sn.prolong.checked">
                                        <input type="text" class="ui-ctl-element" id="sn" name="sn" v-model="prolongLicenseSn" />
                                    </div>
                                    <div class="ui-ctl ui-ctl-textbox ui-ctl-block ui-ctl-sm ui-ctl-success" v-if="this.$store.state.sn.prolong.checked">
                                        <input type="text" class="ui-ctl-element" id="sn" name="sn" v-model="prolongLicenseSn" />
                                    </div>

                                    <div class="ui-alert ui-alert-xs mt-3" v-if="this.$store.state.sn.prolong.checked">
                                        <span class="ui-alert-message">{{this.$store.state.sn.prolong.text}}</span>
                                    </div>

                                </div>
                            </td>
                            <td class="p-0 px-1" style="vertical-align: top" v-if="!this.$store.state.sn.prolong.checked && this.prolongLicenseSn.length>0">
                                <div class="mb-3">
                                  <button class="ui-btn ui-btn-primary ui-btn-sm" v-on:click="checkSN('prolongLicense')">Проверить</button>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="p-0" style="vertical-align: middle">
                                <label for="date" class="mb-3 label">Дата окончания</label>
                            </td>
                            <td class="p-0 px-3" style="vertical-align: middle">
                                <div class="mb-3">
                                    <div class="ui-ctl ui-ctl-textbox ui-ctl-block ui-ctl-sm">
                                        <input type="date" class="ui-ctl-element" id="date" name="date" v-model="prolongLicenseDate" />
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                            <div>
                                <div draggable="false" class="row no-gutters spec align-items-stretch mb-1" v-for="item in this.prolongLicense" :data-id="item.id" :key="item.id" :id="'box'+item.id" v-on:dragstart="dragstart($event)">
                                    <div class="col-auto spec__title py-1 px-1 d-flex">
                                        <button class="ui-btn ui-btn-sm ui-btn-danger ui-btn-icon-remove" v-on:click="removePosition('prolongLicense',item.id)"></button>
                                    </div>
                                    <div class="col spec__title py-1 px-3 d-flex align-items-center">
                                        {{ item.title }}
                                    </div>
                                    <div class="col-auto spec__quantity py-1 px-1 d-flex">
                                        <div class="ui-ctl ui-ctl-textbox ui-ctl-sm" style="width: 75px">
                                            <input type="number" :data-id="item.id" :value="item.licQuantity" :min="1" :max="getMaxQuantity('prolongLicense',item.id)" v-on:change="changeLicQuantity('prolongLicense',$event)" class="ui-ctl-element" />
                                        </div>
                                    </div>
                                </div>
                                <button class="ui-btn ui-btn-primary-dark ui-btn-lg w-100 mt-4" v-if="this.prolongLicense.length>0 && this.$store.state.sn.prolong.checked" v-on:click="save('prolongLicense')">
                                    Сохранить
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" v-if="isAdd()">
                <div class="col-12">
                    <div class="row mb-3">
                        <div class="col-12">

                        <div class="badge badge-info mb-3">Докупка лицензии {{this.$store.state.licenses.add.length+1}}</div>

                        <table class="table table-borderless mb-0" style="width: auto">
                            <tr>
                                <td class="p-0" style="vertical-align: middle">
                                    <label for="login" class="mb-3 label">Серийный номер</label>
                                </td>
                                <td class="p-0 px-3" style="vertical-align: middle">
                                    <div class="mb-3">
                                        <div class="ui-ctl ui-ctl-textbox ui-ctl-block ui-ctl-sm ui-ctl-success" v-if="this.$store.state.sn.add.checked">
                                            <input type="text" class="ui-ctl-element" id="sn" name="sn" v-model="addLicenseSn" />
                                        </div>
                                        <div class="ui-ctl ui-ctl-textbox ui-ctl-block ui-ctl-sm" v-if="!this.$store.state.sn.add.checked">
                                            <input type="text" class="ui-ctl-element" id="sn" name="sn" v-model="addLicenseSn" />
                                        </div>
                                        <div class="ui-alert ui-alert-xs mt-3" v-if="this.$store.state.sn.add.checked">
                                            <span class="ui-alert-message">{{this.$store.state.sn.add.text}}</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="p-0 px-1" style="vertical-align: top" v-if="!this.$store.state.sn.add.checked && this.addLicenseSn.length>0">
                                    <div class="mb-3">
                                        <button class="ui-btn ui-btn-primary ui-btn-sm" v-on:click="checkSN('addLicense')">Проверить</button>
                                    </div>
                                </td>
                            </tr>
                        </table>


                            <div>
                                <div draggable="false" class="row no-gutters spec align-items-stretch mb-1" v-for="item in this.addLicense" :data-id="item.id" :key="item.id" :id="'box'+item.id" v-on:dragstart="dragstart($event)">
                                    <div class="col-auto spec__title py-1 px-1 d-flex">
                                        <button class="ui-btn ui-btn-sm ui-btn-danger ui-btn-icon-remove" v-on:click="removePosition('addLicense',item.id)"></button>
                                    </div>
                                    <div class="col spec__title py-1 px-3 d-flex align-items-center">
                                        {{ item.title }}
                                    </div>
                                    <div class="col-auto spec__quantity py-1 px-1 d-flex">
                                        <div class="ui-ctl ui-ctl-textbox ui-ctl-sm" style="width: 75px">
                                            <input type="number" :data-id="item.id" :value="item.licQuantity" :min="1" :max="getMaxQuantity('addLicense',item.id)" v-on:change="changeLicQuantity('addLicense',$event)" class="ui-ctl-element" />
                                        </div>
                                    </div>
                                </div>
                                <button class="ui-btn ui-btn-primary-dark ui-btn-lg w-100 mt-4" v-if="this.addLicense.length>0  && this.$store.state.sn.add.checked" v-on:click="save('addLicense')">
                                    Сохранить
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" v-if="isSubscribe()">
                <div class="col-12">
                    <div class="row mb-3">
                        <div class="col-12">

                        <div class="badge badge-info mb-3">Подписка {{this.$store.state.licenses.subscribe.length+1}}</div>

                        <table class="table table-borderless mb-0" style="width: auto">
                            <tr>
                                <td class="p-0" style="vertical-align: middle">
                                    <label for="login" class="mb-3 label">Серийный номер</label>
                                </td>
                                <td class="p-0 px-3" style="vertical-align: middle">
                                    <div class="mb-3">
                                        <div class="ui-ctl ui-ctl-textbox ui-ctl-block ui-ctl-sm ui-ctl-success" v-if="this.$store.state.sn.subscribe.checked">
                                            <input type="text" class="ui-ctl-element" id="sn" name="sn" v-model="subscribeLicenseSn" />
                                        </div>
                                        <div class="ui-ctl ui-ctl-textbox ui-ctl-block ui-ctl-sm" v-if="!this.$store.state.sn.subscribe.checked">
                                            <input type="text" class="ui-ctl-element" id="sn" name="sn" v-model="subscribeLicenseSn" />
                                        </div>
                                        <div class="ui-alert ui-alert-xs mt-3 " style="font-size: 0.8rem; padding:2px 4px !important;" v-if="this.$store.state.sn.subscribe.checked">
                                            <span class="ui-alert-message" v-html="this.$store.state.sn.subscribe.subscription" ></span>
                                        </div>
                                    </div>
                                </td>
                                <td class="p-0 px-1" style="vertical-align: top" v-if="!this.$store.state.sn.subscribe.checked && this.subscribeLicenseSn.length>0">
                                    <div class="mb-3">
                                        <button class="ui-btn ui-btn-primary ui-btn-sm" v-on:click="checkSN('subscribeLicense')">Проверить</button>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="p-0" style="vertical-align: middle">
                                    <label for="date" class="mb-3 label">Дата окончания</label>
                                </td>
                                <td class="p-0 px-3" style="vertical-align: middle">
                                    <div class="mb-3">
                                        <div class="ui-ctl ui-ctl-textbox ui-ctl-block ui-ctl-sm">
                                            <input type="date" class="ui-ctl-element" id="date" name="date" v-model="subscribeLicenseDate" />
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>

                            <div draggable="false" class="row no-gutters spec align-items-stretch mb-1" v-for="item in this.subscribeLicense" :data-id="item.id" :key="item.id" :id="'box'+item.id" v-on:dragstart="dragstart($event)">
                                <div class="col-auto spec__title py-1 px-1 d-flex">
                                    <button class="ui-btn ui-btn-sm ui-btn-danger ui-btn-icon-remove" v-on:click="removePosition('subscribeLicense',item.id)"></button>
                                </div>
                                <div class="col spec__title py-1 px-3 d-flex align-items-center">
                                    {{ item.title }}
                                </div>
                                <div class="col-auto spec__quantity py-1 px-1 d-flex">
                                    <div class="ui-ctl ui-ctl-textbox ui-ctl-sm" style="width: 75px">
                                        <input type="number" :data-id="item.id" :value="item.licQuantity" :min="1" :max="getMaxQuantity('subscribeLicense',item.id)" v-on:change="changeLicQuantity('subscribeLicense',$event)" class="ui-ctl-element" />
                                    </div>
                                </div>
                                </div>
                            </div>
                            <button class="ui-btn ui-btn-primary-dark ui-btn-lg w-100 mt-4" v-if="this.subscribeLicense.length>0  && this.$store.state.sn.subscribe.checked" v-on:click="save('subscribeLicense')">
                                    Сохранить
                                </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


    `,
  })
})(window)
Если блог был полезным, можете угостить меня "чашечкой кофе" :)

Сбер по номеру телефона +7 (953) 585-13-09 Вероника.
Спасибо!