[technical tutorial] national standard protocol platform easygbs cascading supports customized national standard channels

GB protocol video platform EasyGBS It can connect with the public security network 、 The national standard protocol video streaming media service of campus network , For many projects , The cascading function of GB protocol is a very practical function , Connecting the upper and lower platforms and realizing unified management are the requirements of many projects .

stay EasyGBS In the latest development process , We did EasyGBS Cascade custom GB channel , This article shares with you our implementation process and methods .

1. Create a new one InputTag.vue The custom component is used to edit custom cascading GB channels .

<template>
  <div>
    <el-input
      class="input-new-tag"
      v-if="inputVisible"
      v-model="inputValue"
      type="number"
      ref="saveTagInput"
      size="small"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    >
    </el-input>
    <el-button type="text" v-else class="button-new-tag" size="small" @click="showInput">{{channel.CustomID || channel.ID}}</el-button>
  </div>
</template>
 
<script>
  export default {
    props: ['channel'],
    data() {
      return {
        inputVisible: false,
        inputValue: ''
      };
    },
 
    methods: {
      showInput() {
        this.inputValue = this.channel.CustomID || this.channel.ID
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        let lodInputValue = this.channel.CustomID || this.channel.ID
        if (inputValue&&lodInputValue!=inputValue) {
          this.$emit('submit', this.channel, inputValue)
        }
        this.inputVisible = false;
      }
    }
  }
</script>
<style lang="scss" >
  .button-new-tag {
    width: 100%;
    text-align: left;
    padding: 0 4px!important;
    height: 32px;
    font-size: 14px;
    &:hover {
      color: #FF4D23 !important;
      background-color: transparent !important;
    }
  }
  .input-new-tag {
    height: 22px;
    border: 1px solid #606266;
    vertical-align: bottom;
    .el-input__inner {
      padding: 0 4px;
      height: 20px;
 
    }
  }
 
</style>

2. Import... In the components to be imported InputTag.vue Components .

import InputTag from "./InputTag.vue";
 
export default {
  components: {
    InputTag
  }
}

3. Add a column of custom edit channels to the table , And introduce a custom InputTag Components , Component has two properties , One channel Channel information required ,submit Submit the edited callback function .

<el-table-column
     label=" Custom channel national standard number "
     min-width="180"
     show-overflow-tooltip
  >
   <template slot-scope="props">
       <div>
           <InputTag :channel="props.row" @submit="onCustomSubmit"/>
       </div>
   </template>
</el-table-column>
 

4. When you click Customize ID The input box... Will be displayed , You can edit the channel by yourself , If you lose focus in the input box, it will be automatically uploaded to the server and saved .

The preview of the effect is as follows ：